DEV Community: Kemi Owoyele

Overcoming Obstacles: Proven Strategies for Learning to Code

Kemi Owoyele — Mon, 15 Jul 2024 23:03:49 +0000

The journey of learning to code can be a bit daunting. It is very easy to start feeling like you are not smart enough for this career path or that coding is just too hard for you. Or maybe you started with a lot of enthusiasm, but a few weeks in, you start feeling stuck and find yourself lacking motivation to carry on.
For some, it is getting stuck in tutorial hell, watching several tutorials and feeling good but still unable to implement what was learned on their own. It can feel like being stuck in a wilderness with no way back or forth. These experiences are very common among coders, especially at the early stages of learning. In this article, we are going to explore some of the steps you can take to make the journey less turbulent.

1. Start with a clear goal in mind:

It is important to set goals and plan towards any important move you want to make in life. As with programming, you should have a plan. This could be to get a job within a reasonable specified time, build a project, a SAAS product, freelance or venture into some tech related entrepreneurship.
You should also decide on what aspect of programing you intend to learn. If you are not sure yet, you should do some research on the various coding related career paths and figure out which one is fitting for your goal.
You also need to set a learning plan. Are you going to take an online course, attend a boot camp, get a personal tutor, or learn on your own? How do you make out time for learning? How much time can you afford to spare, or what are you willing to give up?
You need the plan, so it can be a guide for you as you embark on the journey. Your goal might be needed as a motivation for when you face difficulty. Reminding yourself, why you started learning might help keep you on track.
It will also help to set daily/weekly goals. You should also review the goals against the results at the end of the period.
While setting goals though, try as much as possible to be realistic. If your initial goal turns out to be too unrealistic, it wouldn’t hurt to readjust the goals. Unrealistic goals could overwhelm you, and cause you to feel like a failure even if you are doing way better than most people are doing.
“Goals are the fuel for the engine of achievement”-Brian Tracy

2. Pick one programming language and stick to it.

The programming language you choose will be determined by your goal, or what you intend to achieve by learning to program. The language you need for game development, for instance, is different from the one you will need for web development or data analysis.
After deciding on the programming language, get a relevant roadmap and let it guide you as you progress. If you are learning on your own, it is very important to work with a roadmap to avoid unnecessary distractions. Do not move on to the next topic until you are comfortable with the current topic.

3. Experiment with different resources or approaches to find out which is most suitable for you.

Seek out online resources, Read documentation, watch video tutorials, read articles and books. Find out which combination is more suitable for you. If you are reading or watching videos, code along and take notes. Unless you find the material unhelpful, try not to move on to the next video or material until you are comfortable with the codes you learned from that material.

4. Learn the basics

Don’t jump this step. Get yourself well-grounded in the fundamentals of the programming language you are learning.
Learn how the programming language you are learning works behind the scenes. Don’t ignore the theoretical aspect of programming, learn the theory and practice what you learned.

5. Always Be Coding

Code like your life depends on it. It is important to code. You learn to code by coding. Every other step is hinged upon this step. In all your learning, if you do not practice by writing your own codes, you will not be able to make visible progress. After watching tutorials or reading an article or documentation, fiddle with the codes; try them out with different scenarios. Find out for yourself what will work and what will not.
It may also help to code by hand. Coding by hand might seem old school, but it will help you to strengthen your mental muscles, especially with writing syntax precisely. Coding by hand is also helpful during job interviews.

6. Learn by doing

Make a small project from each topic or concept you learn. Own the codes. Practice the code samples until they are fully imbibed in you. Break down complex concepts into smaller, manageable chunks. Write a lot of small projects, and work your way up to more complex ones.

7. Don’t do it alone

Find a community of learners to engage with. If you are in a boot camp or doing an online course, don’t take pair programming for granted. Seek help whenever you need one. Don’t hesitate to ask for help, sometimes a bug you’ve been struggling with for hours will be easier to spot for someone else with a different perspective, or who has encountered the same bug before.
Collaborate with someone more experienced. Seek out a mentor if you can find one. Mentors are more likely to make your journey easier. They will help you figure out where you may be going wrong and help you avoid the mistakes they made while they were learning. They may even give you projects to do or materials that they found most helpful. Mentors can also help get jobs or land first sets of freelance projects.
Be open to feedback. Do not take criticisms as a blow to your ego. Rather, consider it as an opportunity to learn different perspectives, and as a challenge to get better. Feedback may also help you identify your areas of weakness, areas you may need to pay some more attention to.
Don’t hoard knowledge; share what you have learned with other learners. You can do this with your peers at a boot camp or an online course platform, or by answering questions on Quora, StackOverflow, Reddit, Discord, WhatsApp groups etc. Get involved in communities attend meet-ups (both online and physically), and be an active participant.

8. Endeavor to stay motivated

Make coding a habit. Motivation is very important in learning to code, but way more important than motivation is personal discipline. There are times when you will find it hard to be motivated, especially when you are stuck on a problem for a while. This is where discipline comes in. You have to decide that irrespective of how you feel, you will stick to the plan you set for your learning. Focus on the end goal. Always remind yourself of the reason you got started in the first place.
Learn to fall in love with the process. Find a project that you are passionate about. Building a personal project on something that particularly interests you can be very good for your morale.
It may also help to celebrate your small wins. For each milestone you cross, throw yourself a mini party. Be happy for yourself. Evaluate your progress based on the things you could not do previously that you can now do with minimal effort.

9. Be a problem solver

The core purpose of programming is problem-solving. Try to solve as many problems as possible, of varying difficulty,
Also, when you choose to do a project, try as much as possible to complete that project. Especially if you find it difficult. Most of the time, these difficult situations are your best opportunities for growing. Expect to fail repeatedly, but make sure you learn from every mistake, bug or error.

10. Don’t be too anxious about your learning speed.

The anxiety could be crippling at times. Although it is also important not to be stagnant, the most important thing is not how fast you learn, but how consistently you are improving. You may have intended to learn a particular topic for two days. Don’t jump to the next topic before you are comfortable enough with the current topic just because of deadline. Be patient with yourself. You are not dull. Learning to code takes time and can be hard. Don't get discouraged if progress is slow.
It is also important to take breaks. This is more important when trying to debug an error. If after a couple of minutes the error is being persistent, take a short break and come back to it.
The entire learning process can easily become overwhelming sometimes that you might forget to take proper rest or eat well. It is important to know when to rest, and take care of yourself. Your physical and mental health is also imperative to achieving your learning goals.

11. Avoid distraction

Don’t pay attention to noise and unhealthy hot takes on the internet. This can be very confusing. Sometimes, you are just beginning your learning journey, then someone on the internet is posting something like “websites will soon be obsolete”, “AI will soon take all our jobs”, “apps are dead”, “a particular programming language is dead” etc. This could discourage you from persisting with what you are learning. The best thing is to recognize these takes for what they are. Most times, they are just click baits. People have been saying these things for years, and programming has remained a promising career path nonetheless.

Also be careful with new technologies and frameworks. Sometimes, while you are learning something, something new may pop up, and everyone is talking about it. Do not allow that to distract you, especially if you are not yet well-grounded with the fundamentals. Focus on your roadmap.

You will need a lot of dedication, passion, commitment, grit.

“It doesn’t matter how many times you fail, remember you only have to succeed once.”
Mark Cuban.
That once will definitely make up for all the failures you’ve experienced.

13. You need to be consistent in learning.

One or two hours daily are better than six hours binge once in a week. It may help to participate in the #100dayofcode. Try coding every day for at least an hour. You may get more comfortable with coding that you can start coding for longer hours.
Also, set aside a particular time of the day, or learning environment to help get you in the zone. Try as much as possible to put away distraction. If for example you code by 4pm daily, try as much as possible to make the environment conducive for that time. And when learning, try not to multi-task. Just focus on learning one thing at a time.

14. Believe in yourself, be confident

You just have to believe in yourself. Others have done it, you can do it too. No matter how difficult it feels, convince yourself that you can do it. Practice positive self-talk, overcome self-doubt and imposter syndrome. Be your own cheer leader/ hype man.

