<h2>Prerequisites</h2>

<p>There are a few things you should know in advance before you start playing around with React.</p>

<p>Here are what I consider to be React prerequisites.</p>

<ul>
<li>Basic familiarity with HTML &amp; CSS.</li>
<li>Basic knowledge of JavaScript and programming.</li>
<li>Basic understanding of the <a href="https://www.w3schools.com/js/js_htmldom.asp" target="_blank" rel="noreferrer noopener" aria-label="DOM (opens in a new tab)">DOM</a>.</li>
<li>Familiarity with ES6 syntax and features.</li>
<li><a href="../../../../blog/how-to-install-and-manage-node-js-via-nvm/">Node.js and npm</a> installed globally.</li>
</ul>

<h2>Setup and Installation</h2>

<p><strong><em>npx create-react-app</em></strong> is the command to setup and install a react app. Its a built in package comes with nodejs. Run the below command to create a react app. It will take some time, wait for it to complete the setup.</p>

<pre class="wp-block-code"><code>npx create-react-app react-app</code></pre>

<p>Here <strong><em>react-app</em></strong> is the folder name in which react config &amp; setup files will be created by react to run a react-app.</p>
<p>Go to newly created app and run the below command to run the app.</p>

<pre class="wp-block-code"><code>cd react-app
npm start</code></pre>

<p><strong><em>npm start</em></strong> will run your react app.</p>
<p>Now, Edit <strong><em>src/App.js</em></strong> and save to view the effect.</p>

<p><strong>Feel free to leave a comment for any questions and issues.</strong></p>

npx create-react-app is the command to setup and install a react app. Its a built in package comes with nodejs. Run the below command to create a react app. It will take some time, wait for it to complete the setup.


There are a few things you should know in advance before you start playing around with React.



Here are what I consider to be ...

Getting Started with React 

<h2>What is React?</h2>

<p>React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called &ldquo;components&rdquo;.</p>

<blockquote class="wp-block-quote">
<p>ReactJS is only a frontend library and not the whole framework, which deals with the View component of MVC (Model &ndash; View &ndash; Controller).</p>
</blockquote>

<p>ReactJS was developed by Jordan Walke, a software engineer working at Facebook. Facebook implemented ReactJS in 2011 in its newsfeed section, but it was released to the public in May 2013. After the implementation of ReactJS, Facebook&rsquo;s UI underwent drastic improvement. This resulted in satisfied users and a sudden boost in its popularity.</p>

<h2>Why it is used?</h2>

<p>In ReactJS, everything is a component. Consider one lego house as an entire application. Then compare each of the lego blocks to a component which acts as a building block. These blocks components are integrated together to build one bigger and dynamic application.</p>

<p>The biggest advantage of using components is that you can change any component at any point in time without affecting the rest of the applications. This feature is most effective when implemented with larger and real-time applications where data changes frequently. Each time any data is added or updated, ReactJS automatically updates the specific component whose state has actually changed. This saves the browser from the task of reloading the whole application to reflect the changes.</p>

<h2>Features Of React</h2>

<p>Now that you have understood what is React and why it is used, lets now uncover few of its intriguing features.</p>

<h3>1. <strong>JSX</strong></h3>

<p>JSX stands for JavaScript XML. Its an XML/ HTML like syntax used by React. It extends the ECMAScript so that XML/ HTML like text can co-exist along with JavaScript react code. This syntax is used by the pre-processors like <em>Babel</em> to transform HTML like text found in JavaScript files into standard JavaScript objects. With JSX, we can go a step further by again embedding the HTML code inside the JavaScript. This makes HTML codes easy to understand and boosts JavaScript&rsquo;s performance while making our application robust.</p>
<p>Let&rsquo;s see how to write Hello World Program using JSX.</p>

<pre class="wp-block-code"><code>const MyComponent = React.createClass({
    render: function () {
        return(    
            &lt;h2&gt;Hello World&lt;/h2&gt;
        );
    }
});<br><br>ReactDOM.render(<br>    &lt;MyComponent/&gt;, document.getElementById('content')<br>);</code></pre>

<h3>2. <strong>Virtual DOM</strong></h3>

<p>Like an actual DOM, virtual DOM is also a node tree that lists the elements and their attributes and content as Objects and their properties. React&rsquo;s render function creates a node tree out of the React components. Then, it updates this tree in response to the mutations in data model caused by various actions done either by the user or by the system.</p>

<div class="wp-block-group">
<div class="wp-block-group__inner-container">
<p><strong>This <em>Virtual DOM</em> works in three simple steps.</strong></p>
<ol>
<li>Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.</li>
<li>Then the difference between the previous DOM representation and the new one is calculated.</li>
<li>Once the calculations are done, the real DOM will be updated with only the things that have actually changed.</li>
</ol>
</div>
</div>

<p>You can think of it as a patch. As patches are applied only to the affected area, similarly, the virtual DOM acts as patches and are applied to the elements which are updated or changed, in the real DOM.</p>
<p>This makes our application faster and there is no memory wastage.</p>

<h3>3. Testability</h3>

<p>React views can be used as functions of the state (state is an object which determines how a component will render and behave). Thus, we can easily manipulate with state of the components which we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc. This makes React applications quite easy to test and debug.</p>

<h3>4. Server-Side Rendering(SSR)</h3>

