Blog – Page 2 – Tortoiz Themes

August 3, 2020

Everything About Git Part: 1

What is Git?

Git is a Source Code Version Control and Source Code Management System, which is a standard system for storing version or revision control of what you have written on your computer before and where you have changed it later. Linus Torvalds designed and developed the Git for the Linux kernel in 2005. Like Linux under GNU General Public License, Git is also an open-source and by far the most popular version control system for software development.

Why use Git?

Since Git is a Version Control Software, it can be easily controlled through any version of Git. Through Git, different developers can participate in the development of the same software, make changes, and a specific developer can finalize those changes. Since Git is a distributed version of the control system, it can also be used as a server. A dedicated Git Server software adds access control to a variety of features, including displaying Git repository content across the web and managing more than one repository. A big advantage of Git is that many developers can work on a project at the same time. You can work without an internet connection if you want. Although Git was initially developed for Linux, it also supports other operating systems, such as BSD, Solaris, OS X, and Microsoft’s Windows.

Before you start working on Git, you need to know about the most commonly used commands:

git init – Used to create a new repository.
git config – used to set configurations in git.
git status- Check the current status of git.
git add – Used to add one or all files together in a repository.
git clone – Used to download complete information from a pre-existing repository.
git commit – Used to permanently attach work to an offline repository.
git pull – Used to download files from a remote repository and merge with an offline repository.
git log – Used to check the log of git.
git push – Used to upload files from offline repository to remote repository.
git branch – used to create new branches in the repository.
git checkout – Used to switch from master branch to another branch.
git merge – Used to merge one branch with another.

July 30, 2020

Vue Js Part: 7 (HTML Output Template Syntax)

You need to use v-html directive to show any html output in VueJS. See the example below:

<html lang="en">

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">

<div id="app">

<div v-html="content">

new Vue ({

el: '#app',

data: {

content:

'
Hello World

'

}

})

Output:

Hello World

Display Image in VueJS

You need to use v-bind directive to display any image in VueJS. The general syntax (“Mustache” syntax) will not work here. Let us first give an example with general template syntax:

VueJs Instance

<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js">

<div id = "app">


Firstname : {{firstname}}


Lastname : {{lastname}}

<div v-html = "htmlcontent">

<img src = "{{imgsrc}}" width = "300" height = "250" />

<script type="text/javascript">

var vm = new Vue({

el: '#app',

data: {

firstname : "Tortoiz",

lastname : "Themes",

htmlcontent :

"

Vue Js Template

",

imgsrc : "https://tortoiz.wprashed.com/wp-content/uploads/2020/07/1_oZqGznbYXJfBlvGp5gQlYQ.jpeg"

}

})

Notice, can’t get the image!

Let us now look at an example of displaying images using v-bind directive:

   
      VueJs Instance
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
   
      <div id = "app">
         
Firstname : {{firstname}}
         
Lastname : {{lastname}}
         <div v-html = "htmlcontent">

<img v-bind:src = "imgsrc" width = "300" height = "250" />

<script type="text/javascript">

var vm = new Vue({

el: '#app',

data: {

firstname : "Tortoiz",

lastname : "Themes",

htmlcontent :

"

Vue Js Template

",

imgsrc : "https://tortoiz.wprashed.com/wp-content/uploads/2020/07/1_oZqGznbYXJfBlvGp5gQlYQ.jpeg"

}

})

Value show or hide toggling Template Syntax of HTML Element in VueJS:

To show or hide toggling the output of any html element in VueJS, you also need to use v-show directive. And it basically does the job using the CSS display property. However, it does not support the element, nor does it work with v-else and v-else-if. See the example below:

<html lang="en">

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">

<div id="app">

<div v-show="show">Hello World!

new Vue ({

el: '#app',

data: {

show: true

}

})

Output

See another example:

<html lang="en">

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">

<div id="app">

<div v-show="show">Hello World!

new Vue ({

el: '#app',

data: {

show: false

}

})

Output

July 28, 2020

Vue JS Part:6 (VueJS Text Output Template Syntax)

To show a simple text output in VueJS, you have to enter the name of the variable in cur} that is, double curly braces. Curly braces (second brackets) are also called “Mustache” syntax. See the example below:

   
      Templates
       <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
   
   <div id="vue_template">
      
Welcome {{name}}!

<script type = "text/javascript">

var app = new Vue({

el: '#vue_template',

data: {

name: "Evan You"

}

})

Output:

Welcome Evan You!

But you can also use VueJS’s v-text directive if you want. And the v-text directive works exactly like {}}. This means that