Surround yourself with positivity; listen to podcasts that can help strengthen your mental resilience. Expect to fail several times, they are opportunities to grow and learn.
Self-confidence, like every other skill can be learned. You can start small and grow in confidence as you proceed in your journey. Challenge every negative thought, take calculated risks. Whenever that voice tells you that it can’t be done, prove it wrong by getting it done. With each challenge you overcome, your confidence gets better.

Conclusion

Embarking on the journey of learning to code demands a willingness to make sacrifices. It requires surrendering your comfort zone, dedicating countless hours, and persevering through obstacles. By following the steps outlined in this article, you'll be forced to confront your limits and push past them. Embrace the sacrifice, stay committed to your goals, and don't hesitate to seek guidance when needed. In return, you'll unlock your full potential and reap the rewards of success in the world of programming.
What are the strategies that have worked for you? Please, share with us in the comment section. You may also share what obstacles you may have faced, and how you are tackling those challenges.

Build a digital clock with React JS; A step-by-step guide

Kemi Owoyele — Mon, 15 Jul 2024 15:05:34 +0000

In this series of building simple projects with react, we are at the digital clock bus stop. Our final project will look like this;

Simply cool right?
So let’s get started by creating a react app. If you are not sure if you have the modern version of node in your computer, confirm by typing node –v in your terminal. If a version number does not show up, or the version is less than version 5.2, visit nodejs.org and download the latest version of node.
If you’ve done this, still in your terminal, navigate to the location you would like to create your app in and type in

  npx create-react-app digital-clock

This may take a while, as npx runs the code on the internet and downloads a new app for you along with all the needed dependencies for a starter project. After the app is created, navigate into the app and type code. To open the code in vscode(if that is your default code editor). If your default code editor is not vscode, open up your editor to the newly created folder. To run the app on the browser, type npm start in the terminal. Ensure that the terminal is addressed to the root folder.

Create the DigitalClock component

In the src folder of the app created for you, create a new file and name it DigitalClock.js. In the file, create a basic react component and export it at the bottom.

const DigitalClock = () => {
  return <></>;
};
export default DigitalClock;

Now, go to the root component of your app and replace the content with the codes below

import DigitalClock from "./DigitalClock";
function App() {
  return (
    <>
  <DigitalClock />
    </>
  );
}

export default App;

This is to import the DigitalClock component into the App component and render the DigitalClock.

Write the relevant jsx and CSS

In our DigitalClock component, we will render our jsx codes for displaying the time in hours, minutes and seconds. We will also display the date in another section of the clock.

const DigitalClock =() => {
  return (
    <>
      <div className="clock-container">
        <div className="cover"></div>
        <p className="date">sun 1 Jan 2020</p>
        <div className="time">
          <span className="clock">00:</span>
          <span className="clock">00:</span>
          <span className="secs">00</span>
        </div>
        <p className="date">00:00:00 am</p>
      </div>
    </>
  );
}
export default DigitalClock;

Paste the following CSS style in your index.css file to replace the former content of the file.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: "Segoe UI", "Roboto", sans-serif;
  background: black;
  background: linear-gradient(
      45deg,
      rgb(184, 183, 185),
      rgb(90, 89, 133),
      rgb(158, 158, 161)
    ),
    conic-gradient(
      rgba(148, 195, 240, 0.4),
      rgba(107, 111, 131, 0.4),
      rgba(225, 192, 255, 0.4),
      rgba(82, 105, 184, 0.4)
    );
  background-size: 20px 50px, 100px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: rgb(18, 17, 68);
  text-shadow: 1px 1px 2px rgb(255, 255, 255);
  -webkit-text-stroke: 1px rgb(0, 0, 0);
  font-family: monospace;
  background-blend-mode: color-burn;
}
.clock-container {
  padding: 20px;
  border-radius: 50%;
  background-color: rgb(125, 130, 148);
  background-size: 3px 5px;
  box-shadow: inset 5px 5px 5px rgb(0, 0, 0), inset -5px -5px 5px rgb(0, 0, 0);
  height: 250px;
  width: 250px;
  position: relative;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  align-items: center;
  text-align: center;
}
.cover {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  box-shadow: inset 5px 5px rgb(5, 5, 5), inset -5px -5px rgb(5, 5, 5);
  background-color: rgba(0, 2, 10, 0.363);
  background: conic-gradient(
    rgb(185, 185, 199),
    rgb(205, 205, 243),
    rgb(139, 147, 177),
    rgb(139, 141, 175)
  );
  opacity: 0.3;
  border-radius: 50%;
}
.date {
  font-size: 1rem;
  font-weight: 900;
}

.time {
  padding: 10px 0;
  border-radius: 30px;
  background: rgb(0, 0, 69);
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  text-shadow: 1px 1px 2px rgb(91, 109, 161);
  -webkit-text-stroke: 1px rgb(0, 0, 0);
  box-shadow: 3px 5px 5px rgb(5, 5, 5);
}
.secs {
  font-size: 1rem;
}

Outcome so far

Write the code for getting the time

So now we have a clock, but it’s not yet working. To make the clock work we will need to import two hooks. These are the useState hook and the useEffect hook.

import { useState, useEffect } from "react";

_The useState hook is used render variable updates, or variable state changes to the DOM. While useEffect hook is used to handle function side effects. _

To use the useState hook, we assign useState to a variable and a function for setting the value of the time variable. And give it an initial value of the new date object.

  const [time, setTime] = useState(new Date());

get the time to start running

To get the time to update every second, we will have to run the update every second with the JavaScript setInterval method. And in react, actions like setting timers, fetching API, localstorage and other side effect producing functions are usually taken care of with the useEffect hook. This is also useful for cleaning up resources that are no longer in use with the cleanup function. Hence, inside the useEffect function, we will run the setInterval function, and return the cleanup function.

  useEffect(() => {
    const timeInterval = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => clearInterval(timeInterval);
  }, []);

Display the time on the clock

Now we have the clock and the running time. But the time is yet to be displayed on the clock. So to display the time, we use curly braces to embed time. But we want to output date in one div, output the time in 12 hour format in another div and output the hours, minutes and seconds in another div. we will attach to the time variable the different relevant functions to extract the particular version of the time we need.

<p className="date">{time.toDateString()}</p>
        <div className="time">
          <span className="clock">{time.getHours()}:</span>
          <span className="clock">{time.getMinutes()}:</span>
          <span className="secs">{time.getSeconds()}</span>
        </div>
        <p className="date">{time.toLocaleTimeString()}</p>

The overall code for the DigitalClock component will be as below.

import { useState, useEffect } from "react";

function DigitalClock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timeInterval = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => clearInterval(timeInterval);
  }, []);
  return (
    <>
      <div className="clock-container">
        <div className="cover"></div>
        <p className="date">{time.toDateString()}</p>
        <div className="time">
          <span className="clock">{time.getHours()}:</span>
          <span className="clock">{time.getMinutes()}:</span>
          <span className="secs">{time.getSeconds()}</span>
        </div>
        <p className="date">{time.toLocaleTimeString()}</p>
      </div>
    </>
  );
}
export default DigitalClock;

Final Result

Conclusion

We now have a functional digital clock that we built together with React. I will recommend that you try to build this app again on your own. You can make adjustments to the app if you deem fit. Also, try to build other simple projects to help you get more comfortable with React JS.
Let me know your outcomes, and whatever challenges you may face in the comment section. Also, if you want to read more front-end web development content, follow this account. Thank you.

Build a weight converter app with React js

Kemi Owoyele — Mon, 15 Jul 2024 12:37:39 +0000

As you are learning React js, it is always advised to try building projects. This will help make your learning journey easier and help you get acquainted with the practical utilization of the tool.
In this tutorial, we will build a simple weight converter app using React JS. This will allow us to explore a couple of introductions to react js concepts. We will explore how to create a component in react, how to dynamically display values, how to handle state change with the useState hook and how to access user inputs.

Prerequisites

• Knowledge of HTML & CSS
• Knowledge of basic JavaScript
• Introduction to react (not compulsory)

