Web Tricks Archives - Page 21 of 27

26Jun

By Ryan GoldmanNo Comments

Web Tricks

How to use Error Boundaries in React 16

Have you seen these in your console? Cannot read property ‘getHostNode’ of null ? TypeError: Cannot read property ‘_currentElement’ of null ? If you maintain a React application, you know that this class of error messages can be among the most frustrating and difficult to resolve. Typical symptoms include stack traces that thread through dark regions of the React internals, devoid of hope or references to even a single line of your own code: TypeError: Cannot read property 'getHostNode' of null ? at getHostNode(~/react/lib/ReactReconciler.js:64:0) at getHostNode(~/react/lib/ReactCompositeComponent.js:383:0) ? at getHostNode(~/react/lib/ReactReconciler.js:64:0) at getHostNode(~/react/lib/ReactChildReconciler.js:114:0)? at updateChildren(~/react/lib/ReactMultiChild.js:215:0) at _...

26Jun

By Chris NwambaNo Comments

Web Tricks

5 Most Common Dropdown Use Cases Solved with React Downshift

Downshift is a library that helps you build simple, flexible, WAI-ARIA compliant enhanced input React components. Its major use case is for building autocomplete components but it can also be used to build dropdown components. In this post, we’ll walk through some common use cases solved with Downshift. Prerequisites To follow this tutorial, you need Node and NPM installed on your machine. A basic understanding of React will help you get the most out of this tutorial. If you don’t have Node.js installed, go to the Node website and install the recommended version for your operating system. Setting up the application We’ll make use of Create React App to create a simple React app with no build configuration. If you don’t have Create React App installed, run npm i create-react-app in your ter...

26Jun

By No Comments

Web Tricks

How To Get To Know Your Users

How To Get To Know Your UsersHow To Get To Know Your Users Lyndon Cerejo 2018-06-26T13:50:41+02:00 2018-07-10T16:18:00+00:00 (This article is kindly sponsored by Adobe.) Users are at the heart of User-Centered Design (UCD), with designers focusing on actual users and their needs throughout the design process. The goal is to design interfaces and products that work for those users. As much as we would like to think that our users are like us, they are not. Anyone involved in the creation of a product or an interactive experience, be it a site, system, or an app, is not a typical user — and that includes all the business stakeholders, designers, and developers. ...

26Jun

By Sean McGowanNo Comments

Web Tricks

How To Design The Perfect Gradient

When you work for a user experience design company for as long as I have, you start to notice the cyclical nature of industry trends. Just like fashion or art, what goes out of style inevitably resurfaces a few years down the road, only to become adopted by the mainstream, and fade into obsoletion once again. In the digital design world, there’s maybe no better example of this than the rise and fall (and rise) of the gradient. Considered a lynchpin of interface design in the nineties (how many geocities sites had a gradient WordArt header?), the trend likely dates back even farther. Consider this iconic logo: ‘Back To The Future’ is a fitting example for a design trend that has just recently resurfaced today, perhaps most notably in Instagram’s logo redesign in 2016 and Spotify’s dual to...

25Jun

By James QuickNo Comments

Web Tricks

Debugging Node Code in VS Code

Visual Studio Code has an amazing amount of functionality built in, including support for debugging applications. Although the functionality is there, it took me several tries to figure out how to get things configured to debug Node applications. It became even more tricky when using Nodemon, so I figured it was worth it to share the various configurations I've learned. This article will not dive deep into inspecting variables, call stack, etc. but will focus more on the actual configurations. If you are looking for an article more focused on applied debuggging concepts, check out Debugging JavaScript in Chrome and Visual Studio Code. Watch on YouTube TLDR - Debugging Node in Visual Studio Code Download Debugger for Chrome extension Create Debug configuration from one of the 4 below Launc...

25Jun

By No Comments

Web Tricks

What Newsletters Should Designers And Developers Be Subscribing To?

What Newsletters Should Designers And Developers Be Subscribing To?What Newsletters Should Designers And Developers Be Subscribing To? Ricky Onsman 2018-06-25T14:00:48+02:00 2018-07-10T16:18:00+00:00 We put out the call on Twitter and Facebook: “What email newsletters are you following these days?” The task of compiling your (many, many) responses has fallen to me. I should disclose that I have a vested interest in that I currently edit a bi-weekly email newsletter for a conference organizer, UX Australia. In fact, over the years, I’ve edited dozens of email newsletters — some more successful than others. Anyway, for the purpose of this article, we need to ma...

25Jun

By Carrie CousinsNo Comments

Web Tricks

Essential Design Trends, July 2018

With the heat of summer comes a little bit of a design slowdown, but there are still plenty of projects worth your attention. Most of the major design trends happening right now feature structural components of website design, such a interactive layers or multiple columns of text. And there’s also this “little” international event that’s having some influence as well – the soccer World Cup. Here’s what’s trending in design this month: 1. Interactive Layers Designers are constantly trying to develop ways to keep users interested in the design for longer period of time. Using more interactivity is one way to do that. Pairing that interactivity with layered effects is another way to do it that has high visual interest. (It’s like putting the best of the visuals and interaction together.) Muc...

