Support NeoGAF

[Zombie James]

I've been tasked by my brother to create a small simple online store. I haven't done any web development for 5+ years so I'm a bit lost on what frameworks and APIs would make my job easy. I'd prefer not to use any bloated or big frameworks like wordpress. My friend who primarily is an app developer has suggested using angular and node.js for all the web code and mongo db as the database. Does this sound like a sensible approach to you guys? What would you recommend?

There's nothing wrong with using Wordpress with something like Woocommerce when there's e-commerce involved. Some things I'd rather avoid building from scratch, and with Wordpress they can update inventory and prices themselves without bothering you to do it constantly.

 

[AquaticSquirrel]

My advice is: For small projects, use Flask. It's fantastic. I've used it on multiple projects in the past and it's a joy to use. Flask itself is quite small and doesn't do a lot by itself but it's easily extensible and has a lot of excellent support libraries that integrate it with e.g. SQLAlchemy (which is also excellent), add login/logout functionality (Flask-Login) and other things.

For bigger projects, you can either go with Django or use a statically typed language like Java (which has surprisingly many modern web development libraries, it's not just Java EE anymore). I don't think you need to start low-level, but it's never a bad idea to try to understand the lower level details of what you're doing. I think it's probably more rewarding to start with something that'll get you results quickly, without a ton of setup and boilerplate code.

Thanks for the advice! Yeah I think I might have been thinking a bit too boilerplate with CGI scripting and all that so I've scrapped that and started learning CherryPy. It's a handy server and it's own micro framework so I'm going to start with this as it's all OO Python.

But from there I will definitely move up to Flask and even use CherryPy as the server for Flask framework. And then eventually Django.

As for the frontend I've decided to go with React.js after a lot of research. Afterall I'll be starting on small projects initally and building from there. I'll be using Postgresql for the database server and I've started learning about JSON which seems fairly straightforward so far.

 

[Skinpop]

There's nothing wrong with using Wordpress with something like Woocommerce when there's e-commerce involved. Some things I'd rather avoid building from scratch, and with Wordpress they can update inventory and prices themselves without bothering you to do it constantly.

I come from a low level C coding background, from that experience wordpress looks like horror to me. I'm used to being in control of my code and only writing/using features that I need.

I've used wordpress for a personal blog before and honestly I hated it. It was easy enough to set up but I still felt miserable using it. Later I redid my blog using wintersmith, a minimalistic blog framework. I liked that experience a lot more than wordpress.

I'd really suggest just using an existing solution like WordPress, Magento, or something similar.

I totally agree. I'd go with a prefab solution -- especially when dealing with friends/family, because you may wind up supporting/maintaining it indefinitely. And you'll probably save some up-front time, too. But if you want to get back into web development, knock yourself out with Angular, etc.!

I'm not looking to get back into web dev

This shop is not going to be anything beyond the absolute basics and probably won't make much money at all. The only thing we need is to handle inventory and a cart system. checkout and payment is done through other services.
We're definitely not going to use a framework that costs money.

I'll concede that maintenance is a valid concern and that might sway me towards using wordpress anyway.

 

[Copons]

I come from a low level C coding background, from that experience wordpress looks like horror to me. I'm used to being in control of my code and only writing/using features that I need.

I've used wordpress for a personal blog before and honestly I hated it. It was easy enough to set up but I still felt miserable using it. Later I redid my blog using wintersmith, a minimalistic blog framework. I liked that experience a lot more than wordpress.



I'm not looking to get back into web dev

This shop is not going to be anything beyond the absolute basics and probably won't make much money at all. The only thing we need is to handle inventory and a cart system. checkout and payment is done through other services.
We're definitely not going to use a framework that costs money.

I'll concede that maintenance is a valid concern and that might sway me towards using wordpress anyway.

When someone says "inventory" I instantly start losing hair due to stress induced panicking, though.

Inventory is a cute little thing when a store has just a bunch of items, but god forbid, as soon as anything you sell has a variation of some sort, things just go downhill pretty fast.
Think of a clothing store: shirts come in different colors, each color in different sizes; and shoes, different colors, different sizes (but different than shirts sizes)!

And yes, if you have few items to sell, it could still be easy enough to manage, but when/if growing, everything becomes super painful.


So, even if your store won't directly handle payments, your inventory will likely be hard to pull off, especially if you don't have any experience on ecommerce sites.

Then, you still have to handle the communication system between store and customers, emails for pretty much anything that happens, and an easy way to handle refunds and such.


What I mean is that developing an ecommerce seems easy, but there are so many finicky parts going on that at some point it just isn't worth writing it from scratch at all.

 

[JeTmAn81]

There are way too many out-of-the-box solutions out there for e-commerce to develop one on your own for a simple storefront. Just find something third party that will work.

 

[Daffy Duck]

Anyone have any decent code for simple mobile navigation? Like you click the menu/three lines and a drop down comes down nicely with your nav on it.

I know there's loads out there but I'd like to know how to build my own as I just feel it's something I should know, CSS only would be perfect but I know we don't live in a perfect world. I know there's frameworks as well like foundation/bootstrap that would do 90% of the work for me too but as I say I just want to know how to do this.

 

[D4Danger]

Anyone have any decent code for simple mobile navigation? Like you click the menu/three lines and a drop down comes down nicely with your nav on it.

I know there's loads out there but I'd like to know how to build my own as I just feel it's something I should know, CSS only would be perfect but I know we don't live in a perfect world. I know there's frameworks as well like foundation/bootstrap that would do 90% of the work for me too but as I say I just want to know how to do this.

if you only want to use CSS you can use the checkbox hack

so something like

<html>

<style>
#toggle:checked ~ header #menu {
  display: block;
}

