Web Development on Aamnah - Frontend Web Developer

Color coding VS code windows

Thu, 27 Oct 2022 12:45:01 +0500

Changing the color is an excellent visual cue when you have multiple VS Code instances open and switch between them constantly. For me, having 3 VS code instances open is fairly common. One for my notes, one for the project i am coding in, one for something related to that project.

You can change the title bar to the brand color of the project. That way you can quickly differentiate between different client projects

Multiple SSH Keys and Azure DevOps

Mon, 04 Apr 2022 17:31:38 +0500

This is an issue with Azure SSH keys on both Windows and macOS. If you have multiple SSH keysin the ~/.ssh folder, it’ll try the first one only and if that one is not the one you use with Azure, it’ll present you with an authentication failed error instead of trying the rest of the keys (as you’d normally expect with SSH)

If you have multiple keys saved in your .ssh folder or loaded with ssh-agent, Azure DevOps will try only the first one and if that’s not the one for it then it’ll fail with

Generating Hugo templates for subsections

Fri, 11 Mar 2022 11:04:59 +0500

I have a posts/ folder added as a git submodule inside the content/ folder, which has close to 40 folders inside it, each folder is what i call a subsection or category. Treating it like a section allows me to automatically set category titles for the files inside each folder instead of having to manually update the frontmatter for each file in that folder.

There are two mains reasons for adding my posts as a git submodule. One was because i wanted to allow general public to be able to edit these posts on Github. The other was that i wanted to be able to easily port all my posts the next time i wanted to change the static site generator, i’ll just add the posts folder as a submodule.

Notes on transpiling and compile targets

Thu, 02 Sep 2021 00:00:00 +0500

Transpiling to older compile targets results in bulkier code with lots of polyfills. 6x more code in some cases. Supporting IE11 will give you bulky oversized code that runs really slow.
ES2017 has 95% browser support. Transpiling to ES2017 is recommended by Google experts (because it is cost effective)
ES2021 has 70% browser support
Node 12.8 supports ES2019+ natively. The exports field implies ES2019 code because it is only available in Node 12.8. (main can still be used as an ES5 fallback)
You can check serve different JS files based on type="module" and type="nomodule" attributes added to your <script> tags

There are two ways of supporting both modern and older browsers:

Three ways of determining the user's country inside the browser (Geolocation API, IP address, Timezone)

Fri, 20 Aug 2021 00:00:00 +0500

