DEV Community: Paul Ryan

You don't know CSS

Paul Ryan — Wed, 15 Jul 2020 07:01:37 +0000

You don't know CSS..

And neither do I..

But...

Let's drop comments below with our favourite CSS gotchas!

The Power of `z-index` Video

Paul Ryan — Mon, 13 Jul 2020 04:05:56 +0000

I finally know the stack data structure.....

Paul Ryan — Sun, 05 Jul 2020 06:16:39 +0000

Conclusion

Any questions on the above, feel free to contact me on my socials! ❣️

💂‍♂️ Insta	👀 Twitter	💬 Github	💭 LinkedIn	💥 Youtube	📭 Website

Simple SVG drawing effect with `stroke-dasharray` & `stroke-dashoffset`

Paul Ryan — Sat, 04 Jul 2020 09:33:46 +0000

If you prefer video format you can head here.

Hey everyone, I hope you are having a great day!

Today I am going to show you how to do a simple SVG drawing effect with stroke-dasharray and stroke-dashoffset.

So take the following SVG path:



<svg width="400" height="100" viewBox="0 0 400 100">
  <path 
        d="m 0 0 h 300" 
        stroke="black" 
        pathLength="10"
        stroke-width="15"></path>
</svg>

Visually, that gives us:

So this has a stroke of black which is a continuous black line, we can split this up into dashes using stroke-dasharray. Our path has a pathLength of 10, if we set stroke-dasharray to 2, that means we will split our path into dashes of 2.

This is how the path will look.

So each dash has width of 2 and each gap has a width of 2 so 10/2 = 5.

If we wanted to start on a gap rather than dash, we can use the stroke-dashoffset attribute and set it to a value of 2.

Cool, setting the stroke-dashoffset to the same value as stroke-dasharray will offset the gap or dash.

Using this knowledge, we can create a drawing effect. To achieve this, the first thing we do is set stroke-dasharray to the same length of the path which is 10. Visually this will make no change, but we can use stroke-dashoffset to start on a gap, like above we simply set this to the same value of stroke-dasharray which is 10.



<svg width="400" height="100" viewBox="0 0 400 100">
  <path pathLength="10" d="m 0 0 h 300" stroke="black" stroke-width="15"></path>
</svg>



path {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
}

This will render a blank screen as we are starting on a gap that is the same length of our entire path.

Using some basic CSS, we can create a drawing animation, we simply want to animate the stroke-dashoffset from the value of 10 to the value of 0.



path {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  animation: draw 2s ease forwards;
}

@keyframes draw {
  from {
    stroke-dashoffset: 10;
  }

  to {
    stroke-dashoffset: 0;
  }
}

This gives us the following:

Nice!

Here is the Codepen you can play around with or fork.

Any questions on the above, feel free to contact me on my socials! ❣️

💂‍♂️ Insta	👀 Twitter	💬 Github	💭 LinkedIn	💥 Youtube	📭 Website

SVG Filters Spotlight Effect

Paul Ryan — Fri, 03 Jul 2020 02:53:39 +0000

SVG Filters - Why you so confusing?

Paul Ryan — Thu, 02 Jul 2020 11:05:16 +0000

This is originally posted on my blog. I am going to post the first section here and the rest can be found on my site. It takes quite some time to format my article to work here, I am doing my best!

It is no secret just how powerful SVG is, with wide support and a navigable document there is little we can’t do. SVG filter has been a concept that I never could wrap my head around but this past weekend I made it my mission to learn as much as I could.

This post will be broken up into two, the first part will focus on the theoretical side while the second part will delve into an example so we can put filters to use (on my site). A lot of my knowledge (if not all) came from the brilliant Sara Soueidan, so be sure to check out her work and articles.

This post presumes you have a basic understanding of SVG & CSS, once you have this you can understand everything discussed.

Support wise, SVG filters are pretty well supported. Bear in mind that the filter may be applied differently across different browsers.

CSS Filters

I am sure a lot of you out there reading this post have used a CSS filter in some sort of capacity. Funnily enough, CSS filters actually come from SVG - they are essentially a less powerful version.

For those of who you haven’t used CSS filters before they basically work like this.

Take the above image, we can apply a filter on this image called blur which will essentially just blur the image.

img {
  filter: blur(5px)
}

We could also apply a grayscale to this image.

img {
  filter: grayscale(100%)
}

There is no doubt that CSS filters are easier to use than SVG, but they only offer a fraction of the power so let’s now get into the meat of this post which is SVG Filter.

SVG Filter