<p>Server-Side rendering allows you to pre-render the initial state of your react components at the server side only. With SSR, the server&rsquo;s response to the browser becomes only the HTML of the page which is now ready to be rendered. Thus, the browser can now start rendering without having to wait for all the JavaScript to be loaded and executed. As a result, the webpage loads faster. Here the user will be able to see the web page in spite of React still downloading the JavaScript, creating the virtual DOM, linking events, etc. at the back end.</p>
<h3>5. One-Way Data Binding</h3>

<p>Unlike other frameworks, ReactJS follows unidirectional data flow or one-way data binding. The major advantage of One-Way-Data binding is that throughout the application the data flows in a single direction which gives you better control over it. Because of this, application&rsquo;s state is contained in specific stores and as a result, rest of the components remains loosely coupled. This makes our application more flexible leading to increased efficiency.</p>
<h3>6. Simplicity</h3>

<p>Use of JSX files makes the application really simple and easy to code as well as understand. Even though we can use plain JavaScript here, using JSX is easier. React&rsquo;s component-based approach along with distinct lifecycle methods also make it simple to learn.</p>

<h3>7. Learning Curve</h3>

<p>Learning curve of React is quite low as compared to other frameworks. Anyone having even basic knowledge of programming can easily learn React. So, if you have previous knowledge of HTML and JavaScript you can get your hands on it very quickly.</p>

<p>This brings us to the end of this blog on what is React. Hope I was able to clearly explain what is React and why you should use it.</p>

<p><strong>Please feel free to comment your questions. Thanks</strong></p>

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UI...

Introduction to React

New Linux converts coming from the Windows world may find working with the command line to be somewhat intimidating. However, it's not that diffi...

Basic & Useful Linux Commands - TCMHACK

Basic & Useful Linux Commands

<p><strong>Cron</strong> allows Linux and Unix users to run commands or scripts at a given date and time. You can schedule scripts to be executed periodically. Cron is one of the most useful tool in a Linux or UNIX like operating systems. It is usually used for sysadmin jobs such as backups or cleaning <em>/tmp/ </em>directories and more. The cron service (daemon) runs in the background and constantly checks the <em>/etc/crontab</em> file, and <em>/etc/cron.*/</em> directories. It also checks the<em> /var/spool/cron/</em> directory.</p>

<h2>Types of cron configuration files</h2>

<p>There are different types of configuration files:</p>

<ul>
<li><strong>The UNIX / Linux system <a href="../../../../blog/what-is-crontab/">crontab</a>:</strong> Usually, used by system services and critical jobs that requires root like privileges. The sixth field (see below for field description) is the name of a user for the command to run as. This gives the system crontab the ability to run commands as any user.</li>
<li><strong>The user crontabs:</strong> User can install their own cron jobs using the crontab command. The sixth field is the command to run, and all commands run as the user who created the crontab</li>
</ul>

<h2>How Do I install or create or edit my own cron jobs?</h2>

<p>To edit or create your own crontab file, type the following command at the UNIX / Linux shell prompt:</p>

<pre class="wp-block-code"><code>crontab -e</code></pre>

<h2>Do I have to restart cron after changing the crontable file?</h2>

<p>No. Cron will examine the modification time on all crontabs and reload those which have changed. Thus cron need not be restarted whenever a crontab file is modified.</p>

<h2><strong>Syntax of crontab</strong></h2>

<p>The syntax is:</p>

<pre class="wp-block-code"><code>* * * * * /path/to/command args1 args2</code></pre>

<p>Where</p>

<ul>
<li><strong>First Star:</strong> Minute (0-59)</li>
<li><strong>Second Star:</strong> Hours (0-23)</li>
<li><strong>Third Star:</strong> Day (0-31)</li>
<li><strong>Fourth Star:</strong> Month (0-12 [12 == December])</li>
<li><strong>Fifth Star:</strong> Day of the week(0-7 [7 or 0 == sunday])</li>
<li><strong>/path/to/command</strong> &ndash; Script or command name to schedule</li>
<li><strong>args1: </strong>any other required arguments (Optional)</li>
</ul>

<p>Easy to remember format:</p>

<pre class="wp-block-code"><code>* * * * * command to be executed
- - - - -
| | | | |
| | | | ----- Day of week (0 - 7) (Sunday=0 or 7)
| | | ------- Month (1 - 12)
| | --------- Day of month (1 - 31)
| ----------- Hour (0 - 23)
------------- Minute (0 - 59)</code></pre>

<h2>How do I use operators?</h2>

<p>An operator allows you to specifying multiple values in a field. There are three operators:</p>

<ol>
<li><strong>The asterisk (*)&nbsp;</strong>: This operator specifies all possible values for a field. For example, an asterisk in the hour time field would be equivalent to every hour or an asterisk in the month field would be equivalent to every month.</li>
<li><strong>The comma (,)</strong>&nbsp;: This operator specifies a list of values, for example: &ldquo;1,5,10,15,20, 25&rdquo;.</li>
<li><strong>The dash (-)</strong>&nbsp;: This operator specifies a range of values, for example: &ldquo;5-15&rdquo; days , which is equivalent to typing &ldquo;5,6,7,8,9,&hellip;.,13,14,15&rdquo; using the comma operator.</li>
<li><strong>The separator (/)</strong>&nbsp;: This operator specifies a step value, for example: &ldquo;0-23/&rdquo; can be used in the hours field to specify command execution every other hour. Steps are also permitted after an asterisk, so if you want to say every two hours, just use */2</li>
</ol>

<h2>Use special string to save time</h2>

