DEV Community: Niemvuilaptrinh

15 Free Hosting For Front-end Developers

Niemvuilaptrinh — Thu, 30 Dec 2021 13:44:47 +0000

Today we will go into together to learn about free, quality and useful web hosting for website design and development.

Static Website is a website with fixed content and is often used with three main languages: HTML, CSS, Javascript. In addition, you can also use front-end javascript to create this type of website such as React, Vue, Nuxt... Usually these websites will not have a database but it will use data via API, archive files... It is commonly used for landing pages, product demos, info pages...

1) GitHub Pages

Features of the free plan:

Website may be up to 1GB in size.
Bandwidth: 100Gb per month.
You can set your own domain name for your website via CNAME.
There is support for HTPPS for the website. GitHub Pages

2) Glitch

Features of the free plan:

Provide 4000 requests/hour.
Storage capacity 512MB.
Unlimited static sites.
Support import/export Github function. Cons: Your code and project will automatically be displayed as public by default. Glitch

3) Fleek

Features of the free plan:

Support custom domain.
Provide services https.
3GB of storage.
Unlimited websites.
Automatically deploy on Git.
250 minutes to build and 50GB of bandwidth. Cons: Your code and project will automatically be displayed as public by default. Fleek

4) Netlify

Features of the free plan:

Automatically build from Git.
Deployed on the global edge network.
Bandwidth: 100GB/Month.
Unlimited websites.
Restoreable to any version.
Provides a free CLI. Netlify

5) Render

Features of the free plan:

100GB/month for bandwidth and storage.
Lightning-fast CDN.
Custom domain with full SSL functionality.
Automatically deploy on Git. Render

6)Surge

Features of the free plan:

Provides 404.html page functionality.
Unlimited websites and APIs.
Custom domain.
Easy to deploy via CLI.. Surge

7)Vercel

Features of the free plan:

Improve website performance with Edge Network.
Unlimited websites and APIs.
Can custom domain with full SSL functionality.
100GB bandwwidth/month
Automatically optimize images (1000 images for the free version). Vercel

8)Hostman

Features of the free plan:

Allows to create 3 websites.
100GB/month of bandwidth.
Automatically build from Git.
Free SSL-certificate.
Deploy website with CDN service.
Can rollbacks to any versions. Hostman

9)Cloudflare Page

Features of the free plan:

Easy Git integration.
Unlimited website and number of pages.
No bandwidth limit.
Allow 500 builds/month.
Integrating CDN for web projects. Cloudflare Page

10)W3schools Spaces

Features of the free plan:

Free templates
Allow 500 requests/month.
Allow 100MB data and storage/month.
Free SSL. W3schools Spaces

11) Heroku

Features of the free plan:

Allows to choose your domain.
Deployable with Git and Docker.
CLI support.
Regularly update the system. Cons: will sleep 30 minutes if the site is down. Heroku

12) Firebase

Features of the free plan:

10 GB of storage.
360MB Bandwith/day.
You can edit your website's domain name.
Allows multiple pages to be added to the same project.
SSL support. Firebase

13) Digital Ocean App

Features of the free plan:

Can Deploy from Github, Gitlab
Offers a free CDN.
You can edit your website's domain name.
1GB Bandwith/project.
Support SSL, HTTPS. Digital Ocean App

14) GitLab Pages

Features of the free plan:

You can use Static Site Generators (SSG).
Provide CLI.
Unlimited number of websites.
Free SSL, HTTPS support. GitLab Pages

15) Amazon S3

Features of the free plan:

Provides 5GB of storage.
20,000 requests for website.
2,000 Put requests.. Cons: It is quite complicated to set up hosting. Amazon S3

Summary
I hope the article will provide you with more useful static hosting for web development and design and if you have any questions, just send me an email and I will respond as soon as possible. I hope you continue to support the site so that I can write more good articles. Have a nice day!
If you want to read more article please go to https://us.niemvuilaptrinh.com/.

10 Syntax Highlighter Javascript Libraries

Niemvuilaptrinh — Wed, 29 Dec 2021 12:25:54 +0000

Syntax Highlighter will be extremely useful for those of you who are blogging or making websites about programming-related issues. It help you easily embed example code into the website. It also helps to highlight and attract more users' attention through the themes that the library provides.