Create react app

Verify that a modern version of node.js is installed in the computer you are using. In your terminal, navigate to the folder/location you want to create the app in and type

npx create-react-app weight-converter

It may take a couple of minutes, while React sets up your app for you.
Once the app is created, navigate into the created folder and type

npm start

The localhost address will be provided for you, and your default page will open up in your default browser.

Set up the components

In your src folder, create a new file and name it WeightConverter.js. In the WeightConverter.js app, set up a basic react component.

const WeightConverter = () => {
  return <>
        </>;
};
export default WeightConverter;

In the App.js file, stripe the content of the file to the bare component and render the WeightConverter component.

import WeightConverter from "./WeightConverter";
function App() {
  return (
    <>
      <WeightConverter />
    </>
  );
}

export default App;

The rest of the code we will write will be in our WeightConverter.js file. Our weight converter app will accept input in pounds and display real-time conversion into grams, kilograms, and ounces. Thus, our jsx/html will require an input tag for accepting user input, and a couple of divs for displaying the results. And some wrapping divs for styling purposes.
*jsx code *

import "./weight-converter.css";
const WeightConverter = () => {
  return (
    <>
      <div className="container">
        <h1>Weight Converter</h1>
        <div className="wrapper">
          <input type="number" placeholder="enter pounds"></input>
          <div className="weight grams">
            <div>0</div>

            <label>Grams</label>
          </div>
          <div className="weight kg">
            <div>0</div>

            <label>Kilograms</label>
          </div>
          <div className="weight ounces">
            <div>0</div>
            <label>Ounces</label>
          </div>
        </div>
      </div>
    </>
  );
};
export default WeightConverter;

** CSS code**

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: "Segoe UI", "Roboto", sans-serif;
  background: black;
  background: radial-gradient(
    /* 45deg, */ rgb(11, 0, 47) 20%,
    rgb(6, 0, 28) 50%,
    rgb(0, 0, 0) 60%
  );
  background-size: 30px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: rgb(255, 255, 255);
  font-size: 1.2rem;
  text-shadow: 1px 1px 3px black;
}
.container {
  padding: 50px;
  background-color: rgba(36, 35, 46, 0.317);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 10px 10px 20px rgb(0, 4, 53);
}
input {
  padding: 10px;
  width: 100%;
  border-radius: 10px;
  font-size: 1.2rem;
  color: rgb(8, 8, 64);
  box-shadow: inset 0 0 5px rgb(8, 8, 64);
}
h1,
h3 {
  margin: 10px auto;
  text-align: center;
  font-size: 2rem;
  -webkit-text-stroke: 2px rgb(213, 44, 47);
}
h1 {
  letter-spacing: 10px;
}
.weight {
  width: 100%;
  padding: 10px;
  border-radius: 10%;
  margin: 10px auto;
  background-color: rgb(213, 44, 47);
  box-shadow: inset 2px 2px 15px rgb(0, 0, 0);
}
.kg {
  background-color: rgb(41, 86, 169);
}
.ounces {
  background-color: rgb(31, 160, 87);
}

output

Get user input

The next code we will write is for accessing the user’s input. We want to access the number of pounds that the user wants to convert to other weights. To do this, we will create a function inside the WeightConverter component, but above the return statement to handle the input value. Inside that function, we will set the value for pounds

const handleInput = (e) => {
    const pounds = e.target.value;
  };

However, react will be unable to render this value unless we use the useState hook. Therefore, we will import useState hook at the top of the page.

import { useState } from "react";

Then above the handle input function, we assign useState to a variable and a function for setting the value of the weight variable.

  const [weight, setWeight] = useState("");

In our handleInput function, we use the useState.

  const handleInput = (e) => {
    const pounds = e.target.value;
    setWeight(pounds);
  };

We can now reference the handleInput function in our input tag

   <input
            type="number"
            onChange={handleInput}
            placeholder="enter pounds"
          ></input>

Converting the values

The next thing we will do is to convert the value in pounds to grams, kilograms and ounces. We will be dividing and multiplying as appropriate to get these values. We will also round our outcome up to two decimal places.


  const changeWeight = () => {
    const grams = (weight / 0.0022046).toFixed(2);
    const kgs = (weight / 2.2046).toFixed(2);
    const ounces = (weight * 16).toFixed(2);
    return { grams, kgs, ounces };
  };

This function returned a detructured object with the three needed values. These values will then be dynamically displayed in the weight divs.

<div className="weight grams">
            <div>{changeWeight().grams}</div>
            Grams
          </div>
          <div className="weight kg">
            <div>{changeWeight().kgs}</div>
            Kilograms
          </div>
          <div className="weight ounces">
            <div>{changeWeight().ounces}</div>
            Ounces
          </div>

Final code

import "./weight-converter.css";
import { useState } from "react";

const WeightConverter = () => {
  const [weight, setWeight] = useState("");

  const handleInput = (e) => {
    const pounds = e.target.value;
    setWeight(pounds);
  };

  const changeWeight = () => {
    const grams = (weight / 0.0022046).toFixed(2);
    const kgs = (weight / 2.2046).toFixed(2);
    const ounces = (weight * 16).toFixed(2);
    return { grams, kgs, ounces };
  };
  return (
    <>
      <div className="container">
        <h1>Weight Converter</h1>
        <div className="wrapper">
          <input
            type="number"
            onChange={handleInput}
            placeholder="enter pounds"
          ></input>
          <div className="weight grams">
            <div>{changeWeight().grams}</div>
            Grams
          </div>
          <div className="weight kg">
            <div>{changeWeight().kgs}</div>
            Kilograms
          </div>
          <div className="weight ounces">
            <div>{changeWeight().ounces}</div>
            Ounces
          </div>
        </div>
      </div>
    </>
  );
};
export default WeightConverter;

Final output

Conclusion

Now that we have successfully built a weight converter app together, I will need you to do us a favor. Create another React app, and try recreating this app on your own. Be sure that you can;
• Create components
• render the component in your root component
• Access the value of user inputs
• dynamically display values in your app
• Manage state change with the useState hook
• Make a functional weight converter app with react.
It may also help to try making another simple project on your own.
Let me know if you can achieve this on your own. You can also share your challenges or outcomes in the comment section.

Coloring Your Web World: A Guide to CSS Colors

Kemi Owoyele — Sat, 13 Jul 2024 11:03:36 +0000

Color is a form of electromagnetic radiation that is visible to the human eye. It is the way we perceive and experience different wavelengths of light. Colors can evoke emotions, convey meanings, and add depth and complexity to our experiences.
Color plays a significant role in many aspects of our day-to-day life. It helps to convey messages, express identity, influence mood, stimulate appetite, influence fashion trends, enhance artistic expression, etc.
For web developers, colors help to enhance user experiences, affect legibility, create appealing effects and aesthetics, indicate interactive elements, and evoke emotions. Web developers and designers must be very careful in choosing colors for their projects as it significantly affects how users interact with the page. Other reasons why developers must pay attention include;

Accessibility: some users may have visual impairment or color blindness. The colors should be used in such a way that there is enough contrast between the background and text. Also, different modes like light and dark modes or different color themes could be made available for the sake of users with color sensitivity.
Brand identity: colors are usually used to represent brand identity. When building for an organization, it is important to reflect the colors of the organization’s brand for consistency, and for reinforcing the brand's identity and recognition.
Also, take note of the cultural implications of colors and how to use colors to evoke the desired emotions.
Colors can also determine if the website/app will be visually appealing or repulsive to the users. It is important to ensure that beauty and aesthetics are taken into consideration.
Colors can also be used to direct the users on how to interact with the websites. Call-to-action buttons are usually made to stand out. Also, color red is usually used to warn users against deleting important data.

how to indicate colors in CSS

There are several color systems available in CSS. However, in this course, we shall discuss;
• Color keywords
• Hex color
• Hexa colors
• Rgb()
• Rgba()
• Hsl()
• Hsla()

Color keywords

