DEV Community: Kyle Luke

2020 State of JS in Review

Kyle Luke — Tue, 02 Mar 2021 18:36:01 +0000

JavaScript, and it's world of related technologies and frameworks, are constantly in motion. While the massively adopted heavy hitters such as React and WebPack work very well, and are not going away anytime soon, still new frameworks and features arise to help make JS become more efficient and effective (and dare I say simple?), keeping developers learning. Since 2016, Sacha Greif and Raphaël Benitte have been collecting, analyzing and visualizing data on how developers use JavaScript, tracking how JS technologies and usage differs from year to year. 2020 data has recently been released, and show some interesting insights into how the State of JavaScript is evolving for developers.

2020 State of JavaScript

Some Fun Insights

Front-End Frameworks

Looking through popular JavaScript frameworks, there are a few that top the usage charts year after year, such as React, Angular, and Vue. What was interesting to see while looking into JS front-end frameworks from 2019 to 2020 was the swift adoption of Svelte, which not only topped the charts in User Satisfaction and Interest in the past two years, but has moved it's way from the 9th to the 4th most used CSS framework in a year. This newly popular JavaScript framework is definitely worthy of a look for any Frontend Developer.

Takeaway: Svelte

Back-End Frameworks

While looking at options for building a JavaScript back-end, the options included in the survey results can seem a little muddled. First, there are back-end specific frameworks such as Express.js, and then there are fully functional server-side rendering frameworks such as Next.js and Gatsby.js that provide out-of-the-box functionality with backends included and requiring minimal setup. Express is clear leader in usage, but Next.js is gaining popularity and ties with Express for the highest satisfaction rate. When it comes to needing a pre-built, boilerplate single-page-application setup, Next.js seems to be a great option, but if building a more customized or diverse application that needs a dedicated and specific backend, Express.js has maintained its place since released in 2017 as the clear winner in JavaScript back-end frameworks.

Takeaway: Express.js

Data Layer

When it comes to importing the back-end data layer into the front-end, Redux remains the most used state management tool, but GraphQL is gaining in popularity of usage and maintains the highest satisfaction rating. Important to note, GraphQL is not a state management tool, but instead is a different way of managing the data layer and allows for less data to manage in the front-end. The use of GraphQL reduces developers need of using a robust state management tool such as Redux, and allows for the potential use of a simpler state management solution. Redux seems to not satisfy developers like it used to, and new tools have entered the arena within 2020 to help resolve this issue. We will see if any of these tools take hold as the most used for state management and the data layer in the near future. For now, GraphQL seems like a good API for developers to look into for managing the data layer.

Takeaway: GraphQL

Most Adopted JavaScript Technology: TypeScript

Much of the reason for looking into this type of survey data for the usage and trends of JavaScript by professional developers is to find the best emerging tools, and to look into which technologies have been adopted by the most developers. In 2020, the clear winner in adoption across the majority of JavaScript developers is TypeScript, which builds on traditional JavaScript while introduces static typing, helping developers catch errors early and improving reliability of the code written.

Takeaway: TypeScript

Conclusion

While there are definitely some heavily adopted and highly reliable tools that most developers keep going back to in the world of JavaScript development (React, WebPack), keeping an eye out for new technologies that might improve or simplify development is always exciting to do. Looking through the date visualizations from the 2020 State of JavaScript can be useful for newbies and more senior developers alike in learning what new features and technologies are on the rise, along with what is being used currently with high levels of satisfaction. I myself will be looking into improving my JavaScript toolset and feature usage after looking into these trends, and so should you!

What new JS technology have you been learning or do you want to learn next??

Improving Keyboard Accessibility with Floating Focus

Kyle Luke — Thu, 25 Feb 2021 04:36:06 +0000

When it comes to creating accessible websites it is important to note that many users navigate the web through the use of a keyboard. Instead of clicking around the site with a mouse, these users navigate via the keyboard by using the "tab" key. When an HTML element within a website is able to handle keyboard input, that element is said to have focus. Only one HTML element can have focus at one time, and users navigate between these elements by "tabbing" through them.

What is `:focus` and why should we manage it?

The elements that can recieve focus include:

<a href="">Link</a> tags
<form> elements and buttons
any element that include tabindex

Not all of the users that navigate through a website by "tabbing" through focus elements are blind users, but many are impaired in ways that including additional visual queues could help them navigate more effectively. Wouldn't it be nice if, while these users are "tabbing" through, these focus items animated from one item to the next, adding a visual queue to where the next item in focus is located. This idea has been created in a few different forms, but I wanted to bring up a newer open source library that works across all browsers: FloatingFocus.

Introducing `FloatingFocus`

As multiple options have come around to improve the way the standard focus styling and operability works, none seemed to be as complete as the Dutch tech agency Q42 has hoped. Some had browser compatibility issues, others could benefit from additional or improved styling. Guido Bouman and the team at Q42 decided they could make something that makes both the end user and the design team happy, and came up with the library titled FloatingFocus. The result is an easy to implement new tool that automatically finds focus items, giving them improved styling and animation to display when they are "tabbed" too and from.

The following steps show you how to add FloatingFocus to your own project, and include only a few simple lines of JS and CSS.

NPM Import