<p>Instead of the first five fields, you can use any one of eight special strings. It will not just save your time but it will improve readability.</p>

<figure class="wp-block-table">
<table>
<tbody>
<tr>
<td>Special string</td>
<td>Meaning</td>
</tr>
<tr>
<td>@reboot</td>
<td>Run once, at startup.</td>
</tr>
<tr>
<td>@yearly</td>
<td>Run once a year, &ldquo;0 0 1 1 *&rdquo;.</td>
</tr>
<tr>
<td>@annually</td>
<td>(same as @yearly)</td>
</tr>
<tr>
<td>@monthly</td>
<td>Run once a month, &ldquo;0 0 1 * *&rdquo;.</td>
</tr>
<tr>
<td>@weekly</td>
<td>Run once a week, &ldquo;0 0 * * 0&rdquo;.</td>
</tr>
<tr>
<td>@daily</td>
<td>Run once a day, &ldquo;0 0 * * *&rdquo;.</td>
</tr>
<tr>
<td>@midnight</td>
<td>(same as @daily)</td>
</tr>
<tr>
<td>@hourly</td>
<td>Run once an hour, &ldquo;0 * * * *&rdquo;.</td>
</tr>
</tbody>
</table>
</figure>

<h2>Examples</h2>

<p>Run ntpdate command every hour:</p>

<pre class="wp-block-code"><code>@hourly /path/to/ntpdate</code></pre>

<p>Make a backup everyday:</p>

<pre class="wp-block-code"><code>@daily /path/to/backup/script.sh</code></pre>

<p>&nbsp;</p>

Cron allows Linux and Unix users to run commands or scripts at a given date and time. You can schedule scripts to be executed periodically.

What are Cronjobs? - TCMHACK

What are Cronjobs?

<p>A crontab file contains instructions for the&nbsp;<strong>cron</strong> daemon in the following simplified manner: "run this command at this time on this date". Each user can define their own crontab. Commands defined in any given crontab are executed under the user who owns that particular crontab. Uucp and News usually have their own crontabs, eliminating the need for explicitly running su as part of a cron command.</p>

