• Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.

Web Design and Development |OT| Pixel perfect is dead, long live responsive design

grmlin

Member
Yeah, the debug comments are on, otherwise it would be impossible to implement anything :D

Problem is, the style I write HTML/CSS with BEM does not fit Drupal at all. And the design itself doesn't fit either. I'm sure people have good reasons to like it, but for me it's really painful.

Thanks for the help though! :)
 

Kalnos

Banned
Anyone know how you create that drop down little icon for example where it says about and what we do here on this site:

http://www.betterlifevietnam.org/#/



Can you do it with a keyboard shortcut?

They're using Bootstrap: http://getbootstrap.com/

More specifically dropdown.js: http://getbootstrap.com/javascript/#dropdowns

If you don't want to use the entirety of Bootstrap then you either use an in-house icon or something like FontAwesome (which is what Bootstrap is using) and then use a dropdown JavaScript library. Though you probably can make a dropdown menu in pure css. Lots of different ways.
 
They're using Bootstrap: http://getbootstrap.com/

More specifically dropdown.js: http://getbootstrap.com/javascript/#dropdowns

If you don't want to use the entirety of Bootstrap then you either use an in-house icon or something like FontAwesome (which is what Bootstrap is using) and then use a dropdown JavaScript library. Though you probably can make a dropdown menu in pure css. Lots of different ways.

Font Awesome.

Thanks guys!
 
I'm buggered by this bug in a test app that I'm working on. I'll post the full code soon but wasn't sure if anybody had any ideas off hand...

So I've got a Node / Express / React app for doing a restaurant search based on location using Google's Places Search in the Maps API. I'm using the Node server-side Google library for the maps API... It works but it always takes two hits to the API before displaying the correct results results. No errors or anything, just it always takes two requests to my API endpoint.

Let's say I do a search for Manhattan either using Postman or on the app itself... The first hit to the api always returns just an empty array [ ]. Then, clicking it again will return the results.

Then let's say I change the search to be Boston, it will always display the results from Manhattan, and then clicking it again will return the results for Boston.

I thought "Well maybe it's the Google maps API..." but I'm also using a separate endpoint to do Address -> Long/Lat geocoding, and it's the same thing. First hit of the API returns an empty array, [ ], second hit will give me my results. And then if I change it up to another address, first hit will show me the same results from my first search (as if I searched Boston again), second hit will show me the results from the right search.

Here's my server code for just the Address lookup. The function for getting the restaurants data is basically identical by design, just a different api endpoint and Google Maps client function.

Code:
var addressData; 

function getAddress(location) {
  googleMapsClient.geocode({
    address: location
    }, function(err, response) {
      if (!err) {
        console.log('New lookup for ' + location)
        addressData = response.json.results;
      } else {
        console.log(err);
      }
  });
  return addressData
} 

// Lookup Address data
app.get('/api/v1/address', function(req, res) {
  res.send(getAddress(req.query.location));
})

This is an MVP so it's rough code, but the basic gist of it is that I'm defining a route in express at /api/v1/address. My app (or postman) hits that route using GET, and then express fires my getAddress(); function... Which is defined above. The route passes in the address using the ?location=AddressHere URL query param.

The googleMapsClient.geocode() function is pretty much straight from Google's tests... I just added the error handling and the console.log.

Any thoughts? I'm kinda stumped on it.
 

Somnid

Member
I'm buggered by this bug in a test app that I'm working on. I'll post the full code soon but wasn't sure if anybody had any ideas off hand...

So I've got a Node / Express / React app for doing a restaurant search based on location using Google's Places Search in the Maps API. I'm using the Node server-side Google library for the maps API... It works but it always takes two hits to the API before displaying the correct results results. No errors or anything, just it always takes two requests to my API endpoint.

Let's say I do a search for Manhattan either using Postman or on the app itself... The first hit to the api always returns just an empty array [ ]. Then, clicking it again will return the results.

Then let's say I change the search to be Boston, it will always display the results from Manhattan, and then clicking it again will return the results for Boston.

