setTimeout() will run a block of code after the specified time, it could be used very simply like this:
The function we defined will run after it’s called as the first argument in setTimeout(), the second argument is the…
In the beginning of my CSS journey, the most difficult thing to achieve was getting everything ‘lined’ up and spaced out so I could fit multiple divs next to each other. My original hacky approach worked for a bit, but as soon as my project scaled, things became dicey very quickly. Enter CSS Grid.
Grid is a two-dimensional grid-system that allows you to divide your page into portions that have their own size and position, making it effective at creating a beautiful front end for your application.
Grid is similar to Flexbox, their main difference being that Flexbox is one…
Iterators are Ruby methods that are called on collections, that is hashes, arrays, etc. A loop runs a block of code for a certain number of times while an iterator run a block of code on a data set.
You’d call an iterator on a collection when you want to run some logic on each element of said collection and return a value.
Ruby iterators are chainable, just like most Ruby methods.
array = [ 1, 2, 3]array.each do |num|
puts num + 5
you can also define and call the iterator…
Here’s a list of React Libraries for your project. They’ll increase your productivity and add functionality without much effort.
A pretty small library with a huge number of icons to use on your projects, from Facebook to Google, you’ll find the right icon for the perfect link, oh and you can style them with css as well.
Created by google it utilizes their famous material design, lightweight and powerful, it allows you to incorporate a visual stunning UI to your project.
Styled components is a CSS library that allows you to write small CSS modules and helps you keep everything…
Lets say you have a component that’s supposed to display data, for example lets imagine you have a list of products that should be displayed on their individual <div>.
So you go ahead and do this:
It might seem fine but it’s not DRY (Do not Repeat Yourself,) so if you have a more fleshed out component, adding more data to it would make it confusing and hard to navigate. If somebody else has to add more items to the Repetitive component it might take them a bit to figure out where and how. Wouldn’t it be easier (and…
Adding a gallery to your React project doesn’t have to be a chore, and with the power of open source now it’s easier than ever.
React-photo-gallery and react-images
I decided to use react-photo-gallery together with react-images for its simplicity and easy setup, please keep in mind that react-images is not currently maintained and react-responsive-carousel is currently recommended, but if you need a lightweight gallery react-images will fit the bill.
Setting things up
npm install react-images
npm install react-photo-gallery
yarn add react-images
yarn add react-photo-gallery
to install the packages, you want to make sure you import them at…
Why you can’t ignore an adaptive nav menu in 2021 (and beyond)
An adaptive navigation menu is a must for any modern website. In 2020 68.1% of all website visits came from mobile devices (source) so it stands to reason that you should not ignore the mobile UI/UX.
Required and optional imports
Before we actually begin coding our navigation menu let’s install the dependencies we’ll use:
npm install react-router --save
That will allow us to use Link, so that every time you click a menu item it’ll redirect you to different components without reloading the page; and if you’d like…
An amazing idea pops into your head. Quick! You wake the computer from sleep and furiously start coding. You might be a little organized and start building the file structure first; if you’re building your project on vanilla JS you might outline a class or two, or if you’re using a framework like React you add a couple of empty component skeletons.
Fast forward a couple of commits ahead and you start slowing down, your productivity is reduced by an overwhelming desire to step away and do something else less codey; so you do that for a while and get…
When coming up with an idea for an application, the question that drives all of the other questions is: ‘what’s the point of this?’
Whether it’s an application for storing some sort of records or a game, they have a purpose; to organize, to entertain, etc.
While thinking and filtering ideas for the React project I wanted to create I needed something with intention, so I made a long list of project ideas, some far fetched and unrealistic (for now at least) and others that served no purpose at all.
One night my girlfriend and I were talking about the…
The Fire in FireBook
When I started the JS lessons, ideas would come and go, I would write them down on my phone and let them marinate, looking at them every couple of days to see if I still…