One way of representing colors in CSS is obviously by their known names. Names like red, purple, green, blue, etc. are easily identifiable. There are also variations of those colors, like darkblue, cornflowerblue, darkgreen, darkorange, darkcyan, slateblue, slategrey, seagreen, hotpink etc.
Besides the fact that not all colors and shades have names, it is also a lot of work to memorize the colors by their various names. You may also know the name of the color you intend to use, but that name may not be a valid CSS color keyword or may look slightly different in CSS from what you know the color to look like.
Besides that, color keywords are only available for just 147 colors. Whereas, the human eye is said to see and distinguish approximately between 1 million to 1.5 million colors. And arguments are disputing this figure with claims that the eyes can see way more than that.
Also, the color keywords do not have alpha support, thereby making it difficult to add transparency to the colors.
In other to limit some of these challenges, CSS allows us to create colors, or mix colors with a couple of color systems. Some of them require mixing colors; others involve manipulating the lightness, transparency, and saturation of existing colors and hues.

Hexadecimal (hex) colors

The hexadecimal color system allows for a lot more flexibility with creating colors, and gives a lot more options to the designers/developers with colors to choose from. With the hex system, colors are created by mixing red, blue, and green.
The hexadecimal system starts with the # symbol and then followed by six digits. These digits range from 0-f. So, rather than have the numbers like
0 1 2 3 4 5 6 7 8 9,
as in decimal numbers, making up ten,
We have numbers

0 1 2 3 4 5 6 7 8 9 a b c d e f
Making up 16.

So to combine a hex color, you’ll have;

In decimal notation, each of these values corresponds to an integer between 00 and FF, or 0 and 255. The hexadecimal notation allows for the representation of 256 ^ 3 or 16,777,216 colors in total. Black represents the absence of all three colors; while white represents the full capacity of all three colors. To get various shades of grey, have all three colors in equal proportions.

You can also have as many shades of the same colors as you can imagine. A couple of blue shades for example.

We can make thousands of shades from blue alone, by ensuring that the value for blue is higher than that of red and green. You can also do the same with red and green. In most cases, a color picker will help with choosing colors.
Applying transparency
You can apply transparency to hexadecimal by adding an extra alpha value to the hex color. The closer the number is to zero, the higher the transparency while a higher number will be more opaque. For example,

(#000d or #fefe56dd will add a little transparency to the colors, and a color of say #0004 0r #fefe5644 will be much more transparent.)

Rgb() colors

rgb() colors are quite similar to the hexadecimal color system. They both represent a mixture of red, blue, and green with 255 possible values for each color. The difference here however is the syntax. The rgb() colors use decimal numbers of 0-255, separated by comma to represent each color.
Syntax;
rgb(red, green, blue);

Rgba()

Rgba() gives the opportunity to add opacity/transparency to the colors. The extra a there is called the alpha value and is a number between 0 and 1. The closer the number is to zero, the more transparent the color will be.

Hsl() colors

Hsl stand for
Hue: specifies the color. Represented by the degree along the color wheel. 0° is red,

Saturation: indicating the level of vividness of the color. 0 will give a gray color, whereas 100% will give the most vivid version of the color.
Lightness: in percentage indicating how light or dark the color would be;
Illustration
The image below illustrates the HSL hue. The saturation has been set to 100%, and lightness 50% for all cases.

2.
Now let’s take a hue of 0deg, and 50% lightness and see how different saturations look like

Now, let’s maintain the hue of 0deg, and saturation of 100% and see how the lightness plays out.

Conclusion

This text provides a comprehensive overview of colors in web development, including their importance, cultural implications, and how to represent them in CSS using various color systems.
Here is a summary of the color systems mentioned:
• Color Keywords: 147 predefined color names, e.g. "red", "blue", and "green".
• Hexadecimal (Hex): Six-digit code starting with #, e.g. #FF0000 for red.
• RGB: Decimal values for red, green, and blue, e.g. rgb(255, 0, 0) for red.
• RGBA: Adds alpha value for transparency, e.g. rgba(255, 0, 0, 0.5) for semi-transparent red.
• HSL: Hue, saturation, and lightness values, e.g. hsl(0, 100%, 50%) for red.
• HSLA: Adds alpha value for transparency, e.g. hsla(0, 100%, 50%, 0.5) for semi-transparent red.
The text also provides examples and illustrations to help understand how to work with colors in CSS.

BASIC CSS SELECTORS

Kemi Owoyele — Fri, 12 Jul 2024 21:53:37 +0000

CSS selectors are used to target specific HTML elements and apply styles to them. There are a couple of ways we can be specific about the element we intend to select. In this chapter, we are going to focus on four basic selection methods.

1. Universal selector (*)

Universal selector is used to target all elements in the page at once. This selector is usually useful in cases of some basic formatting. Most common use of the universal selector is to remove default margins and paddings.
Example

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

2. Selecting by element name

With this approach, all elements of the one named by the selector will be styled accordingly. This will only exclude those selected differently as we will see in future examples.
Code sample:
HTML

<h3>this is heading 1</h3>
    <p>this is paragraph 1</p>
    <p>this is paragraph 2</p>
    <p>this is paragraph 3</p>
    <h3>this is heading 2</h3>
    <p>this is paragraph 4</p>
    <p>this is paragraph 5</p>

CSS

body{
    background: lightgray;
}
h3{
    color: blue;
}
p{
    color: red;

}

Result

3. Selecting by id

An id is a unique identifier that sets apart an element from the other elements. Ideally, there should be only one element with the same id on a page. There could be many elements with the id attribute, but not more than one should bear the same name. Otherwise there will be nothing unique about the id. So to style an element with an id, use the id attribute to give it a name in HTML, then use the # symbol before that name, when selecting in CSS.

HTML

<body>
   <h3 >this is heading 1</h3>
    <p>this is paragraph 1</p>
    <p >this is paragraph 2</p>
    <p>this is paragraph 3</p>
    <h3>this is heading 2</h3>
    <p id="unique">this is paragraph 4</p>
    <p>this is paragraph 5</p>
</body>

CSS

#unique{
    color: green;
}
body{
    background: lightgray;
}
h3{
    color: blue;
}
p{
    color: red;

}

Result

4. Selecting by class

Class works kind of similar to id, but in the case of class, there could be more than one element with the same class name. To style an element with a class name, use the class attribute to give it a name in HTML, then use the . symbol before that name, when selecting in CSS.

Code sample
HTML

    <h3 >this is heading 1</h3>
    <p class="pink">this is paragraph 1</p>
    <p class="pink" >this is paragraph 2</p>
    <p class="pink">this is paragraph 3</p>
    <h3>this is heading 2</h3>
    <p id="unique">this is paragraph 4</p>
    <p>this is paragraph 5</p>

CSS

.pink{
    background: pink;
}
body{
    background: lightgray;
}
h3{
    color: blue;
}
p{
    color: red;

}

Result

Conclusion

Each selector type has its own purpose and usage. Understanding how to use each selector is crucial for effective HTML styling and layout control. Proper use of selectors can help create visually appealing and well-structured web pages, making it easier for users to interact with and understand the content presented.

Learn react js by building a countdown timer

Kemi Owoyele — Wed, 10 Jul 2024 15:08:23 +0000

In this article, we are going to learn react js from scratch by building a countdown timer. We will learn
• how to create new react app,
• to create a react component,
• to dynamically display content,
• to listen to and handle events
• to use the useState hook for state management and
• to manage function side effects with the useEffect hook
Our countdown time will
• accept input from the user to set time,
• validate if the time is in the future or the past;
• start counting down if the time is valid or alert the user to set the correct time if not
• When the counter counts to zero seconds, the user will be alerted that the time is up.
Before we start building the countdown timer with react.js, I’d like to let you know some of the assumptions I’ll be working with.
• I assume that you are proficient with HTML and CSS. I will not explain the HTML/CSS codes.
• I assume that you know JavaScript, and can probably build this project in vanilla JavaScript without much trouble. But I will try as much as possible to explain the JavaScript codes.
• I assume you are relatively new to react. I’ll explain all the react concepts as though you are completely new to react js.

Create react app