#toggle {
  display: none;
}

#menu {
  display: none;
}
</style>

<input type="checkbox" id="toggle" />

<header>
  <label for="toggle">Toggle Menu</label>
  <ul id="menu">
    <li>Menu Item #1
    <li>Menu Item #2
    <li>Menu Item #3
  </ul>
</header>

this uses a checkbox at the top level (inside the body) and then use a selector to target the menu. The idea is pretty simple but it's definitely a hack and might not be what you want (also I found the performance is spotty on old mobile devices)

if you want to use JS you could create your mobile menu in a visible state (so people who disable js can still see it) and then use some progressive enhancement js that basically sets up a toggle button and hides the menu on click

something like

<html>

<style>
.hide-menu #menu {
  display: none;
}
</style>

<header>
  <button id="toggle">Toggle Menu</button>
  <ul id="menu">
    <li>Menu Item #1
    <li>Menu Item #2
    <li>Menu Item #3
  </ul>
</header>

<script>
var toggle = document.getElementById("toggle");
toggle.addEventListener("click", function () {
  document.documentElement.className = (document.documentElement.className.indexOf("hide-menu") >= 0) ? "" : "hide-menu";
});
document.documentElement.className = "hide-menu";
</script>

these are just a couple of basic examples to show you the ideas but from here you should be able to put something together that suits your needs.

 

[Daffy Duck]

Amazing.

Thanks.

 

[Copons]

So, uh, maybe some of you remember me venting and ranting, some months ago, about my new-hired life in a corporate environment (much hated, but it sure pays the bills) after of doing cool stuff as a self-employed.

Well, I guess it's that time of the year when I vent and rant again!


Right now my project is on hold waiting for the client to do some stuff on their end, so today I was borrowed to another team to help their front-end guys in the final stretch of their project.

Up until yesterday, I thought that the worst thing possible for a web developer was the utter sluggishness of building stuff in a Java environment.
I mean, for us it's usually just a matter of properly configure a task runner, wait a second for it to rebuild after saving a file and automatically refresh the browser, and if everything looks good, push something to a repo or upload to an FTP server.
So, when instead I had to run Maven every single fucking time, waiting 30 second to let it rebuild the entire project and manually reloading the browser, losing all states and stuff, I thought that was the hell of web development.

But of course nope, there's no end to the depths of despair.

This new project works directly in a Win7 virtual machine, where everything except the project folder gets wiped out every night.
So every morning I'll have to start up the server, a menial task that takes literally 15 minutes, and then I'm forced to use Eclipse, because I cannot install Atom or Sublime, nor Node and npm etc.
Then I have to struggle coding there on a connection thwarted by a hundred of bottlenecks (the local corporate proxy, some Norton nonsense - which btw don't like domains with "cdn" in their name, so most web pages look like I'm browsing with Lynx - the general slowness generated by 300 people struggling to watch YouTube at work, the VM itself, etc.), where even scrolling a folder takes minutes and it totally reminds me when I was learning Linux through a Knoppix live disk back in the late 90s.

On top of that, I've discovered the other two front-end guys learned Angular DURING this project.
So yeah, at least I won't have any performance anxiety going on.
But at the same time I'll be forced to navigate through tons of unordered files (no one-folder-per-feature, but simply everything dumped in the controllers/services/etc. folders), each apparently 5000+ lines long.

