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.

Posts Tagged ‘Techniques’.

We are pleased to present below all posts tagged with ‘Techniques’.

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends

I'm big on modular design. I've long been sold on dividing websites into components, not pages, and amalgamating those components dynamically into interfaces. Flexibility, efficiency and maintainability abound.

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends

But I don't want my design to look like it's made out of unrelated things. I'm making an interface, not a surrealist photomontage. As luck would have it, there is already a technology, called CSS, which is designed specifically to solve this problem. Using CSS, I can propagate styles that cross the borders of my HTML components, ensuring a consistent design with minimal effort.

Read more...

Not An Imposter: Fighting Front-End Fatigue

I recently spoke with a back-end developer friend about how many hours I spend coding or learning about code outside of work. He showed me a passage from an Uncle Bob book, "Clean Code", which compares the hours musicians spend with their instruments in preparation for a concert to developers rehearsing code to perform at work.

Not An Imposter: Fighting Front-End Fatigue

I like the analogy but I'm not sure I fully subscribe to it; it's that type of thinking that can cause burnout in the first place. I think it's great if you want to further your craft and broaden your skill set, but to be doing it every hour of the day isn't sustainable.

Read more...

Building Shaders With Babylon.js

Shaders are a key concept if you want to unleash the raw power of your GPU. I will help you understand how they work and even experiment with their inner power in an easy way, thanks to Babylon.js.

Building Shaders With Babylon.js

Before experimenting, we must see how things work internally. When dealing with hardware-accelerated 3D, you will have to deal with two CPUs: the main CPU and the GPU. The GPU is a kind of extremely specialized CPU.

Read more...

Building “Topple Trump”, An Interactive Web-Based Quiz Game (Case Study)

Editor's Note: When it comes to elections, we are each given a choice in how to express our opinions and beliefs. Some designers and developers use their skills to further articulate their choice in one person. Here’s a glimpse into how Topple Trump!, an interactive responsive quiz game, was designed and built — combined with some valuable lessons learned along the way. This article is about techniques and strategies, so please avoid political flame in the comments.

Creating an online quiz that is simple to use, looks great and is really fun to play is one thing. Basing it on Donald Trump's polarizing presidential campaign is another.

Building 'Topple Trump', An Interactive Web-Based Quiz Game (Case Study)

The brainchild of Parallax director and developer Andy Fitch, Topple Trump! has gone on to win numerous awards. But it was a real team effort that brought the game to life. Here's a glimpse into precisely how that happened, touching on the development process, design considerations and some valuable lessons learned along the way.

Read more...

The Building Blocks Of Progressive Web Apps

The common wisdom for most companies that set out to build an app is to build a native Android or iOS app, as well as a supporting website. Although there are some good reasons for that, not enough people know about the major advantages of web apps. Web apps can replace all of the functions of native apps and websites at once. They are coming more and more to the fore these days, but still not enough people are familiar with them or adopting them.

The Building Blocks Of A Progressive Web App

Here, you will be able to find some do’s and dont’s on how to make a progressive web app, as well as resources for further research. I’ll also go into the various components and support issues surrounding web apps. Although not every browser is friendly to them, there are still some compelling reasons to learn more about this technology.

Read more...

Upgrading CSS Animation With Motion Curves

There is UI animation, and then there is good UI animation. Good animation makes you go “Wow!” — it’s smooth, beautiful and, most of all, natural, not blocky, rigid or robotic. If you frequent Dribbble or UpLabs, you’ll know what I am talking about.

Alt-Text

With so many amazing designers creating such beautiful animations, any developer would naturally want to recreate them in their own projects. Now, CSS does provide some presets for transition-timing-function, such as ease-in, ease-out and ease-in-out, which add some level of smoothness and realism, but they are very generic, aren’t they? How boring would it be if every animation on the web followed the same three timing functions?

Read more...

An Introduction To Redux

Redux is one of the hottest libraries in front-end development these days. However, many people are confused about what it is and what its benefits are. As the documentation states, Redux is a predictable state container for JavaScript apps. To rephrase that, it's an application data-flow architecture, rather than a traditional library or a framework like Underscore.js and AngularJS.

An Introduction To Redux

Redux was created by Dan Abramov around June 2015. It was inspired by Facebook’s Flux and functional programming language Elm. Redux got popular very quickly because of its simplicity, small size (only 2 KB) and great documentation. If you want to learn how Redux works internally and dive deep into the library, consider checking out Dan’s free course.

Read more...

Stylelint: The Style Sheet Linter We’ve Always Wanted

Everyone wants a clean, consistent code base, no matter the language. Developers are accustomed to setting up linters in programming languages such as JavaScript and Python, but they rarely use a linter for style sheets. In this article, we’ll look at stylelint, a linter for style sheets.

Stylelint: The Style Sheet Linter We've Always Wanted

We will also learn why linting a style sheet matters, how stylelint brings order to a style sheet and how we can avoid errors. Finally, we will learn how to use stylelint and start linting as soon as possible. Let's start with why linting is important.

Read more...

Sponsored Post Looking Back: One Year Of Microsoft Edge (Videos)

Change is difficult in large corporations. But sometimes it is possible. In fact, we published Inside Microsoft’s New Rendering Engine For The “Project Spartan” when the new browser was just announced. A year has passed since then. We kindly thank Microsoft for keeping Smashing Magazine alive and supporting the community with technical articles on practical JavaScript techniques, open source projects and interoperability best practices. Our editors are working with Microsoft engineers to deliver useful insights to you. — Ed.

microsoft-edge-browser-usage-share-preview

In 2015, Microsoft launched its first new browser in 20 years: Microsoft Edge. After eight months, it's on a great trajectory for web standards support, but there are many exciting features to come. This article is part of the web development series from our tech evangelists and engineers on JavaScript skills, community projects and best practices including Microsoft Edge browser and the new EdgeHTML rendering engine.

Read more...

↑ Back to top