background preloader

A Baseline for Front-End Developers

A Baseline for Front-End Developers
12 Apr 2012 edit I wrote a README the other day for a project that I'm hoping other developers will look at and learn from, and as I was writing it, I realized that it was the sort of thing that might have intimidated the hell out of me a couple of years ago, what with its casual mentions of Node, npm, Homebrew, git, tests, and development and production builds. Once upon a time, editing files, testing them locally (as best as we could, anyway), and then FTPing them to the server was the essential workflow of a front-end dev. We measured our mettle based on our ability to wrangle IE6 into submission or achieve pixel perfection across browsers. Many members of the community -- myself included -- lacked traditional programming experience. HTML, CSS, and JavaScript -- usually in the form of jQuery -- were self-taught skills. Something has changed in the last couple of years. Whatever it is, I think we're seeing the emphasis shift from valuing trivia to valuing tools. JavaScript Testing The End Related:  Front-end Development

gnedster/Front-end-Developer-Interview-Questions How to Learn JavaScript Properly Learn JavaScript Properly (For Beginners and Experienced Programmers) This study guide, which I also refer to as a course outline and a road map, gives you a structured and instructive outline for learning JavaScript properly. In fact, you will find two study guides below, one for absolute beginners and the other for experienced programmers and web developers. You do want to learn JavaScript. I presume you are here for that reason, and you have made a wise decision. For if you want to develop modern websites and web applications (including an internet startup), or if you want a high-paying developer job ($75K to $250K+), JavaScript is undoubtedly the best web-development language to learn today, unless you want to develop native iOS or Android apps exclusively. Table of Contents Study Groups People have started study groups for this study guide. What You will Learn How Will Your Life Change After You Learn JavaScript Properly? Be Empowered Resources for the Two Study Guides Don’t use Safari.

CSS3 Responsive Slider / Carousel Using Radio Buttons Select catcher Created by Ian Hansson (@teapoted) Art from Brendan Zabarauskas (@bjzaba_). Browser Support: Best In Test: Firefox (transition performance) Full Support: Chrome, Firefox, Opera, Safari (latest versions of all browsers) Partial Support: IE9 (Functional, but does not support transitions) *No JavaScript Functionality (1 compatability fix though) iOS devices don't handle labels properly. You can view this page without the js iOS fix here. How Does It Work? The actual slider is much like any JavaScript slider. To save our input we are using radio buttons. We put the radio buttons at the top so when they are :checked we can use a general sibling selectors (~) to change our slider. That is all the essential CSS, the other gaff is just styling and animation. Created by Ian Hansson (@teapoted), Feb 2012.

JavaScript, JavaScript... | by Angus Croll 11 Tips on Hiring a Rails Developer By Peter Cooper / November 29, 2007 The following article is a guest article written by John Philip Green of Savvica, a Toronto based educational technology company whose development efforts are focused on Ruby and Rails. Hiring Rails full-time Rails developers is hard. Here's why: Surging demand. I've hired ten full-time Rails developers into startups so far in 2007, but to do that I've had to interview hundreds and learned a lot of lessons. Don't use or recruitment agencies. Happy Hiring! Programming JavaScript Applications by Eric Elliott Take advantage of JavaScript’s power to build robust web-scale or enterprise applications that are easy to extend and maintain. By applying the design patterns outlined in this practical book, experienced JavaScript developers will learn how to write flexible and resilient code that’s easier—yes, easier—to work with as your code base grows. $27.99 Read Online for FreeBrought to you by OSCON Conference Buy it on JavaScript may be the most essential web programming language, but in the real world, JavaScript applications often break when you make changes.

Retina.js | Retina graphics for your website How it works When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server. For example, if you have an image on your page that looks like this: <img src="/images/my_image.png" /> The script will check your server to see if an alternative image exists at this path: "/images/my_image@2x.png" How to use JavaScript The JavaScript helper script automatically replaces images on your page with high-resolution variants (if they exist). Place the retina.js file on your server Include the script on your page <script type="text/javascript" src="/scripts/retina.js"></script> (put it at the bottom of your template, before your closing </body> tag) That's it! Steps: Download Download zip Download source Contribute

Adventures in JavaScript Development Great questions about client-side development from a server-side developer This question came in today and I thought it was an excellent one to share with my readers. It is also one of those questions with a lot of different takes so I hope my readers chime in with their own opinions as well. The reader wants to remain anonymous, but I really feel like he is in a similar position as a lot of my other readers as well. So, let's get into it. First, some background (that I'm mangling a bit to help keep his anonymity so please excuse any awkwardness). 12 years in IT. While I was in a different role, I was doing roughly the same over the past decade as well. Now - the questions: The more courses and conferences I go to and the more I learn/read about the need to move my server side websites and applications to more client side with 100% responsiveness (which to me, means built on a js platform, with a bootstrap framework). Technically you are talking about two very different things. When I began my development career, I was mainly doing simple HTML sites.

Learning JavaScript Design Patterns I would like to thank Rebecca Murphey for inspiring me to open-source this mini-book and release it for free download and distribution - making knowledge both open and easily available is something we should all strive for where possible. I would also like to extend my thanks to the very talented Alex Sexton who was kind enough to be the technical reviewer for this publication. I hope that it helps you learn more about design patterns and the usefulness of their application to JavaScript. Volume 2 of Essential JavaScript Design Patterns is currently being written and will be more detailed than this first edition. At the beginning of this book I will be focusing on a discussion about the importance and history of design patterns in any programming language. One of the most important aspects of writing maintainable code is being able to notice the recurring themes in that code and optimize them. You may ask why it’s important to understand patterns and be familiar with them.