through browser’s Geolocation API (needs user consent)
through IP address (https://extreme-ip-lookup.com/json/)
determine country by checking timezone

For Node based apps you can use countries-and-timezones which is ~9kb and can give you a country based on the timezone

Geolocation API

This i didn’t pay much attention to because i did not want to prompt the user to get their permission for using their location. Overtly creepy.

IP Address

Services like ipinfo.io give you 50k requests/month for free.

Notes on PWAs and app manifests

Mon, 09 Aug 2021 00:00:00 +0500

gcm_sender_id is no longer needed in Chrome 52+
apple-touch-icon-precompose is no longer needed since iOS 7
rel="shortcut icon" As per MDN The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

Durandal Notes

Sat, 17 Apr 2021 00:00:00 +0500

View Composition

You define a template to include with Knockout’s data-bind attribute and specify a value for compose. e.g. data-bind=compose: 'file/path'
compose is a custom binding for Knockout
You can bind to a partial view, which will just be a plain HTML file e.g. navbar.html. Partial views have no matching JavaScript file, and are stored in the views folder. If you bind a partial without a viewmodel, it’ll bind it to the parent element’s viewmodel.
OR you can bind to a ViewModel, which will get the viewmodel, get it’s matching view, bind them together, and then insert it into the DOM.

1<section data-bind="compose: 'navbar.html'"></section>
2<!-- just HTML, no JS involved -->
3
4<section data-bind="compose: 'viewmodels/navbar'"></section>
5<!-- get the viewmodel and the matching view, bind them together and insert into DOM -->

KnockoutJS

Fri, 02 Apr 2021 00:00:00 +0500

the viewmodel properties are just plain JavaScript strings, they have no way of notifying anybody that they’ve changed, so the UI stays static. That’s why Knockout has a concept of observables - these are properties that automatically will issue notifications whenever their value changes.

Observables

They are just properties that advertise to the UI when they are changed

to read/write an observable’s value, you call it as a function

Simplest KnockoutJS example

 1<body>
 2  <!-- Bind an HTML element -->
 3  <h1 data-bind="text: animal">Monkey</h1>
 4
 5  <!-- Import Knockout -->
 6  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
 7
 8  <script>
 9    // Create a ViewModel
10    var viewModel = {
11      animal: ko.observable(),
12    }
13
14    viewModel.animal('Elephant')
15
16    // Activate KnockoutJS so that it updates values for `data-bind`
17    ko.applyBindings(viewModel)
18  </script>
19</body>

Notes

Without Typescript, there are no errors. If you have a data-bind that doesn’t exist, it’ll fail silently (took me an hour to figure out that one). If you’re binding a ViewModel that doesn’t exist, it’ll fail silently. Typescript is pretty much a necessity if you want to keep your sanity and save your time..
make sure you have the browser console open, that’s one place that’ll show you some errors.
var self = this saving a reference/alias to this as self is a common convention in ES5 (and Knockout). it is useful when you have functions inside function and they have their own this and you need to reference back to self (i.e. the parent function’s this..)
applyBindings() takes an instance of the ViewModel and a Selector (node inside the DOM tree). Selector is useful when you have multiple ViewModels and want to restrict the activation to a certain area..
ko.computed() let’s you take values from other observables and create a consolidated result

HTTPS Secure Server with SSL for local development

Tue, 09 Jun 2020 11:08:54 +0500

ngrok

 1# install on Ubuntu
 2sudo snap install ngrok
 3
 4# connect your account
 5ngrok authtoken XXXXXXXXXXXXXjeZhwV6zXXXXXXXXXXpvyAj5yKXXXXXXXXXX
 6
 7# start tunnel
 8ngrok http 443
 9
10# point ngrok to your local web server
11# 127.0.0.1:8080 is default url for http-server
12ngrok http 127.0.0.1:8080 -host-header="127.0.0.1:8080"

Keep in mind that ngrok is not a web server, it won’t work for development. It’s just a tunnel that’ll make your webserver available over HTTPS

Creating WordPress shortcodes

Fri, 27 Mar 2020 15:03:04 +0500

 1// function that runs when shortcode is called
 2function my_awesome_function() { 
 3 
 4  // Things that you want to do. 
 5  $message = 'Hello world!'; 
 6   
 7  // Output needs to be returned
 8  return $message;
 9}
10
11// register shortcode
12add_shortcode('my_awesome_shortcode', 'my_awesome_function');

Add a shortcode in WordPress theme files

1<?php echo do_shortcode("[your_shortcode]"); ?>

NOTES

Prefixing the function names and shortcode names is a good idea. For example, consider the following function to load a stylesheet

1// Load the CSS file
2function add_plugin_stylesheet()
3{
4  wp_enqueue_style( 'country-site-selector', plugins_url(
5    'country-site-selector.css', __FILE__ ) );
6}
7add_action('wp_enqueue_scripts', 'add_plugin_stylesheet');

add_plugin_stylesheet has already been declared in another plugin i wrote. When i tried to use it in this plugin and activate it, it failed to do so because the function has already been used.. The function names need to be unique

Drawing SVGs

Tue, 23 Jul 2019 10:59:44 +0500

Notes on keeping SVGs crisp

Keep stroke widths in even numbers (0, 2, 4, 6) to keep em sharp. Browsers draw lines in between pixels
SVG coordinates are mapped to the left of a pixel line and not in the middle. A single pixel line at (2, 1), your line will be drawn on half pixels resulting in blurred or anti aliased line. But if we offset it by 0.5 then it will be drawn in the middle, will fill the entire pixel and look sharp. Draw at (2.5, 1) instead.
Draw on pixel boundries top keep it sharp, i.e. snap to pixel.
You can use shape-rendering=crispEdges to disable browser anti-aliasing.

viewBox, height and width

Here’s the simplest SVG, a box

Drawing with SVG paths and demystifying the code

Thu, 11 Jul 2019 11:13:38 +0500

 1<svg
 2  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
 3  <title>Flag</title>
 4  <path d="
 5  M 85.31,60.61
 6  a 3.07,3.07,0,0,1-.65,1.79
 7  c -2.14,2.65-5.11,3.93-8.31,4.72
 8  A 25.94,25.94,0,0,1,58,65.39
 9  c -0.56-.28-1.09-0.65-1.63-1-2.22-1.4-3.66-3.09-3.24-6
10  a 48.43,48.43,0,0,0,.06-6.64
11  c -2.45-.36-4.87-0.83-7.31-1.06
12  a 56.74,56.74,0,0,0-15.71.56,21.14,21.14,0,0,0-8,2.93
13  A 2.27,2.27,0,0,0,21,56.26
14  Q 21,77.51,21,98.77
15  V 100
16  H 14.66
17  V 3
18  a 3,3,0,0,1,3-3
19  H 18
20  a 3,3,0,0,1,3,3
21  V 9.76
22  c 4.55-4.62,10.31-5.69,16.27-6.17
23  a 35.46,35.46,0,0,1,15.5,2,19.2,19.2,0,0,1,6.16,3.69,1.87,1.87,0,0,1,.7,1.55
24  c 0,2.91,0,5.82,0,8.91,8.92,1.82,17.58,2.06,25.73-3
25  V 17.6
26  Q 85.34,39.11,85.31,60.61
27  Z"/>
28</svg>
29<!-- 
30
31https://css-tricks.com/svg-path-syntax-illustrated-guide/
32
33M move on canvas (absolute coordinates)
34m move from current position
35
36L draw a Line (absolute coordinates)
37l draw a Line from current position
38
39H draw a Horizontal line
40h draw a horizontal line
41
42V draw a Vertical line
43v draw a Vertical line
44
45C (bezier) Curve
46c (bezier) Curve
47
48Z/z close the path (optional)
49
50 -->

Creating and using webp images

Fri, 04 Jan 2019 16:07:10 +0500

Usage in HTML

1<!-- For browsers tat support it, just use a .webp image as src -->
2<img src="img/WebPimage.webp" alt="WebP rules." />

Safari, iOS Safari, IE, IE Mobile, Firefox, and Firefox for Android have zero support for webp as of this writing on January 04, 2019.

1<!-- Using webp images with fallback -->
2<picture>
3  <source srcset="img/WebPimage.webp" type="image/webp">
4  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
5  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
6</picture>

The browsers that support <picture> will choose the most adequate image to display. The ones that don’t will just show the <img> <src>

Notes on SVG Sprites

Tue, 23 Oct 2018 00:00:00 +0500

It should just be an <svg> tag, with a <defs> tag (which just means you are defining stuff to use later), and then a bunch of <symbol> (group) tags. Each <symbol> tag will have a unique ID, and will wrap all the paths and whatnot for each icon.

You need:

an svg file that has the defs

 1<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
 2  <defs>
 3    <symbol id="icon-facebook">
 4    	<!-- paths go here -->
 5    </symbol>
 6    <symbol id="icon-youtube"></symbol>
 7    <symbol id="icon-linkedin"></symbol>
 8    <symbol id="icon-mail"></symbol>
 9    <symbol id="icon-whatsapp"></symbol>
10  </defs>
11</svg>

1<svg class="icon" xmlns:xlink="http://www.w3.org/1999/xlink">
2  <use href="#facebook"></use>
3</svg>

NOTE: xlink:href is deprecated since SVG 2, you should use href instead.

Gatsby in a day

Sun, 21 Oct 2018 00:00:00 +0500

tl;dr

1yarn global add gatsby@latest gatsby-cli@latest
2gatsby new mygatsby git@github.com:gatsbyjs/gatsby-starter-hello-world.git # MVC
3#gatsby new mygatsby git@github.com:gatsbyjs/gatsby-starter-default.git # Starter
4cd mygatsby
5gatsby develop

install

1# npm install --global gatsby@next gatsby-cli@next
2yarn global add gatsby@next gatsby-cli@next
3gatsby -v

This will install the latest (release candidate) of Gatsby.
The next in @next is a dist-tag. See all tags for a package with npm view foo dist-tags or npm dist-tag ls

1npm view gatsby dist-tags

1{ latest: '2.0.28',
2  next: '2.0.0-rc.28',
3  canary: '2.0.0-alpha.80a21f04',
4  'latest-v1': '1.9.279'}

basic site

1# install Gatsby demo site
2# gatsby new mygatsby https://github.com/gatsbyjs/gatsby-starter-hello-world # HTTPS
3gatsby new mygatsby git@github.com:gatsbyjs/gatsby-starter-hello-world.git # SSH
4
5cd mygatsby
6gatsby develop

mygatsby is the name of the site
You sould get a live server at http://localhost:8000

plugins and config

1# from within your gatsby site directory
2yarn add gatsby-source-filesystem@next gatsby-transformer-remark@next

gatsby-config.js must be at the root of your project (not in src)

 1// ./gatsby-config.js
 2
 3module.exports = {
 4  siteMetadata: {
 5    title: `My Blog`, // notice the backticks
 6    description: `This is my blog yo!`
 7  },
 8  plugins: [
 9    `gatsby-transformer-remark`, 
10    {
11      resolve: `gatsby-source-filesystem`,
12      options: {
13        name: `pages`,
14        path: `${__dirname}/src/pages`
15      }
16    }
17  ]
18}
19
20// Values can be in commas too, works with both commas and backticks.
21// Backticks is convention i guess
22// If you're having errors, this might help: : https://rusl.io/blog/backticks/

Values can be in commas too, works with both commas and backticks. Backticks is Gatsby convention i guess
Restart your gastby server after creating a config file for the changes to take effect

GraphQL

When you run gatsby develop it also runs a GraphiQL instance in the browser which you can use to build your queries

Parcel

Thu, 18 Oct 2018 00:00:00 +0500

Why?

Simpler to use than Webpack
Has a built-in live dev server, with hot module replacement
Let’s you create and use modules with import and export
Babel works right out of the box
Live reloading works with HTML, CSS and JS
Buils your projcect for you, default build directory is dist. You can change it with --out-dir
Build code gets automatically compiled and minified

Getting started

With Yarn

1yarn global add parcel-bundler
2yarn init -y

or with NPM

Surge deployments in 2 minutes

Sat, 07 Jul 2018 00:00:00 +0500

tl;dr

1# install with npm
2npm install --global surge
3
4# OR install with yarn
5yarn global add surge
6
7# run
8surge

Enter an email and password to signup or login
Select a directory to publish
Enter a domain name
Done!

deployments

If you’re already authenticated, you can directly pass in the directory with the surge command

1# deploy a directory
2surge /public

1# deploy folder while passing the domain name as parameter
2surge public/ --domain myfooo.surge.sh

save your domain name to a CNAME file

You can pass the domain name as a CLI parameter

Hugo Templates in 15 Minutes

Sun, 06 May 2018 00:00:00 +0500

Index page

List and Single Pages

Menus

Menus are defined in config.toml and used in template files
You can define multiple different menus
.Site.Menus let’s you access any menu by name

 1# config.toml
 2# Site Menus
 3[menu]
 4  # Main Menu
 5  [[menu.main]]
 6    name = "Home"
 7    url = "/"
 8  [[menu.main]]
 9    name = "About"
10    identifier = "about"
11    url = "/about"
12  [[menu.main]]
13    name = "Getting Started"
14    identifier = "getting_started"
15    url = "/getting_started"
16  [[menu.main]]
17    name = "FAQs"
18    url = "/faq"

1<!-- Template -->
2{{ if .Site.Menus.main }}
3  {{ range .Site.Menus.main }}
4    <a href="{{ .URL }}">{{ .Name }}</a>
5  {{ end }}
6{{ end }}

Partials

Blocks and Base Templates

the base code goes in layouts/_default/baseof.html
it’s the template for our entire Hugo site
Blocks avoid copy/paste code. Instead of including the <header> and <footer> partials in every template, you can just define the new code as blocks and use the rest of the code as defined in the base template.
index.html and 404.html don’t use the baseof.html template
Blocks serve as defaults, you can overwrite them in other templates, something you can’t do with partials. For example, if you defined a code block called footer in the base template, you can override that block from any other template by defining the footer in that template

1<!-- baseof.html -->
2
3{{ block "main" . }}
4  <!-- Code goes here -->
5{{ end }}

1<!-- single.html -->
2
3{{ define "main" }}
4  <!-- Code goes here -->
5{{ end }}

Hugo Snippets

Fri, 20 Apr 2018 00:00:00 +0500

Include a partial template

1partial {{ "foo.html" . }}
2partial {{ "foo" . }}

you use the partial function
the partial directory is layouts > partials, this is where your partial templates will go
templates are always .html files
you don’t have to specify the file extension when including a partial template, Hugo knows it’s an html file
{{ . }} represents the current context. {{ . }} always refers to the current context, meaning the data changes based on where it was used. It’s the JS equivalent of this in Go.
. passes contextual variables explicitly

Show recent posts

1{{ range first 5 .Site.Pages }}
2  <!-- code goes here -->
3  <a href="{{ .Permalink }}">{{ .Title }}</a><br>
4{{ end }}

.Site.Pages is an array of all content ordered by Date with the newest first
first 5 gets the latest 5 posts. You can change this number as you like

Show all Sections

1{{ range .Site.Sections }}
2  <a href="{{ .Permalink }}">{{ .Title }}</a><br>
3{{ end }}

.Site.Sections has all the top-level directories of the site

Show pages from a specific Section

1<h1>{{ with .Site.GetPage "section" "blog" }}{{ .Title }}{{ end }}</h1>

List all Sections

1<section>
2  {{ range .Site.Sections }}
3      <li><a href="{{ .Permalink }}">
4        {{ if .Name }}{{ .Name}}
5        {{ else }}{{ .Dir }}
6        {{ end }}</a></li>
7  {{ end }}
8</section>

Won’t render anything if there are no content pages in the section.
Won’t list sub-sections

1  {{ if .Site.Menus.main }}
2    {{ range .Site.Menus.main }}
3      <a href="{{ .URL }}">{{ .Name }}</a>
4    {{ end }}
5  {{ end }}

the above is when you don’t have any submenus
a site can have multiple menus,main is the menu you’re rendering here

Format Dates

You can use the Format function and provide a custom date format string, like so:

SVG Sprites

Wed, 18 Apr 2018 00:00:00 +0500

<symbol> allows you to embed the SVG code as well as have it’s own viewBox attribute
Elements defined inside the <symbol> element can only be rendered to the browser when referenced by the <use> element.
Each symbol will have it’s own id which we will use to reference it
Each symbol will have it’s own viewBox property too. The first two values will almost always be “0 0”, the second two will be equal to the size of the icon you have exported
You can also use viewBox in <use> instead of sprites. Add that to media queries and you can display only symbol instead a full logo without an extra sprite for that.
<symbol> is a better wrapper as compared to <g>. Because a) you can define the viewBox directly on the <symbol> and then not need one when you <use> it later in an <svg>, and b) <symbol> can have it’s own <title> and <desc> tags.
<symbol> will have an id for your icon and have all the <path> values

