Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. 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. upcoming SmashingConf San Francisco, 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.

css

Popular tags in this category:

Experimenting With speechSynthesis

I’ve been thinking a lot about speech for the last few years. In fact, it’s been a major focus in several of my talks of late, including my well-received Smashing Conference talk “Designing the Conversation.” As such, I’ve been keenly interested in the development of the Web Speech API.

Experimenting With speechSynthesis

If you’re unfamiliar, this API gives you (the developer) the ability to voice-enable your website in two directions: listening to your users via the SpeechRecognition interface and talking back to them via the SpeechSynthesis interface. All of this is done via a JavaScript API, making it easy to test for support. This testability makes it an excellent candidate for progressive enhancement, but more on that in a moment.

Read more...

HTML APIs: What They Are And How To Design A Good One

As JavaScript developers, we often forget that not everyone has the same knowledge as us. It’s called the curse of knowledge: When we’re an expert on something, we cannot remember how confused we felt as newbies. We overestimate what people will find easy.

HTML APIs: What They Are And How To Design A Good One

Therefore, we think that requiring a bunch of JavaScript to initialize or configure the libraries we write is OK. Meanwhile, some of our users struggle to use them, frantically copying and pasting examples from the documentation, tweaking them at random until they work.

Read more...

case study How Mail.Ru Reduced Email Storage From 50 To 32 PB

When the Russian ruble's exchange rate slumped two years ago, it drove us to think of cutting hardware and hosting costs for the Mail.Ru email service. First, we had to take a look at what email consists of. Indexes and bodies account for only 15% of the storage size, whereas 85% is taken up by files. So, optimization of files (that is, attachments) is worth exploring in more detail.

How We Reduced Email Storage At Mail.Ru From 50 To 32 PB

At the time, we didn't have file deduplication in place, but we estimated that it could shrink the total storage size by 36%, because many users receive the same messages, such as price lists from online stores and newsletters from social networks that contain images and so on. In this article, I'll describe how we implemented a deduplication system under the guidance of PSIAlt.

Read more...

Making Responsive HTML Email Coding Easy With MJML

Email is one of the best ways to engage with your users, especially during the holiday season. However, if you want to stand out, no matter how beautiful your emails are, you need to make sure they render correctly in your reader's inbox, regardless of what email client they're using. Creating responsive email is not an easy task, and there are various reasons for that.

Making Responsive HTML Email Coding Easy With MJML

First, there is no standard in the way email clients render HTML. This is true for email clients from different companies, such as Outlook and Apple Mail, but not only. Even different versions of Outlook, such as Outlook 2003, Outlook 2013 and Outlook.com, render HTML differently.

Read more...

Internationalizing React Apps

First of all, let's define some vocabulary. "Internationalization" is a long word, and there are at least two widely used abbreviations: "intl," "i18n". "Localization" can be shortened to "l10n".

Internationalizing React Apps

Internationalization can be generally broken down into three main challenges: Detecting the user's locale, translating UI elements, titles as well as hints, and last but not least, serving locale-specific content such as dates, currencies and numbers. In this article, I am going to focus only on front-end part. We'll develop a simple universal React application with full internationalization support.

Read more...

Styled-Components: Enforcing Best Practices In Component-Based Systems

Building user interfaces on the web is hard, because the web and, thus, CSS were inherently made for documents. Some smart developers invented methodologies and conventions such as BEM, ITCSS, SMACSS and many more, which make building user interfaces easier and more maintainable by working with components.

Styled-Components: Enforcing Best Practices In Component-Based Systems

After this shift in mindset towards building component-based user interfaces, we are now in what we like to call the "component age." The rise of JavaScript frameworks such as React, Ember and recently Angular 2, the effort of the W3C to standardize a web-native component system, pattern libraries and style guides being considered the "right way" to build web applications, and many other things have illuminated this revolution.

Read more...

An Introduction To Building And Sending HTML Email For Web Developers

HTML email: Two words that, when combined, brings tears to a developer's eyes. If you're a web developer, it's inevitable that coding an email will be a task that gets dropped in your lap at some time in your career, whether you like it or not. Coding HTML email is old school. Think back to 1999, when we called ourselves "webmasters" and used Frontpage, WYSIWYG editors and tables to mark up our websites.

An Introduction To Building And Sending HTML Email For Web Developers

Not much has changed in email design. In fact, it has gotten worse. With the introduction of mobile devices and more and more email clients, we have even more caveats to deal with when building HTML email.

Read more...

Mistakes Developers Make When Learning Design

The blank Photoshop document glows in front of you. You've been trying to design a website for an hour but it's going nowhere. You feel defeated. You were in this same predicament last month when you couldn't design a website for a project at work. As a developer, you just feel out of your element pushing pixels around.

Mistakes Developers Make When Learning Design

How do designers do it? Do they just mess around in Photoshop or Sketch for a while until a pretty design appears? Can developers who are used to working within the logical constructs of Boolean logic and number theory master the seemingly arbitrary rules of design?

Read more...

Styling Web Components Using A Shared Style Sheet

Web components are an amazing new feature of the web, allowing developers to define their own custom HTML elements. When combined with a style guide, web components can create a component API, which allows developers to stop copying and pasting code snippets and instead just use a DOM element.

Styling Web Components Using A Shared Style Sheet

By using the shadow DOM, we can encapsulate the web component and not have to worry about specificity wars with any other style sheet on the page. However, web components and style guides currently seem to be at odds with each other.

Read more...

↑ Back to top