Now that we know what a CSS filter is, we can focus on the SVG filter. Above, we used the blur function, in SVG they are not called functions, rather they are called primitives. This was initially quite confusing to me but it will start making more sense as we delve into using some primitives.

“SVG filters are capable of creating Photoshop-grade effects in the browser” - Sara Soueidan

There are currently 16 primitives that we can use, we will use some in this article but I like to use them as I need them rather than try to learn them all at once and have a panic attack! 🤯

The image we will use for our example is the Paul Ryan Codes logo (vain much?)

Using that image, we can have a look at the core syntax for an SVG filter:

<svg width="500" height="500">
  <filter id="paulsFilter">
    <!-- primitives live in here -->
  </filter>

  <image xlink:href="https://assets.codepen.io/1464352/profileimage.png"    width="100%" 
         height="100%" x="0" y="0" 
         filter="url(#paulsFilter)"></image>
</svg>

So as you can see the syntax isn’t too alarming, the main thing to note is we gave our filter an id of paulsFilter and on our image we set the filter attribute equal to url(#paulsFilter).

This will give us a blank screen as we have no primitives in our filter.

We can now use our first primitive which is feFlood.

The attributes we are going to use from feFlood are:

flood-color - we can give this a color to flood our image with
flood-opacity - the opacity of our flood
result - this is the name we are going to give the output of our primitive

So putting this all together we have:

<svg width="500" height="500">
  <filter id="paulsFilter">
    <feFlood flood-color="blue" flood-opacity="1" result="FLOOD" />
  </filter>

  <image xlink:href="https://assets.codepen.io/1464352/profileimage.png" 
         width="100%" 
         height="100%" 
         x="0" 
         y="0" 
         filter="url(#paulsFilter)"></image>

This will give us the following:

We can use the feBlend primitive to blend our image in. Here are the attributes we will use:

in - this is what we will pass into the blend, in our case, this is SourceImage i.e. the image we are using
in2 - we will also pass in our primitive FLOOD
mode - there are various modes you can use but we will use color-burn
result - not necessary but always good practice to have a name for the output

So putting this all together our final code will look like the following:

<svg width="500" height="500">
  <filter id="paulsFilter">
    <feFlood flood-color="blue" 
             flood-opacity="1" 
             result="FLOOD" />
    <feBlend in="SourceGraphic" 
             in2="FLOOD" 
             mode="color-burn" 
             result="BLEND" />
  </filter>

  <image xlink:href="https://assets.codepen.io/1464352/profileimage.png" 
         width="100%" 
         height="100%" 
         x="0" 
         y="0" 
         filter="url(#paulsFilter)"></image>
</svg>

Our final image after the filter is applied:

This may seem like a bit of a silly example, but it gives us the foundation of how we can chain filters together to create a cool output.

Complete Codepen can be found here.

Conclusion

You can head over to my site for the full post where we will create a spotlight effect building on the above knowledge.

Any questions on the above, feel free to contact me on my socials! ❣️

💂‍♂️ Insta	👀 Twitter	💬 Github	💭 LinkedIn	💥 Youtube	📭 Website

Harry Potter - Golden Snitch Animation

Paul Ryan — Mon, 20 Apr 2020 02:33:07 +0000

Hey guys,

I created a cool(ish) animation in Codepen which I have shared below. If you would like me to go into detail on how I made it then just leave a comment.

Feel free to use it whatever way you want to!

Conclusion

Any questions on the above, feel free to contact me on my socials! ❣️

💂‍♂️ Insta	👀 Twitter	💬 Github	💭 LinkedIn	💥 Youtube	📭 Website

Event Delegation - What is it and why should I care?

Paul Ryan — Fri, 17 Apr 2020 02:10:37 +0000

It is very common in an interview scenario to be asked to explain event delegation, showing an understanding makes you a much stronger candidate. Thankfully, it is not too complicated.

Event Listeners

The first area we must venture into is getting an understanding of event listeners. Event Listeners are essentially something that listens for an event. Some very common examples are:

keydown
click
load

Here is some example code that adds an event listener to a div that has an id of myDiv

    // event target
    const myDiv = document.querySelector('#myDiv')
    // adding the listener
    myDiv.addEventListener('click', () => { alert("oh my god i've been clicked") })

So when our div gets clicked we fire off the alert function.

One important thing to note is that event listeners are added on page load, so in the above example when the page is loaded our javascript is executed and tries to find the element with the id of myDiv.

That all sounds great but what if that element is not available on page load? Well, then it’s time for event delegation!

Event Delegation

So imagine we have a ul and on the click of a button, a li is added to our ul. When a li is clicked, we want to remove it from our ul, the problem is we do not have access to each li on page load as they simply haven’t been added. Click here for a Codepen example that will demonstrate this, visually we can also imagine it like this:

What we want to do is find our if a li in our list has been clicked.

The html for the above is the following:

    <div class="container">
      <ul class="my-list">

      </ul>
      <button onclick="addItem()">Add Item</button>
    </div>

So when the page is loaded we have access to the my-list class so that is what we should use as our initial target.

    const myList = document.querySelector('.my-list');
    myList.addEventListener("click", removeItem);
    function removeItem(e) {
      // e.target is the element which dispatched the event
      console.log(e.target);
      // e.currentTarget is the element which the event listener
      // is added to
      console.log(e.currentTarget);
    }

So as commented in the above, when a click happens we get the e object, this has the property target which is the element that was clicked i.e. the li and also has the currentTarget property which is where our event listener has been added on page load i.e. our ul element.

Since we want to remove an li, we will use the target property. To remove the li we can do the following:

    function removeItem(e) {
      event.target.matches("li") ? e.target.parentNode.removeChild(e.target) : null;
    }

We first check that element clicked is indeed a li and if it is we remove that element!

That is what event delegation is all about, but we should also discuss event bubbling a little too.

Event bubbling is quite simple, it means that when we click on a DOM element that this event will be bubbled the whole way up the DOM. So in our case when we click on the li, this is bubbled up to our ul then to our div and so on.

You can stop this behavior by using:

    e.stopPropagation()

In most cases, you won’t need to use it but it is great to know.

Why event bother using Event Delegation?

So we don’t have to use event delegation, we could have added an event listener to each li when it is added but this will add lots of extra code and will increase the number of event listeners on your page by an n amount (n being the number of items added). This will increase the overall memory on your page which will make performance suffer, so it is a very bad idea. In short, event delegation is great!

Now go ahead and smash that interview question!

Nail your interview by learning Closure (backpack analogy)!

Paul Ryan — Thu, 16 Apr 2020 04:44:43 +0000

'Can you explain Closure?'

Be prepared to hear this in almost all technical JavaScript interviews, it is one of the core questions they ask you in order to see how well you know JavaScript. You probably use closure daily when writing JavaScript but the majority of the time this is unknown to you.

To get into closure, let's look at a regular function:

     function helloWorld() {
          return "hello world"
     }

     const myFunction = helloWorld;
     myFunction()

This may not be the most inspirational code but if we delve a little bit deeper there is actually quite a bit going on.

     // add the label helloWorld into our global memory with the value of the function
     function helloWorld() {
          return "hello world"
     }
     // now add the label myFunction into our global memory 
     // with the value of the helloWorld label
     const myFunction = helloWorld;
     // call myFunction which will call the helloWorld function and create a new 
    //  execution context for helloWorld which will end when the return statement is met
     myFunction()

If you do not know what an execution context is then head here where I go in-depth.

The most important thing to note is that when we call a function, we create a new execution context for that function which we push onto the call stack then when we meet a return or the last } we pop if from the call stack.