First we will import the package into our project. We then need to instantiate it to run FloatingFocus in our app.

import FloatingFocus from '@q42/floating-focus-a11y';
new FloatingFocus(containerElement); 
// containerElement is an optional parameter which defaults to `document.body` when removed

CSS

We then need to add the following to our CSS file. Some of these styles are optional, so look at the comments or try with and without to decide if you want them in our app.

/* Hide all default focus states if a mouse is used, this is completely optional of course */
*:focus {
  outline: none;
}

/* Default outline value, which will be applied to all elements receiving focus, this is a required step. */
/* The .focus class is used by the focus target, more below. */
.floating-focus-enabled :focus, .floating-focus-enabled .focus {
  outline: dodgerblue solid 2px;
  outline-offset: 8px;
}

/* Give all buttons a green focus state instead of dodgerblue, this is optional in case it's needed. */
.floating-focus-enabled [type="button"]:focus {
  outline-color: green;
  outline-offset: 4px;
}

Example

Below is a CodePen example so you can see what FloatingFocus looks like when implemented. To see the library in action, click within the CodePen example and "tab" a few times between focus items.

Conclusion

Accessibility is an important factor in web development, and all users should be considered as you are building a new website or application. FloatingFocus helps assist users navigating your website with a keyboard by clearly displaying and animating which item has the focus state across the web page they are viewing. I hope this blog post gives you ideas on how you want to improve keyboard accessibility in your projects!

Do you think about focus while developing your front end user experience? Do you have any tips or favorite tools for improving keyboard accessibility? Let me know in the comments!

Additional Resources for Improving Focus and Keyboard Operability

Animated Page Transitions in React

Kyle Luke — Wed, 17 Feb 2021 17:31:28 +0000

Animated transitions between pages can make your single page web app more engaging, and keep users interested in the app and maintain context of what they were looking at instead of waiting for a page to load. Animations have been used on the web for some time to improve effectiveness, simplify the user experience, and to make the content more engaging and fun. Have you ever scrolled through a website and wondered how to make a website animate between pages? Yeah, so have I. This post is meant to show you how easy it is to create a simple animation between routes in a single page web app using React.

Take a look at how Material Design describes the importance of animation.

ReactCSSTransitionGroup API - Simple CSS Transitions

The React team supports a community-maintained API add-on component for React called React CSS Transition Group, which allows an easy way to add CSS animations to React components. The ReactCSSTransitionGroup is a component of the larger react-transition-group package, and is useful to defining CSS classes for stages of a component animation cycle, allowing you to apply CSS styling and animation transitions on stages such as .page-transition-enter or .page-transition-leave. I will be using ReactCSSTransitionGroup in my demo, to make a quick and easy entrance and exit animation for two pages in a React app via CSS transitions.

Add ReactCSSTransitionGroup as component enveloping Routes

We first have to include ReactCSSTransitionGroup into our component, and then we will wrap our Routes around with this component, defining a transitionName so we can access the styles in CSS later. The transitionName we will choose for this demo is page-transition.



// React
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

class Layout extends React.Component {
  render() {
    return (
      <div>
        // Add ReactCSSTransitionGroup to Routes with name: 'page-transition'
        <ReactCSSTransitionGroup component="div" transitionName="page-transition">
           <Routes />
        </ReactCSSTransitionGroup>
      </div>
);}}

Apply CSS Class Names to Routes

We then have to add the CSS class names we would like each Route component to include, so we can style them correctly and apply our animations.



// Setting Home Route up with "transition" CSS class
class Home extends React.Component {
  render() {
    return (
      <div className="transition blue">
           <Link to="about">
              <h1>NEXT</h1>
           </Link>
      </div>
    );
}}

// Setting About Route up with "transition" CSS class
class About extends React.Component {
  render() {
    return (
      <div className="transition coral">
          <Link to="home">
            <h1>LAST</h1>
          </Link>
      </div>
    );
}}

CSS

The CSS we need to style includes the display of each component while they are active, along with the CSS classes for each transition stage of the ReactCSSTransitionGroup we would like to animate. Remember, we chose page-transition as our ReactCSSTransitionGroup transitionName, so the API will look for classes with that associate className to run during the transition cycle. We just want to animate as the page enters and leaves, so will style both the .page-transition-enter and .page-transition-leave classes together for simplicity.



//CSS
$time: 2s;
$easing: ease-in-out;

// Style components how they should appear when active
.transition {
  width: 100%;
  height: 100%;

  div {
    transition: all $time/2 $easing;
    width: 99vw;
    height: 97vh;
    margin: .5% auto;
  }

  h1 {
    transition: all $time/2 $easing;
    transform: translateY(0);
  }

  &.coral > div {
    background: #f34044;
  }

  &.blue > div {
    background: #405efb;
  }
}

// Style page transition animations under the ReactCSSTransitionGroup name we chose: 'page-tansition' 
.page-transition-enter, .page-transition-leave {
  transition: opacity $time $easing;
  opacity: 0;
  position: absolute;

  div {
     margin-top: 35%;
     height: 0;
     opacity: 0;
     width: 20vw;
  }

  h1 {
    transform: scale(.8);
    opacity: 0;
  }
}

.page-transition-enter.page-transition-enter-active {
  opacity: 1;
}

