Let’s learn how we can load stylesheets only when needed without making them part of the application bundle.

We will try to understand this by taking the example of multiple themes support.

Multiple Theme Files

Let’s assume that apart from the main styles.css file, you have 2 theme files present:

  1. src/styles/themes/theme-light.css
  2. src/styles/themes/theme-dark.css

Next…

A small post to show how wave animation can take your emoji to next level!

We all use wave 👋 emoji a lot in web apps!

Next time when you use it, try to add a simple wave animation to it…

@keyframes wave-animation {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(14deg);
}
20% {
transform: rotate(-8deg);
}
30% {
transform: rotate(14deg);
}
40% {
transform: rotate(-4deg);
}
50% {
transform: rotate(10deg);
}
60% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
.wave {
animation-duration: 2.5s;
animation-iteration-count: infinite;
animation-name: wave-animation;
display: inline-block;
transform-origin: 70% 70%;
}

I have also created a codepen for it:

Dharmen Shah

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store