creating a sprite

 1<svg style="display:none;"> <!-- hide it by default so it doesn't render empty space -->
 2  
 3  <!-- Icons go here, each icon will be warpped as a `symbol` -->
 4  
 5  <symbol id="aircraft" viewBox="0 0 62 51">
 6    <path fill="#000000" d="M38.9872..."></path>
 7  </symbol>
 8  
 9  <symbol id="brush" viewBox="0 0 62 62">
10    <path fill="#000000" d="M7.8416..."></path>
11  </symbol>
12    
13</svg>

referncing an icon

1<svg>
2  <use xlink:href="#aircraft"></use>
3<svg>

referencing an icon from an external svg file

you can use the svg’s from an external svg sprite as well by prefixing the identifier by the path to the file something like this:

Moving from Jekyll to Hugo

Mon, 14 Aug 2017 00:00:01 +0500

Why?

Jekyll is SLOW. Takes about 25 secs to build this site right now, and this site is pretty small right now, less than 500 posts. There are no tags or categories or pagination yet and it’s at 20 seconds already. I have to wait for it to finish in order to see any changes, and i make changes often, so i end up waiting often.
Slow is pretty much my only complaint. While i haven’t been able to put up pages with clickable tags, and dislike that in order to set a default post for a collection i have to create a new config block (i have about 20+ collections, which means 20+ code blocks in config.yml that just say ``), Jekyll has been working for this very simple site of mine.

