DEV Community: Joseph Hughes

Async and Await Quick Guide

Joseph Hughes — Wed, 26 Aug 2020 12:21:07 +0000

Async and Await were introduced as ways to reduce headaches around nested callbacks. Async/Await is another way for you to wait for a result to return before continuing. At a basic level they are a keyword put before a function and then another keyword put before a promise that forces JavaScript to wait for that promise to return it's results.

async function functionName(){
  let value = await functionReturningPromise();
}

// arrow syntax
let functionName = async () => {
   let value = await functionReturningPromise();
}

Currently, awaits are limited in being used from inside of an async function, however there is an update coming to allow for awaits to be used at the top level of your code. This will remove the need for await to be inside of an async function.

Async/Await can also be used inside of a class by putting async on the method similar to how you would a function.

class ClassName{
  async methodName(){
    let value = await functionReturningPromise();
  }
}

On common thing people forget to do with the new syntax is to catch your errors. This is simple, simply wrap the await inside of a try..catch

async function functionName(){
  try{
    let value = await functionReturningPromise();
  } catch(err) {
    // handle err here
    console.log('error: ' , err);
  }
}

Also you can have multiple awaits inside the same function. The 2nd await will not run until the 1st await finishes.

async function functionName(){
  try{
    let value = await functionReturningPromise();
    let finalResult = await functionReturningPromiseTwo(value);
  } catch(err) {
    // handle err here
    console.log('error: ' , err);
  }
}

Async/Await is nothing to be afraid of, in fact it will simplify your code by reducing nested callbacks.

CSS Media Queries you don't know

Joseph Hughes — Sat, 25 Jul 2020 18:38:28 +0000

CSS media queries were introduced as part of CSS3. They allow for you to change your CSS based upon the device or device's characteristics. You are likely already using these to adjust the look of your page based on the width of your screen. However, they have multiple other functionalities that are often overlooked.

A typical media query looks like:

@media screen and (min-width: 1200px){
  ...
}

However, you can do much more than checking if the css will be displayed on a screen of 1200px or more.

You can also see if the page is being printed

@media print{
  // removing background-color and images for print friendlyness
}

You can also check orientation of the viewport

@media (orientation: landscape){
  // Great for changing how your site looks on a phone
}

You can check if the device allows for you to hover

@media hover{
  // change hover features to a click feature.
}

You can even check whether the device has an input mechanism that can hover

@media (any-hover: hover){
  // Display hover CSS only to devices that have a device that can hover connected to it.
}

@media (any-hover: none){
  // The same as above but none
}

Another great media query for phone support would be any-pointer that lets you
tell if a device has a pointer and how fine the pointer is.

@media (any-pointer: fine){
  // Make the button small
}

@media (any-pointer: coarse){
  // Make the button larger, likely on a cell phone
}

As the web matures we've found that the web should cater to all users. Media queries are a great way to do that. Here are some additional ways you can improve your user experience.

Users who are sensitive to motion can disable it on their computer.

@media(prefers-reduced-motion: reduce){
  // remove distracting animations
}

And finally, you can even see if JavaScript is enabled

@media(scripting: none){
  // display content that would otherwise be hidden behind a JavaScript show/hide.
}

As you can see, there are lots of great media queries you probably didn't know existed. Hopefully you'll be able to use these on your next project.

How do unique results per user work on huge sites like Twitter, Reddit, etc. Especially with complex criteria.

Joseph Hughes — Fri, 10 Apr 2020 12:11:52 +0000

How do sites with millions of users that serve up unique search results weighted by the individuals interests in a quick and scalable way.

For instance let’s say I have a site with 50,000,000 users, 100,000 categories, 10 different ordering criteria (new, best, controversial, etc). I want to return back the results per the persons unique criteria updating continually on the fly showing the best content from all the areas ordered by the best first.

Really interested in how you’d go about doing something like this at huge scale