DEV Community: aryaziai

How to Utilize Benchmarking in Ruby

aryaziai — Tue, 04 Aug 2020 05:06:26 +0000

Overview

In this blog I'll be a sharing a short tutorial on how to test the execution time of your Ruby code. It makes things a little easier since Ruby comes packed with a module in its standard library built for benchmarking. The module is named Benchmark and we can utilize with just one line of code.

Environment

Before we utilize the module, we need to require Benchmark in our ruby file.

require 'benchmark'

Basic Usage

The most basic usage of the Benchmark:

require 'benchmark'

Benchmark.measure { 
  # code
}

Let's add a short loop and output the result:

require 'benchmark'

puts Benchmark.measure { 
  for i in 0..50
    puts "Value of local variable is #{i}"
 end
}

Result:

This result is ok but we're missing labels, and we're not comparing any methods to one another.

Advanced Usage

require 'benchmark'

n = 5000000
Benchmark.bm(20) do |x|
  x.report("for:")   { for i in 1..n; a = "1"; end }
  x.report("times:") { n.times do   ; a = "1"; end }
  x.report("upto:")  { 1.upto(n) do ; a = "1"; end }
end

Result:

In this example, the for loop had the quickest execution time.

Conclusion

I never knew how easy it was to test out the performance of my code in Ruby. If you'd like to learn more about Benchmarking in Ruby, check out the documentation.

Video Headers = Amazing First Impression

aryaziai — Tue, 28 Jul 2020 06:37:28 +0000

Overview

I've recently shifted from creating full-screen image backgrounds on the homepage to using full-screen video backgrounds and my clients are absolutely loving it. Here is an example from a site I just finished creating:

In this post I'll share how I achieved this with HTML and CSS.

Free To Use Videos

I recommend using Pexels.com, you'll have access to a variety of high quality videos, along with download size options. You can also view the copyright status below the video. Any video I've encountered thus far has been "Free to use", which allows for commercial usage.

Click on Free to use to learn more:

HTML

 <section id="banner">
       <video
        class="video"
        autoplay
        loop
        muted
        playsinline
        src="assets/videos/earth2.mp4"> 
      </video>
      <div class="inner">
        <h2>Add Title Here</h2>
        <p>Add Description Here</p>
        <a href="#" class="scroll">Learn More</a>
      </div>
 </section>

Note: Replace the source link with where you've placed your downloaded video. You can also modify the video attributes to meet your needs by using any of the following attributes listed here.

CSS

#banner {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    cursor: default;
    height: 100vh;
    min-height: 35em;
    overflow: hidden;
    position: relative;
    text-align: center;
    background: #000;
}

#banner .inner {
    margin: auto;
    position: absolute;
    width: 100%;
}

#banner h2 {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
    transition: transform 0.5s ease, opacity 0.5s ease;
    display: inline-block;
    font-size: 1.75em;
    opacity: 1;
    padding: 0.35em 1em;
    position: relative;
    z-index: 1;
}

#banner p {
    position: relative;
    letter-spacing: 0.225em;
    text-transform: uppercase;
    width: 31em;
    text-align: center;
    margin: 0 auto 1.5em;
}

#banner .more {
    #banner .more {
    -moz-transition: -moz-transform 0.75s ease, opacity 0.75s ease;
    -webkit-transition: -webkit-transform 0.75s ease, opacity 0.75s ease;
    -ms-transition: -ms-transform 0.75s ease, opacity 0.75s ease;
    transition: transform 0.75s ease, opacity 0.75s ease;
    -moz-transition-delay: 3.5s;
    -webkit-transition-delay: 3.5s;
    -ms-transition-delay: 3.5s;
    transition-delay: 3.5s;
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    padding-left: 0.225em;
    width: 16em;
    z-index: 1;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    background-color: transparent;
    border-radius: 3px;
    border: 1px solid;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.225em;
    line-height: 3.125em;
    max-width: 30em;
    padding: 0 2.75em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 auto;
}

@media screen and (min-width: 847px) {
 .video {
    position: unset;
    object-fit: fill;
 }
}

@media screen and (max-width: 846px) {
.video {
    position: absolute;
    height: 100%;
    opacity: 0.3;
    top: 0;
    left: 0;
}

Fall-Back Image

Since autoplay is not available on mobile browsers, we can use a media query to hide the video and display a still image from video instead.

@media (pointer:none), (pointer:coarse) {
  video {
    display:none;
  }
  #banner {
    background: url('/images/earth.png');
 }

Conclusion

With these simple tips, you can take your site to the next level. Enjoy!

Learning Gulp Js - Task Runner

aryaziai — Mon, 20 Jul 2020 23:31:52 +0000

Gulp Overview

What is Gulp?

Open source Javascript task runner
Bult on Node.js and NPM
Used for repetitive tasks
Variety of plugins for different tasks

Common Tasks

Concatenation
Minification of scripts and styles
Cache busting
Testing

Environment

1) Install Node.js. If you're unsure whether you have Node on your system, simply type "node" into the command-line.

2) Create an empty directory and CD into it.

3) Run "npm init" to create package.json (application metadata).

4) Run "npm install --save-dev gulp" to save Gulp as a development dependancy.

5) Create a gulpfile.js file. This is where we tell Gulp what to do.

Task Example

In order to utilize Gulp, we need to define it in our gulpfile.js.

const gulp = require('gulp');

Top Level Functions

gulp.task // Define tasks 
gulp.src // Points to files to use
gulp.dest // Points to folder to output
gulp.watch // Watch files and folders for changes

Example Task

gulp.task("message", async function () {
  return console.log("Gulp is running");
});

Run "gulp message" to see the output:

Note: Make sure to prepend "async" in front of your function. Gulp 4.x is very strict with asynchronous Javascript.

