In strict mode, a semi-colon is used after expressions, or more simply any statement that is not a loop or function declaration (not to be confused with function expressions).
-
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
- Thread starter gutshot
- Start date
In strict mode, a semi-colon is used after expressions, or more simply any statement that is not a loop or function declaration (not to be confused with function expressions).
Bots are better than you
Banned
JavaScript is quite "random" compared to traditional languages. That's a charming thing on one hand, mind-boggling on the other!
Also, listen to PetriP-TNT, and get used to always place them.
Big chance that you're going to dive into a server-side language like PHP or C# for Windows-servers, and those give you a nice kick in the nuts when they aren't getting their semicolons!
WanderingWind
Mecklemore Is My Favorite Wrapper
The fuck. I did not know that. Thanks Treehouse and Duckett. Okay, so here is where I'm at.
Using semicolons = sometimes causes errors. If you put one where it shouldn't be, the JS just does nothing.
Not using semicolons = Party all the time.
Why would I used semicolons, then?
Because it prevents a couple of situations where it's ambiguous.
Code:
return {
foo : bar
}
return
{
foo : bar
}Do different things.
WanderingWind
Mecklemore Is My Favorite Wrapper
Awesome. I hate everything at the moment. Okay, so how would you use semi-colons there?
EDIT: I would just like to point out that Treehouse used a wink, wink shout out to porn sites as a possible usage for JavaScript comparison operators.
Well you'd want to use jslint or strict mode to enforce semi-colon rules. The second version is never what you want but it does that because the compiler is inserting a semi-colon on the line break of a complete statement. You just never use the second one but if you did semi-colon enforcement would catch it.
To make it obvious:
Code:
return {
foo : bar
};
return;
{
foo : bar
}WanderingWind
Mecklemore Is My Favorite Wrapper
I see, that makes sense. Thank you. It also now makes sense why books for newbies don't mention that you don't have to use semicolons. Cause the first response I had to that was to never type another semicolon in JavaScript again.
You should use eslint 
I use the rulesets from airbnb with some adjustments (personal taste).
https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
I use the rulesets from airbnb with some adjustments (personal taste).
https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
What's the difference between:
(Besides it not being responsive, naturally and old.)
(Bootstrap)
and
(Flexbox)
Bootstrap and Flexbox both would be responsive and "newer" than old-school tables. So they'd move the datacells around (good), but at the same time they both seem like a pain in the ass to set-up.
Bootstrap, for instance won't do:
As a valid three "grid" table and puts them under each other even if the image would fit the desktop size.
I don't think Flexbox would solve this issue either?
Code:
<table>
<tr>
<td>Data</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>(Besides it not being responsive, naturally and old.)
Code:
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>(Bootstrap)
and
Code:
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>(Flexbox)
Bootstrap and Flexbox both would be responsive and "newer" than old-school tables. So they'd move the datacells around (good), but at the same time they both seem like a pain in the ass to set-up.
Bootstrap, for instance won't do:
Code:
<div class="row">
<div class="col-md-1"><button class="btn"><img src="image.here"><p>.col-md-1</p></button></div>
<div class="col-md-1"><button class="btn"><img src="image.here"><p>.col-md-1 #2</p></button></div>
<div class="col-md-1"><button class="btn"><img src="image.here"><p>.col-md-1 #3</p></button></div>
</div>As a valid three "grid" table and puts them under each other even if the image would fit the desktop size.
I don't think Flexbox would solve this issue either?
Are you actually making a table here? Tables are semantic to table data so if that's the case use a table. Not sure what your responsive requirements are but it's likely flexbox will do it.
I'm trying to make a "table" of three by three columns and rows to have buttons that go to project pages on. Flexbox seems like it'd do it, but it seems like it'd be a hassle when the example I'm trying to copy uses Bootstrap but Bootstrap seems to have the projects "pad" out too much for my taste (and won't put the buttons/"data" on the same row despite being coded that way to do so, I could make a 10pix image to put in the button and it still breaks them on desktop). And I don't really know Flexbox well enough to know if it'd be similar to old table tags and just using CSS to remove the borders and the like.
They aren't on the same row as you're just using col-md which is the grid for larger displays.
https://getbootstrap.com/examples/grid/
Resize the window and you'll see them stack together.
https://getbootstrap.com/examples/grid/
Resize the window and you'll see them stack together.
PetriP-TNT
Member
You can adjust the padding in Bootstrap in your liking. If you use the distribution version you'll need to make a custom version though http://getbootstrap.com/customize/. If you use LESS (or the SCSS) version you can just adjust the variables: https://github.com/twbs/bootstrap/blob/master/less/variables.less#L90
With Bootstrap 4 it's even easier and it provides utility classes for things like zero padding too.
Also what Ikuu said.
So what is a large display? I thought an iPad-sized/7" display would display the same as a laptop/Desktop?
WanderingWind
Mecklemore Is My Favorite Wrapper
You should use eslint
I use the rulesets from airbnb with some adjustments (personal taste).
https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
I'll be 100 right now, I have zero idea what I'm supposed to be doing with this. When you (and Petrip) say use eslint, I believe you, but what is it and why? Right now, I'm just learning the basics of JavaScript. My ultimate goal right now is to know how this works:
.col-md-4 should fit then??????
Because looking at their example, the three -4's being together is what I want with like 10px spacing and it looks the same on the displays I'm going for. So what the hell is preventing bootstrap from doing the same as that example?
Sure, I'll try to explain.
ESLint is a javascript linter, a code quality tool.It checks you javascript code against multiple rules.
I prefer ESLint these days because it's support for ES2015/ES6 is great. Older linters like jslint ( the original made by Crockford) not so much.
Anyway, to use it you can integrate it with most IDEs (Webstorm, Atom, Brackets) or use a gulp/grunt task to lint the code with node.
All you have to do is install ESLint and create a config for it.
You can use the default settings of ESLint, of course, but the linked airbnb settings are the one I use as they pretty much fit my style. You can install these configurations with npm and reference them in your .eslintrc later
Prime crotch
Banned
Is the investiment on a macbook pro worth it? I've been doing most of my work between Ubuntu and Windows but the trend seems to be more and more Mac oriented.
This is probably the best-ish place to ask this.
I'm new to the Data Science/Analytics field and looking to improve my skill set. My SQL has improved drastically in the last couple of months and now that I have a solid base there I'm looking at working on R. I currently do most of my analytics work in SPSS Modeler so I don't have to code much there.
What are the best resources for learning R and practical applications of it? I'm taking a Udemy course right now I got during their last sale.
I'm new to the Data Science/Analytics field and looking to improve my skill set. My SQL has improved drastically in the last couple of months and now that I have a solid base there I'm looking at working on R. I currently do most of my analytics work in SPSS Modeler so I don't have to code much there.
What are the best resources for learning R and practical applications of it? I'm taking a Udemy course right now I got during their last sale.
PetriP-TNT
Member
If you need a laptop for web development it's the best you can get and I say this as an 99% Windows dev.
Prime crotch
Banned
Euuuugh, I just got a leisure laptop which I had to develop on and the thought of spending 2k on a mac is really stumping me.
I love working on my MBP, and I don't think I could work with something else atm.
Windows, which I did use in the past will drive you crazy when you have to deal with terminal related tasks. In modern web development, there is a lot of it.
Anyway, I hear good things about Ubuntu / other Linux distros. Maybe that's an option, too. And you could give it a try without spending 2k on a new MBP
Prime crotch
Banned
Oh I know that, believe me, trying to install ruby gems on windows L OH L
PetriP-TNT
Member
How to do stuff in terminal on Windows:
1. Install cmder
https://github.com/cmderdev/cmder
2. Enjoy life because your life is now excellent
Zombie James
Banned
Switching to OSX for development was one of the best things I did for my career.
Zoe
Member
The closest I've ever come to having to do anything with a terminal over the past five years is using the command line to install ASP.NET database objects.
Prime crotch
Banned
I tend to prefer conemu
Actually with Windows 10 the built in terminal is quite nice with modern customization. Installing Ruby in it, alleviates the need for cmder for me.
PetriP-TNT
Member
Yeah, cmder is built on top of conemu
I used to use and love deeply cmder, but at some point I just installed Terminal Plus, an Atom extension, and I do all my dirty console work inside Atom.
Only regret is that Terminal Plus uses PowerShell (and I don't seem to find an Atom terminal extension that let me use whatever I want), but eh, it's enough to run "npm start" and "npm run build".
One thing that's really really useful on Windows, is to install rimraf, pretty much a must when Win doesn't allow you to delete deeply nested node_modules folders (at least before Node 5 / npm 3 or whatever, as now it installs dependencies "flat").
Only regret is that Terminal Plus uses PowerShell (and I don't seem to find an Atom terminal extension that let me use whatever I want), but eh, it's enough to run "npm start" and "npm run build".
One thing that's really really useful on Windows, is to install rimraf, pretty much a must when Win doesn't allow you to delete deeply nested node_modules folders (at least before Node 5 / npm 3 or whatever, as now it installs dependencies "flat").
It's a little off topic, but did they fix the terrible high dpi support with windows 10? I used a Samsung 13" Ultrabook with a FullHD screen and it was simply impossible to use this thing in a useful way with an external screen. The scaling was a mess.
And the app support for high res screens was even worse.
Retina/HighDPI support on a mac is perfect. No way I will ever use anything again that does not work like this, >8h a day.
And the app support for high res screens was even worse.
Retina/HighDPI support on a mac is perfect. No way I will ever use anything again that does not work like this, >8h a day.
PetriP-TNT
Member
Yes and no. The HighDPI stuff works in Windows 10 as it should, but every now and then there's apps that just don't play nicely in hdpi no matter what and are reluctant to update.
Ah, thanks. Thats something at least. Mac users had to wait for proper retina support in most apps too, when they introduced retina screens in Macbooks.
I rebuilt my site entirely. There was a lot of extraneous code as it was my first real build, I managed to cut 400 lines off the CSS file for example.
I'm sure there's more I could do. I need to learn Sass or Less, etc... my next course is JQuery/Javascript.
Still, I'm really happy with how it's turned out.
Any feedback would be appreciated.
I'm sure there's more I could do. I need to learn Sass or Less, etc... my next course is JQuery/Javascript.
Still, I'm really happy with how it's turned out.
Any feedback would be appreciated.
To those interested in front end design:
How important do you think it is to consider the user's enjoyment when designing site navigation/transitions etc...?
I'm finding a lot of my peers develop to the standard templates, and while they often look slick, and the familiarity makes navigation easy for the user, most of the designs I see aren't fun to interact with.
Obviously there needs to be a balance, but where do /you/ consider the sweet spot to be?
I suppose I'm asking for examples of this done well, maybe some examples of it being taken too far too.
Thanks.
How important do you think it is to consider the user's enjoyment when designing site navigation/transitions etc...?
I'm finding a lot of my peers develop to the standard templates, and while they often look slick, and the familiarity makes navigation easy for the user, most of the designs I see aren't fun to interact with.
Obviously there needs to be a balance, but where do /you/ consider the sweet spot to be?
I suppose I'm asking for examples of this done well, maybe some examples of it being taken too far too.
Thanks.
PetriP-TNT
Member
It's the most important thing, as "enjoyment" comes from accessibility, speed, looks and functionality (among others). I always try to aim for accessibility and speed first. The often cited quote is that every 100ms improvement in speed brings in 1% of extra revenue on shopping sites, but it applies to regular web pages too: faster loading means that people are more likely to stay there. Accessibility means that you cater to the biggest possible audience, always. The looks are harder, because everyone likes different things: for example some find parallax scrolling really look, some think it's distracting and dumb. Functionality is another tricky part: it's always not possible to create "simple" sites from complex contexts, which can break all those other threes if not done correctly. Consider a site that is used to fill in spreadsheets and everything else is nice but actually filling in the spreadsheets is a pain in the ass: users won't stay even though you had the fastest, most pretty spreadsheet site in the world.
I fully agree that accessibility and speed are hugely important, what I'm enjoying right now is experimenting with ways to keep this a focus but also add to the tactile experience.
Making elements satisfying/memorable to interact while ensuring as low an impact on accessibility and speed is the problem. Attempting to solve it is incredibly fun!
-
Another question, I understand the importance of "mobile first" in a world where the vast majority of web access is made through smart phones and touch devices, but how relevant is the term to the actual design process for you?
I've read many arguments that suggest starting with mobile and working up to desktop offers the best chance of maintaining the best user experience across all levels, but I've read from experienced designers that, as long as each level is considered and developed for according to the specific needs of the device, it doesn't matter where you begin.
Some say "mobile first" is taken too literally when approaching design, but do you find it beneficial to begin at the mobile level, and if so why?
I'm not a designer, so this it purely from a developers perspective...
In my experience it's always mobile first. If I don't know what mobile will look/work like, it's a pita to adopt for it later. It's pretty easy to build a desktop site with more stuff in it that has the same functionality as a mobile site, but starting with the desktop version it can be pretty hard, if not impossible, to transfer this to a smaller screen afterwards.
This, of course, is only true for responsive sites. If you build two separate pages it does not matter.
In my experience it's always mobile first. If I don't know what mobile will look/work like, it's a pita to adopt for it later. It's pretty easy to build a desktop site with more stuff in it that has the same functionality as a mobile site, but starting with the desktop version it can be pretty hard, if not impossible, to transfer this to a smaller screen afterwards.
This, of course, is only true for responsive sites. If you build two separate pages it does not matter.
PetriP-TNT
Member
After a while you'll start to see instantly what will work on smaller (or larger) screens and will not. Responsive design is a nice buzzword, but most often it just comes to collapsing content underneath each other and making sure you use good, well accessible components and testing. Using grid systems helps you with this immensely. I rarely think about whether or not something works on mobile myself as I try to build things so that they work on any device. Which is quite frustrating when working with designs done in Photoshop or Illustrator: most times you'll spot things that just won't never ever work on smaller screens and it quite often takes way too much effort to either to convince the designer to change the design completely, or to create whole other design for the said feature on smaller screens.
Thanks for the responses.
My current mindsets is: as long as you consider each level properly, it doesn't matter the direction of your approach.
Of course, I'm new to this so I might develop new understandings over time.
-
I'd really appreciate some feedback from you all on my site. I've been told conflicting things:
It's good design/it's confusing design.
The transitions are enjoyable/they take too long.
Obviously opinions will differ, but it would be great to hear from some experienced developers.
My current mindsets is: as long as you consider each level properly, it doesn't matter the direction of your approach.
Of course, I'm new to this so I might develop new understandings over time.
-
I'd really appreciate some feedback from you all on my site. I've been told conflicting things:
It's good design/it's confusing design.
The transitions are enjoyable/they take too long.
Obviously opinions will differ, but it would be great to hear from some experienced developers.
Google are pretty hot on this right now. It's a big part of their Material design and I think subtle animations go a long way to creating UIs that people actually like using.
Motion Design is the Future of UI
Google I/O 2014 - Material design: Motion
From another developers standpoint regarding your site...
- I want to be taken to "home" directly when I go to your site, I don't want to have to click a link.
- The animations are interesting but they don't really add anything for me and I feel that they're just tedious.
- There's like a 300px margin between the header and blog posts for seemingly no reason?
- I personally find the gray header title color you're using a bit hard to read. I'm also a fan of semantic markup and not using divs for headers, etc.
- The triangle title name for the page is cute but I think it would be annoying if I didn't remember what the tab was.
- The links on your contact page look like buttons with the border they have but are actually divs that reveal a link when hovering over them, why not just make them a link?
- On the project page you only have four projects so why not just show them in reverse chronological order and give me a brief description/image of them? I don't want to have to click through.
PetriP-TNT
Member
Rant: Tried to built a Neat Thing™ with the Instagram API but it's like the most restrictive API I have ever witnessed so had to fallback to A Thing™
edit: It became Barely A Thing™: https://github.com/petetnt/ascii-shot
Basically I wanted to create an terminal version of Instagram but it's pretty much impossible without breaking all of their rules of usage.
edit: It became Barely A Thing™: https://github.com/petetnt/ascii-shot
Basically I wanted to create an terminal version of Instagram but it's pretty much impossible without breaking all of their rules of usage.
I use their undocumented public API: https://www.instagram.com/{user}/media/. Each url you get has a few parameters in it and if you mess around you'll find it's for crop, size, translation and sharpness.