<p>Blank lines, leading spaces, and tabs are ignored. Lines whose first non-white space character is a pound-sign (#) are comments, and are not processed. Note that comments are not allowed on the same line as cron commands, since they are considered a part of the command. Similarly, comments are not allowed on the same line as environment variable settings.</p>

<p>An active line in a crontab is either an environment setting or a cron command. An environment setting is of the form:</p>

<pre class="wp-block-preformatted">name = value</pre>

<p>where the white spaces around the equal-sign (=) are optional, and any subsequent non-leading white spaces in <em><strong>value</strong></em> is a part of the value assigned to <strong><em>name</em></strong>. The <em><strong>value</strong></em> string may be placed in quotes (single or double, but matching) to preserve leading or trailing white spaces.</p>

<p>Several environment variables are set up automatically by the cron daemon. <strong><em>SHELL</em></strong> is set to <em>/bin/sh</em>, and <em><strong>LOGNAME</strong></em> and <em><strong>HOME</strong></em> are set from the <em>/etc/passwd</em> line of the crontab&acute;s owner. <em><strong>HOME</strong></em> and <em><strong>SHELL</strong></em> can be overridden by settings in the crontab; <em><strong>LOGNAME</strong></em> can not.</p>

<p>(Note: the <strong><em>LOGNAME</em></strong> variable is sometimes called <strong><em>USER</em></strong> on <strong><em>BSD</em></strong> systems and is also automatically set).</p>

<p>In addition to <strong><em>LOGNAME</em></strong>, <strong><em>HOME</em></strong>, and <strong><em>SHELL</em></strong>, cron looks at the <strong><em>MAILTO</em></strong> variable if a mail needs to be send as a result of running any commands in that particular crontab. If <strong><em>MAILTO</em></strong> is defined (and non-empty), mail is sent to the specified address. If <strong><em>MAILTO</em></strong> is defined but empty (<strong><em>MAILTO</em></strong>=""), no mail is sent. Otherwise, mail is sent to the owner of the crontab. This option is useful if you decide to use <em>/bin/mail</em> instead of <em>/usr/lib/sendmail</em> as your mailer. Note that<em> /bin/mail</em> does not provide aliasing and <strong><em>UUCP</em></strong> usually does not read its mail. If <strong><em>MAILFROM</em></strong> is defined (and non-empty), it is used as the envelope sender address, otherwise, ``root'' is used.</p>

<p>By default, cron sends a mail using the <em>'Content-Type:</em>' header of '<em>text/plain</em>' with the '<em>charset=</em>' parameter set to the '<em>charmap/codeset</em>' of the locale in which crond is started up, i.e., either the default system locale, if no <strong><em>LC_*</em></strong> environment variables are set, or the locale specified by the <em><strong>LC_*</strong></em> environment variables. Different character encodings can be used for mailing cron job outputs by setting the <strong><em>CONTENT_TYPE</em></strong> and <strong><em>CONTENT_TRANSFER_ENCODING</em></strong> variables in a crontab to the correct values of the mail headers of those names.</p>

<p>The <strong><em>CRON_TZ</em></strong> variable specifies the time zone specific for the cron table. The user should enter a time according to the specified time zone into the table. The time used for writing into a log file is taken from the local time zone, where the daemon is running.</p>

<p>The <strong><em>MLS_LEVEL</em></strong> environment variable provides support for multiple per-job SELinux security contexts in the same crontab. By default, cron jobs execute with the default SELinux security context of the user that created the crontab file. When using multiple security levels and roles, this may not be sufficient, because the same user may be running in different roles or in different security levels.</p>

<p>The <strong><em>RANDOM_DELAY</em></strong> variable allows delaying job startups by random amount of minutes with upper limit specified by the variable. The random scaling factor is determined during the cron daemon startup so it remains constant for the whole run time of the daemon.</p>

<p><strong>The time and date fields are:</strong></p>

<pre class="wp-block-code"><code>field          allowed values
-----          --------------
minute         0-59
hour           0-23
day of month   1-31
month          1-12 (or names, see below)
day of week    0-7 (0 or 7 is Sunday, or use names)</code></pre>

<p>A field may contain an asterisk (*), which always stands for <em>"first-last"</em>.</p>

<p>Ranges of numbers are allowed. Ranges are two numbers separated with a <strong>hyphen</strong>. The specified range is inclusive. For example, <strong>8-11</strong> for an '<strong>hours</strong>' entry specifies execution at <strong>hours 8, 9, 10, and 11</strong>. The first number must be less than or equal to the second one.</p>

<p>Lists are allowed. A list is a set of numbers (or ranges) separated by commas. Examples: <em>"1,2,5,9", "0-4,8-12".</em></p>

<h4>EXAMPLE CRON FILE</h4>

<pre class="wp-block-code"><code># use /bin/sh to run commands, no matter what /etc/passwd says
SHELL=/bin/sh
# mail any output to `paul', no matter whose crontab this is
MAILTO=paul
#
CRON_TZ=Japan
# run five minutes after midnight, every day
5 0 * * *       $HOME/bin/daily.job &gt;&gt; $HOME/tmp/out 2&gt;&amp;1
# run at 2:15pm on the first of every month -- output mailed to paul
15 14 1 * *     $HOME/bin/monthly
# run at 10 pm on weekdays, annoy Joe
0 22 * * 1-5    mail -s "It's 10pm" joe%Joe,%%Where are your kids?%
23 0-23/2 * * * echo "run 23 minutes after midn, 2am, 4am ..., everyday"
5 4 * * sun     echo "run at 5 after 4 every sunday"</code></pre>

<h4>Jobs in /etc/cron.d/</h4>

<p>The jobs in <strong>cron.d</strong> and <em>/etc/crontab</em> are system jobs, which are used usually for more than one user, thus, additionally the username is needed. <strong><em>MAILTO</em></strong> on the first line is optional.</p>

<h4>EXAMPLE OF A JOB IN /etc/cron.d/job</h4>

<pre class="wp-block-code"><code>#login as root
#create job with preferred editor (e.g. vim)
MAILTO=root
* * * * * root touch /tmp/file</code></pre>

<h4>SELinux with multi level security (MLS)</h4>

<p>In a crontab, it is important to specify a security level by <strong><em>crontab -s</em></strong> or specifying the required level on the first line of the crontab. Each level is specified in <em>/etc/selinux/targeted/seusers</em>. When using crontab in the <strong><em>MLS</em></strong> mode, it is especially important to:</p>

<ul>
<li><em>check/change</em> the actual role,</li>
<li>set correct<strong> role for directory</strong>, which is used for <em>input/output</em>.</li>
</ul>

<h4>EXAMPLE FOR SELINUX MLS</h4>

<pre class="wp-block-code"><code># login as root
newrole -r sysadm_r
mkdir /tmp/SystemHigh
chcon -l SystemHigh /tmp/SystemHigh
crontab -e
# write in crontab file
MLS_LEVEL=SystemHigh
0-59 * * * * id -Z &gt; /tmp/SystemHigh/crontest</code></pre>

<h4>FILES</h4>

<ul>
<li><strong>/etc/crontab</strong> main system crontab file.</li>
<li><strong>/var/spool/cron/</strong> a directory for storing crontabs defined by users.</li>
<li><strong>/etc/cron.d/</strong> a directory for storing system crontabs.</li>
</ul>

<h4>EXTENSIONS</h4>

<p>These special time specification "<em>nicknames</em>" which replace the 5 initial time and date fields, and are prefixed with the '@' character, are supported:</p>

<pre class="wp-block-code"><code>@reboot    :    Run once after reboot.
@yearly    :    Run once a year, ie.  "0 0 1 1 *".
@annually  :    Run once a year, ie.  "0 0 1 1 *".
@monthly   :    Run once a month, ie. "0 0 1 * *".
@weekly    :    Run once a week, ie.  "0 0 * * 0".
@daily     :    Run once a day, ie.   "0 0 * * *".
@hourly    :    Run once an hour, ie. "0 * * * *".</code></pre>

A crontab file contains instructions for the cron daemon in the following simplified manner: "run this command at this time on this date". Each user can define their own crontab. Commands defined in any given crontab are executed under the user who owns that particular crontab.

What is Crontab?

<p>Hey Guys, In this tutorial, we will learn how to upload files via ssh using terminal.</p>

<p>Uploading files via ssh required when you don't have any <strong>cPanel</strong> to work with like aws hosting which only provides you the <strong>SSH</strong>.</p>

<p>So we will be using the SCP (Secure Copy Protocal) for file transfer. Let's start.</p>

<h3>What is Secure Copy Protocal (SCP)</h3>

<p><strong>Secure copy protocol (SCP)</strong> is a means of securely transferring computer files between a local host and a remote host or between two remote hosts.It is based on the Secure Shell (SSH) protocol.</p>

<p>"SCP" commonly refers to both the Secure Copy Protocol and the program itself. According to OpenSSH developers in April 2019 the scp protocol is outdated, inflexible and not readily fixed; they recommend the use of more modern protocols like sftp and rsync for file transfer.</p>

<p>The <strong>SCP program</strong> is a software tool implementing the SCP protocol as a service daemon or client. It is a program to perform secure copying.</p>

<h4><strong>Syntax</strong></h4>

<p>Typically, a syntax of&nbsp;scp&nbsp;program&nbsp;is like the syntax of&nbsp;<strong>cp&nbsp;(copy)</strong>:</p>

<p>Copying file to host:</p>

<pre class="wp-block-code"><code>scp SourceFile user@host:directory/TargetFile</code></pre>

<p>Copying folder from host:</p>

<pre class="wp-block-code"><code>scp user@host:directory/SourceFile TargetFile
scp -r user@host:directory/SourceFolder TargetFolder</code></pre>

<p>Note that if the remote host uses a port other than the default of 22, it can be specified in the command. For example, copying a file from host:</p>

<pre class="wp-block-code"><code>scp -P 2222 user@host:directory/SourceFile TargetFile</code></pre>

<p><strong>If you're working with aws hosting then you must have to use the <em>key</em></strong></p>

<pre class="wp-block-code"><code>scp -i yourkey.pem user@host:directory/SourceFile TargetFile</code></pre>

<p><strong><em>Let's take an example:</em></strong></p>

<pre class="wp-block-code"><code>scp -i mykey.pem /var/www/html/myfile.sql ubuntu@google.com:/var/www/htmlmyfile.sql</code></pre>

<h4>Feels like watching?</h4>
<p><iframe style="width: 678px; height: 381px;" title="YouTube video player" src="https://www.youtube.com/embed/C0ImnCTI1W8?si=2ZMlGpmugDBo_Qrc" width="678" height="381" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" referrerpolicy="strict-origin-when-cross-origin"></iframe></p>

Hey Guys, In this tutorial, we will learn how to upload files via ssh using terminal.



Uploading files via ssh required when you don't have any...

How to upload files via ssh using scp on ubuntu - TCMHACK

How to upload files via ssh using scp on ubuntu

<p><strong><a rel="noreferrer noopener" aria-label="Intro.js (opens in a new tab)" href="https://introjs.com/" target="_blank">Intro.js</a></strong> is Step-by-step guide and feature introduction. It is open-source and free to use.</p>



<h3>WHY USING INTRO.JS?</h3>



<p>When new users visit your website or product you should demonstrate your product features using a step-by-step guide. Even when you develop and add a new feature to your product, you should be able to represent them to your users using a user-friendly solution. Intro.js is developed to enable web and mobile developers to create a step-by-step introduction easily.</p>



<h3>Features:</h3>



<ul><li><strong>No dependencies, fast and small:</strong> 10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped).</li><li><strong>User-friendly:</strong> Navigate using keyboard or mouse. Easily change the themes for your website.</li><li><strong>Browser compatibility:</strong> Works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer.</li></ul>