Now that you are getting the hang of it, let's create more advanced tasks.

Task #1 - Copy Files

This task will copy html files from our src folder into our public folder.

1) Create an src folder
2) Create an Index.html file within the src folder.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example App</title>
</head>
<body>
    <h1>Example App</h1>
</body>
</html>

2) Create an About.html file within the src folder.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example App</title>
  </head>
  <body>
    <h1>About Us</h1>
  </body>
</html>

3) Create task in gulpfile.js.

gulp.task("copyHtml", async function () {
  gulp.src("src/*.html").pipe(gulp.dest("public"));
});

4) Run "gulp copyHtml"

Output:

The public folder was automatically generated with the two html files copied over.

Task #2 - Optimize Images

This task will optimize our images by using the popular gulp-imagemin plugin.

1) Run "npm install --save-dev gulp-imagemin" to save as a dev dependency.

2) Define imagemin in gulpfile.js

const imagemin = require('gulp-imagemin');

3) Create an images folder within the src folder (include image files).

4) Create task in gulpfile.js.

gulp.task('imageMin', () =>
    gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('public/images'))
);

5) Run "gulp imageMin"

Before:
src/images/elphant.jpg = 245kb

After:
public/images/elphant.jpg = 203kb

Note: If you'd like to modify the compression settings, check out the additional functions here.

Task #3 - Minify Javascript

1) Run "npm install --save-dev gulp-uglify" to save as a dev dependency.

2) Define uglify in gulpfile.js

const uglify = require('gulp-uglify');

3) Create js folder inside our src folder.

4) Add javascript file inside our js folder. i.e. functions.js and functions2.js.

// function.js

// Console Log #1
console.log('This is part 1');

// Console Log #2
console.log('This is part 2');

// function2.js

// Console Log #3
console.log('This is part 3');

// Console Log #4
console.log('This is part 4');

5) Create task in gulpfile.js.

gulp.task('minify', function(){
  gulp.src('src/js/*.js')
      .pipe(uglify())
      .pipe(gulp.dest('public/js'));
});

6) Run "gulp minify"

Output:
public/js/function.js

console.log("This is part 1"),console.log("This is part 2");

public/js/function2.js

console.log("This is part 3"),console.log("This is part 4");

Both javascript files in our src folder were successfully minified and added into our public folder.

Conclusion

These basic functions should give you an idea for some of the type of tasks that we can accomplish with Gulp. Check out this article by Mike Street for more advanced gulp tasks.

Modern Testimonials in React Tutorial

aryaziai — Wed, 15 Jul 2020 00:09:51 +0000

Update: I wrote this when my CSS skills weren't too great, so please avoid !important for best practice :)

In this blog I will be sharing a short tutorial on how to add modern testimonials to your ReactJS project. When I first started searching the web for a clean solution, I was overwhelmed by the different approaches to accomplishing this. Eventually, I found a customizable carousel component for React, and used CSS to give it a nice look and feel.

React Configuration

1) Create React App


 npx create-react-app my-app
cd my-app
npm start

2) Install react-responsive-carousel


 npm i react-responsive-carousel

3) Create Testimonals.js


 javascript
import React, { Component } from "react";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';

export default class Testimonials extends Component {
  render() {
    return (
      <Carousel>
        <div>
          <img src="assets/1.jpeg" />
          <p className="legend">Legend 1</p>
        </div>
        <div>
          <img src="assets/2.jpeg" />
          <p className="legend">Legend 2</p>
        </div>
        <div>
          <img src="assets/3.jpeg" />
          <p className="legend">Legend 3</p>
        </div>
      </Carousel>
    );
  }
}

4) Import Testimonials into App.js


 javascript
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Testimonials from "./Testimonials.js";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Testimonials</h1>
        <Testimonials />
      </header>
    </div>
  );
}

export default App;

What You Should See Now:

Now Let's Customize!

1. Updating Testimonials

To help set you up with a nice template, here is an updated Testimonials.js file that I'm borrowing from one of my projects.


 javascript
import React, { Component } from "react";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";

export default class Testimonials extends Component {
  render() {
    return (
      <Carousel
        showArrows={true}
        infiniteLoop={true}
        showThumbs={false}
        showStatus={false}
        autoPlay={true}
        interval={6100}
      >
        <div>
          <img src="/images/shirley.png" />
          <div className="myCarousel">
            <h3>Shirley Fultz</h3>
            <h4>Designer</h4>
            <p>
              It's freeing to be able to catch up on customized news and not be
              distracted by a social media element on the same site
            </p>
          </div>
        </div>

        <div>
          <img src="/images/daniel.png" />
          <div className="myCarousel">
            <h3>Daniel Keystone</h3>
            <h4>Designer</h4>
            <p>
              The simple and intuitive design makes it easy for me use. I highly
              recommend Fetch to my peers.
            </p>
          </div>
        </div>

        <div>
          <img src="/images/theo.png" />
          <div className="myCarousel">
            <h3>Theo Sorel</h3>
            <h4>Designer</h4>
            <p>
              I enjoy catching up with Fetch on my laptop, or on my phone when
              I'm on the go!
            </p>
          </div>
        </div>
      </Carousel>
    );
  }
}

2. Updating Images

1) Create an images folder inside the "public" folder.

2) Add three images. I've named my images: shirley, daniel, and theo.

3) Updating CSS


 css
.carousel-root {
  width: 64% !important;
  margin: auto !important;
  margin-top: 3% !important;
}

.carousel .slide {
  background: #fff !important;
  color: black;
  height: 100%;
}

.carousel .slide img {
  width: 139px !important;
  border-radius: 50%;
}

