DEV Community: ljc-dev

Introduction to GitFlow

ljc-dev — Mon, 18 Mar 2024 13:58:24 +0000

Working together on a project can get pretty chaotic. That's where GitFlow comes in 😎!

GitFlow is a simple set of branching and merging rules for better collaboration, less errors and code conflicts. It's easy to pick up and adapt to your own team's needs.

In GitFlow, the main branches are:

1. Main branch: production-ready code. This is where the working version of your project is stored.

2. Develop branch: created from the main branch, it is used for integration and testing of new features or improvements.

3. Feature branches: each new feature/change should be developed on a separate feature branch created from the develop branch, and then merged back into it when ready.

More complex projects might also include:

4. Release branches: created from the develop branch, they allow for final testing, bug fixes, without affecting ongoing development.

5. Hotfix branches: created from the main branch, to fix critical issues or bugs in production.

HowTo GitFlow branching:

Let's say I've created a new repo with a branch main.

1- create a develop branch and switch to it:

git checkout -b develop

2- push the develop branch to the remote repository (if needed):

git push -u origin develop

3- while in the develop branch, create a feature branch and switch to it:

git checkout -b feature/your-feature-name

4- push the feature branch to the remote repository (if needed):

git push -u origin feature/your-feature-name

⚠ Remember to send your feature branch PRs (pull requests) to the develop branch and not main, and develop branch PRs to the main branch (or a release branch).

Sometimes you might find develop or feature branches being X commits behind main. It happens when people forget to update the development branches after successfully merging PR(s) into main. The develop and feature branches should be kept up-to-date to:

reduce the chance of merge conflicts
detect integration issues early on
and for consistency 👍

So make sure to merge changes from the main branch into your develop and feature branches 😀!

Common Git branching commands:

get a list of all branches:

git branch

create a new branch:

git branch your-branch-name

switch to an existing branch:

git checkout your-branch-name

create a new branch and switch to it:

git checkout -b your-branch-name

delete a branch:

git branch -d your-branch-name

push a branch to a remote repository:

git push origin your-branch-name

cloning a specific branch from a remote repository:

git clone -b your-branch-name your-repository-url

Introduction to GSAP

ljc-dev — Wed, 22 Sep 2021 21:36:08 +0000

I've made this cover animation with GSAP a year ago as part of my 1st portfolio. It starts playing when the user scrolls to it.

(Github repo here)

A friend of mine is looking to start playing with GSAP so I've put together this short introduction to GSAP animations 🙃.

Introduction to GSAP

First of all, why GSAP? I've played with a lot of other animation libraries in the past like Framer motion, react-spring, etc. This one stood out the most because of its ease of use and the range of animations it covers:

The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery).

