Deep Dive into Web Dev

Web Dev

Step by step guide for hosting static site in GitHub

GitHub allows us to host static sites in GitHub for free. It also supports static site builders like ` Jekyll``. But let’s limit this article to hosting a plain static site. Simple steps for hosting static sites. Create a GitHub account if you already don’t have one here". Advance user can use git & terminal to sync and push it to github Download either GitHub for Mac or GitHub for Windows, depending on your operating system. Open the app and log in using the account you just created. For the advanced user, you can use a terminal and ssh to clone the repository]. For Mac: After you log in, click advanced and make sure that your name and email are correct. Then, click “Install Command Line Tools”, just in case you want to start using the command line later in life. Create a new repository in your GitHub application. Name it your-username.github.io. The name is very important. Note the folder that GitHub is saving the repository to. Make sure the “Push to GitHub?” box is checked. Move your website’s files into the folder that GitHub just created when you made the repository. IMPORTANT: Your homepage HTML file must be called “index.html”, and it must exist in the top-level directory. Back in the GitHub application, you should see your files in the left column. Make sure they are all checked. If so, enter a message in the text box called “commit summary”, something like “initial commit.” Then, click the commit button. Click the “Publish repo” button in the top right corner. Give it about 10 minutes, then check your-username.github.io. Your website should be there! Using a custom domain name You can just leave your website at that address (it’ll give you some serious street cred in the developer world), but if you have a custom domain you would like to use, it is very simple to make GitHub redirect your page.
3 min read
Step by step guide for hosting static site in GitHub
Web Dev

Making system alert sound via Electron app

Electron export shell modules which help developers to interact with a desktop environment. Shell functions are available in both Main and Renderer processes but it is recommended to use it from the Main process so that we can better control its use. Let make a system alert sound using shell modules. In this article, we will use a shell.beep method which prompts the OS to make the system beep. Here is a simple code to make a beep in main.js file.
1 min read
Making system alert sound via Electron app
Web Dev

CSS centering [Simple Guide as Possible]

Vertical centering Translate is processed at the end, meaning it is based on the final element height. This means it works with any element, even dynamic heights. Of course it only works on relatively new browsers, but translate is well accepted and on the path to being ubiquitous. The style is also easy to understand and isn’t hacky. position: absolute; top: 50%; transform: translateY(-50%); Horizontal centering .center-div { margin: 0 auto; width: 100px; } The value auto in the margin property sets the left and right margins to the available space within the page. The thing to remember is your centered div must have a width property. Works on pretty much every browser.
2 min read
CSS centering [Simple Guide as Possible]
Web Dev

Understanding Cascade, Specificity in CSS

In css, the best way to accomplish something is often contingent on your particular constraints and how precisely you'll want to handle various edge cases. While there are some trick or useful recipes you can follow. Mastering CSS requires an understanding of the principle that makes those practices possible. In the first part of this blog, we will discuss about cascade in CSS. Though we have heard about fundamental of CSS i.e. the cascade, the box model but mastering them we must first know fundamental and know them deeply.
5 min read
Understanding Cascade, Specificity in CSS
Web Dev

Using yarn and npm for publishing npm packages

Setting up the pre-release version of the npm package NPM Registry allows developers to publish pre-release versions of the package. It is very useful for testing the package before publishing the final version. How to publish pre-release version of the package? ** 1. Using yarn** Yarn allows developers to publish pre-release version of the package using yarn publish --tag <tag-name> command. For example, if you want to publish the pre-release version of the package, you can use the following command.
2 min read
Using yarn and npm for publishing npm packages
Web Dev

5 ways to speed up your website

Working on the content of your website is an extremely important task, but not the only one you should concentrate on. It is equally important to work on the loading speed of your pages. Failing to do so will result in unsatisfied visitors. We live in an era of high-speed internet, and no one wants to wait for the page to load more than expected. With that in mind, learn these 5 ways to speed up your website and keep your visitors happy!
5 min read
5 ways to speed up your website
Web Dev

Does base64 inline image hurt SEO?

What are Base64 Images? Base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. So Base64 image is a string that represents the image as an ASCII string. So, Is it a good idea to use the Base64 image in your blog/website? In short NO. It may not have a direct impact SEO but go through the post and find out side-effect of using base64 inline images. Except for some cases where base64 string will be more suitable, such as icons, and single-page applications, which are not accessible by the search engine for ranking (in various specific scenario).
3 min read
Does base64 inline image hurt SEO?
Web Dev

Generating recurring dates array using rrule in JavaScript

Rrule package is the Javascript package to generate array of dates for recurring event, special when you are implementing UI like google calendar, recursive event creator when event might repeat for a year on daily basic. rrule.js supports recurrence rules as defined in the iCalendar RFC, with a few important differences. It is a partial port of the rrule module from the excellent python-dateutil library. On top of that, it supports parsing and serialization of recurrence rules from and to natural language.
2 min read
Generating recurring dates array using rrule in JavaScript
Web Dev

7 Must-Have Tools for Website Owners

Managing a small business with a website is far more complicated and time-consuming than many people believe. However, as technology advances, more and more tools that can aid in the operation of a website become available. These tools will assist you in running your website more efficiently, allowing you to concentrate on the most critical aspects of your business. To help you choose the best tools to help your business, we are here to offer you the seven must-have tools for website owners.
5 min read
7 Must-Have Tools for Website Owners