The first thing you will need to do is to set up a react development environment. To do that, we will open our terminal and navigate to the location where we want to create the app and run

npx create-react-app countdown-timer

npx will run the code on the internet and create a basic react app for us with the name “countdown-timer” or whatever name you used as an alternative.
After the app is created, navigate into the folder and open it with a text editor. In the folder, you are going to find a couple of folders and files. Some of the folders include;
• node_modules folder: stores installed packages and dependencies. This folder is to be untouched.
• public folder: this folder serves as the directory for publicly accessible assets. Initial assets in this folder include index.html, favicon.ico, index.css, logo images, manifest.json, etc. Files in the public folder do not require imports, and can be accessed directly from the root folder. Files in this folder may be deleted or tampered with, except the index.html file.
• src folder: src is short for source. It is where the source codes are kept. All your styles, logic, components, etc. are going into the src folder.
*files
*
The files include .gitignore, package.json, package-lock.json, README.md. These files are not to be tampered with. Except for the git ignore, in case you added some assets that you want git to ignore.
• index.html is the entry point to your react application. This is the file that will be returned from the server. The root component is then mounted on the index.html and the rest of the app's logic and interface will handled from there on.
• Index.js file is where the root component is mounted to reactDOM.
• App.js is the root component. A component is an autonomous segment of content, usually containing its logic and its HTML-like template. A react app is made up of a component tree with the root component at the origin point of the other components
To run the app, open your terminal, ensure it is navigated to your app folder, and type

npm start

A localhost address will be made available to you for viewing your app.

Create the CountDown component

In the src folder, create a CountDown.js file. Remember that the name of the file should start with an upper case, as this is the standard for component file naming. In the CountDown.js file, create a basic CountDown component and export the component.
Countdown.js file

const CountDown = () => {
 return 
 (<></>);
};

export default CountDown;

In your App.js file, delete the already existing content of the page, and create a basic App component. Then import the CountDown component and render it in your App component.
*App.js file
*

import CountDown from "./CountDown";
function App() {
  return (
    <>
      <CountDown />
    </>
  );
}

export default App;

Build The Interface Of The Countdown Timer

Go back to your CountDown.js file, in the return statement of your component, you will render jsx content. jsx is HTML like but is actually javascript. You may also create an app.css file and import the file at the top of your page;

import "./app.css";

We will create a section for selecting and displaying the target time. In this section, we will use the date time picker of the input-type date to allow the user to select the date and time for the target time. The time selected will be displayed in a div inside this section.
Another section will be used to display the time remaining in days, hours, minutes and seconds to the target time. For these figures, we will use 0 as the placeholders for now. When we get to the functionality part, we will dynamically output the figures.

HTML/jsx code

import "./app.css";
const CountDown = () => {
  return (
    <>
      <div className="container">
        <h1>Countdown Timer</h1>

        <section className="select-time">
          <div>Set Countdown Target Time</div>
          <input type="datetime-local"></input>
          <div>Countdown Target Time</div>
          <div className="time-set">0</div>
        </section>
        <section className="display-time">
          <div className="wrapper">
            <div className="time">0</div>
            <div className="label">Days</div>
          </div>

          <div className="wrapper">
            <div className="time">0</div>
            <div className="label">Hours</div>
          </div>

          <div className="wrapper">
            <div className="time">0</div>
            <div className="label">Minutes</div>
          </div>

          <div className="wrapper">
            <div className="time">0</div>
            <div className="label">Seconds</div>
          </div>
        </section>
      </div>
    </>
  );
};

export default CountDown;

you can style this page as you please.
CSS code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: "Segoe UI", "Roboto", sans-serif;
  background: radial-gradient(
    circle,
    rgb(190, 190, 190),
    rgb(117, 117, 123),
    rgb(95, 126, 228)
  );
  background-size: 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: aliceblue;
}

.container {
  color: rgb(255, 255, 255);
  box-shadow: 2px 2px 10px black;
  padding: 20px;
  background: linear-gradient(
    90deg,
    rgb(64, 60, 82),
    rgb(97, 97, 110),
    rgb(126, 130, 220)
  );
  border-radius: 15px;
  text-align: center;
}
h1 {
  font-size: 3rem;
  text-shadow: 1px 1px rgb(36, 32, 61), 2px 2px 4px rgb(36, 32, 61);
}
.select-time {
  background: rgba(36, 38, 51, 0.645);
  padding: 10px;
  margin: 10px 0;
  border-radius: 10px;
  box-shadow: 0 0 5px black;
  font-size: 1.5em;
  font-weight: bold;
}
.select-time input {
  padding: 5px;
  font-size: 1em;
  color: rgb(8, 2, 79);
  background-color: rgb(199, 199, 255);
 -webkit-text-stroke: 1px rgb(198, 106, 156);
}
.time-set {
  color: rgb(143, 198, 202);
  -webkit-text-stroke: 1px rgb(198, 106, 156);
}
.wrapper {
  margin: 10px 0;
  padding: 5px 0;
  box-shadow: 0 0 5px black;
}
.time {
  font-size: 2rem;
  font-weight: 900;
  -webkit-text-stroke: 2px rgb(36, 32, 61);
  text-shadow: 1px 1px rgb(36, 32, 61), 2px 2px rgb(36, 32, 61);
}

Appearance so far

Now that we have set up what our app will look like, we will work on the logic/ functionality of the app.

Adding functionality to the app

Before we go further into the JavaScript aspect, there are two dependencies that we have to import and briefly explain. We will import the useState hook and the useEffect hook from the react library.

import { useState, useEffect } from "react";

Place the code at the top of your component file.

useState hook

When you change the value of a variable either in reaction to some event or over time, react will not re-render the new value. The useState hook is used to inform react that the value of a variable has changed. This will trigger a re-render of the component, and the changes can therefore be reflected in the new render.
To use the useState hook, you will declare a variable with two values (the name of the variable we want to make reactive, and the function for changing/setting the value of the variable.), and set it equal to the useState.

const [targetTime, setTargetTime] = useState();

This code should be written in your component function, but above the jsx template.

Get user input from the date picker

The next thing we would do now is to use the useState hook to render the date and time that the user picks with the date picker or enters in the input tag. To do this, we will create a function and name it handleTimeSelected, this function will be an event listener to listen for changes in the value of the input tag. To make that value reactive and trigger a re-render, we will use the useState hook values. We will use setTargetTime to set the value changes for targetTime.

const handleTimeChange = (event) => {
      setTargetTime(event.target.value);
  };

In our jsx, we will reference the handleTimeChange function in an onChange event handler. Also, we will set the value of the input tag to be equal to targetTime.

<input
            type="datetime-local"
            value={targetTime}
            onChange={handleTimeChange}
       >
</input>

Dynamically output the value of the user-selected time

All we need to do here is to wrap the name of the variable we intend to dynamically output in curly braces, and place it in the jsx location we want it outputted in.

<div className="time-set"> 
{targetTime}
</div>

This can also be used to dynamically set HTML attributes, as we did above to set the value attribute to targetTime.

As we can see, the time selected with the date and time picker is showing in another div tag below it.
Check For Time Validity
Another thing we would like to check for is to verify that the time chosen by the user is a future date and time. If the time selected is already in the past, we would trigger an alert to notify the user that the time selected is invalid and set targetTime to “invalid”.
Back into the handleTimeChange function.
First we need to get the current time, then compare the current time with the selected time. To get current time, we will use the JavaScript date method.

const currentTime = new Date();
    const selectedTime = new Date(event.target.value);

Next, we will use a conditional statement to compare the values.

const handleTimeChange = (event) => {
    const currentTime = new Date();
    const selectedTime = new Date(event.target.value);
    if (selectedTime >= currentTime) {
      setTargetTime(event.target.value);
    } else {
      setTargetTime("Invalid Time");
      alert("invalid time; please select a future date and time");
    }
  };