Now, I'm not saying it's the best - I haven't tested Three.js or Anime.js - but I promise it's worth getting to know it through this little guide. (Not gonna lie, it's pretty awesome 😄.)

Setting up GSAP

To use GSAP, download their zip file or copy their CDN/npm code at https://greensock.com/docs/v3/Installation or test it in Codepen with their GSAP Starter Template.

Extra Plugins are free. Club Plugins aren't, but you can still test them out in Codepen.

I'll touch on how to add and use a plugin in a moment.

Initialize GSAP

Actually, there's nothing to initialize 😂. The GSAP script exposes a gsap variable which we are going to use for all animations.

So let's start animating!

First animation

(Click on Rerun to repeat the animation)

All the js I needed to create this translation effect is this line:

gsap.to(".square", { duration: 1, x: 200 })

The to() method animates one or more elements from their current state to a new state.

The first parameter is the object(s) you are animating. It can be an object, an array of objects or a CSS selector. In this example its targets are all the elements with the class of square. To add more targets in a selector, separate them with a comma:

gsap.to(".square, .rect", { duration: 1, x: 200 })

The 2nd parameter takes an object of property/value pairs that you're animating. You can animate all the CSS properties from margins, paddings to font-size, line-height.

In this example I'm animating x: 200 which is a GSAP shorthand for translateX: 200. And 200 means 200px. You can also use the other CSS units like x: "100%", x: "20em" , x: "20rem" , etc.

Warning: unlike CSS, Javascript doesn't allow compound name. You'll have to use camel case instead. For example: fontSize, backgroundColor and translateX .

duration is a special GSAP property. It represents the duration of the animation (in seconds). Default: 0.5. There are other special properties like:

delay: Amount of delay before the animation should begin (in seconds).
ease: Controls the rate of change during the animation, giving it a specific feel. For example, "elastic" or "strong.inOut". See the Ease Visualizer for a list of all of the options. Default: "power1.out".
repeat: Number of times that the animation should repeat after its first iteration. -1 for infinite.

Check the list of all special properties here.
Note: GSAP call their animations tweens.

Animate on click

The code is self-explanatory. I've only moved the gsap line above inside a function that gets called on button click.

function animateOnClick(){
  gsap.to(".square", { duration: 1, x: 200 })
}

What if I wanted to animate from these values instead of to? Easy! Just replace to() with from().

function animateOnClick(){
  gsap.from(".square", { duration: 1, x: 200 })
}

And now the square goes from x: 200 to its default position.

What if you wanted to immediately set some properties without animation? Replace to() with set().

function animateOnClick(){
  gsap.set(".square", { x: 200 })
}

Noticed how I've removed duration? It wouldn't have broke the code if I left it but it would have been ignored either way.

set() is also useful for properties that have no animations like display, z-index, transform-origin:

gsap.set(".mySVG", { transformOrigin: "50% 50%"})

Adding a delay

How do we add a delay between animations?

For simple cases we can just add a delay to later animations like:

function animateOnClick(){
  gsap.to(".square", { duration: 1, x: 200})
  gsap.to(".circle", { duration: 1, x: 200, delay: 1})
}

But what if we were adding a dozen animations? Adding incremental delays everywhere would be a nightmare. Even if you were good at Maths, if you ever need to tweak one animation, you'll have to update all the later animations.

The solution is to use timelines. Timeline in GSAP is a sequencing tool for chaining animations.

Create a timeline with timeline():

const tl = gsap.timeline()

To use it we only need to replace gsap with the timeline variable:

const tl = gsap.timeline()
function animateOnClick(){
  tl.to(".square", { duration: 1, x: 200})
  tl.to(".circle", { duration: 1, x: 200})
}

I've removed the delay from the 2nd animation. We don't need it anymore because it'll start automatically after the first one.

Last but not least, there's a really cool way to add delay for animation: stagger.

Staggers make it easy to animate a group of objects with a small delay between the start of each object's animation:

function animateOnClick(){
    gsap.to(".square", { duration: 1, x: 200, stagger: 0.15})
}

Here's a better stagger animation by Beatrize Agustin.

Gotcha

Before GSAP v3.0, an animation (tween) was created with TweenMax , a timeline with TimelineMax. You might find a lot of examples (like the one above) with the old syntax. When in doubt, check the docs 👍.

Controlling the animation

GSAP packed some really neat and easy to use controls: play(), pause(), resume(), restart(), reverse().

Those controls can be used with a timeline or an instance of an animation.

GSAP's to() and from() returns an instance of the animation. We can save it in a variable and use it to control the animation.

(Example from GSAP)

If you've played with the blue square codepens above, you've probably noticed how the animations only played once. And clicking on the button didn't restart the animation. That can be fixed with:

const animation =   gsap.to(".square", { duration: 1, x: 200, paused: true})
function animateOnClick(){
    animation.restart()
}

Thanks to restart() the animation will repeat every time the button is clicked.

The special property paused: true prevent the animation from playing before we click on the button.

Same with timeline:

const tl = gsap.timeline()
tl.to(".square", { duration: 1, x: 200})
tl.to(".circle", { duration: 1, x: 200})
tl.pause()

function animateOnClick(){
    tl.restart()
}

If we only wanted the timeline animation to play once, we could use play() instead.

Using a plugin

To add a plugin, go to https://greensock.com/docs/v3/Installation , pick one and add the code to your project. The codepen GSAP Starter Template already includes all the plugins.

I'm going to go with the scrollTrigger which I've used for my portfolio. It's a very popular (free) plugin for scroll-based animations.

First we need to register the plugin to gsap:

gsap.registerPlugin(ScrollTrigger)

Then use the special property scrollTrigger like this:

gsap.to(".myImg", { duration: 1.5, x: 200, scrollTrigger: ".myImg" })

That's it for this intro to GSAP. To learn more about scrollTrigger watch the official tutorial here.

Thanks for reading! And I hope I've got you hooked. I've barely scratched the surface of what's possible with GSAP.

Now I'll leave you with one of the best GSAP animation from Jhey:

Try clicking on the switch 😉.

How to create a newsletter with Mailchimp (not affiliated/ad).

ljc-dev — Sun, 19 Sep 2021 22:06:31 +0000

For dev bloggers looking to grow an audience.

A newsletter is an indispensable communication tool for building relationships with your readers.

Mailchimp is one of the most popular newsletter tool out there - with a generous free tier of 2000 contacts and 10 000 emails/month. Yet new users can find it quite daunting to get started with because of all the services it offers. It's a swiss army knife like AWS. You can go from creating a simple survey, to building landing pages or even a full-fledge e-commerce store. They have docs, but you could easily spend the whole day jumping from one guide to another and googling for more information like how to prevent your home address from being revealed to your readers.

But worry not 😁! In this short guide, you'll learn everything you need to start your first newsletter.

Step 1: Create and Setup a Mailchimp account

Go to the Mailchimp Sign Up page and fill the form. No credits card or phone number required.
Go to your confirmation mail and click the activation link.

You might have to pass a robot test. We can now start setting up the account.

Choose Free plan ( 2000 contacts and 10 000 emails send / month ) and click Next
Fill in your first name, last name and a business name.

If you don't have a business name you can just use your name.

Fill in your address. Apparently it's required by anti-spam laws.
Pick No if you don't have any contacts to import.
Finish customizing.

Done!

Step 2: Create a Sign Up form

After the setup is complete, you are redirected to the dashboard.

Click on the audience icon which is the 3rd one on the left, right below the pencil icon, then Signup forms.

To add a subscription form to your website you only need to get familiar with the first two sections:

-> Form builder: where you personalize your sign up form ( and other forms like confirmation emails).

-> Embedded forms: where you get the embed code.

Click on Form builder.

The default template has way too many fields.
Click on each field you don't need and delete them.

In this example, I've removed every field other than the email address. We are now ready to embed the form.

Step 3: Get the embed code
Get back to the Signup form menu and choose Embedded forms.

By default Mailchimp has added its own CSS. If you are ok wih how it looks, copy this code.

If not, switched to the Unstyled tab and you'll get the CSS-free version.

I only need the email address and the subscribe button. So in the form options on the left, I've removed everything else.

Step 4: Add it to your website

I've pasted the code in Codepen to test it.

On submit, I'm redirected to a confirmation thank you page.

Everything works! The only problem is, my address is shown in the confirmation message 😱.

If you have a business address, you wouldn't mind it but I'm not that ok with showing my home address over the net 😅.

If you want to hide it too, go back to Form Builder (Audience > Signup forms).

At the top switch from Signup form to Confirmation thank you page.
Then add a redirect thank you page and save. Mailchimp will redirect there instead.

If you don't want to create a thank you page in your website you can just redirect to the home page.

OR if you don't add your own redirect page, you could edit the Mailchimp form and remove the bottom section.

*|HTML:LIST_ADDRESS_HTML|*

This is the part that Mailchimp use to add in the address.

I don't recommend this method because while the address is not visible here, if the user happens to click on the Mailchimp button manage your preferences, they'll land in a page where your address is exposed.

That's it!

Now you are ready to start blasting ads... I mean engaging with your precious community 😁.

Peace.

Top 5 design mistakes web developers make (and how to avoid them).

ljc-dev — Fri, 17 Sep 2021 19:40:47 +0000

For Web Developers at the start of their journey, curious about design.

Design is an art. As such there's no right or wrong 😤!

With that said, here are the most common beginner mistakes I see 😄.

1 - Too many colors.

This is by far the most common mistake new devs make. And I get it. Black and white is too dull for the enlightened CSS dev. Can't help enhancing the page with background-image and background-color.

So, what's wrong with this?

Well, it's like being hit by a wall of light 😆. Every color is fighting for the spotlight. There's no way the users can focus on the content.

This example is extreme. But my point is, colors are really eye-catching. If you use too many, you might confuse and even annoy your readers.

Solution:

Use less colors. Consider removing any colors that doesn't have any meaning behind it or decreasing their intensity.

Use colors that go well with each other.

I know it's super hard to pick colors at first. It was my number one struggle beside centering divs.

How to be better at picking colors?
- Just browse around for inspiration and bookmark the sites you like.
- Look for color palette websites. My favorite one is colorHunt.

2 - Gradients.

Nothing screams amateur more than a big awkward gradient.

What's wrong with gradients? Nothing. Only that they really grab the users' attention. So it's a big turn off if they are ugly or don't fit with the overall design.

There's a reason 99% of the pages you visit don't use gradients.

Now, I'm not saying gradients are bad and you shouldn't use them - I can almost hear the "booo, gatekeeper!" - but rather you might want to think twice about how your background: linear-gradient(...) button, that changes colors on hover and focus, fits with the rest of the page 😄.

Plus it's just hard to make a nice gradient.

Solution:

Trust the stats, use sparingly 🤭.
Use colorSpace to make better gradients.

3 - Not enough contrast difference between text and background.

Related to the 1st point. Because black and white text is too boring we get things like:

Solution:

Go easy with your newly found powers 😁.

In most cases, it's a good idea to keep the text black or white, especially for lenghty text. The world is not ready for multicolored text yet.
Add contrast between the background color and the text.

You can also check contrast with Accessible Colors. They'll tell you if your text would be hard to read for some and suggest alternative colors.
Add contrast to the text above the image.

Darken the image using filter or an overlay.

Or wrap the text in a semi-transparent/white container.

4 - Misalignments and spacing.

Everyone make those mistakes. Then as we build more, we become more mindful of how the elements we create should fit with other elements to create a more coherent design.

Solution:

Every element you add should be connected with another element or both sides of the page.
Keep the spacing consistent.
Keep building more projects. Seriously, there are no shortcuts.
Get feedback and/or compare with your favorite websites. (It would also make nice trainings to clone those websites.)

5 - Inconsistent headers

Avoid making headers too big compared to the text around them.

Also most of the time, one to two font families is enough:

An easily readable font for lengthy text.
And perhaps a more fancy font for headers.
Google Fonts is your friend👌.

That's it!

I hope you've found this short guide useful. If you are making any of the mistakes above, it's super fine. I've made them all 😂. Keep building 💪!!

Introduction to scroll animations with Intersection Observer

ljc-dev — Sat, 06 Feb 2021 09:14:47 +0000

The Intersection Observer (IO) detects when an element enters or leaves the viewport (or a parent element). It can be used to easily add animation on scroll without external libraries.

IO is asynchronous and much more performant than scroll listeners 👍.

Btw, if you learn better through videos, I highly suggest this youtube tutorial by Kewin Powell.

Here's a basic example of a fade in animation on scroll using the intersection observer.

In this example we fade in an image on scroll by adding the class fadeIn to it when it enters the viewport. This is the js:

const img = document.querySelector("img")

const callback = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("fadeIn")
    }
  })
}
const options = {}