I honestly don't know how they managed to get the app to today's state (which is: working pretty fine, I'd say), but goddamn.


tl;dr
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARGH

 

[grmlin]

It's the worst to hop onto a project this late. And files with >5000 loc are simply unacceptable.

my deepest condolences!

 

[crooked spin]

Hey designers, what are some good alternatives to the 27" Apple Cinema display?

Looking at a few Dells right now -- do I need to go with the UltraSharp UP2716D ($800) or is the U2715H ($460) good enough? Are there are brands I should consider?

 

[travislopes]

Hey designers, what are some good alternatives to the 27" Apple Cinema display?

Looking at a few Dells right now -- do I need to go with the UltraSharp UP2716D ($800) or is the U2715H ($460) good enough? Are there are brands I should consider?

I got rid of my Apple 27" Cinema Display a few months ago in lieu of the ASUS PB278Q. Colors look great on it, decent brightness levels and has a nice built in stand where you can adjust the height, tilt and orientation of the monitor.

 

[Vostro]

So going to get my first gig for a website that needs a new look. It's a small website and only be about 4-5 pages. What I'm not sure is that if I should use a CMS or not? I think that five pages is small enough that it doesn't really need a CMS and my client doesn't really add content himself. If he does want to add stuff in the future he will probably contact me. What do you guys think?

 

[D4Danger]

So going to get my first gig for a website that needs a new look. It's a small website and only be about 4-5 pages. What I'm not sure is that if I should use a CMS or not? I think that five pages is small enough that it doesn't really need a CMS and my client doesn't really add content himself. If he does want to add stuff in the future he will probably contact me. What do you guys think?

I wouldn't bother. Plus you'll be responsible for keeping the CMS up-to-date if you use something like wordpress which is a hassle.

and remember to charge them for repeat work if it's outside your agreed contract. None of this "it'll just take five minutes"

 

[WanderingWind]

Does anybody know of a way to embed a Google map so that it's responsive? I've Googled around a bit, but the solutions that I've found simply do not function. I even tried embedresponively.com and it basically shat out a completely broken deal.

 

[Starphoenix]

Does anybody know of a way to embed a Google map so that it's responsive? I've Googled around a bit, but the solutions that I've found simply do not function. I even tried embedresponively.com and it basically shat out a completely broken deal.

In what way? If you want to actually re-size the map you should be able to wrap the API in DIV and set the width to a percentage. Don't know if that helps?

 

[WanderingWind]

In what way? If you want to actually re-size the map you should be able to wrap the API in DIV and set the width to a percentage. Don't know if that helps?

That was my first approach. What happens is that solution works on desktop. Then when it sizes down for mobile, it ignores the div width and uses the iframe size width. And setting that width to a percent doesn't work either.

 

[Sourcerer]

I started working for an agency recently (a few months), I wonder if anyone has any experience that will help me along. Rant incoming.

I've avoided applying for agencies in the past because I suspected I wouldn't like the work long term, but this one seemed more attention worthy, and I do get the chance to work some interesting projects with large clients. So I'm assigned on a large project for a fairly big client, but I'm conflicted about how the business side of things effects my work.

The project has been going for a year prior to my arrival and has seen various different developers and coding styles. The framework it's built with is awful (Ext JS) and there's need for huge refactors everywhere. Trivial things are taking hours to work out sometimes and performance is a concern. Unit tests have also been abandoned and are very difficult to patch back up.

Problem is, we can't do large refactors without the time being specifically approved by the client, and we don't want to tell the client it needs such a large refactor... Things are too tightly coupled to refactor small parts with the kind of effect needed. I even feel like a full rebuild wouldn't be a bad idea.

Feels like the project is checkmate... Out sourcing doesn't seem like a good idea...

 

[Somnid]

I started working for an agency recently (a few months), I wonder if anyone has any experience that will help me along. Rant incoming.

I've avoided applying for agencies in the past because I suspected I wouldn't like the work long term, but this one seemed more attention worthy, and I do get the chance to work some interesting projects with large clients. So I'm assigned on a large project for a fairly big client, but I'm conflicted about how the business side of things effects my work.

The project has been going for a year prior to my arrival and has seen various different developers and coding styles. The framework it's built with is awful (Ext JS) and there's need for huge refactors everywhere. Trivial things are taking hours to work out sometimes and performance is a concern. Unit tests have also been abandoned and are very difficult to patch back up.

Problem is, we can't do large refactors without the time being specifically approved by the client, and we don't want to tell the client it needs such a large refactor... Things are too tightly coupled to refactor small parts with the kind of effect needed. I even feel like a full rebuild wouldn't be a bad idea.

Feels like the project is checkmate... Out sourcing doesn't seem like a good idea...

If the client doesn't know they are sitting on pile of shit there is a moral obligation to tell them. They probably won't do anything about it, but at least you can say they were warned. From my experience some businesses will never spend the money to do over or hardcore refactor because of cost and because they can't possibly cram all their years of poorly thought out (but strangely necessary to someone) features into a new project. Those are the projects that will go until a competitor arises and destroys them and everyone working on and using it curses having ever been associated with it.

 

[jesalr]

That was my first approach. What happens is that solution works on desktop. Then when it sizes down for mobile, it ignores the div width and uses the iframe size width. And setting that width to a percent doesn't work either.

Sub-optimal, but could you use JS to alter the iframe width?

That said, I've never really had an issue setting an iFrame to 100% width of it's container div and having it respond correctly across resolutions.

 

[grmlin]

That was my first approach. What happens is that solution works on desktop. Then when it sizes down for mobile, it ignores the div width and uses the iframe size width. And setting that width to a percent doesn't work either.

Do you use the Google Maps Javascript api? It's not that complicated and worked fine in many projects for me.

https://developers.google.com/maps/documentation/javascript/tutorial

I never used the api with a key, it works just fine if you don't abuse it I think.


A boring div, styled fluidly.

<div class="map__container"></div>

and some JS

// Create an lat lng object for the center of the map
var myLatLng = {lat: this.props.lat, lng: this.props.lng};

// init the map, this.mapEl = .map__container
var map = new google.maps.Map(this.mapEl, {
    center: myLatLng,
    zoom: this.props.zoom,
    backgroundColor: 'rgb(190,231,228)',
    disableDefaultUI: true
});


// Add a marker if you want to
var marker = new google.maps.Marker({
    position: myLatLng,
    map: map
});

// Center the map, if the div resizes. You may want to add a condition, if the user already moved the map itself.
google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(myLatLng);
});

 