<h3>Important Links</h3>



<ol><li><a href="https://introjs.com/" target="_blank" rel="noreferrer noopener" aria-label="Home (opens in a new tab)">Home</a></li><li><a rel="noreferrer noopener" aria-label="Documentation (opens in a new tab)" href="https://introjs.com/docs/" target="_blank">Documentation</a></li><li><a rel="noreferrer noopener" aria-label=" Download (opens in a new tab)" href="https://github.com/usablica/intro.js/releases" target="_blank">Download</a></li><li><a href="https://introjs.com/" target="_blank" rel="noreferrer noopener" aria-label="Demo (opens in a new tab)">Demo</a></li><li><a href="https://github.com/usablica/intro.js" target="_blank" rel="noreferrer noopener" aria-label="Github (opens in a new tab)">Github</a></li></ol>



<p><strong><em>Credit goes to Introjs@<a href="https://introjs.com/">https://introjs.com/</a></em></strong></p>

Intro.js is Step-by-step guide and feature introduction. It is open-source and free to use.



WHY USING INTRO.JS?



When new users visit your w...

Intro.js - Step-by-step guide and feature introduction - TCMHACK

Intro.js - Step-by-step guide and feature introduction

<p><strong>AlertifyJS</strong> is a javascript framework for developing pretty browser dialogs and notifications.</p>



<h2>Features</h2>



<h3>Feature-rich</h3>



<p>Packed with awesome features! Modal and Modelss view modes, Move, Resize and more!</p>



<h3>&nbsp;Extensible</h3>



<p>Extend existing dialogs, or create your own! using AlertifyJS is very straightforward.</p>



<h3>&nbsp;Unobtrusive notifications</h3>



<p>Unobtrusive notification messages can be used to give feedback to users.</p>



<h3>&nbsp;Themeable</h3>



<p>Three themes right out-of-the-box (AlertifyJS, Semantic and Bootstrap). <a href="https://alertifyjs.com/examples.html#semantic" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">view example</a></p>



<h3>&nbsp;Responsive</h3>



<p>Whether you use a desktop, laptop, tablet or mobile device. Have no worries!</p>



<h3>&nbsp;i18n and RTL Support</h3>



<p>Different language or a right-to-left layout! AlertifyJS got you covered. <a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://alertifyjs.com/examples.html#RTL" target="_blank">view example</a></p>



