<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...

How to deploy websites to Google Firebase - TCMHACK

How to deploy websites to Google Firebase

<p>In my post about&nbsp;<a href="../../../../blog/how-to-deploy-websites-to-google-firebase">how to deploy your website on firebase</a>, I explained about hosting our website on Google Firebase and we are able to access the website using the firebase Url. Now in this article, we are going to talk and learn about adding our website with custom domain like your own domains purchased on the domain providing websites like&nbsp;<a href="https://www.godaddy.com/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">GoDaddy</a>&nbsp;and&nbsp;<a href="https://www.namecheap.com/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">NameCheap</a>. I this article we are going to integrate our domain in GoDaddy with Firebase hosted website. I tried and Integrated my custom domain by taking reference from&nbsp;<a href="https://firebase.google.com/docs/hosting/custom-domain" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">google firebase documentation</a>.</p>

<p>Let's Start the Domain/Subdomain Mapping.</p>

<ol>
<li><strong>Go to firebase console and check your project.</strong><br><img src="../../../../uploads/1744736975467-firebase-project-overview-console-page-1024x447.png" alt="" width="1024" height="447"></li>
<li><strong>Check your hosted site</strong><br>Click&nbsp;<strong>Hosting</strong>&nbsp;Link from the left side and you can see your default website deployed<br><img src="../../../../uploads/1744737058809-firebase-web-hosting-project-page-1024x284.png" alt="" width="1024" height="284"></li>
<li style="font-weight: bold;"><strong>Click <em>Connect Domain</em> link from the page.</strong></li>
<li><strong>Add Domain Name</strong><br>Add Domain name in the connect custom domain popup<br><img src="../../../../uploads/1744737126386-add-domain-name-in-customdomain-1-1024x621.png" alt="" width="1024" height="621"></li>
<li><strong>Get Google Site Verification Code</strong><br>Now you will get the google site verification ID and Copy the Id Note: Do not copy the only value, you should copy the whole text like<br>
<pre><strong>google-site-verification=9xUIjWlRgKX-jsM8Hhlaj3HHtDK0xnEoA98Ms<br></strong></pre>
We need this google site verification Id to add to&nbsp;<strong>TXT</strong> record in DNS provider.<br><img src="../../../../uploads/1744737265680-verify-ownership-verification-customdomain-1024x583.png" alt="" width="1024" height="583"></li>
<li><strong>Login to Godaday account</strong><br>Now go back to GoDaddy and login to your account and go to&nbsp;<a href="https://dcc.godaddy.com/domains/" target="_blank" rel="noreferrer noopener">Domain Page</a></li>
<li><strong>Go to Manage DNS</strong><br>Now click on the three dots near to&nbsp;<strong>Use My Domain</strong>&nbsp;button and click&nbsp;<strong>Manage DNS</strong> link<br><img src="../../../../uploads/1744737338952-godaddy-manage-domain-dns-1024x663.png" alt="" width="1024" height="663"></li>
<li><strong>Add Google Site Varification Code</strong><br>On manage DNS page add the value of google site verification Id as TXT value in the list<br><img src="../../../../uploads/1744737408772-txt-value-for-google-verification-1024x64.png" alt="" width="1024" height="64"></li>
<li><strong>Verify Domain Mapping</strong><br>Now after adding this&nbsp;<strong>TXT</strong> value in the DNS list, Go back to firebase console and click the verify link from the custom domain popup</li>
<li><strong>Get IP address of hosted site</strong><br>In FireBase on GoOnline Step you will get 2 IP address which you need to add in the GoDaddy DNS table again as&nbsp;<strong>Type A</strong> value<br><img src="../../../../uploads/1744737496213-typea-value-update-in-dns-table-1024x275.png" alt="" width="1024" height="275"></li>
</ol>

<pre class="wp-block-preformatted">&nbsp;</pre>

<blockquote class="wp-block-quote">
<p>Use <strong><em>@</em></strong> if you want to map the domain and <em><strong>subdomain</strong></em> for subdomain.</p>
<p>Example: <em>@</em> will be refered as: <em>http://www.mydomain.com</em> and <em>subdomain</em> will be refered as <em>http://subdomain.mydomain.com</em></p>
</blockquote>

<p><strong>11. Now go back to Firebase console again and Connect.</strong></p>

<p>After performing all the steps in some time, you can see your website is up and running with the custom domain you just added in the firebase.<strong> You will see certificate error for HTTP for some time but after some time with certificate verification, the error will go and you can access website in HTTPS</strong>.</p>

<p>Above steps, I used to connect my custom domain with GoDaddy and It worked for me. I wrote this article because I didn&rsquo;t find any recently updated article on the internet about the whole process.</p>

<p>Please feel free to write me incase you face issues while connecting your custom domain.</p>

Learn how to map a custom domain or subdomain from GoDaddy to your Google Firebase project with step-by-step instructions and best practices.

Google Firebase custom domain/subdomain mapping with GoDaddy - TCMHACK

Google Firebase custom domain/subdomain mapping with GoDaddy

<p>Google is building a new ad-blocker for Chrome that will specifically target ads that use too many system resources.</p>



<p>Chrome is <a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://www.techradar.com/in/news/im-sick-of-chrome-eating-all-my-ram-its-time-for-me-to-ditch-it-for-firefox-or-even-edge" target="_blank">notoriously RAM-hungry</a>, which can result in sluggish performance but the blame doesn't lie entirely with the browser. Sometimes ads can be responsible for sites slowing to a crawl.</p>



