DEV Community: Stephen

Newbie to Software Engineering - My Personal Journey

Stephen — Thu, 16 Feb 2023 10:30:43 +0000

As a newbie to software engineering, I know I had a lot to learn before I could even think about being a successful software engineer. My personal journey has been a long one, and I have learned a lot over the past year. As a software engineer, I have had to learn the basics of coding, object-oriented programming, and debugging. I also had to learn about software architecture and design, database management, user experience, and more.

The most difficult part of my journey has been learning the fundamentals of software engineering. I had to understand all of the concepts and terminology before I could even start coding. Then I had to learn the different tools and frameworks that help make coding more efficient. I also had to become familiar with the coding languages and technologies that are used to develop software.

The next step in my journey was to learn how to build and debug a software system. This was perhaps the most challenging part of the job, as I had to understand the various components of a software system and how they interact with each other. I had to learn how to debug code and troubleshoot errors, as well as how to write unit tests and maintain code quality.

Another important part of my journey has been learning how to collaborate with other developers. I had to understand the different kinds of software development processes and which ones work best for certain types of projects. I also had to learn how to communicate with colleagues, clients, and other stakeholders about the project.

As a software engineer, I have had to take the time to learn about new technologies, frameworks, and trends to stay up-to-date. I have attended conferences, workshops, and webinars to stay informed. I also read blogs and articles from other software engineers who are also starting their journey to learn what they can do to be successful.

My journey as a software engineer has been a long and rewarding one. I have learned a lot and continue to learn new concepts every day. I am excited to see how far I can take my skills. For any new software engineer out there, I hope that my experiences can help you on your own journey towards success!

How to add shake animation on input:invalid

Stephen — Tue, 27 Sep 2022 16:21:17 +0000

In this short article we'll create a simple HTML with an input tag in a form tag and animate the input when user input is not valid.
This might seem a bit difficult and you may think you need Javascript to complete this task,but with only HTML and CSS(keyframes) we'll get this done.

Let's write some code

Adding our HTML

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
</head>
  <body>
     <form action="">
        <input type="text" minlength="5" />
      </form>
  </body>

</html>

Using the :invalid pseudo selector

In our css we style the input with the :invalid pseudo selector

<style>
input:invalid{
animation:shake .3s
}
</style>

Adding shake animation with keyframes

Animations in CSS are mostly done with keyframes and so will our shake animation

<style>
.....
@keyframes shake{
25%{transform:translate(4px)}
50%{transform:translate(-4px)}
75%{transform:translate(4px)
}}
</style>

Final Results

We set the minimum length of our input to 5, this means the input is invalid if the user enters less than 5 characters.
And the input box shakes when the user input is less than 5 , thus the form is invalid

Adding a background image to a text.

Stephen — Thu, 01 Sep 2022 23:58:05 +0000

In this tutorial, we'll see how to add a background image to a text and this can be any image of your choice.

I already posted a complete video tutorial on my YouTube channel, and you can watch it there.

Now, let's get right into it!

The interface we'll be expecting

We'll deal with only 2 files here ; index.html and styles.css.

The HTML SETUP
We'll add our standard HTML boilerplate and link the external stylesheet(styles.css)

<!DOCTYPE html>
<head>
    <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body> </body>
</html>

Now we're going to add an h1 tag to the body of our HTML

<!DOCTYPE html>
<head>
    <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body> 
 <h1>Hello World!</h1>
</body>
</html>

And that's that for our HTML

Adding Styles to our HTML
The first thing we want to do is to increase the font size a bit,I'll set it to a 100px

h1{
   font-size:100px;
  }

Then we'll add a background image from the Pexels Website

h1{
  ...
 background:url(https://images.pexels.com/photos/7422479/pexels-photo-7422479.jpeg?cs=srgb&dl=pexels-nothing-ahead-7422479.jpg&fm=jpg)

Now we'll have an interface like this:

But we rather want the image in the background of the text and not in this way, this is how to implement that

h1{
  ...
  background-size: contain;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

Finally, we should get the result we expected when we preview int the browser

Conclusion

Thanks for reading to the end!
You can watch the video version of this tutorial here.
Consider giving me a follow on my Twitter if you liked this article.