Forem: Losalini Rokocakau

Mastering React: A Mindset for Component-Centric Development

Losalini Rokocakau — Tue, 28 May 2024 22:55:00 +0000

React is a widely embraced front-end library renowned for crafting intuitive UI/UX experiences. However, there is a necessary fundamental shift in mindset to have a mastery of React. As opposed to the instruction-based way of building in JavaScript, React apps have a component-based architecture. To learn & eventually build with it requires a complete change of perception.

This article will dive into how you can think & view sites in React before building in it. It draws parallels to the semantics & layout of a site and explores the advantages of adopting a component-based architecture.

Layout of a web page

The layout of a web page is quite simple. There is a header or a navbar, followed by the other parts such as the sidebars, main sections in the middle & the footer at the bottom.

This image exemplified by W3Schools gives the best perspective of its layout.

With this overview, we can also view React apps in a similar model & conceptualize each segment as a component.

Deconstructing this model into components, we identify elements such as a Header or a Navbar component, a Hero section component, the second section which can be for advertisements called an advertisement component, a side-bar component & a footer component.

Thinking of components as Lego building blocks helps as each piece is fitted together through interlocking to create a cohesive whole.

Now these components can even be broken down further into smaller components and so on. We will keep it quite simple for now.

A real-life example using W3School’s home page

Let’s take a look at the W3School’s homepage. We will focus on the main parts for brevity & in this case, will make it simpler to understand how it could be broken down into components. This means that the other sections (except for the footer) after the second section is excluded.

Clearly we see that there are 5 main components — a header, a navbar, the hero component, the HTML markup component and the footer.

This is how the page is broken down:

As explained earlier, there can also be further breakdowns of the page into much smaller components making things much more modular & maintainable in the long run.

Take the footer for example. It can be broken down into 5 more components as seen in the image below.

This can also be done on other components such as the header or even the hero component. How you would like to break down your applications into components is entirely dependent on how you want it to be. As long as they are re-usable and fits seamlessly with the other components to reach your desired result.

Benefits of deconstructing a site’s layout into components

There are several reasons why using components is beneficial, especially during development.

1. Re-usable components

Components can effortlessly be re-used across various pages or even on another site.

2. Separation of concerns

This is a great way to keep the problems of a component isolated from every other component. It‘s encapsulated within a particular component but not in the others.

3. Isolation of logic

Speaking of isolation, the logic behind these components remains within the component.

4. Modularity

The components are just JavaScript modules (ES6 modules). Having these modular building blocks encapsulates specific functionalities which makes it easier to maintain & test through testing frameworks such as Jest.

5. Easier for Maintainability

The component-based architecture gives a more structured & clear flow of how these building blocks fit together. It’s easier to maintain, refactor & debug.

Adding a new feature/component becomes even easier too.

6. Consistency

The architecture also provides consistency in the design & eventual behaviour of the app.

7. Performance Optimization

The application’s performance is optimized since we can render the parts that need to be rendered onto the UI. Ultimately, this prevents any unnecessary re-renders of components that are not used.

8. Scalability

The scalability of the app is more efficient as complex UI becomes more manageable once it is broken down into smaller parts.

Summary

React empowers developers to construct robust and scalable applications. This means there is a paradigm shift in perception to a component-based approach. It is akin to compartmentalization and is a high-level abstraction.

With this altered mindset, we can easily map out what parts we need, the parts that can be re-used & the ones that need to be rendered conditionally, and so on.

Re-thinking application building in this way helps in understanding React before you will even learn it. In fact, this will also be a great introduction if you will dive into other technologies such as no-code tools that uses this conceptualization.

📝 Additional Resources

For further insights, refer to the React documentation to learn more about the library.

🔍 Connect with me!

Follow me on X and LinkedIn if you like my work and want to stay updated for more.

🙏🏽 Support

If you’ve found my work helpful & want to support it, you can do so here & it’s greatly appreciated!

CSS Animations: Create Bouncing Ball Animation From Scratch

