DEV Community: Obioha victor

My goal for the next two years.

Obioha victor — Sun, 30 Jun 2024 19:11:51 +0000

I have four goals I wish to achieve for the next two years, and they are:
1. Be a better product designer and frontend developer: Making quality user interface that guarantees users a satisfactory experience is my goal for the next two years and I plan on achieving this from the HNG internship- https://hng.tech/internship.
2. Be HNG finalist: my goal is to complete this internship successfully as it will be beneficial to my career.
3. Get a remote job
4. Constantly improve: I have always loved learning and will continue to learn to advance my career.
Here is a diagram illustrating my goals- https://www.figma.com/design/B4Qi4X48RYqxRkByfrRR99/Untitled?node-id=0-1&t=FVMKwp6i4mLEJElB-0

TypeScript vs React; which should I learn as a frontend developer.

Obioha victor — Sun, 30 Jun 2024 13:56:40 +0000

React is a JavaScript library use to build reusable UI components for single page applications. It uses a jsx(JavaScript XML) syntax that allows you to write html-like code. Although jsx is not compulsory, it makes building applications with react easier.
Typescript is a superset of JavaScript, which means that typescript is JavaScript but with types. It is designed for large scale application and is transpiled to JavaScript.

Advantages of react

Easy to learn and use: React is very beginner friendly and can be learnt with prior knowledge of html, CSS, and JavaScript.
Mobile development: React is not only used for web development. With the help of a framework like react native you can build a mobile application with your knowledge of react which makes you more versatile as a developer.
Component based architecture: React uses a component-based architecture that allows developers to build reusable UI components which makes development faster, less redundant and easier to maintain and scale.

Advantages of Typescript

Compile-time error: Typescript enforces strict typing during compilation time which helps reveal potential errors and bugs, this happens before a typescript code is transpiled to JavaScript.
Type inference: Typescript can infer the types of a variable from the value assigned to the variable thereby reducing development time and improving developer experience.
Strong and static typing: Typescript allows you to specify the types of your variables, function parameters, and return values which help reduce errors and potential bugs.

Conclusion

Well, you might wonder which is the best for me to learn as frontend developer. I would say learn both- yes you heard me right. Typescript gives you extra superpowers as a JavaScript developer and react makes building user interface easier, I would advise you reap the benefits of both worlds. And if you need an internship to build all the necessary experience you need for your react journey, I recommend the HNG internship program -https://hng.tech/internship, or you can opt for the premium -https://hng.tech/premium to access exclusive opportunities like certificates, reference letters, and the latest job openings. It is a remote program, so you don't have to worry about commuting. Wish you the best on your coding journey.

HOW TO MAKE A HOVERABLE DROPDOWN MENU IN CSS

Obioha victor — Tue, 12 Mar 2024 23:30:06 +0000

Step 1: Create the body of the dropdown menu. In this case, we will give it a class of “menu”.

<div class="menu">

</div>

Step 2: Create a button for the menu in the body of the dropdown menu we created above

<div class="menu">
    <button>Looking for more</button>
</div>

Step 3: Add the menu item list in the dropdown menu, in this case, we will give it a class of “menuContent”

<div class="menu">
    <button>Looking for more</button>
    <div class="menuContent">
        <div>Eguisi</div>
        <div>Afang</div>
        <div>Okro soup</div>
        <div>Fried rice</div>
        <div>Turkey</div>
    </div>
</div>

Step 4: time for styling. We will set the “menu” class to display: inline-block and position: relative;

.menu{
            display: inline-block;

            position: relative;
        }

Step 5: we will style the button to our choice, for example;

button{
            background-color: blue;
            width: 330px;
            font-size: 40px;
        }

Step 6: we will style the “menuContent” class.

.menuContent{
            font-size: 35px;
            display: none;
            position: absolute;
            background-color: gray;

        }

Note: your styling can be different from this but what is compulsory is the “display: none” property, and "position: absolute"; so we can place the menuContent directly under the menu div with CSS

Step 7: we will make it such that the menu content will be displayed only when the menu button is been hovered

.menu:hover .menuContent{
            display: block;
        }

We can add more interactivity to the menu list content, for example;
Step 8: We can add class to the items ;

<div class="menu">
    <button>Looking for more</button>
    <div class="menuContent">
        <div class="menuList">Eguisi</div>
        <div class="menuList">Afang</div>
        <div class="menuList">Okro soup</div>
        <div class="menuList">Fried rice</div>
        <div class="menuList">Turkey</div>
    </div>
</div>

and style them when hovered.

.menuList:hover{
            background-color: red;
        }

This is the code put together;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .menu{
            display: inline-block;
        }
        button{
            background-color: blue;
            width: 330px;
            font-size: 40px;
        }
        .menuContent{
            font-size: 35px;
            display: none;
            background-color: gray;  
        }
        .menu:hover .menuContent{
            display: block;
        }
        .menuList:hover{
            background-color: red;
        }
    </style>
</head>
<body>  
<div class="menu">
    <button>Looking for more</button>
    <div class="menuContent">
        <div class="menuList">Eguisi</div>
        <div class="menuList">Afang</div>
        <div class="menuList">Okro soup</div>
        <div class="menuList">Fried rice</div>
        <div class="menuList">Turkey</div>
    </div>
</div>
</body>
</html>

WHY RESPONSIVE DESIGN MUST BE PRIORITIZED AND HOW TO ACHIEVE IT

Obioha victor — Tue, 12 Mar 2024 23:09:07 +0000

Responsive design is a design approach that aims to design user interfaces that adapt to various screen sizes and devices, like mobile phones, tablets, desktops, TVs, watches, etc.
This design approach aims to ensure usability, consistent functionality, and user satisfaction across various media devices. Users view web products from different devices like tablets, TVs, desktops, and laptops, and because of that, responsive design becomes a necessity to keep users on our product.
In this article, we will discuss the importance of responsive design, the consequences of an unresponsive design, and ways to achieve a responsive design like fluid layouts, using media queries and breakpoints, mobile-first design, using relative units, proper image sizing, accessibility, and showing and hiding content based on user context.

IMPORTANCE OF RESPONSIVE DESIGN

Responsive design has no doubt numerous benefits that make it a necessity in any web development project, and they include:

Better user experience

A web development project that prioritizes responsive design makes the user’s experience memorable; it makes their experience smooth and friction-free, and this makes the brand more trustworthy, makes them look competent, and in turn, helps keep the users from leaving the brand for their competitors.

Better user satisfaction
Making sure customers are pleased with your product irrespective of the device they use to access it makes them satisfied, makes them loyal customers, and they will likely recommend your product, which could mean more customers for your business.
Better user retention
Keeping customers regularly satisfied helps the business retain them, and this can be done by incorporating responsive design into your product. This is especially important because people usually access the internet with their smartphones, and so having the same good experience they had on the desktop or laptop on their smartphone will retain them.
Better SEO Performance
Search engines rank mobile-friendly websites higher than their counterparts, and because of this, responsive design is important as it positively affects the website’s ranking on search engines, thereby improving visibility and organic traffic.

CONSEQUENCES OF AN UNRESPONSIVE DESIGN

Bad user experience
When users find it difficult to navigate your website because of its unresponsive nature, they begin to feel frustrated and angry, which will make them leave your site quickly.
Bad user satisfaction
An unresponsive website makes the users dread your product, leaving them unsatisfied, which will make them leave you for your competitors.
Bad SEO performance
A website that is not mobile-friendly will be ranked poorly on search engines, and this will stunt your visibility and organic traffic, which are paramount for customer acquisition.

HOW TO GET RESPONSIVE DESIGN RIGHT

There are several ways to achieve responsive design to make better products:

Fluid Layouts
A fluid layout is a design approach that aims to make webpage content resize to fit its container within various screen sizes. This is achieved by using percentage units instead of pixels and by using Flexbox.
By using percentages in our designs as units, we can increase, decrease, or set an element’s size relative to the screen size of the device used to access our product. For example, if we have a two-column header, instead of having one of the web elements at 600px and the other at 200px width, which will still look good on some devices but will look too small on very large devices and too big to fit very small devices, we could instead make them at 60% and 35% width, respectively, ensuring that they grow or shrink based on the screen sizes.
Another method is the use of CSS Flexbox to flexibly align items in a container in rows and columns, making each item grow and shrink while maintaining its order and spacing.
Proper image sizing
Properly sizing images for responsive design means using percentages instead of pixels. This is achieved by making an image a percentage of its container, thereby making the image increase, decrease, or fit the container irrespective of various screen sizes. Using percentages ensures that the image is neither too small nor too big for the container and various screen sizes.
Mobile-First Design
Mobile-first design is necessary for every website. With webpage traffic from mobile devices surpassing that of desktops, laptops, and TVs, designing for mobile first ensures that you are not losing a large pool of users. Designing for mobile first includes displaying only important and necessary functionalities, the user interface (UI), the call to action (CTA), and the core solutions your customers are looking for, as there is limited screen real estate.
As a frontend developer, mobile-first design makes your journey of building responsive websites easier, as it is easier to scale up designs than it is to scale down to fit smaller devices, which could reduce redundant code, improve the developer experience, and overall be a job well done.
Using Relative Units
Relative units are units that are not fixed but are based on a reference to another element's size, unlike pixelated values. Relative units include em, rem, %, vw, and vh. Using relative units ensures that our design scales according to the screen size, which effectively makes our design responsive.
Media Queries and Breakpoints
Breakpoints are specified pixelated values where specified CSS rules must be followed, and media query is a CSS feature that allows a developer or designer to set breakpoints at which certain CSS rules must be applied.
For example:

@media screen and (min-width: 400px) {
  div {
width: 100px;
height: 50px;
background-color: blue;
 }
}

In the example above, when a user visits our site with a device of 400 pixels or more, the CSS rule in the curly braces will be applied. You may wonder, of what use is this? Well, this is very important if there are specific changes, alignments, or designs we have in mind for certain screen sizes. Media queries and breakpoints allow developers and designers to make designs to adapt to various specified screen sizes.

Prioritizing Accessibility
Making a responsive design does not only involve a fluid layout, properly sizing images, using relative units, etc., but also making sure that your website is accessible to all. There are several ways one can achieve accessibility; they include:
a. Using the right color and contrast
b. Using legible fonts
c. Making your site compatible enough with assistive technologies such as screen readers
d. Making navigation easy and friction-free
Show and hide content based on user context.
Because of the limited screen real estate on mobile phones, designers and developers must only show important and primary information on the screen and then add proper navigation menus, buttons, and dropdowns to display secondary elements when needed. Some CSS features that can be used to achieve this include “visibility: hidden," “display: none," and a lot more.
In conclusion, responsive design is a must in every web development project, as there are downsides to its negligence and a whole lot of advantages if done right. Combining the above-mentioned ways will take your designs to the next level and give you the responsiveness your site needs.

5 FRONTEND DEVELOPMENT BEST PRACTICES

Obioha victor — Tue, 12 Mar 2024 22:47:38 +0000

Frontend development is the designing and building of the visual side of a website; this involves the user interface, buttons, forms, etc. Building a good visual side of a website is crucial as this is what the users interact with. Frontend development consists of HTML (hypertext markup language) which is used for the structure of the website, CSS (cascading stylesheet) which is used for its styling, and JavaScript for interactivity, all these are combined in creative ways to make a beautiful, functional and satisfying website for the users.
But with all these in mind, there are many best practices in the field to ensure we are producing good deliverables and in this article, we will discuss five of them.
1. Prioritizing Responsive Design
Responsive design aims to build visual designs that work seamlessly across different device screen resolutions, sizes, etc. Responsive design is necessary in any front-end development project because we want to reach as many customers as possible. With the range of different devices being released by companies, it means users will now have a plethora of options which means our users will use varying devices. In the case of smartphones having more web traffic than other devices, responsive design is now non-negotiable. Responsive design can be achieved in many ways which include using media queries and breakpoints, showing and hiding content based on the user's context, and a lot more,

2. Using semantic HTML markup
Semantic HTML markups are HTML tags that convey the meaning of the content in it, they help give structure and meaning to a webpage layout. This is very important as it helps screen readers to better understand your webpage to read it properly to visually impaired individuals. Another reason is that your codebase becomes clearer, simpler, and easier to understand for other developers who might want to read your codebase. Examples of semantic HTML tags are:

<main>, <section>, <aside>, <nav>, <header>.

3. Prioritize Accessibility
Prioritizing accessibility in a web design project is paramount and very necessary to ensure inclusivity. This is to design with assistive technologies in mind. Ensure there is good color contrast, good semantic markup for screen readers, good and easy-to-fill forms, and a lot more. Ensure your webpage is accessible to those with disabilities.

4. Minimalism
Aiming for minimalism as a front-end developer means not overwhelming users with too many functionalities, user interfaces, and information. Ensure you display only important information simply and concisely. Ensure your navigation is easy, smooth, and friction-free, this is very crucial so as not to confuse customers/users.

5. Write good comments
Comments are statements in code that are ignored by code editors and browsers. There are like little notes a developer leaves on different blocks of their code. This is done to give a brief explanation of what the preceding code does, it ensures other developers quickly understand the goal of each section of code. Another reason is that when you return to your code little notes guide and tell you what each block of code does.