background preloader

Front End Development Guidelines

Front End Development Guidelines
Accessibility What's Up, DOCTYPE? The absence of a DOCTYPE is a crime punishable by death. You may have relied on the following DOCTYPE in the past, but it's important to know that this is now being superseded by a leaner and meaner snippet. Ideally, the HTML5 DOCTYPE should be used. Write Valid Semantic Markup Writing websites with clean, semantic HTML is something we wish we could always do. Headings should be heirarchically created from <h2>onwards, paragraphs should always be in <p> tags and so on and so forth. Which do you think looks cleaner, this? <span class="sectionHeading">A Heading</span><br /><br /> Lorem ipsum dolor sit amet. ... Or this? <h2>A Heading</h2><p> Lorem ipsum dolor sit amet. ... Fallbacks for Middle Mouse Clicks One of the most frustrating accessibility and usability flaws of the modern web stems from the remapping of hyperlink click functions. A modern example of a popular website that is contributing to this problem is the Twitter web app. Use Microformats

40 Innovative UI Concepts from Dribbble Innovative concepts, whether practical or imaginative, can help progress creatives and their work to the next level. By breaking rules, ignoring common conventions, and testing the limits of design, we can create opportunities that allow us to enhance and improve our work. Take a look at some of these brilliantly designed interactions from Dribbble, and let them inspire creativity in your own work today. The Side Nav Revisited Appointment by Paresh Khatri Browse Shows – iOS App by Umar Irshad Dialoggs – Collapsible Menu by Drew Wilson Dashboard – Realtor Project by Brian Waddington Zendesk Project Lotus by Jason Wu Page Curls and Peels Qiwy iOS app curl test by Mikael Eidenberg Inside (first draft) – iPad – UI/UI/iOS by Cuberto Peel Back by Juan Sanchez Curl by Prathyush Pramod Bookmark for Magazines by Ugur Akdemir Folding Screens Photofold by Supratim Nayak Fold to unlock iOS style by Anton Kudin Flipweek agenda by Wouter ● Bread&Pepper UX/iOS idea with video process by Cuberto Dashboard by Kerem Suer

10 Video conferencias de desarrolladores Front-end que no debes perderte En el siguiente artículo he recopilado una serie de vídeo conferencias de desarrolladores Front-end, expertos en materias tales como CSS, HTML5 o JavaScript. La verdad que no las he visto todas, pero con este artículo ya quedan recopiladas para ir viéndolas poco a poco. Breaking Good Habits (Harry Roberts) “Solventando los debidos problemas a las debidas personas; mirando como algunas de nuestras mejores prácticas obstaculizan, en vez de ayudar” Enlace directo | Slides Learning to Love JavaScript (Alex Russell) Comenta los concepts del core de JavaScript, que esta muy bien para los que están comenzando pero tambien para quien ya ha programado pero esta aprendiendo JavaScript. Enlace directo | Slides Writing Maintainable JavaScript (Andrew Dupont) “Aprende como obtener un puñado de estrategias que puede utilizar para mantener su base de código JavaScript sólida, modular y flexible.” Enlace directo Progressive Enhancement 2.0 (Nicholas Zakas) Fuente: It’s Time To Stop Blaming Internet Explorer.

Understanding Usability Javascript Mistakes You Must Avoid If you are new to JavaScript and you write raw JavaScript or use any framework (jQuery, Mootools, Dojo, YUI) with it, you must avoid few mistakes. Actually these are my experiences when I was learning JavaScript. Equality Operator You may know that in js, two operators are used for comparing values. Here are more examples. Some of the results are unexpected specially for those who don’t know how JavaScript evaluates == operator. Consider the first example (1 == “1″). In the second example (“true” == true) is false because if the string contain characters other than digits, convertion to number will return NaN which means Not a Number. You can check what value will be returned after conversion to number using the Number constructor. Now you maybe wondering how === operator works. Not Assigning null to Reference Types It’s common mistake that many js developers don’t assign null value to variables of reference types (object or Array) when there use is finished. Don’t Forget Keyword var

Web Design Blog, Tutorials and Inspiration | Web Design Ledger How To Streamline your Website Building Process Call me odd but I find that being robotic in my approach to work seems to have the best results when faced with repetitive tasks or the need to replicate results across the board. From the very beginning of planning a website to its creation – I believe you can streamline the process to cut out wasted time, ensure you’re working on content that sells, and creating a step-by-step blueprint (for your own records) that allows you to knock down websites in a single swoop. This is how you can blitz your way into a new website this afternoon. Blitz Task #1: Website Planning A basic website, these days, will have the same common elements: Home PageBlogMoney Posts (Reviews)Value Posts (Tutorials)Filler Posts (Opinions)Product Pages (Optional)Contact UsAbout MePrivacy/ToS Home Page Here, your goal is to either share your latest information or reveal the purpose of a website; ideally, it’s the later. Blog Product Pages (Optional) Contact Us Simple – need not of explanation. About Me Privacy/ToS Production