Get the time remaining to the target time?
Now we are going to get the number of days, hours, minutes and seconds between the target time and the current time. This can be derived by deducting the current time from the target time. The number we are going to get will be the total milliseconds between those two periods. To get the other time durations, we will h divide the number appropriately.

  const getTargetTime = new Date(targetTime);
  const getCountDownTime = () => {
    const totalTimeLeft = getTargetTime - new Date();
    const daysLeft = Math.floor(totalTimeLeft / (1000 * 60 * 60 * 24));
    const hoursLeft = Math.floor((totalTimeLeft / (1000 * 60 * 60)) % 24);
    const minutesLeft = Math.floor((totalTimeLeft / (1000 * 60)) % 60);
    const secondsLeft = Math.floor((totalTimeLeft / 1000) % 60);
    return [daysLeft, hoursLeft, minutesLeft, secondsLeft];
  };

To get the total number of days left, we find the total milliseconds remaining, and divided the answer by 24 hours, multiplied by 60 minutes, 60 seconds and 1000 milliseconds. Then the function returned an array of the needed values.
Dynamically display the remaining time
Now we want to take the returned values from the getCountDownTime() function and display them appropriately in the jsx render. getCountDownTime() returns an array, in our jsx, we will display the corresponding index of the getCountDownTime() array.

<div className="wrapper">
            <div className="time">{getCountDownTime()[0]}</div>
            <div className="label">Days</div>
          </div>

          <div className="wrapper">
            <div className="time">{getCountDownTime()[1]}</div>
            <div className="label">Hours</div>
          </div>

          <div className="wrapper">
            <div className="time">{getCountDownTime()[2]}</div>
            <div className="label">Minutes</div>
          </div>

          <div className="wrapper">
            <div className="time">{getCountDownTime()[3]}</div>
            <div className="label">Seconds</div>
          </div>

Output

Set the countdown
The next thing we are going to do is to use setInterval to decrease the remaining time every second. We also want to ensure that the timer stops counting as soon as the time left is 0 seconds and the user is notified that time is up.
If you are familiar with JavaScript you probably know how to use the setInterval method. It is used the same way in react, but before setting up the setInterval, I want us to briefly explain the useEffect hook.

useEffect hook

The useEfect hook is used to handle function side effect in react. Function side effect in JavaScript is any effect outside the function’s local scope. If the function produces a result that is not part of the functions return value. Examples of function side effect include;
• Changing a global variable
• Interacting with the DOM
• Mutating external arrays, objects etc.
• Fetching data from external API’s
• Javascript animations
• Set timers
• Using web storage
• Etc.
React js is built on the concept of pure functions. Pure functions are functions that have no side effects. They always produce the same results if given the same inputs. This is because functions with side effects are quite unpredictable in behavior, harder to debug, test and maintain. There are also performance issues and memory leaks with regards to unnecessary re-renders or computation.
To handle functions with side effects, such as timers, api requests, updating UI etc we make use of useEffect hook.

How to use useEffect hook

First of all, we need to;
• Import useEffect from react
• Somewhere in your component, before the return statement, call the useEffect hook with two arguments.

• The first argument is a callback function containing instructions we want to execute whenever the useEffect is triggered.

• The second optional argument is an array of dependencies that will determine when the useEffect will run. If the array is empty, the useEffect will run only once after the initial render. If the dependency argument is omitted, the useEffect will trigger whenever there is a state change. If values are provided inside the dependency array, the useEffect will be triggered only when there is a state change in any of those values.
• To avoid memory leaks and other performance issues, it is important to clean-up resources when they are no longer needed. This is usually implemented with a cleanup function.
• Syntax

 useEffect(()=>{
    // excecute side effect
//cleanup function
  }, [an array of values that the effect depends on]);

Back to our countdown timer
First set up the useState for the timer that we intend to update

  const [timer, setTimer] = useState();

Use the useEffect hook to execute the setIntervals

