Testicular Sound Express
Member
there are several online IDEs such as shift edit and cloud ide
-
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
there are several online IDEs such as shift edit and cloud ide
Devolution
Member
Maybe put some webfont resources in the OP?
Yeah, definitely. Google Fonts is a no-brainer. What else?
I refuse to acknowledge the existence of TypeKit.
Testicular Sound Express
Member
type-kit, font squirrel, font deck, fonts.com
None that work offline?
Origami Superman
Member
OP should maybe have some .NET resources in there as well.
And to the person asking about Javascript try and read anything by John Resig or Douglas Crockford.
And to the person asking about Javascript try and read anything by John Resig or Douglas Crockford.
PflargBlarg
Member
?
The whole point is that it's not a dedicated site, it's the same site with a modified look and probably lower resolution images plus other stuff.
Tathanen
Get Inside Her!
I swear the internet gets more insane with things like this every year. If HTML isn't for layout, and CSS isn't for layout, then.. what is? What magical inbetween language will handle your layout?
Of course CSS is for layout.
I would like to go on record as saying that test suites for front end code are a huge waste of my time. I feel no more secure in what I've produced if it's heavily tested, because the tests simply cannot cover 100% of things, and cannot cover even 1% of rendering-specific things. A test suite is supposed to be able to say "yep still works," and for frontend web, you can break the site in a million ways without a test suite having any clue that it happened. And if you can't rely on it, it has no purpose.
Complete time sink that frustrates me at every turn.
It's to test logic. Whether or not an element appears is not really the target of unit testing, in fact you probably shouldn't use it to test DOM attributes at all, just functions. You use it to make sure that your logic is doing what you defined it to do.
What you are thinking of is called smoke testing or sometime acceptance testing. You can do that too and it's encouraged in large scale projects. Eventually you write enough tests that regression testing is all automated and you can literally release at every valid check-in which will save hundreds if not thousands of hours down the line.
All this talk about Angular...
Damn you guys. I'm a front-end dev, pretty experienced with html/css of course, comfortable with jQuery, but I'm very scared of Angular. I'm pretty sure I can't make sense of it. What's the best resource for a complete beginner? What would you say is the primary use of it? How much of a backend dev, as opposed to a front-end dev, do you have to be to use it?
Also I really need to 'master' a CMS. I've used Wordpress a bit, and worked on a Drupal project (hated every single moment of it), but IDK. I think it's a good skill to have.
Damn you guys. I'm a front-end dev, pretty experienced with html/css of course, comfortable with jQuery, but I'm very scared of Angular. I'm pretty sure I can't make sense of it. What's the best resource for a complete beginner? What would you say is the primary use of it? How much of a backend dev, as opposed to a front-end dev, do you have to be to use it?
Also I really need to 'master' a CMS. I've used Wordpress a bit, and worked on a Drupal project (hated every single moment of it), but IDK. I think it's a good skill to have.
Thank you for this post. Just... thank you. Sometimes it feels like I'm the only guy left in the industry saying exactly this. People these days are entering the industry having only ever worked sitting atop all these layers, and never sat down and learned how CSS works, or how stock JavaScript works. Most of the time none of this stuff is needed at all, and it is getting increasingly hard to find employable people that actually know what's going on, because they've had people telling them right from the start "you should use sass", or "you should use CoffeeScript", or "you should use a framework like Angular" etc. They haven't had a chance to sit down and learn that the tools they already have at their disposal are incredibly powerful, and they don't involve your end user downloading a load of unused fluff.
Those layers do have their uses, but it seems 95% of people these days are using them by default instead of considering the options.
Tathanen
Get Inside Her!
My logic doing what it's supposed to be doing doesn't mean my code is correct or bug-free, though. It means that the test I wrote passed. Front-end development is so visual that knowing an isolated chunk of logic is completing successfully in a vacuum is almost worthless. I'm going to have to manually test what I wrote no matter what I wrote. If you're releasing code just because you clicked the test button and it came back green, that's a hugely irresponsible practice.
There is a huge amount of technical debt created by writing tests for all of your code. The volume of testing code can approach if not eclipse the actual application logic, and tiny changes can require enormous refactoring not because your code needs it, but because the tests do. A colleague recently had to write an entire custom alert method just because normal alerts would break his testing environment. In the pursuit of better practices and better code, there's the very real danger of just creating enormous bloat and actually slowing down your process, instead of speeding it up.
Testing is hugely important. I just don't think a blanket application of automation is always the right solution. Plenty of projects could make it to completion much leaner and more solidly with just manual testing. Especially if you have only a single developer per discipline with the majority of the code authorship/ownership.
I think this article makes some fair points in both directions: http://ole-laursen.blogspot.com/2012/03/when-automated-tests-make-sense-and.html
Angular was mortifying to me when I started using it, and there are basically no resources that are worth a shit. ESPECIALLY not the "official" ones. I'd recommend picking up a book, and working your way through it. And then just build something. Only through actually building with it will you ever truly understand most of it.
DUFFMCWALIN
Member
I so badly wanna get into Wed Dev but It everything seems so daunting to me.
In order to put up a proper site I need to become proficient in like 4 different disciplines.
Is there an all encompassing Wed dev tutorial? Covering HTML, Jscript/Vbscript, CSS, Frameworks, etc etc?
To be honest with you going from software programming web dev isn't nearly as bad. There can be a lot of moving parts but if you start practicing and putting each little piece together, no matter how simple they are, and build something you will really grow.
If I am doing some specialized layout and not site wide stuff I try and keep it in a styles CSS file and not in the backbone css file and then min and bundle files. I try to set up everything in some form of skeleton or grid before I even build a page. If your not supposed to do layout in CSS where are you supposed to do it? I'm young though so I'm probably doing everything wrong.
Devolution
Member
CSS is layout now that tables are pretty much caput. You have margins, paddings, floats, etc.
HTML isn't even all content either since you have background-images and hovers.
It can get confusing. My main beef though is the browsers are still inconsistent in how they handle displaying content and stuff. It's gotten better but it can be really annoying.
HTML isn't even all content either since you have background-images and hovers.
It can get confusing. My main beef though is the browsers are still inconsistent in how they handle displaying content and stuff. It's gotten better but it can be really annoying.
Testing is it's own skill. Again if you are writing DOM tests or asynchronous ones they will likely be brittle and you don't always need 100% coverage especially for trivial one-liners. It's also worth point out that breaking tests in refactoring is a good thing because you are changing lots of code and should have assurances it still works as you intended but didn't impact other things. It gives you better confidence that the refactor succeeded. Good tests do not add debt, they remove it because you have higher assurance of working code. I am much more confident my code works when tested and that it has not regressed when I write a test for a new bug. You can hang yourself with it but learning to properly test will always impact a project for the better. In literally every other kind of programming unit testing is stock-standard and no one will even consider you if you don't understand it. It's sad that front-end is often not held in the same regard.
Tathanen
Get Inside Her!
Well, you should definitely be doing anything background-image related in your CSS, not in the HTML. And things like hovers, if being manually bound to events, should be in your JavaScript. Unless you're using a declarative HTML-extension like Angular, where the HTML/JS lines start to blur a bit. But as a rule, you definitely shouldn't be doing anything presentational whatsoever in your HTML.
This is really where my main beef lies, though. If you silo your tests to only the things you can reliably test, then sure it's much quicker and easier, but also vastly less useful. It's what I've read from most people who advocate the testing, though. Test logic, and when I say "what about the DOM, what about the rendering, what about AJAX" the reply is usually "uh don't worry about that, test logic." But all I friggin CARE about is those things!
I could write marvelous frontend test suites that guarantee a million things but my view of frontend web development places the vast bulk of value on how pages render and interact with the people who use them. If the tests I'm writing aren't covering this, I'm putting far too much of my effort into the part of the process I find the least valuable.
You're right, testing is generally less of a requirement when it comes to frontend devs. But there are good reasons for that. Until I can programatically evaluate the question "does this look right," I'll still be manually checking virtually everything I make.
So I'm currently learning development, in particular Java at the moment and transition to android later. I am trying to transition careers from It to development cus really it seems more fun and I'd rather create than play cleanup when something goes wrong.
I have been eyeing Treehouse as a means to learn and I have a little over 8 months before I looking for a new job in this field. I figure that's a healthy amount of time to learn but I don't want to waste time with the wrong resources. So far I've just been reading Head First Java I think it's called in my free time. Is Treehouse worth the time/money?
I have been eyeing Treehouse as a means to learn and I have a little over 8 months before I looking for a new job in this field. I figure that's a healthy amount of time to learn but I don't want to waste time with the wrong resources. So far I've just been reading Head First Java I think it's called in my free time. Is Treehouse worth the time/money?
DUFFMCWALIN
Member
Ya background images should be in the css. HTML mark up should be pretty much bare except for your class and id calls, the content, and whatever you wrap those in (I usually use divs).
Devolution
Member
Well yeah my point was when people say HTML is content, CSS is styling, that's not even true anymore.
Are we talking just about JS/Frontend? Either way, referring to unit tests as technical debt is a first one for me. Also not sure what sort of tests or code you guys are writing, but if tiny changes break your test suite to the point where you have to rewrite them, something is wrong.
And regarding the alert issue: That's why Angular rocks. Wrap it in a directive and then just mock it during testing.
http://docs.seleniumhq.org/.
Use something like this to write smoke tests. They take a lot longer to run and use slightly different strategies (ie click button and poll element for x milliseconds until it appears or timeout fail). You should still stub APIs outside your realm of control because otherwise it gets brittle but basically you can write tests that will go through user flows, test that certain things happen or don't happen, do ajaxy things and all that. These are in addition to unit tests, and they help a lot to see the interplay between things and make them verifiable. In an ideal QA process every bug fix should include a demonstrable test that it works and this will be run every check in to ensure it doesn't come back.
Worth noting you can take automated testing even further to performance tests and look for performance regressions too.
You should add python to the OP, Django and especially Flask for small sites rocks!
You can fire up an awesome complex site with an awesome backend administration in a day.
Also, for PHP and python web developers: Stop putting your logic in the template files for god's sake. Use the view(django/flask)/Controller(PHP) to do the logic, don't pollute the templates! Follow the MVC model and everything will be more maintainable in the future.
You can fire up an awesome complex site with an awesome backend administration in a day.
Also, for PHP and python web developers: Stop putting your logic in the template files for god's sake. Use the view(django/flask)/Controller(PHP) to do the logic, don't pollute the templates! Follow the MVC model and everything will be more maintainable in the future.
ActStriker
Member
I have some of this kind of sentiment. I didn't really know JavaScript outside of one class going into my first day on the job, and I ended up working on a app that was heavily dependent on a 3rd party library (Sencha Touch). I ended up picking up JS on the fly, but I'm realizing how much I learned was in relation to the library itself and not just the raw language.
Origami Superman
Member
Lynda.com is a massive resource for learning as well OP.
Freyjadour
Member
http://joelhooks.com/blog/2013/08/03/learn-angularjs-in-a-weekend/
Follow his steps. ng-boilerplate is a bit overkill, maybe, but he's making a good point with it. I've come up with my own angular / MEAN stack seed that's slightly different but preferable for modularity's sake.
For an absolute beginner: https://egghead.io/tags/AngularJS is fantastic, start at #1 and continue upwards.
Angular does do a lot more logic than you might be used to be - but it's not as scary as it seems. Start with simple things, watch the egghead.io videos in order and you'll be a lot less scared of it really quick - and as always, ask people when you're stuck!
SFHTML5 talk on WebGL. Just finished: https://developers.google.com/live/shows/5533864957050880
One of my co-workers was showing me some pretty bonkers webGL stuff today. For example
http://acko.net/
-COOLIO-
The Everyman
Font awesome is the bees knees.
I'm surprised by the amount of replies, seems like there's a lot of us here.
I'm a self-employed frontend developer myself. Most of my sites are built with Drupal.
Stuff I use daily:
terminal: iTerm
text editor: Sublime Text
design: Photoshop
ftp: Transmit
Virtual Box and modern.ie's Windows images for cross browser testing
Tools:
Compass/SASS
Grunt
Bower
Drush
LiveReload
For hosting I use Digital Ocean, they offer SSD equipped servers with SSH acces starting at $5 dollars/month.
I'm a self-employed frontend developer myself. Most of my sites are built with Drupal.
Stuff I use daily:
terminal: iTerm
text editor: Sublime Text
design: Photoshop
ftp: Transmit
Virtual Box and modern.ie's Windows images for cross browser testing
Tools:
Compass/SASS
Grunt
Bower
Drush
LiveReload
For hosting I use Digital Ocean, they offer SSD equipped servers with SSH acces starting at $5 dollars/month.
pinsomniac
Member
FontAwesome is definitely up there, but there are a number of other solid icon fonts. We Love Icon Fonts is a good place to start, and even allows for embeds (though not intended for production right now you'll need @font-face for that).
How would you rate their stuff for development? I've used some of their courses before for more design based programs (Photoshop etc) and some of the courses were incredibly boring at times.
Has anyone tried any of the courses over at Udemy?
victreeb3l
Member
Hey guys,
Can I build a portfolio site without using a CMS like Wordpress?
Essentially I'd like to have thumbnails or links for my projects on a side menu or some place but I dont want to have to change the links for each page every time I add something new.
Is using something like php include recommended for this scenario? Though I dont know how I feel about working on php just for a few lines of code. Can something like this be done in JavaScript?
Apologies for the super newb question! Not really a developer.
Lynda is great if you want to learn how to use a software (and I mean literally how to use it, like how to use masking in PS, etc.) but if you want to learn a programming language or something, they're pretty boring (and not very helpful at times).
Can I build a portfolio site without using a CMS like Wordpress?
Essentially I'd like to have thumbnails or links for my projects on a side menu or some place but I dont want to have to change the links for each page every time I add something new.
Is using something like php include recommended for this scenario? Though I dont know how I feel about working on php just for a few lines of code. Can something like this be done in JavaScript?
Apologies for the super newb question! Not really a developer.
Lynda is great if you want to learn how to use a software (and I mean literally how to use it, like how to use masking in PS, etc.) but if you want to learn a programming language or something, they're pretty boring (and not very helpful at times).
Zoe
Member
You would need something server side to fetch the content.
Testicular Sound Express
Member
Yeah I know what you mean. I've seen peoplenot paying attention to the fact that with SASS a css file is being created when you compile. Nesting is wonderful, but when you are nesting things 5-6 levels deep the css file becomes a complete mess.
DUFFMCWALIN
Member
I might be in the minority in this but don't build a site in php. Move to something else, RoR, Perl, Django, ASP, .Net, anything.
Flying Toaster
Member
Why do you feel this way?
DUFFMCWALIN
Member
I just feel that PHP is an archaic language that is getting surpassed in many ways, if you have to support a site in PHP I understand but I just don't like it, don't like working in it. I feel like there are more efficient languages out there. But thats just me. I'm sure someone with more experience knows better.
They give you enough rope to hang yourself for sure though when used for good it's a lot easier to maintain.
You can update a flat file and have javascript ajax it in and then template it. Probably not the best way as it'll have to load every time unless you do some really fancy caching.
logic in the controller? no thanks.
I don't, but I've been thinking about doing something like this. There are a number of text editors and terminal emulators on the Chrome Web Store now. I've played around with both Text and Caret. I like the simple look of Text, but Caret is a bit more powerful. Both should work offline, btw. For a terminal, try Terminal or Devtools Terminal.
Alternately, you can install Ubuntu onto your Chromebook and you'd have a plethora of dev tools at your disposal.
Flying Toaster
Member
You make me feel old. I remember working for a rather large hosting company back when PHP was cutting edge. But I do see where your coming from. There are better alternatives out there now.
Awesome, Subbed!!
Ive been using codecademy to learn HTML, CSS & Jscript. But damn JS makes me feel like a moron.
I guess im really oldschool. I design in photoshop, use dreamweaver for my text editor(my portfolio site was built this way). I used to be a designer but over the last 4 years ive been working exclusively in film. I totally have been left behind in all things design and web. trying to relearn everything all at once is a bit overwhelming. It feels like there are just so many things i need to learn and its daunting sometimes.
So ill definitely be reading this thread a bunch.
Ive been using codecademy to learn HTML, CSS & Jscript. But damn JS makes me feel like a moron.
I guess im really oldschool. I design in photoshop, use dreamweaver for my text editor(my portfolio site was built this way). I used to be a designer but over the last 4 years ive been working exclusively in film. I totally have been left behind in all things design and web. trying to relearn everything all at once is a bit overwhelming. It feels like there are just so many things i need to learn and its daunting sometimes.
So ill definitely be reading this thread a bunch.
-COOLIO-
The Everyman
sweet stuff my man.
Testicular Sound Express
Member
Somnid can you give a brief run through on your workflow, more specifically how you start your websites? I'm always interested in how people work, I could use a more regimented one myself.
presskit() might do the trick:
http://dopresskit.com/
It was originally designed for game press kits (it's being used for Octodad), but it'd likely work just as well for a simple personal portfolio: text, images, video, etc.
You need to have web hosting somewhere (with php capabilities) to upload it. Beyond that, there's no real development being done, except maybe some configuration in an .xml file. There's a manual (just a short one: 8 pages) with instructions.
Thanks for the reply dude! Good to know that it's possible. Now it's easier to decide on a Chromebook for this stuff.
Wow, it's fucking nothing. Or is it..... everything?
That's a little dev humor for you this Saturday morning.