<p>As&nbsp;<a href="https://9to5google.com/2019/10/30/heavy-ad-blocker-chrome/" target="_blank" rel="noreferrer noopener">9to5Google</a>&nbsp;explains, Chrome's developers are working on a tool that will address this problem by not loading 'heavy ads' that put excessive demands on the user's device.</p>



<p>The tool was first mentioned in <a rel="noreferrer noopener" href="https://chromium-review.googlesource.com/c/chromium/src/+/1675916" target="_blank">a message from a Chromium developer</a>.  And Google has now <a rel="noreferrer noopener" href="https://github.com/johnivdel/heavy-ad-intervention/blob/master/README.md#proposed-thresholds" target="_blank">published a short guide</a> explaining it further and defining exactly what is meant by 'heavy'.</p>



<p>According to the guide, ads will be blocked if they use the main processor thread for more than 60 seconds in total. Or use the main thread for more than 15 seconds in any 30-second window, or use more than 4MB network bandwidth to load resources. Blocked ads will be replaced with an error message explaining why Chrome has removed it.</p>



<p><a rel="noreferrer noopener" href="https://techdows.com/2019/10/chrome-80-gets-heavy-ad-intervention-feature-in-canary.html" target="_blank">Techdows</a> has also noticed two new flags in <a rel="noreferrer noopener" href="https://www.google.com/chrome/canary/" target="_blank">Chrome Canary</a>.  It's relating to the 'heavy ad' blocker, which you can enable to try the feature now. However, it's worth bearing in mind that the blocker is still at an experimental stage. It isn't likely to appear in the release version of Chrome for several months. It might not work perfectly yet, and Google might choose to adjust its definition of a 'heavy ad' before then.</p>



<h2 id="you-vs-the-advertisers">You vs the advertisers</h2>



<p>Google faces a tricky dilemma with advertising. It makes up the bulk of the company's income but it can spoil the browsing experience for Chrome users. Particularly when it compromises their privacy or affects browsing speeds.</p>



<p>Google has suggested a way to serve targeted ads to users without monitoring their online activity using tracking cookies (a method it calls a '<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://www.techradar.com/in/news/google-wants-chrome-to-feed-you-targeted-ads-while-somehow-respecting-your-privacy" target="_blank">privacy sandbox</a>'). But moving to such a model would require an overhaul of the whole online advertising industry. If any company has the power to bring that about, it's Google, but such a huge change isn't likely to happen any time soon.</p>



<p>For now, Google appears to have resigned itself to tackling the most obtrusive ads. It seems to be experimenting with a tool that will let users <a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://www.techradar.com/in/news/chrome-is-taking-a-page-out-of-firefoxs-book-and-making-your-privacy-a-priority" target="_blank">block third-party cookies</a>. It's an option that's already enabled by default in rival browsers such as Firefox.</p>



<p>Hopefully this, combined with the 'heavy ad' blocker, will let Google strike a reasonable compromise, improving the experience for its users without putting too large a dent in its ad business.</p>

Google is building a new ad-blocker for Chrome that will specifically target ads that use too many system resources.



Chrome is notoriously RAM...

Chrome is getting a 'heavy ad' blocker to speed up browsing, and you can try it now - TCMHACK

Chrome is getting a 'heavy ad' blocker to speed up browsing, and you can try it now

<p>Google is working on a dark mode for desktop versions of its browsers and its ChromeOS operating system.</p>



<p>For a few months it's been possible to activate a dark mode for Chrome on Android that changes the color of webpages. And according to <a rel="noreferrer noopener" href="https://9to5google.com/2019/07/29/google-chromes-dark-mode-for-the-web-is-coming-to-desktop-and-chrome-os/" target="_blank">9to5Google</a>, that feature will soon become cross-platform.</p>



<p>Currently, it's possible to activate dark mode on Chrome for Android by enabling a 'flag' (an experimental feature) in the browser. This Android-specific flag has now been replaced by one that will work across all platforms.</p>



<h2 id="a-walk-on-the-dark-side">A walk on the dark side</h2>



<p>When Android Q is released (possibly within the next few weeks), it will include&nbsp;<a href="https://www.techradar.com/in/how-to/dark-theme">a system-wide dark theme</a>, which swaps the operating system's default bright white design to something easier on the eyes.</p>



<p>If you've experimented with the dark mode for Android, you may have noticed that it's not quite ready for release yet; some controls are tricky to see with the new colors, and websites are sometimes rendered hard to read where colors are inverted.</p>



<p>With Android Q now imminent, hopefully those issues will be resolved very soon and we'll be able to enjoy browsing the web in dark mode on all our devices.</p>

Google is working on a dark mode for desktop versions of its browsers and its ChromeOS operating system.



For a few months it's been possible t...

Google Chrome for desktop is finally getting a dark mode - TCMHACK

Google Chrome for desktop is finally getting a dark mode

<h3 id="introduction">Introduction</h3>



<p>Redis is an in-memory key-value store known for its flexibility, performance, and wide language support. In this guide, we will demonstrate how to install and configure Redis on an Ubuntu 16.04 server.</p>



<h2 id="prerequisites">Prerequisites</h2>



<p>To complete this guide, you will need access to an Ubuntu 16.04 server. You will need a non-root user with <code>sudo</code> privileges to perform the administrative functions required for this process. You can learn how to set up an account with these privileges by following our <a href="https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-16-04">Ubuntu 16.04 initial server setup guide</a>.</p>



