background preloader

Code Standards

Code Standards
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 !

Making Wrong Code Look Wrong by Joel Spolsky Wednesday, May 11, 2005 Way back in September 1983, I started my first real job, working at Oranim, a big bread factory in Israel that made something like 100,000 loaves of bread every night in six giant ovens the size of aircraft carriers. The first time I walked into the bakery I couldn’t believe what a mess it was. The sides of the ovens were yellowing, machines were rusting, there was grease everywhere. “Is it always this messy?” “What? Oh boy. It took me a couple of months of cleaning the bakery every morning before I realized what they meant. Clean did not mean the paint on the ovens was nice and white. The whole concept of clean in the bakery was something you had to learn. After two months in the bakery, you learned how to “see” clean. Code is the same way. When you start out as a beginning programmer or you try to read code in a new language it all looks equally inscrutable. For example, in C: char* dest, src; Even more subtle: if (i ! if (i ! 1. 2. 3. 4. An Example Right.

An analogue clock using only CSS Having read the blurb around Safari’s CSS transitions I opted to familiarize myself with a quick project — the aim of which was to create a functional, CSS only, analogue clock. Result Experiment: CSS Analogue Clock Experiment works in Safari 4 Beta and Google Chrome. A working clock that optionally resorts to JavaScript to grab the current time (can be achieved by other means). Exper­i­ment updated. How To Before getting into the nitty gritty I created four images, a clock face and three transparent PNG hands (seconds, minutes and hours), ensuring that each of these were the same size so that when overlayed their centres would align. The magic that rotates the clock’s hands comes via two WebKit specific CSS properties, -webkit-transition (documentation) and -webkit-transform (documentation). Grab the current time Although the animation works beautifully, CSS alone is not capable of obtaining the current time.

Silk Icons “Silk” is a smooth, free icon set, containing over 700 16-by-16 pixel icons in strokably-soft PNG format. Containing a large variety of icons, you're sure to find something that tickles your fancy. And all for a low low price of $0.00. Current version: 1.3. View all icons (.png file, 1Mb) Download License I also love to hear of my work being used, feel encouraged to send an email with a link or screenshot of the icons in their new home to mjames at gmail dot com. The icons can also be used under Creative Commons Attribution 3.0 License (Hi Debian folks!) As an author, I would appreciate a reference to my authorship of the Silk icon set contents within a readme file or equivalent documentation for the software which includes the set or a subset of the icons contained within. Sightings Do you use this set? Donate People have expressed a wish to donate a little money.

Web Browser CSS Support This document is a section of the web browser standards support document. It includes detailed information about CSS support in major web browsers. About Up CSS is the primary language for adding presentation elements to a webpage. View this page without CSS CSS 2.1 features CSS 2.1 Units The following are units that are used in CSS properties. CSS 2.1 Importance Importance gives dominance to CSS rules that would normally be overridden by rules of greater specificity or latter appearance. CSS 2.1 At-rules At-rules provide special operations and selection mechanisms for the CSS document. CSS 2.1 Basic selectors Selectors specify where CSS rules are applied on the document. CSS 2.1 Pseudo-classes Pseudo-classes select elements in certain special states. CSS 2.1 Pseudo-elements Pseudo-elements are styled portions of the displayed page that were created by one of the following selectors. CSS 2.1 Basic properties CSS 2.1 Print properties CSS 2.1 Conformance CSS 3 features CSS 3 Units CSS 3 At-rules

The Joel Test: 12 Steps to Better Code by Joel Spolsky Wednesday, August 09, 2000 Have you ever heard of SEMA? It's a fairly esoteric system for measuring how good a software team is. No, wait! The neat thing about The Joel Test is that it's easy to get a quick yes or no to each question. A score of 12 is perfect, 11 is tolerable, but 10 or lower and you've got serious problems. Of course, these are not the only factors that determine success or failure: in particular, if you have a great software team working on a product that nobody wants, well, people aren't going to want it. 1. 2. If the process takes any more than one step, it is prone to errors. For this very reason, the last company I worked at switched from WISE to InstallShield: we required that the installation process be able to run, from a script, automatically, overnight, using the NT scheduler, and WISE couldn't run from the scheduler overnight, so we threw it out. 3. Read more about daily builds in my article Daily Builds are Your Friend. 4. 5. 6. 7. 8. 9. 10.

Animatable: One property, two values, endless possiblities box-shadow From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou psdchest - PSDChest – Free resources for web designers Tables in HTML documents 11.1 Introduction to tables The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. Each table may have an associated caption (see the CAPTION element) that provides a short description of the table's purpose. A longer description may also be provided (via the summary attribute) for the benefit of people using speech or Braille-based user agents. Table rows may be grouped into a head, foot, and body sections, (via the THEAD , TFOOT and TBODY elements, respectively). Authors may also group columns to provide additional structural information that may be exploited by user agents. Table cells may either contain "header" information (see the TH element) or "data" (see the TD element). Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. might be rendered something like this on a tty device: than:

10 Tips for Writing Quality Code James Schorr, the owner of Tech Rescue has a guest post on the Ruby Learning blog where he asks "Do You Enjoy Your Code Quality?" He makes a strong argument for treating programming as craftsmanship writing that the goal of his article is to help people improve code quality and "transform the mundane into the beautiful." Schorr offers a number of tips for pre- through post-development of projects, and while some of his points may be geared towards independent consultants and independent developers, they're pretty applicable to anyone: Pre-Development Gather all the requirements from clients up front. Development Out-engineer user-error as much as possible. Post-Development Review your code for speed, stability, security, and usability.Have non-technical people do real-world testing on your product.Revisit old code periodically and see what you would've done differently. How do you achieve quality programming?

Let Your Content Do the Talking: Fullscreen API Most browsers have the ability to enter a fullscreen or kiosk mode for a while now. Basically, the browser's chrome UI gets out of the way, and the content takes over. For apps installed from the Chrome Web Store, it's even been possible for users to manually configure an app to run fullscreen when it's opened from the New Tab Page. Manual fullscreen is good. The Fullscreen API allows web apps to programmatically tell any content on the page to enter the browser's fullscreen viewing mode, from JavaScript. If you want to skip the details, here's a demo: So how does the API work? div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); div.mozRequestFullScreen(); div.msRequestFullscreen(); div.requestFullscreen(); // standard Then to exit fullscreen, the document exposes a method for that: document.webkitExitFullscreen(); document.mozCancelFullscreen(); document.msExitFullscreen(); document.exitFullscreen(); Note: the exitFullscreen() is the spec version.

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