.page-transition-leave.page-transition-leave-active  {
  opacity: 0;
}

Example Application

I created a demo of our application on CodePen so you have a full example of the code. Feel free to steal some or all of the code from this CodePen example, but note you will likely need to adjust the styling to fit your own application and what you would like it to do.

Conclusion

I am just touching the surface when it comes to animated page transitions in React, but it has been exciting to learn so far, and ReactCSSTransitionGroup makes it easy to implement basic CSS animations and transformations on a React component's lifecycle. When done correctly, adding animations to page transitions can help improve your apps user experience, making it more fun to use, and giving it a more responsive and faster feel.

Additional Resources for using ReactCSSTransitionGroup

Have you used Animated Page Transitions in your React project?
Comment if you have used ReactCSSTransitionGroup, have another favorite library, or have any suggestions for improvements!

How To Avoid Layout Shifts When Using Web Fonts

Kyle Luke — Mon, 08 Feb 2021 20:34:24 +0000

I posted recently about using a skeleton layout to reduce cumulative layout shifts as asynchronous content loads on your website. Layout shifts can not only be annoying, but might also affect the SEO of your website with Google's updated ranking system.

Why do Web Fonts cause Layout Shifts?

As you load in a custom web font, the browser has to asynchronously download that font, often times causing the text on your page to change in size or spacing after loading, which in turn causes a blip (or shift) in the layout as fonts get replaced. There are several strategies for preventing layout shifts caused by the use of web fonts, and Simon Hearne came out with a great blog post going over many of them.

Secret Strategy: `font-display: optional`

As Simon writes in his blog post,

The dirty little secret of this blog post is that you can resolve layout shifts due to fonts with a single line of CSS: font-display: optional

How to Use:

// Example CSS

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff2) format('woff2'),
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

Basically, if you include this additional line of code when you declare your font-face, the browser will use a fallback system font if the web font is not loaded and ready by the time text is rendered. Every additional page loaded on your website will then use the web font, as it will then be loaded, which means the user will only see a system font used once if at all.

Other Considerations

Designers may cringe at the idea of using a system font for the first load, but user experience and SEO will improve by implementing this great strategy. To reduce the chances of users seeing this initial system font, there are additional strategies that will help the web font load more quickly:

host your own fonts on your site domain
subset fonts and serve as woff2
use variable fonts or a limited set of weight variations
preload critical fonts <link rel="preload">

These are further expanded on in Simon's blog post, so check them out further if interested, but the main takeaway is that little option which eliminates layout shift in your project while using web fonts.

Conclusion

If you are like me and frequently use various web fonts in your own project, but also like to take SEO and user experience into consideration, you may want to look into strategies to reduce cumulative layout shift when loading asynchronous data like web fonts. This simple strategy is a one-shot solution to resolving layout shifts due to web fonts. It can be applied solo or in combination with other considerations to improve your use of custom web fonts on your site or project.

Do you use web fonts in your projects? Have you noticed layout shifts as these fonts load? What other strategies have you used to resolve this issue in the past?

Testing your Express.js Backend Server

Kyle Luke — Wed, 03 Feb 2021 21:28:06 +0000

Recently I have been learning about Node, and building a backend API server with Express. Express.js allows for use of the MVC pattern similarly to Ruby on Rails for building a RESTful CRUD API (making a good learning transition for me). While learning how to implement all of the CRUD pieces with Express, I wanted to test the functionality to verify things were working properly. This blog post will explain how to test the CRUD functionality of routes in your Express backend API, with the use of Jest framework and SuperTest library.

Express Server

I am assuming that you have an Express server running for this article, but below is a simple sample app to get the tests within this article running (below I will share some additional articles on building an Express server). In the code below you will find two example GET endpoints, along with some sample code to give you an idea of what your route might ACTUALLY look like when built out further.

// server.js
import express from 'express';
const app = express();

app.get('/users', function(req, res) {
  res.json({ users: 'allUsers' });

  // Real code from my application below
  //  model.User.findAll().then (users => {
  //        res.status(200).json({ users });
  //     }).catch(error=>{
  //        console.log(error)
  //        req.status(500).send(error)
  //  })
});

app.get('/users/3', function(req, res) {
  res.json({ user: 'user3' });

  // Real code from my application below
  // const { id } = req.params;
  //    model.User.findOne({
  //        where: { id: Number(id) }
  //    }).then(user=>{
  //        res.status(200).json({ user });
  //    }).catch(error=>{
  //        console.log(error)
  //        req.status(500).send(error)
  //    })
});

export const server = app;

Looking through the above routes, we see two GET requests: one for ALL users, and one for a SELECT user. Our tests will verify that each GET request will return a status code 200, have json content type, and include the property we want to see returned (such as users, or user3).

Setting Up Jest & SuperTest

First and foremost, we have to set up the testing environment. Below are the steps to getting Jest and SuperTest up and running.

1. Installing Our Dependencies

npm install jest --save-dev

npm install supertest --save-dev

npm install cross-env --save-dev

2. Setting up the testing environment

To set up the testing environment, we need to adjust the package.json folder in your Express application. The following settings allow you to run npm test in the CLI, which will perform a reset of the test database, migrate and seed your database each time for accurate testing purposes.

