25 CSS Snippets for Some of the Most Common and Frustrating Tasks In this post we have 25 CSS snippets and hacks that will solve many of the most frequently used and, at times, frustrating CSS development tasks. Why reinvent the wheel when there are already plenty of time-saving pre-written CSS code snippets? As well as some classic and timeless CSS hacks you will also find many CSS3 snippets, like box-shadow, border-radius,linear-gradient and many more. Adding shadow to text – text-shadow Helps make your text stand out from the rest. Source Adding an image-based border – border-image You can create any kind of border you want for any object(s) on your website using this. Adding shadow to borders and images – box-shadow Helps make your borders and images “pop” from the background more, giving a subtle 3D-like visual cue that it’s something separate, in the foreground, and the thing that visitors should be looking at. Adding rounded corners – border-radius Self-explanatory. Adding individual rounded corners – border-radius Adding a gradient – linear-gradient
16 JavaScript Concepts You Must Know Well (Essential JavaScript Concepts for Modern JavaScript Development ) If you plan to work as JavaScript Professional, you must know some JavaScript concepts and JavaScript-related web-development technologies, particularly as a modern JavaScript developer. If you know the 16 concepts enumerated below, you have the skill necessary to build world-class modern JavaScript web applications, and you are set for the near future—0 to 3 years. I will expound on each of these sixteen concepts, and I am hopeful all of us will have become better JavaScript programmers by the time we get through all of them. I have completed most of the 16 concepts with just a few more to go, so keep reading and learning. And sign up for the newsletter to get the latest updates. I trust you have learned JavaScript properly or you already know JavaScript enough to build a simple JavaScript-only web application.
Javascript : 8 ressources pour simplifier les I/O avec vos utilisateurs - javascript-ressources Aujourd'hui, la communication entre votre site et les utilisateurs est à l'honneur sur le Blog du Webdesign, tant en input qu'en output ! Découvrez cette sélection de ressources javascript simplifiant la gestion du clavier, des pointeurs, de la console, ou bien permettant d'afficher plus simplement les informations à l'écran ! TypeLink La navigation souris, un plaisir pour certain, un cauchemar pour d'autres. Personnellement, mon choix se porte bien plus sur le clavier : pourquoi chercher pendant plusieurs secondes la recherche d'un lien twitter quand il suffit de taper "twitter" pour accéder à la page ? Mousetrap Cette ressource permet de créer très simplement des raccourcis claviers pour son application web ou son site web. Pointer Colorjoe Colorjoe est un colorpicker tout beau et sans image, l'affichage est du pur-css ! EpicEditor Noty
MVC Architecture As modern browsers become more powerful with rich features, building full-blown web applications in JavaScript is not only feasible, but increasingly popular. Based on trends on HTTP Archive, deployed JavaScript code size has grown 45% over the course of the year. With JavaScript's popularity climbing, our client-side applications are much more complex than before. Application development requires collaboration from multiple developers. Design patterns are important to write maintainable and reusable code. In the last few years, a series of JavaScript MVC frameworks have been developed, such as backbone.js, ember.js, AngularJS, Sencha, Kendo UI, and more. MVC offers architectural benefits over standard JavaScript — it helps you write better organized, and therefore more maintainable code. MVC is composed of three components: Model is where the application’s data objects are stored. The model here represents attributes associated with each todo item such as description and status. Pros:
Dust by LinkedIn Dust by LinkedIn async/streaming operation browser/node compatibility extended Mustache/ctemplate syntax clean, low-level API high performance composable templates Release 2.2.3 PR-363, GH-340 - Remove old optimization to avoid looking at arrays in get. Release 2.2.2 PR-368 - Add context.getTemplateName. Release 2.2.0 PR-360 - Use get for all Dust references. Release 2.1.0 PR-350 - Support dynamic template names for the context's template name. Release 2.0.3 PR-323, GH-322 - dynamic blocks {+"{dynam}"} has been corrected. Release 2.0.2, (2.0.1) 2.0.1.add line and column numbers in to the parser so we can use it in linters or debuggers 2.0.2 actually uses it when using dust.parse Release 2.0.0 Core Enhancements Bug fixes PR-289, fix the CacheVM context across `dust.loadSource` calls for node.js Release 1.2.3 Perf Improvements for IE7 PR-253: performance enhancement in IE7 Release 1.2.2 GH-245: solve incorrect error line reported in pegjs GH-241: using dust.isArray in place of Array.isArray Release 1.2.1
95+ Stunning Jquery Effects, Lightbox, Tutorials JQuery is one of the most popular JavaScript frameworks which are powerful tools and huge benefit for developers to improves the designs integration with Web applications. This article will briefly introduce you to the jQuery with excellent examples. JQuery is really wonderful plug-in for designers which are giving attractive functionality to the web sites. Even now day’s every designers focusing on Jquery because of needs to have functionality out of the box that can be accessed by using this. 01. In this demo, what appears to be a regular static image gallery is given some extra interactivity by using a multi-layer zoom effect when hovering over an image. 02. This demo shows the much used Flash effect of circling an image around a page – all done using jQuery. 03. Although this demo may seem like eye-candy at first glance, it could be a very powerful tool for working with large images when coupled with AJAX or HTML5 local storage. 04. 05. 06. 07. 08. 10. 11. 12. 13. 14. 15. 16. 17. 19.
Typography Is The Foundation Of Web Design Advertisement For years you have been searching for it. You hear the question being asked in your dreams as you go on an Indiana-Jones-type-crusade to find the answer. What is the secret to Web design? A tough question and one that might not have an answer. Of course typography doesn’t mean font selection. More toys means more fun though, right? I’m not being sarcastic, saying that is all you need to know for a majority of websites. Information Architects is based around strong typography. One of my all time favorite designs is A Working Library. A Working Library by Mandy Brown. Some people find design like this to be dull and boring, they feel that design should have more pop to it. Well That Isn’t Hard It’s possible to create a wonderful design without the use of images at all. With the use of images I’m not talking about images that are needed to represent something such as icons, but images that are there for flare. Blake Allen Design uses images, but with great typography. (jvb)
Rack from the Beginning This post is out of date and contains some technical errors. Checkout the Rack Bootcamp for an update version with new sections. Rack is the HTTP interface for Ruby. Dead Simple Rack Applications Rack applications are objects that respond to call. class HelloWorld def response [200, {}, 'Hello World'] end end This class is not a Rack application. class HelloWorldApp def self.call(env) HellowWorld.new.response end end I've made a simple class that implements call. # hello_world.rb require 'rack' require 'rack/server' class HelloWorld def response [200, {}, 'Hello World'] end end class HelloWorldApp def self.call(env) HelloWorld.new.response end end Rack::Server.start :app => HelloWorldApp Here's what happens when you run this script: $ ruby hello_world.rb >> Thin web server (v1.4.1 codename Chromeo) >> Maximum connections set to 1024 >> Listening on 0.0.0.0:8080, CTRL+C to stop Simply open and you'll see "Hello World" in the browser. Env Now visit
All About Floats What is "Float"? Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Setting the float on an element with CSS happens like this: There are four valid values for the float property. What are floats used for? Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts. Floats are also helpful for layout in smaller instances. This same layout could be accomplished using relative positioning on container and absolute positioning on the avatar as well. Clearing the Float Float's sister property is clear. Clear has four valid values as well. Video
JS Bin: Built For Sharing, Education And Real-Time Rendering #151 Rack Middleware Rack middleware is a way to filter a request and response coming into your application. In this episode I show how to modify the response body using middleware. Download: source codeProject Files in Zip (94.7 KB)mp4Full Size H.264 Video (20.3 MB)m4vSmaller H.264 Video (13.4 MB)webmFull Size VP8 Video (36.2 MB)ogvFull Size Theora Video (28.3 MB)