Take the example below where the addOne function is removed from the call stack when it hits a return statement.

With an understanding of the call stack & execution context in place, we can now start with closure.

Let's take the classic counter example.

     function outer() {
       let counter = 0;
       function incrementCounter() {
         return counter++;
       }

       return incrementCounter;
     }

     const myCoolFunction = outer();
     console.log(myCoolFunction()) // 0
     console.log(myCoolFunction()) // 1
     console.log(myCoolFunction()) // 2
     console.log(myCoolFunction()) // 3

This kinda breaks what we were saying above, how is the counter value being persisted on each function call? We create a new execution context for each call so should this value not be essentially reset on each function call?

The magic is happening on this line:

const myCoolFunction = outer();

myCoolFunction is essentially getting two values here - the incrementCounter function and also the counter variable.

Just imagine that the incrementCounter function has a backpack with the values around it, so myCoolFunction is assigned the incrementCounter function and also it's backpack (thank you Will Sentence for this analogy).

Here is a beautiful image of that:

There are few different names rather than backpack which sound a lot more fancy which are:

Persistent Lexical Scope Referenced Data (rolls off the tongue?)
Closed Over 'Variable Environment'

The above definitions will make you sound super smart in an interview, but for understanding closure just think of the backpack!

To go further in-depth with closure, here is a great article that also uses the backpack analogy.

Conclusion

Any questions on the above, feel free to contact me on my socials! ❣️

💂‍♂️ Insta	👀 Twitter	💬 Github	💭 LinkedIn	💥 Youtube	📭 Website

