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:

How To Create A Sketch Plugin With Front-End Technologies

UX design hasn't been the same since Sketch arrived on the scene. The app has delivered a robust design platform with a refreshing, simple user interface. A good product on its own, it achieved critical success by being extended with community plugins.

How To Create A Sketch Plugin With Front-End Technologies

The open nature of the Sketch plugin system means that anyone can identify a need, write a plugin and share it with the community. A major barrier is stopping those eager to take part: Designers and front-end developers must learn how to write a plugin. Unfortunately, Objective-C is difficult to learn!

Read more...

User Authentication For Web And iOS Apps With AWS Cognito (Part 1)

Developers and organizations alike are looking for a way to have more agility with mobile solutions. There is a desire to decrease the time from idea to test. As a developer, I often run up against one hurdle that can slow down the initial build of a mobile hypothesis: user management.

User Authentication For Web And iOS Apps With AWS Cognito (Part 1)

Over the years, I have built at least three user management systems from scratch. Much of the approach can be based on a boilerplate, but there are always a few key items that need to be customized for a particular client. This is enough of a concern that an entire category of user management, authentication and authorization services have sprung up to meet this need. Services like Auth0 have entire solutions based on user and identity management that developers can integrate with.

Read more...

Designing The Perfect Feature Comparison Table

Not all products are created equal. While we repeatedly buy some products almost mindlessly, for others, we take a lot of time to make a purchasing decision. For a price tag that meets a certain threshold or if we are particularly invested in the quality of a product, we want to be absolutely certain that we are making the right choice and are getting a good product for a good price. That's where a feature comparison table makes all the difference.

Designing The Perfect Feature Comparison Table

Feature comparison tables are helpful not only in their primary function, though. When designed properly, they can aid in decision-making way beyond placing product specifications side by side. They can also add meaning to an otherwise too technical product specification sheet, explaining why a certain feature is relevant to the customer or how a certain product is better than the others.

Read more...

The Nine Principles Of Design Implementation

Recently, I was leading a training session for one of our clients on best practices for implementing designs using HTML and CSS. Part of our time included a discussion of processes such as style-guide-driven development, approaches such as OOCSS and SMACSS, and modular design. Near the end of the last day, someone asked, “But how will we know if we’ve done it right?

The Nine Principles Of Design Implementation

At first, I was confused. I had just spent hours telling them everything they need to “do it right.” But after thinking about it, I realized the question was rooted in a deeper need to guide and evaluate what is often a set of subjective choices — choices that are sometimes made by a lot of different people at different times.

Read more...

Tracking Internal Marketing Campaigns With Google Analytics

Editor's Note: This article is targeted at readers experienced in using Google Analytics. If you're new to Analytics, the following guide might be challenging.

Many websites use internal advertising in the form of banners or personalized product recommendations to bring additional products and services to the attention of visitors and to increase conversions and leads.

Tracking Internal Marketing Campaigns With Google Analytics

Naturally, the performance and effectiveness of internal marketing campaigns should be assessed, too, as this is one of the most powerful instruments for generating more leads, more conversions and more revenue on your website. In many cases, web analysts use Google Analytics' UTM campaign parameters to track internal advertising.

Read more...

Building A Simple AI Chatbot With Web Speech API And Node.js

Using voice commands has become pretty ubiquitous nowadays, as more mobile phone users use voice assistants such as Siri and Cortana, and as devices such as Amazon Echo and Google Home have been invading our living rooms.

Building A Simple AI Chatbot With Web Speech API And Node.js

These systems are built with speech recognition software that allows their users to issue voice commands. Now, our web browsers will become familiar with to Web Speech API, which allows users to integrate voice data in web apps.

Read more...

Creating Custom Inputs With Vue.js

Component-based libraries or frameworks such as Vue have given us the wonderful ability to create reusable components to be spread throughout their respective application, ensuring that they are consistent, and (hopefully) simplifying how they are used.

Creating Custom Inputs With Vue.js

In particular, form inputs tend to have plenty of complexity that you'd want to hide in a component, such as custom designs, labels, validation, help messages, and making sure each of these pieces are in the correct order so that they render correctly.

Read more...

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

↑ Back to top