Auto Added by WPeMatico

Getting Started with Uber’s Base Web

Base UI by Uber DesignLet’s build a password generator! 🛠In this post, we take a look at Base Web. It’s Uber’s component library offering for React apps. Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base.A major selling point for Base Web is its clever customization solution. This gives you a high level of control over components. This is key when extending components or if you…

Continue Reading

Cool uses of the ::before and ::after pseudoelements

Cool uses of the ::before and ::after pseudoelementsI have a confession to make: I kind of love the ::before and ::after pseudoelements.They’re like a couple of henchmen along on any styling adventure.Like never having to face the world alone — for everywhere there was 1, there is now 3.3 times the power. 3 times the number of styleable pieces. 3 times the amazing visual effects you can create.What are pseudoelements?Now if you’ve never encountered ::before and ::after before, you may be asking “what is…

Continue Reading

CSS’ sibling combinators in 2 minutes

Photo by Uriel Soberanes on UnsplashOften overlooked, sometimes forgotten 😭Most of those familiar with CSS will have a good idea of what the following CSS does;Nothing scary here 👻The overlooked selectorsHow about these rules?These are sibling selectors using the selector combinators tilde(~) and plus(+).~The tilde(~) character selects all siblings that succeed a given element.Consider a calendar;Image we wanted to reduce the opacity of all days succeeding today;This would result in;You might not use it often but it can be very useful…

Continue Reading

Understanding CSS BEM Naming Convention

Understanding CSS BEMPhoto by Fotis Fotopoulos on UnsplashNaming things are always difficult in the programming world, and in CSS.Some developers don’t pay that much attention to naming. They claim that there isn’t enough time on thinking about which name to give each class. That may be right, but in the long-run low-quality code consumes much more time.So there are different approaches to solve the naming problem, and one of them is called Block-Element-Modifier (BEM). In this article, we…

Continue Reading

Asynchronously updating redux state using middleware

Sometimes you may encounter a situation where you want to constantly update data from the server. And if WebSockets or Server-Sent Events are not available, then your only friend is polling.The simplest example in which the latest data really matters is the messaging application in which we wanted to show the latest messages to the user without having to update the entire site. (Keep in mind that our server does not support WS SSE.) Therefore,…

Continue Reading

Visual Notes as Tweets

Visual Notes as Tweets (WIP)Short, Crisp and threadedI have started publishing visual notes as tweets, mostly on technical topics related to javascript, frontend engineering, reactjs, node, full-stack etc.You can follow hereLearner + Fullstack Coach (@rajeshpillai) | TwitterThe idea is to put all related notes in one thread of tweets. For e.g., tweet related to closure will contain all the related threads on closure.Some examples are posted below for your reference…(You can follow the tweet thread for connected materials)React…

Continue Reading

Top 5 Frontend Development Topics To Learn in 2019

Ah, January.A time of optimism, a time for starting afresh.For making new goals and resolutions.And in the web development world, for looking at the landscape and deciding what we need to learn just to keep up.Because let’s face it — web development is always changing, and if we aren’t constantly learning we’re falling behind.Deciding What To LearnBecause things are changing so fast, deciding what to focus on is key to not getting overwhelmed.I’ve covered before how I decided what to…

Continue Reading

React Hooks in 5 Minutes!

Photo by Nathan Dumlao on UnsplashLeave classes behind and grasp this API ↪️ 💪What are they?A direct API to methods we access on Component class instances. This means we don’t need classes to create stateful components 🎉A big sell for hooks is how we can extract, share and test that stateful logic. You may be familiar with Higher Order Components and render props. We often need a certain structure or style that can prove hard to maintain…

Continue Reading

JavaScript Trends in 2019

One of the most popular traditions at the start of the new year is summarizing the past year and admitting its brightest moments. Today, we’ll take a look at the main JavaScript trends of 2018 and try to predict what will happen in 2019 just like we did last year. Let’s begin with a mass developers survey that will help us outline the current state of affairs in the world of web development.What Did…

Continue Reading

How to title case a sentence in JavaScript

title case a sentence in JavaScriptJavaScript doesn’t offer any inbuilt methods to capitalize the first letter of the string. Let’s write our function to convert the string to title case.convert the string to lowerCase.split the single string into an array of strings.create an array.loop through the array of strings and capitalize the first letter in every string.return the title case string.function titleCase(str){ str = str.toLowerCase().split(' '); let final = [ ]; for(let word of str){ final.push(word.charAt(0).toUpperCase()+ word.slice(1)); } return…

Continue Reading

How to use es6 Spread(…) operator JavaScript

es6 Spread(…) operator JavaScriptSpread(…) operatorSpread syntax(… three dots)The spread syntax allows us to expand the arrays or strings where zero or more arguments are needed for the function calls or array literals or object literals.Let’s see in practiceCombine arraysconst fruits = ['apples', 'apricots', 'avocados'];const veg = ['broccoli','corn','cucumber'];const vegplusfruits = [...fruits,...veg];console.log(vegplusfruits)//output// ['apples', 'apricots', 'avocados','broccoli','corn','cucumber']Function callsfunction sum (a,b,c,d,e,f,g,h){ return a+b+c+d+e+f+g+h;}var numbers = [1,2,3,4,5,6,7,8];console.log(sum(...numbers));//output -> 36Copy objectsconst user1 = { id: 1, name: "king",}const copyUser1 = { ...user1}console.log(copyUser1) /*…

Continue Reading

High-performance array transformations

This simple technique let’s you compose array `map`s and `filter`s in a nice and performant way.Photo by Toa Heftiba on UnsplashThe cover picture is fitting as we are going to talk about a healthy diet of array transformation methods, and how to best digest large arrays. There’s also a bit of pasta in there, which is perfect, because I’ll show you how to avoid optimizing using spaghetti code.As you get into the more advanced aspects…

Continue Reading

Create a componentDidMount useEffect hook in React

Hooks are reacts response to adding functionality of classes to stateless components. It does more than just add the functionality and flexibility of class components, it adds reusablity of logic across your codebase.SetupTo get setup we’ll create two hooks to help test out how the useEffect hook operates. One will trigger a simple state update to re-render. The other will control unmounting of our child component we'll create.https://medium.com/media/c71f453cfc0d86348f7258ba1d753327/hrefCreate a ComponentCreate a stateless component called Position.…

Continue Reading

Sleep function in javascript

In this tutorial, we are going to learn how to make javascript functions sleep or delay for a particular amount of time. We are taking the help of promise constructor to make the functions sleep.function sleep(time){ return new Promise((resolve)=>setTimeout(resolve,time) )}Once a promise is resolved chain it with then method and run your code as we did in below code.sleep(2000).then(()=>{ //do something after 2000 milliseconds console.log('resolved')})async or awaitasync function add(n1,n2){ await sleep(2222); console.log(n1+n2)}add(1,2);Hope you enjoyed….Sleep function in…

Continue Reading

Convert string to integer in javascript

Convert string to integer in javascriptIn this tutorial, we are going to learn how to convert a numeric string to integer/number in javascript.First wayconst a = "11";console.log( + a ) // 11if we just add the plus before the numeric string. it will convert as a number.Second wayNumber object helps us to convert the numeric strings into a number.const a = "11";const b = 4;const aplusb = Number(a)+b console.log(aplusb) // 15 Third wayNumber.parseInt() method takes two…

Continue Reading

Faster web

If Virtual DOM is slow by design, and DOM API is tedious to use, how do we get the faster web?Photo by Marc-Olivier Jodoin on UnsplashIt seems like yesterday when Vue surpassed React in GitHub star wars. Of course, stars don’t mean much. There are still plenty more React jobs compared to Vue. And let’s not forget Angular. While the three giants are battling it out, I cannot help but notice they have one thing in…

Continue Reading

How this keyword work in javascript

this keyword javascriptIn this tutorial, we are going to learn how this keyword works in javascript at end of this tutorial you will have confidence about how it works.Let’s get started.What is an Execution context?The execution context is specific to the device where it keeps track the runtime evaluation of the code you are running at any point of time there is most one execution context that actually executing the code.Lexical environmentDefinition from the Ecma specificationA Lexical…

Continue Reading

CSS Grid Crash Course

TL;DRCSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward, as apposed to the hacks the we used to do to achieve even the simplest layouts.Main Target 🎯Is to leave today with a good idea of the surface area of CSS Grid, when to reach out for it, and what are the different pieces that…

Continue Reading

How Classes work in JavaScript

classes in javascriptClasses are the syntactic sugar in the javascript unlike the other programming languages javascript doesn’t contain proper classes.Classes use the prototype-based inheritance by using constructors.What is a constructor?A constructor is a function object which is used to create and initializes the objects.Let’s us discuss now by using examples.function Student(){}const student = Student();console.log(student) // undefinedIf we invoke a function with the new keyword it will return the empty object instead of undefined.function Student(){}const student1 =…

Continue Reading

HOW TO: Pure CSS pie charts w/ CSS variables

Photo by Charles Deluvio 🇵🇭🇨🇦 on UnsplashCreate customisable pie charts in ~30 lines of CSS 😎Ever needed to create a pie chart for your app but didn’t want to pull in an entire library? I’ve got you covered. In around 30 lines of vanilla CSS we can create our very own pie charts 🙌We are only creating the pie. We won’t be creating the legend to go with it or any interactive features. These wouldn’t be tricky…

Continue Reading
Close Menu
Skip to toolbar