useEffect(() => {
    const total = getTargetTime - new Date();

    const countDownInterval = setInterval(() => {
      if (total >= 0) {
        setTimer(getCountDownTime());
      } else {
        clearInterval(countDownInterval);
        alert(`Time up
           Set New Time`);
      }
    }, 1000);

At the stage the entire code in the countdown.js page will be

import "./app.css";
import { useState, useEffect } from "react";

const CountDown = () => {
  const [targetTime, setTargetTime] = useState();
  const [timer, setTimer] = useState();

  const handleTimeChange = (event) => {
    const currentTime = new Date();
    const selectedTime = new Date(event.target.value);
    if (selectedTime >= currentTime) {
      setTargetTime(event.target.value);
    } else {
      setTargetTime("Invalid Time");
      alert("invalid time; please select a future date and time");
    }
  };
  const getTargetTime = new Date(targetTime);
  const getCountDownTime = () => {
    const totalTimeLeft = getTargetTime - new Date();
    const daysLeft = Math.floor(totalTimeLeft / (1000 * 60 * 60 * 24));
    const hoursLeft = Math.floor((totalTimeLeft / (1000 * 60 * 60)) % 24);
    const minutesLeft = Math.floor((totalTimeLeft / (1000 * 60)) % 60);
    const secondsLeft = Math.floor((totalTimeLeft / 1000) % 60);
    return [daysLeft, hoursLeft, minutesLeft, secondsLeft];
  };
  useEffect(() => {
    const total = getTargetTime - new Date();

    const countDownInterval = setInterval(() => {
      console.log(total);
      if (total >= 0) {
        setTimer(getCountDownTime());
      } else {
        clearInterval(countDownInterval);
        alert(`Time up
           Set New Time`);
      }
    }, 1000);

    return () => {
      clearInterval(countDownInterval);
    };
  }, [timer, getTargetTime]);

  return (
    <>
      <div className="container">
        <h1>Countdown Timer</h1>

        <section className="select-time">
          <div>Set Countdown Target Time</div>
          <input
            type="datetime-local"
            value={targetTime}
            onChange={handleTimeChange}
          ></input>
          <div>Countdown Target Time</div>
          <div className="time-set">{targetTime}</div>
        </section>
        <section className="display-time">
          <div className="wrapper">
            <div className="time">{getCountDownTime()[0]}</div>
            <div className="label">Days</div>
          </div>

          <div className="wrapper">
            <div className="time">{getCountDownTime()[1]}</div>
            <div className="label">Hours</div>
          </div>

          <div className="wrapper">
            <div className="time">{getCountDownTime()[2]}</div>
            <div className="label">Minutes</div>
          </div>

          <div className="wrapper">
            <div className="time">{getCountDownTime()[3]}</div>
            <div className="label">Seconds</div>
          </div>
        </section>
      </div>
    </>
  );
};

export default CountDown;

Output

Conclusion

In this tutorial, we have explored the fundamentals of React JS by building a practical application - a countdown timer. We have covered key concepts such as component creation, state management, event handling, and side effect management using the useState and useEffect hooks. Our countdown timer is now fully functional, and we have gained hands-on experience by building a React application from scratch.

Bringing Web Pages to Life with CSS Animations: A Step-by-Step Guide

Kemi Owoyele — Sun, 30 Jun 2024 17:22:11 +0000

Animation is an art of creating an illusion of movement from still characters. It is a process that causes still characters to be rendered in such a way that they change form gradually. The term animation is derived from the word “anime”. Anime is a Japanese word that means “to move”, “or to give live”.
Animations are very important in any field that requires visual presentation of results. They have become more prevalent in creating educational materials, advertising, marketing, simulation training, data visualization, game development and of course, in entertainment.
In web development, animations are used to add life our web pages. Animated elements can be more attention grabbing, interactive and can create better user experience than still characters.
For instance;
• Animations can be helpful in guiding users on how to navigate through the website.
• It may help them to know when to be a little patient (like the loading animation).
• Can be helpful with providing feedback like letting them know that a message has been sent.
• It can also make the page more beautiful and captivating, thereby ensuring that users spend more time on the page.
In CSS, animation is the gradual change in style or set of styles applied to an HTML element. To animate an element with CSS, you have to write the codes to define the animation properties, and define the keyframes for the steps to the implementation of the animations and the properties to be animated.

CSS keyframes

Keyframes signifies start points, and end points for the specific animations/ transitions.
Syntax

@keyframes animation-name {
        from {
            property: initial value;
            property2: initial value;
            etc.       
 }

        to {
            property: final value;
            property2: final value;
            etc.
        }
    }

This is to say that the styles applied in the “from” block, should gradually morph into the styles applied in the “to” block. The “from” and “to” keywords are not so commonly used. What you are most likely to come across or use will be percentage values.


    @keyframes animation-name {
        0% {
            property: value;
            property2: value;
            etc.
        }

        100% {
            property: value;
            property2: value;
            etc.
        }
    }

Percentage values allow you to have as many transitional points as you may be required to have.

CSS animation properties

animation-name

This is the name of the animation. You can give your animation any name you like. This name will serve as the identifier when applying the keyframes and styles to the animated element.
Syntax

        animation: animate;

Then use the name as the identifier for the keyframes


    @keyframes animate {
        0% {
            border-radius: 0;
        }

        100% {
            border-radius: 50%;
        }
    }

Using animation-name property alone, you will not see any animation. To effect animation, you will have to at least set duration for the animation.

animation-duration

This is used to determine how long the animation should run. It is usually measured in seconds(s) or milliseconds(ms). 1000 milliseconds is equal to 1second.
syntax

        animation-duration: 10000ms;

        animation-duration: 10s;

example
HTML

        <div class="box"></div>

CSS

    .box {
        height: 300px;
        width: 300px;
        background-color: red;
        border-radius: 50%;
        animation: animate;
        animation-duration: 2s;
    }

    @keyframes animate {
        0% {
            border-radius: 0;
        }

        100% {
            border-radius: 50%;
        }
    }

The div will gradually change shape from a square to a circle in 2 seconds.

animation-delay

If animation-delay is set to an animation, the animation will wait for the set time before it starts. If the animation is set to repeat, only the first instance will be delayed, the subsequent animations will not be delayed. The animation-delay property accepts negative values. Hence, delay of 2s will cause the animation to wait for 2 seconds, while animation-delay of -2s will cause the animation to start as though the animation has started 2 seconds ago.
Syntax
Animation-delay: <time>;
example

   animation: animate;
        animation-duration: 2s;
        animation-delay: 0.5s;

animation-play-state

animation-play-state enables you to pause or play animation as you may need to. When you pause an animation, the animation will remain at the point it was when pause was activated, and resume from the same place as soon as the state is switched to running. The two major values for this property is “paused” and running.
For example, you could set the animation-play-state of an animated element to pause when hovered on, or you can use JavaScript to dynamically change the animation state based on interaction
Example

.box {
        height: 300px;
        width: 300px;
        background-color: red;
        border-radius: 50%;
        animation: animate;
        animation-duration: 2s;
        animation-play-state: running;
    }

    .box:hover {
        animation-play-state: paused;
    }

    @keyframes animate {
        0% {
            border-radius: 0;
        }

        100% {
            border-radius: 50%;
        }
    }

animation-iteration-count

This property is used to set the number of times that the animation will run. The values for this property must be a positive integer or infinite. The value of infinite will cause the animation to continue running till infinity.
Example

  .box {
        height: 300px;
        width: 300px;
        background-color: red;
        animation: animate;
        animation-duration: 2s;
        animation-iteration-count: 6;
    }



    @keyframes animate {
        0% {
            border-radius: 0;
        }

        100% {
            border-radius: 50%;
        }
    }

In this example, the animation will run for 2 seconds each, six times.

animation-timing-function:

animation-timing-function is used to set the rate of change of speed over the duration of the animation. Values to this property include;
ease: speed increases towards the middle of the animation, then slows down towards the end. This is the default value;
ease-in: starts slows, then becomes fast to the end
ease-out: starts quickly, then slows down
ease-in-out: starts slowly, seeds up then slows down again
linear: this will ensure that the speed is even all through.
steps(): makes stops according to the number of steps set
cubic-bezier(): used to set custom speed rates.

animation-direction

animation-direction is used to set whether the animation should play forward, backward, or alternate between the two. Values to this property include;
normal: The animation will play forward.
reverse: The animation will play backward.
alternate: The animation will play forward on the first cycle, then backward on the second cycle, and so on.
alternate-reverse: The animation will play backward on the first cycle, then forward on the second cycle, and so on.

animation-fill-mode

animation-fill-mode sets the style of the element after the animation is completed. It determines if the element will go back to its original style before the animation, or take up one of the styles specified in the animation keyframes. Values for the animation-fill-mode property include;
forwards: The animation will apply the styles from the last keyframe to the element after the animation executes.
backwards: The animation will apply the styles from the first keyframe to the element before the animation executes.
both: The animation will apply the styles from the first keyframe to the element before the animation executes and the styles from the last keyframe to the element after the animation executes.

animation shorthand property

The animation shorthand property is a CSS property that allows you to define multiple animation properties in a single declaration. It is a concise way to define animations, making it easier to write and maintain code.
Syntax
CSS

        animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;

Example

        animation: animate 2s linear 1s 3 alternate forwards running;

It is not compulsory to use all the values. Default values will be applied in place of the omitted values.

Multiple CSS animations on the same element:

You can apply multiple animations to the same element. All you have to do is separate the values with a comma.
Example

animation: animate-one 2s linear 1s 3 alternate forwards running, 
         animate-Two 4s steps(5) 4s 3 reverse forwards running;

Illustration

To illustrate all we have been learning so far, we are going to make a simple text typing animation example.
To start with, we create an html page with a simple short text.
HTML

    <h1>CSS ANI<span>MA</span>TION.</h1>

Then to add styles, we add some styles to the body tag to remove margins and add background color.
CSS

  body {
        margin: 0;
        padding: 0;
        color: tan;
        background-color: rgb(2, 2, 33);

    }

Add basic styles to the h1 tag;

    h1 {
        overflow: hidden;
        white-space: nowrap;
        font-family: consolas;
        border-right: 4px solid tan;
        width: 14ch;
        margin-left: 50px;
        font-size: 6rem;    
    }

The hidden overflow will ensure we are unable to see what text venture outside the width of the h1. We set the white-space to no-wrap, so that all our text will be on a single line, and the width we set to 14 characters because that is the total number of characters we want to implement the typing animation on. Next, we add out animation styles to the h1 styles.
CSS

    h1 {
        animation-name: type;
        animation-duration: 3s;
        animation-timing-function: steps(14);
        animation-fill-mode: forwards;
        animation-iteration-count: 5;
        animation-direction: alternate;
        overflow: hidden;
        white-space: nowrap;
        font-family: consolas;
        border-right: 4px solid tan;
        width: 14ch;
        margin-left: 50px;
        font-size: 6rem;
    }

Here, the animation name is type, the name is used as identifier for the keyframes



    @keyframes type {
        0% {
            width: 0ch;
            border-right: 4px solid tan;

        }

        99% {
            width: 15ch;
            border-right: 4px solid tan;

        }

        100% {
            width: 15ch;
            border-right: none;

        }
    }

The animation will last for 3 seconds, and it will make 15 moves, one move per character within a time frame of three seconds. This will happen 5 times as we have set the iteration count to 5. The animation will also go as though the typed text is erased and rewritten a couple of times because we have set the direction to alternate. To illustrate animation play state, we will add a hover effect that will cause the animation to pause when we hover on the animation.

h1:hover {
        animation-play-state: paused;
        filter: hue-rotate(60deg);

    }

We can also add another animation with a few styles to the span tag with the animation shorthand property.

 h1 span {
        animation: rotate-hue 1s linear 2s infinite normal forwards;
        text-shadow: 0 5px 15px rgb(114, 255, 6);
        -webkit-text-stroke: 1px rgb(250, 0, 79);

    }

    @keyframes rotate-hue {
        0% {
            filter: hue-rotate(0deg);

        }

        100% {
            filter: hue-rotate(360deg);

        }
    }

Output

Advantages of CSS animations

Flexibility : CSS animations can be used to animate a wide range of properties, including transforms, colors, and more.
Customizable : CSS animations can be customized using various timing functions, delays, and iteration counts.
Interactive : CSS animations can be interactive, responding to user input and hover states.
No JavaScript required : CSS animations can be created without any JavaScript code.
Improved user experience : CSS animations can enhance the user experience by providing visual feedback and smooth transitions.
Cross-browser support : CSS animations are widely supported by modern browsers, including Chrome, Firefox, Safari, and Edge.

Disadvantages of CSS animation

Browser compatibility issues: While CSS animations are widely supported, there may be compatibility issues with older browsers.
Performance issues with complex animations: Complex CSS animations can lead to performance issues, such as slow frame rates or lag.
Limited support for conditional animations: CSS animations have limited support for conditional animations, making it difficult to animate elements based on specific conditions.
Limited support for complex animations: CSS animations are best suited for simple animations, and complex animations may require JavaScript.

Cautions to take when animating elements:

Consider accessibility: Ensure animations don't cause accessibility issues, such as seizure triggers or distracting visuals.
Avoid over-animating: Too many animations can cause visual overload and slow performance.
Be cautious with animation durations: Long animation durations can lead to slow performance and visual lag.
Be mindful of browser support: Ensure animations work across different browsers and versions.
Note that not all CSS properties can be animated. Some CSS properties that cannot be animated are;
1) display
2) overflow
3) position (except for position: fixed which can be animated)
4) z-index
5) visibility (except for toggling between visible and hidden)
6) cursor
7) pointer-events
8) box-sizing
9) caret-color (except in Firefox)
10) unicode-bidi (except in Firefox)
11) writing-mode (except in Firefox)
12) direction
13) user-select
14) nav-index
15) tab-size
16) shape-image-threshold (except in Firefox)
17) shape-margin (except in Firefox)
18) clip-path (except in Firefox)
19) filter (except in Firefox)
20) backdrop-filter (except in Firefox)
Check the MDN documentation or other resources for the most up-to-date information on animatable properties, as browser support and specifications can change over time.