<p>When you are ready to begin, log in to your Ubuntu 16.04 server with your&nbsp;<code>sudo</code>&nbsp;user and continue below.</p>



<h2 id="install-the-build-and-test-dependencies">Install the Build and Test Dependencies</h2>



<p>In order to get the latest version of Redis, we will be compiling and installing the software from source. Before we download the code, we need to satisfy the build dependencies so that we can compile the software.</p>



<p>To do this, we can install the&nbsp;<code>build-essential</code>&nbsp;meta-package from the Ubuntu repositories. We will also be downloading the&nbsp;<code>tcl</code>&nbsp;package, which we can use to test our binaries.</p>



<p>We can update our local&nbsp;<code>apt</code>&nbsp;package cache and install the dependencies by typing:</p>



<pre class="wp-block-preformatted">sudo apt-get update
sudo apt-get install build-essential tcl
</pre>



<h2 id="download-compile-and-install-redis">Download, Compile, and Install Redis</h2>



<p>Next, we can begin to build Redis.</p>



<h3 id="download-and-extract-the-source-code">Download and Extract the Source Code</h3>



<p>Since we won’t need to keep the source code that we’ll compile long term (we can always re-download it), we will build in the&nbsp;<code>/tmp</code>&nbsp;directory. Let’s move there now:</p>



<pre class="wp-block-preformatted">cd /tmp
</pre>



<p>Now, download the latest stable version of Redis. This is always available at <a href="http://download.redis.io/redis-stable.tar.gz" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">a stable download URL</a>:</p>



<pre class="wp-block-preformatted">curl -O http://download.redis.io/redis-stable.tar.gz
</pre>



<p>Unpack the tarball by typing:</p>



<pre class="wp-block-preformatted">tar xzvf redis-stable.tar.gz
</pre>



<p>Move into the Redis source directory structure that was just extracted:</p>



<pre class="wp-block-preformatted">cd redis-stable
</pre>



<h3 id="build-and-install-redis">Build and Install Redis</h3>



<p>Now, we can compile the Redis binaries by typing:</p>



<pre class="wp-block-preformatted">make
</pre>



<p>After the binaries are compiled, run the test suite to make sure everything was built correctly. You can do this by typing:</p>



<pre class="wp-block-preformatted">make test
</pre>



<p>This will typically take a few minutes to run. Once it is complete, you can install the binaries onto the system by typing:</p>



<pre class="wp-block-preformatted">sudo make install
</pre>



<h2 id="configure-redis">Configure Redis</h2>



<p>Now that Redis is installed, we can begin to configure it.</p>



<p>To start off, we need to create a configuration directory. We will use the conventional&nbsp;<code>/etc/redis</code>&nbsp;directory, which can be created by typing:</p>



<pre class="wp-block-preformatted">sudo mkdir /etc/redis
</pre>



<p>Now, copy over the sample Redis configuration file included in the Redis source archive:</p>



<pre class="wp-block-preformatted">sudo cp /tmp/redis-stable/redis.conf /etc/redis
</pre>



<p>Next, we can open the file to adjust a few items in the configuration:</p>



<pre class="wp-block-preformatted">sudo nano /etc/redis/redis.conf
</pre>



<p>In the file, find the&nbsp;<code>supervised</code>&nbsp;directive. Currently, this is set to&nbsp;<code>no</code>. Since we are running an operating system that uses the systemd init system, we can change this to&nbsp;<code>systemd</code>:/etc/redis/redis.conf</p>



<pre class="wp-block-code"><code>. . .

# If you run Redis from upstart or systemd, Redis can interact with your
# supervision tree. Options:
#   supervised no      - no supervision interaction
#   supervised upstart - signal upstart by putting Redis into SIGSTOP mode
#   supervised systemd - signal systemd by writing READY=1 to $NOTIFY_SOCKET
#   supervised auto    - detect upstart or systemd method based on
#                        UPSTART_JOB or NOTIFY_SOCKET environment variables
# Note: these supervision methods only signal "process is ready."
#       They do not enable continuous liveness pings back to your supervisor.
supervised systemd

. . .</code></pre>



<p>Next, find the&nbsp;<code>dir</code>&nbsp;directory. This option specifies the directory that Redis will use to dump persistent data. We need to pick a location that Redis will have write permission and that isn’t viewable by normal users.</p>



<p>We will use the&nbsp;<code>/var/lib/redis</code>&nbsp;directory for this, which we will create in a moment:/etc/redis/redis.conf</p>



<pre class="wp-block-code"><code>. . .

# The working directory.
#
# The DB will be written inside this directory, with the filename specified
# above using the 'dbfilename' configuration directive.
#
# The Append Only File will also be created inside this directory.
#
# Note that you must specify a directory here, not a file name.
dir /var/lib/redis

. . .</code></pre>



<p>Save and close the file when you are finished.</p>



<h2 id="create-a-redis-systemd-unit-file">Create a Redis systemd Unit File</h2>



<p>Next, we can create a systemd unit file so that the init system can manage the Redis process.</p>



<p>Create and open the&nbsp;<code>/etc/systemd/system/redis.service</code>&nbsp;file to get started:</p>



<pre class="wp-block-preformatted">sudo nano /etc/systemd/system/redis.service
</pre>