.myCarousel {
  background: #fafafa;
  margin-top: -6%;
  width: 54%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 6%;
  padding-bottom: 8%;
  padding-left: 5%;
  padding-right: 5%;
  border: 1px solid #ddd;
  height: 286px;
}

.carousel .control-dots {
  padding-left: 5px !important;
  outline: 0;
  bottom: 5% !important;
}

.myCarousel h3 {
  color: #222;
  font-weight: 100;
  letter-spacing: 0.2px;
  margin-bottom: 4px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 17px;
}

.myCarousel h4 {
  text-transform: uppercase;
  margin-top: 0;
  padding-top: 0;
  font-weight: 500;
  color: #787878;
  font-size: 14px;
}

.myCarousel p {
  font-weight: 100 !important;
  line-height: 29px !important;
  color: #222;
  font-size: 15px;
  font-family: sans-serif;
  max-height: 67px;
}

.myCarousel p:before {
  content: "“";
  color: #aaa;
  font-size: 26px;
  font-family: monospace;
  font-weight: 100;
}

.myCarousel p:after {
  content: "”";
  color: #aaa;
  font-size: 26px;
  font-family: monospace;
  font-weight: 100;
  line-height: 0;
}

.carousel .control-dots .dot {
  box-shadow: none !important;
  background: #454545 !important;
  outline: 0;
}

.carousel.carousel-slider .control-arrow {
  background: #000 !important;
  height: 50px !important;
  position: absolute;
  top: 35% !important;
}

.App {
  text-align: center;
}

@media only screen and (max-width: 934px) {
  .carousel-root {
    outline: 0;
    width: 93% !important;
    margin: auto !important;
  }

  .carousel.carousel-slider .control-arrow {
    display: none !important;
  }
  .myCarousel {
    background: #fafafa;
    margin-top: -9%;
    width: 88%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 8%;
    padding-bottom: 12.5%;
    padding-left: 5%;
    padding-right: 5%;
    border: 1px solid #ddd;
    height: 269px;
  }

  .carousel .slide img {
    width: 24% !important;
    border-radius: 50%;
  }
}

Important: The CSS becomes a bit hacky because we are importing pre-defined styles from "react-responsive-carousel/lib/styles/carousel.min.css". If you have the time, you can sort out the conflicting selectors and rules.

Note: I've removed the arrows in viewport screens below 935px given the limited real-estate.

End Result

Setting Up Sass

aryaziai — Mon, 06 Jul 2020 20:52:51 +0000

Overview

Before initializing the configuration, I'd first like to provide a brief description of Sass for anyone who isn't familiar with this specific stylesheet language. Sass (Syntactically awesome style sheets) is a CSS preprocessor. It adds additional features such as variables, nested rules and mixins into CSS. Sass allows developers to write code with these features and then compile it into a single CSS file (commonly through this extension). Sass is currently the most popular preprocessor, other well-known css-preprocessors include Less and Stylus.

Configuration

Step 1

1) Create empty folder.
2) Create Index.html file.
3) Generate HTML boilerplate code for Index. If you're using Visual Code Studio simply type "!" and enter. Otherwise, type boilerplate manually or copy this template.
4) Reference CSS file in index.

<link rel="stylesheet" href="css/style.css" />

Step 2

1) Create folder titled "sass".
2) Create main.scss file inside "sass" folder.
3) Insert code into main.scss. Example:

$colors: (
 primary: #005dff,
 accent: #fff6bb,
);

$fonts: (
  primary: arial,
  secondary: verdana,
);


body {
  max-width:1100px;
  height: 100%;
  margin: 0;
  font-family: map-get($fonts, primary);

 a {
   color: map-get($colors, primary);
   text-decoration: none;
   &:hover {
     color: map-get($colors, secondary);
   }
 }
}

Note: We are using three Sass features in the code example: variables, nesting, and "&".

Step 3

1) Compile Sass.

Note: Two popular options for compiling are the Compile Sass NPM Package, and the Live Sass Compiler Visual Code Studio Extension. The following steps pertain to the extension, however, if you decide to use the NPM Package, please follow these instructions.

2) Configure settings. Visual Code Studio settings.json:

"liveSassCompile.settings.excludeList": ["**/node_modules/**", ".vscode/**"],
  "liveSassCompile.settings.autoprefix": [],
  "liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      "extensionName": ".css",
      "savePath": "/css"
    }
  ],
  "liveSassCompile.settings.generateMap": false,
  "scss.lint.zeroUnits": "warning",
  "liveServer.settings.donotShowInfoMsg": true

3) Click "Watch Sass" button at the bottom of Visual Code Studio. This will compile our sass code into the style.css file inside of our css folder (which is linked in our Index.html).

Conclusion

We are still using our style.css for our styling needs, however, we aren't writing directly inside the file. Instead we are using our main.scss file to compile our sass code into the style.css file. This allows for a lot more functionality, and ultimately cleaner css with the help of variables, nesting, and functions.

P.S. If you're interested in learning about color functionality with Sass, check out my other blog post.

Manipulate Colors With Sass

aryaziai — Tue, 30 Jun 2020 00:42:17 +0000

Sass

Before jumping into the code, I'd first like to provide a brief description of Sass for anyone who isn't familiar with this specific stylesheet language. Sass (Syntactically awesome style sheets) is a CSS preprocessor. It adds additional features such as variables, nested rules and mixins into CSS. Sass allows developers to write code with these features and then compile it into a single CSS file (commonly through this extension). Sass is currently the most popular preprocessor, other well-known css-preprocessors include Less and Stylus.

Syntax Example:

As you can see, it's almost identical to CSS!

Manipulating Colors

1. Lighten()

$btn-primary: red;

.btn {
  background: $btn-primary;
  &:hover {
    background: lighten($btn-primary, 10%)
  }
}

// Lightens button by 10% in hover state

