Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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:

Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid

Earlier this year, support for CSS grid layout landed in most major desktop browsers. Naturally, the specification is one of the hot topics at meet-ups and conferences. After having some conversations about grid and progressive enhancement, I believe that there’s a good amount of uncertainty about using it. I heard some quite interesting questions and statements, which I want to address in this post.

Progressively enhanced CSS Layout, with Flexbox and CSS Grid.

“When can I start using CSS grid layout?” “Too bad that it’ll take some more years before we can use grid in production.” “Do I need Modernizr in order to make websites with CSS grid layout?” “If I wanted to use grid today, I’d have to build two to three versions of my website.” The CSS grid layout module is one of the most exciting developments since responsive design. We should try to get the best out of it as soon as possible, if it makes sense for us and our projects.

Read more...

Introducing The Website Speed Test Image Analysis Tool

Web developers spend their days writing hypertext, but, byte for byte, most of the web is composed of images. It is hard to overstate the effect that images have on the average web page’s performance; faster websites have broader reach and a higher impact. The first and most important thing you can do to improve the performance of your website’s images is figure out how to measure them.

Introducing The Website Speed Test Image Analysis Tool

Enter Website Speed Test, a free and drop-dead-simple tool that leverages our (Cloudinary’s) image smarts to let you measure, diagnose and (crucially) communicate about the image performance of any website. Better yet, it’s built on top of, and integrated in, Pat Meenan’s WebPagetest. Interested? Read on!

Read more...

Building Pattern Libraries With Shadow DOM In Markdown

Some people hate writing documentation, and others just hate writing. I happen to love writing; otherwise, you wouldn't be reading this. It helps that I love writing because, as a design consultant offering professional guidance, writing is a big part of what I do. But I hate, hate, hate word processors.

Documenting Components In Markdown With Shadow DOM

When writing technical web documentation (read: pattern libraries), word processors are not just disobedient, but inappropriate. Ideally, I want a mode of writing that allows me to include the components I'm documenting inline, and this isn't possible unless the documentation itself is made of HTML, CSS and JavaScript. In this article, I'll be sharing a method for easily including code demos in Markdown, with the help of shortcodes and shadow DOM encapsulation.

Read more...

Connecting With Users: Incorporating Humor In Web Design

Joan is applying for a small loan on all-online-loanzzz.com. She's becoming frustrated with the number of financial-disclosure forms she has to fill out. She's thinking about visiting her local bank to ask for a loan instead.

Connecting With Users: Incorporating Humor In Web Design

While waiting for a page to load, the application presents a cartoon image of a person wearing a business suit sitting in a jail cell. The image caption says, "Hey, everyone hates disclosures. We know you do, too. We're doing our best to keep everyone out of jail. Please bear with us for a few more clicks. You won't regret it, and our loan officers will stay out of jail." Joan smirks at the image. She might not appreciate the number of forms she has to complete, but she understands the serious nature of applying for a loan.

Read more...

Building Production-Ready CSS Grid Layouts Today

Industries often experience evolution less as slow and steady progress than as revolutionary shifts in modality that change best practices and methodologies seemingly overnight. This is most definitely true for front-end web development.

Building Production-Ready CSS Grid Layouts Today

Our industry thrives on constant, aggressive development, and new technologies emerge on a regular basis that change the way we do things in fundamental ways.

Read more...

Hybrid Apps And React Native: A Time To Transition?

Accomplished musicians often talk about how, at certain moments in their careers, they had to unlearn old habits in order to progress. This process often causes them to regress in performance while they adjust to an ultimately better method.

Hybrid Apps And React Native: A Time To Transition?

Once the new approach is integrated, they are able to reach new heights that would not have been possible with their previous techniques.

Read more...

The Complete Guide To Switching From HTTP To HTTPS

HTTPS is a must for every website nowadays: Users are looking for the padlock when providing their details; Chrome and Firefox explicitly mark websites that provide forms on pages without HTTPS as being non-secure; it is an SEO ranking factor; and it has a serious impact on privacy in general.

A Complete Guide To Switching From HTTP To HTTPS

Additionally, there is now more than one option to get an HTTPS certificate for free, so switching to HTTPS is only a matter of will.

Read more...

Sponsored Article When Large Isn’t Large Enough: Designing With Hero Images

When users come to your page, they’ll feel some kind of reaction. Whether it’s positive or negative, that reaction is determined in large part by what they see. Because vision is perhaps the strongest human sense, a hero image is one of the fastest ways to grab the user’s attention. Bold, graphic and intentional imagery engages the user. It draws the user in immediately and makes a perfect centerpiece for a minimalist app or website.

When Large Isn't Large Enough: Designing With Hero Images

A hero image is more than just a pretty picture. It’s a powerful communication tool. In this article, I’ll give you a few tips on using hero images. Also, if you’d like to get started and take a go at prototyping and wireframing your own designs a bit more differently, you can download and test Adobe XD for free.

Read more...

The State Of Advanced Website Builders

Advanced website builders — the tools provided by Squarespace, Wix, Weebly, The Grid and more — produce websites that look and feel like they were designed and coded by humans. They’re also software as a service, which is a different business model than traditional, custom-developed websites.

The State Of Advanced Website Builders

So, should companies use them? At some point, will they replace custom development? In short, yes.

Read more...

Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions

Someone who uses your app or website has a particular goal. Often, the one thing standing between the user and their goal is a form. Forms remain one of the most important types of interactions for users on the web and in apps.

Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions

In fact, forms are often considered the final step in the journey of completing their goals. Forms are just a means to an end. Users should be able to complete them quickly and without confusion.

Read more...

Building Killer Robots: Game Behavior In iOS With Fuzzy Logic Rule Systems

Imagine that it's a hot day. The sun is out, and the temperature is rising. Perhaps, every now and then, there's a cool breeze. A good song is playing on the radio. At some point, you get up to get a glass of water, but the exact reason why you did that at that particular time isn't easy to explain. It was "too hot" and you were "somewhat thirsty," but also maybe "a little bored." Each of these qualities isn't either/or, but instead fall on a spectrum of values.

Building Killer Robots: Game Behavior In iOS With Fuzzy Logic Rule Systems

In contrast, our software is usually built on Boolean values. We set isHot to true and if isHot && isThirsty && isBored, then we call getWater(). If we use code like this to control our game characters, then they will appear jerky and less natural. In this article, we'll learn how to add intelligent behavior to the non-player characters of a game using an alternative to conventional Boolean logic.

Read more...

↑ Back to top