<p>Inside, we can begin the&nbsp;<code>[Unit]</code>&nbsp;section by adding a description and defining a requirement that networking be available before starting this service:/etc/systemd/system/redis.service</p>



<pre class="wp-block-code"><code>[Unit]
Description=Redis In-Memory Data Store
After=network.target</code></pre>



<p>In the&nbsp;<code>[Service]</code>&nbsp;section, we need to specify the service’s behavior. For security purposes, we should not run our service as&nbsp;<code>root</code>. We should use a dedicated user and group, which we will call&nbsp;<code>redis</code>&nbsp;for simplicity. We will create these momentarily.</p>



<p>To start the service, we just need to call the&nbsp;<code>redis-server</code>&nbsp;binary, pointed at our configuration. To stop it, we can use the Redis&nbsp;<code>shutdown</code>&nbsp;command, which can be executed with the&nbsp;<code>redis-cli</code>&nbsp;binary. Also, since we want Redis to recover from failures when possible, we will set the&nbsp;<code>Restart</code>&nbsp;directive to “always”:/etc/systemd/system/redis.service</p>



<pre class="wp-block-code"><code>[Unit]
Description=Redis In-Memory Data Store
After=network.target

[Service]
User=redis
Group=redis
ExecStart=/usr/local/bin/redis-server /etc/redis/redis.conf
ExecStop=/usr/local/bin/redis-cli shutdown
Restart=always</code></pre>



<p>Finally, in the&nbsp;<code>[Install]</code>&nbsp;section, we can define the systemd target that the service should attach to if enabled (configured to start at boot):/etc/systemd/system/redis.service</p>



<pre class="wp-block-code"><code>[Unit]
Description=Redis In-Memory Data Store
After=network.target

[Service]
User=redis
Group=redis
ExecStart=/usr/local/bin/redis-server /etc/redis/redis.conf
ExecStop=/usr/local/bin/redis-cli shutdown
Restart=always

[Install]
WantedBy=multi-user.target</code></pre>



<p>Save and close the file when you are finished.</p>



<h2 id="create-the-redis-user-group-and-directories">Create the Redis User, Group and Directories</h2>



<p>Now, we just have to create the user, group, and directory that we referenced in the previous two files.</p>



<p>Begin by creating the&nbsp;<code>redis</code>&nbsp;user and group. This can be done in a single command by typing:</p>



<pre class="wp-block-preformatted">sudo adduser --system --group --no-create-home redis
</pre>



<p>Now, we can create the&nbsp;<code>/var/lib/redis</code>&nbsp;directory by typing:</p>



<pre class="wp-block-preformatted">sudo mkdir /var/lib/redis
</pre>



<p>We should give the&nbsp;<code>redis</code>&nbsp;user and group ownership over this directory:</p>



<pre class="wp-block-preformatted">sudo chown redis:redis /var/lib/redis
</pre>



<p>Adjust the permissions so that regular users cannot access this location:</p>



<pre class="wp-block-preformatted">sudo chmod 770 /var/lib/redis
</pre>



<h2 id="start-and-test-redis">Start and Test Redis</h2>



<p>Now, we are ready to start the Redis server.</p>



<h3 id="start-the-redis-service">Start the Redis Service</h3>



<p>Start up the systemd service by typing:</p>



<pre class="wp-block-preformatted">sudo systemctl start redis
</pre>



<p>Check that the service had no errors by running:</p>



<pre class="wp-block-preformatted">sudo systemctl status redis
</pre>



<p>You should see something that looks like this:</p>



<pre class="wp-block-code"><code>Output● redis.service - Redis Server
   Loaded: loaded (/etc/systemd/system/redis.service; enabled; vendor preset: enabled)
   Active: active (running) since Wed 2016-05-11 14:38:08 EDT; 1min 43s ago
  Process: 3115 ExecStop=/usr/local/bin/redis-cli shutdown (code=exited, status=0/SUCCESS)
 Main PID: 3124 (redis-server)
    Tasks: 3 (limit: 512)
   Memory: 864.0K
      CPU: 179ms
   CGroup: /system.slice/redis.service
           └─3124 /usr/local/bin/redis-server 127.0.0.1:6379       

. . .</code></pre>



<h3 id="test-the-redis-instance-functionality">Test the Redis Instance Functionality</h3>



<p>To test that your service is functioning correctly, connect to the Redis server with the command-line client:</p>



<pre class="wp-block-preformatted">redis-cli
</pre>



<p>In the prompt that follows, test connectivity by typing:</p>



<pre class="wp-block-preformatted">127.0.0.1:6379> ping</pre>



<p>You should see:</p>



<pre class="wp-block-code"><code>Output: PONG</code></pre>



<p>Check that you can set keys by typing:</p>



<pre class="wp-block-preformatted">127.0.0.1:6379> set test "It's working!" </pre>



<pre class="wp-block-code"><code>Output: OK</code></pre>



<p>Now, retrieve the value by typing:</p>



<pre class="wp-block-preformatted">127.0.0.1:6379> get test</pre>



<p>You should be able to retrieve the value we stored:</p>



<pre class="wp-block-code"><code>Output: "It's working!"</code></pre>



<p>Exit the Redis prompt to get back to the shell:</p>



<pre class="wp-block-preformatted">127.0.0.1:6379> exit </pre>



<p>As a final test, let’s restart the Redis instance:</p>



<pre class="wp-block-preformatted">sudo systemctl restart redis
</pre>



<p>Now, connect with the client again and confirm that your test value is still available:</p>



