A simple set of templates for any project March, 2013: The files have been updated — this web site has not! Head over to GitHub for the very latest. Like a lot of developers, we start every HTML project with the same set of HTML and CSS files. We've been using these files for a long time and have progressively added bits and pieces to them as our own personal best practices have evolved. Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it's time for our best practices to catch up, and we thought we'd put our files out there for everyone to use. By no means do we see this as the One True Way to start every project, but we think it's a good starting place that anyone can make their own.
How to Create a CSS Ribbon We talk about CSS ribbons in web design when a strip of box (called ribbon) wraps another box. It’s a fairly used design technique to decorate text, especially headings. On W3C‘s website you can check out how properly used CSS ribbons can help structure content in a subtle way. How to Create Skewed Edges With CSS How to Create Skewed Edges With CSS In this post, we're going to look at how we can create a angled edge effect (horizontally) on…Read more Patterns For Large-Scale JavaScript Application Architecture Today we're going to discuss an effective set of patterns for large-scale JavaScript application architecture. The material is based on my talk of the same name, last presented at LondonJS and inspired by previous work by Nicholas Zakas. Who am I and why am I writing about this topic? I'm currently a JavaScript and UI developer at AOL helping to plan and write the front-end architecture to our next generation of client-facing applications. As these applications are both complex and often require an architecture that is scalable and highly-reusable, it's one of my responsibilities to ensure the patterns used to implement such applications are as sustainable as possible. I also consider myself something of a design pattern enthusiast (although there are far more knowledgeable experts on this topic than I).
Initializr: With Great Templates Comes Great Responsivity! Today I'm proud to announce that a "Responsive template" is now available on Initializr! It will help you dealing with all the various devices used to display your site. Mobiles, tablets, netbooks, laptops, desktop monitors, HUGE desktop monitors... Making your site work correctly on all these devices is a real nightmare. Well guess what? 20 Pure Websites with Clean White Backgrounds Whenever we start work designing a website one of the first things we always do is throw a bunch of colours and textures onto the canvas, but sometimes a design will benefit from the clean and crisp appearance of a pure white background. This showcase rounds up 20 minimal website designs that prove that sometimes less is more. Information Architects Color Grade It
Diamond grid layout with Sass Since I started my career on the web, I’ve been building websites that follow standard grid layouts. It got to a point where I was telling an intern at my company that developers think in rectangles. I mean, there’s nothing wrong with rectangular layouts. They’re like your mom’s Volvo, steady and reliable. But sometimes, it’s fun to try something different. the-internets-10-ugliest-websites?ref=webdesignernews Craigslist is one of the ugliest websites on the Internet. The home page is an indistinct wall of links and text, the site is tough to navigate, the postings are cluttered, and the design has barely changed in the past 15 years. At a time when websites are competing to offer the best digital experiences, Craigslist is the pinnacle of user unfriendliness. And that's exactly what makes it brilliant, says Pascal Deville. Deville is founder of Brutalist Websites, a site dedicated to the most frustrating design on the web. The site takes its name from the controversial architectural movement Brutalism.
A re-introduction to JavaScript Why a re-introduction? Because JavaScript is notorious for being the world's most misunderstood programming language. It is often derided as being a toy, but beneath its layer of deceptive simplicity, powerful language features await.
50 Examples of Responsive Web Design (plus 1) Nowadays, it's not only important to develop your clients' websites to look good on all browsers, and on PC and MAC, it's also a must that websites are viewable on tablets and mobile devices. A lot of people opt for making one version of their site for desktop and another for mobile. Others choose Responsive Design, a mix of fluid grids and layouts, flexible images and an intelligent use of CSS media queries.
Canvas Pad Rectangles (simple shapes) HTML Canvas 2D Context specification: Section 8 Simple shapes (rectangles) context.clearRect(x, y, w, h) Clears all pixels on the canvas in the given rectangle to transparent black. context.fillRect(x, y, w, h) Paints the given rectangle onto the canvas, using the current fill style. JS: The Right Way jQuery jQuery is a fast, small, and feature-rich JavaScript library. Built by John Resig. Built by Yahoo! 9 reasons hand-coding always beats site builders If you use any kind of social media like Facebook or Twitter, you won’t have been able to avoid the merciless onslaught of ads promoting WYSIWYG website development. I’m not talking about those fancy software applications like DreamWeaver, but actually hosted site building applications that offer drag-n-drop website building systems complete with predefined templates. You could easily think that this is a great idea because on the face of it these kinds of systems are supposed to save you time and effort, but the reality is a little different. Here are just some of the reasons why you’re better off coding everything yourself.
Scaling Your JavaScript Applications (Videos) Summary Developers creating JavaScript applications these days usually use a combination of patterns like MVC/MV*, modules, widgets and plugins for their architecture.Whilst this works great for apps that are built at a smaller-scale, what happens when your project starts to grow? In this talk, I present an effective set of design patterns for small, medium and large-scale JavaScript applications. You’ll learn how to separate concerns, keep your application logic decoupled, build modules that can exist on their own or be dropped into other projects and scale your applications to minimize any breakage in the user experience. Slides The slides for this presentation can be found over on SpeakerDeck.