const myObserver = new IntersectionObserver(callback, options)
myObserver.observe(img)

Easy, right? Let's get started 😁!

Creating an intersection observer

First, we create an intersection observer by calling its constructor and passing it a callback function and an optional options object.

const myObserver = new IntersectionObserver(callback, options)

The options

options is an object with 3 properties:

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0
}

In my fade in example, I've returned an empty object {} so the default options will apply. (Same with not return anything. )

root: default null. it's the viewport. Can be the document or an HTML element. If the root is null, defaults to document.
rootMargin: default 0px. defines the offsets of each side of the root's bounding box. In other words, positive values reduce the root bounding box and negative values increase it. Try scrolling the 3 boxes in this example.

Similar to CSS's margin syntax: "0px 5px 10px 15px" means top: 0px, right: 5px, bottom: 10px and left: 0px. Accepts px and % only. ⚠ 0 is not an accepted value, use 0px or 0% instead.

threshold: default 0. The threshold is a number between 0 and 1.0. 0 meaning as soon as one pixel is visible, the callback will be run. 1.0 means every pixel needs to be visible before calling the callback. (⚠ If you set the threshold to 1 and the element is bigger than the root, the number won't reach 1 because there will be some parts invisible at all time.)

The callback

The callback function takes a list of entries and an intersection observer as parameter.

const callback = (entries, observer) => {
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

The observer can be used to dynamically add or remove elements to observe. More on it below.

The focus is on the list of entries. There is one entry object for each observed element. It's common practice to use forEach to iterate.

Each entry has the following helpful properties:

entry.isIntersecting returns a boolean. True means the element is currently intersecting with the root.
entry.target returns the observed element.

I've used them both in the fadeIn animation:

const callback = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("fadeIn")
    }
  })
}

entry.boundingClientRect returns the bounds rectangle of the observed element.
entry.intersectionRatio returns a number between 0.0 and 1.0 which indicates how much of the observed element is actually visible within the root.

Etc. 😁 I've named the most important ones. You can find a list of all the entry properties here.

Select elements to be observed

To select an element to observe, we use the observe() method of our Intersection Observer.

myObserver.observe(img)

And that's it! Now myObserver will detect when img enters or leave the viewport and trigger the callback.

If you want to observe many elements, you have to add them one by one.

myObserver.observe(img1)
myObserver.observe(img2)
myObserver.observe(img3)

Or by giving them a common class and iterate with forEach:

const imgList = document.querySelectorAll(".imgToAnimate")

// setting your observer here

imgList.forEach(img => {
  myObserver.observe(img)
})

To stop observing, call unobserve() on the element:

myObserver.unobserve(img)

To stop observing every element at once call disconnect():

myObserver.disconnect()

You can also use those methods in the callback:

const callback = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("fadeIn")
      // stop observing this element
      observer.unobserve(entry.target)
    }
  })
}

Edit: It's a good practice to unobserve an element after we are done playing with it.

That's it!

I hope you've enjoyed this short intro on Intersection Observer 😃.

Source: MDN

Beside animating on scroll, it can be used to improve render speed and First Contentful Paint with lazy loading of scripts and media.

Beyond the basics

Here are a few examples of scroll animations with IO. I'll try to write a blog on each when I find some time 😅.

Enter & Leave Anim

Scroll To Top

Update current tab on scroll

And more to come 😁!

Review on AOS (animation on scroll) and Rellax (parallax)

ljc-dev — Sun, 17 Jan 2021 15:44:12 +0000

AOS is a very popular scroll animation library but it has some unexpected shortcomings with responsive design. Rellax is a rising star for parallax animations on desktop and mobile.

I wrote this short review after playing with both on a react website project.

AOS (Animate on Scroll)

AOS is an animation library that handles all the scroll logic.

Pros

Super easy to implement.

Just add a data attribute data-aos with an animation class like fade-up to have a fade up animation.


 html
<div data-aos="fade-up"></div>

AOS has a lot of built-in animations classes like fade-up, fade-in, zoom-in, flip-up.

We only need to initialize AOS in js and our div will fade up when it enters the viewport.


 js
 AOS.init();

You can add custom animations too:


 css
[data-aos="my-fade-up"] {
  transform: translate3d(0, 100px, 0);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="my-fade-up"].aos-animate {
  transform: translate3d(0, 0, 0);
    opacity: 1;
}