Losalini Rokocakau — Sun, 13 Nov 2022 16:52:44 +0000

One of the things that I had always wanted to do with projects' I've worked on during my ongoing journey as an aspiring software developer was to make my website's UI a lot more appealing & less boring to look at.

This isn't to say that the color schemes & design specifications I had to abide by weren't perfect for this. Instead, it is to make it…well….more appealing. Or at least to be quite frank…not static.

It created a nagging thought in mind every time I worked on a project. Browsing through the beautiful designs on Dribbble for an hour every day didn't help either (or so I thought). Eventually, I came across one of the coolest CSS properties I believed solved this for me (all thanks to one of my previous projects!): the CSS Animation.

This article will be a step-by-step tutorial guide on using the CSS Animation property to create an animation. The animation will be of a ball bouncing infinitely in a confined space when dropped from above. Before we 'bounce' into it, you may need to have at least a beginner to advanced beginner level of understanding of HTML5 and CSS3. Like I've said, I found this CSS property to be useful for some of my project's UI & you'd probably find it useful too! Let's get right into it!

(NOTE: You will need a text editor for this whether it's Visual Studio Code or Atom etc.)

Step 1: Create your folder with the following files & folder in it.

Open your text editor and create your folder as seen below:

Fig. 1.0 Create the folder for this tutorial.

I've created a folder called 'animations-article-tutorial'. Within it, I have created:

an index.html file
a styles folder that has:

a) a CSS-Resets.css file

b) a style.css file

Step 2: Paste & save the CSS Resets code from Eric Meyer's CSS Resets file into the CSS-Resets.css file.

This is to reset/remove any default CSS stylings of any web browser you'd use to view your work.

If you need to read more about this, visit Eric Meyer's website where he explains more about this.

Step 3: Copy & paste the code below into your index.html file and your style.css file

Fig. 1.1 Create the files for the web page.

Step 4: Create a ball.

Now, we can't bounce a ball if it doesn't even exist! Let's create one using the HTML & CSS code below.

Fig. 1.2 Creating the container in which the ball is going to be bouncing in & the ball itself.

Fig. 1.3 The bouncing-ball-container & the ball contained in it.

Step 5: Name your animation & store it as a value for the animation-name property

This is where the real fun begins - the nitty-gritty!

An animation would need a name whether the animation is a rotating square when hovering your cursor over it or a constantly color-changing (chameleon) rectangle. This name will then be the value of the animation-name property in the CSS code.

In our case, our animation is a bouncing ball. To keep animation names clear & concise, I've made up the 3 rules below for good naming conventions:

name the animation to be exactly what it is doing &/or what it
is being applied to (for simplicity's sake)
keep the alphabet letters to lower case
hyphenate each word in the animation-name

To put all this together, I've come up with this animation name for our animation: bouncing-ball. This is the value for the animation-name property.

Back to your text editor, you will place the property and its value as such in your style.css stylesheet:

Fig. 1.4 Creating the animations' name and placing it as a value for the animation-name property

Step 6: Create an animation!

From Step 5, we've named our animation to bouncing-ball. We'll also need this value to create the animation.

To create the animation, we'll be using the @keyframes animation-name {} rule. In place of the animation-name in the @keyframes rule, put your animation-name property's value there:

Fig. 1.5 The keyframes rule

There are two ways in which you can create the animation code:

Fig. 1.6 The first way to create the animation code

Fig. 1.7 The second way to create the animation code

For the first keyframe seen in Fig. 1.6, we are creating some animation code from:

a. the initial state (0%) using the 'from' rule and;

b. then the final state (100%) using the 'to' rule.

The second keyframe in Fig. 1.7, we are creating an animation code from its:

a. initial state (0%);

b. to 25%;

c. to 75% and;

d. its final state (100%).

Keep in mind that the percentage values of the different states can change to fit into the animation you are trying to create. You can even add more percentage values for different states.

Within the curly braces of the rules at different states, this is where you'd specify the CSS properties of the element you're targeting and the different values you'd want it to change to.

We will be using the second keyframe to create our bouncing ball animation.
Place the code below for the animation within the curly braces of the @keyframes rule:

Fig. 1.8 The animation code for the bouncing ball animation

For a brief explanation of the animation code in Fig. 1.8, our animation begins from the initial state (0%) with our helper properties (top property & left property for our animation) both at values where the ball is at the top-left corner of the container.

Since we are dropping the ball from a height & the ball has to bounce from left to right, the left property has an absolute-length value of 0px, and the top property has an absolute-length value of 0px for the container we have created.

The value of the top & left properties are the only things we would change for each state to make it bounce from left to right.

At 2%, we would expect the ball to be hitting the bottom of the container & moving to the right. The left property will then have a value of 75px, and the top property has a value of 290px. Then, at 4% we would expect the ball to bounce & still move further to the right. Hence, the left value is 116px and top value is 100px. From here, it keeps alternating between values from when it hits the bottom of the container & when it bounces back up into the air (and of course, the left value keeps increasing since it's moving to the right). These values and the states' percentage values can definitely change for however you like it to be for your animation.

Step 7: Make the animation work!

Still here? Phew! Ok, great! And awesome job so far!

Now, we've created the animation and have named it to what the animation is about. But, it's not working for some reason?!

That's because we aren't done yet! We need to set a few more properties to get it to work. To get the ball bouncing.

This brings us to the following animation properties listed below and the different accepted values for each property:

animation-duration: time in seconds;
animation-iteration-count: positive integer value | infinite;
animation-direction: normal | reverse | alternate | alternate-reverse;
animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear | cubic-bezier(a,b,c,d);
animation-fill-mode: none | forwards | backwards | both ;
animation-delay: positive value for time in seconds | negative value for time in seconds ;

We want the ball to:

bounce & keep bouncing for a longer time till it stops bouncing for e.g for 15 seconds.
bounce infinitely.
bounce in only one direction (from left to right)
have an almost natural bounce from beginning to end.
have no other CSS styles for the ball at the initial state & final state.
start bouncing for at most 1 second.

The great thing is….these are achievable!

Let's go right back to the text editor at lines 39–44 and type down the code for the ball class as we see below:

Fig. 1.9 The animation properties and values to use at lines 39–44

Alright, now you can view your work on the browser again and it should look a lot like the one in this video.

If your animation looks like the one in the video, great job! If it doesn't, don't worry….just go back to the top of this article & follow the same steps.

Feel free to change the values of the properties or even add more to the keyframes! There's so much more you can do with animations & it will make your websites a whole lot cooler than ever before! This simple animation is just the beginning of taking your websites to a whole new level.

If you want to see the files for this tutorial, you can find them here. If you need extra & simpler readings on CSS Animations, you can find it here on W3Schools which is what I found helpful for me. There is also an Animation Cheat Sheet provided here that might be helpful in your projects.

I hope that you have found this article useful & will even begin using animations in your projects as I did. Also, feel free to add any comments, etc that you have for my article. You can surely reach out to me on my LinkedIn, GitHub & Twitter. And please don't forget to share my article! Vinaka!

This article is also published on HackerNoon and Medium.

A Beginner’s Guide to Understanding & Recognizing Different Cyber Threats

Losalini Rokocakau — Mon, 07 Nov 2022 15:25:36 +0000

With technology being so ever-evolving, it also presents a whole bucket of snakes to many users and particularly the most vulnerable. Many companies & innocent individuals have been affected by this bucket of snakes — both old & new snakes. Some even lose their life savings or sensitive information over some hackers’ self-acclaimed “curiosity”. Having a basic understanding of these attacks can help a great deal in recognizing & potentially saving your company, yourself & many others from these threats. Awareness is vital. Knowledge is key.

This article will dive into understanding & recognizing some cyber threats. It will not cover every example for each attack or every attack. Neither will it be an in-depth coverage as it will only cover a few commons one you or your company need to look out for.

1. Malware

Simply put malware is some malicious hardware, software, or firmware that is being inserted into a system to gain unauthorized access to it & to cause damage.

There are several types of common malware:

Virus

An application that attaches itself (like a leech) to programs in order to alter the data or even delete it. And usually without the user’s permission.

This can be downloaded by clicking a link sent to you by a foreign email or one you’ve found & clicked on from someplace else on the web.

Adware

Software that shows advertisements on your web browser & causes performance issues.

You’ve noticed that a website you’ve visited has been projecting lots of ads & it’s also starting to slow down the page, then most likely the computer or device has been affected by adware.

Spyware

It is code that is downloaded without user authorization that, as the name suggests, spies on any information or data the user has or types in on their computer. This sensitive data can then be relayed to a third party & used by them to harm the data owner.

If you type something on your computer & it takes a while for it to display on your screen, it’s probably due to spyware. Now, this works in conjunction with a keylogger being embedded into it that essentially records whatever you type in including your passwords.

Ransomware

Maybe you aren’t allowed access to your data. Or perhaps the hackers are threatening to publish your sensitive information online under one condition — that you pay them whatever amount they tell you to pay.

This is a case of ransomware.

Worms

Unlike a virus, a worm is some code that makes copies of itself from one device to another without human interference which is exactly how it spreads.

Perhaps someone at work sent the same email to everyone in their contact list that also has the same subject line as the foreign, malicious email that they’ve received — this is an example of a worm.

Trojan Horses

Similar to spyware, it disguises itself as legit software so that the user downloads it and allows hackers access to the user’s system.

A common way hackers disguise themselves & their intentions is by masquerading as legitimate anti-virus software.

2. Phishing

This has total reliance on social engineering. That is to say, the hacker relies on what is seemingly a normal human interaction with the user to extract critical information. The attack usually starts off directly on the user.

There are several types of phishing attacks:

Vishing
Smishing
Spear Fishing
Whaling

This attack could be through an email with a malicious link included in it, calling the user as a banker from the user’s bank to ask for this information, or sending a text message instead with the malicious link in it.

3. SQL Injection

SQL injections are the type of attacks that use the SQL database language to extract information & manipulate data from an application’s database. Ultimately, it also damages the database. This will actually be a query that is injected when a user inputs their data in the application that has to be processed & saved in the database.

There are several types of SQL Injection attacks:

Union-Based Injections
Boolean-Based Injections
Error-Based Injections
Out-of-Band Injections
Time-Based Injections

One tell-tale sign of SQL Injections is the application continuously behaving differently than what is expected or content being changed than expected.

4. Cross-Site Scripting (XSS)

This deals with a security vulnerability in the web application & sites, especially the ones in which the user interactions involve user inputs (e.g forums & commenting). The attacker can enter malicious code into the web application using a browser-side script. When a user visits the web app & puts in their input (e.g login credentials), the malicious code executes giving the hacker control of the user’s browser & system or stealing sensitive information.

Here are the types of XSS attacks:

DOM-based XSS
Reflected XSS
Stored XSS

One example is if you notice that you can’t seem to control your browser when visiting a website, then this is an XSS attack being deployed. And of course, this is just one of many signs.

5. Cross-Site Request Forgery (CSRF)

This is another web security vulnerability where a user of a site visits it through a link sent by the attacker who hopes that the user is logged into their account on the site.

During this session, a user under their authenticated account can do all sorts of things such as change their password, interact with other features of their account & transfer funds. In which the site will validate their request and sends all of that data, access, funds, etc back to the attacker.

This link can be sent to a user through malicious emails, blogs, or websites to name a few.

6. DDoS Attacks

DDoS (Distributed Denial of Service) attacks target a network in order to ‘deny’ services to its users. It basically denies users of the network access to resources provided by it.

The attacker uses multiple remote locations (usually with the help of botnets) in order to execute the attack on the network. They would flood the network with so much internet traffic that the network will in a sense, collapse & shut down. A network can only take in so much traffic at a time.

The common sign of a DDoS attack is when a site becomes unavailable or resources are unavailable. Especially, when it is down for a period of time.

These are just some bare-bone examples of these cyber crimes along with what these attacks comprise. There are also attacks where most of these threats are combined or layered together. So it is a good headstart to be informed of what they are and the many clever ways that cybercriminals use to trap their victims.

I hope that you’ve found this article informative enough. Not only for yourself but many others who may be easy targets for these attacks.

If you have any comments or suggestions, please feel free to do so. You can find me on GitHub & LinkedIn.

Also published on HackerNoon, Medium & Hashnode.

How to Temporarily Resolve CORS Error in the Console

Losalini Rokocakau — Mon, 07 Nov 2022 12:03:25 +0000

You may have exhausted all solutions to make your site render on the browser but nothing seems to work. Then, you’ve checked the developer tools console only to get an error saying that CORS is blocking your API requests.

Fig. 1 A preflight request error on the console.

You’ve probably scoured the internet & found possible solutions to the problem only to find out they don’t work for you. For instance, you may have done these:

Enabled Google Chrome CORS extension
Disabled web security of the browser by changing the file path in the Target property
Installed CORS package & re-writing your JavaScript code to suit it
Endless changing of the specific API you’d use
Changing the API endpoints endlessly too
A rabbit hole of more readings, forum discussions & videos

If this sounds like you, then you’re reading the right article!

This article will delve into a simple & temporary fix for this problem. You will need:

Windows OS (I’m sure the steps may be similar for other OS but uses OS specific commands)
Windows Command Prompt (CMD)
This list of Windows CMD Commands

Step 1: Open Windows CMD

Open the Windows command prompt.

Fig. 2 The Windows CMD

Step 2: Navigate out to the C:// drive

Similar to Linux commands for navigating to or out of a folder, navigate to C:// drive.

Fig. 3 Navigate to C:// drive using the cd command

Step 3: Navigate to the file path where the ‘chrome.exe’ executable file exists

There are two possible file paths for this. You will need to navigate to the folder where it exists:

1st file path: C:\Program Files (x86)\Google\Chrome\Application

2nd file path: C:\Program Files\Google\Chrome\Application

On my machine, it exists in the 1st file path as seen below.

Fig. 4 Navigate to the folder where chrome.exe is using the cd command. dir command is to list all files & folders in the current directory you’re in

Step 4: Disable web security on a new instance of the Google Chrome browser

Use the command below to disable web security.

Command:

chrome.exe --user-data-dir=”C:/Chrome dev session” --disable-web-security
It simply creates a new unsecured window (instance) for Google Chrome.

Rest assured that only this newly created instance/window of Chrome is unsecured. Any other open windows of Chrome are still secure & not affected by this disabling.

Fig 5 Using the command in the prompt automatically creates a new unsecured window for Chrome. This doesn’t affect all other open Chrome browsers.

Fig 6 The newly created window. Notice in the red border that it notifies you that it’s an unsecure instance

Step 5: Use the browser to see your site & to temporarily resolve the CORS issue

Whether you’re deploying your site using a live server extension in VSCode, localhost URL when using webpack, or maybe a live demo version, just paste that URL in the browser (where it’s supposed to be) and you’re done!

You’ll see the site render on the page & the CORS issue is resolved for now so you can get back to coding.

I hope this helps you out if you’re encountering this problem & the process is not tiresome. You can further explore this solution here which helped me. A wonderful explanation of CORS can also be found in this video.

Thanks for making it through this article & I hope you’ve also enjoyed it. Follow the steps of this article diligently, then you’ll be fine.

Feel free to reach out to me for suggestions or comments & please share this article with those who might need it! You can find me on GitHub & LinkedIn.

This article is also published on Medium, HackerNoon & Hashnode.