DEV Community: Umar Sulaiman Mailafiya

How to host your site on netlify as a beginner developer

Umar Sulaiman Mailafiya — Thu, 27 Oct 2022 13:43:52 +0000

Getting started as a beginner you must be thinking… How can I get my project online? Rest assured. Today will be the last day you’ll think like this. Because the answer is finally here.

Is your project ready for deployment?
Let’s go!

What is netlify?

Netlify is a remote-first cloud computing company that offers a development platform that includes building, deploying, and serverless backend services for web applications and dynamic websites. In simple terms, it’s for getting your project online for the world to see.

There are two significant methods to make deployment on netlify:

- Drag and drop
- Connecting your deployed project on GitHub or any remote git repositories to netlify. We will go through both methods.

Method 1:

Let's start by signing up on netlify.
Sign Up 👉 Here

After signing up. Click on the sites tab on your dashboard.

Drag and drop your files folder 📂 as instructed.
Congrats 🎊 You have deployed your site successfully.
Easy right? :)

Method 2:

You still signed up for netlify right?
Alright! For this part, we will be using GitHub as our preferred git repository manager.
Create an account on GitHub.
Go to github.com to sign up/create one if you don’t have to.

Deploy your project to GitHub using git. Check out how to do that here

Go back to your account on netlify. Navigate to your dashboard.
Click on sites tab. then click on add an existing project in the drop-down options.

Click GitHub to connect your GitHub account.

Choose the project you want to host.

Wait for the deployment process...

Congrats 🎊 You just made a deployment.
Your site is now live.

Note: Netlify has a fancy feature where you won't have to make any more updates directly to your netlify deployment. It'll be in total sync with your GitHub repository. That means every time you push a new commit, it'll automatically update your live site.
Cool right 😎?

Conclusion

I hope with this short guide, I am able to help you deploy your project online. Cheers 🥂

How to connect your android device to github using ssh key with termux

Umar Sulaiman Mailafiya — Tue, 21 Jun 2022 18:51:00 +0000

Recently, I tried installing git and github on my phone. So that I can make changes on the go without being on my pc. I started by installing git. With git alone I thought I was already done. I went to my repo to get the link I want to clone. I ran the regular command as you know it git clone "link🔗". It prompted me with the username and password authentication prompt. Fast forward… with all the inputting and attempts to connect it to github, still no positive result. Then I discover I have to use shh in the connection as it appears to be the only way. I've searched for different ways to do it. From reading more than 7 blog articles to watching 2 YouTube Videos. Finally, I found the way ✨🎉.
In this post I'll tell you 5 simple steps I took to install git and connect it to github successfully and how you can too.

Step 1.

