Posts in Category: web tricks

CSS Frameworks Or CSS Grid: What Should I Use For My Project?

Among the questions I am most frequently asked is some variety of the question, “Should I use CSS Grid or Bootstrap?” In this article, I will take a look at that question. You will discover that the reasons for using frameworks are varied, and not simply centered around use of the grid system contained in that framework. I hope that by unpacking these reasons, I can help you to make your own decision, in terms of what is best for

Read More

Implementing Smooth Scrolling in React

Smooth Scrolling, dont know what it is? Well, instead of clicking on a button and being instantly taken to a different part of the (same) page, the user is navigated there via a scroll animation. It’s one of those subtle features on a site that makes an incredible difference in terms of aesthetics. I personally just implemented this on one of my personal sites because I love the look and feel it provides to the user.

That said, even though smooth

Read More

Get to Know Framer X: The React UI Creator

In this post we will explore Framer X, the new shiny design tool and try to make sense of its benefits as well as its capabilities.

Prerequisites: This post assumes that you have basic knowledge of React.

What is Framer X?

Framer X is the latest and greatest version of Framer Studio, the prototyping tool.

Framer Studio when initially released, gave designers the ability to create realistic app prototype designs and animate very advanced interactions than other

Read More

Improve Animated GIF Performance With HTML5 video

Animated GIFs have a lot going for them; they’re easy to make and work well enough in literally all browsers. But the GIF format was not originally intended for animation. The original design of the GIF format was to provide a way to compress multiple images inside a single file using a lossless compression algorithm (called LZW compression) which meant they could be downloaded in a reasonably short space of time, even on slow connections.

Later, basic animation capabilities were added

Read More

These 2 Unpopular Functions Will Improve How You Manipulate JavaScript Array Data

JavaScript has come a long way, it’s progressively evolving at a compelling rate and winning an army of followers by the day. The modern JavaScript developer is arguably grappling with increased complexity than a few years ago, but is more armed with better native language features, a solid tooling ecosystem and a vibrant community.


ES5 and ES6 brought a ton of improvements to JavaScript, including better ways of working with a collection of data expressed as arrays. While the language has

Read More

How To Implement Parent-Child Relationship in MySQL

If the first time you heard this phrase “parent-child relationship in MySQL”, you went “Ok, anyone else got cool made up names or are we to start brainstorming now”, then this article is for you. For the uninitiated, this might not make much sense. That’s perfectly fine because you do not necessarily need it everyday.

Parent-child relationship in MySQL has to deal with establishing some hierarchal dependencies between records in a database table. In MySQL terms, it means say that “row

Read More

GraphQL – The Good and the Bad

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API as well as gives clients the power to ask for exactly what they need and nothing more.

It makes it easier to evolve APIs over time and enables powerful developer tools. At least that’s what we all know it to be. In this post, we’ll look at all the wonderful

Read More

Using Create React App v2 and TypeScript

Now that Create React App v2 is out, official TypeScript support comes with it. This is an exciting thing for JavaScript users that use TypeScript. TypeScript is a powerful tool that helps us write safer and self-documenting code. We can catch bugs faster with TypeScript.

Many people have opinions about TypeScript, good and bad, but it’s a good idea to give it a chance. For this article, we’ll focus on getting a Create React App up with

Read More

4 Uses of JavaScript’s You Should Know

From the classic forloop to the forEach() method, various techniques and methods used to iterate through datasets abound JavaScript. However, one of the more popular methods is the .map() method.

.map() creates an array from calling a specific function on each item in the parent array. .map() is a non-mutating method in that it creates a new array as against mutating methods which only make changes to the calling array. This can be tricky to remember.

In this post, we’ll look at

Read More

Getting Started with React Hooks

React Hooks are a great new feature coming in React 16.7. React 16.6 brought some awesome new things like React.memo() and React.lazy and Suspense. The React team isn’t stopping there.

Hooks are a feature that you’ll end up using every single day of your React development. You can give them a try in React 16.7.0-alpha right now and are being discussed in an open RFC. Hooks are great because we get more tools as React developers.

If you

Read More

What’s New in React 16.6