[WanderingWind]

I do use the API. Sorry, I've figured a solution to my problem. I'll post a jfiddle when I figure out this showHide function and strip out the identifying info out of the map.

 

[Hellix]

I have a specific problem, maybe someone here that is good with JavaScript can help me out. I am implementing a form in a panel that pushes the body element to the left (example here). The issue stems from using Google's latest reCaptcha and when the user clicks to verify he is not a robot.

The reCaptcha will sometimes pop open a panel of 9 images and you need to select certain ones. Since I am pushing the entire body element to the left by 400px, the reCaptcha's verification panel ends up being loaded 400px away from where it needs to be. This panel is a div that gets loaded at the bottom of the body element when it has to, but it uses a long in-line attributed style that calculates where it needs to be positioned on load and window resize--it has no class on it.

The best I can do is create an event listener on window resize, where I check for that div and just add 400px to the current window width onto the div's "left" style, then it gets positioned as it normally should next to the reCaptcha's checkbox area instead floating awkwardly alone on the page. It would be great if that div was available on document ready, but it only gets loaded when the user needs to verify if human. There does not seem to be a way to create an event handler for a div that gets written to the page after the document has been loaded already, unless I do something like create a function on a timer that would constantly try to find that div every millisecond. There also doesn't seem to be any CSS customizations on the reCaptcha's API end where I can override what its doing. Is what I am trying to do impossible?

 

[Chris R]

Google Maps is responsive out of the box. If you are still having issues post a link and we should be able to help.

 

[Somnid]

I have a specific problem, maybe someone here that is good with JavaScript can help me out. I am implementing a form in a panel that pushes the body element to the left (example here). The issue stems from using Google's latest reCaptcha and when the user clicks to verify he is not a robot.

The reCaptcha will sometimes pop open a panel of 9 images and you need to select certain ones. Since I am pushing the entire body element to the left by 400px, the reCaptcha's verification panel ends up being loaded 400px away from where it needs to be. This panel is a div that gets loaded at the bottom of the body element when it has to, but it uses a long in-line attributed style that calculates where it needs to be positioned on load and window resize--it has no class on it.