Note NODE_ENV=test being used to specify the test environment.

// package.json
 "scripts": {
    ...
    "test": "cross-env NODE_ENV=test jest --testTimeout=10000",
    "pretest": "cross-env NODE_ENV=test npm run migrate:reset",
    "migrate:reset": "npx sequelize-cli db:migrate:undo:all && npm run migrate",
    "migrate": "npx sequelize-cli db:migrate && npx sequelize-cli db:seed:all",
  }

We need Jest to ignore our ./node_modules folder, so we also need to add this snippet of code to package.json:

...
 "jest": {
    "testEnvironment": "node",
    "coveragePathIgnorePatterns": [
      "/node_modules/"
    ]
  },
...

OK, now to try running a test with npm test in the command line. Now that we have our testing environment up and running, we should be able to start writing our tests!

Writing Tests

We will be working in a new test.js file, and our goal is to test the functionality of the two GET requests above:
/users and /users/3.

Import

We first need to import some dependancies so we can test our Express server. These go at the top of our test.js file.

//test.js

const server = require('../index.js');
const supertest = require('supertest');
const requestWithSupertest = supertest(server);

You will notice that we are using requestWithSupertest, which links each test to the server.

Get all Users

The first thing we need is our initial describe block which will house BOTH of our tests. In this test, we will be checking how the /user GET route functions.

describe('User Endpoints', () => {

  it('GET /user should show all users', async () => {
    const res = await requestWithSupertest.get('/users');
      expect(res.status).toEqual(200);
      expect(res.type).toEqual(expect.stringContaining('json'));
      expect(res.body).toHaveProperty('users')
  });

});

In the code above, you notice we have added await to requestWithSupertest.get('/users'), because we are testing a promise that needs to be fulfilled before moving forward. We then expect to see a 200 status, json content type, and for the response body to have the users property. These three expectations fulfill what we wanted to test for in this route's functionality.

Get a User by ID

Ok, so we have our first test written. Now for the second test we will make a similar test, this time targeting the /users/3 route. This test is supposed to show how you can test for a GET route of a targeted user id. This test will also be placed within the same describe block we defined above.

  it('GET /user/:id should show a user', async () => {
        const res = await requestWithSupertest.get('/users/3')
        expect(res.statusCode).toEqual(200)
        expect(res.body).toHaveProperty('user3')
    });

Run the Tests

Awesome! We have written two tests to verify functionality of our two sample GET routes. Now to run the tests in the command line:

npm test

You should see two passing tests in our test suite!

Conclusion

You now have the resources to add some testing to your Express API! Hopefully the above examples help you to gain some initial understanding on how to set up and test the functionality of your Express server! I wanted to expand my knowledge of testing Express backend API requests, and this is how I set up tests within my own application!

Some additional resources I have used to help me learn Express.js and how to test the server include
Node.js Rest APIs example with Express, Sequelize & MySQL by bezkoder
Building an Express API with Sequelize CLI and Unit Testing! by Bruno Galvao
How to test your Express.js backend with Jest and Supertest by Coderslang
Hopscotch.io - a tool to send server requests and see the responses

Has this article helped you get started with testing your Express server? Respond with comments or recommendations!

How to Build a Skeleton Layout in React

Kyle Luke — Wed, 27 Jan 2021 03:16:18 +0000

The use of a Skeleton Layout for asynchronous content is becoming more and more popular across mobile and web apps alike. Google, Facebook, LinkedIn, Youtube and many more use a skeleton layout to display what the content and layout might look like, before it loads. Using one in your own project is a nice styling effect for your users, and also might just improve the SEO of your project in the near future by reducing "cumulative layout shift". This post shows you how easy it is to add a skeleton layout that updates after asynchronous content is loaded.

isLoaded State

React allows for us to set state from isLoaded: false to isLoaded: true when an asynchronous function has completed. This will be the basis for which set of content we will display. We will create two CSS classes for our content based on the isLoaded state: .loading and .loaded. We will then do an if statement that will return the JSX for the .loaded content, IF isLoaded = true. IF isLoaded = false, the app will return the JSX for the .loading content, which will be our skeleton layout.

// JSX
class App extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      isLoaded: false,
      asyncData: []
    }
  };

render(){

    asyncFunction = () => {
        // Async function fetches asyncData, and upon fetch updates state from `isLoaded:false` to `isLoaded:true`
    }

    if(this.state.isLoaded===true){
        // If state.isLoaded=true, component will render complete layout and async content
          return(
            <>
              <LayoutContent className="loaded" />
            </>
          );
        } 

    return(
      // While state.isLoaded=false, component will only render skeleton layout
        <>
            <LayoutContent className="loading" />
        </>
    );
};
};

CSS

The CSS we need to style will include our two classes: .loading and .loaded. This gives you a little freedom for how you would like your skeleton layout to look, but I chose an animated approach from StackFindOver for the styling in the CodePen example below.

// Skeleton Layout styles and animation
.loading {
    position: relative;
    background: #cccccc;
}
.loading:after {
    content: "";
    display: block;
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;
    transform: translateX(-100px);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: loading 0.8s infinite;
}
@keyframes loading {
    100% {
        transform: translateX(100%);
    }
}

// Loaded styling
.loaded {
    // Styles
}

