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

Thinking Inside The Box With Vanilla JavaScript

During the past four or five years of blogging regularly and doing research for other writing projects, I’ve come across probably thousands of articles on JavaScript.

Thinking Inside The Box With Vanilla JavaScript

I think those articles are great, and I hope we see more of them. But sometimes the simplest JavaScript features are sitting right under our noses and we just haven’t had a lot of exposure to them. I’m talking about native, more-or-less cross-browser features that have been in the language for some time.

Read more...

Introducing Responsive Web Typography With FlowType.JS

It's our great pleasure to support active members of the Web design and development community. Today, we're proud to present FlowType.JS that allows a perfect character count per line at any screen width. This article is yet another special 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, CSSComb and Jelly Navigation Menu. — Ed.

While working on an image-heavy site for Simple Focus, a couple of our designers, John Wilson and Casey Zumwalt, noticed how images always scaled perfectly. Pull the corner of the browser window and the images expand to fill the space. Push back the corner, they shrink and fall into place. The line length of hypertext, on the other hand, changes based on its parent element's width, which has a negative effect on readability.

Introducing Responsive Web Typography With FlowType.JS

"Wouldn't it be nice," John asked, "if text worked more like images?" Casey assured him that it could, with a jQuery plugin, if only they could figure out the math.

Read more...

Introduction To Polygonal Modeling And Three.js

When the third dimension is introduced into an entertainment medium, it forever changes the way that medium is presented and consumed. The photorealism of the CGI dinosaurs in Jurassic Park opened the doors for film creators to use computers to create visual environments that never would have been possible otherwise.

Introduction To Polygonal Modeling And Three.js

VeggieTales spawned a new type of cartoon, one that uses 3-D objects instead of drawings and which inspired the creation of everything from Pixar and Dreamcast blockbusters to Saturday morning cartoons. Computer software was greatly affected by this new trend in visual media.

Read more...

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...

↑ Back to top