DEV Community: Ben Winchester

Build an Image Carousel with Svelte - Part 2 (Adding Features)

Ben Winchester — Fri, 16 Oct 2020 04:52:28 +0000

Some notes from Part 1

This article picks up from a previous article, if you haven't read it already please go back and check it out. The repo is also available here

I posted the article and youtube video in a few places online and received some feedback on the usefulness of Carousels. This series is not intended to advocate the use of Carousels or comment on their impact on user experience. This is more of a way to introduce some of the functionality of Svelte. In part 1 we:

Downloaded the svelte template
Created a component
Pass props from parent to child component
Explored conditional rendering with the {#for <Iterable> as <Reference>}{/for} loop
Implemented event handling and Svelte's directive syntax
Implemented slots to place child components

The goal was to get introduced to Svelte as tool with something other than the standard "Hello World" or "Todo" application.

In this continuation we will add a features to enable autoplay, allow the user to disable the control buttons, in the process we will:

Set and Clear intervals
Further explore conditional rendering logic with {#if}{/if} syntax
Introduce onDestroy lifecyle method
Demonstrate custom events and dispatching data from child to parent components

As will the last article, this one coincides with a the following Twitch stream now available on my YouTube channel:

Lets add some features

Adding autoplay capability

First we need to expose a prop variable by exporting it in the Carousel.svelte file. We will set it to false as a default, and then update our Component declaration to set it as true so we can see it while we build. We also want to pass in a speed at which the autoplay will occur, so we expose autoplaySpeed as prop with a default value of 5 seconds, though we will override it by passing 3000 milliseconds to the prop for demonstration purposes.

// src/components/Carousel.sveltejs
<script>
  import { flip } from 'svelte/animate';

  export let images;
  export let imageWidth = 300;
  export let imageSpacing = 20;
  export let speed = 500;
  export let controlColor= '#444';
  export let controlScale = '0.5';
  export let autoplay = false;         // <---
  export let autoplaySpeed = 5000;     // <---
...

// src/App.svelte

<script>
...

<Carousel
    {images}
    imageWidth={250}
    imageSpacing={15}
  autoplay={true}              // <---
  autoplaySpeed={3000}         // <---
/>


<style>

</style>
...

Back in our component file we will create the startAutoPlay and stopAutoPlay functions which will will... you know, control our autoplay. Then we will run a check to see if autoplay is set to true, and if so, call the startAutoPlay.

The startAutoPlay will set an interval to call the rotateLeft function we wrote in part 1. The stopAutoPlay will clear the intervals. Be sure to also check if autoplay is enabled in the startAutoPlay function to ensure it isn't mistakenly started after a mouseover.

IMPORTANT In the video stream I forgot to discuss the onDestroy lifecyle method. The onDestroy lifecyle method is called when the component is unmounted. Remember to add this to insure the interval is cleared.

// src/components/Carousel.sveltejs
...
import { onDestroy } from 'svelte';
...
  const startAutoPlay = () => {
    if(autoplay){
      interval = setInterval(rotateLeft, autoplaySpeed)
    }
  }

  const stopAutoPlay = () => {
    clearInterval(interval)
  }

  if(autoplay){
    startAutoPlay()
  }

  onDestroy(() => {stopAutoPlay()})
...

We now have a functioning autoplay feature!

Custom Events and Dispatching from Child to Parent component

Because this is a demonstration, it is only visible in the demonstration/eventDispathChildToParent branch of the repo.

Just like with a normal on:<EventName> event listener directive, we can create our own events. So we will add the on:imageClicked to the Carousel declaration in the App.svelte file. Now the Carousel will listen for the imageClicked event that is emitted from within. For now we will handle the event by calling a handleImageClicked function which will log the event to the console.

Inside the Carousel.svelte file we will have to create an event dispatcher. First we must import createEventDispatcher from the svelte package. Now we will store it in a variable called dispatch, and add it to each <img> tag that is rendered in the {#each} loop.

In Svelte, an event dispatcher takes two parameters, the first is the signal you emit, and the second is called the events detail and will be accessible as and attribute of the event. Here we will call dispatch('imageClicked', image.path) to each <img> tag. This will emit the images path as the events detail.

Lastly we will update our App.svelte so that it doesn't log "image clicked", but instead will log the clicked image's path.

// src/components/Carousel.svelte
<script>
  import { flip } from 'svelte/animate';
  import { createEventDispatcher, onDestroy } from 'svelte';   // <---

  export let images;
  export let imageWidth = 300;
  export let imageSpacing = 20;
  export let speed = 500;
  export let controlColor= '#444';
  export let controlScale = '0.5';
  export let autoplay = false;
  export let autoplaySpeed = 5000;
  export let displayControls = true;
  let interval;

  const dispatch = createEventDispatcher()                  // <---
  ...
  {#each images as image (image.id)}
    <img
      src={image.path}
      alt={image.id}
      id={image.id}
      style={`width:${imageWidth}px; margin: 0 ${imageSpacing}px;`}
      on:mouseover={stopAutoPlay}
      on:mouseout={startAutoPlay}
      on:click={() => dispatch('imageClicked',image.path)}   // <---
      animate:flip={{duration: speed}}/>
  {/each}
  ...

// src.App.svelte

const handleImageClicked = e => {       // <---
  console.log(e.detail)                 // <---
}
</script>


<Carousel
  {images}
  imageWidth={250}
  imageSpacing={15}
  controlColor={'white'}
  controlScale={0.8}
  autoplay={true}
  autoplaySpeed={3000}
  on:imageClicked={handleImageClicked}   // <---
/>
...

Now when you click on an image, you will see its path logging to console with the source being App.svelte

Make the controls disappear

For the rest of the article I will be working off the master branch, so dispatch examples will not be visible

Lastly, we will expose another boolean variable in the Carousel.svelte file called displayControls and give it a default value of true. However, we will pass false to the prop from the component declaration so we can see it disappear.

Now we can wrap both button elements in the Carousel.svelte with the {#if <Expression>}{/if} conditional logic, and watch the controls disappear.

// src.App.svelte

...
<Carousel
  {images}
  imageWidth={250}
  imageSpacing={15}
  controlColor={'white'}
  controlScale={0.8}
  displayControls={false}               // <---
  autoplay={true}
  autoplaySpeed={3000}
/>
...

// src/components/Carousel.svelte

...
{#if displayControls}                           // <---
<button id="left" on:click={rotateLeft}>
  <slot name="left-control">
    ...
  </slot>
</button>
<button id="right" on:click={rotateRight}>
  <slot name="right-control">
    ...
  </slot>
</button>
{/if}                                           // <---
...

Conclusion

Thanks for following the series. In future articles I will continue with stores, Sveltes context API for sharing data with adjacent components.

If you are interested in other topics surrounding Svelte leave a comment.

Build an Image Carousel with Svelte

Ben Winchester — Thu, 15 Oct 2020 16:25:36 +0000

Background

This week I was working on a Svelte project and wanted to create a carousel for images to cycle for the user. I found a great package by boyank, svelte-carousel. The package is a Svelte component implementation of Siema. The tool is great, but after playing with it I wanted to try to create a carousel with just Svelte. You can view the recorded stream here:

This article is for those not wanted to watch a 1.5 hour stream, and goes through setting up the Svelte template and creating a Carousel component.

Lets Build

Setting up a new Svelte Project

To setup a new Svelte project run: npx degit sveltejs/template <ProjectName>. Degit clones just the published git workspace and not the git repo (history). Then install dependencies: yarn or npm install. If you take a look at the package.json you'll notice all but one dependency is a developer dependency, which highlights Svelte's greatest attribute...

What's different about Svelte

Svelte is a compiler and syntax. The entire Svelte project compiles to a single Javascript file. Svelte is not an external library that is included in the bundle like React. This allows Svelte projects to be very small and fast.

Lets prep the template so we can make the Carousel

For the sake of brevity, and because this is mostly cosmetic for the purpose of development Ill simply list what I did in the video:

Remove props from main.js
Update public/global.css
- html, body: add margin: 0, padding: 0, height: 100%, width: 100%
- body: add display: flex, align-items: center, justify-content: center, background: black
Add pictures to public/images

The global style changes will not impact the Carousel component, the default target element for injection in rollup.config.js is the body tag, so the changes will center and reset the body and html elements. The Carousel component itself will ultimately fill the width of whatever element it is called into, so these changes are simply cosmetic

In Svelte, the public directory is where static assets go, so I added six jpg files in public/images

Carousel Component Setup

Ok, lets create our component at src/components/Carousel.svelte and import it into our App.svelte

// src/App.svelte

<script>
  import Carousel from './components/Carousel.svelte'
</script>

<Carousel />

<style>

</style>

And we can start building our Carousel components. We are going to create a wrapper element which will expand to the full width of its containing element. Inside of this we will create an element to hold all of our images.

// src/components/Carousel.svelte

<script>

</script>

<div id="carousel-container">
  <div id="carousel-images">
  </div>
</div>

<style>

</style>

Props in svelte

Now we are going to pass our images into the Carousel component. This is done by declaring an export variable in the components script tag. Then the Component tag can receive them as an attribute in the parent element.

// src/App.svelte

<script>
  import Carousel from './components/Carousel.svelte'

  const images = [
        {path: 'images/image1.jpg', id: 'image1'},
        {path: 'images/image2.jpg', id: 'image2'},
        {path: 'images/image3.jpg', id: 'image3'},
        {path: 'images/image4.jpg', id: 'image4'},
        {path: 'images/image5.jpg', id: 'image5'},
        {path: 'images/image6.jpg', id: 'image6'},
    ]
</script>

<Carousel images={images} />

<style>

</style>

In Svelte, if the prop and the variable being passed are the same, you can short hand the prop like so <Carousel {images} />.

In there Carousel element we will loop over the images prop and create an image element for each element in the array, using the path attribute as the src for the image tag, and the id tag as the alt and id for each image tag:

// src/components/Carousel.svelte

<script>
  export let images;
</script>

<div id="carousel-container">
  <div id="carousel-images">
  {#each images as image}
    <img src={image.path} alt={image.id} id={image.id} />
  {/each}
  </div>
</div>

<style>

</style>

Now we will see the six images appear in our component... but the are full size. Lets use props to give the user the ability to set the width and spacing for the images. Because variables cannot be accessed in the components style tags, we will have to use inline styles. When a prop declaration has an assignment, it will be the default value, and be overwritten by the passed prop if one is provided.

// src/components/Carousel.svelte

<script>
  export let images;
  export let imageWidth = 300;
  export let imageSpacing = '25px';
</script>

<div id="carousel-container">
  <div id="carousel-images">
  {#each images as image}
    <img
      src={image.path}
      alt={image.id}
      id={image.id}
      style={`width: ${imageWidth}px; margin: 0 {imageSpacing}`}
    />
  {/each}
  </div>
</div>

<style>

</style>

// src/App.svelte

...

<Carousel
  images={images}
  imageWidth={250}
  imageSpacing={'30px'}
 />

...

Now we have some manageable image sizes, lefts style the two containers in the component to the images appear in an horizontal line. We want the overflow from the carousel-images extend outside the horizontal edges of the carousel-container element. Using flexbox allows us to create responsiveness. The great thing about Svelte styles, are that they are scoped to the component, so there is no worries of collisions.

// src/components/Carousel.svelte

...

<style>
#carousel-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }
  #carousel-images {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
  }
</style>

Add Control Buttons - A little about Svelte reactivity model

Now we are going to add some control buttons and add some functionality. We will add two buttons (so they are tab key accessible) inside our carousel-container. Because the container is flex column, the buttons will appear at the bottom. We will position and style them at the end. To add an onClick event listener to an element add the on:click={functionName}, and create the functions inside the script tags. Whe will discuss the actual functions in the next section.

// src/components/Carousel.svelte

<script>
  export let images;
  export let imageWidth = 300;
  export let imageSpacing = '25px';

  const rotateLeft = e => {

  }

  const rotateRight = e => {

  }

</script>

<div id="carousel-container">
  <div id="carousel-images">
  {#each images as image}
    <img
      src={image.path}
      alt={image.id}
      id={image.id}
      style={`width: ${imageWidth}px; margin: 0 {imageSpacing}`}
    />
  {/each}
  </div>
  <button on:click={rotateLeft}>Left</button>
  <button on:click={rotateRight}>Right</button>
</div>
...

Add animation

Another favored aspect of Svelte is its built in transitions and animations API. For the animation of the Carousel, we will use the flip animation. Flip is associated with an array element that has been rendered in a loop. When the sourcing array is reordered, the elements transition to the new order with a generated animation. The only things we need to change is importing flip, adding an element key for the each loop and provide the animate:flip directive to the loop generated elements:

// src/components/Carousel.svelte

<script>
  import { flip } from 'svelte/animate'
  export let images;
  export let imageWidth = 300;
  export let imageSpacing = '25px';

  const rotateLeft = e => {

  }

  const rotateRight = e => {

  }

</script>

<div id="carousel-container">
  <div id="carousel-images">
  {#each images as image (image.id)}
    <img
      src={image.path}
      alt={image.id}
      id={image.id}
      style={`width: ${imageWidth}px; margin: 0 {imageSpacing}`}
      animate:flip
    />
  {/each}
  </div>
  <button on:click={rotateLeft}>Left</button>
  <button on:click={rotateRight}>Right</button>
</div>
...

Now to see the flip animation in action, we need to reorder the array in our control functions. This is were we need to discuss the reactivity model. If we mutate the images array using array methods, Svelte will not detect the change, so we need to reorder the array and reassign it back to images to trigger the animation. So we will use destructuring to move the first element of the array to the end (for rotateRight) or to move the last element of the array to the beginning (for rotateLeft).

// src/components/Carousel.svelte

...

  const rotateLeft = e => {
    images = [images[images.length -1],...images.slice(0, images.length - 1)]
  }

  const rotateRight = e => {
    images = [...images.slice(1, images.length), images[0]]
  }
  ...

Now our control buttons will show the images move to the correct location and all others will shift in accordance with the new order.

Cleanup carousel images div and flying images

The Carousel is starting to take form... but, our transitioning images are floating across the screen. The animate:flip API does have parameters pertaining to delay and duration of the transition, but does not allow for adjusting styles. So we are going to have to target the elements directly with Javascript to change their opacity while they are moving. Because the transitioning Images stop and start off screen, the user will be unaware.

// src/components/Carousel.svelte

...

  const rotateLeft = e => {
    const transitioningImage = images[images.length - 1]
    document.getElementById(transitioningImage.id).style.opacity = 0;
    images = [images[images.length -1],...images.slice(0, images.length - 1)]
    document.getElementById(transitioningImage.id).style.opacity = 1;
  }

  const rotateRight = e => {
    const transitioningImage = images[0]
    document.getElementById(transitioningImage.id).style.opacity = 0;
    images = [...images.slice(1, images.length), images[0]]
    document.getElementById(transitioningImage.id).style.opacity = 1;
}
  ...

You will notice this doesnt work... or does it? In fact, it does, but the change in opacity, the trigger for the animation, and the change of opacity back to visible all occur before the movement is complete. So we need to set a timeout to prevent the image from become visible until the transition is complete. We can do this with setTimeout(<Function>, <TimeInMilliseconds>). This still isnt quite enough, because the duration of the animation and the timeout need to be synchronized. To accomplish this, we will expose a prop, and pass the prop to the timeout functions and the flip animation properties.

// src/components/Carousel.svelte
...
  export let transitionSpeed = 500;
...

  const rotateLeft = e => {
    const transitioningImage = images[images.length - 1]
    document.getElementById(transitioningImage.id).style.opacity = 0;
    images = [images[images.length -1],...images.slice(0, images.length - 1)]
    setTimeout(() => {document.getElementById(transitioningImage.id).style.opacity = 1}, transitionSpeed);
  }

  const rotateRight = e => {
    const transitioningImage = images[0]
    document.getElementById(transitioningImage.id).style.opacity = 0;
    images = [...images.slice(1, images.length), images[0]]
    setTimeout(() => {document.getElementById(transitioningImage.id).style.opacity = 1}, transitionSpeed);
}
  ...
  <img
    src={image.path}
    alt={image.id}
    id={image.id}
    style={`width: ${imageWidth}px; margin: 0 {imageSpacing}`}
    animate:flip={{duration: transitionSpeed}}
  />
  ...

Cool! now we have fully functioning Carousel.

Lets add a little style

To give the appearance of images fading into and out of the carousel we will add a mask to the carousel-images container:

// src/components/Carousel.svelte

...

<style>
  #carousel-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }
  #carousel-images {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    -webkit-mask: linear-gradient(to right,transparent,black 40%,black 60%,transparent);
    mask: linear-gradient(to right, transparent, black 40%, black 60%, transparent);
  }
</style>

As a side note, you may notice that the images are not centered. This is because there is an even number of images. To overcome this... only pass in an odd number of images.

Svelte slots and styling the controls

The pattern for allowing customizable controls I used directin from beyonk's svelte-carousel.

First lets style and position the button elements of the component so they are centered on the carousel. Note, this is why we gave the carousel-container a position of 'relative' earlier in the tutorial.

// src/components/Carousel.svelte

...

button {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 display: flex;
 align-items: center;
 justify-content: center;
 background: transparent;
 border: none;
}

button:focus {
 outline: auto;
}

#left {
  left: 10px;
}

#right {
  right: 10px;
}
</style>

Slots

Svelte slots allow child elements to be passed to a component. All elements passed as children will be rendered in the <slot></slot> tags inside the component. Anything placed inside the slot tags in the component will be a default fallback if no children are passed in to the Component. Also, we can arrange children with named slots. We can do this by giving the child element a slot attribute where we identify the name of the targeted slot, and then give the targeted slot the name attribute to identify it by.

// src/components/Carousel.svelte

...
  <button on:click={rotateLeft}>
    <slot name="left-control">Left</slot>
  </button>
  <button on:click={rotateRight}
    <slot name="right-control">Right</slot>
  </button>
...

Right now,, nothing will have changed, because we havent passed any children to the component in App.svelte. For the sake of demonstration, we can install svelte-feather-icons (or any other icon provider) and pass them as children. In this case we cannot give the Icon components slot props, so we will wrap them in span tags that will hold the slot attribute.

// src/App.svelte

<script>
    import Carousel from './components/Carousel.svelte';
    import { ChevronLeftIcon, ChevronRightIcon } from 'svelte-feather-icons';

    const images = [
        {path: 'images/image1.jpg', id: 'image1'},
        {path: 'images/image2.jpg', id: 'image2'},
        {path: 'images/image3.jpg', id: 'image3'},
        {path: 'images/image4.jpg', id: 'image4'},
        {path: 'images/image5.jpg', id: 'image5'},
        // {path: 'images/image6.jpg', id: 'image6'},
    ]
</script>


<Carousel
    {images}
    imageWidth={250}
    imageSpacing={15}
>
  <span slot="left-control"><ChevronLeftIcon size="20" /></span>
  <span slot="right-control"><ChevronRightIcon size="20" /></span>
</Carousel>

<style>

</style>

Conclusion

We now have a full functioning and styled carousel. I have pasted the entirety of the code below. You will notice I changed the default controls with SVGs which have some customizable styling which is exposed through component props. Check out the repo at https://github.com/bmw2621/svelte-carousel. Thanks for reading, and check back for the next article which will add autoplay to the carousel.

Edit: I have posted a continuation at Building an Image Carousel with Svelte - Part 2 (Adding Features)

// src/somponents/Carousel.svelte

<script>
  import { flip } from 'svelte/animate';

  export let images;
  export let imageWidth = 300;
  export let imageSpacing = 20;
  export let speed = 500;
  export let controlColor= '#444';
  export let controlScale = '0.5';


  const rotateLeft = e => {
    const transitioningImage = images[images.length - 1]
    document.getElementById(transitioningImage.id).style.opacity = 0;
    images = [images[images.length -1],...images.slice(0, images.length - 1)]
    setTimeout(() => (document.getElementById(transitioningImage.id).style.opacity = 1), speed);
  }

  const rotateRight = e => {
    const transitioningImage = images[0]
    document.getElementById(transitioningImage.id).style.opacity = 0;
    images = [...images.slice(1, images.length), images[0]]
    setTimeout(() => (document.getElementById(transitioningImage.id).style.opacity = 1), speed);
  }
</script>

<div id="carousel-container">
  <div id="carousel-images">
    {#each images as image (image.id)}
      <img
        src={image.path}
        alt={image.id}
        id={image.id}
        style={`width:${imageWidth}px; margin: 0 ${imageSpacing}px;`}
        animate:flip={{duration: speed}}/>
    {/each}
  </div>
  <button id="left" on:click={rotateLeft}>
    <slot name="left-control">
      <svg width="39px" height="110px" id="svg8" transform={`scale(${controlScale})`}>
        <g id="layer1" transform="translate(-65.605611,-95.36949)">
          <path
          style={`fill:none;stroke:${controlColor};stroke-width:9.865;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1`}
          d="m 99.785711,100.30199 -23.346628,37.07648 c -7.853858,12.81098 -7.88205,12.81098 0,24.78902 l 23.346628,37.94647"
          id="path1412" />
        </g>
      </svg>
    </slot>
  </button>
  <button id="right" on:click={rotateRight}>
    <slot name="right-control">
      <svg width="39px" height="110px" id="svg8" transform={`rotate(180) scale(${controlScale})`}>
        <g id="layer1" transform="translate(-65.605611,-95.36949)">
          <path
          style={`fill:none;stroke:${controlColor};stroke-width:9.865;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1`}
          d="m 99.785711,100.30199 -23.346628,37.07648 c -7.853858,12.81098 -7.88205,12.81098 0,24.78902 l 23.346628,37.94647"
          id="path1412" />
        </g>
      </svg>
    </slot>
</div>

<style>
  #carousel-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }
  #carousel-images {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    -webkit-mask: linear-gradient(
      to right,
      transparent,
      black 40%,
      black 60%,
      transparent
    );
    mask: linear-gradient(
      to right,
      transparent,
      black 40%,
      black 60%,
      transparent
    );
  }

  button {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: none;
 }

 button:focus {
   outline: auto;
 }

  #left {
    left: 10px;
  }

  #right {
    right: 10px;
  }

</style>

Game of Life as a React Component using Canvas

Ben Winchester — Sat, 23 May 2020 12:42:56 +0000

While redesigning my portfolio site I thought it would be cool to integrate the classic programming simulation, Game of Life by John Conway. It turns out using canvas with React is a bit of a challenge for beginners, and required putting together multiple online resources I found. Here's how to do it.

Conway's Game of Life

The first step is pretty straight forward in regards to programming a canvas to display the Game of Life. For this I followed Adrian Henry's tutorial. I won't rehash the walkthrough here, but I encourage you to watch him and clone the final code from here.

This is what we will convert into a header element.

Let's just drop it into the Component render method!

That isn't possible.

The VanillaJS code requires the canvas element to already be mounted on the DOM so it can be referenced in the first line of the code. Whenever we want something to occur after the element has been mounted, we have to use the useEffect hook (when using functional components). So lets try placing the entire original script inside component's useEffect hook...

Remove logic from the `useEffect`

This turned out to be very challenging, because we will have to refactor our functions to take dependent variables. Lets start with moving the buildGrid() function out of the component completely, and add the COLS and ROWS as dependent parameters. Move the now buildGrid(COLS,ROWS) function above the GameOfLife component.

The same can be done with the nextGen(grid) function, but because it references elements on the DOM, it must remain in the component, so we can move it out of the useEffect hook, and add the requisite COLS and ROWS parameters like so: nextGen(grid, COLS, ROWS)

Noting has changed on the view yet but we have cleaned up out useEffect hook to make room for the next step: making the canvas and pixel resolution responsive.

Make it fill the width of the screen, and make it responsive

For this section, my primary source was Pete Corey's tutorial.

First thing we need to introduce is the useRef hook to allow us to interact with the canvas. And we will create the getPixelRatio function above the component definition:

const getPixelRatio = context => {
    var backingStore =
    context.backingStorePixelRatio ||
    context.webkitBackingStorePixelRatio ||
    context.mozBackingStorePixelRatio ||
    context.msBackingStorePixelRatio ||
    context.oBackingStorePixelRatio ||
    context.backingStorePixelRatio ||
    1;

    return (window.devicePixelRatio || 1) / backingStore;
};

The getPixelRatio function will return the aspect ratio of the viewport to avoid stretching the pixels and help us keep square colonies in our Game of Life simulation.

Now we can replace

canvas.width = 800;
canvas.height = 800;

with

let ratio = getPixelRatio(ctx);
    let width = getComputedStyle(canvas)
        .getPropertyValue('width')
        .slice(0, -2);
    let height = getComputedStyle(canvas)
        .getPropertyValue('height')
        .slice(0, -2);

    canvas.width = width * ratio;
    canvas.height = height * ratio;
    canvas.style.width = `100%`;
    canvas.style.height = `100%`;

Because of the restricted size of the embedded codepen, I changed the value of resolution to 1 to give a larger field of colonies.

Slow it down!

If you are familiar with Conway's Game of Life, you're aware that a stable state is reach fairly quickly, so lets slow down the rate at which the animation refreshes so it lasts longer. An additional benefit, is it slows down the rate in which images are flashing on the screen for accessibility purposes. To accomplish this, we will need to wrap the requestAnimationFrame(update) call inside the update function in a setTimeout function and give it a 2 second refresh rate, like so: setTimeout(() => requestAnimationFram(update), 2000).

Give it a little style

Now lets add a little color. This must be done in the javascript where the canvas is being drawn. I will add variables to hold the hex values for the fieldColor and colonyColor and change the "black" and "white" options, which are contingent on the grid values, to reference these variables.

Now I want to add a slant to the bottom on the header. Typically, we would use CSS transform's skew function, but that would ruin the grid nature of the colonies. So I applied a simple clip-path to the CSS.

You can see the full application on my portfolio page or view the repo on github.

Introduction & Design

Ben Winchester — Tue, 14 Jan 2020 23:55:47 +0000

As a junior developer, there is a big leap between learning the many components of an application and putting them all together. The standard advice is to find a project and start building in order to figure it out, and learn as you go. Naturally, the following question is: what project? The standard response is to find something meaningful to you because it doesn't much matter. The most important constraints this advice is that is must solve a problem and it should have data persistence, otherwise you are simply making toy scripts which are not sufficiently complex. For me, I struggled to find a project to work on, because I didn't have much interest in recreating something that already existed such as a social media site clone.

Recently I came across a project I could sink my teeth into, and this series of posts is intended to document my process, for better or worse, as I work through the problems, make decisions, implement technologies, and build an application. I have no doubt the final product or all my decisions will not be perfect (and I look forward feedback in the comments.) Hopefully my process, the tools I use, and the feedback I receive will be of value to other beginners in the same boat, who are trying to figure out how to put together all the pieces they are learning.

Finding the project

A friend of mine is a consultant who has developed a particular model for helping clients track cybersecurity compliance and generate associated reports.

Note: Out of respect for the friend's intellectual property I will always strive to be as vague as possible on the specifics. The model contractually belongs to him, rather than his firm, but my goal is to respect his right to manage its access as he sees fit. Please be patient with any redactions I add to screenshots in this pursuit.

His effort naturally started with an Excel spreadsheet, which has grown to be very large and cumbersome, and suffers from version control issues as it has many contributors which is handled by a typical save with new title and email practice. He is very skilled with Visual Basic in Excel and has maxed out its capabilities. This told me the project was ripe for converting to an application which will allow multiple users to contribute, allow administration to view aggregate data visualizations of progress, and produce reports at will.

Initial Design and tools

User interface

I am very concerned with usability and visual aesthetics, so I have a tendency to consider what I want the application to look like from the user perspective first. The first tool to discuss is a front end design and prototyping tool. The industry leaders are Adobe XD and Sketch. I am working independently so I use a freemium service called Figma which allows me to make wireframe mockups and link them together in a prototype.

Figma is a visual design tool which allows you to layout wireframe mockups and link them to produce prototypes

Models

Because the models already exist as excel tables I chose to stick with a relational database to store data. I will go through the details of this decision in a future post. For the sake of discussing planning, I want to introduce how I planned to represent the data model. The tool I found to be very useful is dbdiagram.io. The tool uses a very simple syntax to create a visual representation of data tables, their fields, and how they relate to each other. The application has the added benefit of providing an export tool for database initialization in MySQL, PostgreSQL, and image files of the visualization.

DBDiagram allows laying out tables and describing data relationships in a visual WYSIWYG interface

Environments and Development Tools

Now comes the decisions on what languages, frameworks, and tools to use. Again, I will expand on the decisions I have/will made/make in future posts as well as some other possibilities. For the time being I intend to work in a JavaScript environment. The frontend will be React, the backend routing will be handled by Express, and the interactions between the UI and the models will be handled using GraphQL rather than REST APIs. Further explanation of alternatives will be discussed in the future.

My editor of choice it Atom, but VSCode is a great tool as well. I will discuss where I have used python in the database management post, for which I used PyCharm Community Edition, for ease of environment management (this is specific to my practice, explanations will come).

Conclusion

This project will undoubtedly being a great learning experience and I hope my process, tools, frustrations, hacks, and misadventures prove to be useful to others who are also trying to fit together all the pieces in modern web development. The next post will discuss database selection, management, and initialization.

Learning React

Ben Winchester — Mon, 13 Jan 2020 04:37:09 +0000

As I continue learning JavaScript and web development, learning to apply the fundamentals of HTML, JavaScript, and CSS within a framework/library is the next step. This post I describes the benefit of using a framework or library such as React to build a user interface and how React accomplishes it.

Advantage of using a framework/library over Vanilla JS

The simple answer to why frameworks and libraries for front-end development are used are the same as using a library, it saves time by building on the work contributed by others, it abstracts away a lot of technical work that some my find to be minutia, and having a documented/standardized means of doing something can make coordinating a team much easier. However, the popular front end tool such as React, Vue, Angular, and Riot have an additional benefit in that they are component based. Component based frameworks allow for greater, more concise code re-usability throughout an application. Any programmer is comfortable with using functions, and the concept of passing an input and getting a predictable output. Component apply the same pattern to visual elements, which the developer can build, then pass in data to get a predictable, yet flexible, visual output and maintain consistency across the application.

How does React use the Virtual DOM

React and Vue both use a concept called the virtual DOM to track what the actual DOM should look like based on the code, and render that to the browser's DOM. React maintains this link with the ReactDOM.render() method, passes a single, top-level component to a single div in the DOM. The top level component can contain other components, which contain other components, all which terminate with JSX. JSX is an HTML like syntax which the React library, ReactDOM.render() specifically, translates to HTML and inserts into the DOM.

Now that our DOM is virtually represented in JavaScript, we can make determinations on how to change the representation using programming logic, and ReactDOM.render() will continue to translate and update (or reconcile, which is the term used in the React documentation) the browsers DOM.

Conclusion

This post is intended to be a very high level look at what React is, how it accomplishes its task, and what some benefits are. All the benefits discussed can be, and are, debated at length. However, the prevalence of component frameworks is undeniable, and hopefully this serves to share why/how they are used.

DEV Community: Ben Winchester

Build an Image Carousel with Svelte - Part 2 (Adding Features)

Some notes from Part 1

Lets add some features

Adding autoplay capability

Custom Events and Dispatching from Child to Parent component

Make the controls disappear

Conclusion

Build an Image Carousel with Svelte

Background

Lets Build

Setting up a new Svelte Project

What's different about Svelte

Lets prep the template so we can make the Carousel

Carousel Component Setup

Props in svelte

Add Control Buttons - A little about Svelte reactivity model

Add animation

Cleanup carousel images div and flying images

Lets add a little style

Svelte slots and styling the controls

Slots

Conclusion

Game of Life as a React Component using Canvas

Conway's Game of Life

Let's just drop it into the Component render method!

Remove logic from the useEffect

Make it fill the width of the screen, and make it responsive

Slow it down!

Give it a little style

Introduction & Design

Finding the project

Initial Design and tools

User interface

Models

Environments and Development Tools

Conclusion

Learning React

Advantage of using a framework/library over Vanilla JS

How does React use the Virtual DOM

Conclusion

Remove logic from the `useEffect`