Some additional things to note when it comes to CSS styling:

Width and Height of components should be defined to reduce content jumping
Consider using CSS Flexbox for responsive components with max-width/height defined
If component sizes vary based on content consider adding an "overflow-y: scroll" property

Example Application

Feel free to steal some of the code from this CodePen example, but note you will likely need to adjust some of the styling to fit your own application.

Conclusion

Skeleton layouts not only give your application a fun and useful loading screen as asynchronous content loads, but also might just improve your application's SEO and user experience. Hopefully this blog post and the example gives you some ideas on how to apply a skeleton layout in your own project!

Have you used a Skeleton Layout in your project?
Comment if you have used a similar method, or have suggestions for improvements!

Getting Started with 3D: CSS 3D Transformations

Kyle Luke — Thu, 21 Jan 2021 06:24:06 +0000

Working with 3D can be a daunting thing to get started with for many developers. Luckily, it doesn't have to be as complicated as you think to create professional looking 3D transformations with only a little bit of CSS magic. I wanted to help developers that are beginning their journey into 3D CSS transformations to get started with a few basics.

CSS Property: 3D Transform

3d CSS transforms can add depth and visual interest to elements on your page using perspective. The CSS transform property includes the following 3D transformation methods for mix-and-match use:

Rotate

rotateX()
rotateY()
rotateZ()

Translate

translateX()
translateY()
translateZ()

Skew

skewX()
skewY()

Scale

scaleX()
scaleY()
scaleZ()

Additional

transform-origin
perspective

Example Usage

You can use the transform property on any CSS selector. You can also apply a transition to the hover state, or based on mouse or scroll location with the use of additional JS. This CSS-Transform Playground is an incredible resource built by Jorge Moreno that allows you to alter and view different mixtures of 3D CSS transform properties, with a toggle on the bottom to activate or deactivate the properties. Play around with the different sliders in this tool to craft your own mixture, and apply those property numbers to your project!

Here is an example of how you might apply a 3D transform with a hover state transition.

div {
  transform:
    perspective(800px)
    rotateY(25deg) scale(0.9)
    rotateX(10deg);
  transition: 0.6s ease all;
}

div:hover {
    transform:
      perspective(800px)
      rotateY(-15deg)
      translateY(-50px)
      rotateX(10deg)
      scale(1);
  }

Here are some examples of how you can mix and match 3D transforms to make some fun and unique interactions with cards. Feel free to copy the code into your own project and make these transformations your own!

Transform Example #1

Transform Example #2

Transform Example #3

Transform Example #4

Conclusion

I hope these examples allow you to overcome the hurdle of entering the world of 3D on the web. With resources like a visual css-transform playground and pre-build code examples, 3D CSS Transformations are not only easy to make, but will add a whole other level of fun and visual interest to your projects!

What are YOUR favorite 3D CSS Transformations? Share in the comments!!!

Additional Resources

3D CSS-Transform Playground
Polypane blog: CSS 3D Transform Examples
MDN Web Docs: transform

Implementing Medium's Image Preview with Gatsby Images

Kyle Luke — Tue, 12 Jan 2021 05:00:04 +0000

The zoom-in image preview feature used by Medium for their blogs is a really nice way to allow users a deeper look at the images on your project. I wanted to use this feature for displaying past projects on my portfolio site, but ran into issues between the compatibility of the React Medium Image Zoom library and the Gatsby Image tool.

Goal

Have you seen the "Image Preview" zoom feature on Medium? It allows a user to view a lightbox version of the full image, filling up the browser with as large of an image as the size allows while seeing it in full.

There are multiple React libraries that replicate this image-zoom feature, but the one that seems to have the most users and the largest community for support is the react-medium-image-zoom library (built by Robert Pierce)

Issues

The steps for use of React Medium Image Zoom are pretty simple. Start by adding the library to your React project (npm i react-medium-image-zoom), then import Zoom to your desired component, and wrap an image with it.

Example:

import React from 'react'
import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'

const MyComponent = () => (
  <Zoom>
    <img src="../images/example.jpg" width="500" />
  </Zoom>
)

export default MyComponent

When using with Gatsby though, the issue of using the Zoom feature with Gatsby Images quickly becomes apparent. The Gatsby Images no longer show up! Luckily this is only a CSS issue, and has to do with some of the native styling in both.

Resolution

It all comes down to debugging the styling pre-baked into Gatsby Image and the React Medium Zoom library, and implementing fixes that will allow them to both work cohesively together.

Required CSS

// Set Gatsby Image className to 100% width and height
gatsbyImage {
  width: '100%',
  height: '100%'
}

// React Medium Image Zoom styling update to work with Gatsby Images
[data-rmiz-wrap='visible'], [data-rmiz-wrap='hidden'] {
    width: 100%;
    height: 100%;
    display: block;
}

Conclusion

Implementing the Image Zoom feature seen on Medium is a simple, and nice way to improve the user experience in many projects. Hopefully this will help some of you that happen to be trying to implement this feature with Gatsby Images. It's much simpler than I thought to fix, but took me some time to figure out what needed to be done.

Additional Resources

Mikal Mantis's one-component solution to the React Medium Image Zoom with Gatsby Image issue