You can customize with data attributes to change the animation duration, delay, or add an anchor, offset, etc.

In my project, I used AOS for fade in and up animations:

Cons

No built-in responsive design support.

If you want an animation to play only on mobile, you need to create your own. Say you want the built-in class fade-up to play on desktop but not on mobile. Well you can't 😅. You need to write your own fade-up with media query like this:


 css
@media (min-width:1024px) {
  [data-aos="my-fade-up"] {
    transform: translate3d(0, 100px, 0);
    opacity: 0;
    transition-property: transform, opacity;
  }

  [data-aos="my-fade-up"].aos-animate {
    transform: translate3d(0, 0, 0);
      opacity: 1;
  }
}

Verdict on AOS

If you don't know - or don't want - to handle scroll logic and create animations yourself, AOS is a real time saver!

Not a great pick for users who need to disable or show different animations depending on screen sizes.

An alternative would be to create CSS animations ourselves and use the intersection observer API to listen to scroll. I've made an introduction post on it here.

There's a lightweight library built upon it with sal.js that I'm really looking forward to play with.

Rellax

Rellax is a parallax library that works in both desktop & mobile (parallax is famous for not working on mobile).

Pros

Super easy to implement

Add a class to an element: ``` html I’m slow and smooth


* And initialize rellax by referring to that class in js:

js
var rellax = new Rellax('.rellax');


With reactJS, you can use refs instead of classes.

* Customizable with data attributes. 

For example, the following code is used to play the parallax at different speed on mobile and pc:

html

I’m slow on mobile but fast on pc!


I've used it for the hero section of my site:

![hero section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4kun9qkjc87fmcmd3ya.gif)

### Cons

The only downside is that sometimes the animation can be *jumpy*.

![jumpy image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5r7xgo8kug84ase0dzmw.gif)

It gets much worse when trying to record it (My AMD processor is like an old i3 😄).

### Verdict on Rellax

If you tried parallax before, you know how hard it is to get parallax working on mobile. Rellax is a real time saver if you don't mind occasional jumps 😅.

An alternative would be to use gsap with [scrollTrigger plugin](https://greensock.com/scrolltrigger).

### Thanks for reading 😄✨!!

Please share what you agree & disagree on.

And tell me what js/react libraries you use the most 😍.

Introduction to CSS Animations

ljc-dev — Tue, 15 Sep 2020 20:18:52 +0000

So you want to animate with CSS? Great, let's get started 😄!

Most properties can be animated: width, color, opacity, transform, etc. In this tutorial, we are going to focus on transform.

With CSS transform we can rotate, scale, skew, or translate an html element.

Try hovering ( or clicking if you are on mobile) on the ninja images:

No animations yet. Here's the code:

<img class="ninja1" src="https://ljc-dev.github.io/fluffy-octo-adventure/nin.png">
<img class="ninja2" src="https://ljc-dev.github.io/fluffy-octo-adventure/nin.png">
<img class="ninja3" src="https://ljc-dev.github.io/fluffy-octo-adventure/nin.png">

img {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: contain;
}

.ninja1:hover {
  transform: translateY(50px);
}

.ninja2:hover {
  transform: scale(1.5);
}

.ninja3:hover {
  transform: rotate(45deg);
}

On hover:

translateY(50px) moves ninja1 50px down.
scale(1.5) makes ninja2 1.5 times bigger.
rotate(45deg) rotates ninja3 45deg clockwise.

Transitions

Now let's see how we can animate those transformations with CSS transitions.

A transition animates the changes of one or multiple properties.

We add a 2s transition on transform with the following:

.ninja1, .ninja2, .ninja3 {
  transition-property: transform;
  transition-duration: 2s;
}

transition-property takes the name of the property to add a transition to. We can add multiple properties with the keyword all or separating each property with commas like transition-property: transform, opacity
transition-duration sets the duration of the transition.

We can also use the shorthand transition:

.ninja1, .ninja2, .ninja3 {
  transition: transform 2s;
}

This code and the one above are the same.

We get an animation on hover:

We can change the feel of the transition with transition-timing-function.

Defaults to ease. Let's try ease-in-out.

And finally add a 1s delay with transition-delay.

.ninja1, .ninja2, .ninja3 {
  transition-property: transform;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  transition-delay: 1s;
}

.ninja1, .ninja2, .ninja3 {
  transition: transform 2s ease-in-out 1s;
}

If you hover again on the ninja images, you'll notice the animations start with 1s delay.

@keyframes animations

Another way to animate in CSS is with animation and @keyframes rules.

@keyframes rules define steps in an animation:

@keyframes moveDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(50px);
  }
}

Some like to replace 0% and 100% with their keywords equivalent from and to.

You can add as many keyframes as you want from 0 to 100% and animate as many properties as you want.

This weird animation would totally work 👍.

@keyframes weirdAnim {
  0% { transform: translateY(0); }
  11% { 
    width: 50px;
    background-color: green; 
    transform: rotate(90deg);
  }
  50% { height: 100px;}
  66% { transform: rotate(-720deg); }
  99% { 
    border-radius: 200px;
    background-color: black;
  }
  100% { 
    background-color: red;
  }
}

To run it we need to refer to its name with animation-name:

.ninja1{
  animation-name: weirdAnim;
}

And give it a duration with animation-duration:

.ninja1{
  animation-name: weirdAnim;
  animation-duration: 5s;
}

With the animation shorthand:

.ninja1{
  animation: weirdAnim 5s;
}

And we get this monstrosity:

(click on rerun to play the animation again)

Same with transitions we can change the feel of the animation with an
animation-timing-function. And add a delay with animation-delay.

.ninja1{
  animation-name: weirdAnim;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-delay: 1s;
}

Or:

.ninja1{
  animation: weirdAnim 5s ease 1s;
}

With keyframes animation, we can also decide how many times to run an animation with animation-iteration-count. Defaults to 1. Setting it to infinite makes it run indefinitely.

I've used infinite for the cover animation. Here is the code for my text animation:

There are two more advanced animation properties:

animation-direction:
- normal (default) starts from the 1st keyframe.
- reverse starts from the last keyframe.
- alternate starts from the 1st to last but if the animation is repeated the next animation will go from last to first.
- alternate-reverse is the same as alternate except it starts from the last keyframe. (example)
animation-fill-mode. It's set to forwards when we want to keep the animation state after it finished playing.

We are going to slide down the kpop girl image three times and hold the final position with forwards.

<img class="kpop" src="https://ljc-dev.github.io/fluffy-octo-adventure/kpop.png">

img {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: contain;
}

@keyframes slideDown {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(75%);
  }
}

.kpop{
  animation-name: slideDown;
  animation-duration: 3s;
  animation-iteration-count: 3;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

Or:

.kpop{
  animation: slideDown 3s 3 alternate forwards;
}

Notice how alternate is used to change the direction of the 2nd iteration. So instead of jumping back up and sliding down again, the animation runs in reverse and slides up.

And that's the end of this intro to transitions and keyframes animations.

One thing to be careful with shorthands is not to mix the properties order. You can omit the properties you won't change but don't put duration before the animation name for example.

Here's the correct properties order for transitions and animations:

transition: property duration timing-function delay;

animation: name duration timing-function delay iteration-count direction fill-mode;

Thanks for reading!!

I hope you've got a better idea on how to animate with CSS now.

I've posted below a small series of common CSS animations - some with js. If you have any questions, leave a comment or hit me up on socials 👌.

Happy coding 👋!

button transition opacity on hover & scale on active
spinner
progress bar anim
menu links bottom line on hover
scroll to top with fade up anim
hamburger slide down menu
hamburger slide right menu + overlay
post cover for those who are curious how I did it (not responsive)

Embedding an Instagram post in your website

ljc-dev — Sat, 12 Sep 2020 17:37:46 +0000

Introduction

Ever wanted to share an Instagram post to your website? It is remarkably easy. You only need to know basic html to share one. And it works for photos, videos, and even reels and IGTV!

Easy embedding to HTML.

First, go to a post and click on the options "...".

And choose Embed.

Then click on Copy Embed code.

Tada!

Now you have all you need to generate your post. Just paste it in your html and your post will be embedded into your website.

Note: The embed post will adapt itself to the place it has. You can't really style it. But you can put it inside a parent container like a div and control its width for example.

In this example I'm using codepen (online code editor) to paste the result and show the embedded post.

Optional

The above is enough to share your Instagram post in your own website.

Instagram also offers a dynamic embedding method. That way we can fetch the post from an instagram url and display it.

But first, you'll need a facebook developer account and setup an app there (coz facebook owns Insta 😁). Sign up for one at https://developers.facebook.com

Setup a Facebook app

We need a facebook app and add the oEmbed product that is going to generate the post to be embedded for us.

Once logged in, choose Create App:

Enter a name and email:

Go to the app dashboard and scroll down the products list to find oEmbed then click on Set Up to add it:

Go to Settings > Advanced and copy the app ID and the client token for later use.

Right next to the app ID is a switch that says In development.

Click to switch your app from development to live. Because oEmbed only work if the app is in live mode.

Embedding the post dynamically.

This tutorial follow the oEmbed guide. We are going to focus on how to implement this on a static website with client-side fetch and no backend. For full stack devs, click on the guide above to see how to fetch code from backend.

We need to use the fetch api which works asynchronously. A basic knowledge of async/await could help. But I'll try to explain how it works in easy terms 😄.

Step 1: fetch the instagram post

The url to be fetched look like this:



"https://graph.facebook.com/v8.0/instagram_oembed?url=" + POST_URL + 
"&omitscript=true&access_token=" + APP_ID + "|" + CLIENT_TOKEN

Create variables POST_URL, APP_ID , CLIENT_TOKEN.

POST_URL is the link to your post, just copy and paste the url bar of your post.
Paste in your app id and client token. (In production, save those in environment variables to prevent everyone from accessing it)
omitscript=true is needed to load the post ourselves to the DOM. I'll detail about it later on.

We are fetching with the built-in javascript fetch api.

Async/await is used to run asynchronous code. Fetch is asynchronous as the response from fetch will take time to arrive.
To use async/await, we need to place async before declaring a function and add await right before the asynchronous part like this:


 javascript
async function getPost() {
  var response = await fetch(
"https://graph.facebook.com/v8.0/instagram_oembed?url=" + 
POST_URL + "&omitscript=true&access_token=" + APP_ID + "|" + 
CLIENT_TOKEN)
}

The response from fetch comes as a JSON and need to be parsed into a javascript object with the json() method like this:


 javascript
response.json()

It's also asynchronous so we are adding await before it:


 javascript
await response.json()

And we are going to save it in a data variable


 javascript
async function getPost() {
  var response = await fetch(
"https://graph.facebook.com/v8.0/instagram_oembed?url=" + 
POST_URL + "&omitscript=true&access_token=" + APP_ID + "|" + 
CLIENT_TOKEN)
  var data = await response.json()
}

data holds the object we fetched from Instagram. It has the following form: ```javascript