will output exactly the same as

. See the example below:

<html lang="en">

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">

<div id="app">

<div v-text="content">

new Vue ({

el: '#app',

data: {

content: 'Hello World'

}

})

Output:

Hello World

When you pass HTML markup to v-text. Then it will encode HTML markup in HTML entities. See the example below:

<html lang="en">

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">

<div id="app2">

<div v-text="content">

new Vue ({

el: '#app2',

data: {

content:

'<h3<Hello World

'

}

})

Output:

Hello world

July 26, 2020December 30, 2020

Here are 5 basic security measures to protect your website from hacking

It is important to ensure some basic security for those who have developed websites in the new WordPress. Anyone who is not a good developer can comply with these security requirements. In this article, I have tried to discuss some of the basic security of the WordPress website.

Use a good quality web hosting:

Many people use low-cost or anonymous web hosting. These online hosting service providers cannot provide good security to the websites. It is seen that the websites in these hosting are often hacked. So the hosting service providers who are good and ensure the security of the site should take their services.

Keep WordPress up to date:

WordPress or WP updates them by fixing various bugs and bringing new features. WordPress sites are useful for the site to be updated as soon as these updates arrive. Hackers misuse old versions to find fault with them. So it is much safer to keep regular WordPress updates.

Use strong passwords:

If you want to keep your website secure from hacking you must have to use a strong password, otherwise, a hacker will hack your website easily by using a brute force attack. So you must have to use a strong password for your website. Example of a strong password: 8%[email protected]

Use well-codded theme and plugins:

Always use a well-codded theme and plugins, because if your theme and plugin didn’t main security rule to develop theme or plugin then your site can be hack easily. Always buy themes from trusted sellers. If you develop a theme or plugin then must follow the security rule and keep your theme and plugin safe.

Never use null theme and plugin:

There are many people who didn’t want to buy a theme or plugin, they collect theme and plugin from third party website. It’s very risky because most of the time hackers modify those themes and plugins and they inject hacking code into those themes and plugin. Then they submit those themes on those third party websites.

If you like the article please share the article with your friends, Thank you 🙂

July 25, 2020

Vue JS Part: 5 (Instance Lifecycle Hooks)

After each view instance is created, it completes its tasks step by step. For example, it needs to set up data observation, compile the template, mount instance in the DOM, and update the DOM when any data changes. Similarly, it runs functions called lifecycle hooks, which allow the user to add their own code in certain steps.

Lifecycle Diagram

Template Syntax

VueJS uses HTML-based template syntax that lets you bind declaratively rendered DOMs to data under Vue instances. All Vue.js templates are valid HTML that can be parsed by Space-Compliant Browser and HTML Parser.

Vue compiles its templates into Virtual DOM render functions under the same umbrella. Combining with the reactivity system, Vue very cleverly finds a limited number of components to re-render. And finds a limited number of DOM manipulations to apply when the app state changes.

If you are familiar with Virtual DOM concepts and know JavaScript well, you can create your own render functions directly with additional JSX support instead of template syntax.

July 24, 2020

Vue JS Part: 4 (data, Object & Method)

Using data as an object:

If you want, you can assign an object as a value in the data. See the following example:

Output:

Output

Using data as a method:

If you want, you can assign a method to the data as a value. See the following example:

Output:

Output

July 23, 2020December 30, 2020

Vue Js Part:2 Declarative Programming

Declarative Programming is a programming paradigm for creating the structure and elements of computer programming that does not describe the control flow of the program or code but emphasizes its outcome or solution.

Declarative Programming is very easy to read because there is a lot of lower-level code and its details are hidden. Here we do not have to know much lower-level details of the system or code.

Vue.js core allows us to provide declaratively render data to the DOM using direct template syntax. See the following example:

Output:

Explanation:

The object created with the Vue constructor function in VueJS is called Vue Instance. To work with VueJS we need to create a Vue Instance with a new Vue, which will be the root instance of the Vue. And it remains as a Nested Tree. For example, a todo application will look a lot like this.

Root Instance └─ TodoList ├─ TodoItem │ ├─ DeleteTodoButton │ └─ EditTodoButton └─ TodoListFooter ├─ ClearTodosButton └─ TodoListStatistics

July 23, 2020

Vue Js Part: 3 Instance Syntax