How To Query Gatsby Images with GraphQL

Kyle Luke — Wed, 06 Jan 2021 16:23:42 +0000

When learning new tools, often times the most challenging parts will lead to the coolest features and benefits. This was the case for me when learning to use Gatsby, and how GraphQL works. I struggled hard at figuring out how to use the gatsby-image plugin, and how to query GraphQL assets to display individual images on in the correct spot.

So why Gatsby (and why Gatsby Image)?

For many reasons React developers are choosing to use static site generator such as Gatsby or Next.js. Static site generators create blazing fast single page applications, and also allow for a quicker and simplified development process with multiple available plugins. One plugin that Gatsby does very well is Gatsby-images. Gatsby-images is a react component that lazy-loads images with a blur-up effect, speeding up page loading times dramatically and holding image positions until loaded. The benefits of using Gatsby Images were a major benefit for my portfolio site, so I opted to learn how querying in GraphQL works so I would then be able to individually place a fast loading Gatsby Image on demand.

Traditional React Image Example

The original way to import an image into React is through

import example from '../images/example.jpg'
<img className="example" src={example}/>

and produces an image that slowly loads from the top down before displaying.

Gatsby Image Example

Gatsby Images are lazy-loaded, starting with the full image visible and a blur effect applied. As the browser has time to download, the image scales up until full resolution.

Image from CSS Tricks: Ways to Organize and Prepare Images for a Blur-Up Effect Using Gatsby

Pretty cool, huh!?

How To Query Gatsby Images with GraphQL

1. Install the Gatsby Image plugin

npm install gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp

2. Add Gatsby Image plugin to Gatsby Config file

plugins: [ 
{
resolve: `gatsby-source-filesystem`,
options: { name: `images`,    
path: `${__dirname}/src/images`,
},    
},    
`gatsby-transformer-sharp`,    
`gatsby-plugin-sharp`
, ...additionalplugins 
]

3. Add your images to `/src/images` folder

The images folder will be mapped in our query later on to select individual images for conversion and import.

4. Import Gatsby Image component and GraphQL into Gatsby page file

import { graphql } from "gatsby"
import Img from "gatsby-image"

5. Query GraphQL to select image/images and convert to Gatsby Images

export const fluidImage = graphql`
    fragment fluidImage on File {
        childImageSharp {
          fluid(maxWidth: 1600) {
            ...GatsbyImageSharpFluid
          }
          original {
            width
          }
        }
    }
`;

export const pageQuery = graphql`
     query {
       projectHero: file(
         relativePath: { eq: "exampleHero.jpg" }
       ) {
         ...fluidImage
       }
       imageOne: file(
         relativePath: { eq: "examplephoto-1.jpg" }
       ) {
         ...fluidImage
       }
       imageTwo: file(
         relativePath: { eq: "examplephoto-2.jpg" }
       ) {
         ...fluidImage
       }
       imageThree: file(
         relativePath: { eq: "examplephoto-3.jpg" }
       ) {
         ...fluidImage
       }
       imageFour: file(
         relativePath: { eq: "examplephoto-4.jpg" }
       ) {
         ...fluidImage
       }
     }
`;

6. Import Gatsby Image tag into page and position/style with CSS

<Img fluid={props.data.file.childImageSharp.fluid} />

Full Component Example

import React, { Component } from "react"
import Layout from "../components/layout"
import SEO from "../components/seo"

import { graphql } from 'gatsby';
import Img from 'gatsby-image';

const pageId="example"

export const fluidImage = graphql`
    fragment fluidImage on File {
        childImageSharp {
          fluid(maxWidth: 1600) {
            ...GatsbyImageSharpFluid
          }
          original {
            width
          }
        }
    }
`;

export const pageQuery = graphql`
     query {
       projectHero: file(
         relativePath: { eq: "exampleHero.jpg" }
       ) {
         ...fluidImage
       }
       imageOne: file(
         relativePath: { eq: "examplephoto-1.jpg" }
       ) {
         ...fluidImage
       }
       imageTwo: file(
         relativePath: { eq: "examplephoto-2.jpg" }
       ) {
         ...fluidImage
       }
       imageThree: file(
         relativePath: { eq: "examplephoto-3.jpg" }
       ) {
         ...fluidImage
       }
       imageFour: file(
         relativePath: { eq: "examplephoto-4.jpg" }
       ) {
         ...fluidImage
       }
     }
`;


class Example extends Component {

  render() {
    return (
      <Layout>
        <SEO title={pageId} />
        <div
          className="hero project-hero d-flex align-items-center"
          style={{
            backgroundSize: "cover",
            backgroundPosition: "50% 65%",
            overflow: "hidden",
          }}
        >
          <Img
            fluid={this.props.data.projectHero.childImageSharp.fluid}
            imgStyle={{ objectFit: "cover" }}
            alt="Example project hero image."
          />
        </div>
            <Card className="no-radius">
              <Img
                fluid={this.props.data.imageOne.childImageSharp.fluid}
                imgStyle={{ objectFit: "cover" }}
                alt="Example project example image."
              />
              <Img
                fluid={this.props.data.imageTwo.childImageSharp.fluid}
                imgStyle={{ objectFit: "cover" }}
                alt="Example project example image."
              />
              <Img
                fluid={this.props.data.imageThree.childImageSharp.fluid}
                imgStyle={{ objectFit: "cover" }}
                alt="Example project example image."
              />
              <Img
                fluid={this.props.data.imageFour.childImageSharp.fluid}
                imgStyle={{ objectFit: "cover" }}
                alt="Example project example image."
              />
            </Card>
      </Layout>
)}}
export default Example

