How to create Single Modal in Gatsby using Reactstrap, React Portals, React Context and React Custom Hooks

Introduction

Gatsby is a free and open-source static site generator based on React. In this tutorial, we will use the default starter kit with cosmetic modifications.

Reactstrap provides React components based on Bootstrap 4 library. It comes with a powerful Modal component and his three supporting sub-components:

Armed with those, you can get a working Model almost in no time. Reactstrap documentation is full of examples, so feel free to explore its Modals part on your own.

Continue reading “How to create Single Modal in Gatsby using Reactstrap, React Portals, React Context and React Custom Hooks”


If you enjoyed this post, then make sure you subscribe to my Newsletter

Firefox and Chrome Developer Tools – how to go beyond console.log

Introduction

Both Firefox and Chrome provide some sort of Developer Tools for technical users. Additionally, both browser vendors regularly improve their tools and surprise us with brand new features.

In today’s post, we are going to talk about console logging. It’s the most basic debugging tool and an indispensable companion of any Javascript developer.  But did you know that there is actually much more than a simple console.log command?

Continue reading “Firefox and Chrome Developer Tools – how to go beyond console.log”


If you enjoyed this post, then make sure you subscribe to my Newsletter

Modern JavaScript syntax – ES6 const variables

Introduction

ES6 brought lots of new features. Among them is support for constants. Instead of using var while declaring variables, you are now free to choose between const and let.

In this tutorial I will focus primarily on const and its “immutability” quirks, while let will be tackled in the following one. Without further ado, let’s start it off by going through the handful of examples.

Continue reading “Modern JavaScript syntax – ES6 const variables”


If you enjoyed this post, then make sure you subscribe to my Newsletter

How to start using modern Javascript syntax within minutes

Introduction

Everyone, including browsers, got used to the JavaScript syntax from 90-ties. But time passes by and JavaScript becomes more and more popular, so ECMA, the committee behind the changes in JavaScript, woke up and started to release new features.

The most recent major update to the specification was approved on 17th of June 2015 and is called by many names: ECMAScript 6, ES6, ES2015, and ES6Harmony.

Based on current plans, new specs will be released on a yearly cycle. Please monitor ECMA’s news page, especially changes related to the ECMA-262 document, if you are really interested.

Shall we as developers be excited? Definitely, cause we love bleeding-edge features, however we should also consider the browsers’ compatibility list.

It turns out that main players as Google Chrome, Mozilla Firefox, Apple Safari, and Windows Edge adopt new JavaScript syntax slowly, each one in different pace and priority, so it’s literally impossible to write modern Javascript syntax as it is. So what is the way then?

As you know JavaScript is an interpreted language: the browser interprets the code as text, so there is no need to compile JavaScript. Since we want to use the latest features, we need a way to convert fancy source code into something that poor browsers can interpret. This process is called transpiling, and it is what Babel is designed to do.

In this tutorial I will show you a few easy ways of tinkering with modern JavaScript syntax, without the need of installing anything nor going into complexity of Nodejs, NPM and Module bundlers.

Continue reading “How to start using modern Javascript syntax within minutes”


If you enjoyed this post, then make sure you subscribe to my Newsletter

How to configure Browser Sync live reloading in your current or next Laravel project running on Homestead Virtual Machine

Introduction

Browser Sync is an open source tool that can instantaneously synchronize your code changes with your browser. As soon as the file is saved, automatic webpage reload happens, without any action from your side.

You could use Browser Sync outside Laravel and without Laravel Mix asset bundler, however in this tutorial I will focus primarily on how to harvest its greatest features with truly minimalistic configuration.

All the hardest work has already been done by Laravel Mix, which lets you incorporate Browser Sync into your project with little effort. If you are interested, Laravel Mix uses Webpack module bundler with plugin browser-sync-webpack-plugin under the hood.

So, do you want to gain some time while developing your current or future Laravel project? If the answer is yes, then let’s start it off right away!

Continue reading “How to configure Browser Sync live reloading in your current or next Laravel project running on Homestead Virtual Machine”


If you enjoyed this post, then make sure you subscribe to my Newsletter