The best I can do is create an event listener on window resize, where I check for that div and just add 400px to the current window width onto the div's "left" style, then it gets positioned as it normally should next to the reCaptcha's checkbox area instead floating awkwardly alone on the page. It would be great if that div was available on document ready, but it only gets loaded when the user needs to verify if human. There does not seem to be a way to create an event handler for a div that gets written to the page after the document has been loaded already, unless I do something like create a function on a timer that would constantly try to find that div every millisecond. There also doesn't seem to be any CSS customizations on the reCaptcha's API end where I can override what its doing. Is what I am trying to do impossible?

There's ways. Firstly, don't position the body element ever, that should roughly be equivalent to a viewport, just move elements inside of it. It sounds like recaptcha is absolute positioning against the body but it's really hard to tell what your issue is without seeing code. If you for some reason can't stop moving the body there are hacks. The easiest is use !important on your CSS to override inline styles. It's bad practice to use in anything but dire situations but you can mess with it. If your browser specs support it you can use mutation observers to notify when elements are added/changed without the bad performance of polling. Older browsers have mutation events which have bad performance but don't have the polling lag and achieve something similar.

 

[Starphoenix]

So what is the benefit of using Squarespace over something like Wordpress? How flexible is SS, and is it worth learning how to use and develop for?

 

[Hellix]

There's ways. Firstly, don't position the body element ever, that should roughly be equivalent to a viewport, just move elements inside of it. It sounds like recaptcha is absolute positioning against the body but it's really hard to tell what your issue is without seeing code. If you for some reason can't stop moving the body there are hacks. The easiest is use !important on your CSS to override inline styles. It's bad practice to use in anything but dire situations but you can mess with it. If your browser specs support it you can use mutation observers to notify when elements are added/changed without the bad performance of polling. Older browsers have mutation events which have bad performance but don't have the polling lag and achieve something similar.

Well, I am moving the body because that is how I see I need to accomplish these "push" menus that you see on a lot as mobile menus, for example. The difference is I want to use it as a way to push in a small form rather than a navigation menu (html/css example can be seen here). If that's bad practice, then I can try the slide menu.

 

[Somnid]

Well, I am moving the body because that is how I see I need to accomplish these "push" menus that you see on a lot as mobile menus, for example. The difference is I want to use it as a way to push in a small form rather than a navigation menu (html/css example can be seen here). If that's bad practice, then I can try the slide menu.

I'd do it like this:

<html>
  <body>
     <nav class="menu">Menu</nav>
     <div class="content">Content</div>
  </body>
</html>

body {
  position: relative;
}
body.open .menu {
  transform: translateX(400px);
  transition: 0.5s;
}
body.open .content {
   transform: translateX(400px);
   transition: 0.5s;
}
.menu {
  position: absolute;
  left: -400px;
}

Then when you click just toggle class "open" on the body. Might be a few minor css adjustments but that would be the basic idea.

 

[Hellix]

I'd do it like this:

Then when you click just toggle class "open" on the body. Might be a few minor css adjustments but that would be the basic idea.

I'll give that a try, thanks. I think I used something like that previously, but I was getting inconsistent results across IE-Chrome-Firefox.

 

[grmlin]

As a side note: you should use translate3d to be sure that the animation is GPU accelerated and much smoother in all browsers.

For browser support:

- translate3d support --> smooth animations
- translate support --> not so smooth animations
- no translate --> no animations (< IE10)

Thats what I do.

 

[Somnid]

As a side note: you should use translate3d to be sure that the animation is GPU accelerated and much smoother in all browsers.

For browser support:

- translate3d support --> smooth animations
- translate support --> not so smooth animations
- no translate --> no animations (< IE10)

Thats what I do.

Curious, what browsers don't accelerate translate 2D? All of them should. Also IE9 has translate, it just doesn't have transition which I generally push as an acceptable compromise for a 4 versions out of date browser. Everyone else shouldn't have to suffer with jquery animate or something just to support a minor effect in an old brower.

 

[grmlin]

AFAIK mobile Safari accelerates only 3d transforms.

This may have changed though.


I don't care for js animations anymore. Old browsers only loose some animations, the website itself still works. And if I animate with js (for whatever reason) I highly recommend using something like velocity that uses requestAnimationFrame.

 

[Futureman]

so I run a book printing machine at work and this guy I print for wants me to create a website to sell his book.

Where should I buy the domain and web hosting from? I doubt this guy's book is ever going to be that successful, but I'm thinking WHAT if he blows up and I sign him up for some cheaper webhost that can't handle the traffic? Or should I not worry about that for now and just use something cheaper? Then if he does get big I could switch him to a more robust host.

 