{
"version": "1.0",
"author_name": "diegoquinteiro",
"provider_name": "Instagram",
"provider_url": "https://www.instagram.com/",
"width": 658,
"html": "<blockquote class=\"instagram-media\" data-instgrm-ca...",
"thumbnail_width": 640,
"thumbnail_height": 640
}


The `html` property holds the post to be embedded. 

* Save `html` in a variable named `myPostHtml`:
```javascript


var myPostHtml = data.html

Step 2: display the post

The hardest part is over. Now let's add it to the HTML.

Let's say we have a div with a class of post like



<div class="post"></div>

We will add myPostHtml to the div with a class of post with:



var post = document.querySelector(".post")
post.innerHTML = myPostHtml

And finally will be loading it.

Remember in the fetch request we added omitscript=true? The script won't run when you add it dynamically so we had to omit it.
You'll need to include a copy of that script in your website. Following the guide above, here's the link to the Instagram script.

Saved the file from this link in an embed.js file and add it as a script in your html code.

We can now used embed.js.
The load method we are going to call in our function is:



  instgrm.Embeds.process()

We add this at the end of our function. The final javascript code look like this:



var POST_URL = "my post url"
var APP_ID = "my app ID"
var CLIENT_TOKEN= "my client token"
var post = document.querySelector(".post")

async function getPost() {
  var response = await fetch(
"https://graph.facebook.com/v8.0/instagram_oembed?url=" + 
POST_URL + "&omitscript=true&access_token=" + APP_ID + "|" + 
CLIENT_TOKEN)
  var data = await response.json()
  var myPostHtml = data.html
  post.innerHTML = myPostHtml
  instgrm.Embeds.process()
}

By calling getPost() we will get an embed post to display where we want.

If we want to display a post from an url a user enters we just need to replace POST_URL inside fetch() with the value of the user's input url.

Example we added a text input with a class of inputUrl:



var POST_URL = "my post url"
var APP_ID = "my app ID"
var CLIENT_TOKEN= "my client token"
var post = document.querySelector(".post")
var inputUrl = document.querySelector(".inputUrl")

async function getPost() {
  // get value from user input
  var url = inputUrl.value
  var response = await fetch(
"https://graph.facebook.com/v8.0/instagram_oembed?url=" + 
url + "&omitscript=true&access_token=" + APP_ID + "|" + 
CLIENT_TOKEN)
  var data = await response.json()
  var myPostHtml = data.html
  post.innerHTML = myPostHtml
  instgrm.Embeds.process()
}

Improvements:

We would like to make it work with not just the post url from the address bar but also in case the user click on the copy link in the options:

As of now it won't work. Because at the end of the post url Instagram added a query like this:

"https://www.instagram.com/p/CFA8H3sob2_/?utm_source=ig_web_copy_link"

We need to remove the query part: "?utm_source=ig_web_copy_link" and only keep the post url.

We could use slice to remove it:



  var url = inputUrl.value
  //remove ? and the part after it
  var indexOfQuery = url.indexOf("?")
  if (indexOfQuery !== -1) {
    url = url.slice(0, indexOfQuery)
  }

Or regex:



  var url = inputUrl.value
  //remove ? and the part after it
  url = url.replace(/\?.*$/, "")

And that's it!!

Thanks for reading 😁!!

Scroll-to-top Button in vanilla JS (Beginners)

ljc-dev — Sun, 23 Aug 2020 09:27:04 +0000

Scroll to top button is a very common UX feature in websites. It's goal is to prevent annoying users forced to scroll back up - especially on mobile devices. In this short tutorial, we'll see how to implement one with css and pure (vanilla) javascript.

The simplest way to get a scroll to top button is to have an html element at the top and a link near the end of your page that calls it:



<div id="scroll-to-top"></div>
<!-- ... -->
<a href="#scroll-to-top"></a>

And this css to make the scroll smooth:



html {
  scroll-behavior: "smooth";
}

That's the easiest way to get a scroll to top (I've actually missed this on my original post as Loouis Low pointed out in the comments.)

Result here:

No javascript needed!

Scroll to top button with vanilla js

The previous example works fine but has a serious drawback because after clicking on that link, the anchor #scroll-to-top will show up in the url . We could call the anchor #home. But it'll still be in the url history when the user clicks back.

That's why I prefer to do it in js 😁. Plus js allows much more customization like:

Show button after the user has scrolled down x % of the page.
Animate entrance and leave.

The button

Let's just created a simple button with a class of scrollToTopBtn so we can refer to it in js.



<button class="scrollToTopBtn">TOP</button>

Here are a few CSS properties for the button:

position: fixed; gets it out of the flow of the page.
bottom: 50px; and right: 50px; places it at the bottom right corner.
z-index: 100; a large z-index keeps the button on top of every other elements.
display: none; is used to hide it at first.

Detect user scroll

we can detect user's scroll with a scroll event listener:



document.addEventListener("scroll", handleScroll);

function handleScroll() {
  // do something on scroll
}

Show the Scroll to Top button logic

In the handleScroll function, we'll check whether we need to show or hide the button. We are going to use three element properties:

clientHeight gives us the visible part of an element in its parent.
scrollHeight gives the total height of an element including the overflow part.

The height of the overflow part is the total amount of pixels that can be scrolled. In other words: scrollableHeight = scrollHeight - clientHeight



var scrollableHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;

document.documentElement is the document element. We are using it instead of document because scrollHeight and clientHeight are elements' properties.

scrollTop gives the number of pixels scrolled from the top. It's the amount of pixels scrolled by the user.

By dividing scrollTop with scrollableHeight we get a ratio between 0 and 1. 0 meaning the user hasn't scrolled and 1 meaning the user scrolled to the end of the page. This ratio tells us how much the user scrolled.

If we want the scroll to top button to show up after the user scrolled 50% we set a golden ratio of 0.5. And, with an if else statement, make the button visible above and hidden below.



document.addEventListener("scroll", handleScroll);
// get a reference to the button
var scrollToTopBtn = document.querySelector(".scrollToTopBtn");

function handleScroll() {
  var scrollableHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var GOLDEN_RATIO = 0.5;

  if ((document.documentElement.scrollTop / scrollableHeight ) > GOLDEN_RATIO) {
    //show button
    scrollToTopBtn.style.display = "block";
  } else {
    //hide button
    scrollToTopBtn.style.display = "none";
  }
}

With that the scroll-to-top button appears and hides on scroll.

Scroll to top

There a lot of scrolling examples that use jQuery. But these days it is really easy to do this in pure js with scrollTo:



\\...
scrollToTopBtn.addEventListener("click", scrollToTop);

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
}

top: 0, means scroll to 0px vertically.
behavior: "smooth" makes the scroll smooth.
there's also a left property for horizontal scroll.

And that's it! Here's the final js:



document.addEventListener("scroll", handleScroll);

// get a reference to our predefined button

var scrollToTopBtn = document.querySelector(".scrollToTopBtn");

function handleScroll() {

  var scrollableHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;

  var GOLDEN_RATIO = 0.5;

if ((document.documentElement.scrollTop / scrollableHeight ) > GOLDEN_RATIO) {

    //show button

    scrollToTopBtn.style.display = "block";

  } else {

    //hide button

    scrollToTopBtn.style.display = "none";

  }

}

scrollToTopBtn.addEventListener("click", scrollToTop);

function scrollToTop() {

  window.scrollTo({

    top: 0,

    behavior: "smooth"

  });

}

Tada 🎉🎉🎉!

Thanks for reading 🥰🥰!! I hope this was of help.

Improvements:

I've tried to keep it simple. Usually I would also toggle a class instead of the display to show a transition animation.

Here's how you could fade up the button:

Simple typing effect pure JS (beginner)

ljc-dev — Sat, 01 Aug 2020 15:44:22 +0000

The typing effect is a simple yet stylish animation used by many bloggers and web developers to introduce themselves in an elegant fashion.

This tutorial will show you how to create the typing effect with plain css and js (no libraries).

Let's start by creating a text holder p with a class of typeText.

    <p class="typeText"></p>

We add a blinking cursor after our paragraph with a CSS animation:

.typeText::after {
  content: "|";
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% {opacity: 1;}
  50% {opacity: 0;}
}

The pseudo class ::after is going to add the cursor | and make it blink with the keyframes animation blink.

If you are not familiar with animations, I made an introduction to CSS animations here.

Here's all the js to the typing effect:

var typeText = document.querySelector(".typeText")
var textToBeTyped = "a software engineer"
var index = 0, isAdding = true

function playAnim() {
  setTimeout(function () {
    // set the text of typeText to a substring of
    // the textToBeTyped using index.
    typeText.innerText = textToBeTyped.slice(0, index)
    if (isAdding) {
      // adding text
      if (index > textToBeTyped.length) {
        // no more text to add
        isAdding = false
        //break: wait 2s before playing again
        setTimeout( function () {
          playAnim()
        }, 2000)
        return
      } else {
        // increment index by 1
        index++
      }
    } else {
      // removing text
      if (index === 0) {
        // no more text to remove
        isAdding = true
      } else {
        // decrement index by 1
        index--
      }
    }
    // call itself
    playAnim()
  }, 120)
}
// start animation
playAnim()

The playAnim() function calls itself repeatedly using setTimeout with a delay of 120ms.

By using the string method slice(0, index) we set the text of typeText to a substring of the textToBeTyped.

typeText.innerText = textToBeTyped.slice(0, index)

index begins at 0 and increments by 1 when we are adding and decrements by 1 when we are removing.

isAdding is a boolean that is used to check whether we are adding or removing.

When index is larger than the length of textToBeTyped, we set isAdding to false to start removing. And when index is equal to 0, we set isAdding is true to start adding again.

After it has finished adding, a setTimeout with a 2000ms delay will create a break for people to read the text before it gets removed again.

if (index > textToBeTyped.length) {
  // no more text to add
  isAdding = false
  //break: wait 2s before playing again
  setTimeout( function () {
    playAnim()
  }, 2000)
  return
}

And we get:

And that's it! You should now be able to make your own typing effect.

I've tried to make it beginner friendly but I think my explanations weren't that great 😅. If you have questions, please leave a comment or hit me up on my socials 😁.

Beyond the basics

The cursor animation can be made more realistic by adding a built-in animation-timing-function step-end to our blink animation like this:

.typeText::after {
  content: "|";
  /* animation: blink 1s infinite; */
  animation: blink 1s step-end infinite;
}

steps are a recent addition to css. They break the flow of an animation by playing it in jumping steps. The only difference between the two animations below is the addition of steps on the 2nd div.

We can increase the removing speed by changing the setTimeout delay with the boolean isAdding and a ternary operator like this:

function playAnim() {
  setTimeout(function () {
    // ...
  }, isAdding ? 120 : 60)

The ternary operator means if it's adding set the delay to 120ms. If it's removing set the delay to 60ms.

And instead of typing one string we can choose an array of string textToBeTypedArr to be typed in turn. And a textToBeTypedIndex variable to keep track of the current text index in the array. textToBeTypedIndex will be updated it each time after we are done removing the previous text.

var typeText = document.querySelector(".typeText")
// var textToBeTyped = "a software engineer"
var textToBeTypedArr = ["a software engineer", "a warlord", "a king", "a peasant"]
var index = 0, isAdding = true, textToBeTypedIndex = 0

function playAnim() {
  setTimeout(function () {
    // set the text of typeText to a substring of the text to be typed using index.
    typeText.innerText = textToBeTypedArr[textToBeTypedIndex].slice(0, index)
    if (isAdding) {
      // adding text
      if (index > textToBeTypedArr[textToBeTypedIndex].length) {
        //...
      } else {
        //...
      }
    } else {
      // removing text
      if (index === 0) {
        //...
        //switch to next text in text array
        textToBeTypedIndex = (textToBeTypedIndex + 1) % textToBeTypedArr.length
      } else {
        //...
      }
    }
    // calls itself
    playAnim()
  }, isAdding ? 120 : 60)
}
// start animation
playAnim()

And for prefectionists that don't like the cursor blinking when the text is being added/removed, we can toggle the blink animation by removing the animation from ::after and adding it only in js with the showAnim class:

.typeText::after {
  content: "|";
  /* animation: blink 1s step-end infinite; */
  animation: none;
}

.showAnim.typeText::after {
  animation: blink 1s step-end infinite;
}

And toggling the showAnim class in js:

function playAnim() {
    //...
      if (index > textToBeTyped.length) {
        // no more text to add
        isAdding = false
        //break: wait 2s before playing again
        // play cursor blink animation
        typeText.classList.add("showAnim")
        setTimeout(function () {
          // remove cursor blink animation
          typeText.classList.remove("showAnim")
          playAnim()
        }, 2000)
        return
    //...
}

End!

Easy hamburger menu with JS - Beginners

ljc-dev — Sun, 26 Jul 2020 10:56:06 +0000

A hamburger menu is a classic UI feature present in countless websites. It's used to show and hide a menu on click, especially used in mobile design.

In this tutorial, we'll learn to create a hamburger menu with HTML, CSS and Javascript.

Here's the HTML:



<head>
  <!-- Material Icon CDN -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <ul class="menu">
    <li><a class="menuItem" href="#">Home</a></li>
    <li><a class="menuItem" href="#">Profile</a></li>
    <li><a class="menuItem" href="#">About</a></li>
    <li><a class="menuItem" href="#">Contacts</a></li>
  </ul>
  <button class="hamburger">
    <!-- material icons https://material.io/resources/icons/ -->
    <i class="menuIcon material-icons">menu</i>
    <i class="closeIcon material-icons">close</i>
  </button>
</body>

Begin by adding a basic menu with a class of menu and menu links with a class of menuItem.

Then add a button with a class of hamburger and both a menu and a close icons inside of it. Later on we will hide the close icon by default with CSS and alternate which icon to show with Javascript.

You can use any icons family you want. I've used material icons by loading their CDN in the head and adding the menu and close icons inside of the button.

The menuIcon and closeIcon classes are used to reference the icons in CSS and Javascript later on.

Now let's add some CSS.

Add to the button position: fixed; so scrolling won't affect it. And z-index:100; to make sure it stays above every other element.

Add top and right with a value of 1rem to place it at the top-right corner of the screen.



.hamburger {
  position: fixed;
  z-index: 100;
  top: 1rem;
  right: 1rem;
  padding: 4px;
  border: black solid 1px;
  background: white;
  cursor: pointer;
}

To hide the close icon by default, add display: none; to the closeIcon class.


 css
.closeIcon {
  display: none;
}

In the menu class, add position: fixed; so it can't be scrolled away.

Set the top, right, bottom and left to 0 to make the menu cover the whole screen.



.menu {
  position: fixed;
  transform: translateY(-100%);
  transition: transform 0.2s;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: black;
  color: white;
  list-style: none;
  padding-top: 4rem;
}

transform: translateY(-100%); is used to hide the menu by default above the screen.
transition: transform 0.2s; is optional. It is used to animate the change in translation value to create a slide up/down effect.

By resetting translateY to 0, the menu will slide down and cover the whole screen.

Add it in a showMenu class:



.showMenu {
  transform: translateY(0);
}

This class will be added and removed from the menu with Javascript to show and hide the menu.

Here's the Javascript for toggling the menu:


 javascript
const menu = document.querySelector(".menu");
const menuItems = document.querySelectorAll(".menuItem");
const hamburger= document.querySelector(".hamburger");
const closeIcon= document.querySelector(".closeIcon");
const menuIcon = document.querySelector(".menuIcon");

function toggleMenu() {
  if (menu.classList.contains("showMenu")) {
    menu.classList.remove("showMenu");
    closeIcon.style.display = "none";
    menuIcon.style.display = "block";
  } else {
    menu.classList.add("showMenu");
    closeIcon.style.display = "block";
    menuIcon.style.display = "none";
  }
}

hamburger.addEventListener("click", toggleMenu);

Clicking on the hamburger button will call toggleMenu().

It checks if the menu contains the class showMenu.

If the menu contains the showMenu class, we remove it to hide the menu. We also toggle the display to hide the close icon and show the menu icon.

If the menu doesn't have the showMenu class, we add it, show the close icon and hide the menu icon.

The hardest part is over! All that's left is to hide the menu when the user click on the links.

In the Javascript above, we got all the menu items with querySelectorAll.


 javascript
const menuItems = document.querySelectorAll(".menuItem");

With forEach, we can iterate through each link and add a call to toggleMenu().

toggleMenu() will in turn hide the menu (because if the user can click on the menu items it means that the menu is showing).



 javascript

menuItems.forEach( 

  function(menuItem) { 

    menuItem.addEventListener("click", toggleMenu);

  }

)

And that's it!

Thanks for reading 😄!!

(2nd rewrite 01/10/21)
I hope you've found it useful and happy coding 👨‍💻!

Hamburger CSS (no JS)

ljc-dev — Sat, 25 Jul 2020 20:26:30 +0000

I put together this short tutorial on how to make a hamburger menu with no js in response to the feedback on my original Twitter post.

Enjoy 😁!

:target

Have you heard of the CSS pseudo-class on :target?

It styles the element with an anchor id that that has been called by a link.

For example, a p with an id of home and an a link with href=#home:



<p id="home">Home</p>
<a href="#home">Go to Home</a>



p:target {
  color: red;
}

When we click on the a link, the text of the targeted p changes to red.

By clicking on another link, the :target style gets hidden.



<p id="home">Home</p>
<a href="#home">Go to Home</a>
<a href="#">Go somewhere else</a>

Here's the whole html code.

I'm using material icons by adding their cdn in the head of the html file.



<head>
  <!-- ... -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>



  <ul class="menu" id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contacts</a></li>
    <a class="close" href="#">
    <span class="material-icons">
      close
    </span>
    </a>
  </ul>
  <a class="hamburger" href="#menu">
    <span class="material-icons">
      menu
    </span>
  </a>

Material icons work by defining a span with material-icons class and adding a keyword between the tags:



  <span class="material-icons">
    close
  </span>

The ul has an id of menu. It holds the menu and the close icon link.
The a with a class of hamburger has a href #menu, clicking on it will show the on :target style for the ul menu.
Clicking on other links (Home, Profile, About, Contacts) and the close link will remove the on :target style of the ul.

Now we just need to add a sprinkle of CSS ✨.

The hamburger link has a position fixed to get it out of the flow of the page.

The menu has a position fixed too and a bigger z-index than the hamburger link to put the menu above the link.

For consistency, I've put the hamburger and close links on the same corner.


 css
.hamburger {
  position: fixed;
  /* a large z-index puts the ham button above the rest of the page*/
  z-index: 99;
  background: white;
  border: none;
  cursor: pointer;
  top: 1rem;
  right: 1rem;
}

.menu {
  position: fixed;
  /* give the menu a larger z-index than the ham link
  to put the menu above it */
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  /* basic menu styling*/
  list-style: none;
  background: black;
  display: flex;

  flex-direction: column;
  /* animate slide up/down */
  transform: translateY(-100%);
  transition: transform 0.2s ease;
}

.close {
  position: absolute;
  border: none;
  color: white;
  cursor: pointer;
  top: 1rem;
  right: 1rem;
}

The menu is hidden by default with transform: translateY(-100%);. Translating -100% on the Y axis moves it 100% up above the screen.

By adding a transition transition: transform 0.2s; on transform we get a small slide in and out animation when the value of transform translateY changes.

And we reset the translation Y to 0 and show the menu on :target.


 css
.menu:target {
  /* show menu */
  transform: translateY(0);
}

Thanks for reading 😄!

Thanks Martin for telling me to animate transform instead of height to get GPU support.

DEV Community: ljc-dev

Introduction to GitFlow

In GitFlow, the main branches are:

More complex projects might also include:

HowTo GitFlow branching:

Common Git branching commands:

Introduction to GSAP

Introduction to GSAP

Setting up GSAP

Initialize GSAP

First animation

Animate on click

Adding a delay

Gotcha

Controlling the animation

Using a plugin

How to create a newsletter with Mailchimp (not affiliated/ad).

Step 1: Create and Setup a Mailchimp account

Step 2: Create a Sign Up form

Step 3: Get the embed code

Step 4: Add it to your website

That's it!

Top 5 design mistakes web developers make (and how to avoid them).

1 - Too many colors.

2 - Gradients.

3 - Not enough contrast difference between text and background.

4 - Misalignments and spacing.

5 - Inconsistent headers

That's it!

Introduction to scroll animations with Intersection Observer

Creating an intersection observer

The options

The callback

Select elements to be observed

That's it!

Beyond the basics

Enter & Leave Anim

Scroll To Top

Update current tab on scroll

And more to come 😁!

Review on AOS (animation on scroll) and Rellax (parallax)

AOS (Animate on Scroll)

Pros

Cons

Verdict on AOS

Rellax

Pros

Introduction to CSS Animations

Transitions

@keyframes animations

Thanks for reading!!

Happy coding 👋!

Embedding an Instagram post in your website

Introduction

Easy embedding to HTML.

Tada!

Optional

Setup a Facebook app

Embedding the post dynamically.

Step 1: fetch the instagram post

Step 2: display the post

Improvements:

Thanks for reading 😁!!

Scroll-to-top Button in vanilla JS (Beginners)

Scroll to top button with vanilla js

The button

Detect user scroll

Show the Scroll to Top button logic

Scroll to top

Tada 🎉🎉🎉!

Improvements:

Simple typing effect pure JS (beginner)

Beyond the basics

Easy hamburger menu with JS - Beginners

And that's it!

Thanks for reading 😄!!

Hamburger CSS (no JS)

:target