<pre class="wp-block-preformatted">redis-cli
</pre>



<pre class="wp-block-preformatted">127.0.0.1:6379> get test </pre>



<p>The value of your key should still be accessible:</p>



<pre class="wp-block-code"><code>Output: "It's working!"</code></pre>



<p>Back out into the shell again when you are finished:</p>



<pre class="wp-block-preformatted">127.0.0.1:6379> exit </pre>



<h3 id="enable-redis-to-start-at-boot">Enable Redis to Start at Boot</h3>



<p>If all of your tests worked, and you would like to start Redis automatically when your server boots, you can enable the systemd service.</p>



<p>To do so, type:</p>



<pre class="wp-block-preformatted">sudo systemctl enable redis
</pre>



<pre class="wp-block-code"><code>OutputCreated symlink from /etc/systemd/system/multi-user.target.wants/redis.service to /etc/systemd/system/redis.service.</code></pre>

Introduction



Redis is an in-memory key-value store known for its flexibility, performance, and wide language support. In this guide, we will d...

How To Install and Configure Redis on Ubuntu 16.04 - TCMHACK

How To Install and Configure Redis on Ubuntu 16.04

<p>Google Registry has made the .new domain extension available for anyone to use to create custom shortcuts.</p>

<p>Google originally launched the .new extension to be used as shortcuts for its own services. For example, to create a new document or a spreadsheet, you can simply go to .doc or .sheets.</p>

<p>Now, any company can&nbsp;<a href="https://www.registry.google/" target="_blank" rel="noopener">register</a>&nbsp;a .new domain to create similar shortcuts for their own offerings and some companies have already started doing so. Here are some examples that have been created already:</p>

<ul>
<li>Word.new: Create a new document in Microsoft Word</li>
<li>Playlist.new: Create a new Spotify playlist</li>
<li>Sell.new: Create a new product listing on eBay</li>
<li>Link.new: Create a new short link with Bitly</li>
<li>Reservation.new: Make a reservation with OpenTable<br>And others</li>
</ul>

<p>Google notes that, similar to its .app, .page, and .dev extensions, all .new extensions will be served over HTTPS by default.</p>

<p>Registrations of .new domains are available first to trademark owners for a limited time. From December 2, 2019 to January 14, 2020, trademark owners can apply for their trademarked .new domains.</p>

<p>Presumably, all available .new domains will be up for grabs after the limited registration period.</p>

Google Registry has made the .new domain extension available for anyone to use to create custom shortcuts.

Google Lets Anyone Register a .New Domain to Create Custom Shortcuts - TCMHACK

Google Lets Anyone Register a .New Domain to Create Custom Shortcuts

<p>Recently, Google has involved itself in numerous privacy and security changes within Google Chrome. The most important of these was the emphasis on HTTPS for websites. Now, they have announced another strict move in this connection. Google intends to block HTTPS mixed content within their Chrome browser. </p>



<h2>Google To Block Mixed Content</h2>



<p>Reportedly, Google plans to block mixed content for HTTPS in the future. According to a recent <a href="https://security.googleblog.com/2019/10/no-more-mixed-messages-about-https_3.html" target="_blank" rel="noreferrer noopener" aria-label="blog post (opens in a new tab)">blog post</a> by the Chrome Security Team, Google will eventually block mixed content entirely within Chrome. This would ensure full HTTPS implementation only.</p>



<h2>What Is Mixed Content</h2>



<p>As explained separately, ‘<a rel="noreferrer noopener" aria-label="Mixed Content (opens in a new tab)" href="https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content" target="_blank">Mixed Content</a>’ refers to the type of content on websites using HTTPS where certain elements on the web page load over HTTP.</p>



<blockquote class="wp-block-quote"><p>Mixed content occurs when initial HTML is loaded over a secure HTTPS connection, but other resources (such as images, videos, stylesheets, scripts) are loaded over an insecure HTTP connection. This is called mixed content because both HTTP and HTTPS content are being loaded to display the same page, and the initial request was secure over HTTPS. </p></blockquote>



<h2>How It Affects Browser Security</h2>



<p>Although, Chrome used to notify users about the presence of such content. It couldn’t protect the users from the potential evils of HTTP content on the web page. Thus, the existence of such content downgrades the extent of security as ensured with full HTTPS sites.</p>



<blockquote class="wp-block-quote"><p>Requesting subresources using the insecure HTTP protocol weakens the security of the entire page, as these requests are vulnerable to man-in-the-middle attacks, where an attacker eavesdrops on a network connection and views or modifies the communication between two parties.</p></blockquote>



<p>Eventually, the presence of such content could even allow an adversary to take complete control of the affected page. </p>



<p>Google explained that such content also affects the browser security UX. The browser could neither present it as HTTPS, nor HTTP. </p>



<h2>Implementation To Happen Gradually </h2>



<p>While Google has announced their plans to ensure no mixed content, it will do so in a number of different steps. Consequently, HTTPS websites with mixed content have enough time to modify the affected pages accordingly. </p>



<p>As per the disclosed timeline, initially, Google will roll out settings for users to unblock mixed content on sites. This will take place with Chrome 79 releasing in December 2019. </p>



<p>Then, with Chrome 80, Google will block audio/video resources that fail to load over HTTPS by default. Users would still be able to unblock the content via given settings. However, it will allow the mixed images, where the browser will prompt the site as ‘Not Secure’. </p>