Creates a lighter color of color with an amount between 0% and 100%. The amount parameter increases the HSL lightness by that percent.

2. Darken()

$btn-primary: red;

.btn {
  background: $btn-primary;
  &:hover {
    background: darken($btn-primary, 10%)
  }
}

// Darkens button by 10% in hover state

Creates a darker color of color with an amount between 0% and 100%.
The amount parameter decreases the HSL lightness by that percent.

3. Mix()

body {
  background: mix(blue, green, 50%);
}

// Body background is a mix between blue and green

Creates a color that is a mix of color1 and color2. The weight parameter must be between 0% and 100%. A larger weight means that more of color1 should be used. A smaller weight means that more of color2 should be used. Default is 50%.

4. Transparentize()

.btn {
  padding:10px;
  background: green;
  color: white;
  &:hover {
    background: transparentize(green, 0.5);
  }
}

// Button background becomes 50% transparent in hover state

Creates a more transparent color of color with an amount between 0 and 1. The amount parameter decreases the alpha channel by that amount.

5. Saturate()

.btn {
  padding:10px;
  color: white;
  background-color: saturate(#333,40%);
}

// Button background is a reddish-black color

Creates a more saturated color of color with an amount between 0% and 100%. The amount parameter increases the HSL saturation by that percent.

To see the full list of color manipulation functions, please visit the Color Function Documentation at W3Schools.

Fetch Timestamp Of Youtube Video / Convert It (PHP + CSS)

aryaziai — Tue, 23 Jun 2020 02:27:14 +0000

UX Advantage

When developing a website, specifically a dynamic blog, the question of "How do I engage my users and increase clicks" comes up quite often. There isn't one simple solution, however, there are certain details that play a role in the user's decision to engage with the content. I recently noticed a pattern in my decision-making process when browsing Youtube. I would first look at the thumbnail of a video, read the title, and lastly, examine the timestamp of the video. All three factors are considered in a split second before deciding whether to click the video or continue scrolling. If the video thumbnail and title are interesting but the duration is very short/long, chances are that I won't click. Seeing the timestamp before clicking on a video, allows me to make the decision of whether I want to invest X amount of time or not. This detail allows me to feel more in control of my time, thus creating a more positive user experience.

One of my blog sites contains many Youtube videos, each blog post containing one video. I created a fetch request to import the timestamp of each video, convert it to a readable format, and output the result on each video thumbnail.

Before

After

Let's Get Started

Endpoint:

https://www.googleapis.com/youtube/v3/videos?part=contentDetails&id=[VIDEO_ID]&key=[API KEY]

Example Video ID: GW4f9HY-6Ng

API Key: If you don't have a key, please sign up at Google Developers Console and enable the Youtube Data API v3 to obtain your free key.

Fetch Request

$dur = file_get_contents("https://www.googleapis.com/youtube/v3/videos?part=contentDetails&id=$VIDEO_ID&key=$API_KEY");
$duration_key = json_decode($dur, true);
$duration = $duration_key['items'][0]['contentDetails']['duration'];

// Output: PT1H9M38S

Convert Output

function covtime($youtube_time){
    $start = new DateTime('@0'); // Unix epoch
    $start->add(new DateInterval($youtube_time));
    return $start->format('H:i:s');
}   

echo covtime('PT1H9M38S');

// Output: 01:09:38

Thanks to Amal Murali for writing this neat function to help us convert PT1H9M38S into something a little more readable.

One More Step

The current function will show a lot of zero's in the timestamp, which may feel too technical for the user. ie. 9-minute video will appear 00:09:00. I wanted to take one extra step to make the output more user-friendly by conditionally removing the zero's from the output.

Remove Zero's

function covtime($youtube_time){
    $start = new DateTime('@0');
    $start->add(new DateInterval($youtube_time));

    if ($start->format('H') != 00) { // if hours exist, return entire duration
          if ($start->format('H')[0] == 0) { // if less than 10 hours, eliminate first zero
           $eliminate_zero = substr($start->format('H:i:s'),1);
          return $eliminate_zero;
          }
          else {
            return $start->format('H:i:s');
          }
    }
    elseif ($start->format('i')[0] == 0) {
            $eliminate_zero = substr($start->format('i:s'),1);
            return $eliminate_zero;
        }
    else {
    return $start->format('i:s');
    }
}

echo covtime('PT1H9M38S');

// Output: 1:09:38

Putting It All Together

function video_set_duration() {
$vidId = ''; // Input Video ID
$key = ''; // Input API Key

$dur = file_get_contents("https://www.googleapis.com/youtube/v3/videos?part=contentDetails&id=$vidId&key=$key");
$duration_key = json_decode($dur, true);
$duration = $duration_key['items'][0]['contentDetails']['duration'];

$start = new DateTime('@0');
$start->add(new DateInterval($duration));

    if ($start->format('H') != 00) { // if hours exist, return entire duration
          if ($start->format('H')[0] == 0) { // if less than 10 hours, eliminate first zero
           $eliminate_zero = substr($start->format('H:i:s'),1);
          return $eliminate_zero;
          }
          else {
            return $start->format('H:i:s');
          }
    }
    elseif ($start->format('i')[0] == 0) {
            $eliminate_zero = substr($start->format('i:s'),1);
            return $eliminate_zero;
        }
    else {
    return $start->format('i:s');
    }
}

CSS

If you'd like the timestamp overlaid on top of the video thumbnail, be sure to include the timestamp within the same div as the thumbnail. Below is the CSS that I'm using to render the timestamp in the bottom right corner of the thumbnail.

.duration {
    position: absolute;
    background: rgba(0,0,0,.8392156862745098);
    color: #fff;
    font-weight: 600;
    z-index: 1;
    bottom: 4px;
    right: 5px;
    padding: 0 3px;
    font-size: 11.5px;
    letter-spacing: .3px;
}

Hope you enjoyed this tutorial, please let me know if you have any questions.

Optimize Cloudflare

aryaziai — Tue, 16 Jun 2020 22:35:46 +0000

What is Cloudflare?

I used to share the misconception that Cloudflare was simply a CDN (Content Delivery Network) service during the early stages of my web-dev career. However, I made the switch to Cloudflare to manage my domains after learning that it is more than just a CDN, but also provides many security and performance benefits. Each time that I purchase a new domain and hosting plan, I'm able to connect the two with Cloudflare in a matter of minutes. Although Cloudflare provides many different features, I will solely focus on a few settings that enhanced my websites via DNS Management.

Getting Started

The first step is to an account. If you already have updated your nameservers to match Cloudflare then skip this section.

1) Register a Cloudflare Account
2) Enter your website name.
3) Select "Free" Plan
4) Review your DNS settings.
5) Follow the Change your nameservers instructions. This typically entails logging in to your domain provider (i.e. GoDaddy). Edit DNS settings and update nameservers.

