-
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
Nothing wrong with that. Notepad++ is what I use throughout most of my workday, especially if I'm focused mostly on one file at a time. It's fast, and the best tool isn't always the best tool. It's the one you know best. I don't even remember the last time I opened Visual Studio.
For personal projects (ones where I'm at home on my Mac, and not working in ASP.NET) though, I really do love WebStorm.
For personal projects (ones where I'm at home on my Mac, and not working in ASP.NET) though, I really do love WebStorm.
Tathanen
Get Inside Her!
RE: text editors, lotta people at work are picking up Atom. Basically SublimeText but with a much more active and robust dev community for the core product, so it'll get updates super fast instead of the glacial sublime pace. Lots of GUI niceties too, and perks if you're working on GitHub projects (the GitHub people are making it).
WanderingWind
Mecklemore Is My Favorite Wrapper
I looked at Atom, but it's missing the most basic feature I need - which is the ability to run any snippet in a browser.
I tried Atom some weeks ago, and despite the fact that it's a beauty, customizable like crazy, (mostly) fast and with a huge community in the background, some of the things I love most about Webstorm didn't work.
(I tried tons of plugins/extensions, didn't help)
- reformatting code (it worked somehow, but not like I'm used to)
- refactoring (this is a big one, I don't want to search and replace code anymore)
- proper JS support with goto definition in a browserify/commonjs environment
- good code autocompletion
I still use it for single files, I like it much more than Sublime
(I tried tons of plugins/extensions, didn't help)
- reformatting code (it worked somehow, but not like I'm used to)
- refactoring (this is a big one, I don't want to search and replace code anymore)
- proper JS support with goto definition in a browserify/commonjs environment
- good code autocompletion
I still use it for single files, I like it much more than Sublime
WanderingWind
Mecklemore Is My Favorite Wrapper
I have to say, Sublime is by far the most disappointing of the ones I'm trying out. CoffeeCup has been by main squeeze for some time, but it's showing its age and they've given up really supporting it. Fine, it's been a thing since 1996.
Sublime is super sexy. It's fun to just look at. Practically a work of art. But holy hell is it a pain in the ass to do anything with. Oh, you want to add basic right click functionality? Well, first install package installer, remember the hotkey to open that, find the right package and install it! Oh, then go into the settings, make sure to copy the settings, paste them into the package user settings sheet and save. Probably reload too.
Brackets...well, it may not have started as an Adobe product, but it sure as hell is one now. Meaning, it's laid out in way that anybody familiar with their way of doing things can figure out. But like all Adobe products, it's slow and updates are a rarity. Of all the IDEs that I wished worked the way I wanted, Brackets is by far the tops. I love the code completion the best and the extension manager is stupid easy. LivePreview (when it works) is neat too.
Sublime is super sexy. It's fun to just look at. Practically a work of art. But holy hell is it a pain in the ass to do anything with. Oh, you want to add basic right click functionality? Well, first install package installer, remember the hotkey to open that, find the right package and install it! Oh, then go into the settings, make sure to copy the settings, paste them into the package user settings sheet and save. Probably reload too.
Brackets...well, it may not have started as an Adobe product, but it sure as hell is one now. Meaning, it's laid out in way that anybody familiar with their way of doing things can figure out. But like all Adobe products, it's slow and updates are a rarity. Of all the IDEs that I wished worked the way I wanted, Brackets is by far the tops. I love the code completion the best and the extension manager is stupid easy. LivePreview (when it works) is neat too.
Starphoenix
Member
Most of my webdev classes made us use Notepad++ for coding, which works for me since I like hard coding things. Been using Dreamweaver more so lately because I enjoy live preview and have the Adobe Creative Suite license. The new job I'm at uses .ASP NET, so everything is run through Visual Studio, which isn't very desirable for me... The ONLY thing I like about VS is its ability to auto-complete code for me.
For me, I want something with a good auto-complete program and gives me the ability to view bits and pieces of my code when I'm dealing with one specific area.
For me, I want something with a good auto-complete program and gives me the ability to view bits and pieces of my code when I'm dealing with one specific area.
WanderingWind
Mecklemore Is My Favorite Wrapper
Am I completely stupid or is there no way to test anything you make in Atom in a browser?
Bots are better than you
Banned
My opinion, but for PHP/JS/HTML nothing comes close to PHP/Webstorm, the same goes for their JAVA IDE IntelliJ ... Jetbrains and their products are really top notch.
I mean, even Android Studio is based on that IDE, leaving Eclipse in the dust.
But for simple HTML, Notepad++ all the way. Sublime, ATOM and the others are already too packed for being a simple Editor for HTML/CSS, and for anything beyond that, you are probably having a better time using an IDE.
Although at work i use Netbeans ... it's ok for the stuff i need to do ... well, better than Eclipse anyway. At home for my own projects, PHPStorm.
I mean, even Android Studio is based on that IDE, leaving Eclipse in the dust.
But for simple HTML, Notepad++ all the way. Sublime, ATOM and the others are already too packed for being a simple Editor for HTML/CSS, and for anything beyond that, you are probably having a better time using an IDE.
Although at work i use Netbeans ... it's ok for the stuff i need to do ... well, better than Eclipse anyway. At home for my own projects, PHPStorm.
WanderingWind
Mecklemore Is My Favorite Wrapper
Unfortunately, that doesn't work. It simply opens whatever your default HTML program is.
Tathanen
Get Inside Her!
I'm not sure I understand the question. You're editing files, right? Can you not just keep those files open in a browser?
WanderingWind
Mecklemore Is My Favorite Wrapper
Say I'm testing (like today) a sticky nav bar. I write it up and then with
CoffeeCup - I "preview in browser." It shows up in whichever browser I selected.
Brackets - I hit "live preview." It opens a Chrome window. I can then change the HTML/CSS and see it reflected.
Atom - ???
Something like: https://atom.io/packages/livereload?
Most devs will use a build system for this so you can use whatever you want: https://scotch.io/tutorials/a-quick-guide-to-using-livereload-with-gulp
Tathanen
Get Inside Her!
Yeah I just alt-tab to Firefox and hit refresh. Whatever I'm working on I always have up in a browser, be they static files, served by a Node server, or even apache via XAMPP. The button you're describing doesn't seem to provide any additional functionality.
ctrl-s, alt-tab, f5
So I'm running into a strange issue with Chrome... Basically it paints my page really early and then paints it again shortly after, but the two paints cause the page to "flicker" and look kinda bad.
Doesn't happen in Firefox, IE, or in Safari in iOS...
Is this a known thing? If so is there any way to fix this?
Doesn't happen in Firefox, IE, or in Safari in iOS...
Is this a known thing? If so is there any way to fix this?
WanderingWind
Mecklemore Is My Favorite Wrapper
So, clearly, I'm doing things all fucked up. In my defense, that's just how I used to do shit back in the late 90s and early aughts. So, can somebody with some front end experience tell me how a more modern workflow goes? With specific services, if possible.
- I open up a blank html doc in CC/Atom/Sublime/Whatevs
- I write out some HTML, CSS, JS (all I'll likely ever need)
- I now need to test it to ensure it's functional code, but don't want to reupload to my server with every change.
- ?????
- Profit?
Which system do you use? Mac/Windows/Linux?
You can either a) build/find a grunt or gulp setup for a local development server with live reload (free), or use a build tool like http://livereload.com, http://incident57.com/codekit/index.html or https://prepros.io (paid)
The gulp/grunt way is VERY flexible but also some more work, as you have to take care of it.
You can either a) build/find a grunt or gulp setup for a local development server with live reload (free), or use a build tool like http://livereload.com, http://incident57.com/codekit/index.html or https://prepros.io (paid)
The gulp/grunt way is VERY flexible but also some more work, as you have to take care of it.
You should be testing with some sort of framework like Jasmine, Mocha, or whatever you prefer to use.
This is pretty good video to learn how to use Gulp.
Use a local server. There are tons available out there, for Mac you have MAMP and Windows you have XAMPP for a php/mysql stack.
If you're on a Mac, you already have PHP installed, so in terminal:
Code:
$ cd [directory where your html file is in]
$ php -S 0.0.0.0:8888WanderingWind
Mecklemore Is My Favorite Wrapper
First off, thanks guys. I'm relearning how to do things I used to know 15 years ago (and obviously learning everything I missed in the meanwhile). I do appreciate y'alls advice.
So, while I learn about gulp and the like (I'm on Windows, btw) I"m going to go with Tathanen's suggestion and just set the HTML default to a browser. If I have my own server (I do) what is the benefit to using a local server? Is there a way to edit HTML files right on a server?
Are the questions I'm asking pants on head stupid?
So, while I learn about gulp and the like (I'm on Windows, btw) I"m going to go with Tathanen's suggestion and just set the HTML default to a browser. If I have my own server (I do) what is the benefit to using a local server? Is there a way to edit HTML files right on a server?
Are the questions I'm asking pants on head stupid?
The setup you want does basically the following:
1. Use local server, point the root to your local files
now you can edit your files, save, refresh browser, done
2. Add gulp/grunt and a live reload server
- use gulp/grunt to watch files for changes
- on file change, trigger the live reload server
- html/js changes will reload your browser, css files will be injected
I would recommend a gulp plugin that provides both a local server AND livereload, if you use plain HTML files.
Something like gulp-connect. Have a look at the live reload example here: https://github.com/AveVlad/gulp-connect/tree/master/examples/livereload
It's really easy and all you have to do, is start gulp once in your dev folder. If you use PHP/Webstorm, gulp support is already build in and you don't even have to open a command line for that
1. Use local server, point the root to your local files
now you can edit your files, save, refresh browser, done
2. Add gulp/grunt and a live reload server
- use gulp/grunt to watch files for changes
- on file change, trigger the live reload server
- html/js changes will reload your browser, css files will be injected
I would recommend a gulp plugin that provides both a local server AND livereload, if you use plain HTML files.
Something like gulp-connect. Have a look at the live reload example here: https://github.com/AveVlad/gulp-connect/tree/master/examples/livereload
It's really easy and all you have to do, is start gulp once in your dev folder. If you use PHP/Webstorm, gulp support is already build in and you don't even have to open a command line for that
WanderingWind
Mecklemore Is My Favorite Wrapper
I have some studying to do. Thanks a ton. This all does explain why all the recent IDEs have dropped that feature natively though.
Tathanen
Get Inside Her!
Just opening your file directly in a browser (just throw the file path in the URL bar) is fine if you're working on a single HTML file with no references to anything else on your filesystem. I suspect this is how you've been working in general if you've been using those preview buttons, they're just a shortcut to doing exactly that most of the time.
The benefit of a local server (for client-side code) is that you can insert file references using a path structure that matches what it'd be on your actual production server. You'll be able to test real URLS, since you'll be running at root, something like localhost:3000/ instead of c:/windows/user/blahblah/index.html. It's ideal for testing actual complete applications instead of just html fragments. It'll also set you on the road to being able to properly utilize Grunt/Gulp.
Grunt or gulp are wonderful tools, and are used to streamline build processes mostly. For example, you can set a "watch" task that monitors your files to watch for changes. When you edit a javascript file, it can concatenate it with all your other files, maybe run some replacements or uglification, and output it to your build directory. It can run LESS and export CSS on change, cache your html templates in JS (if you're using something like Angular that supports a template cache), and trigger a live-reload of your browser so you don't have to hit F5 if you set it up that way. And that's just the tiniest fraction of what you can start doing. There are hundreds of grunt packages on Github, just start browsing to really get a feel for what you're missing out on. I only started using grunt a year or two ago, and it's changed my process almost as radically as when I first started using browser DOM-inspectors.
PetriP-TNT
Member
I wanted to answer this earlier but couldn't: as someone who participates in Brackets develop, while the actual releases aren't happening that often, tons of development happen all the time. But many of those features take a rather long time to materialize, mostly because of the complexity they have. Some features are huge, but might not have substantial benefits for some. For instance, 1.4. got super awesome live-search across files, great Code Collapse update that will be even better in 1.5 with selection based collapses and a new Preferences hinting system. There has been also many performance updates across the version and there's even more to come.
So it looks like they build the youtube gaming platform with Polymer. Nice.
https://gaming.youtube.com
Too bad it performs like shit in Safari on Mac. What is IE saying? Anyone tried?
Anyway, I'm excited to see google finally using one of their fancy frameworks and can't wait to use fully fledged web components one day. (Did they ever use Angular for anything?)
For the moment I still rely on less fancy custom elements for my components.
https://gaming.youtube.com
Too bad it performs like shit in Safari on Mac. What is IE saying? Anyone tried?
Anyway, I'm excited to see google finally using one of their fancy frameworks and can't wait to use fully fledged web components one day. (Did they ever use Angular for anything?)
For the moment I still rely on less fancy custom elements for my components.
PetriP-TNT
Member
Works fine on IE11 (does show an scrollbar through behind the sidemenu while Chrome doesn't show any scrollbars anywhere which is kinda weird).
On web dev front, I bailed out on Ember after using it for an year. Now my standard frontend buzzword kit consists of ES6 React modules through browserify+Babel + Backbone for API interaction and I like it so much better than I ever did for Ember.
404s for me. Might have to do with being logged in with two accounts.
Buddha Beam
Banned
So I have a client who's website is in WordPress, and the page they want to put up is going to be a total custom job. Does anybody know of a WordPress plugin that would allow me to build a page entirely custom, but use WordPress so it's integrated into the CMS and able to retain all the benefits of using said CMS? I know I can build a custom WP template, but I'm just looking to see if there's a way to shortcut that.
I'm starting to think the answer is 'no', but it seems weird that something like this wouldn't exist.
I'm starting to think the answer is 'no', but it seems weird that something like this wouldn't exist.
PetriP-TNT
Member
Sorry if this was already answered (I just looked through all 18 pages looking to see if there was a good answer), but is there a recommended physical book for learning JavaScript (and most likely, general coding)? I found a copy of JavaScript: The Definitive Guide at a garage sale, but 50 pages in, it seemed like I was expected to have some degree of background already, which I definitely lack. Looking through the thread, though, I found mentions of Eloquent JavaScript and JavaScript & JQuery, but I don't know if one comes more recommended over the other.
I already know HTML/CSS from Duckett's book on them, so would J&J be more of a natural extension in this case?
I already know HTML/CSS from Duckett's book on them, so would J&J be more of a natural extension in this case?
PetriP-TNT
Member
Eloquent Javascript is also available online: http://eloquentjavascript.net/
It'd say it's pretty good fit to a beginner: it kinda dives deep, but also explains many basic principles of programming in general
Allow me to just vent for a second here...
I'm doing the AngularJS front-end for this huge ass project built on a JBoss/Maven server (how cool is to have to compile and deploy the entire fucking front and back-end everytime to see the updates? NOT COOL AT ALL, FFS) and now I'm in the process of making it work for the target browser.
Which is IE9.
It's been eons since my last old-ass-IE-cross-browser project and I totally forgot how buzzkilling eveything is.
FFS, IE9 doesn't even have the console object and blocks the execution at the first console.log(), EXCEPT when you open the developer tools, which doesn't log any error in the console and execute the app fine, making it basically impossible to debug the fact that IE9 doesn't have the console object, creating this sort of mindbending bug inception.
Also they asked me to build an ajax file uploader but of course IE9 doesn't support XHR for files and I have to do the craziest workarounds to make the simplest thing ever work.
And what's most funny of all, is that the corporate proxy blocks both JS and CSS on code playgrounds (ie. Plunker, CodePen and sometimes even GitHub), so it's always super fun to try some quick solutions, snippets and whatnot, without having to waste 30s to compile and deploy everything every time I mistype something.
Sometimes this job sucks so hard I'd rather be unemployed and live in cardboard boxes under some bridges.
I'm doing the AngularJS front-end for this huge ass project built on a JBoss/Maven server (how cool is to have to compile and deploy the entire fucking front and back-end everytime to see the updates? NOT COOL AT ALL, FFS) and now I'm in the process of making it work for the target browser.
Which is IE9.
It's been eons since my last old-ass-IE-cross-browser project and I totally forgot how buzzkilling eveything is.
FFS, IE9 doesn't even have the console object and blocks the execution at the first console.log(), EXCEPT when you open the developer tools, which doesn't log any error in the console and execute the app fine, making it basically impossible to debug the fact that IE9 doesn't have the console object, creating this sort of mindbending bug inception.
Also they asked me to build an ajax file uploader but of course IE9 doesn't support XHR for files and I have to do the craziest workarounds to make the simplest thing ever work.
And what's most funny of all, is that the corporate proxy blocks both JS and CSS on code playgrounds (ie. Plunker, CodePen and sometimes even GitHub), so it's always super fun to try some quick solutions, snippets and whatnot, without having to waste 30s to compile and deploy everything every time I mistype something.
Sometimes this job sucks so hard I'd rather be unemployed and live in cardboard boxes under some bridges.
IE9 isn't that bad, the problem is, that it's almost 5 years old, which is an eternity in web development years
I mean, back then we had Firefox 3.x, try to build a modern website for this thing... it's not much better.
Anyway, I think IE9 is way less problematic than it's predecessors. You can't do all the fancy new JS-tricks with it obviously, but for the most parts of a modern websites graceful degradation works good enough and polyfills allow you to code like it's 2015.
XHR file uploads are a huge pita though. It's so easy to implement it for modern browsers and such a pain with all those flash and whatnot fallbacks. I tend to do the classic form post in older browsers, because I don't want to mess with all the hacks and libraries only to give IE9 modern uploads.
I mean, back then we had Firefox 3.x, try to build a modern website for this thing... it's not much better.
Anyway, I think IE9 is way less problematic than it's predecessors. You can't do all the fancy new JS-tricks with it obviously, but for the most parts of a modern websites graceful degradation works good enough and polyfills allow you to code like it's 2015.
XHR file uploads are a huge pita though. It's so easy to implement it for modern browsers and such a pain with all those flash and whatnot fallbacks. I tend to do the classic form post in older browsers, because I don't want to mess with all the hacks and libraries only to give IE9 modern uploads.
IE9 isn't that bad, the problem is, that it's almost 5 years old, which is an eternity in web development years
I mean, back then we had Firefox 3.x, try to build a modern website for this thing... it's not much better.
Anyway, I think IE9 is way less problematic than it's predecessors. You can't do all the fancy new JS-tricks with it obviously, but for the most parts of a modern websites graceful degradation works good enough and polyfills allow you to code like it's 2015.
XHR file uploads are a huge pita though. It's so easy to implement it for modern browsers and such a pain with all those flash and whatnot fallbacks. I tend to do the classic form post in older browsers, because I don't want to mess with all the hacks and libraries only to give IE9 modern uploads.
Yessir, I started this job when IE6 was still a thing, so I fully know how IE9 is a... well... blessing... compared to those days.
Still!
The console thing was SO annoying, nay, absurd even, for the fact that the debugger actually solves the bug, voiding its very purpose.
And yes, I'd do the old-school form post, but when I asked the back-end guy to perform the upload and redirect to some URL with some response params, his face went full blank and his answer was "it's not possible". I guess he meant "I have no clue how to do that", but still.
And I can't even help him, because I'm a PHP dev and I never had anything to do with Java.
Also, the many times I discovered better solutions for front/back-end integrations than theirs (like, right now I have to send back perfectly formed JSON objects, with only the properties they need, and if I add something the back-end fucks up with a 500 error - and I know they just need to add a line of code in their functions, like "@allowWhateverShitInJSONObjects", to solve this, but they won't write it because "it'd take so much time"), they clearly told me that I'm not allowed to touch the back-end code because reasons.
Fighting against clueless back-end devs, that's my life now. :'(
PetriP-TNT
Member
List of worst things about web development:
- Clients
- Clients and their ideas
- Clients
- Shitty backends to code against
- Shitty frontends to code against
- Shitty content management systems (seriously, you haven't felt the pain until your method of serving the end product is uploading a .zip-file to clients CMS, which then takes 10-15 minutes to unzip)
- Clients
- Clients and their ideas
- Clients
- Shitty backends to code against
- Shitty frontends to code against
- Shitty content management systems (seriously, you haven't felt the pain until your method of serving the end product is uploading a .zip-file to clients CMS, which then takes 10-15 minutes to unzip)
Bots are better than you
Banned
Adding to that list:
- Browser inequalities
- MOBILE browser inequalities
- Initial choice of the system/technology: "Yes please, add more frameworks in a bi weekly intervall, i just don't have enough choice yet!"
It's the web developers very own "I don't have anything to play / I don't have anything to wear" first world problem...
The worst thing I ever had to work with was "FirstSpirit". And all I did was the HTML-prototype for the site. OMG did we have to do silly things to get things done. Unforgotten.
mobile browsers are so much fun, too. I don't know how many times I tried to explain customers why it's a terrible idea to do position: fixed things on mobile (it's still more or less glitchy in modern mobile browsers). Or why "responsive" does NOT mean you get the mobile version for free.
As of right now, working on a fairly simple website/shop with not too much magic, I feel so so relaxed. Things got really complicated over the last years clientside...
mobile browsers are so much fun, too. I don't know how many times I tried to explain customers why it's a terrible idea to do position: fixed things on mobile (it's still more or less glitchy in modern mobile browsers). Or why "responsive" does NOT mean you get the mobile version for free.
As of right now, working on a fairly simple website/shop with not too much magic, I feel so so relaxed. Things got really complicated over the last years clientside...
Totally.
Totally.
You know tho, this can also be fun.
Like, you offer it as an "higher tier", they say "eh, it's too expensive, and anyway the site will work mobile anyway, doesn't it?".
Then several months after you deliver, they come back crying that the site looks like crap on mobile and pleeeease do the proper responsive version, and you finally feel the power in your hands.
Anyway, after 6 years of running my own company, I'd have to say that clients don't suck per se, and most of what I got behave fairly well.
What I totally cannot tolerate are clients that come to you in a huge rush, basically force you to clear all your schedule for the next couple of months and then deliver their materials (graphic stuff, texts, etc.) after 3+ months and demand you to complete the job in the same time you agreed upon at first.
Like, you know, the fact that you made me waste 2 months means now I totally don't have other stuff to do to pay the rent.
This happened to us all the time, no matter how many penalties we put in the contract (and anyway, being always in the red didn't exactly help in gaining the upper hand with misbehaving clients...).
Huh, I don't know how I missed that there was an online equivalent for EJ. In that case, I'll probably just use its online version and buy the Duckett book so I have both. Luckily I'd much rather have a deeper understanding of the language, too, especially after occasionally spying anecdotes in the thread about other developers being completely lost once their tried-and-true methods stopped working.
Thanks a lot, though, you two!
PetriP-TNT
Member
Bots are better than you
Banned
Ah yes, the joy of going from JavaScript to the wonderful world of the "new" JS frameworks, who all have their very own way how MVC should be done.
Maybe we need to add this one to the list?
Did you look over some tutorials for React/Flux?
Maybe we need to add this one to the list?
Did you look over some tutorials for React/Flux?
stick to it, its so worth the first headaches!