<p>Finally, with Chrome 81 coming in February 2020, Google will block mixed images as well. </p>



<p>For convenience, Google has shared detailed guides for <a rel="noreferrer noopener" aria-label="migrating to HTTPS (opens in a new tab)" href="https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https" target="_blank">migrating to HTTPS</a> and <a href="https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content" target="_blank" rel="noreferrer noopener" aria-label="preventing mixed content (opens in a new tab)">preventing mixed content</a> as well.</p>

Recently, Google has involved itself in numerous privacy and security changes within Google Chrome. The most important of these was the emphasis ...

Google Plans To Block Mixed Content With HTTPS On Chrome Browser - TCMHACK

Google Plans To Block Mixed Content With HTTPS On Chrome Browser

<p>This article introduces an experimental Vue feature called Hooks.</p>

<h2>Before you start</h2>

<p>This post is suited for developers of all stages including beginners. Here are a few things you should already have before going through this article.</p>

<p>You will need the following in your pc:</p>

<ul>
<li><a href="https://nodejs.org/en/" target="_blank" rel="noreferrer noopener">Node.js version 10.x</a>&nbsp;and above installed. You can verify if you do by running the command below in your terminal/command prompt:</li>
</ul>

<pre class="wp-block-preformatted">node -v</pre>

<ul>
<li>A code editor: Visual Studio Code is highly recommended</li>
<li><a href="https://vuejs.org/" target="_blank" rel="noreferrer noopener">Vue&rsquo;s latest version</a>, installed globally on your machine</li>
<li><a href="https://vuejs.org/" target="_blank" rel="noreferrer noopener">Vue CLI 3.0</a>&nbsp;installed on your machine. To do this, uninstall the old CLI version first:</li>
</ul>

<pre class="wp-block-preformatted">npm uninstall -g vue-cli</pre>

<p>then install the new one:</p>

<pre class="wp-block-preformatted">npm install -g @vue/cli</pre>

<ul>
<li>Download a Vue starter project&nbsp;<a href="https://github.com/viclotana/vue-canvas" target="_blank" rel="noreferrer noopener">here</a></li>
<li>Unzip the downloaded project</li>
<li>Navigate into the unzipped file and run the command to keep all the dependencies up-to-date:</li>
</ul>

<pre class="wp-block-preformatted">npm install</pre>

<h2>Introduction: Hooks</h2>

<p>Initially, React components that contain state logic must be a class component. Even though there were already stateless functional components in React there was a need to create components that accommodate state logic without being classes. That was when Hooks was born. Hooks are a way to use state logic inside functional components, thereby eliminating the need for writing classes.</p>

<h2>What is wrong with classes?</h2>

<p>There is nothing wrong with classes, to begin with, but the React team found out that&nbsp;<a href="https://reactjs.org/docs/hooks-intro.html#classes-confuse-both-people-and-machines" target="_blank" rel="noreferrer noopener">understanding how classes work has been a drawback to React adoption</a>. It can be difficult to understand and can become ambiguous as your project increases in size and complexity.</p>

<h3>But I don&rsquo;t normally use classes in Vue JS..</h3>

<p>If you are a Vue developer, you might wonder why classes are being discussed as you do not use classes by default in your Vue projects. While this is true, Vue JS lets you use functional components that are stateless with&nbsp;<a href="https://vuejs.org/v2/guide/mixins.html" target="_blank" rel="noreferrer noopener">mixins</a>. With Vue mixins you can define logic or a functionality in a particular file and use and even re-use it in a functional component.</p>

<h2>The problem with mixins</h2>

<p>In a&nbsp;<a href="https://css-tricks.com/what-hooks-mean-for-vue/" target="_blank" rel="noreferrer noopener">blog post</a>, some months back,&nbsp;<a href="https://twitter.com/sarah_edo?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank" rel="noreferrer noopener">Sarah Drasner</a>&nbsp;a very popular Vue core team member wrote about her conversation with&nbsp;<a href="https://twitter.com/youyuxi?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank" rel="noreferrer noopener">Evan You</a>&nbsp;the creator of Vue JS. Sarah revealed that a mixin cannot consume or use state from another mixin, which makes chaining of encapsulated logic difficult to achieve. This is the mixin limitation that the Vue Hooks solves for.</p>

<h2>Introducing Vue Hooks</h2>

<p>Vue Hooks are basically an enhanced version of mixins, if you do not know what mixins are, they are a platform in Vue used to re-use logic between components (you will see a quick demo of mixins in this post). Vue Hooks lets you pass logic from one Hook to another and you can also use state in a Hook from another Hook. So just like in React, Hooks in Vue are defined in functions which can be a cleaner and more flexible way to define and share logic and can return state.</p>

<h2>Demo A: Vue mixins</h2>

<p>If you have followed this post from the start, you must have downloaded&nbsp;<a href="https://github.com/viclotana/vue-canvas" target="_blank" rel="noreferrer noopener">the starter project file</a>&nbsp;and opened it up in your VS Code application. We are going to create a mixin that contains a counter logic and then import it into any component of choice. First, create a folder called mixins in the root directory and create a new file, call it&nbsp;<code>clickMixin.js</code>&nbsp;and copy the code block below inside it:</p>

<pre class="wp-block-preformatted">export default { 
    data (){
      return{
        count: 1,
        double: 2
      }
    },
    methods: {
      clicked(){
       this.count++; 
       this.double = this.count*2;
      }
    }
  }</pre>