Other Thoughts

Making Gatsby Image a component, and passing URL path as props.

To consolidate and DRY up multiple pages that might put into use the same Gatsby Image queries, you can create a component with the Gatsby Image query, and pass URL paths as props.

Using Flexbox vs Float (Float breaks Gatsby Image)

One issue developers might notice while implementing Gatsby Images is that they break with the use of CSS float properties. To overcome this issue, many developers make use of Flexbox instead of float, to shape and align images on the page.
https://dev.to/steelvoltage/struggling-with-gatsby-images-1ao5

Run Gatsby Development Server and view GraphQL Playground

The Gatsby GraphQL playground is particularly fun to play around with and test your queries. It will help you identify what is being held in your GraphQL data and how to get to it, and doing some digging around will help you understand how GraphQL queries work.
To view the playground, run your Gatsby development server and visit: http://localhost:8000/___graphql

Making it Work

I got stuck several times during the process of trying to query through my images with GraphQL, and then again displaying them correctly as Gatsby Images. Hopefully this post guides you through querying GraphQL for your own Gatsby project, and how to display images correctly using the benefits of Gatsby Images.

Did you find this helpful? If you have used Gatsby Image, what got YOU stuck while learning?

Additional Resources

Favorite Resource of the Week: Coding Fonts

Kyle Luke — Tue, 29 Dec 2020 00:06:55 +0000

In the world of software development, things move fast. New tools, new libraries, new languages! As technology changes to meet the needs of today's problems, it is important as a developer to keep up to date with what tools work best for you. I am always watching for tools that will help improve my workflow, making me a better designer and developer, and making my work more effective. I would like to share the tools I find that seem to make a difference in my work, and might just help solve some of the problems you are facing in your own!

This week my favorite resource is a newly found web app on the CSS-Tricks site, which helps developers in choosing which coding font's they like best, find most useful, and most effective for their code editing environment.

CSS-Tricks: Coding Fonts

https://coding-fonts.css-tricks.com/

Coding Fonts allows you to switch between 35 of the most popular fonts used by developers in their code editors, and it allows you to see the differences between and the unique aspects of each. Many of these fonts contain unique ligatures, use of italics, variables, and character shapes that help developers see the functions or markup they are calling more accurately and quickly. This web app not only lists the differences between these commonly used fonts, but also allows you to see them in action. Choosing a font that is easy for you to differentiate between characters and visualize unique calls and comments can improve workflow, and be a real productivity booster in your development toolkit!

What is your favorite coding font of choice? Is it listed in Coding Fonts? And why do you find it most effective for your daily work use?

Favorite Resource of the Week: css.gg

Kyle Luke — Mon, 21 Dec 2020 19:53:53 +0000

This week my favorite resource is a newly found library of well designed, open-source, and widely available icons built originally in CSS: css.gg icon library. This icon library is awesome, and widely available in a ton of formats, from downloading an using individually or as a set, to opening in design applications such as Figma or Adobe XD, or even importing the NPM module into your React project.

css.gg Icon Library

https://css.gg/

When it comes to icon libraries, there a lot of options to choose between. So, what makes css.gg icons special? Well first on the list is that it's open-source and caught the attention of a few designers and developers alike that helped increase the number of icons available for use, along with improving the platform availability. css.gg was created by Astrid Malsija (also a member of the DEV community!), as a personal project which he made open source. Any it's growing, now including over 700 retina-ready, scalable, and incredibly simple icons, along with being available now as an API for HTML/CSS import, as styled-components, as React NPM imports, and as SVG Sprites. The icons were originally built using pure CSS, which renders them incredibly quickly because it doesn't require any additional resource. The other super cool thing about them being built in CSS, is that they allow for animations (see this Loadbar for example)! If you view any of the icons individually, you can see the CSS code that was used to build each icon. There is also a very friendly GitHub ReadMe that explains how to import and use the icons across all of the available formats.

Because of css.gg icon libraries' open source friendliness to improve the icons, their quick rendering and scalability, and wide availability in multiple formats, this has become my new favorite icon library for use in my projects, and a great new addition to my development toolbox. I hope you find it useful in your own!

What is your favorite icon library, and why do you find that tool to be the most effective for your daily work use?

Top Tips for FREE Cross-Browser Testing

Kyle Luke — Thu, 17 Dec 2020 06:06:32 +0000

When it comes to apps and websites that will live on the wide world of the interwebs, and across many devices and browsers, it is important for developers to consider cross-browser testing to ensure a positive experience for the majority of users. Styling compatibility, JS version issues, and the differing technology used across browser types and release versions make websites and applications behave differently as device, operating system and browser combinations change. Developers need a testing platform to sort out issues across different devices, browsers and operating systems, to ensure maximum usability and minimal errors.

Enter Cross-Browser Testing

The need for cross-browser testing has been around for some time now, but finding free ways to test your applications or websites across multiple browsers seems to be more and more difficult to do for free anymore.