Highlightjs

Highlightjs is an open source library built with Javascript that highlight the code in the web page and can run in both the browser and the server. Some of the features of this library are that it doesn't depend on any framework, has the ability to automatically detect the language, supports more than 189 popular programming languages, provides 94 more styles style for code snippets in web pages . What I like about this library is that you can reduce the size of Highlightjs by removing programming languages that we do not use during the download process. For the server side, you can use yarn or npm to install it.

Link

Rainbow

Rainbow is a compact library written in pure Javascript with a size of only about 2.5kb. You can easily apply this to the web page by calling the data-language property for the object that we want to highlight the code in the HTML page. In addition, it provides 20 more CSS themes to help you choose a more diverse style for your website. Like Highlightjs, it can run on both the browser and the server.

Link

Prism

Prism is a lightweight library with a Javascript file of only 2KB (after compression) and a CSS file of 1KB (after compression). It is trusted and used by many major websites such as smashingmagazine, reactjs, css-tricks... Some of the strong points of this library are that it is easy to combine with HTML5 tags using attributes and classes for objects. , which is built on top of modern web standards, can easily style the themes the library provides. What I like about Prism is that it allows you to download the languages and themes you want to use by ticking each information in a pre-designed form (This part you can see more in Customize your download).

Link

SHJS

SHJS is a program written in Javascript that makes it easy to highlight code snippets in an HTML page. It supports most of today's popular programming languages as well as provides more themes so you can choose the right style for your website. To apply to the project, you will need 3 main files, the main SHJS script, the file that determines the programming language you want to use and finally the CSS file for choosing the theme syntax highlighting. Such file division will help you to easily adjust and expand the program when you want to add a certain language to the library.

Link

Microlightjs

Microlightjs is an open source library that helps you improve the visibility of your code snippets on your web pages. It is slightly different from the above libraries in that it does not provide themes for each programming language, but instead provides a pre-designed theme for all languages. With the main purpose of making the code stand out from the rest of the web page. In addition, it also runs on most popular browsers today and for IE version is IE9+ and above.

Link

SyntaxyJS

SyntaxyJS is a library that makes it easy to highlight your code in web pages. It uses a common theme file for all the syntax of programming languages with the purpose of helping you easily customize the interface to match the design of the website. What I like about this library is that there are detailed and complete instructions on how to set up and how to solve when encountering errors during use for the website.

Link

Tools To Help You Create Highlight Code Online

In this section, I will go into the tools available to help you highlight the code through compile the code into HTML page elements by copying the code you want to highlight -> select the language -> select the theme you want -> copy the code returned after processing -> paste it into the HTML page. Actually, these tools help you to automatically style the code through two main tags is pre, code in HTML.

pinetools

Link

Highlight Code

Link

Syntax Highlighter

Link

resurchify

Link
Summary:
I hope the article will provide you with useful libraries and syntax highlighting tools for web development and design, and if you have any questions, just send an email and I will respond as soon as possible. I hope you continue to support the site so that I can write more good articles. Have a nice day!
If you want to read more article please go to https://us.niemvuilaptrinh.com/.

Video Background HTML5 For Website

Niemvuilaptrinh — Wed, 29 Dec 2021 12:12:29 +0000

With modern web development, video backgrounds will enhance the user experience and the content on the website, today I will show you some examples about video background HTML CSS Javascript!

Use Video Background For Website

Before going into the article, I have some notes when you use video background for website is:

Try to compress your video size down to medium as it will reduce loading time for your website.
The time of the video should not be too long, only about 30 to 40 seconds is reasonable.
You should also pay attention to the color contrast of your content with the video background.
Ensure the video background can run on multiple devices screens. But for screens like mobile phones, I think we should not use them because of the time it takes to load web pages of these devices usually takes longer than other devices and does not provide a good user experience.

Video Background HTML5

You can see the results below.

Full Screen Video Background HTML5 CSS3

You can see the results below.

Create Video Background With Text With CSS

You can see the results below.

Design Video Background CSS Javascript

You can see the results below.

HTML5 Background Video Design

You can see the results below.

Create Video Background For Header

You can see the results below.

Create Video Background Using CSS Grid

You can see the results below.

Video Background CSS

You can see the results below.