[Futureman]

well I use name.com for my own website right now and it looks like they do web hosting as well. $96/year with a free domain, 100 GB of space, 1,000 GB of bandwidth. Should probably be sufficient and if I have to, I can upgrade to their unlimited bandwidth for ~$50 more.

I'm open ears though if someone else has a different opinion.

 

[PetriP-TNT]

The New Wordpress.com https://developer.wordpress.com/calypso/

Project Stack

The new WordPress.com codebase, codenamed "Calypso," moves WordPress.com away from MySQL and PHP. It's built entirely in JavaScript, and communicates with WordPress.com only using our REST API. This means the new WordPress.com is a browser-based client for our API, just like any other application built on top of it — lighter, faster, and more flexible for a mobile-focused world.

Calypso uses a thin layer of Node.js on the server to build the initial web page, and much of the logic is run in the client as a Single Page Application (SPA) built in-house, leveraging many other open source JavaScript modules. Calypso adopted Facebook's React view library early on, and has been heavily influenced by other open source work in the React community.

 

[Ikuu]

But people on GAF told me JavaScript on the server was stupid!

 

[runningjoke]

I haven't worked with WordPress so I don't know how much of an improvement it is, but that video looks nice.

 

[PetriP-TNT]

But people on GAF told me JavaScript on the server was stupid!

Those people were wrong and they were stupid!

BRB adding (new) Wordpress back to my CV

 

[WanderingWind]

So, I'm seeing some back and forth on parallax effects as part of modern web designs. Some are saying "It's great" others are saying "stop fucking using it."

For something simple, like having card above a static background layer, is that alright? Or is that dated/garbage?

 

[Bots are better than you]

So, I'm seeing some back and forth on parallax effects as part of modern web designs. Some are saying "It's great" others are saying "stop fucking using it."

For something simple, like having card above a static background layer, is that alright? Or is that dated/garbage?

If it adds to your layout as a nice eye-candy, why not?

I think you have to approach such effects with moderation, keep it simple, don't overuse (as in 3 embedded videos in different parallax layers on autoplay on scroll *blech*) ... if something is visually appealing and fitting, no problem. Imo.

 

[diaspora]

So, I'm seeing some back and forth on parallax effects as part of modern web designs. Some are saying "It's great" others are saying "stop fucking using it."

For something simple, like having card above a static background layer, is that alright? Or is that dated/garbage?

Used in moderation its fine. I generally don't care for it.

 

[WanderingWind]

Thanks. It's interesting being self-taught on stuff. The internet...well, it's not as big of a help as you'd think with stuff like this. So many opinions dressed up as factual things and almost always countered by people stating the opposite. Like sliders? I think I've come to the conclusion that they are Very Not Good Things to Do, but there was a lot of debate about them.

Conversely, on the web design subreddits, there was one guy who went on a warpath against the hamburger menu. As a newb, I started to look into alternatives on mobile for it. But what I discovered is that there really isn't one. Then I compared it to major sites and I was hard pressed to find any major site with a variety of sub pages and mixed media not using it. Maybe I'm wrong on that one, but I'm not seeing how other sites that aren't other web designers talking about how the hamburger menu is bad news.

 

[diaspora]

Thanks. It's interesting being self-taught on stuff. The internet...well, it's not as big of a help as you'd think with stuff like this. So many opinions dressed up as factual things and almost always countered by people stating the opposite. Like sliders? I think I've come to the conclusion that they are Very Not Good Things to Do, but there was a lot of debate about them.

Conversely, on the web design subreddits, there was one guy who went on a warpath against the hamburger menu. As a newb, I started to look into alternatives on mobile for it. But what I discovered is that there really isn't one. Then I compared it to major sites and I was hard pressed to find any major site with a variety of sub pages and mixed media not using it. Maybe I'm wrong on that one, but I'm not seeing how other sites that aren't other web designers talking about how the hamburger menu is bad news.

It's not lol.

Just... build whatever you want, so long as you think it looks good and isn't bloated as fuck.

 

[Maiar_m]

Ergonomically, the hamburger menu is a cop-out. It's saying "fuck that, let's put my stuff in a place where it's hidden, and I hope you don't mind changing your grip on your phone to reach that menu trigger because I'm gonna put it top right, motherfucker".