<p>This mixin contains counter logic and also contains a variable that returns double the count, you see the export statement because it has to be imported into your component of choice. Open your&nbsp;<code>Test.vue</code>&nbsp;component and copy the code block below inside it:</p>

<pre class="wp-block-preformatted">&lt;template&gt;
  &lt;div&gt; 
    &lt;button v-on:click="clicked()"&gt;Button 1&lt;/button&gt;
    &lt;h2&gt;{{this.count}}&lt;/h2&gt;
    &lt;h2&gt;{{this.double}}&lt;/h2&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import clickMixin from '../Mixins/clickMixin'
export default {
  name: 'Test',
  mixins: [clickMixin]
}
&lt;/script&gt;</pre>

<p>Here you see how mixins are imported and registered under the name, it is a Vue instance property just like data or methods or computed properties. You also see that inside the template that you have access to this in JavaScript as it relates to the mixins (almost like the mixin was defined right inside the component). If you run the application in your dev server it should look like this:</p>

<div class="wp-block-image">
<figure class="aligncenter"><img class="wp-image-453" src="http://ec2-13-127-91-65.ap-south-1.compute.amazonaws.com/wp-content/uploads/2019/09/vuebutton1and2-1024x394.png" alt=""></figure>
</div>

<p>When you click button 1, the counter is increased by 1 and the lower figure is double the counter figure just as the template in your code suggests.</p>

<h2>Demo B: Vue Hooks</h2>

<p>You can recreate this logic with Vue Hooks easily, the point of the Hooks is to potentially replace mixins in the future. First of all, you have to install the vue-Hooks package with the node package manager. Open a new terminal in VS Code and run:</p>

<pre class="wp-block-preformatted">npm install vue-Hooks</pre>

<p>Then open up your&nbsp;<code>main.js</code>&nbsp;file and initialize Hooks with a line of command before the new Vue statement:</p>

<pre class="wp-block-preformatted">Vue.use(Hooks);</pre>

<p>Open the components folder and create a new file inside it, call it&nbsp;<code>Modal.vue</code>&nbsp;then navigate back to the root directory and create a new folder called Hooks. Inside the Hooks folder create a new file called&nbsp;<code>Hooks.js</code>&nbsp;and copy this code block below into it:</p>

<pre class="wp-block-preformatted">import { useData, useMounted, useEffect, useComputed, useUpdated} from 'vue-Hooks'
export default function clickedHook(){
const data = useData({ count:1 })
const double = useComputed(() =&gt; data.count * 2)
useMounted(()=&gt; {console.log('mounted')});
useUpdated(()=&gt; {console.log('updated')});
useEffect(()=&gt; {
     console.log('DOM re-renders....')
 });
return {
     data, double
   }
}</pre>

<p>Just like in React, Vue Hooks borrows the use-prefix syntax and uses it in the Vue way. You also notice that the lifecycle Hooks available for every Vue instance is accessible inside Vue Hooks, some of them are:</p>

<ul>
<li><code>useData</code>: handles initialization of data inside your Hook, so the count is initialized inside it</li>
<li><code>useComputed</code>: this is more like computed properties inside your Hook, so the double computation is done inside it</li>
<li><code>useMounted</code>: acts exactly like the mounted lifecycle Hook in your Vue instance but for Hooks</li>
<li><code>useUpdated</code>: acts exactly like the updated lifecycle Hook in your Vue instance but for Hooks</li>
<li><code>useEffect</code>: this handles logic on DOM re-render</li>
</ul>

<p>There are other properties you can import, the whole list can be found&nbsp;<a href="https://github.com/yyx990803/vue-hooks" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">here</a>&nbsp;on GitHub. You will notice it is exported as a function, open the&nbsp;<code>modal.vue</code>&nbsp;file you created earlier and copy this code block below inside it:</p>

<pre class="wp-block-preformatted">&lt;template&gt;
  &lt;div&gt; 
    &lt;button v-on:click="data.count++"&gt;Button 2&lt;/button&gt;
    &lt;h2&gt;{{data.count}}&lt;/h2&gt;
    &lt;h2&gt;{{double}}&lt;/h2&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import clickedHook from '../Hooks/Hooks'
export default {
  name: 'Modal',
  Hooks(){
    return clickedHook();
  }
}
&lt;/script&gt;</pre>

<p>Notice that after importing the Hooks file, you can access the data and the double constants earlier defined in the Hook inside this component. We also see that Hooks registration has the same syntax with data registration, with the function set up and the return object inside it.</p>

<h3><br>It is important to note that&hellip;</h3>

<ul>
<li>You can go ahead and use Vue Hooks right away (your Vue version must be 2.x)</li>
<li>There is&nbsp;<a href="https://css-tricks.com/what-hooks-mean-for-vue/#article-header-id-5" target="_blank" rel="noreferrer noopener">speculation that Vue version 3.0 will ship with Vue</a>&nbsp;Hooks officially</li>
<li>It is experimental and so should not be used in production yet</li>
<li><a href="https://css-tricks.com/what-hooks-mean-for-vue/" target="_blank" rel="noreferrer noopener">Read the Sarah Drasner blog post here</a>&nbsp;which contains even more examples too</li>
</ul>

<p>You can use npm or just go to&nbsp;<a href="https://github.com/yyx990803/vue-hooks" target="_blank" rel="noreferrer noopener">GitHub with this link</a>&nbsp;to get the project repository.</p>

<h2>Conclusion</h2>