Example nameservers: NS aldo.ns.cloudflare.com NS josephine.ns.cloudflare.com

You can now check to see if your nameservers are properly configured on Cloudflare. I recommend waiting at least 5-10 minutes for it to update.

6) Update the target value (content) to point to your webhost. If you're using Heroku, they will grant you a value to add, ie clear-stonecrop-1r783irsddna.herokudns.com

Page Rules

Now that you have successfully connected Cloudflare, let's change a few things on the page rules tab. The free plan will allow up to three rules.

Rule #1

*YOURDOMAIN.com/*
Always Use HTTPS

Cloudflare provides free SSL certification (https), so let's use it and get that neat lock icon to appear next to our domain name.

Rule #2

YOURDOMAIN.com/*
• Auto-minify Html, Css, Js
• Rocket Loader On
• Browser Cache TTL - 1 month

Minifying our code will help with load times. Browser Cache will help reduce resources for returning visitors. Rocket Loader will prioritize your website's content by deferring the loading of all of your JavaScript until after rendering, so users won't have to wait when visiting your site.

Rule #3 (Optional)

www.YOURDOMAIN.com/*
Forwarding URL - 301 Permanent Redirect
https://YOURDOMAIN.com/$1

You will not be required to set up any redirects. I personally don't like my sites being accessed with the "www" sub-domain so I've setup this redirect to my homepage in case anyone prepends the domain URL with "www".

Note: The reason that why we use an asterisk (*) is to create dynamic patterns that can match many URLs, rather than just one.

Caching

Below the caching configuration, we can manually purge cache, set global rules, and switch to Development mode to temporarily bypass cache and see changes to your site in real-time.

Network

1) Enable HTTP/3 (with QUIC) - Accelerates HTTP requests by using QUIC, which provides encryption and performance improvements compared to TCP and TLS.

2) Enable 0-RTT Connection Resumption - Improves performance for clients who have previously connected to your website.

Apps (Optional)

Cloudflare provides a variety of apps that you can easily install onto your site. These apps range from data-driven to User experience. One of my favorite apps is Adsense Guard. Adsense Guards protects your adsense account from receiving invalid clicks on your ads. There are similar apps available that you can test out as well.

Scrape Shield

1) Disable Email Address Obfuscation (Optional). Enabling allows you to display obfuscated email addresses on your website to prevent harvesting by bots and spammers. I did not require this service so I turned it off to require one less resource.

2) Enable Server-side Excludes - Automatically hide specific content from disreputable visitors.

3) Enable Hotlink Protection - Protect your images from off-site linking.

Thank you for reading. If you have any additional tips for optimizing your Cloudflare settings, please share.

Minify Code Automatically

aryaziai — Tue, 09 Jun 2020 22:58:58 +0000

Requirements

Visual Code Studio

Why Minify?

Minifying code, also known as minification, is the process of removing all unnecessary characters from the source code without altering its functionality. This typically means the removal of whitespace, comments, and semicolons to allow for compact file sizes. Minification is one of the main methods of reducing load times and bandwidth usage on websites.

In this tutorial I'll share a quick shortcut that automatically creates a new file with our minified code, so that we can still code comfortably (without minfication) in our default files.

Example:

   // return random number between 1 and 6
function dieToss() {
  return Math.floor(Math.random() * 6) + 1;  
}
// function returns a promise that succeeds if a 6 is tossed
function tossASix() {
  return new RSVP.Promise(function(fulfill, reject) {
    var number = Math.floor(Math.random() * 6) + 1;
    if (number === 6) {
      fulfill(number);
    } else {
      reject(number);
    }
  });
}
// display toss result and launch another toss
function logAndTossAgain(toss) {
  console.log("Tossed a " + toss + ", need to try again.");
  return tossASix();
}

function logSuccess(toss) {
  console.log("Yay, managed to toss a " + toss + ".");
}

function logFailure(toss) {
  console.log("Tossed a " + toss + ". Too bad, couldn't roll a six");
}
// use promise paradigm to try three times to toss a 6
tossASix()
  .then(null, logAndTossAgain)   //Roll first time
  .then(null, logAndTossAgain)   //Roll second time
  .then(logSuccess, logFailure); //Roll third and last time

Minified:

function dieToss(){return Math.floor(6*Math.random())+1}function tossASix(){return new RSVP.Promise(function(a,b){var c=Math.floor(6*Math.random())+1;6===c?a(c):b(c)})}function logAndTossAgain(a){return console.log("Tossed a "+a+", need to try again."),tossASix()}function logSuccess(a){console.log("Yay, managed to toss a "+a+".")}function logFailure(a){console.log("Tossed a "+a+". Too bad, couldn't roll a six")}tossASix().then(null,logAndTossAgain).then(null,logAndTossAgain).then(logSuccess,logFailure);

Step 1

Install the MinifyAll extension on Visual Code Studio by Jose Gracia Berenguer.

Step 2

Modify the extension settings:
   ☐ Minify On Save
   ☑ Minify On Save To New File
   ☐ Open Minified Document
   -min Prefix on new minified file

Note: You may also disable specific file extensions (i.e. HTML files)

Step 3

Update the file references in our web app to the minified files. For example, to update our CSS in React we'll replace the following line in our our App.js file:

import './App.css';

with:

import './App-min.css';

Conclusion

Now that our extension is properly setup and our web application is linked to the -min version of our files, we can continue to code in our regular (without minfication) files. Each time that we save, the -min file(s) in our directory will instantly be created/updated with the minfified code.

Tip: Try accomplishing this goal with CSS files to become comfortable with the extension, and then branch out to different file types.

Customizing Search Bar with VanillaJS

aryaziai — Fri, 29 May 2020 19:11:54 +0000

This short guide is for anyone who is looking to spice up their search bar without using any plugins or packages. I was inspired to make these changes while redesigning a navigation bar to make it more minimalistic. Prior to implementing these changes, I was inlining the search input field within the navigation bar.

Before:

After:

The old search bar is now replaced with a search icon, which displays a full page search screen when clicked. This allows for a clean navigation bar, taking up far less space than inlining an entire input field.

Advantage: Requires less space than inlining an entire input field.
Disadvantage: Adds an extra click before the user can search.

3 Simple Steps

1) HTML

The HTML code will be pretty short. The searchicon div is where the search icon will live and the pagesearch div is for the full page search screen, which will appear once the search icon is clicked. The form in the pagesearch div is optimized for Wordpress. Please modify the form code to fit your site.

<div class="searchicon"> 
   <span class="searchbutton" onClick="showSearch()"></span> <!-- searchicon -->
</div>

<!-- Full Page Search Screen -->
<div class="pagesearch" >
   <span onClick="hideSearch()" class="xOut"></span>
   <form method="get" class="searchform" action="<?php echo home_url(); ?>/"> <!-- wordpress route -->
      <div class="search-text-div"><input type="text" name="s" class="search-text" value="" placeholder="Search..." /></div>
      <span class="search-submit-div btn"><input type="submit" class="search-submit" value="" />
      </span>
   </form>
</div>

2. CSS

The primary goal of the CSS is to add the search icon. I prefer to use SVGs instead images whenever I have the chance. Although you can hardcode SVGs directly in the HTML, I recommend adding it in the background attribute in CSS. Check out this article to learn more about the advantages of SVGs. Here is the SVG we will be using. Note: If you're using a white background, change the fill color to something other than white (i.e. Black).

  .searchbutton {
    display: inline-block;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='20' height='20' viewBox='-1 0 136 136.21852' fill-rule='evenodd'%3E%3Cpath d='M 93.148438 80.832031 C 109.5 57.742188 104.03125 25.769531 80.941406 9.421875 C 57.851562 -6.925781 25.878906 -1.460938 9.53125 21.632812 C -6.816406 44.722656 -1.351562 76.691406 21.742188 93.039062 C 38.222656 104.707031 60.011719 105.605469 77.394531 95.339844 L 115.164062 132.882812 C 119.242188 137.175781 126.027344 137.347656 130.320312 133.269531 C 134.613281 129.195312 134.785156 122.410156 130.710938 118.117188 C 130.582031 117.980469 130.457031 117.855469 130.320312 117.726562 Z M 51.308594 84.332031 C 33.0625 84.335938 18.269531 69.554688 18.257812 51.308594 C 18.253906 33.0625 33.035156 18.269531 51.285156 18.261719 C 69.507812 18.253906 84.292969 33.011719 84.328125 51.234375 C 84.359375 69.484375 69.585938 84.300781 51.332031 84.332031 C 51.324219 84.332031 51.320312 84.332031 51.308594 84.332031 Z M 51.308594 84.332031'%3E%3C/path%3E%3C/svg%3E")
      center / contain no-repeat;
    width: 20px;
    height: 20px;
  }

  .pagesearch { /* full page search screen, hidden by default */
    display: none;
    background: #000000f0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
  }