Sometimes you don't have a choice. Mostly though, you're going to have to think real hard about how users can navigate your content on mobile. Do you provide other points of entry in your layout and thus make the menu less of a necessity? Go for it. Do you provide quick-access links that are always available and cater to 99% of the use people have for a menu PLUS that hamburger in case they're 1%ers? Splendid. Does abstracting the menu make your storytelling and user engagement better? Yay! Are your doing it because "what else can I do" or "everybody does it"? Oh boy.

Hamburger menus are not the devil per se. They should not be an excuse for lazy design work either.

 

[The Albatross]

I've been tasked by my brother to create a small simple online store. I haven't done any web development for 5+ years so I'm a bit lost on what frameworks and APIs would make my job easy. I'd prefer not to use any bloated or big frameworks like wordpress. My friend who primarily is an app developer has suggested using angular and node.js for all the web code and mongo db as the database. Does this sound like a sensible approach to you guys? What would you recommend?

If you're new to the web, I'd also recommend using WordPress and WooCommerce, especially if your brother is going to be the one implementing it.

Like you followed up with though, WordPress is an "out of the box" website that can be customized to your heart's content, but it is not a lean, nimble website engine like something smaller... Node, Angular, Mongo, and Espress ("MEAN") stack would be fine as well but you'd be doing a lot more from scratch, and by using something like WP + WC, you'd be using something that hundreds of thousands of small online stores already use, with a robust plugin and theme community already around them.

I've been pretty happy with WooCommerce and I've used it for two clients... they seem to like it as well.

 

[The Albatross]

I haven't worked with WordPress so I don't know how much of an improvement it is, but that video looks nice.

Those people were wrong and they were stupid!

BRB adding (new) Wordpress back to my CV

WordPress, the software, isn't being built with JS, but WordPress.com dashboard tools have been rebuilt on React. The new WordPress.com dashboard is now a react application running on Node, and it uses the new WP Rest API (built into core in the last release) to interact with any websites linked up to it.

It's similar to how ManageWP's Orion has worked. Which, btw, if you manage multiple WordPress websites, manageWP and especially their Orion release, is pretty great. I manage about 15 WP client sites, and this makes my life immensely easier, especially with their daily incremental backups that have effective zero server load.

So, I'm seeing some back and forth on parallax effects as part of modern web designs. Some are saying "It's great" others are saying "stop fucking using it."

For something simple, like having card above a static background layer, is that alright? Or is that dated/garbage?

As a developer, I'm very thankful for the movement that has come out against parallax. Parallax is basically the definition of something that adds almost no value, takes way too much time to develop (and not just hard development time, but also negotiations and consults with the client or designer, who all have different impressions of how something should move). The parallax effects that people are moving quickly away from are those that hijack the traditional behavior of the mouse/scroll wheel in a browser and make it difficult to focus on content. Hijacking the scroll behavior so that you can hide and show your content based on scroll is annoying for most visitors, and frustrating because many visitors won't know when content is "fully present." Like, if you have a sentence build itself based on the scroll behavior (something you see a lot and it sucks), it's tough for a visitor to know "Oh, okay, now this sentence is fully built and I can read it."

As a developer I'm basically always against parallax on any client project. I hate it and I jack up the cost for it to persuade the designer to do something else. If they want to hire someone else or pay me an exorbitant amount for something that will have negligible ROI, then that's their prerogative and I'll build it.

 

[PetriP-TNT]

WordPress, the software, isn't being built with JS, but WordPress.com dashboard tools have been rebuilt on React. The new WordPress.com dashboard is now a react application running on Node, and it uses the new WP Rest API (built into core in the last release) to interact with any websites linked up to it.

It's similar to how ManageWP's Orion has worked. Which, btw, if you manage multiple WordPress websites, manageWP and especially their Orion release, is pretty great. I manage about 15 WP client sites, and this makes my life immensely easier, especially with their daily incremental backups that have effective zero server load.

Yeah, I assumed that it would mean that they would be deprecating the PHP Wordpress altogether, which might have been too soon: still, the wp-calypso provides pretty good base to build upon to.

 

[Copons]

About WP going JS: I'm super happy about it, but for now is a bit too early to party hard, as Automattic's prototype React theme is still very PHP-bound.


Re: my last rant
Apparently I whined too soon.
Developing on a virtual machine on the client server is a major pain in the ass, but when the client is sloppy as hell, forgetting to turn on the machine for DAYS, well, it's totally great.

So as I couldn't do any actual work for the last couple of days, to kill the boredom I decided to start writing a CSS framework.