<p><strong>AlertifyJS not only provides a replacement for default browser dialogs, it makes it super easy to create your own!</strong></p>



<pre class="wp-block-code"><code>if(!alertify.myAlert){
  //define a new dialog
  alertify.dialog('myAlert',function(){
    return{
      main:function(message){
        this.message = message;
      },
      setup:function(){
          return { 
            buttons:&#91;{text: "cool!", key:27/*Esc*/}],
            focus: { element:0 }
          };
      },
      prepare:function(){
        this.setContent(this.message);
      }
  }});
}
//launch it.
alertify.myAlert("Browser dialogs made easy!");</code></pre>



<h4><strong>Let's Start</strong></h4>



<ul><li><a rel="noreferrer noopener" aria-label="Getting Started (opens in a new tab)" href="https://alertifyjs.com/guide.html" target="_blank">Getting Started</a></li><li>Components<ul><li><a rel="noreferrer noopener" aria-label="Alert (opens in a new tab)" href="https://alertifyjs.com/alert.html" target="_blank">Alert</a></li><li><a rel="noreferrer noopener" aria-label="Confirm (opens in a new tab)" href="https://alertifyjs.com/confirm.html" target="_blank">Confirm</a></li><li><a rel="noreferrer noopener" aria-label="Prompt (opens in a new tab)" href="https://alertifyjs.com/prompt.html" target="_blank">Prompt</a></li><li><a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://alertifyjs.com/notifier.html" target="_blank">Notifier</a></li></ul></li><li><a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://alertifyjs.com/factory.html" target="_blank">Dialogs Factory</a></li><li><a rel="noreferrer noopener" aria-label="Examples (opens in a new tab)" href="https://alertifyjs.com/examples.html" target="_blank">Examples</a></li><li><a href="https://alertifyjs.com/tutorials.html" target="_blank" rel="noreferrer noopener" aria-label="Tutorials (opens in a new tab)">Tutorials</a></li></ul>



<p><em><strong>Credit goes to AlertifyJS@<a href="https://alertifyjs.com/">https://alertifyjs.com/</a></strong></em></p>

AlertifyJS is a javascript framework for developing pretty browser dialogs and notifications.



Features



Feature-rich



Packed with awesome ...

AlertifyJS - Browser dialogs made easy! - TCMHACK

AlertifyJS - Browser dialogs made easy!

<p><strong><a href="https://sweetalert.js.org/" target="_blank" rel="noreferrer noopener" aria-label="SweetAlert (opens in a new tab)">SweetAlert</a></strong> A beautiful replacement for JavaScript's "alert".</p>

<h2>Installation</h2>

<pre class="wp-block-code"><code>npm install --save sweetalert</code></pre>

<h2>Usage</h2>

<pre class="wp-block-code"><code>import swal from 'sweetalert';
swal("Hello world!");</code></pre>

<h2>Upgrading from 1.X</h2>

<p>Many improvements and breaking changes have been introduced in the 2.0 release. Make sure you read the&nbsp;<a href="https://sweetalert.js.org/guides/#upgrading-from-1x" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">upgrade guide</a>&nbsp;to avoid nasty suprises!</p>

<h2>Guides</h2>

<ul>
<li><a href="https://sweetalert.js.org/guides/#installation" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Installation</a></li>
<li><a href="https://sweetalert.js.org/guides/#getting-started" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Getting started</a></li>
<li><a href="https://sweetalert.js.org/guides/#advanced-examples" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Advanced examples</a></li>
<li><a href="https://sweetalert.js.org/guides/#using-with-libraries" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Using with libraries</a></li>
<li><a href="https://sweetalert.js.org/guides/#upgrading-from-1x" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Upgrading from 1.X</a></li>
</ul>

<h2>Documentation</h2>

<ul>
<li><a href="https://sweetalert.js.org/docs/#configuration" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Configuration</a></li>
<li><a href="https://sweetalert.js.org/docs/#methods" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Methods</a></li>
<li><a href="https://sweetalert.js.org/docs/#theming" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Theming</a></li>
</ul>

<h2>Examples</h2>

<h3>An error message:</h3>

<pre class="wp-block-preformatted">swal("Oops!", "Something went wrong!", "error");</pre>

<h3>A warning message, with a function attached to the confirm message:</h3>

<ul>
<li>Using promises:</li>
</ul>

<pre class="wp-block-preformatted">swal({
  title: "Are you sure?",
  text: "Are you sure that you want to leave this page?",
  icon: "warning",
  dangerMode: true,
})
.then(willDelete =&gt; {
  if (willDelete) {
    swal("Deleted!", "Your imaginary file has been deleted!", "success");
  }
});</pre>

<ul>
<li>Using async/await:</li>
</ul>

<pre class="wp-block-preformatted">const willDelete = await swal({
  title: "Are you sure?",
  text: "Are you sure that you want to delete this file?",
  icon: "warning",
  dangerMode: true,
});

if (willDelete) {
  swal("Deleted!", "Your imaginary file has been deleted!", "success");
}</pre>

<h3>A prompt modal, where the user's input is logged:</h3>

<ul>
<li>Using promises:</li>
</ul>

<pre class="wp-block-preformatted">swal("Type something:", {
  content: "input",
})
.then((value) =&gt; {
  swal(`You typed: NULL`);
});</pre>

<ul>
<li>Using async/await:</li>
</ul>

<pre class="wp-block-preformatted">const value = await swal("Type something:", {
  content: "input",
});

