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.

25 Best AWK Commands / Tricks AWK is a data driven programming language designed for processing text-based data, either in files or data streams. It is an example of a programming language that extensively uses the string datatype, associative arrays (that is, arrays indexed by key strings), and regular expressions. WIKI Here are the most Kick ass voted AWK commands. 1) List of commands you use most often history | awk ‘{a[$2]++}END{for(i in a){print a[i] ” ” i}}’ | sort -rn | head 2) Display a block of text with AWK awk ‘/start_pattern/,/stop_pattern/’ file.txt I find this terribly useful for grepping through a file, looking for just a block of text. dmidecode | awk '/Battery/,/^$/'Will show me everything following the battery block up to the next block of text. 3) Graph # of connections for each hosts. Written for linux, the real example is how to produce ascii text graphs based on a numeric value (anything where uniq -c is useful is a good candidate). 4) Check your unread Gmail from the command line awk ‘! BSD Version:

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.

Learn Code The Hard Way -- Books And Courses To Learn To Code 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?

Gambas 3 est sorti le 31 décembre 2011 Après quatre années de développement depuis la dernière version, j'ai le plaisir d'annoncer la sortie de la version 3 de Gambas. Gambas est un langage de programmation objet et une plate-forme de développement pour Unix basée sur un interpréteur BASIC. Il est distribué sous licence GNU GPL. Il se compose d'un compilateur, d'un interpréteur, d'un ensemble de modules d'extensions appelés composants, d'un environnement de développement intégré complet, et d'une mascotte. Voici la mascotte : Énumérons quelques-unes des caractéristiques distinctives du langage : C'est donc du BASIC. Sinon une question revient souvent : « Est-ce que Gambas est viable pour faire de "gros" ou de "vrais" projets ? La réponse est... L'environnement de développement est intégralement réalisé en Gambas. Pour l'avenir, les développement suivants sont envisageables : Enfin pour terminer, une petite fierté. :-) Gambas et Perl sont, que je sache, les deux seuls langages dont les algorithmes de hachage sont « randomisés ».

Tips on How to Code Web Designs Better Writing semantic, efficient and valid HTML and CSS can be a time-intensive process that only gets better with experience. While it is important to take the time to produce high-quality code — as it is what separates professionals from hobbyists — it is equally important to produce websites as expeditiously and efficiently as possible. As web designers, we’re always looking for ways to be more productive. Getting more work done in less time while at the same time maintaining (or improving) our products’ quality is a lifelong quest for many of us. This article discusses a few fundamental techniques for writing high quality and efficient HTML and CSS. Use Templates and Frameworks (Even If It’s Homemade) Using templates and frameworks provides you with a solid baseline from which to start from. Even something as simple as using this XHTML 1.0 strict template — a skeleton for your HTML documents — can be a time-saver. Conform to XHTML 1.0 Strict Doctype Use Good and Consistent Naming Conventions

JavaScript Garden Although JavaScript deals fine with the syntax of two matching curly braces for blocks, it does not support block scope; hence, all that is left in the language is function scope. function test() { // a scope for(var i = 0; i < 10; i++) { // not a scope // count } console.log(i); // 10} There are also no distinct namespaces in JavaScript, which means that everything gets defined in one globally shared namespace. Each time a variable is referenced, JavaScript will traverse upwards through all the scopes until it finds it. In the case that it reaches the global scope and still has not found the requested name, it will raise a ReferenceError. The Bane of Global Variables // script Afoo = '42'; // script Bvar foo = '42' The above two scripts do not have the same effect. Again, that is not at all the same effect: not using var can have major implications. // global scopevar foo = 42;function test() { // local scope foo = 21;}test();foo; // 21 Local Variables var foo = 3; bar = 4;}test(10); Hoisting

Web Development Tips and Tools for Beginners (and Experts) Every great web developer starts with HTML. From there comes an array of tools that every developer can use to create great websites.The basics would be a text editor and an image editing software. But why be content in using those two when there are available tools that can expedite not only your coding speed but also help you organize and learn new things? Expedite Development With the Following: 1. A Model-View-Controller framework is like an architectural plan in software/web development. Now I will elaborate this to the point where even my grandma would understand, because the concept would be very confusing for people who learn of MVC’s existence just now (I was made aware of this gem 8 hours prior writing this). In the second way I mentioned, suppose you have a DropDown for the quantity of shirts to add on your cart and: Every bullet suggests one file each. To make it more simpler, here’s an analogy: Each can function separately and as one, making development more organized. CakePHP

Related: