The best front-end hacking cheatsheets — all in one place.

  • The best front-end hacking cheatsheets — all in one place.It’s rather impossible to remember all the APIs by heart.
  • This is when cheatsheets jump in!
  • Here are the best front-end cheatsheets I’ve gathered.

The best front-end hacking cheatsheets — all in one place. It’s rather impossible to remember all the APIs by heart. This is when cheatsheets jump in! Here are the best front-end cheatsheets I’ve…
Continue reading “The best front-end hacking cheatsheets — all in one place.”

I wish I knew these before diving into React – OpsGenie Engineering

  • By default, setState triggers a re-renderThe default behavior of React is to re-render on every state change, and most of the time it is okay to rely on this.
  • However, re-rendering unnecessarily wastes cycles which is not a good practice.Each component has a method called shouldComponentUpdate and it is called everytime you change state or pass new props from the parent component.
  • We can simply divide lifecycle into three parts:Mounting: an instance of the component is being created and inserted into the DOM.Updating: component is being re-rendered, can be caused by changes of props or state.Unmounting: component is being removed from the DOM.It is very important to understand how these methods work….
  • Compare this.props with nextProps and if there is a significant change, act on it.Two important notes here:React may call componentWillReceiveProps even if the props have not changed, so comparing this.props and nextProps is is invoked before a mounted component receives new props, this means React doesn’t call componentWillReceiveProps with initial…
  • Use React Developer ToolsReact Developer Tools lets you inspect the React component hierarchy, components’ props and state.

At OpsGenie, we had a deep dive into React for our Badges project. I learned many new things & made many mistakes. These are the things that really helped me.
Continue reading “I wish I knew these before diving into React – OpsGenie Engineering”

JavaScript: The beauty of arrow functions – LeanJS – Medium

JavaScript: The beauty of arrow functions  #react #arrowfunctions #es6 #javascript #reactjs

  • JavaScript: The beauty of arrow functionsArrow functions are an awesome ES6 language feature for a number of reasons, but we believe there are 3 key reasons they really shine:They are more conciseThey allow for implicit returnsThey get their “this” value from the context, meaning it comes from the callerLet’s look at some ES5 vs ES6 code:In the above code example we compare the ES5 and ES6 way of grabbing some values from an array of objects.More ConciseThe most striking thing is the amount of code, less code means less probability of introducing errors.
  • Secondly it’s obvious that our arrow function has improved readability here, it’s also more declarative.
  • Being concise and declarative with code is especially important when working in teams, it saves time and improves outcomes.Implicit returnsThe ability to return values implicitly builds upon the first point, we no longer need to add extra syntax such as the {} and return keyword if they are not needed.
  • So context is simply the one who is calling the function.If this isn’t clear, have a play with the code yourself here: why is getting the “this” value from the context useful?Before we had to bind our functions explicitly to make sure they had the right “this” value:We can of course continue doing this, but now we have a more concise way of doing the same thing:Summing upUsing arrow functions allows us to use a more concise and declarative syntax while eliminating the need for us to bind them explicitly.
  • There are of course a few more things to know about arrow functions which are beyond the scope of this post.

Arrow functions are an awesome ES6 language feature for a number of reasons, but we believe there are 3 key reasons they really shine: In the above code example we compare the ES5 and ES6 way of…
Continue reading “JavaScript: The beauty of arrow functions – LeanJS – Medium”

Iterators Using ES6 – Felipe Valdivia – Medium

  • However, as is often the case when a task occurs frequently, JavaScript now provides methods that simplify this task.These methods, called iterators, are called on arrays and complete such tasks as altering each element and selecting elements that fit certain criteria.So in this article you are going to learn how to use some of this iterator.
  • forEach()” will execute the same code on each element of an array.forEach() ExampleThis iterator will execute the same code on each element of an array, so in the example above we are going to go over each element in our array and print it on the console, the argument that you can see in parenthesis doesn’t matter in this case we are using “fruitItem” because is a good practice to have descriptives names.
  • map() iterator but in this case we are creating a new array with the result, so we need to create the variable and inside the block have the condition, that in this case we are going to create a new array with all the numbers divided by 100.
  • filter() exampleIn this example you can see how with filter we go over all the items but we just return the ones that are shorter than 6 characters creating a new array just with these data that is already filter for our condition.ConclusionYes I know this article is short but I present to you 3 different types of iterator using javascript with this you can start playing with them creating projects just to get familiar with them.I can give you some research task that you can do, look for this 3 other that they are pretty common and learn how to use them, I hope you can start a project with this information or solve different problems.so briefly we can say:.
  • filter() checks every element in an array to see if it meets certain criteria and returns a new array with the elements that return truthy for the criteria.You can visit the Mozilla Developer Network to learn more about iterator methods (and all other parts of JavaScript!)

Hello guys this is my second article here about front end and this time I am going to be talking about the different iterators that we have in EcmaScript6. The idea of this post is just show you some…
Continue reading “Iterators Using ES6 – Felipe Valdivia – Medium”

Using Electrode to Improve React Server Side Render Performance By Up To 70%

  • js application platform that powers walmart.com with several goals in mind, including ease of use, re-usability of components across applications and, most importantly, performance.We use server side rendering for almost all of our applications for two reasons:Improved performance for the customerBetter for SEOIn our tests, however, we found that React’s renderToString() takes quite a while to execute — and since renderToString() is synchronous, the server is blocked while it runs.
  • Every server side render executes renderToString() to build the HTML that the application server will be sending to the browser.To solve this problem, we created two Electrode modules: Above the Fold Render (ATF) and Server Side Render Profiling and Caching (SSR Caching).
  • The average renderToString()call with this configuration took 153.80 ms.Electrode default, though, Electrode comes with renderWithIds:false, which gives us a renderToString() time of 124.80 ms. Not bad — Electrode’s default configuration has already improved render time by 19%!
  • That drops our renderToString() time all the way to 36.56 ms — an astounding 71% improvement from the default Electrode configuration, and a 76% improvement from our original, unoptimized test.
  • That means a 70% improvement won’t mean 90 ms, but 180 ms saved.Special Thanks:To Arunesh Joshi, Dmitry Yesin, and the home page team who have implemented the Electrode modules and are using them on the home page in production.To Caoyang Shi, for helping to gather data and ensuring we’re getting the right numbers!More Information:Check out Joel Chen’s post on ReactJS SSR Profiling and Caching or Arpan Nanavati’s post on Building React.js at Enterprise Scale.Check out my post about the release of Electrode, the customer-facing platform that powers Walmart.com.The Electrode website: www.electrode.io

We built Electrode, the react/node.js application platform that powers walmart.com with several goals in mind, including ease of use, re-usability of components across applications and, most…
Continue reading “Using Electrode to Improve React Server Side Render Performance By Up To 70%”

Note App Deployed — What have I learned ? – Comfort Ajala – Medium

my first react/js template app has been deployed! 
#reactjs #coding #Webdesign #webdev

  • Screenshot of the application: can be found under noteapp.ajalacomfort.comFew weeks ago, I embarked on a project based learning journey to improve my practical knowledge in web development.
  • So I began building a CRUD application with user authentication and authorization.
  • Thus basically a full-stack application on JS.Today I am proud to say the app is deployed on Heroku with the database hosted on mLab.
  • Yes the app is a very simple CRUD app, but it taught me a lot more than the 300 pages books I have read on JS.I have been drawn to project based learning as a result of this project and in this post I would like to list what I have learned as well as, what I plan to do next in my journey.You can find the application under: I have learnedJs Templating — EJSReact.js + ReduxToken based route Authentication and AuthorizationServer Rendering React ComponentsReusing componentsCSS TransitionsNode App DeploymentNoSQL — MongoDBAPI developmentThese are the main points I have understood via this project and I am proud of myself.I plan on creating a progressive web or/and a cross platform version via react-native after correcting a number of flaws in the app functionality and style.
  • Now I know my weaknesses, I will focus on those cracks in my upcoming projects.I am just excited to have an app deployed online for prospective employers to use as a meter instead of mere claims of my abilities in web dev.YT Channel: Ajala ComfortSee ya soon!

Few weeks ago, I embarked on a project based learning journey to improve my practical knowledge in web development. So I began building a CRUD application with user authentication and authorization…
Continue reading “Note App Deployed — What have I learned ? – Comfort Ajala – Medium”

Sharing stateful UI logic in React apps using Render Callback components

Sharing stateful UI logic in React apps using Render Callback components



#ReactJS

  • We have three components: an Accordion , Modal , and Thumbnail .
  • We could write each of them as a stateful class component with the same wrapping code, but since they have the same state setup – let’s share it!
  • Let’s abstract the state into a Toggle component (a Render Callback).
  • Now components that use Toggle will have access to their own isOpen and handleToggleClick arguments without having to wire up the state code.
  • The instances of Toggle (Accordion , Modal , and Thumbnail ) can just be stateless function components.

A few examples of abstracting shared logic across multiple components using the Render Callback pattern (aka Function as Child components).
Continue reading “Sharing stateful UI logic in React apps using Render Callback components”