Hashnode·4yFakeflix, a Netflix Clone built with React, Redux
Fakeflix is a clone of Netflix's splash animation. The project has been selected and inserted inside the trending repositories for five days in a row. It's a project to learn how to structure a Web App of a mid-level complexity integrating Redux logic and experiment with things like Redux Thunk.
Hashnode·4yBecoming a web 3 developer
If you want to advance your career to become a Web 3.0 developer or get started, a structured roadmap will definitely lead you towards your goal. Getting into the Blockchain industry where the average programmer is paid around $ 140,000 per year is probably the best investment you can make as a developer.
Hashnode·4yTransitioning to Web 3.0
Web 3.0 aims to create an internet where ownership and control are decentralized. It is the latest generation of internet applications and services powered by blockchain technology. Bitcoin is the first truly digital currency and the inspiration for web 3. 0. The concept of the blockchain is similar to a country made up of many cities connected together by a network of roads.
Hashnode·4yMy honest opinion on Tailwind CSS
Tailwind is a utility framework that can be used to optimize and speed up your development. Tailwind should not be used if you don't have medium experience with CSS in general. Even though Tailwind has uniform classes, every website built with it is so different.
Hashnode·4yHow to make blob menu using HTML, CSS and JavaScript
I wanted to make something simple with a little transition animation to make it look cool, so I created this blob menu. I got a lot of positive feedback when I shared it so here is the step-by-step process on how to create it. First, we got the <link> tag which is used to import font awesome icons. We got our menu items Menu icon from font-awesome icons. A "links" div that wraps all the items in the menu in one element to be shown or hidden. JavaScript code to show and hide the menu items and the blob.
Hashnode·4yfrontend smart contract
In this tutorial I will show you step-by-step how to create your first front-end to interact with a smart contract deployed at RSK local network. I will use only JavaScript and HTML and connected to a wallet using a web3 provider. We will use VSCode to create and deploy our project.
Hashnode·4yRemoving a .env file from Git history
You accidentally pushed a file with secrets or a password that shouldn't have gotten into the Git history. The best thing to do now is to remove the file right away and add it to your .gitignore file. If we look at our Git history, we can still find the file and expose the secrets.
Hashnode·4yThe Best Web3 Resources—Blockchain, Cryptocurrency, NFTs, DAOs, and the Metaverse
Web3 could have paradigm-shifting implications for how we build the next generation of the internet. The moonshot dream of the web3 community is to build a decentralized alternative to the current internet infrastructure that we rely on. The rise of the so-called "creator economy" in web3 has led to an explosion of innovation across many creative industries.
Hashnode·4yWeb 3.0: A Developer Roadmap, Guide, and Resources to Get Started
Blockchains are still prominent, and the industry is in desperate need of engineers. You'll need to be dedicated to your learning if you want to be a part of it and advance your career as a Web 3.0 developer. I'll provide a road map and some great online resources to get started.
Hashnode·4yHow to easily get started with ThreeJS - Part 1
In around 30 lines of code you will create your first working 3D element (recap at the end of the article) A cube is an object that we will be able to see in ThreeJS. A scene is a scene, just like a movie set. On the scene you will add objects (that might be characters) and a camera. The aspect ratio is just the width divided by the height of the object.
Hashnode·4yIs Next.js 12 really a Beast?
Next.js 12 is the most impressive version of Next.js. It is built on top of Node.js to improve React-based web and app development faster. It even includes server-side rendering and generating static websites. The Rust compiler takes advantage of native compilation and is now a 3x faster refresh.
Hashnode·4yGitHub Copilot: Intro, Benefits and Examples
GitHub Copilot is an AI pair programmer that helps you write code faster and with less work. It draws context from comments and code, and suggests individual lines and whole functions instantly. The GitHub Copilot technical preview is available as an extension for Visual Studio Code, Neovim and the JetBrains suite of IDEs.
Hashnode·4yReact Router - Navigate the Users after Login/Logout like a Pro
React Router is a fully-featured client and server-side routing library for React, a JavaScript library for building user interfaces. The idea is to simply attach the Location(URL) of the Current Page to the <NavLink/> 's Location Object. As the Location Object of the Login/Logout Page, we can navigate the users back to the Previous Location after Successful Login.
Hashnode·4yGit basics: Conventional commits
Conventional commits is a set of rules to help you describe a commit message. It's not a golden standard in the industry, some companies use it, and some have their commit structure. Conventional Commits helped me make commit messages so much easier and more precise for my team. Here are some real-world examples, here are some fantastic resources.
Hashnode·4yMy Web3 Journey: Day 50 of #100daysofWeb3
I was a stranger to the crypto world until April this year. The crypto world actually turned out to be the most exciting and innovative space I have ever been in. I learned A LOT, and in this post, I will try to explain my journey and recommendations. Today is day 50 of the #100daysofWeb3 challenge.
Hashnode·4yMaking pixel-art with pure CSS
When I started learning HTML and CSS back in September, one of the very first properties I discovered was box-shadow. Box-shadow lets us add shadow effects around our elements. One of these properties is pixel-art, which lets us draw with pixels. We'll start by creating an HTML element with a "pixel" class. Then, we'll create our own pixel grids.
Hashnode·4yMake your website stand out with a custom scrollbar 🌟
scrollbar is easily one of the most neglected UI components out there that are not leveraged by many websites to enhance their users' experience. By default, on all HTML, when the content of the website exceeds the viewport height, a scrollbar will automatically appear on the right, just like the one you're seeing as you read this article now.
Hashnode·4yI made my website rank by accident
On 27 June 2021, I wrote an article about moving from GIF to video format. This article was purely written to make my website faster. These pages I changed became so much faster, so I was happy. But then, I was checking my Google Search Console and noticed the following.
Hashnode·4yMap, Filter and Reduce are Array Methods in JavaScript
Map, Filter and Reduce are Array Methods that are used for iterating over an array and returning value/array. It returns a new Array and it doesn't change the original Array. These methods are very important in React JS which is a very popular JavaScript Library. Using these methods also follows the functional programming paradigm.
Hashnode·4yCherry-Pick Your Teammate's Changes Without Push 'n Pull-ing To Your Repo In WebStorm
GitLive allows you to cherry-pick your teammate's changes straight from their local files without having to push and pull to Git. Clicking on a file will open a diff of the changes so we can make sure it contains only the changes we need. You can also perform the cherry pick at the level above if you want to pick all changes from multiple files at once.
Hashnode·4yUsing CSS variables and var() function like a pro.
CSS variables help to make the reuse of stylings a lot easier. All you have to do is declare it once and call it anywhere that you want to use it. If our variable, --main-color cannot be used, then the browser should then use blue. The value is optional and is known as a fallback value.