How to draw a heart ♥😻❤❣

Paul Ryan — Fri, 14 Feb 2020 15:02:17 +0000

Let's go

Drawing an SVG path couldn't be easier, especially with the pathLengthattribute. If you are supporting older browsers, click through to the link to see if your browser is supported.

So let's get an SVG path that we can draw.

Check out the Codepen here which has the SVG included.

The first trick is to add the pathLength property to our path.

<path ..... pathLength="1" />

Doing this makes the animation much easier as we now know the length (i.e. 1). Before you had to calculate the length which was a massive pain!

The next thing we need to do is use stroke-dasharray and stroke-dashoffset. We will set both to 1, this essentially makes our SVG disappear so we can draw it. I don't want to delve into these but you can read about stroke-dashoffset here and stroke-dasharray here. Just know you can set pathLength on any path that you want to draw so once you set it to 1 you can set stroke-dasharray and stroke-dashoffset to 1 everytime!! 😇

So in the CSS panel add the following:

svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

So the heart has disappeared, that is what we want as we are about to draw it back.

We need to create an animation that will animate stroke-dashoffset back to 0.

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

One last thing, just add the draw animation to our path.

svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 5s linear alternate infinite;
}

Our animation is infinite and also will alternate so it will draw back and forth.

Believe it or not but we are now done. You should have the following:

Complete pen is here.

Conclusion

Any questions on the above, feel free to contact me on my socials!

💂‍♂️ Insta	👀 Twitter	💬 Github	💭 LinkedIn	💥 Youtube	📭 Website

🎁🎁 Thread of Execution Visually Explained 🎁🎁

Paul Ryan — Thu, 13 Feb 2020 22:41:00 +0000

This is the first in a series of articles on looking at how JavaScript works. I will try to make it interesting and not bore you as I know this stuff can sometimes get really boring!

Imagine being a pilot and now knowing how a plane flys, every day we run our JavaScript code but do we know how it runs?

Let's talk about the Thread of Execution

Ok, let's bang out some simple code.

The code above is nothing to get excited about but will serve us well to demonstrate the thread of execution.

When our JavaScript is executed, it steps through line by line (single-threaded), so in our code above the first line is:

The next question is, what happens when it steps onto this line? Where does num get stored?

num gets stored in the global memory/execution context, visually it looks like this:

So then we move onto the next line.

It is important to note that we are declaring a function here and not executing one. Therefore, we store the function name with the value of the entire function.

The - f -above is just shorthand for the entire function.

Now we move onto the next line, some of you may think the next line is the body of the function but since we are only declaring the function and not running it, the next line to run is:

Similar to above, we send the label output to memory but with no value yet as we must run our function.

Now comes the fun part! Actually executing our addOne function.

When a function is executed, it is added to the call stack. The call stack always has global/main at the bottom, we now will push on addOne(3).

We also create an execution context for that function. Any variable declared in the function will be added to the function's execution context.

The first variables that will be added are the function's arguments, in our case x.

Now we move onto the next line and store result in the execution context.

On the next line, we hit the return keyword which marks the end of a function. We pop addOne() from the call stack and give output a value which is 4.

So first pop addOne from the call stack.

Now our last step, assigning the value 4 to the output variable.

Donzo

So that is it! I hope this demonstrates how our code is stepped through. This was a time-consuming article due to creating all the gifs so let me know if you like them or not. I know I only touched off the call stack and execution context in this article but we will be delving deeper into them in the future.

Conclusion

Any questions on the above, feel free to contact me on my socials! ❣️

💂‍♂️ Insta	👀 Twitter	💬 Github	💭 LinkedIn	💥 Youtube	📭 Website

The :focus-within CSS pseudo-class

Paul Ryan — Tue, 11 Feb 2020 14:01:25 +0000

Recently, while writing an article for CSS Tricks on using skip links I found myself needing to transition a div into view when an element inside the div has focus (when a keyboard user tabs onto it).

Take this Codepen that has a div which is hidden that contains an a element. We want to transition this div into view when the a gets focus.

Initially, I was going to write JavaScript to do this, but then I found out about the focus-within pseudo-class.

So, to transition our div into view all we need to do is write the following:

.hidden:focus-within {
  transform: translateY(0%);
}

That will now give us the following when tabbing our a into focus.

And voila! We have now achieved our goal.

I hope you learned something and it helps you out!

Complete pen.

EDIT

Sebastián Veggiani was kind enough to point out that this isn't fully supported across all browsers.

A polyfill can be found here.

Make sure to follow me on Instagram where I share tips, tricks and current stuff I am working on.