Video Background With Navigation Using HTML CSS

You can see the results below.

Responsive Video Background

You can see the results below.

Login Page With Video Background

You can see the results below.

Summary:

Through here I hope the article will provide you more examples of useful background video for work web development, design and if you have any questions, please email me as soon as possible. We wish you continue to support the site so I can write more good articles. Have a nice day!

If you want to read more article please go to https://us.niemvuilaptrinh.com/.

20 HTML Input Password For Web Design

Niemvuilaptrinh — Wed, 29 Dec 2021 11:47:40 +0000

Today we will go into learning the input password development examples for Website development and design using HTML, CSS, Javascript.

Show & Hide Password animation

You can see the results below.

Show Hide Password HTML

You can see the results below.

Password Reveal

You can see the results below.

Password Guide

You can see the results below.

Login Form With Show Hide Password Icon

You can see the results below.

Interactive Password Validator

You can see the results below.

HTML Confirm Password Validation

You can see the results below.

Password Generator

You can see the results below.

Random Password Generator

You can see the results below.

Password Button

You can see the results below.

Check Password Strength Javascript

You can see the results below.

Password Error Animation

You can see the results below.

HTML Password Validation

You can see the results below.

Vue Password Strength Meter

You can see the results below.

Password Input Light

You can see the results below.

React Show / Hide Password

You can see the results below.

Password Strength Validation With Visibility Toggle

You can see the results below.

Vue Password Strength

You can see the results below.

Password input validate animation

You can see the results below.

Password validation using JavaScript examples

You can see the results below.

Interactive login form

You can see the results below.

Summary
I hope the article will provide you with more examples of useful password input for web development and design, and if you have any questions, just send an email and I will respond as soon as possible. I hope you continue to support the site so that I can write more good articles. Have a nice day!
If you want to read more article please go to https://us.niemvuilaptrinh.com/.

20 Best Place Free Vector Download

Niemvuilaptrinh — Tue, 28 Dec 2021 03:28:06 +0000

In this article, I will introduce websites that provide free Illustrations to help you choose more diversely in designing and beautifying your website. Now let's go to find out together!

Benefits of Illustration for website design

According to a study, Illustrations attract users more than images and videos.
It makes it possible to analyze data in a simple visual way as well as easily communicate message to users more.
Illustrations allow you to easily customize according to the intended use to suit your content or brand website logo.
Helps give your website a modern and distinct feel.
Helps you to connect the parts of the web in a systematic and coherent way through telling picture stories.

Illustration Gallery

Link Illustration Gallery

unDraw

Link unDraw

Open Doodles

Link Open Doodles

Lukaszadam

Link Lukaszadam

ISOMETRIC

Link ISOMETRIC

DrawKit

Link DrawKit

absurd illustrations

Link absurd illustrations

humaaans

Link humaaans

freepik

Link freepik

Wannapik

Link Wannapik

Open Peeps

Link Open Peeps

illustrations

Link illustrations

OUCH

Link OUCH

DELESIGN

Link DELESIGN

IRA Design

Link IRA Design

mixkit

Link mixkit

Karthik Srinivas

Link Karthik Srinivas

Stories Freepik

Link Stories Freepik

pixeltrue

Link pixeltrue

usesmash

Link usesmash

pngtree

Link pngtree

Glaze

Link Glaze

Summary
I hope the article will provide you with places to provide useful Illustrations for web development and design and if you have any questions, just send an email, I will respond as soon as possible. I hope you continue to support the site so that I can write more good articles. Have a nice day!
If you want to read more article please go to https://us.niemvuilaptrinh.com/.

10 Javascript Autocomplete Libraries For Website

Niemvuilaptrinh — Mon, 27 Dec 2021 23:55:40 +0000

In this article, I will introduce you some autocomplete js libraries for web design and development.

Awesomplete

Awesomplete is an open source library with a size of only about 2Kb (after compression) that create autocomplete for websites without any additional libraries. Before using, you need to download 2 files, awesomplete.css and awesomplete.js. Then you just need to call the awesamplete class and add data-list="ID of your list" to the input HTML. What I like is that its extensibility is also very easy through setting properties for HTML element such as "data-minchars: after": how many user-entered words will display suggestions, "data-maxitems": part number elements that the suggestion list can contain... In addition, it also has dropdown suggestions, get suggestions through Ajax... in the demo page!