.xout {
   cursor: pointer;
}

  .xOut:after {
    content: "X";
    color: #fff;
    font-weight: 100;
    font-size: 2.1rem;
  }

.searchform { /* form field placed in middle of screen */
    position: absolute;
    width: 50%;
    top: 39%;
    left: 25%;
    border-bottom: 2px solid #fff;
    padding-bottom: 8px;
}

.search-text { /* input field text */
  font-size: 38px;
  font-weight: 100;
  font-family: unset;
  color: #f5f5f5 !important;
  padding-left: 10px;
  background: transparent;
  border: 0;
}

  .search-submit { /* submit icon, thin to match input text */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white'  viewBox='0 0 511.999 511.999' fill-rule='evenodd'%3E%3Cpath d='M508.874,478.708L360.142,329.976c28.21-34.827,45.191-79.103,45.191-127.309c0-111.75-90.917-202.667-202.667-202.667    S0,90.917,0,202.667s90.917,202.667,202.667,202.667c48.206,0,92.482-16.982,127.309-45.191l148.732,148.732    c4.167,4.165,10.919,4.165,15.086,0l15.081-15.082C513.04,489.627,513.04,482.873,508.874,478.708z M202.667,362.667    c-88.229,0-160-71.771-160-160s71.771-160,160-160s160,71.771,160,160S290.896,362.667,202.667,362.667z'%3E%3C/path%3E%3C/svg%3E")
      center / contain no-repeat;
    width: 33px;
    height: 47px;
    padding: 0;
    border: 0;
  }

