Latest Stories

MongoDB Compass - Quick Tool to Reconnect a Paused Cluster.   f you have been used MongoDB for a while, you may get a message in your inbox one day that looks like this:   message from MongoDB to my inbox Then don’t be panic, you can reconnect your cluster again. Although you can use another method to reconnect, I am using MongoDB Compass for this tutorial because I can import and export JSON data using this tool. According to the documentation on their site, MongoDB Compass is a...

You will love your website if you apply this technique.   If you are thinking about building your own landing page or personal portfolio which can show off all your works (your blog posts from Medium or your YouTube channel) to the world. Then, you may ask the solutions for this question “How to embed Medium RSS feed or YouTube RSS feed in my websites”. Luckily, I came with this solution for you in this tutorial. It is exciting for me to share it here and hope you are also excited too. Okay, let’s get started! What we will explore in this topic: How to Embed Medium RSS Feed in a Website How to Embed YouTube RSS Feed in a...

If you like to work with React and Animation, you may like this too.   What we will learn on this topic: How to Make Animations using CSS in React. How to Make Animations using Framer-Motion in React. 1 . How to Make Animation using CSS in React In this tutorial, I have made a short Demo on Code Sandbox so that you can follow easier. The Demo is about a “Meditation Moon” (as I named it). For this, I have three animated elements: The Moon is growing and shrinking in an infinite...

Use these tools to boost your productivity as a web developer — I wish I had found these earlier.   Hello all, Welcome to another post on the topic of productivity and this time, we will explore six code generators to make our life as developers easier. This is the shortlist of web tools that I have used and admired for a while now. Making use of these tools does not mean becoming lazy. These tools actually assist us to reduce the unnecessary time we spend working on our side projects so that we can focus on more important things such as project performance. As long as you understand the code itself and its usage, you are good to go. Okay, let’s get...

How To Make Parallax Effect Vertical and Horizontal with React-Spring   Hello, I hope you are all doing well. Welcome to my tip number four on front-end development, and this time we will explore again Parallax Effect using my favorite front-end framework and its library: React and React-Spring. As you already know React is a JavaScript library for building user interfaces based on documentation on their site. Its framework is powerful due to its reusable components so it can save developers a ton of time for building and developing complicated applications. If...

How to create animation using CSS and JavaScript to make your website more appealing   Welcome to my third tip on front-end development. Hope you will be excited about this tip because this is also one of my favorite ones on the front-end web application design and development. This time we will explore and learn about Animation using CSS and some JavaScript libraries. What you will learn on this topic: Animation with Pure CSS Animation with Anime.js Animation with Ani.js Animation with Typed.js Okay, let’s get...

How to Create a Website Parallax Effect   What is Parallax? Parallax in front-end web design is an effect where the background content is moved at a different speed than the foreground content while scrolling. This topic came to my mind to write the second tutorial while I was working on my boilerplate project for a portfolio website. I think it would be more interesting if we add some background effects and make your site more appealing and responsive (work well on all devices) at the same time. Okay, let’s start to code! What you will learn on this topic: How to Make Parallax Effect with Image...

How to save development time by using these open-source libraries For this first tip on front-end development, we will explore and learn about favorite front-end libraries and their best components. Deciding on which front-end library to pick up is overwhelming and time-consuming at first because there are a lot of front-end libraries out there and each library comes with a lot of documentation or tutorials to learn before we can apply it in our applications. To make our life as developers easier and less painful, I would like to narrow it down and share my favorite front-end libraries and their best components. For demonstration, I have used Code Sandbox (an online code editor) to show code and...