I thought "Well maybe it's the Google maps API..." but I'm also using a separate endpoint to do Address -> Long/Lat geocoding, and it's the same thing. First hit of the API returns an empty array, [ ], second hit will give me my results. And then if I change it up to another address, first hit will show me the same results from my first search (as if I searched Boston again), second hit will show me the results from the right search.

Here's my server code for just the Address lookup. The function for getting the restaurants data is basically identical by design, just a different api endpoint and Google Maps client function.

Code:
var addressData; 

function getAddress(location) {
  googleMapsClient.geocode({
    address: location
    }, function(err, response) {
      if (!err) {
        console.log('New lookup for ' + location)
        addressData = response.json.results;
      } else {
        console.log(err);
      }
  });
  return addressData
} 

// Lookup Address data
app.get('/api/v1/address', function(req, res) {
  res.send(getAddress(req.query.location));
})

This is an MVP so it's rough code, but the basic gist of it is that I'm defining a route in express at /api/v1/address. My app (or postman) hits that route using GET, and then express fires my getAddress(); function... Which is defined above. The route passes in the address using the ?location=AddressHere URL query param.

The googleMapsClient.geocode() function is pretty much straight from Google's tests... I just added the error handling and the console.log.

Any thoughts? I'm kinda stumped on it.

The thing that stick out to me is that this call isn't async, you'd need a callback or promise or something. I don't understand why you'd get empty array (I'd expect undefined if addressData was not defined by the time your return) and perhaps it caches the result so it then runs the callback synchronously the next time.
 

GHG

Member
That moment you realise you can extract a zip folder on cpanel instead of creating folders and adding files individually...
 
What everyones favorite alternative to a drop down?

I have a drop down with 4 options. It feels boring and I'd like to use something different.

This is in react, if that matters.
 

GHG

Member
What everyones favorite alternative to a drop down?

I have a drop down with 4 options. It feels boring and I'd like to use something different.

This is in react, if that matters.

You can try materialize tabs if you don't require the dropdown links to navigate users to a new page. It's an elegant solution for revealing new content to users on demand without them having to scroll:

http://materializecss.com/tabs.html - scroll down to the swipeable tabs section if you want to see the best example of how it works.

Materialize for react:

https://react-materialize.github.io/tabs.html
 
What everyones favorite alternative to a drop down?

I have a drop down with 4 options. It feels boring and I'd like to use something different.

This is in react, if that matters.

Boring is good. Dropdowns have semantic meaning (good for accessibility) and users know what they mean and how to use them.

In general, I'd always use built-in form elements over something custom-made unless you have very specific requirements (e.g. WYSIWYG editor instead of a text box). Tabs can be good if you want to display different content based on the user choice.
 

grmlin

Member
Boring is good. Dropdowns have semantic meaning (good for accessibility) and users know what they mean and how to use them.

In general, I'd always use built-in form elements over something custom-made unless you have very specific requirements (e.g. WYSIWYG editor instead of a text box). Tabs can be good if you want to display different content based on the user choice.

this.

style a select and use the native select drop down. That's the best way to do it especially on mobile devices
 

Somnid

Member
UI rules of thumb:

< 5 => radio buttons okay
5 - 10 => dropdown
10+ => dropdown with search

Don't build your own, virtually all custom ones have problems with keyboard accessibility, touch accessibility, responsiveness etc. Chances of getting it right are very low.
 

GHG

Member
UI rules of thumb:

< 5 => radio buttons okay
5 - 10 => dropdown
10+ => dropdown with search

Don't build your own, virtually all custom ones have problems with keyboard accessibility, touch accessibility, responsiveness etc. Chances of getting it right are very low.

I'm a believer that there is no longer a scenario when radio buttons are ok anymore (unless we are literally talking about just 2 options or you are making a survey), they look so cluttered in most cases on mobile devices. If you have &#8805;3 options on a form then just make a dropdown and be done with it.
 
With the release of the Surface Laptop looming, I'm really considering a laptop for my next development machine... I was running an iMac 27 QC before, but started doing more web development over labor-intensive tasks, so I gifted it to my dad.

At the min I'm mostly running CLI, IDE's like Viscual Studio Code and Jet Brains Webstorm, multiple browsers etc and Photoshop.

I'm open to any suggestions on mac or windows OS, so am considering one of the following...

Dell XPS15
Macbook Pro / Macbook Air
Surface Laptop upgraded to W10

Do you guys have any thoughts, or recommendations? Anything to avoid??
 
With the release of the Surface Laptop looming, I'm really considering a laptop for my next development machine... I was running an iMac 27 QC before, but started doing more web development over labor-intensive tasks, so I gifted it to my dad.

At the min I'm mostly running CLI, IDE's like Viscual Studio Code and Jet Brains Webstorm, multiple browsers etc and Photoshop.

I'm open to any suggestions on mac or windows OS, so am considering one of the following...

Dell XPS15
Macbook Pro / Macbook Air
Surface Laptop upgraded to W10

Do you guys have any thoughts, or recommendations? Anything to avoid??

I have a 15 inch 2015 MacBook Pro which still works great for front end development. That said, next time I change it I will probably just get a 13 inch model for the extra portability. When I am using it in the office, it is connected to a second screen anyway.
 

Daffy Duck

Member
UI rules of thumb:

< 5 => radio buttons okay
5 - 10 => dropdown
10+ => dropdown with search

Don't build your own, virtually all custom ones have problems with keyboard accessibility, touch accessibility, responsiveness etc. Chances of getting it right are very low.

Huh? Radio button navigation???

What is this?
 

GHG

Member
With the release of the Surface Laptop looming, I'm really considering a laptop for my next development machine... I was running an iMac 27 QC before, but started doing more web development over labor-intensive tasks, so I gifted it to my dad.

At the min I'm mostly running CLI, IDE's like Viscual Studio Code and Jet Brains Webstorm, multiple browsers etc and Photoshop.

I'm open to any suggestions on mac or windows OS, so am considering one of the following...

Dell XPS15
Macbook Pro / Macbook Air
Surface Laptop upgraded to W10

Do you guys have any thoughts, or recommendations? Anything to avoid??

Depends on whether you prefer Windows or Mac OS for development to be honest.

I have an xps 13 and will be getting a 13 inch MacBook Pro (retina) later this year so take that as you will.
 

Lister

Banned
Depends on whether you prefer Windows or Mac OS for development to be honest.

I have an xps 13 and will be getting a 13 inch MacBook Pro (retina) later this year so take that as you will.

Is there really any difference nowadays in terms of tooling?
 

Kalnos

Banned
Unless you're using Visual Studio (or also using this laptop to play games) I don't see any reason to use Windows. Either get a Dell and throw Ubuntu/Arch/etc on that thing or just get a MBP.
 

Maiar_m

Member
If you're working a front-end shop where you're expected to run Photoshop / Illustrator or Sketch, then OSX has been the "best of both worlds" for us where my boss and back-end dev runs on Linux. He does. Literally. We've had troubles getting Windows users to run our stack without pain but the Linus <-> OSX workflow has had much much fewer hiccups.
 

xxracerxx

Don't worry, I'll vouch for them.
How is Sketch for the initial design phase? I usually just do quick layouts for clients in Illustrator for the first run, then fine tune once I start building the approved design.

Any good Sketch tutorials you guys would recommend?
 

grmlin

Member
How is Sketch for the initial design phase? I usually just do quick layouts for clients in Illustrator for the first run, then fine tune once I start building the approved design.

Any good Sketch tutorials you guys would recommend?

I'm not a designer, so I can only talk about it from a developer's perspective. Sketch is build for web development, and it does a great job I think.

the designers I know build things very quick with it. And there are export options to build some basic prototypes (functionality wise), eg. https://www.invisionapp.com/sketch-prototyping
 

Somnid

Member
If you have Windows troubles you should fix them, software should be robust and transferable. I'm sure some of you saw my rant in the programming thread about cross-platform binaries not compiling in packages because dev X didn't give enough fucks. Most of these are really easy to fix if you know what's happening versus whoever is trying to get started with your project and getting weird error messages. At the very least throw in a dockerfile.
 

Maiar_m

Member
If you have Windows troubles you should fix them, software should be robust and transferable. I'm sure some of you saw my rant in the programming thread about cross-platform binaries not compiling in packages because dev X didn't give enough fucks. Most of these are really easy to fix if you know what's happening versus whoever is trying to get started with your project and getting weird error messages. At the very least throw in a dockerfile.
Small small team, very rare Windows team-member appearances and priorities got in the way of making a truly universal stack I believe. We're moving on to Dockers soon it seems, I have yet to understand the thing but I'm excited.
 
I am currently trying to implement a blog into a wordpress site, but I am having trouble figuring out how to customise the post layout. Is the layout customisation typically set by the theme you choose, or is there something I am missing?
 

gutshot

Member
I am currently trying to implement a blog into a wordpress site, but I am having trouble figuring out how to customise the post layout. Is the layout customisation typically set by the theme you choose, or is there something I am missing?

It is set by the theme, yes. What sort of customization are you trying to do? Just CSS changes or are you trying to make changes to the PHP?
 

Lister

Banned
Guys - integration testing. What is your philosphy here, how do you tackle it, what tools do you use?

I'm used to TDD when working on server side and front end code, but integration is a different beast to me.
 
It is set by the theme, yes. What sort of customization are you trying to do? Just CSS changes or are you trying to make changes to the PHP?

Basically I built a post using Site Origin Page Builder, but then Wordpress wraps the entire post content into a container which messes up the look. My colleague is wanting the website to have a "Latest Trends" page, this will be changed from month to month, but she wants customers to also be able to view an archive of these pages. I was hoping to style each post so they are consistent with the rest of the site's pages, this includes having a full width banner at the top, with a heading saying what the article is about, and maybe the month.
 

grmlin

Member
I just wanted to say:

"o_0 Microsoft, Visual Studio Code is awesome"


I'm a Jetbrains (PHP|WebStorm) guy, and I could never force myself to use anything else. Nothing came close to the features built into the Jetbrains IDEs.

I tried VSC when it released and it was pretty basic back then. I tried it again yesterday and that changed drastically.

- Intellisense works like a charm
- it autoformats my code based on the .editorconfig (with a plugin)
- it supports git
- it supports refactoring

and most important

it's fast


People should give it a try, great stuff we get something like this for free.
 

Kalnos

Banned
Ok, so the editor is not Atom based? Because Electron is only a way to develop desktop applications with web tech, no?

Well GitHub made both Electron and Atom so it's related insofar as they both use Electron but that's it AFAIK.

The only competitor I know of for Electron is NW.js.
 

grmlin

Member
Well, I would be surprised if they managed to turn Atom into that. Because Atom ran like shit on my Mac when I tried it in the past. And that's without getting the features to work I mentioned above.
 
I also gave up on Atom and switched to Visual Studio Code. Much happier. All the same features as Atom and it's a hell of a lot more performant.
 

gutshot

Member
Basically I built a post using Site Origin Page Builder, but then Wordpress wraps the entire post content into a container which messes up the look. My colleague is wanting the website to have a "Latest Trends" page, this will be changed from month to month, but she wants customers to also be able to view an archive of these pages. I was hoping to style each post so they are consistent with the rest of the site's pages, this includes having a full width banner at the top, with a heading saying what the article is about, and maybe the month.

I don't have any experience with Site Origin Page Builder, so I can't really help you out with that. :(

If I were doing it, I would probably build a custom page template for the Latest Trends page. That way they can create new ones each month using that template and the old ones would still be available to view. And it would fit into the existing site seamlessly.
 
Top Bottom