This guide provides you with top tips for free cross-browser testing.

Planning WHAT To Test

In a perfect world every device, operating system, and browser type and version would work flawlessly and error free. Initially, testing and bug fixing for EVERY browser may be too time consuming and resource intensive, and you may include more thorough browser support over time.

When deciding what to test first, start by:

What device/operating system/browser combinations are the most commonly used for your audience
User behavior across these common combinations, such as page drrop offs, lack of conversions, etc.

Additional Reading:

Smashing Magazine: High Impact Minimal Effort Cross Browser Testing

Free Testing Methods

1. Download Different Browsers and Use Built In Dev-Tools

This may seem like the most obvious solution. Why not download every browser you want to test, and see how they run! The Dev-Tools in some browsers even allow you to switch the version you are running (Internet Explorer 11), or the type of device you are using (many allow you to emulate that browser on multiple mobile device types such as an iPad or Android mobile phone).

Additional Reading:

Chrome DevTools: Emulate and Test Other Browsers
Google Chrome: Dev Tools - Device Mode
Firefox: Responsive Design Mode
Internet Explorer 11: Simulate Older Internet Explorer Versions

2. Using Virtual Machines and Emulators With Different Browsers

Sometimes just running a different browser instance doesn't test your project as thoroughly as needed. Running a browser such as MS Edge on a Windows device for example might behave differently than if it was run on a Mac. Many developers use Parallels, but thanks to MS Edge Developer tools, there are free virtual machine options that allow users to run different Internet Explorer versions on different Windows versions. IES 11 on Windows 7? Yep! MS Edge on Windows 10? Got that too!

Additional Reading:

MS Edge Developer Tools: Virtual Machines

3. Using Cloud-Hosted Interactive Cross-Browser Testing Web-Apps

Conveniently there are many interactive web-apps that provide cloud-hosted virtual machines that allow users to test their projects on a wide variety of device/operating system/browser combinations. Unfortunately there are no longer any completely free options for developers to use past a certain free trial period. There are two options that I am aware of though, that do offer unlimited free services of their cross-browser testing platform for open-source projects: BrowserStack and CrossBrowserTesting. Both of these cross-browser testing web-apps provide users with a VERY robust selection of devices/operating systems/browsers, and allow live and interactive testing of your open-source project. There are considerations to take before making your project open-source, but depending on the project these can be a very quick and effective solution for your testing needs.

Additional Reading:

BrowserStack
CrossBrowserTesting
Open Source Guide: Starting an Open Source Project
CSS-Tricks: Use BrowserStack for Live Web-Based Cross Browser Testing

Conclusion

Cross-browser testing is an important step to ensuring your app or website behaves across multiple combinations of devices/operating systems/browsers. Although not a completely simple task, I hope this blog post helps some of you with some free options for performing your own cross-browser testing.

Did I miss something?
What is YOUR favorite free cross-browser testing tool?
Let me know in the comments!

DEV Community: Kyle Luke

2020 State of JS in Review

2020 State of JavaScript

Some Fun Insights

Front-End Frameworks

Takeaway: Svelte

Back-End Frameworks

Takeaway: Express.js

Data Layer

Takeaway: GraphQL

Most Adopted JavaScript Technology: TypeScript

Takeaway: TypeScript

Conclusion

Improving Keyboard Accessibility with Floating Focus

What is :focus and why should we manage it?

Introducing FloatingFocus

NPM Import

CSS

Example

Conclusion

Additional Resources for Improving Focus and Keyboard Operability

Animated Page Transitions in React

ReactCSSTransitionGroup API - Simple CSS Transitions

Add ReactCSSTransitionGroup as component enveloping Routes

Apply CSS Class Names to Routes

CSS

Example Application

Conclusion

Additional Resources for using ReactCSSTransitionGroup

How To Avoid Layout Shifts When Using Web Fonts

Why do Web Fonts cause Layout Shifts?

Secret Strategy: font-display: optional

How to Use:

Other Considerations

Conclusion

Testing your Express.js Backend Server

Express Server

Setting Up Jest & SuperTest

1. Installing Our Dependencies

2. Setting up the testing environment

Writing Tests

Import

Get all Users

Get a User by ID

Run the Tests

Conclusion

How to Build a Skeleton Layout in React

isLoaded State

CSS

Example Application

Conclusion

Getting Started with 3D: CSS 3D Transformations

CSS Property: 3D Transform

Rotate

Translate

Skew

Scale

Additional

Example Usage

Transform Example #1

Transform Example #2

Transform Example #3

Transform Example #4

Conclusion

Additional Resources

Implementing Medium's Image Preview with Gatsby Images

Goal

Issues

Example:

Resolution

Required CSS

Conclusion

Additional Resources

How To Query Gatsby Images with GraphQL

So why Gatsby (and why Gatsby Image)?

Traditional React Image Example

Gatsby Image Example

How To Query Gatsby Images with GraphQL

1. Install the Gatsby Image plugin

2. Add Gatsby Image plugin to Gatsby Config file

What is `:focus` and why should we manage it?

Introducing `FloatingFocus`

Secret Strategy: `font-display: optional`

3. Add your images to `/src/images` folder