In VueJS we need to create Instance with new Vue. The syntax is given below:
var app = new Vue({ // options })

Let us see a complete example with Vue Instance:

Output

Explanation:

Vue Instance first has a parameter called el, so you have to put the id of your DOM element, that is, the id where you want to see the result. We put the Id named info in the el parameter here. And we have set this Id in our DOM element called div.

And the second parameter in Vue Instance is data. And as the name implies, here we have to keep the data i.e. the properties of Instance. We have three properties named first name, last name, and age.

And the last parameter of Vue Instance is the methods with which we can process the data and return a value. Here we have returned the process data of our method in my details.

July 21, 2020December 30, 2020

.htaccess Basic

.Htaccess is a very important topic for web developers. We use .htaccess to make the web site SEO friendly, for security and to solve various problems. Many of us do not understand the search on Google htaccess and use it without understanding and many do not. The chain will be posted with htaccess. Inshallah, you don’t have to use htaccess without understanding. It will also be very helpful for those who do freelancing because there are a lot of marketplace htaccess related jobs available.

A few words about .htaccess

.htaccess is the configuration file used on the Apache webserver. .htaccess is basically an anonymous file, .htaccess is an extension. It is hidden by default. This file is usually in the root directory of the server but can be placed in a subdirectory other than the root.

If you do not see .htaccess by default in cpanel then show Hidden Files (dotfiles) when opening the file manager. Tick the box. If you still don’t see it, create a file called .htaccess.

How to create a .htaccess file

A very simple matter, you can create a .htaccess file directly on Sipnell or create it on your PC and then upload it.

Made directly from cpanel:

Click on cpanel New File and enter the name (.) Dot htaccess then click on Create New File button. Became the .htaccess file.

Made on PC:

Any type of code editor software such as Notepad ++ Sublime Text Brackets (.) Must be saved with the name dot htaccess. We can also do it with the normal Notepad of Windows. When you open Notepad and save, you have to save the file name (.) Dot htaccess with Save as type: All File. The .htaccess file became busy.

How .htaccess works:

Many ask where to put the .htaccess file or when to root it; When to put in a subdirectory. To know the correct solution to this question, you need to know how .htaccess works. Simply put, we compare the way .htaccess files work with CSS. For example, if the font size of the body tag is 14 pixels, then the font size of all the paragraphs, headings or other sub-elements inside this body tag will be 14. Again, if the font size of a dic is used inside that tag, then the font size of all the elements inside that dic will be 18. The .htaccess file works in exactly the same way. If you keep the file in the root, the code of that .htaccess file will also affect the sub-directory in the root. But if you put the .htaccess file in a subdirectory/folder, it will affect the files or subdirectories of that folder.

July 20, 2020December 30, 2020

Vue JS Part: 1

What is Vue.js?

Vue.js is an Open Source JavaScript Framework for modern and progressive user interface development. Which is very small and lightweight. It is much faster than other popular JavaScript frontend frameworks such as AngularJS and React. It is very simple to use and easy to deploy.

Everything you need to develop a modern and progressive user interface can be done by Vue. It is designed to meet all the needs of the growing future. As a web framework, it is also widely used for SPA (single page applications) development. It is rich in a number of features including data binding and event binding setup.

Evan You, a Google employee, created Vue.js in 2013 after working for Google on a number of projects using AngularJS and released it for the first time in 2014.

Vue.js – Installation and Environment Setup

There are many ways to install Vue.js. Here we will discuss a few ways.

Using the tag directly in the HTML File

If you want to install directly to the HTML File using the tag, you need to download the vue.js or vue.min.js file from this page https://vuejs.org/v2/guide/installation. Here the vue.js file is the development version and the vue.min.js file is the production version. Although the two files are the same, the production version is minimized and lightweight, while the development version is a little heavyweight, but will give you the benefits of debug mode and warnings during development.

Once downloaded, place the file in a folder named js in your project folder, then attach the following code to any HTML file:

Using CDN:

However, we can work with VueJS directly using CDN (content delivery network). You can apply for a CDN host (https://cdn.jsdelivr.net/npm/vue/dist/vue.js) or (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js) ). Can use. See the following example with CDN:

Using NPM

Recommends using VueJS NPM (NodeJS Package Manager) to create large scale and realtime applications with Vue.js. It includes other necessary tools including Browserify and Webpack. You will be able to enjoy many more benefits. To install with NPM you need to use the following command in Terminal in your Vue Project folder.

npm install vue

Similar to CDN working in NPM Vue, all you have to do here is change the file source. See the example below:

Using the CLI (Command Line Interface) command

VueJS offers CLI facility for working in Server Environment. Also if you install VueJS Server with VueJS CLI, you don’t have to worry about any set up or configure. Everything you need for modern front-end development is pre-loaded, with the benefits of real-time, rapid development, and single-file application development. In addition, using the Vue CLI will give you the following benefits:

It allows us to write our HTML, CSS, and JavaScript as we wish. It also allows us to write the latest versions of our components, TypeScript, SCSS, Pug, latest versions of ECMAScript in a single file (.vue).
Great features of Babel, TypeScript, ESLint, PostCSS, PWA, Unit Testing, and End-to-end Testing.
Here you will find the default plugin system so that you can easily add common features to your project.
As an alternative to the command-line tool, you will get a graphical user interface called Vue UI
It keeps Webpack configured for us, when we create any of our applications with Webpack it bundles, minifies, and optimizes all the JavaScript files, our CSS, and our dependencies for us properly.

Vue CLI 3 Installation

Vue CLI 3 comes as an NPM package. First, you need to make sure your PC has Node.js and NPM (NodeJS Package Manager). If you want to work with Vue CLI 3, you need the latest Node.js version 8.9 or higher. If you already have Node.js installed on your PC, you can check the version of Node.js with the following command:

node -v

After checking with the above command, if you feel you need to reinstall or update, you need to go to Node.js and download the appropriate version of your OS Installer. And Node.js Package Manager (NPM) will be automatically installed when installing a newer version.

Another thing is that Vue CLI version 3 has been completely rewritten. The previous version of Vue CLI has been renamed to use vue / cli.

And so it is best to first uninstall the Node.js Package vue-cli version on your PC with the following command.

npm uninstall vue-cli -g

Once the uninstall is complete, install the Node.js Vue CLI with the following command:

npm install -g @vue/cli

Once the installation is complete, you can check the version of your Vue with the following command:

vue -version

Create Project in Vue

New projects can be created in Vue CLI 3 in two ways. One is through the vue create command in the command line, and the other is through the VU UI. First we will look at the installation in the command line:

Installation on Command Line

To create a new project in Vue, you need to give the command vue create your_project_name. Just like the following:

vue create my-vue-app-01

After running this command you will be prompted to choose either default (babel, eslint) preset or Manually select features.

We will select this option Manually select features here, then Vue will show us all the features.

Here you can use the up and down arrow keys on your keyboard to navigate the features. And you can use John to select the spacebar. For example, we will select the default feature Babel and Linter / Formater as well as the Router Feature here.

Now you will be asked whether to use the History Mode of your Router. Here we will select NO.

After selecting, when we hit again, it will show us the Configure list of our selected Linter / Formatter.

However, we will select the ESLint + Prettier option here.

ESLint is a tool for identifying and reporting ECMAScript / JavaScript code to perfect and avoid bugs.
And Prettier is the feedback code formatter. It analyzes your code and applies a consistent style to the code by rewriting it with its own rules and takes the maximum length of the line if necessary, wrapping the code.

Now we will decide whether linting will end with save or commit.

We have selected Lint On Save here, now you will get two more options, one is In dedicated config file and the other is In package.json. Now we will select this option In dedicated config file.

Lastly, you get the option to save the settings as preset.

We have selected N here (no preset will be saved), now we will get the next question, where you will use Yarn as package manager or use NPM, the question will be asked.

Then after selecting NPM as Package Manager, your new project will be created and the required dependencies will be downloaded and installed.

Finally, you will see a success message on the command line and your new project will be created.

By now your new project has been created and configured. Now you need to access your project folder with cd command. Then you can run the Web server with the following command, and start the development.

cd my-vue-app-01

npm run serve

What is Git?

Why use Git?

Before you start working on Git, you need to know about the most commonly used commands:

Hello World

Output:

Display Image in VueJS

Firstname : {{firstname}}

Lastname : {{lastname}}

Vue Js Template

Firstname : {{firstname}}

Lastname : {{lastname}}

Vue Js Template

Value show or hide toggling Template Syntax of HTML Element in VueJS:

Output

See another example:

Output

Welcome {{name}}!

Output:

Output:

Output:

Hello world

Use a good quality web hosting:

Keep WordPress up to date:

Use strong passwords:

Use well-codded theme and plugins:

Never use null theme and plugin:

Lifecycle Diagram

Template Syntax

Using data as an object:

Output:

Using data as a method:

Output:

Output:

Explanation:

Output

Explanation:

A few words about .htaccess

How to create a .htaccess file

How .htaccess works:

What is Vue.js?

Vue.js – Installation and Environment Setup

Using the tag directly in the HTML File

Using CDN:

Using NPM

Using the CLI (Command Line Interface) command

Vue CLI 3 Installation

Create Project in Vue

Installation on Command Line

Categories