Download Termux using termux github build from
url(https://github.com/termux/termux-app/actions/runs/2518728695)
When you go to the page scroll down to find these builds and download the topmost.

Step 2.

Run apt update and apt upgrade In your termux terminal.

Step 3.

Run pkg install git
pkg install openssh

During the installation process you'll be prompted to create a username and password. You can choose to add or skip by pressing enter. But I'll recommend you skip, you can do that later.

Step 4.

When the ssh installation is done.
Run cat ./ .ssh/id_rsa.pub

You'll be presented with some text and your GitHub email address you added in the installation of the previous packages. Copy them all together. They're your public ssh key. If the email is not there, replace the email at the end with your GitHub account email address.

Step 5.

Next go to your GitHub account settings and click the ssh and gpg keys option.

Scroll down

Click on add new ssh key. Write a title for the key and paste the key in the provided box below the title.
Save.
Go back to your termux app and start using github as you would on desktop 🖥. You can test by cloning a repo.

Conclusion

Thank you so much. I hope this helps.

How to remove "npm WARN config global `--global`, `--local` are deprecated

Umar Sulaiman Mailafiya — Mon, 13 Jun 2022 00:28:37 +0000

When trying to create a new react app you happen to encounter such warning npm WARN config global--global,--localare deprecated. Use--location=globalinstead.

You've tried different methods to get rid of it and make your app creation work. but to no avail.

Don't worry you're in the right place. In this guide, I'll try my best to address every possible error that you might have come across or will, by providing these straightforward solutions. Without further ado, let's move into it.

This is mostly a Windows problem where npm is called via the npm.cmd in your node installation folder which is at %programfiles%\nodejs 0r %programfiles (x86)%\nodejs. And it is due to the deprecation of -g.

To resolve it Open the nodejs folder and edit the npm, npx, npx.cmd and npm.cmd files. Edit the prefix -g to prefix --location=global in every file. npm at line 23 while npm.cmd at line 12, npx at line 32 while npx.cmd at line 13.

Close your terminal and run your installation command again.

If it still persists, It means your npm package is likely not up-to-date. To upgrade it.

This is how to do so:
Ensure that you can execute scripts on your system by running the following command from PowerShell or cmd as an administrator.
Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force

Then, to install and use this npm windows upgrade tool, run the following command on PowerShell or cmd also as an administrator.
Note: This tool requires at least Node v8, please install an older version for older versions of Node.js.
npm install --location-global --omit=dev npm-windows-upgrade npm-windows-upgrade

The last command will present you with a list of all the published and available versions of npm (including pre-release and beta versions). Choose the one you want to install and wait for it to happen!

If you want to install the latest version.
Use npm-windows-upgrade --npm-version latest instead

After a successful upgrade completion, you're good to go.

if it still persists. Go to the location where your node files are installed these might be in %programfiles%\nodejs or %programfiles (x86)%\nodejs. Open the nodejs folder and edit the npm, npx, npx.cmd and npm.cmd files. Edit the prefix -g to prefix --location=global in every file. npm at line 23 while npm.cmd at line 12, npx at line 32 while npx.cmd at line 13.

For a failed Upgrade you need to follow these steps:

Uninstall Node.js (select Uninstall, not the Repair option).
Go into %programfiles%\nodejs 0r %programfiles (x86)%\nodejs and delete the entire folder.
Delete %appdata%\npm and %appdata%\npm-cache. You might not happen to find the folders there. Check and delete them at %User%\AppData%\Roaming%\npm, %User%\AppData%\Roaming%\npm-cache and %User%\AppData%\Local%\npm
Edit your PATH and remove everything that references npm (to do so, search for "Environment Variables").
Reinstall Node by going to https://nodejs.org/en/download/. Note: It is highly recommended to install Node.js and npm using a Node version manager like nvm, Next install the npm-windows-upgrade tool - and only use this tool to upgrade npm, do not attempt to run npm install npm(if you happen to, you might have to repeat the installation process).

After successfully installing nodejs. Run these commands:
npm install --location-global --omit=dev npm-windows-upgrade npm-windows-upgrade

Remember the last command will present you with a list of all the published and available versions of npm (including pre-release and beta versions). Choose the one you want to install and wait for it to happen!

If you want to install the latest version. Use npm-windows-upgrade --npm-version latest instead

After the upgrade has finished you can confirm it using npm -v command

Next, Go to the location where your node files are installed these might be in %programfiles%\nodejs or %programfiles (x86)%\nodejs. Open the nodejs folder and edit the npm, npx, npx.cmd and npm.cmd files. Edit the prefix -g to prefix --location=global in every file. npm at line 23 while npm.cmd at line 12, npx at line 32 while npx.cmd at line 13.

Run Your npx create-react-app app-name command again, And Voila!! Your installation has begin.

Thank you for reading this article. If you have any questions. Ask in the comment section below I'll happily answer them. Happy Coding!

How to increase the speed of your website: seven actionable steps to take

Umar Sulaiman Mailafiya — Sat, 07 May 2022 01:18:05 +0000

When it comes to the performance of your website, page speed is crucial.

Yet, you may find it difficult to improve unless you understand how this metric works — and more specifically, the factors that influence it.

It is critical that your web pages load fast and smoothly to reduce your bounce rate and increase visitor engagement.

A site that is optimized for speed not only improves the user experience (UX) but can also help you rank higher in search engines.

In this article, I’ll explain why it's important, and show you how to measure it. Then I'll give you seven solutions for improving page loading speed.

Why is page speed important?
As before stated, site speed can quickly determine whether a user stays on your website. But it's even more significant than that. When determining which websites to show at the top of search engine results pages, search engines, particularly Google, place a high-value on-site speed when determining which websites show at the top of the search engine results page(SERP). Website speed optimization improves search engine optimization (SEO), so it shouldn’t be overlooked.

For measuring page speed, Google's PageSpeed Insights is fit for that. Google's PageSpeed Insights is a website speed testing tool that ranks your site's speed on a scale of 0 to 100, with higher scores being better.

Google PageSpeed Insights will generate tests for both desktop and mobile, as well as recommendations for how to improve your speed score.

How to increase your page speed

Optimize images
Most web pages are slow due to large image files which causes an enormous increase in load time for pages. When setting up your assets for a page. Optimize your images by reducing the file size or by replacing the file format. Optimize your images using tinyjpg.com.

Use jpg or webp(recommended) file format if you’re going for smaller sizes.

Minify Html, CSS, and js
By optimizing your code, you can increase your page speed. Also remove code comments, formatting, and unused code. Google recommends using HtmlMinifier, CSSNano, and UglifyJS.

Use browser caching
Browser caching is one of the most popular methods for increasing page speed. By caching a large amount of information in your visitors' browsers. The browser does not have to reload the entire page when they return. Learn more about leveraging browser caching here

Use a content delivery network(CDN)
Content delivery networks (CDNs), also known as content distribution networks are server networks that distribute the load of delivering content. Essentially, copies of your site are stored at multiple, geographically diverse data centers so that users can access your site more quickly and reliably. Learn how to use CDN on your site here

Reduce redirects
When a page redirects to another page, your visitor must wait for the HTTP request-response cycle to complete. For instance, if your mobile redirect pattern is as follows:

example.com -> www.example.com -> m.example.com -> m.example.com/home

Each redirect slows down the load time of your page.

Remove render-blocking JavaScript
Before they can render a page, browsers must first construct a DOM tree by parsing HTML. If your browser comes across a script during this process, it must stop and execute it before proceeding.

Scripts that are not critical to the initial render should be made asynchronous or deferred until after the first render. Scripts required to render page content can be inlined to avoid extra network requests; but, inlined content must be small and fast to deliver good performance. Learn more on how to Remove render-blocking JavaScript here

Improve server response time
The amount of traffic you receive, the resources used by each page, the software on your server, and the hosting solution you use all have an impact on your server response time. Look for performance bottlenecks such as slow database queries, slow routing, or a lack of enough memory, and fix them to improve your server response time. The ideal server response time is less than 200ms. Learn more on how to improve server response time here

When you checkmark all these step perfectly, Your site will be at its top speed.