Category: Coding

This extended category features articles on client-side and server-side programming languages, tools, frameworks and libraries, as well as back-end issues. Experts and professionals reveal their coding tips, tricks and ideas. Curated by Dudley Storey. Subscribe to the RSS-Feed.

Popular tags in this category:

CSS Techniques JavaScript Tools Resources

Progressive Enhancement Is Faster

The aim of republishing the original article by Jake is to raise awareness and support the discussion about the role of progressive enhancement within the community. We look forward to your opinions and thoughts in the comments section. – Ed.

Progressive enhancement has become a bit of a hot topic recently, most recently with Tom Dale conclusively showing it to be a futile act, but only by misrepresenting what progressive enhancement is and what its benefits are.

Progressive Enhancement Is Faster

You shouldn't cater to those who have deliberately disabled JavaScript, unless of course you have a particular use case there, e.g. you're likely to get significant numbers of users with the Tor Browser, which comes with JS disabled by default for security. If you do have that use case, progressive enhancement helps, but that's not its main benefit.

Read more...

Designing For Emotion With Hover Effects

Of the many factors that must be considered in Web design, emotional interaction is an important, but frequently neglected, component. In the real world, we experience the sensual interaction of design all the time.

Designing For Emotion With Hover Effects

Reflect for a moment on the emotional engagement of slipping behind the wheel of a powerful luxury car: the welcoming embrace of the driving seat, the tactile experience of running your hands over the leather on the steering wheel, the subtle gleam reflected in the controls.

Read more...

Analyzing Network Characteristics Using JavaScript And The DOM, Part 2

In Part 1 of this series, we had a look at how the underlying protocols of the Web work, and how we can use JavaScript to estimate their performance characteristics. In this second part, we’ll look at DNS, IPv6 and the new W3C specification for the NavigationTiming API.

Analyzing Network Characteristics Using JavaScript And The DOM, Part 2

Every device attached to the Internet is identified by a numeric address known as an IP address. The two forms of IP addresses seen on the open Internet are IPv4, which is a 32-bit number often represented as a series of four decimal numbers separated by dots, e.g. 80.72.139.101, and IPv6 which is a 128-bit number represented as a series of multiple hexadecimal numbers separated by colons, e.g. 2607:f298:1:103::c8c:a407.

Read more...

Semantic CSS With Intelligent Selectors

“Form ever follows function. This is the law.” So said the architect and “father of skyscrapers” Louis Sullivan. For architects not wishing to crush hundreds of innocent people under the weight of a colossal building, this rule of thumb is pretty good.

Semantic CSS With Intelligent Selectors

In design, you should always lead with function, and allow form to emerge as a result. If you were to lead with form, making your skyscraper look pretty would be easier, but at the cost of producing something pretty dangerous. So much for architects. What about front-end architects — or “not real architects,” as we are sometimes known?

Read more...

Introducing Jelly Navigation Menu: When Canvas Meets PaperJS

It's our great pleasure to support active members of the Web design and development community. Today, we're proud to present the Jelly Navigation Menu that shows the power of PaperJS and TweenJS when used together. This article is yet another golden nugget of our series of various tools, libraries and techniques that we've published here on Smashing Magazine: LiveStyle, PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin and CSSComb. — Ed.

Jelly Navigation Menu With CSS And CoffeeScript

There is no doubt that the Web helps designers and developers find the best inspiration and resources for their projects. Even though there are a bunch of different tutorials and tips available online, I feel that HTML5 canvas techniques are missing the most. Good news: I had the chance to fulfill this wide gap. In this article, I would like to share my experience and story of how I brought the "Jelly Navigation Menu" to life. Credits go to Capptivate.co and Ashleigh Brennan's icons — they were my inspiration for this project.

Read more...

Absolute Horizontal And Vertical Centering In CSS

In this article, Stephen Shaw introduces a technique for perfect horizontal and vertical centering in CSS, at any width or height. The techniques works with percentage-based width/height, min-/max- width, images, position: fixed and even variable content heights. — Ed.

We've all seen margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering... until now! But actually (spoiler alert!) absolute centering only requires a declared (variable) height and these styles.

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

I'm not the pioneer of this method (yet I have dared to name it Absolute Centering), and it may even be a common technique, however, most vertical centering articles never mention it and I had never seen it until I dug through the comments section of a particular article.

Read more...

Backbone.js Tips And Patterns

Backbone.js is a popular open-source JavaScript “MV*” framework that has gained significant traction since its first release a little over three years ago. Although Backbone.js provides structure to JavaScript applications, it leaves a lot of design patterns and decisions up to the developer, for better or worse, and developers run into many common problems when they first begin developing in Backbone.js.

Backbone.js Tips And Patterns

In my opinion, if you’re writing in Backbone.js, you should be following test-driven development (TDD) for your models and collections. I follow TDD by first writing failing Jasmine.js unit tests against my models or collections. Once the unit tests are written and failing, I flush out the model or collection.

Read more...

↑ Back to top