Hugo

Everything goes in the content folder where you can have subfolders. (No _drafts, _posts and no creating a lot of _collection folders in the root dir like in Jekyll)
Pagination and redirects (aliases) works out of the box
instead of having to place unfinished posts inside the _draft folder, you can put draft: true in the front matter of the post
Built-in livereload, automatically refreshes your browsers when changes are made
Templates use Go instead of Liquid
Hugo will accept TOML, YAML, or JSON (default is TOML) while Jekyll accepts only YAML. The front matter metadata at the top of each content file uses the same syntax as the config.
You can set up templates called archetypes that hold customized front matter for pages of different types (like if you have both a blog and a podcast on your website)

1brew install hugo # install hugo
2hugo version # verify your new install
3hugo new site quickstart # create a new quickstart site
4hugo new content/<page.md> # create new content page
5hugo serve # serve and watch the site
6hugo # build Hugo site

Define a clickable interactive map over an image with

Wed, 15 Mar 2017 00:00:00 +0500

tl;dr

1<map name="primary">
2  <area shape="circle" coords="75,75,75" href="left.html" />
3  <area shape="circle" coords="275,75,75" href="right.html" />
4</map>
5<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic" />

in an <img> tag, specify the usemap attribute and provide the name of whatever map you want to use, for example #world-continents
define a map with the <map> tag. Each map takes an <area> tag with shape, coords and href attributes
shape could be a rect, circle or poly. The amount of coords provided and their placement depends on the shape
rect takes x,y positions of all four corners in a clockwise manner, starting from top-left
circle takes x,y positions at the the horizontal middle of circle and radius (half the width of circle)
poly can make pretty much any shape you want. It takes sets of x,y positions.