Front-end Style Guides We all know that feeling: some time after we launch a site, new designers and developers come in and make adjustments. They add styles that don’t fit with the content, use typefaces that make us cringe, or chuck in bloated code. But if we didn’t leave behind any documentation, we can’t really blame them for messing up our hard work. To counter this problem, graphic designers are often commissioned to produce style guides as part of a rebranding project. A style guide provides details such as how much white space should surround a logo, which typefaces and colours a brand uses, along with when and where it is appropriate to use them. Design guidelines Some design guidelines focus on visual branding and identity. Some guidelines go further, encompassing a whole experience, from the visual branding to the messaging, and the icon sets used. The BBC’s Global Experience Language. Code standards documents We can make a similar argument for code. The front-end developer’s style guide Easier to test

Current Issue There’s one thing I’ve noticed in the 15+ years I’ve been practicing user-centered design and leading User Experience (UX) teams: one of the best ways to judge the experience of a User Experience practitioner is to assess the number and variety of the design solutions, or “tools,” they have available in their personal UX “tool belt.” Usability problems come in many shapes and sizes, and the solutions need to be equally varied – seasoned UX professionals don’t often fall into the trap of thinking just because they’ve mastered a standard set of design “hammers,” that every usability problem they see is a “nail.” This being said, most of us User Interface (UI) designers have spent our whole careers using visual tools to solve usability problems. Some of us have branched out to audio tools too, but the other human senses are rarely considered part of our practice. Haptic interfaces are nothing new. In fact, one of the first haptic interfaces was introduced in 1829 by Louis Braille.

Learning Server-Side JavaScript with Node.js Node.js is all the buzz at the moment, and makes creating high performance, real-time web applications easy. It allows JavaScript to be used end to end, both on the server and on the client. This tutorial will walk you through the installation of Node and your first “Hello World” program, to building a scalable streaming Twitter server. What is Node.js? JavaScript has traditionally only run in the web browser, but recently there has been considerable interest in bringing it to the server side as well, thanks to the CommonJS project . “Every I/O operation in Node.js is asynchronous…” Node.js, uses an event loop instead of threads, and is able to scale to millions of concurrent connections. Step 1 Installation Node.js runs on Unix based systems, such as Mac OS X, Linux, and FreeBSD. Download the latest release of Node.js from (the latest version at the time of this writing is 0.1.31) and unzip it. Open the terminal, and run the following commands. cd /path/to/nodejs make node test.js

Code Standards | Isobar Overview This document contains guidelines for web applications built by the Creative Technology (front end engineering) practice of Roundarch Isobar. It is to be readily available to anyone who wishes to check the iterative progress of our best practices. This document's primary motivation is two- fold: 1) code consistency and 2) best practices. Pillars of Front-end Development ◊ General Practices ◊ Indentation ◊ For all code languages, we require indentation to be done via soft tabs (using the space character). Readability vs Compression ◊ We prefer readability over file-size savings when it comes to maintaining existing files. We will use server-side or build processes to automatically minify and gzip all static client-side files, such as CSS and JavaScript. The first component of any web page is the tag-based markup language of HTML . Markup defines the structure and outline of a document and offers a structured content. HTML5 is a new version of HTML and XHTML. Template ◊ Doctype ◊ Using !

45 Incredibly Useful Web Design Checklists and Questionnaires - Smashing Magazine Designing websites can be a long and complicated process. Dealing with clients, designing prototypes, coding, programming, and testing – there’s a lot to keep track of and a lot to make sure gets done. That’s where checklists can make your life a whole lot easier. With lists of points covering multiple areas from content to usability to accessibility to standards, you’re a lot less likely to overlook important parts of a site. Below are 45 checklists to make your design process easier and more organized. Also consider our previous article: 15 Essential Checks Before Launching Your Website1 lists some important things to check before you make your sites public. 1. These questionnaires and checklists are focused on making your relationships with your clients better. How to Extract the Facts with a Web Design Client Questionnaire2 This questionnaire from Freelance Switch is meant to send out to prospective clients to get a good idea of what they’re looking for from a website. 2. 3. 4. Dr.

Top 10 best practices for front-end web developers Explain which div you’re closing Most of the time when I’m viewing a website source, I see, at the very bottom of the page, an almost endless list of closing </div> tags. In fact, many beginners think they just have to use divs instead of tables to produce quality code. Using indentation is a good start. <div id="header"><div id="sub" class="first left"> ... Use a CSS reset Unless you’re a beginner or if you were on vacation on a desert island for the last 6 years, you might already know how useful a CSS reset it. Source: Don’t use @import CSS files can be included using the @import directive. <style type="text/css> @import url('a.css'); @import url('b.css'); </style> While it works, the @import directive is much slower than the other way to include stylesheets into a html document: “Smush” your images Being a developer, I always found that optimizing my images for the web wasn’t easy. Don’t mix CSS with HTML Don’t mix Javascript with HTML

Related:  others