background preloader

FrontEnd Guidelines

Facebook Twitter

Front-end performance for web designers and front-end developers. 20 January, 2013 It’s hard, if not impossible, to deny that performance is by far one of the most critical aspects of any decent web project, be it a small portfolio site, a mobile-first web app, right through to a full-scale ecommerce project.

Front-end performance for web designers and front-end developers

Studies, articles and personal experience all tell us that fast is best. Performance is not only hugely important, it is incredibly interesting, and something I am getting more and more involved in at both work (I’m forever pestering our Lead Performance Engineer) and in side projects and CSS Wizardry (I’m forever pestering Andy Davies). Front-end Code Standards & Best Practices. Overview This document contains guidelines for web applications built by the Creative Technology (front end engineering) practice of Isobar.

Front-end Code Standards & Best Practices

It is to be readily available to anyone who wishes to check the iterative progress of our best practices. Front end standards. Is as awesome as Chewbacca riding a squirrel, fighting Nazis with a cross bow. - @codepo8 Foreword This little book is to aid a shared understanding of front-end development best practice at PUP.

Front end standards

It's to help us deliver high quality content that works better, reaches more people - not only in today's browsers & devices, but in tomorrows. Browsers Statistics, naturally. 10 Conference Videos for Front-End Developers. Here’s a collection of videos that I’ve stumbled across in recent months.

10 Conference Videos for Front-End Developers

I haven’t watched all of them, but they’re on my current to-watch list and what better way to remind myself to watch them than to blog them. Enjoy. Breaking Good Habits (Harry Roberts) “Solving the right problems for the right people; looking at how some of our so-called best practices hinder, rather than help.” Direct link | Slides Learning to Love JavaScript (Alex Russell) I like this one because he discusses JavaScript’s “core concepts”, which is great for beginners, but also great for those who already know how to program but are just learning JavaScript. Direct link | Slides Writing Maintainable JavaScript (Andrew Dupont) “Learn about a handful of strategies you can use to keep your JavaScript codebase lean, modular, and flexible.” Direct link Progressive Enhancement 2.0 (Nicholas Zakas) 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.

10 Video conferencias de desarrolladores Front-end que no debes perderte

La verdad que no las he visto todas, pero con este artículo ya quedan recopiladas para ir viéndolas poco a poco. Front-end User Interface Web Development. 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.

Top 10 best practices for front-end web developers

In fact, many beginners think they just have to use divs instead of tables to produce quality code. Divs are cleaners than tables, but without proper code organization, it can be as (or even sometimes more) messy as table based code. Using indentation is a good start. But a tip that can definitely make you save lot of time is to comment every div tag you’re closing, as shown in the example below: <div id="header"><div id="sub" class="first left"> ...

Web Design Elements: Examples And Best Practices. This overview features a hand-picked and organized selection of the most useful and popular Smashing Magazine’s articles featuring various building blocks of a website and published here over all the years.

Web Design Elements: Examples And Best Practices

Call to Action Buttons: Examples and Best Practices Call to action in web design — and in user experience (UX) in particular — is a term used for elements in a web page that solicit an action from the user. The most popular manifestation of call to action in web interfaces comes in the form of clickable buttons that when clicked, perform an action (e.g. "Buy this now! ") or lead to a web page with additional information (e.g. A Front End Engineer's Manifesto. Front-end Code Standards & Best Practices.

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. By maintaining consistency in coding styles and conventions, we can ease the burden of legacy code maintenance, and mitigate risk of breakage in the future. By adhering to best practices, we ensure optimized page loading, performance and maintainable code. 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.

Front-end Style Guides

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. Front End Development Guidelines. Accessibility What's Up, DOCTYPE?

Front End Development Guidelines

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. It's supported in all modern browsers, and throws IE6 and IE7 into standards mode. 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. ...