Notes

You can use an image editing program with Rulers visible to find the x and y coordinates in a picture. Photoshop, Sketch or even Microsoft Paint will do.
Polygons are really easy to draw with this online tool
In Sketch it’s really easy to pinpoint coords for rectangles, just look in the top right. For circles, get the x and y and add half of the size to each to get the exact coords
Watch this tutorial to learn how to easily find positions with the Info panel (Window > Info (F8)) in Photoshop
The image maps are NOT responsive. If an image gets shrinked due to less space or whatever reason, it messes up the coordinates (as they are fixed pixels, not percentages). To get responsive maps you’ll need to use a plugin
Alternatively you can use an svg instead of an image map, svg will be responsive as well. example
Right clicking any shape highlights the shape outline

Demo 1

Every continent links to a different corresponding article on Wikipedia

Page Speed Optimizations

Mon, 19 Jan 2015 00:00:03 +0500

Eliminate render-blocking JavaScript and CSS in above-the-fold content
- Remove render-blocking JavaScript
- Optimize CSS Delivery
Enable compression (Apache: Use mod_deflate)
Improve server response time
Leverage browser caching
Minify JavaScript
Minify CSS
Minify HTML
Optimize Images

Apache Server Configuration and `httpd.conf` / `.htaccess`

Sample Configurations

The HTML5 Boilerplate project contains sample configuration files for all the most popular servers with detailed comments for each configuration flag and setting: find your favorite server in the list, look for the gzip section, and confirm that your server is configured with recommended settings.

Regex

Fri, 29 Aug 2014 00:00:01 +0500

How to make websites in Urdu and use custom fonts

Sat, 09 Aug 2014 00:00:00 +0500

In this post you’ll learn how to make web pages in Urdu, how to type in Urdu, how to use custom Urdu fonts on your website and how to configure and style a website in Urdu.

Finding a font

First things first, find an Urdu font that you like. I decided to use Nafees Nastaleeq.

Other good fonts are:

If you are having difficulty finding good Urdu fonts (type faces), try Persian. Persian is written very similar to Urdu (both are written in Nastaleeq script) and will do nicely for our use.

Web Development on Aamnah - Frontend Web Developer

Color coding VS code windows

Multiple SSH Keys and Azure DevOps

Generating Hugo templates for subsections

Notes on transpiling and compile targets

Three ways of determining the user's country inside the browser (Geolocation API, IP address, Timezone)

Geolocation API

IP Address

Notes on PWAs and app manifests

Links

Durandal Notes

View Composition

KnockoutJS

Simplest KnockoutJS example

Notes

HTTPS Secure Server with SSL for local development

ngrok

Creating WordPress shortcodes

Drawing SVGs

Notes on keeping SVGs crisp

viewBox, height and width

Drawing with SVG paths and demystifying the code

Creating and using webp images

Usage in HTML

Notes on SVG Sprites

Gatsby in a day

tl;dr

install

basic site

plugins and config

GraphQL

Parcel

Why?

Getting started

Surge deployments in 2 minutes

tl;dr

deployments

save your domain name to a CNAME file

Hugo Templates in 15 Minutes

Index page

List and Single Pages

Menus

Partials

Blocks and Base Templates

Hugo Snippets

Include a partial template

Show recent posts

Show all Sections

Show pages from a specific Section

List all Sections

Render Site Menu

Format Dates

SVG Sprites

creating a sprite

referncing an icon

referencing an icon from an external svg file

Moving from Jekyll to Hugo

Why?

Hugo

Links

Define a clickable interactive map over an image with

tl;dr

Notes

Demo 1

Page Speed Optimizations

Apache Server Configuration and httpd.conf / .htaccess

Sample Configurations

Regex

How to make websites in Urdu and use custom fonts

Finding a font

Apache Server Configuration and `httpd.conf` / `.htaccess`