Forem: Joseph kitheka

Conditional examples

Joseph kitheka — Tue, 19 Jul 2022 12:46:19 +0000

Conditional examples

In this reading, you will learn when to use the if else statement and when to use the switch statement.

Both if else and switch are used to determine the program execution flow based on whether or not some conditions have been met.

This is why they are sometimes referred to as flow control statements. In other words, they control the flow of execution of your code, so that some code can be skipped, while other code can be executed.

At the heart of both flow control structures lies the evaluation of one or more conditions.

Generally, if else is better suited if there is a binary choice in the condition.

For example, in plain English: if it's sunny, wear sunglasses. Otherwise, don't.

In this case, using an if statement is an obvious choice.

When there are a smaller number of possible outcomes of truth checks, it is still possible to use an if else statement, such as:




if(light == "green") {
    console.log("Drive")
} else if (light == "orange") {
    console.log("Get ready")
} else if (light == "red") {
    console.log("Dont' drive")
} else {
    console.log("The car is not green, orange, or red");
}

However, if there are a lot of possible outcomes, it is best practice to use a switch statement because it is easier less verbose. Being easier to read, it is easier to follow the logic, and thus reduce cognitive load of reading multiple conditions.

Nevertheless, this is not a rule set in stone. It is simply a stylistic choice.

To reinforce this point, here's an example of the earlier if else conditional statement, using the switch syntax:




switch(light) {
   case 'green':
       console.log("Drive");
       break;
   case 'orange':
       console.log("Get ready");
       break;
   case 'red':
       console.log("Don't drive");
       break;
   default:
       console.log('The light is not green, orange, or red');
       break;
}

Hey fork's i have started Mantine-UI Series on YouTube

Joseph kitheka — Thu, 16 Jun 2022 08:30:20 +0000

6 essential skills for React web developers

Joseph kitheka — Fri, 13 May 2022 12:05:43 +0000

React is the ultimate library for front-end developers today. Simply put, you get better at development when you learn React, and many organizations view these skills as essential. React developers should be hungry to level-up or audit the skills essential to Facebook’s prominent JavaScript Library.

See how you stack up with these 6 essential skills for React developers.

1. HTML + CSS
No front-end dev is a stranger to HTML and CSS. The ability to work with and craft user interfaces is necessary to every organization. At a high level, React developers should be able to:

Work with and write semantic HTML tags
Work with and write CSS selectors
Implement a CSS reset
Understand the box model and how to reset to border-box
Understand flexbox
Work with and implement responsive web principles including the proper user of media queries
2. JSX
In React, you never really touch HTML proper. You work with a syntax extension that is truly one of the most remarkable parts of the React ecosystem: JSX. JSX looks so much like HTML you may think of it as HTML-flavored JavaScript. What’s cool about JSX is that if you know HTML and CSS, you intuitively know how to work with JSX.

JSX is an abstraction on top of the React.createElement() API. One reason it is vital to the library—and why the React team chose to go with it in the first place—is that the API would be too cumbersome to use in terms of scaling. One potentially could use React.createElement() to build out an entire application, however this wouldn’t be any more efficient than just using HTML proper. It may feel at first that we’ve taken a step backward by adding our Markup into our template logic, however a few quick minutes with JSX and you’ll be hooked on the style.

3. JavaScript Fundamentals + ES6
You can’t rock React without a firm understanding of the fundamental concepts that the JavaScript language provides, but these ES6 skills are also essential:

Variables and scoping

Understanding when and where you have access to the data you need is critical. Variables are the mechanism built into JavaScript that allow us to hold onto data in memory and access that data later on within our applications.

ES6 brought with it new keywords that we can use to store variables other than the traditional var keyword (like let and const). You may choose to live by the principle that unless you absolutely need var, use const until your linter tells you otherwise, then default to let.

Arrays and objects

React suggests a pattern that your view is a function of your state. Arithmetically put, that’s v = f(s), and something you need to remember as you revisit your skills in the foundations of the library.

State is data that we want to show to users or items in memory that we can access in order to allow our users to interact with our data. We hold all of the data that we present on an object called state and access these bits of data via properties on this state object. This is how React received its name; when state changes, the view updates (v = f(s);). So your view ‘reacts’ to the changes that are made in your state object.

You should brush up on how to mutate objects and change values of properties on them. Don’t worry, React takes care of the mechanism through a nifty function called setState() to make this work to your advantage.

Array methods

It’s one thing to be able to store data and access it within arrays and objects. It’s another to be able to manipulate that data properly. The built-in JavaScript array methods are essential tools in every developer’s toolbox. Focus in on .map, .filter and .reduce for maximum impact.

Functions and arrow functions

In React, every single component you build is a function in one way or another. Remember that ‘classes’ are just constructor functions under the hood. Regardless of the syntax you’re using, when building functional components or class components you’re using some form of a function.

Don’t underestimate the importance of these fundamentals. Many practices out there today that lend themselves to functional programming. The chance to use JavaScript functions to build out small chunks of UI is like building a Lego set without instructions. Each piece of UI is an encapsulated function that contains the state data your elements need to present, the elements themselves and the formal component logic you need to use that logic. Each component is a Lego brick, and it’s up to you to fit them all together.

DOM Manipulation and event handlers

In React, manipulating the actual DOM elements is rare. Remember we now have the JSX abstraction at our disposal. The native event object that you get with normal DOM manipulation in React is actually wrapped up in what’s called the SyntheticEvent. Make sure you can attach different types of events to HTML elements such as onclicks, onchange, mouseenter, etc.

The “this” keyword

The ‘this’ keyword is one of the commonly misused features in JavaScript. Think of ‘this’ as a pointer to an object. For example, you can use the ‘this’ keyword to reference an object without having to refer to that object’s name.

Higher order functions and callback functions

The idea that functions can be passed around as arguments—in the case of high order functions and callbacks—is what drives the input/output model of functional programming.

You pass handlers around everywhere in React. Most of the time the handlers you pass around are in the form of methods that are chained onto an object and accessed as properties, which will be bound up in the prototype chain. However, there are moments that you need to reach outside of the React component paradigm or create a few different types of components that extend some of the functionality to one another. These patterns are commonly referred to as advanced React patterns and they’re finding their way into the better/common practices realm. React will push you to be innovative and creative as you scale along with it.

Prototypal inheritance and object creation

React lends itself to a functional programming paradigm in many aspects. However, you work in the world of classes and, as a result, a world of object creation. If you understand the basics of how the prototype chain works in JavaScript, you’ll know what you need to about how we achieve inheritance in JavaScript. Remember, that there are no traditional classes in JavaScript. The class keyword is just syntactic sugar on top of the object prototype chain in JavaScript.

The ‘class’ keyword

JavaScript classes aren’t the same as classes in a traditional programming sense. You create classes that encapsulate your template logic, formal JavaScript logic and even styles known as components. These components are the building blocks of any React application, and there are only two ways to write the basic component: either by declaring it as a function or declaring it as a class.

Assess your proficiency with classes by making sure you can answer:

How do I set up methods on a class?
How do I bind those methods together?
How do I access properties that are found on the constructor?
How do I create objects that would be considered ‘children’ of parent objects?
4. Git
Git is essential to every developer's toolkit for storing projects on solutions like GitHub, Bitbucket and GitLab. Skills that should just be part of your day-to-day include:

Tracking changes with add, commit, push and pull
Branching and merging strategies
Handling merge conflicts
5. Node + npm
Node may be a surprise to many. Why would you need to know how to work with Node in order to be a client-side React dev? While you can pull React into any HTML file, there will be many other packages out there that will allow you to extend the React library.

React developers need to have a solid understanding of the npm registry. This is the place where software developers can go to get software to help them build software. Sounds funny, but truly that’s all the npm is: a cloud storage for packages we call dependencies.

Yarn vs npm

Yarn is a package manager that is built to utilize the npm registry. Yarn actually optimizes your npm workflows. Yarn and npm somewhat compete today, but the mission of Yarn has been to solve a lot of the problems that are accepted in the Node/npm ecosystem. npm has been doing everything it can to follow the patterns and practices that Yarn presents.

6. Redux
Hot button issue alert: React has built-in state management. And many devs have been burned along the way by discovering the asynchronicity of state updates and how React handles them. For that reason, and for scalability, Redux was born. Redux is a state management library and more. It’s not a framework, but an opinionated way of working with data. The principles behind Redux are along the lines of functional programming and immutability, but it’s not a one-size-fits-all-solution. Mastering the concepts of fundamental React programming prior to diving into Redux is key.
To learn more about the various skills to learn to be a successful web developer check out our My YoutubeChannel web development.

NextJS Authentication With Social OAuth Provider's-Next-Auth (full course 2022)

Joseph kitheka — Fri, 13 May 2022 07:52:30 +0000

🔥🔥Hello and welcome to the next js social login authentication, part of the full course on NextJS.In this video we are going to:- Setup our Social OAuth service with Facebook- Add the social provider into our NextJS project- Compile and run the application- Finally test to see if it works. So let's get started
Watch More

6 Valuable Skills for Novice Front-end Developers in 2022

Joseph kitheka — Thu, 06 Jan 2022 13:59:30 +0000

As a front-end developer, it’s your job to make sure that the user interface of a software program functions properly.
It’s a difficult job because you have to make sure that every component works the way it’s supposed to so that users have a good experience.
Front end development is in high demand right now. Front-end developers manage the UI / UX of the software. And this is important because users interact directly with the front end of an application.
In this article, we are going to talk about some of the most valuable skills that beginner front-end developers can cultivate. Learning the following skills will help you advance in your career.

Learn Modern JavaScript (ES6)

The JavaScript programming language has evolved from ES1 to ES6 over the past 25 years, and it has included some wonderful new capabilities with each new release.
In 2015, ES6 was published as a new standardized version of JavaScript. ECMAScript 2015 is another name for it. And ES6 has many new features that can help you write better code.
With Object-Oriented Classes, Arrow Functions, String Literals, and much more, it is the foundation for modern libraries like React and Vue.
Helpful Features of ES6
Destructuring assignment
➡ You can read values from an array of attributes from an object into individual variables using the destructuring assignment.
Examples of how the destructuring assignment works in ES6:
let myName, myRole; let array = ['Chaitanya', 'Web Developer']; [myName, myRole] = array; //positional assignment occurs here console.log(myName, my Role); //Chaitanya Web Developer
Destructuring an array
let myName, myRole; let object = {myName:'Chaitanya', myRole:'Web Developer'}; ({myName, myRole}=object); //properties (keys) are matched with the local variable names console.log(myName, myRole); //Chaitanya Web Developer
Destructuring an object
Arrow function expressions
➡ Arrow function expressions are a new syntax for creating ordinary function expressions. We can ignore the function and return with one-liner code using arrow function expressions.
let getName = ((firstName, lastName) => { let myRole = 'Web Developer'; return My name is ${firstName} ${lastName} I am a ${myRole}.; });
Arrow Function
Example of arrow function expressions in ES6:
Default parameters
➡ The default value for function arguments in JavaScript is undefined. So sometimes it’s more practical to use a different value instead. We can do this using default function parameters.
function add(number1, number2) { return number1+number2; } add (3,4); //returns 7 add(3); //returns NaN as number2 is undefined
Without ES6
function add(num1, num2=7) { return num1+num2; } add (5,2) //returns 7 add(3) //returns 10 as num2 has default value = 7
With ES6
JavaScript ES6, ES7, ES8: Learn to Code on the Bleeding Edge (Full Course)
ES6 Javascript Tutorial For Beginners | ES6 Crash Course
Modern JavaScript — Learn Imports, Exports, Let, Const, and Promises in ES6+
Example of how default parameters work in ES6:
How to Learn ES6
Web Performance and Quality
It’s critical that your website runs smoothly and without errors. The time it takes for your website to load is affected by multiple factors related to web performance.
Use optimized and smaller images. TinyPNG is a good choice for compressing images without losing a lot of quality.
Remove unwanted CSS and JavaScript, as it makes your code bulky.
Get a good hosting provider. Some good ones to check out are Linode, Digital Ocean, or SiteGround.
WordPress Tip: Remove unwanted plugins. I don’t recommend using more than 10 plugins unless it’s required.
There are steps you can take to increase your site’s performance if you’re having problems with your site taking too long to load.
How to improve web performance:
It doesn’t matter if you create the most amazing website ever. If it doesn’t work effectively and deliver content quickly to your users, it won’t matter.
Users don’t like to wait more than 3 seconds for a website to load — that’s not much time. So if your site takes longer than that, your bounce rate will go through the roof.
Chrome DevTools
A console panel that interacts with JavaScript on the page as a shell or collects logs and diagnostic data.
A device toolbar which helps you to create responsive websites.
Elements that are used to govern CSS and the Document Object Model (DOM).
Web performance insights.
Security and network functions.
Chrome Developer Tools are included in the Google Chrome browser and experienced developers use them all the time for iterating, debugging, and analyzing websites.
Google Chrome DevTools include:
You can learn more about Chrome DevTools here.
Chrome DevTools are very useful tools once you understand how to use them comfortably. You can use this Chrome DevTools — Crash Course by freeCodeCamp to learn more about them.
Version Control with Git
Git, or Global Information Tracker, is an open-source distributed version control system. It’s software that tracks changes in a set of files, and developers typically use it to coordinate when they’re working on source code together during software development.
After all your hard work coding, the last thing you want to do is start your work from the beginning if something doesn’t go according to the plan. In this situation, Git will help you to go back to the previous version of your software without losing any code.
Git and GitHub for Beginners — Crash Course
Git for Professionals Tutorial — Tools & Concepts for Mastering Version Control with Git
Knowing the basics of Git is a skill that you (and your potential employers and clients) will appreciate.
How to learn Git
Responsive Design
People access the internet on everything from smartphones and tablets to laptops and desktops — and these all have different screen sizes. So responsive design (which helps you design apps that work on all screen sizes) should be a top priority in any application or website you develop.
💡 Fun Fact: mobile traffic > desktop computer traffic.
How Responsive Design Works
A website with mobile-friendly features, content, and media is referred to as a responsive site. Responsive websites adjust to the device that a visitor is using, including smartphones, tablets, and PCs.
Best Practices for Responsive Design

Don’t forget about the navbar menu. Make sure to build a hamburger menu for small screen devices.
Test your responsive website on a variety of devices and browsers, as usual. You can use Google Mobile-Friendly Test and Screen Test for testing your website. One thing to keep in mind about responsive design is that it is a built-in feature of CSS frameworks like Tailwind and Bootstrap. This means that these frameworks help you to make websites more responsive for all device sizes with a little less work. Introduction To Responsive Web Design — HTML & CSS Tutorial Bootstrap CSS Framework — Full Course for Beginners UI / UX Design Tutorial — Wireframe, Mockup & Design in Figma An unresponsive website with amazing design is worthless today. The majority of people will likely visit your app or website on a mobile device. How to learn responsive design for a website Learn to Work with Frameworks CSS and JavaScript frameworks are sets of files that take care of a lot of the heavy lifting for you by offering standard features. Instead of starting with a blank text page, you may start with a code file that already has a lot of JavaScript in it. JavaScript and CSS frameworks are changing how developers write code. Some frameworks were built to help you create complicated user interfaces, while others thrive at displaying your website’s content. Choosing the right framework is as important as learning it. Popular frameworks are not always a good choice, and you should pick one according to your specific requirements. React — It’s a free and open-source front-end JavaScript framework for creating UI component-based user interfaces. Meta maintains it. Vue — Vue.js is an open-source front-end JavaScript framework for creating single-page apps and user interfaces. Evan, You created it. Svelte — Rich Harris designed Svelte, a free and open-source front-end compiler that is presently maintained by Vercel. That being said, there are some that are in very high demand that are really worth learning. Bootstrap — Bootstrap is an open-source framework for interface components that includes CSS and JavaScript-based templates. Tailwind CSS — Tailwind CSS is a utility-first CSS framework that includes classes for creating custom UI designs. Bulma — Bulma is an open-source CSS framework. It has a lot of built-in capabilities that help you get things done faster and with less CSS. Recommended JavaScript frameworks: Recommended CSS frameworks: That’s a Wrap! Thanks for reading this article. I also write regularly in my newsletter The Learners. You can signup directly here. 👇👇 If you read this far, tweet to the author to show them you care. Tweet a thanks

Hello everyone in the community am new in these platform read to learn and share am a front end developer

Joseph kitheka — Tue, 27 Apr 2021 10:47:01 +0000