<p>This has been a quick overview of Hooks in Vue JS and how they might differ from the React Hooks that inspired it. We also highlighted mixins for readers who have not been introduced to the concept and we looked at an illustration using Hooks. Are you excited about Vue Hooks?</p>

This article introduces an experimental Vue feature called Hooks. This post is suited for developers of all stages includi...

Hooks are coming to Vue.js version 3.0 - TCMHACK

Hooks are coming to Vue.js version 3.0

<p>Google is adding support for native lazy loading to the latest version of the Chrome browser &ndash; Chrome 76.</p>

<p>In an&nbsp;<a href="https://web.dev/native-lazy-loading" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">announcement</a>, the company states:</p>

<blockquote class="wp-block-quote">
<p>&ldquo;Starting with Chrome 76, you&rsquo;ll be able to use the new loading attribute to lazy-load resources without the need to write custom lazy-loading code or use a separate JavaScript library.&rdquo;</p>
</blockquote>

<p>Lazy loading delays the loading of &nbsp;below-the-fold images until the user begins scrolling closer to them.</p>

<p>The end result is faster load times, minimized bandwidth for users, and reduced memory usage.</p>

<p>Previously, in order to take advantage of lazy loading, developers either had to use the Intersection Observer API or implement complicated event handlers.</p>

<p>Now, with lazy loading supported directly within Chrome, developers can add a simple &lsquo;loading&rsquo; attribute when embedding images.</p>

<p>Here&rsquo;s what the code looks when adding the loading attribute to an image and an iframe:</p>
<p><img src="../../../../uploads/1744738501928-2f84104d-2d77-4279-a2d7-f4f3a461d8bf-1024x137.jpeg" alt="" width="1024" height="137"></p>
<p>You don&rsquo;t even need the expertise of a developer to implement the loading attribute, as long as you have some basic knowledge of HTML. This makes lazy loading accessible to many more site owners.</p>

<p>The loading attribute supports the following values:</p>

<ul>
<li><strong>auto</strong>: Default lazy-loading behavior of the browser, which is the same as not including the attribute.</li>
<li><strong>lazy</strong>: Defer loading of the resource until it reaches a calculated distance from the viewport.</li>
<li><strong>eager</strong>: Load the resource immediately, regardless of where it&rsquo;s located on the page.</li>
</ul>

<p>This feature will continue to be updated until the stable version of Chrome 76 is released.</p>

<p>The old method of implementing lazy loading via JavaScript is still required for browsers that do not support the new &lsquo;loading&rsquo; attribute.</p>

Google is adding support for native lazy loading to the latest version of the Chrome browser – Chrome 76.



In an announcement, the company stat...

Google Chrome Will Soon Support Lazy Loading at the Browser-Level - TCMHACK

Google Chrome Will Soon Support Lazy Loading at the Browser-Level

<p>React's&nbsp;<code>useEffect</code>&nbsp;hooks combines&nbsp;<code>componentDidMount</code>,&nbsp;<code>componentDidUpdate</code>&nbsp;and&nbsp;<code>componentWillUnmount</code>&nbsp;lifecycle methods. This is very useful for the following reasons: it reduces the amount of code, simplifies the code and allows for multiple&nbsp;<code>useEffect</code>&nbsp;hooks to be called in a single component.</p>

<p>You can read more about the&nbsp;<code>useEffect</code>&nbsp;hook here:&nbsp;<a href="https://reactjs.org/docs/hooks-effect.html" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">React docs</a></p>

<p>Sometimes, we'd like only a single of those lifecycle methods to run. The following cheat-sheet will help you achieve the "effect" you're looking form.</p>

<h2>componentDidMount eqivalent</h2>

<p>In order to have this hook run only once (when a component is mounted), we need to set an empty array as a hook dependency.</p>

<pre class="wp-block-code"><code>useEffect(() =&gt; {
  /* ComponentDidMount code */
}, []);</code></pre>

<h2>componentDidUpdate eqivavlent</h2>

<p>In order to have this hook run when the component is updated (this includes mounting), we need to set at least one variable as hook's dependency (in this case,&nbsp;<code>var1</code>&nbsp;and&nbsp;<code>var2</code>).</p>

<pre class="wp-block-code"><code>useEffect(() =&gt; {
  /* componentDidUpdate code */
}, [var1, var2]);</code></pre>

<h2>componentWillUnmount eqivavlent</h2>

<p>In order to have this hook run when the component is unmounted, we need to return a function from the hook. Dependency array doesn't affect this functionality.</p>

<pre class="wp-block-code"><code>useEffect(() =&gt; {
  return () =&gt; {
   /* componentWillUnmount code */
  }
}, [var1, var2]);</code></pre>

<h2>All three combined</h2>

<pre class="wp-block-code"><code>useEffect(() =&gt; {

  /* componentWillMount code + componentDidUpdate code */

  return () =&gt; {
   /* componentWillUnmount code */
  }
}, [var1, var2]);</code></pre>

<p>Thank you for taking the time to read this post. If you've found this useful, please share and feel free to comment.</p>

Master React's useEffect hook with this cheat-sheet, showing how to replicate componentDidMount, componentDidUpdate, and componentWillUnmount behaviors with clean, concise code.

React: useEffect explained with lifecycle methods - TCMHACK

React: useEffect explained with lifecycle methods

Do you want to learn about and discover the differences between React vs. Angular? Then keep on reading! I am going to explain to you the similar...