Popular Design News of the Week: June 18, 2018 – June 24, 2018

24Jun

By Cameron ChapmanNo Comments

Web Tricks

Popular Design News of the Week: June 18, 2018 – June 24, 2018

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week. Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news. 8 Brilliant Blogs Run by Ecommerce Stores (And What You Can Learn from Them) The Ultimate ECommerce Website Design Guide How to Design a High Converting Email Newsletter Lesson...

23Jun

By WalterNo Comments

Web Tricks

Comics of the Week #436

Every week we feature a set of comics created exclusively for WDD. The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers. These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today. So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons. Feel free to leave your comments and suggestions below as well as any related stories of your own… Retro look Multitasker Exploding head Can you relate to these situations? Please share your funny stories and comments below… Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5! Source...

22Jun

By Ryan GoldmanNo Comments

Web Tricks

What the heck is "Script error?"

If you’ve done any work with the JavaScript onerror event before, you’ve probably come across the following: "Script error." “Script error” is what browsers send to the onerror callback when an error originates from a JavaScript file served from a different origin (different domain, port, or protocol). It’s painful because, even though there’s an error occurring, you don’t know what the error is, nor from which code it’s originating. And that’s the whole purpose of window.onerror — getting insight into uncaught errors in your application. The cause: cross-origin scripts To better understand what’s going on, consider the following example HTML document, hypothetically served from http://example.com/test: <!doctype html> <html> <head> <title>example.com/test</tit...

22Jun

By Valeri KarpovNo Comments

Web Tricks

Getting Started With Google Cloud Functions and MongoDB

Serverless architectures are becoming increasingly popular, and with good reason. In my experience, container-based orchestration frameworks have a steep learning curve and are overkill for most consumer-facing companies. With FaaS architectures, like AWS Lambda and Azure Functions, in theory the only devops you need is bundling and uploading your app. This article will walk you through setting up a Google Cloud Function in Node.js that connects to MongoDB. However, one major limitation of stateless functions is the need to establish a separate database connection every time the stateless function runs, which incurs a major performance penalty. Unfortunately, I haven't been able to figure out how to reuse a database connection in Google Cloud Functions, the trick that works for IBM Cloud,...

Why Altruism Is The Ace To Get Your Dream Design Job

22Jun

By No Comments

Web Tricks

Why Altruism Is The Ace To Get Your Dream Design Job

Why Altruism Is The Ace To Get Your Dream Design JobWhy Altruism Is The Ace To Get Your Dream Design Job Andree Huk 2018-06-22T14:30:38+02:00 2018-07-10T16:18:00+00:00 Hunting for a design job can be daunting but it does not need to be. In fact, the most telling predictor of how user-focused a designer you are, is how you see the company you apply to. In this article, I’d like to outlines uncommon tactics and crucial aspects that can help any designer. In order to get your dream job, I’ll discuss in detail on how to plan and execute your outreach to recruiters or hiring managers. Writing a stellar CV by analyzing job descriptions or calculating how many applic...

22Jun

By Kallie FalandaysNo Comments

Web Tricks

6 Ways to Collaborate for Better Design

Your team is all spread out— your designers are working from Lisbon, your content team is in New York, and your project manager is in Argentina. How do you create a system that makes it simple to organize and plan large web projects? There is a trick to getting designers and copywriters to work together smoothly, and it’s called communication. But even simple communication will fail if you don’t have the correct processes in place. 1. Set Up a Project Management Foundation Before you begin collaborating, you’ll want to make sure you have an actual system set up. “I want to move forward, but I’m not sure what’s approved.” How often have you said that to your team? Some teams have a lot of fire in them. They like to dive right into the problem to find the solution, but that could cause a ...

22Jun

By William ImohNo Comments

Web Tricks

JavaScript Functional Programming (Solution to Code Challenge #11)

Tried the code challenge #11? In that, we delved into solving basic array problems using array methods such as map(), reduce(), filter() etc. You can find the awesome entries in the comment section of the post as well on Twitter using the hashtag #scotchchallenge. Also, you see some other fantastic submissions for the challenge if you check out the Scotch Slack Group as well as this Spectrum thread for the challenge. The Challenge Functional programming is a style in writing programs which utilizes functions and function evaluations to carry out computations. In this challenge, we were tasked with solving problems by manipulating given arrays in a base codepen. This challenge will be solved using native array methods to manipulate the given array. Methods are properties of a given data ty...

5 Tips for Cleaning Up After a Design Project

21Jun

By Ezequiel BruniNo Comments

Web Tricks

5 Tips for Cleaning Up After a Design Project

As every kid knows, making cool stuff is the fun part. You dump all of your toys on the floor, and sort through them until you find what you want, and make it all fit together to build a spaceship, or something. That’s the part everyone likes. But then someone comes in to tell you that it’s over. It’s done. Now you have to pick up after yourself so Dad doesn’t step on a Lego piece in the dark and shout bad words at 2AM. Few people enjoy this part. But as we get older, most of us realize that cleaning up after ourselves after work or play will save us trouble down the road. Web design is no exception. If you’re new to web design (and yes, this article is for newbies), it might feel like you’re “done” when you upload your HTML files to the server, and the client says it all looks great. And...