Link Awesomplete

Horsey

Horsey is an open source library that helps you create autocomplete features quickly and easily to set up your website. You can use it for many different types of websites with many useful features such as loading suggestions via Ajax, using keyword suggestions, limiting the number of suggestions for users, using dropdown to display suggestions... It runs on most popular browsers today and for IE, from IE7+ and up.

Link Horsey

autoComplete.js

autoComplete.js is a library library is built javascript. With high variable customization features, no additional libraries, compact size, simplicity, ease of use. It has several other features such as search mode, highlight from key search, how many results will be display ...

Link autoComplete.js

typeahead.js

typeahead.js is a javascript autocomplete library inspired by the search function on Twitter. It has two main libraries, Bloodhound, which handles the computation of the outputs to the user, and the UI component that renders recommendations and interacts with the DOM. In this introduction, I will only focus on the interface, but if you want to learn more, you can see its Github page typeahead.js. This library has many useful features such as displaying suggestions in groups, adding default suggestions, easily tweaking the interface for suggestions...

Link typeahead.js

Algolia Places

Algolia Places is a Javascript library that helps us to quickly and easily create feature screens that display suggested topics to users when searching for a certain location. It will automatically give suggestions about address, city, country... every time you type in the box input. What I like most is that we can set up suggestions for information points through the real-time map that the library provides to help users easily shape and have a direct view. However, it also has a limitation that if you want to use it, you need to register to receive an API to access the library's data information. And with the free version we get 100,000 requests/month. If you want to use more, the price will be 0.4$ for 1000 requests.

Link Algolia Places

Accessible Autocomplete

Accessible Autocomplete is a Javascript library that generates an autocomplete. Main feature is support on many different devices, browsers and easy to set up for website. You just need the file accessible-autocomplete.min.js and then set up the feature for the website through the declaration of 3 basic properties, element: object in HTML page, id: id of lable and source: suggested resource. Also it is also has some more features like limit number of suggestions, add placeholder for input box, auto select suggestion...

Link Accessible Autocomplete

AutoJS

AutoJS is an open source library built with javascript that makes it possible to give suggestions during user input through a standard dictionary developed based on linguistic research and methods. Currently, as I see it, it is only used for English, with a standard size of about 17kb (containing more than 10,000 words). In addition, it also has two other versions, micro (contains about 1500 words) and maximum (contains about 32,000 words). You just need to download the file and initialize it with javascript code to be able to use it!

Link AutoJS

email-autocomplete

email-autocomplete is an open source library built with jquery that helps you build email domain suggestions for users. For example, when you enter hello@gm, the program will automatically suggest hello@gmail.com. It's convenient, right. You can also easily set the font color style for the suggested word in the input box via the .eac-sugg class. In addition, if you want to see popular email domains, you can refer to its github page.

Link email-autocomplete

Ajax AutoComplete for jQuery

Ajax AutoComplete for jQuery is an open source library built with jquery that makes it easy to create autocomplete for your website. It only uses the additional library, Jquery, with the compressed size only about 2.7kb. It also has a number of features that can be tailored to your site such as Ajax suggestions, height limits for suggestions, location of suggestions, number of results, suggestions want to show...

Link Ajax AutoComplete for jQuery

Flexselect

Flexselect is an open source library built with jquery that helps you display suggestions to users, when they enter certain information into the input box, the suggestions will be displayed via dropdown. For the normal way of selecting through the select tag, it has a limitation that when the user wants to select again, they have to search for information from the beginning in the list. This will be very inconvenient as well as take a lot of time for customers, so this library appears to help you solve the above problem. To make it easier to understand and know how to set up the website, you can see its demo page.

Link Flexselect

Summary:
I hope the article will provide you with useful autocomplete libraries for web development. If you have any questions just send an email I will respond as soon as possible. Please continue to support the site so that I can write more good articles. Have a nice day!

If you want to read more article please go to https://us.niemvuilaptrinh.com/.

40 Portfolio Templates Free For Web Design

Niemvuilaptrinh — Mon, 27 Dec 2021 12:18:26 +0000

Today we will together learn about beautiful, free portfolio templates for website design and development.