Yadda yadda yadda, I got to a point where I have a big doubt on how to achieve something.
Basically: I'm doing the customary top bar, complete with dropdown menus.
Click on a bar item to open its dropdown menu. Each dropdown menu items can also have sub-dropdown menus (and each sub-dropdown menus items can have their sub-sub-dropdowns, etc.).

Now the thing is: if you click on a menu while another menu is already open, the previous menu should close.
But, as of now, if you click on a sub-menu, it (correctly) closes its parent too.

Example:

<ul>
  <li>
    <a class="navbar-dropdown">Menu</a>
    <ul>
      <li>
        <a class="navbar-dropdown">Submenu</a>
        <ul>
          <li>Item</li>
          <li>Item</li>
        </ul>
      </li>
      <li>Item</li>
    </ul>
  </li>
  <li>Item</li>
</ul>

$('.navbar-dropdown').on('click', function (e) {

  // close all menus except this one
  closeNavbarDropdown($('.navbar-dropdown').not($(this)).next());

  var navbarItem = $(this).next();

  if (navbarItem.css('display') === 'none') {
    // open this menu
    openNavbarDropdown(navbarItem);
  }
  else if (navbarItem.css('display') === 'block') {
    // close all child menus
    closeNavbarDropdown(navbarItem.find('ul'));
    // close this menu
    closeNavbarDropdown(navbarItem);
  }
});

(I'm using Zepto and Velocity - which lacks a toggle shortcut -, just because I've never used any of them before)

 

[D4Danger]

As a developer, I'm very thankful for the movement that has come out against parallax. Parallax is basically the definition of something that adds almost no value, takes way too much time to develop (and not just hard development time, but also negotiations and consults with the client or designer, who all have different impressions of how something should move). The parallax effects that people are moving quickly away from are those that hijack the traditional behavior of the mouse/scroll wheel in a browser and make it difficult to focus on content. Hijacking the scroll behavior so that you can hide and show your content based on scroll is annoying for most visitors, and frustrating because many visitors won't know when content is "fully present." Like, if you have a sentence build itself based on the scroll behavior (something you see a lot and it sucks), it's tough for a visitor to know "Oh, okay, now this sentence is fully built and I can read it."

As a developer I'm basically always against parallax on any client project. I hate it and I jack up the cost for it to persuade the designer to do something else. If they want to hire someone else or pay me an exorbitant amount for something that will have negligible ROI, then that's their prerogative and I'll build it.

I agree with all this. imo anything that interferes with scrolling should be outlawed on the web. It's a terrible user experience.

Thanks. It's interesting being self-taught on stuff. The internet...well, it's not as big of a help as you'd think with stuff like this. So many opinions dressed up as factual things and almost always countered by people stating the opposite. Like sliders? I think I've come to the conclusion that they are Very Not Good Things to Do, but there was a lot of debate about them.

Conversely, on the web design subreddits, there was one guy who went on a warpath against the hamburger menu. As a newb, I started to look into alternatives on mobile for it. But what I discovered is that there really isn't one. Then I compared it to major sites and I was hard pressed to find any major site with a variety of sub pages and mixed media not using it. Maybe I'm wrong on that one, but I'm not seeing how other sites that aren't other web designers talking about how the hamburger menu is bad news.

these are well over a year old now and you're starting to see apps like Facebook and YouTube switch from the burger to a normal menu

Why and How to Avoid Hamburger Menus
TechCrunch - Kill The Hamburger Button

It's definitely something to consider now

 

[The Albatross]

Yeah, I assumed that it would mean that they would be deprecating the PHP Wordpress altogether, which might have been too soon: still, the wp-calypso provides pretty good base to build upon to.

About WP going JS: I'm super happy about it, but for now is a bit too early to party hard, as Automattic's prototype React theme is still very PHP-bound.

WordPress, the software, is not going JS. It's still PHP and MySQL based.

Automattic, the company behind WordPress.com and the steward of the WordPress software, offers a dashboard of sorts that allows you to control your WordPress sites, and this is through the commercial website, WordPress.com.

The WP Rest API allows you to interact with the core software (PHP/MySQL) using javascript (or Rails, Python, anything else that can interact with an API), but you're still using javascript to hit an API that gets its functionality from PHP and stores its data in MySQL.

I think when Automattic wrote that WordPress.com was rebuilt as a React application, people got the impression that WordPress, the open source software, was being rebuilt as a React application. It's not. Maybe one day, but probably not... WP is just not a project that fits the methodology of Node/React/MongoDB.