Smashing Coding

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 Kieran Masterton. Subscribe to the RSS-Feed.

Popular tags in this category: CSS, CSS3, HTML, JavaScript, jQuery, PHP, Techniques, Essentials, Tools.

Five Useful Interactive CSS/jQuery Techniques Deconstructed

By Jon Raasch
June 16th, 2011
CSS, JQuery, Techniques
56 Comments

With the wide variety of CSS3 and JavaScript techniques available today, it's easier than ever to create unique interactive websites that delight visitors and provide a more engaging user experience. In this article, we'll walk through five interactive techniques that you can start using right now. We'll cover animated text effects, animated images without GIFs, mega drop-down menus, fancy slideshow navigation and animated icons for the hover state of buttons.

Besides learning how to accomplish these specific tasks, you'll also master a variety of useful CSS and jQuery tricks that you can leverage when creating your own interactive techniques. The solutions presented here are certainly not perfect, so any thoughts, ideas and suggestions on how you would solve these design problems would be very appreciated.

Useful HTML-, CSS- and JavaScript Tools and Libraries

Front-end development is a tricky beast. It's not difficult to learn, but it's quite difficult to master. There are just too many things that need to be considered; too many tweaks that might be necessary here and there; too many details to make everything just right. Luckily, developers and designers out there keep releasing useful tools and resources for all of us to learn, improve our skills and just get better at what we do.

Here at Smashing Magazine, we're continuously searching for time-saving, useful HTML-, CSS- and JavaScript-resources for our readers, to make the search of these ever-growing tools easier. We hope that these tools will help you improve your skills as well as your professional workflow. A sincere thanks to all designers and developers who are featured in this round-up. We respect and appreciate your contributions to the design community.

Advertisement Advertise with us!

Welcome To Smashing Coding!

Every now and again our Smashing Editorial team gets requests for very specific articles on very specific topics. Since our audience is very large and diverse, until now we weren't able to present these articles in our magazine and so we were looking for ways to change that. And we found a solution. Today, we are glad to announce that we've launched Smashing Coding, an extended section on Smashing Magazine which will contain more technical, advanced articles on programming and coding — be it JavaScript, PHP, Ruby or programming in general.

Smashing Coding will be curated by our new editor Keir Whitaker. We will make sure to produce verified, high-quality articles in the brand new section. Please take a closer look at the section and let us know if you find any bugs or errors. Thanks, and we are looking forward to meeting you on the pages of our new little project!

Ten Oddities And Secrets About JavaScript

JavaScript. At once bizarre and yet beautiful, it is surely the programming language that Pablo Picasso would have invented. Null is apparently an object, an empty array is apparently equal to false, and functions are bandied around as though they were tennis balls.

This article is aimed at intermediate developers who are curious about more advanced JavaScript. It is a collection of JavaScript’s oddities and well-kept secrets. Some sections will hopefully give you insight into how these curiosities can be useful to your code, while other sections are pure WTF material. So, let’s get started.

Introduction to DNS: Explaining The Dreaded DNS Delay

By Paul Tero
May 25th, 2011
DNS, Servers
63 Comments

Imagine that your biggest client calls because they are having trouble retrieving their email. Or they want to know what their best-selling item is right now. Or their most popular blog post. Perhaps their website has suddenly gone down. You can hardly reply, “No problem, I’ll get back to you in 24 to 48 hours.” And yet DNS gets away with it! If you need to move a website or change the way a domain’s email is handled, you’ll be faced with a vague 24 to 48-hour delay.

This is quite an anomaly in a world of ultra-convenience and super-fast everything. This article explains what DNS is, how it works, where that pesky delay comes from, and a couple of ways to work around it. DNS is the “domain name system.” It translates human-friendly website addresses like www.cnn.com into computer-friendly IP addresses like 157.166.224.25. Try visiting http://157.166.224.25 if you’d like to verify this.

An Introduction To CSS3 Keyframe Animations

By Louis Lazaris
May 17th, 2011
Animation, CSS, CSS3
76 Comments

By now you’ve probably heard at least something about animation in CSS3 using keyframe-based syntax. The CSS3 animations module in the specification has been around for a couple of years now, and it has the potential to become a big part of Web design. Using CSS3 keyframe animations, developers can create smooth, maintainable animations that perform relatively well and that don’t require reams of scripting. It’s just another way that CSS3 is helping to solve a real-world problem in an elegant manner.

If you haven’t yet started learning the syntax for CSS3 animations, here’s your chance to prepare for when this part of the CSS3 spec moves past the working draft. In this article, we’ll cover all the important parts of the syntax, and we’ll fill you in on browser support so that you’ll know when to start using it.

The Future Of CSS: Experimental CSS Properties

By Christian Krammer
May 11th, 2011
CSS
84 Comments

Despite contemporary browsers supporting a wealth of CSS3 properties, most designers and developers seem to focus on the quite harmless properties such as border-radius, box-shadow or transform. These are well documented, well tested and frequently used, and so it’s almost impossible to not stumble on them these days if you are designing websites.

But hidden deep within the treasure chests of browsers are advanced, heavily underrated properties that don’t get that much attention. Perhaps some of them rightly so, but others deserve more recognition. The greatest wealth lies under the hood of WebKit browsers, and in the age of iPhone, iPad and Android apps, getting acquainted with them can be quite useful.

Using CSS3: Older Browsers And Common Considerations

By Dave Sparks
May 3rd, 2011
Browsers, CSS, CSS3
64 Comments

With the arrival of IE9, Microsoft has signalled its intent to work more with standards-based technologies. With IE still the single most popular browser and in many ways the browser for the uninitiated, this is hopefully the long awaited start of us Web craftsmen embracing the idea of using CSS3 as freely as we do CSS 2.1.

However, with IE9 not being supported on versions of Windows before Vista and a lot of businesses still running XP and reluctant (or unable) to upgrade, it might take a while until a vast majority of our users will see the new technologies put to practice. While plenty of people out there are using CSS3, many aren’t so keen or don’t know where to start. This article will first look at the ideas behind CSS3, and then consider some good working practices for older browsers and some new common issues.