swal(`You typed: NULL`);</pre>

<h3>In combination with Fetch:</h3>

<ul>
<li>Using promises:</li>
</ul>

<pre class="wp-block-preformatted">swal({
  text: "Wanna log some information about Bulbasaur?",
  button: {
    text: "Search!",
    closeModal: false,
  },
})
.then(willSearch =&gt; {
  if (willSearch) {
    return fetch("http://pokeapi.co/api/v2/pokemon/1");
  }
})
.then(result =&gt; result.json())
.then(json =&gt; console.log(json))
.catch(err =&gt; {
  swal("Oops!", "Seems like we couldn't fetch the info", "error");
});</pre>

<ul>
<li>Using async/await:</li>
</ul>

<pre class="wp-block-preformatted">const willSearch = await swal({
  text: "Wanna log some information about Bulbasaur?",
  button: {
    text: "Search!",
    closeModal: false,
  },
});

if (willSearch) {
  try {
    const result = await fetch("http://pokeapi.co/api/v2/pokemon/1");
    const json = await result.json();
    console.log(json);
  } catch (err) {
    swal("Oops!", "Seems like we couldn't fetch the info", "error");
  }
}</pre>

<h2>Using with React</h2>

<p>SweetAlert has tools for&nbsp;<a href="https://sweetalert.js.org/guides/#using-with-libraries" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">integrating with your favourite rendering library.</a></p>

<p>If you're using React, you can install&nbsp;<a href="https://www.npmjs.com/package/@sweetalert/with-react" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">SweetAlert with React</a>&nbsp;in addition to the main library, and easily add React components to your alerts like this:</p>

<pre class="wp-block-preformatted">import React from 'react'
import swal from '@sweetalert/with-react'

swal(
  &lt;div&gt;
    &lt;h1&gt;Hello world!&lt;/h1&gt;
    &lt;p&gt;
      This is now rendered with JSX!
    &lt;/p&gt;
  &lt;/div&gt;
)</pre>

<p><a href="https://sweetalert.js.org/guides/#using-react" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Read more about integrating with React</a></p>

<p><strong><em>Credit goes to SweetAlerts@<a href="https://sweetalert.js.org/">https://sweetalert.js.org/</a></em></strong></p>

SweetAlert A beautiful replacement for JavaScript's "alert".

SweetAlert - A beautiful replacement for JavaScript's "alert" - TCMHACK

SweetAlert - A beautiful replacement for JavaScript's "alert"

<p><strong>Paper.js</strong> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.</p>

<p>Paper.js is based on and largely compatible with&nbsp;<a href="http://scriptographer.org/" target="_blank" rel="noreferrer noopener">Scriptographer</a>, a scripting environment for Adobe Illustrator with an active community of scripters and more than 10 years of development.</p>

<p>Paper.js is easy to learn for beginners and has lots to master for intermediate and advanced users.</p>

<p>Paper.js is developed by&nbsp;<a href="http://lehni.org/" target="_blank" rel="noreferrer noopener">J&uuml;rg Lehni</a>&nbsp;&amp;&nbsp;<a href="http://jonathanpuckey.com/" target="_blank" rel="noreferrer noopener">Jonathan Puckey</a>, and distributed under the permissive MIT License.</p>
<h3>Getting Started</h3>
<ul>
<li>First of all, take a look at some of paperjs <a href="http://paperjs.org/examples/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">examples</a>.</li>
<li><a href="http://paperjs.org/download/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Download</a>&nbsp;Paper.js or check out the latest version from paperjs&nbsp;<a href="http://github.com/paperjs/paper.js" target="_blank" rel="noreferrer noopener">Github Repository</a>.</li>
<li>Want to learn Paper.js? Why not start now with one of our <a href="http://paperjs.org/tutorials/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Tutorials</a>.</li>
<li>If you have any questions or comments, please join the paperjs <a href="http://groups.google.com/group/paperjs" target="_blank" rel="noreferrer noopener">mailing list</a>.</li>
<li>To stay up to date, <a href="http://twitter.com/paperjs" target="_blank" rel="noreferrer noopener">follow paperjs on Twitter</a>.</li>
</ul>
<h3>Overview</h3>

<p>Paper.js is not simply a wrapper around the Canvas, it offers much more:</p>

<ul>
<li>A Scene Graph / Document Object Model for vector graphics: Work with nested layers, groups, paths, compound paths, rasters, symbols etc.</li>
<li>The handling and drawing of these graphic items is automatic and optimised, allowing you to construct or modify your items and styles and leave the drawing commands to Paper.js.</li>
<li>A well designed and battle hardened Application Programming Interface (API).</li>
<li>PaperScript, a simple extension of JavaScript, allowing the scoped execution of scripts without polluting the global scope, the execution of multiple scripts per page in their separate sand-boxed scopes while sharing the library code, and adding support for operator overloading to any object.</li>
<li>There is a good reason for the word Vector in Vector Graphics. Paper.js treats Vector Mathematics as a first class citizen by making working with vectors and geometries as simple as possible through its core types such as&nbsp;<a href="http://paperjs.org/reference/point" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Point</a>,&nbsp;<a href="http://paperjs.org/reference/size" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Size</a>&nbsp;and&nbsp;<a href="http://paperjs.org/reference/rectangle" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Rectangle</a>. The manipulation of&nbsp;<a href="http://paperjs.org/reference/point" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Point</a>&nbsp;and&nbsp;<a href="http://paperjs.org/reference/size" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Size</a>&nbsp;objects is further simplified in PaperScript, where direct math operations using normal operator syntax are possible on such objects as if they were plain numbers.</li>
<li>Construct paths and manipulate their curves and segments in very convenient and fine-grained ways.</li>
<li>Inspect and manipulate the precise bounding box of any item, supporting complicated stroke styles with different stroke ends and miter limits.</li>
<li>Smoothen curves, and simplify path segments by fitting curves through points.</li>
<li>Simulate dashed strokes which are currently lacking from the Canvas object, at near native drawing speed.</li>
<li>Most blend modes known from Illustrator and Photoshop supported through emulation in JavaScript: multiply, screen, overlay, soft-light, hard-light, color-dodge, color-burn, darken, lighten, difference, exclusion, hue, saturation, luminosity, color, add, subtract, average &amp; negation.</li>
</ul>