3. Javascript

showSearch is triggered when the user clicks the search button.
hideSearch is triggered when the user presses "esc" on their keyboard, or clicks the "x" button.

function showSearch() {
  document.querySelector(".pagesearch").style.cssText = "display:block";
  document.querySelector(".xOut").style.cssText = "display:block";
  document.querySelector("html").style.cssText = "overflow:hidden";

  document.onkeydown = function (evt) {
    evt = evt || window.event;
    var isEscape = false;
    if ("key" in evt) {
      isEscape = evt.key === "Escape" || evt.key === "Esc";
    } else {
      isEscape = evt.keyCode === 27;
    }
    if (isEscape) {
      hideSearch();
      document.onkeydown = null;
    }
  };
}

function hideSearch() {
    document.querySelector(".xOut").style.cssText = "display:none";
    document.querySelector(".pagesearch").style.cssText = "display:none";
    document.querySelector("html").style.cssText = "overflow:initial";
}

Conclusion

The more comfortable I get with web dev, the less I try to rely on plugins and packages to execute my ideas. This was a fun feature I was able to implement pretty quickly. Enjoy!

Complete Guide To Hosting Wordpress On Heroku With SSL Certification

aryaziai — Tue, 26 May 2020 00:46:13 +0000

I recently moved all of my self-hosted Wordpress websites to Heroku and I'm now spending $0 a month, happily saving over $300 a year in hosting and SSL Certificate fees! I've put together this guide for anyone who manages a self-hosted Wordpress site and is looking to not a dime (aside from annual domain fees). A special shoutout to Philipp Heuer for making this all possible.

Disclaimer: You are limited to a 5MB database, which is more than enough for most people unless you plan on having over 1,000 posts and/or plugins that generate new rows anytime that you publish a new post (not common). For anyone who may not know this: images, code, etc. are not stored in the database, they are simply referenced. I'll share a tool you should use to manage your database size later in this guide. You will also not be able to update the Wordpress version or add new plugins/themes from the WP Admin Dashboard. You're required to update the Wordpress version number in our Composer.json file, and manually add themes/plugins into our local Wordpress repo before pushing to heroku. This may sound time consuming, but it'll only require an extra 1-2 minutes each time that you need to make a Wordpress version, theme, or plugin update.

Steps

1) Register a Heroku account for your respective site. Select "PHP" for primary development language. Adding credit card information is required for us to install Wordpress. It'll also improve our free plan by increasing our 500 free dyno hours to 1000. If you want to learn more about dyno hours work, I highly recommend reading Andrey Azimov's blog post. My Wordpress installation wouldn't complete without adding the CC. I've never been charged and my sites are very active. You can check your usage here. Also try to keep a separate heroku account for each website, unless you don't expect much traffic.

2) Click the Deploy to Heroku button in Philipp Heuer's repo. I've tested several different Heroku/Wordpress installations and this is by far the best.

3) Visit your new app from your heroku dashboard and open the settings. Clone the Heroku git URL onto your computer.

4) Clone wordpress-heroku onto your computer. Afterwards, move the contents of wordpress-heroku into your empty app's repo. CD into your app, git add, commit, and push. You can now remove the empty wordpress-heroku folder from your computer.

5) Register a Cloudflare account. Cloudflare will provide the appropriate instructions for updating your nameservers. i.e. Login to GoDaddy, edit DNS settings, update nameservers.

Example nameservers:
NS aldo.ns.cloudflare.com
NS josephine.ns.cloudflare.com

You can now check cloudflare to see if your nameservers are pointing to Cloudflare. I recommend waiting at least 5-10 minutes for it to update.

6) This step is optional but highly recommended. Click the "Page Rules" tab on Cloudflare and enter the following three page rules:

