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 and Rey Bango.
Subscribe to the RSS-Feed.

Popular tags in this category:

Designing Flexible, Maintainable Pie Charts With CSS and SVG

When it comes to CSS techniques, nobody is more stubborn and smart enough to find solutions to any problems than Lea Verou. Recently, Lea has written, designed and published "CSS Secrets", a truly fantastic book on the little CSS tricks and techniques for solving everyday problems. If you thought that you know CSS fairly well, think again: you will be surprised. In this article, we publish a few nuggets from the book, which were also presented in Lea's recent talk at SmashingConf New York — on designing simple pie charts, with CSS. Please notice that some demos might not work as expected due to limited support in browsers. —Ed.

Designing Simple Pie Charts With CSS

Pie charts, even in their simplest two-color form, have traditionally been anything but simple to create with web technologies, despite being incredibly common for information ranging from simple stats to progress indicators and timers. Implementations usually involved either using an external image editor to create multiple images for multiple values of the pie chart, or large JavaScript frameworks designed for much more complex charts.

Read more...

Making Time: Redesigning A Calendar Experience For Android

In UX design, few things are more intricate than time and personal time management — only a good arsenal of mobile design patterns and information architecture principles can save you. This is the story of redesigning the UX for a popular calenda tool on Android: Business Calendar. We’ll cover designing systems, interaction design problems, scaling across screens and platforms, research, and big business decisions and their outcomes.

Making Time: Redesigning A Calendar Experience For Android

Business Calendar started out as a side project, a one-man show, and is now run by a team of eight in Berlin. The app was very successful right from the time Android entered the mainstream market, and it now has an active user base of 2 million. But instead of modernizing the design and usability regularly, the developers focused on implementing user requests and customization options.

Read more...

Smarter Grids With Sass And Susy

If you’re a designer, you’ll know that grids are your friends. More often than not, they’re the vital architecture that holds a beautiful design together; they create rhythm, structure your page, lead the eye, and prevent the whole thing collapsing in a sloppy mess.

Smarter Grids With Sass And Susy

I’m a firm advocate for designing with the browser: prototyping with HTML and CSS has many clear advantages over static Photoshop comps, which have less value for the responsive web. Unfortunately, HTML, CSS and grids aren’t natural bedfellows: the progression of web standards over the years has been lacking in this area, meaning we have to grapple with floats (which were never designed to be used this way) and clearfixes — not ideal when you want to spend less time debugging layout and more time crafting experiences.

Read more...

Quantity Ordering With CSS

Here is your mission, should you choose to accept it: create a table of items. Each item should span a third of the content area, with the fourth item starting on a new row, much like floats. However, a particular item must always display the price at the end of the first row.

Quantity Ordering With CSS

So if there are only two elements, the price element would be second. But if there are more than three items, the price would be the last element in the first row. You might assume that JavaScript would be the best solution — just loop over the items, and if there are more than three, update the styling. But what if I told you could do it with CSS alone?

Read more...

A Simple Workflow From Development To Deployment

In this article I’ll be taking a look at how to build a simple yet robust workflow for developing sites that require PHP and MySQL. I’ll show you how to use Vagrant to create and run a web server on your own computer, with the version of PHP your live site runs. I also demonstrate a process for using a hosted service to deploy files in a robust way to your live server.

A Simple Development to Deployment Workflow

This article is for you if you currently have no way to test your PHP and MySQL sites locally, or use something like MAMP or XAMPP. The second half of the article will help you move away from uploading files using FTP to a process that is far less likely to cause you problems.

Read more...

Qualities Of Good Flux Implementations

It has been an exciting year for my team. Last year we kicked off a project using React, and over the course of the project we've learned a lot about React and Flux — Facebook's recommended architectural principles for React apps. In this article, we'll take a look at some of the key lessons we've learned.

Qualities Of Good Flux Implementations

Whether you're new to React and Flux, or going as far as building your own Flux implementation, I think you'll not only enjoy this journey with us, but find some thought-provoking questions and wisdom you can apply in your own endeavors.

Read more...

Responsive Typography With Sass Maps

Managing consistent, typographic rhythm isn’t easy, but when the type is responsive, things get even more difficult. Fortunately, Sass maps make responsive typography much more manageable.

Responsive Typography With Sass Maps

Writing the code is one thing, but keeping track of font-size values for each breakpoint is another — and the above is for paragraphs alone. Throw in h1 to h6s, each with variable font sizes for each breakpoint, and it gets cumbersome, especially when the type doesn’t scale linearly.

Read more...

The Making Of “In Pieces”: Designing an Interactive Exhibition With CSS Clip Paths

Web-based interactive experiences are widely used in the modern age for a variety of reasons, predominantly for the advertising of premium high-street products and services. After discovering the little-known clip-path property of CSS, I embarked upon a five-month interactive production journey of my own with a different purpose: to raise awareness of the struggles of 30 similarly little-known endangered species.

The Making Of 'In Pieces': Designing an Interactive Exhibition With CSS Clip Paths

This article explores the inspiration for the project and aspects of how different parts were built, and I’ll dive into how you can use this greatly underrated line of CSS for your own projects.

Read more...

The Art Of The SVG Filter And Why It Is Awesome

After almost 20 years of evolution, today's web typography, with its high-density displays and support for OpenType features, is just a step away from the typographic quality of the offline world. But there's still one field of graphic design where we still constantly fall back to bitmap replacements instead of using native text: display typography, the art of staging letters in illustrative, gorgeous, dramatic, playful, experimental or unexpected ways.

The Art Of The SVG Filter And Why It Is Awesome

Sure, we're able choose from thousands of web fonts and use CSS effects for type, some with wide browser support (like drop-shadows and 3D transforms) and others that are more experimental (like background-clip and text-stroke), but that's basically it. If we want really outstanding display typography on our websites, we'll usually embed it as an image.

Read more...

Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box

CSSclip-path property is your ticket to shape-shifting the monotonous, boxy layouts traditionally associated with flat, responsive design. You will begin to think outside the box, literally, and hexagons, stars and octagons will begin to take form on your web pages. Once you get your hands dirty with clip-path, there’s no end to the shapes you can generate, simply by tweaking a few values.

Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box

While the focus of this article is on clip-path using polygons with CSS, all of the demos provide a reference to an inline SVG, in order to gain additional support on Firefox. Generating a responsive SVG clipped shape is trivial once you have created a responsive shape with CSS’ clip-path. We’ll look at this in detail later.

Read more...

↑ Back to top