Conclusion

In conclusion, CSS animations are a versatile tool that can be used to create a wide range of effects, from subtle interactions to complex animations. By leveraging the techniques and properties discussed in this article, developers can create web pages that are not only visually stunning but also provide a rich and engaging user experience.

CSS and js standing fan

Kemi Owoyele — Sat, 29 Jun 2024 23:23:19 +0000

Check out this Pen I made!

Mastering Gradients in CSS: A Beginner's Guide

Kemi Owoyele — Sat, 22 Jun 2024 07:30:25 +0000

Gradients are gradual transition between two or more colors. They are used to create a smooth continuous change from one color to another. Gradients are used to add colored stripes and blends to backgrounds. They are usually treated as value to background-image property or to the background property.
Background gradients were introduced to CSS in 2008. The introduction of background gradients enabled developers to create appealing and dynamic backgrounds with better performance and faster load times.
There are three major types of gradients.
• Linear-gradient,
• Radial-gradient,
• Conic-gradient,
• And a repeating version of each.

Linear-gradient

linear-gradient is a kind of gradient that flows in a line. The line could be in any direction, and the direction could be specified either as an angle or as a named direction (to top, to bottom, to left or to right). If the direction is omitted, gradient will flow from top to bottom.
It is also required to have at least two colors for the gradient to work. You can also add start and stop points for each color. This is optional as by default, the gradient colors are evenly distributed. The points could be written in percentages or specific lengths.
Syntax
Background: linear-gradient( direction, color start-point stop-point, another color ….)
Example

 background: linear-gradient(red, green, blue);

In this example, direction and color points were not given. Therefore, the colors flowed from top to bottom and were evenly blended into each other as it went.
Example 2

 background: linear-gradient(to right, green, white, green);

0r we could use angles to specify the direction.

background: linear-gradient(45deg, red, blue, green);

Start points
Start points are used to specify where the color should start with no blend of the previous color. If only one value is added, it is taken as the start point. Start point for the first color is 0.
To illustrate start and stop points, I will add ten equal elements in the body, and give each a border-top of 2px. Each of these border-tops will help us with the demarcation for each ten%.

background: linear-gradient(to bottom, red, blue 40%, green 70%);

From the illustration above, the start point for color red is zero by default. Then color blue stars to blend into color red up until 40% where it becomes a hard blue. But color green creeps in soon, but at 70% it becomes fully green with no more traces of blue.

Stop point

You can also specify stop points, which will be the point the color can start blending into the next color.
Example

background: linear-gradient(to bottom, red 30%, blue 40% 60%, green 70%);

With a stop point of 30% for color red, blue is not allowed to blend into red until it gets to 30%. Then since blue also has a start point of 40%, blending of red and blue is only allowed between 30% and 40%. So we have a hard blue from 40% to 60% before the next color (green) starts blending in. then at 70%, which is the start point for hard green, the blue stops. The stop point of the last color is 100% by default.
To create complete hard colors without blending into each other, the stop point of the previous color should be the same with the start point of the next color.
Example 2

background: linear-gradient(to right, green 0 33%, white 33% 66%, green 66%);

Radial-gradient:

Radial gradient presents colors in circular or oval form. The colors radiates out from the center, unless otherwise indicated.
Example

background: radial-gradient(white, blue);

You can specify that instead of an eclipse-shaped gradient, you will have a circle irrespective of the aspect ratio of your device screen.

 background: radial-gradient(circle, white, blue);

You can specify where you want the colors to radiate from

background: radial-gradient(circle at top, white, blue);

You can also specify the direction with percentages or other measuring units.

background: radial-gradient(circle at 15% 95%, white, blue);

You may also add start/ stop points to the colors.

background: radial-gradient(white 35%, blue 35% 70%, white 70%);

You can create interesting patterns, by manipulating these features along with the background-size and background-position properties.

background: radial-gradient(circle at 5% 50%, white 35%, blue 35% 70%, white 70%);
background-size: 50px 50px;

background: radial-gradient(at 0%, blue 50%, white 50%);
background-size: 50px 50px;

Conic-gradients

Instead of radiating from the center, conic-gradients rotate around the center (or whatever center point is specified).

 background: conic-gradient(red, green, blue);

The gradients rotates clockwise, usually from 0deg.You can specify the center point of the gradient so instead of 0deg, you may use 45deg for example.

 background: conic-gradient(from 45deg, red, green, white);

You may use phrases like from top, from left etc, or you may use percentages or other measuring units to set the beginning point of the conic gradient. This could be set horizontally and vertically.

background: conic-gradient(from 45deg at 30% 5%, red, green, white);

You can also set the start point and end points for each color.

background: conic-gradient(from 45deg at 30% 5%, red 10%, green 10% 20%, white 20% 30%, yellow 30% 40%, pink 40% 60%, black 60%);

You can also use gradients to create interesting patterns.

background: conic-gradient(from 45deg at 0% 5%, black 10%, grey 30% 40%, black 60%);
background-size: 50px 50px;

background: conic-gradient(from 45deg at 50% 55%, black 10deg, grey 30deg 40deg, black 60deg 100deg, blue 180deg);
background-size: 50px 50px;

Multiple background gradients

You can also use multiple gradients with comma (,) separating each gradient.

background: conic-gradient(from 45deg at 0% 5%, black 10%, grey 30% 40%, black 60%),
linear-gradient(to bottom, rgb(109, 16, 16) 30%, rgb(12, 12, 95) 40% 60%, rgb(10, 70, 10) 70%);

background-size: 50px 50px;
background-blend-mode: screen;

Conclusion

Gradients provide beautiful alternatives to using url() images as they are lightweight and can be easily scaled to look consistent across devices. They can also be used to create dynamic effect, such as hover states, transitions, and animations. People also use gradient backgrounds to create images or artistic effects with a single div.

Sallah greeting with ram

Kemi Owoyele — Sun, 16 Jun 2024 14:34:10 +0000

Check out this Pen I made!

Creative CSS Border

Kemi Owoyele — Fri, 14 Jun 2024 17:34:21 +0000

Check out this Pen I made!

3d rotating octahedron

Kemi Owoyele — Fri, 14 Jun 2024 16:31:46 +0000

Check out this Pen I made!