React version 16.6 is out and it comes packed with some useful new features that are very much worth getting excited about. It’s a minor release with major features focused on performance optimization. The main new features include:

  • React.memo()
  • React.lazy()
  • static contextType()
  • static getDerivedStateFromError()
  • a number of deprecations in StrictMode

Let’s take a look into what each of these features adds to React.


React.memo() is the functional component solution to React.PureComponent as used in class components.

Read More

How to implement multiple user authentications using Laravel Guards


As developers, there are couple of times where your application will require different type of users. Take for instance you’re building a Hospital Management software and you need both Doctors and Patients to be entirely unique users. How do you handle registration and authentication for both users in such a scenario? Laravel makes it easy to authenticate against multiple user models by using guards and providers.


Guards and Providers

Before we dive into building our app, let’s understand the concepts behind Guards

Read More

Use the React Profiler for Performance

With React, building high performance web applications became very easy because of the framework’s re-rendering on the JavaScript virtual DOM, which helps it to quickly determine the changes needed when a user event is occurring. When writing complex application with React you will run into some performance issues, either because the application re-renders when it really doesn’t need to or because the states aren’t being handled properly, amongst other reasons.


What exactly is regarded a high performance

Read More

React 16.6: React.memo() for Functional Components Rendering Control

React 16.6.0 is released! With it comes a host of new features including the two big ones:

  • React.memo()
  • React.lazy(): Code-splitting and lazy-loading with React Suspense

We’ll focus on React.memo() for this article and React.lazy() and Suspense in an upcoming larger article.


What is React.memo()?

React.memo() is similar to PureComponent in that it will help us control when our components rerender.

Components will only rerender if its props have changed!
Normally all of our React components in our tree

Read More

6 Reasons to Love Smaller CMS


WordPress, Joomla, and Drupal; these are perhaps the three biggest names in the world of the consumer CMS. They are known, they are loved, they are behemoths for a good reason. There’s no escaping them. We are all WordPress, now.

No, but seriously, there’s almost nothing they can’t do, with the judicious application of plugins, themes, and coding knowledge. Yeah, believe it or not, I’m not here to rag on them. Kudos

Read More

Deploying Your First Gatsby Site to Netlify

Recently, Netlify has become one of the hotter topics in Web Development. They are loved in the community and just received millions of dollars of funding to continue making their product better. If you aren’t familiar, Netlify is a web host with particular support Static Sites (think Gatsby.js, Next.js, etc.) as well as other incredible features like serverless (lambda) functions, free https certs, and more! In this article, we are going to walk through the steps

Read More

Splicing HTML’s DNA With CSS Attribute Selectors

For most of my career, attribute selectors have been more magic than science. I’d stare, gobsmacked, at the CSS for outputting a link in a print style sheet, understanding nothing. I’d dutifully copy, and paste it into my print stylesheet then run off to put out whatever project was the largest burning trash heap.

But you don’t have to stare slack-jawed at CSS attribute selectors anymore. By the end of this article, you’ll use them to run diagnostics on your site,

Read More

Data Enrichment with MongoDB Stitch


Here is what we are going to achieve in this tutorial:

  • Firstly, we are going to write a document to MongoDB using MongoDB Stitch.

The result in our MongoDB collection will look like this:

"_id": ObjectId("5bb27712dced5f37bebf388c"),
"Title":"Guardians of the Galaxy"
  • Secondly, a trigger will catch this new insertion and start a function.
  • Lastly, this function will call the OMDB external API with the given movie title, fetch data about that movie, and finally enrich our MongoDB document

    Read More

Introducing GitHub Actions Part-2

The software development process from conception of the idea to writing of code and finally deploying the finished product can be quite tedious at times. You need to handle a variety of things beyond just writing the code. But what if you could take some of this work off your shoulders? Well, this is where Github Actions come in.

A new feature recently introduced into Github, Github Actions allow you to automate your workflow by letting Github

Read More

CSS Border-Radius Can Do That?

TL/DR: When you use eight values specifying border-radius in CSS, you can create organic looking shapes.

During this year’s Frontend Conference Zurich Rachel Andrew talked about Unlocking the Power of CSS Grid Layout. At the end of her talk, she mentioned something about an old CSS property that got stuck in my head:

The Image is set round just by using the well-supported border-radius. Don’t forget that old CSS still exists and is

Read More