<p>Read paperjs&nbsp;<a href="http://paperjs.org/tutorials/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">tutorials</a> to learn more about the features of Paper.js.</p>
<h3>Browser Support</h3>

<p>Paper.js is aimed at modern browsers with support for the Canvas object and EcmaScript 5. Even though in theory it is possible to write code that works in older browsers (Yes Explorer 8 and below, we are looking at you!), paperjs currently do not support them out of the box. Let&rsquo;s go forward!</p>

<p><strong><em>Credit goes to PaperJS@<a href="http://paperjs.org/">http://paperjs.org/</a></em></strong></p>

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Obj...

Paper.js — The Swiss Army Knife of Vector Graphics Scripting - TCMHACK

Paper.js — The Swiss Army Knife of Vector Graphics Scripting

<p>Today we're going to deploy a website to the google firebase. Google firebase is free &amp; easy to use. Google firebase provides the free hosting upto 1GB space, if you need more there are some plans provided by firebase. You can use as per your requirements.</p>

<p>Before starting, I assume you already have a google firebase account and a website ready to be host.</p>

<p>let's start hosting a website to google firebase.</p>

<h3>1. Create a Build</h3>

<p>Open cmd prompt in your website folder and run the below command</p>

<pre class="wp-block-code"><code>npm run build</code></pre>

<p>It will create a <strong>build</strong> folder which contains all the website data ready to be host. All website data means html, js, css, images files.</p>
<p><img src="../../../../uploads/1744736389804-create-build-1024x516.png" alt="" width="1024" height="516"></p>

<h3>2. Create Project in Firebase</h3>

<p>Login to your Firebase Console &amp; add a new project. If you have already created a project, just choose that.</p>
<p><img src="../../../../uploads/1744736425550-add-new-project-in-firebase-1024x470.png" alt="" width="1024" height="470"></p>

<h3>3. Open Hosting Page</h3>

<p>You can find a <strong>Hosting</strong> link in the left side menu. Click on it and open the hosting page.</p>
<p><img src="../../../../uploads/1744736456047-here.png" alt="" width="960" height="439"></p>

<h3>4. Set up firebase hosting.</h3>

<p>Open cmd in your project folder and install the Firebase CLI into website.</p>

<h4>1. Install Firebse CLI</h4>

<pre class="wp-block-code"><code>npm install -g firebase-tools</code></pre>

<h3><strong><img src="../../../../uploads/1744736520931-firebase-installation-1024x240.png" alt="" width="1024" height="240"></strong></h3>
<h4><strong>2.&nbsp;</strong>Initialize the Project</h4>

<p>Open a terminal window and navigate to or create a root directory for your web app</p>

<h5>A. Sign in to Google</h5>

<p>It will take you to Google Login page and log you in into the app.</p>

<pre class="wp-block-code"><code>firebase login</code></pre>

<h5>B. Initiate your project</h5>

<pre class="wp-block-code"><code>firebase init</code></pre>

<ul>
<li>Go to hosting by up-down arrow key</li>
<li>Select <strong>Hosting</strong> by clicking the <strong>space</strong> button on keyboard and hit <strong>Enter</strong></li>
<li>It will ask you to select the hosting folder, write <strong><em>build</em></strong></li>
<li>Next <em>Configure as a single-page app</em>, write <strong><em>Y</em></strong></li>
<li>Next <em>Overwrite the index.html, </em>write <strong><em>N</em></strong></li>
<li>Firebase initialisation is complete. Now, deploy the website in next step.</li>
</ul>
<p><img src="../../../../uploads/1744736581454-firebase-initialisation-1024x517.png" alt="" width="1024" height="517"></p>

<h4>3. Deploy to Firebase Hosting</h4>

<p>Run this command from your app&rsquo;s root directory:</p>

<pre class="wp-block-code"><code>firebase deploy</code></pre>

<h3><img src="../../../../uploads/1744736632941-firebase-deployemnt-1024x309.png" alt="" width="1024" height="309"></h3>
<h4>4. Open and run your website.</h4>

<p>After successful deployment, firebase will provide you a <strong>link</strong> and you can use it to see your live website in action.</p>

<p>This link will be a subdomain of google domains. It will be look like <strong>your-project-id.web.app</strong></p>

<p>If you want to add your custom domain to this website, you can follow the link <a href="../../../../blog/google-firebase-custom-domain-subdomain-mapping-with-godaddy">Map custom domain to firebase hosting.</a></p>

<p>Have any questions? Write into the comment section.</p>

Today we're going to deploy a website to the google firebase. Google firebase is free &amp; easy to use. Google firebase provides the free hostin...