Zonat Solutions

Video Training Commands : sudo apt update sudo apt install apache2 sudo apt install mysql-server sudo mysql_secure_installation sudo apt install php libapache2-mod-php php-mysql sudo systemctl restart apache2 sudo mysql    CREATE DATABASE wordpress;    CREATE USER 'wordpressuser'@'localhost' IDENTIFIED BY 'password';    GRANT ALL PRIVILEGES ON wordpress.* TO 'wordpressuser'@'localhost';    FLUSH PRIVILEGES;    EXIT;     cd /tmp curl -LO https://wordpress.org/latest.tar.gz tar xzvf latest.tar.gz cp /tmp/wordpress/wp-config-sample.php /tmp/wordpress/wp-config.php sudo nano /tmp/wordpress/wp-config.php (Update the username, database name and the password in the config file)     define( 'DB_NAME', ' wordpress ' );     define( 'DB_USER', ' wordpressuser ' );     define( 'DB_PASSWORD', ' password ' );      sudo rsync -avP /tmp/wordpress/ /var/www/html/      sudo cho...

Organizing the file structure of the application is one of the major tasks in development. If the application is well structured, it is easy to read and maintain. let's explore the folder structure and the files of the folder contained within them Config Config folder contains the configuration of your server and the database connections. It contains methods to connect with the DB and set up the database. e.g.       try { const conn = await mongoose . connect ( mongoDb . Database . host , { useNewUrlParsers : true , useCreateIndex : true , useFindAndModify : false , useUnifiedTopology : true , } ) ; console . log ( "connection to db established" , conn . connection . host ) ; } This try method will try to connect to a MongoDB instance along with the defined parameters. Constants As the name suggests, this folder contains all the constants of the node application, e.g. Database name, hosting address, and other global consts. Controllers ...

Sprite image                Sprite images are made up of small images or icons combined to be used in the websites. They are helpful because the website won't need to request each icon as it can load the image with a single request. How to use sprite images:                The basic idea behind the sprite usage is to load the image using CSS and set the position of the image relative to the icon's position. e.g. if an image is 200 * 800 size with each icon being 200* 200 in size. Then the image would have 4 icons. we can use the first icon by using the span icon's background property and setting the background position to 0 0 coordinates along with its width and height to be 200 * 200. Example    HTML     <span class="twitter-icon" ></span>      CSS .twitter-icon : { background-image: url(" path of image"); width:200px; height:200px; background-positio...

  Creating A sprite image online How to create a sprite image what is a Sprite image:                         Sprite images are two-dimensional or one-dimensional multiple images combined together to form a single image. These are created by combining a number of small images together to form a big image. Sprite images can be created in one dimension(vertical or horizontal) or two-dimension depending on the number of images. Horizontal Sprite Image Vertical Sprite Image Two dimensional sprite image WHY Sprite image :                     Now a days, Almost all the websites includes icons and images. These images are loaded by making HTTP request to the server. If a website contains many different images and icons, it will cause to many http request which is not good for website. Creating a sprite image solves the problem as it is a single image consisitin...

  Why vs code?     Vs code has so many downloads because of its popularity in the dev community. Vs code has many extensions for beginners to generate boilerplate code for their choice of language. It can also be integrated with GitHub in order to commit the code and generate PRs(Pull & Push Request ) for the code. Docker containers can also be integrated inside them. It also has its own helping tools and features. Installation :     for Windows, Linux as well as mac users. the download link is given below. just download the software and follow along to get going, (Google VS Code download) For Windows users : for windows users, the installation step includes just downloading the software and double-clicking it to install the software.The installation process can be completed by simply hitting next & next and it will install VS Code in your windows mahine. For Linux users : for Linux users. download the software from the link given above go to your downlo...

  Craco Configuration Craco :     Craco stands for creating react app configuration override. It's a tool for configuring the create react app tool and overriding the default configuration. it can be used to configure eslint as well as babel. we will be using it for configuration to avoid messy imports e.ge.                         import {anycomponent} from '../../../components/anycomponent/anycomponent.js" we will be converting this import into something like :                      import {anycomponent} from '@components/anycomponent". so lets get started. Configuration :     we will be creating a new react app with a typescript template for this purpose in order to end up with a complete and running code. you will also find the link to the Github repo at the end of this tutorial. Step 1:          ...

HTML :  HTML means HyperText Markup Language. It is used to create the markup for the websites. Most of the websites are structured using HTML. Then content can be structured using different kinds of elements in the websites. The elements can be wrapped inside and nested to make a perfect structure for the content of the website. The simple structure of the website looks like this : <! DOCTYPE   html > < html   lang = "en" > < head >   < meta   charset = "UTF-8" >   < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge" >   < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >   < title >Document</ title > </ head > < body >   </ body > </ html > Don't overwhelm yourself. you will understand it as you go. most of the developers don't understand the basic structure as it is created by most...

How to Check the element type  you can check the element type by applying the border using CSS. if the border appears on the whole page. The element will be a block-level element and if the border wraps around the content of the element only. then the element will be an inline-level element example <! DOCTYPE   html > < html   lang = "en" > < head >   < meta   charset = "UTF-8" >   < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge" >   < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >   < title >Document</ title >   < style >    p {      border :  1 px   solid   black ;   }   </ style > </ head > < body >   < p >   This is a paragraph   </ p > </ body > ...