*YOURDOMAIN.com/*
Always Use HTTPS
www.YOURDOMAIN.com/*
Forwarding URL - 301 Permanent Redirect
https://YOURDOMAIN.com/$1
YOURDOMAIN.com/*
• Auto-minify Html, Css, Js
• Rocket Loader On
• Browser Cache TTL - 1 month

7) Open a new tab and visit your heroku app's settings again. Click "Add Domain" and enter your domain name without "www" or "https". Copy the DNS target. Go to your Cloudflare dashboard and click the DNS tab. We'll only need the following two rows. You can remove the other rows if you'd like.

Note: Your DNS Target will most likely be different from than the one provided in the screenshot.

Congrats you can now visit your new Wordpress site!

Updating Wordpress Version

You'll be updating Wordpress via Composer.json. If you do not have Composer installed on your computer, simply run brew install composer from the terminal. Open Composer.json in your repo's directory and look for: johnpbloch/wordpress. Change the version number to the latest wordpress version number.
i.e. "johnpbloch/wordpress": "4.9.2" -> "johnpbloch/wordpress": "5.4"

Advanced: Comment-out any plugins that you won't be using. Make sure that you're not missing any commas, or ending the last key-value pair in an object with a comma! I personally don't care for the Wordfence or All in One SEO plugin.

Once your done, run composer update from the terminal. Don't forget to push your changes.

Adding/Removing Plugins & Themes

To make changes to your plugins/themes, go to your repo /web/app. Here you will find your Theme and Plugin folders. Unzip your theme and plugins and place them inside these two folders. Once you've made the appropriate changes: git add, commit, and push to see changes.
Official Directory: Wordpress Themes and Plugins.

Note: The mu-plugins folder stands for Must-Use plugins. These plugins are automatically enabled and will be hidden from your plugin dashboard.

Preventing Redirect Loops/HTTPS Issues

If you're unable to login to the backend or getting "Not secure" errors, don't worry, there is a quick fix! Install Cloudflare Flexible SSL and update you SSL/TLS setting in Cloudflare to "Flexible".

Advanced: Replace any instances of "http" to "https" inside your repo's config/application.php file. You may now remove the plugin. Just be sure to use "https" links or the connection to your site will not be secure.

Managing Database

I recommend using MySQL Workbench by Oracle to manage your database. To get your database credentials, visit your app's dashboard in Heroku and click the "JawsDB Maria" link. Whenever you make a change in MySQL Workbench, be sure to apply changes.

If you're not comfortable with optimizing your database with manual SQL queries, I recommend using the WP Optimize plugin in Wordpress. The plugin will optimize your tables and help reduce your database size.

Uploading Images

Each time that we make any changes to our Wordpress files and push our code, we are overwriting our uploads folder. Therefore any images that we uploaded inside our Wordpress dashboard will be overwritten. Sure you can manually add images to the web/app/uploads folder on your computer, push it up, and link to the images inside your post.. but this eventually become very tiring. The solution is AWS - S3 Storage.

Install WP Offload Media Lite.
Create an AWS account.
Follow these instructions. Please do not skip any of the steps. It's very short, and will save you a lot of hassle from debugging the permission settings later on.
You can store the access keys inside the database and change this option later.

Important: While recently debugging this plugin for a client, I noticed that the URL's of the uploaded images were not updating to the S3 bucket URL's. I figured that the plugin is incompatible with the latest version of Wordpress in our Heroku configuration. To be on the safe side, stick to Wordpress 5.2 until this issue is resolved. You can downgrade Wordpress in the Composer.json.

Debugging

If you run into any issues, visit YOURAPPNAME.herokuapp.com rather than your custom domain. This eliminates Cloudflare from the picture and any potential caching or SSL issues. Ignore your wp-config file, it's almost useless to our configuration. Instead use your repo's config/application.php file if you want to add a PHP constant such as WP_DEBUG. Also, disabling plugins one by one is always a smart choice in Wordpress but don't forget about the mu-plugins that are hidden from the dashboard. It's common for the redis-cache/object-cache.php to create issues. Comment-out all three lines pertaining to redis-cache in your composer.json before running an update, as well as deleting it from your mu-plugins folder if it's creating issues.

Prevent Sleeping

Heroku's free plan will put an app to sleep after 30 minutes of inactivity. This will force the next visitor to wait several extra seconds before they can view your site. In order to prevent this from occuring, create a free account on Cron-job.org, enter your site link, and set the schedule to every 30 minutes.

The End

I hope that you found my guide useful, please let me know if you have any questions and I'll be more than happy to help 🙂

Improve Speed with Lazy-Loaded Youtube Videos (+Autoplay)

aryaziai — Mon, 18 May 2020 21:40:04 +0000

There is something addicting about webpage speed tests. I typically use PageSpeed Insights and GTMetrix to measure a website's performance upon completion. However, there is a thin line between a quick loading webpage and not compromising any important features. I recently found myself in a tricky position after testing out a blog site I created which primarily consisted of youtube videos. The site contains hundreds of posts, and each post contains a specific youtube video. When the user views a post, the video within the post begins auto-playing (thanks to the "?autoplay=1" parameter appended to the youtube link). Unfortunately this behavior drastically increases the load time with many requests needing to be made for resources.

I'll be using GTMetrix to draw speed comparisons since it provides us with a more detailed break-down than PageSpeed Insights by Google.

It took 4.8 seconds to fully load the page and 44 requests. As you can see below, a majority of these requests are being made by the embedded youtube code.

After researching this issue, I found Arthur Corenzan on dev.to provide a very clever solution. By embedding the link inside the srcdoc attribute, the user will only need to download the cover image for the video. Once the image is clicked, the youtube video will load.

The first modification I made was by replacing the ▶ button with the official youtube play icon and styling it to appear in the middle of the cover image. Although the iframe code resolved my speed issue, it required the user to click the cover image for the video to begin playing. I fixed this by adding a script to the footer of my post which automatically clicks the cover-image once the page is loaded. If you're not interested in auto-playing the video, please ignore the function below.

window.onload = function () {
setTimeout(function () {
document.querySelector('#videoframe').contentDocument.querySelector('#playbutton').click();
  }, 2000);
};

You can change the value to a number below 2000 but be cautious. If the video is auto-clicked before the page has finished loading, then we are back to square one (if anyone has a better solution please share).

Below is my final iframe code:

<iframe
  width="100%"
  height="100%"
  id="videoframe"
  srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{background:#000;height:100%}img{position:absolute;width:100%;top:0;bottom:0;margin:auto}</style>
  <a href=https://www.youtube-nocookie.com/embed/YOUTUBE_VIDEO_ID?autoplay=1&modestbranding=1&iv_load_policy=3&theme=light&playsinline=1>
  <img src=https://img.youtube.com/vi/YOUTUBE_VIDEO_ID/hqdefault.jpg>
  <img id='playbutton' src='YOUTUBE_PLAY_BUTTON_IMAGE_URL' style='width: 66px; position: absolute; left: 41.5%;'></a>"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  scrolling="no" 
  loading="lazy"
 style="background-color: #000" 
></iframe>

I've shared the youtube play icon here, feel free to download it and host it on your own server. I'm also using the hqdefault version of the youtube video thumbnail. You can try maxresdefault if you want a higher quality image but not every video has a maxresdefault image. You can use this tool to see which image versions of the video are available.

Now let's test the page speed with the new iframe code:

We've drastically cut down the load time and the requests! The user won't notice anything different and the video is still auto-playing as it was before we implemented the new iframe code. If the user manages to click the play button before the script does, the video will still play without any issues.

Final result: