2020 has been quite the year, and it’s only July. None of us can be certain what the rest of the year looks like, in particular for travel and events where lots of folks gather together. Given the uncertainty and the success of our online workshop series and Meets events, we’re taking all of our 2020 conferences online. How will that work? Read on to find out! All of our online conference events will take place on the Hopin platform.

https://www.smashingmagazine.com/2020/07/smashingconf-online-2020/

I’m all for updating and upgrading mobile apps. I think if you’re not constantly looking at ways to improve the user experience, it’s just too easy to fall behind. That said, a redesign should be done for the right reasons. If it’s an existing app that’s already popular with users, any changes made to the design or content should be done in very small, incremental, strategic chunks through A/B testing.

https://www.smashingmagazine.com/2020/07/redesigning-mobile-app/

Today, we’re talking about Gatsby. What is it and how does it fit into your web development stack? Drew McLellan talks to expert Marcy Sutton to find out. Show Notes Gatsby Marcy on Twitter Marcy’s personal website Weekly Update “Make Your Sites Fast, Accessible And Secure With Help From Google” by Dion Almaer “Understanding Plugin Development In Gatsby” by Aleem Isiaka “Creating Tiny Desktop Apps With Tauri And Vue.

https://www.smashingmagazine.com/2020/07/smashing-podcast-episode-20/

In my last post, I described some interesting CSS features — some of which are only available in one browser. Most web developers have some feature they wish was more widely available, or that was available at all. I encourage developers to use, talk about, and raise implementation bugs with browsers to try to get features implemented, however, what if there was a more direct way to do so? What if web developers could get together and fund the development of these features?

https://www.smashingmagazine.com/2020/07/crowdfunding-web-platform-features-open-prioritization/

If you are a newbie to React Hooks, you can start by checking the official documentation to get a grasp of it. After that, I’d recommend reading Shedrack Akintayo’s “Getting Started With React Hooks API”. To ensure you’re following along, there is also an article written by Adeneye David Abiodun that covers best practices with React Hooks which I’m sure will prove to be useful to you. Throughout this article, we’ll be making use of Hacker News Search API to build a custom hook which we can use to fetch data.

https://www.smashingmagazine.com/2020/07/custom-react-hook-fetch-cache-data/

Paul Boag has written three books in the Smashing Library, and Click! How to Encourage Clicks Without Shady Tricks is just the most recent one. Paul wrote some articles for Smashing Magazine in addition to appearing on the Smashing Podcast and SmashingTV to promote the book and talk about some of its themes. Click! finally started shipping in June, and our beloved preorder customers found a surprise in those packages.

https://www.smashingmagazine.com/2020/07/click-book-release-followup/

Transitions are a module of CSS that lets you create gradual transitions between the values of specific CSS properties. The behavior of these transitions can be controlled by specifying their timing function, duration, and other attributes. Using these transitions in your applications and websites create a better visual experience and sometimes draws and holds the user’s attention while a piece of information is being introduced to or leaving the screen.

https://www.smashingmagazine.com/2020/07/css-transitions-vuejs-nuxtjs/

When it comes to displaying shipping and inventory alerts on an e-commerce website, you have to be very careful about inciting panic in your shoppers. “Item is out of stock.” “Expect shipping delays.” “Page does not exist.” These words alone are enough to turn a pleasant shopping experience into a panicked and frustrating one. You have to be very careful about how you design these notices on your site, too.

https://www.smashingmagazine.com/2020/07/ecommerce-shipping-inventory-alerts/

Technology makes our lives better, not just users, but also creators (developers and designers). In this article, I’ll introduce you to Tauri. This article will be useful to you if: you have been building applications on the web with HTML, CSS, and JavaScript, and you want to use the same technologies to create apps targeted at Windows, macOS, or Linux platforms; you are already building cross-platform desktop apps with technologies like Electron, and you want to check out alternatives; you want to build apps with web technologies for Linux distributions, such as PureOS; you are a Rust enthusiast, and you’d like to apply it to build native cross-platform applications.

https://www.smashingmagazine.com/2020/07/tiny-desktop-apps-tauri-vuejs/

Things move a lot faster than they used to in terms of the implementation of Web Platform features, and this post is a round-up of news about CSS features that are making their way into the platform. If you are the sort of person who doesn’t like reading about things if you can’t use them now, then this article probably isn’t for you — we have many others for you to enjoy instead!

https://www.smashingmagazine.com/2020/07/css-news-july-2020/

Gatsby is a React-based static-site generator that has overhauled how websites and blogs are created. It supports the use of plugins to create custom functionality that is not available in the standard installation. In this post, I will introduce Gatsby plugins, discuss the types of Gatsby plugins that exist, differentiate between the forms of Gatsby plugins, and, finally, create a comment plugin that can be used on any Gatsby website, one of which we will install by the end of the tutorial.

https://www.smashingmagazine.com/2020/07/understanding-plugin-development-gatsby/

Earlier this year, the Chrome team announced the Web Vitals initiative to provide unified guidance, metrics, and tools to help developers deliver great user experiences on the web. The Google Search team also recently announced that they will be evaluating page experience as a ranking criteria, and will include Core Web Vitals metrics as its foundation. The three pillars of 2020 Core Web Vitals are loading, interactivity, and visual stability of page content, which are captured by the following metrics:

https://www.smashingmagazine.com/2020/07/web-dev-live-google-event-2020/

Today, we’ll briefly discuss why it’s important to write automated tests for any software project, and shed light on some of the common types of automated testing. We’ll build a to-do list app by following the Test-Driven Development (TDD) approach. I’ll show you how to write both unit and functional tests, and in the process, explain what code mocks are by mocking a few libraries. I’ll be using a combination of RTL and Jest — both of which come pre-installed in any new project created with Create-React-App (CRA).

https://www.smashingmagazine.com/2020/07/react-apps-testing-library/

JavaScript currently has three types of applications that you can build with: Single Page Applications (SPAs), pre-rendering/static generated sites and server-side rendered applications. SPAs come with many challenges, one of which is Search Engine Optimization (SEO). Possible solutions are to make use of Static Site Generators or Server-Side Rendering (SSR). In this article, I’m going to explain them alongside listing their pros and cons so you have a balanced view.

https://www.smashingmagazine.com/2020/07/differences-static-generated-sites-server-side-rendered-apps/

We are living in a world exploding with information, but how do we find what is relevant to us at the time that we need it? I believe that good information architecture is key to helping us navigate through the mountains of data and information we have created for ourselves. In this article, we will first describe what information architecture is, why it’s important, and approaches to effective implementation. Then we explore ideas around the broader view of the information age, how we use information, and how it impacts our world and our lives.

https://www.smashingmagazine.com/2020/07/information-architecture-big-picture/

The smell of rain after a hot day, watching the moon rise on a summer night’s sky, going for a swim — often it’s the simple experiences that inspire us and that we treasure most. No matter what July will have in store for you this year, our new batch of wallpapers is bound to cater for some colorful inspiration along the way. More than nine years ago, we started out on this wallpapers adventure to bring you beautiful and inspiring wallpapers every month.

https://www.smashingmagazine.com/2020/06/desktop-wallpaper-calendars-july-2020/

Today, we’re talking about CUBE CSS. What is it, and how does it differ from approaches such as BEM, SMACSS, and OOCSS? I spoke to its creator, Andy Bell, to find out. Show Notes CUBE CSS Piccalilli Learn Eleventy From Scratch - save 40%! Andy Bell and Piccalilli on Twitter Note: Listeners of the Smashing Podcast can save a whopping 40% on Andy’s Learn Eleventy From Scratch course using the code SMASHINGPOD.

https://www.smashingmagazine.com/2020/06/smashing-podcast-episode-19/

Notifications have become a stable part of the web nowadays. It’s not uncommon to come across sites asking for permission to send notifications to your browser. Most modern web browsers implement the push API and are able to handle push notifications. A quick check on caniuse shows that the API enjoys wide support among modern chrome-based browsers and Firefox browser. There are various services for implementing notifications on the web.

https://www.smashingmagazine.com/2020/06/firebase-push-notifications-react/

With one or two occasional exceptions, I’ve spent the past twenty-two years designing for countless clients. A few of these projects lasted a year, some several months, but the majority for no more than a few weeks. Being completely absorbed for a few weeks or months in designing a product interface or a website can be a thrill. It often starts with the gratification which comes from winning the work.

https://www.smashingmagazine.com/2020/06/inspired-design-decisions-giovanni-pintori/

Django websites involve a lot of files. It’s not just source code for the configuration, models, views, and templates, but also static assets: CSS and JavaScript, images, icons. As if that wasn’t enough already, sometimes users come along and want to upload their own files to your website. It’s enough to make any developer incredulous. Files everywhere! Here’s where I wish I could say (without caveats): “Don’t worry, Django has your back!

https://www.smashingmagazine.com/2020/06/django-highlights-wrangling-static-assets-media-files-part-4/