Example of Being Tracked Online by Advertisers

Here’s an example of being tracked around the Internet that happened to me.

Yesterday I heard a product name on a podcast. I thought I recognised it so I looked it up (it was a sports bag my wife has).

In searching for it I visited the product page of an Australian seller (“The WOD Life”). At that point I remembered I actually bought the bag for my wife from that site a few years ago.

About 2 hours later I checked my emails and waiting for me was a new promotional email from the seller.
I haven’t received correspondence from them since I bought the bag.

My guess is, thanks to tracking cookies (advertisers, Google, etc.) I was tracked onto the site, which was then identified by an marketing company running campaigns for the seller, and they decided it was a good time to email me with a reminder to by more product.

 

A few years ago I came home from work to find my place had been broken into and I’d been robbed.

I felt violated by that experience.

Being tracked and targeted online like this holds the same feeling.

Learning React.js and practising in StackBlitz (online IDE)

How easy is it to learn React and practise at the same time?

  1. Start with this course on Pluralsight (https://app.pluralsight.com/library/courses/react-fundamentals-update/table-of-contents).
    Can’t afford Pluralsight (it is expensive for many developers)? You should be able to find something on freeCodeCamp or YouTube (search for something like “React fundamentals or “Learn React”).
  2. Create a GitHub account (every developer should have one for their work and portfolio).
  3. Create an account on StackBlitz – a Visual Studio Code “in the browser” development environment – and link it to your GitHub account so you can start committing (saving) your work as you go.

See the project I’m building as I learn React at https://stackblitz.com/edit/test-react-playground/ (GitHub repo https://github.com/jsnelders/test-react-playground).

Notesheet: Parcel (JavaScript bundler)

Status: Work in Progress


What is Parcel? It’s basically webpack without all the configuration automatically handled out of the box so you can just install it and all your “modern” front-end development compilation happens automatically. Seriously, zero configuration. Clone my sample repository at https://github.com/jsnelders/sample-parcel-js, follow the instructions in the readme.md file and see for yourself.

(That being said, further reading indicates webpack 4 is also zero configuration, though to date I haven’t found a tutorial that doesn’t touch the webpack.js file.)

I discovered Parcel today (11 Feb 2020) and had a test site up and running in under 5 minutes, including typos. Compared to webpack which took “I don’t know how long” to get setup.

  • Keep in mind I’m focused on front-end web development and basically just need it for transpiling ES2015+ to ES5, SCSS pre-processing, minification, bundling and cache busting. And I want the whole setup to be simple.
  • The official site https://parceljs.org/ has a easy getting started guide.
  • The official guide and some articles say you need to npm install the “sass” package but in my sample site this worked out of the box. I suspect that’s because I’m using a version with included features greater than the documentation suggests.

 

 

 


Resources

Add Disqus comments form to Vue.js App or Compoent

I haven’t used with Disqus much, when following the instructions you just need to add code like the following to your page to display the comments form.

 

<div id="disqus_thread"></div>
<script>
/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://jasonsnelders-dev.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

 

But when you try to add this within a Vue application instance or component, you receiving an error like:

 

Errors compiling template: Templates should only be responsible for mapping the state to the UI. 
Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

 

If you Google for the problem “embed disqus in vue” or similar  it might seem the only solution is to install yet another bloody package from npm or yarn.

Fear not, the solution is actually quite simple.

 

Simply move the JavaScript into the Vue mount() event and it should work fine. Don’t forget to delete the actual <script> and </script> elements from your HTML.

The following is a copy of an actual Single File Component I created in a project. Unnecessary content has been removed:

 

<template>
    <div>
        <p>Leave a comment, ask a question or just say hello.</p>
        <div id="disqus_thread"></div>
        <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>  
    </div>
</template>

<script>

export default {
    name: "ContactContent",

    mounted: function()
    {
        /**
        *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
        *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
        /*
        var disqus_config = function () {
        this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
        };
        */
        (function() { // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        s.src = 'https://jasonsnelders-dev.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
        })();
    },
}
</script>

Cheers!

Designing for colour. Computer screens lie.

I’m putting together a new website today and implemented the classic web developer test: I set a background color of red on a div to check my build system was refreshing.

It worked. But with an odd side effect.

The red I saw looked pink on one screen (my laptop screen, in fact) and different shades of red-ish on my other 2 screens.

I have a 3-display setup at home – my laptop screen with 2 connected monitors on either side. I also run an application called F.lux all the time which essentially sets a night light (reduces blue light and runs a softer colour). But even with that turned off I still had colour variations across all three screens.

Unfortunately I couldn’t take a good enough picture to show the contrast clearly, but hopefully the following 2 photos give some idea:

 

Regardless, the moral of this story is:

No matter how precisely you design the colour of software or websites to look, there is no guarantee users will see what you expect them to see.

Keep your designs simple, focus on contrast and hope for the best.

And remember, there’s always grey scale to fall back on.

Notesheet: Webpack

Status: Work in Progress. Updated: 7 February 2020


Points of Interest

 

 


Resources

Webpack error “The operation was rejected by your operating system.”

I just tried installing webpack via npm in a new project and received the following. Notice the error in below near the end:

 

PS D:\Workspaces\profile-jsnelders-com> npm install webpack webpack-cli --save-dev
npm ERR! path D:\Workspaces\profile-jsnelders-com\node_modules\brorand\package.json.1891953989
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall rename
npm ERR! Error: EPERM: operation not permitted, rename 'D:\Workspaces\profile-jsnelders-com\node_modules\brorand\package.json.1891953989' -> 'D:\Workspaces\profile-jsnelders-com\node_modules\brorand\package.json'
npm ERR!  { Error: EPERM: operation not permitted, rename 'D:\Workspaces\profile-jsnelders-com\node_modules\brorand\package.json.1891953989' -> 'D:\Workspaces\profile-jsnelders-com\node_modules\brorand\package.json'
npm ERR!   cause:
npm ERR!    { Error: EPERM: operation not permitted, rename 'D:\Workspaces\profile-jsnelders-com\node_modules\brorand\package.json.1891953989' -> 'D:\Workspaces\profile-jsnelders-com\node_modules\brorand\package.json'
npm ERR!      errno: -4048,
npm ERR!      code: 'EPERM',
npm ERR!      syscall: 'rename',
npm ERR!      path: 'D:\\Workspaces\\profile-jsnelders-com\\node_modules\\brorand\\package.json.1891953989',
npm ERR!      dest: 'D:\\Workspaces\\profile-jsnelders-com\\node_modules\\brorand\\package.json' },
npm ERR!   stack: 'Error: EPERM: operation not permitted, rename \'D:\\Workspaces\\profile-jsnelders-com\\node_modules\\brorand\\package.json.1891953989\' -> \'D:\\Workspaces\\profile-jsnelders-com\\node_modules\\brorand\\package.json\'',
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'rename',
npm ERR!   path: 'D:\\Workspaces\\profile-jsnelders-com\\node_modules\\brorand\\package.json.1891953989',
npm ERR!   dest: 'D:\\Workspaces\\profile-jsnelders-com\\node_modules\\brorand\\package.json',
npm ERR!   parent: 'profile-jsnelders-com' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jsnel\AppData\Roaming\npm-cache\_logs\2020-02-06T20_06_02_861Z-debug.log
PS D:\Workspaces\profile-jsnelders-com> npm install webpack webpack-cli --save-dev
+ webpack@4.41.5
+ webpack-cli@3.3.10
added 10 packages from 6 contributors, updated 1 package and audited 8965 packages in 9.19s
found 0 vulnerabilities

PS D:\Workspaces\profile-jsnelders-com>


npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jsnel\AppData\Roaming\npm-cache\_logs\2020-02-06T20_06_02_861Z-debug.log

 

I just re-ran the npm install ... again and it worked fine the second time. As the message suggests, it was probably a system process in Windows locking the file the first time.

CSS Stacked Paper Effect with Fade Out Transition

A little project I started late tonight.
I want to create a web page that looks like it has a stack of paper, where you can “flip away” the top page after you finish reading it. Similar to a “flip book” (see turn.js as an example) but having only a single page showing at a time (vs the 2-page “open book” every other solution goes with).

 

I found the CodePen https://codepen.io/mlms13/pen/LKFoy which I forked as a starter for the version I’m now developing:

(Link: https://codepen.io/jsnelders/pen/xxGKBpv)

I still have a few features to add:

  • Page curl at the top right (possibly).
  • Responsive design for different screen sizes. I’m not sure what I’m going to do about that at the moment.
  • External forward and back controls.
  • List all pages (or pages already read) so you can quickly go back.
  • Give pages a title, and an optional number.

I’ll continue to work on this over the coming days and provide updates here.

Notesheet: Babel (JavaScript)

Status: Work in Progress. Updated: 7 February 2020


Installation

  • npm install --save-dev @babel/core @babel/cli @babel/preset-env. Install locally in your project and add it as a dev only dependency.
  • Add a .babelrc file to the root of your project. This is the Babel configuration file.
    {
      presets: ['@babel/preset-env']
    }
    
    or
    
    {
      "presets": [
        [
          "env",
          {
            "targets": {
              "browsers": ["last 2 versions", "safari >= 7"]
            }
          }
        ]
      ]
    }
  • Create a “source” directory (and sub-directories) when all source files live (e.g. “src”, “src/js”, “src/css”, etc). In my examples it’s src.
  • Create a “build” directory where all your compiled/transpiled and ready to use files are placed (e.g. “dist”, “build”, “public”). In my examples it’s dist.

 

Running with NPM

  • Create an NPM “script” to run it (will have to be run manually. Eg:
    "scripts": {
      "build": "babel src -d dist"
    },
  • Run npm run build on the command-line and Babel will transpile all JavaScript under the “src” directory and produce output files in the “dist” directory.

 

Running with webpack

  • npm install webpack webpack-cli --save-dev – Install webpack and the CLI.
  • Add a “script” to npm’s packages.json:
    "scripts": {
      "build": "webpack --config webpack.config.js"
    },
  • Create a webpack.config.js in the root of the project
    const path = require("path");
    
    module.exports = {
      mode: 'development',
      entry: "./src/js/index.js",   // Note: "src" is the source directory name from above.
      output: {
        path: path.resolve(__dirname, "dist"),   // Note: "dist" is the build directory name from above.
      filename: "bundle.js"
      }
    };
  • Run npm run build to build files into the “dist” folder.
  • Install the Babel loader for npm install babel-loader babel-core --save-dev.
  • Add the following to your webpack.config.js file:
    module.exports = {
      // ... existing content is here ...
      
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
              loader: "babel-loader",
              options: {
                presets: ["@babel/preset-env"]
              }
            }
          }
        ]
      }
    };
  • “This uses a regex statement to identify the JavaScript files to be transpiled with the babel-loader, whilst excluding anything in the node_modules folder from that. Lastly, the babel-loader is told to use the babel-preset-env package installed earlier, to establish the transpile parameters set in the .babelrc file.” [src]
  • Run npm run build again.

 


Resources

 

Looking into:

Notesheet: JavaScript

Status: Work in Progress. Updated: 4 February 2020


Truthy & Falsy

 

Immediately-Invoked Function Expression (IIFE) (“iffy”)

  • Is an unnamed function (so no global scope pollution) that is executed as immediately after it is defined.
    • It can only be called once and not again later, because their is no name hanging on global scope to call.
  • All variables and functioned defined within an IFFE are in their own local/private scope.
  • It is also known as a Self-Executing Anonymous Function.
  • You can return a value from an IIFE and store the result in a variable.
  • You can also pass in arguments to the anonymous function.
  • What scenarios would you want to use an IIFE in real life (what’s an example)? I did work on a project once that used it, but can’t remember how it helped us.
  • https://developer.mozilla.org/en-US/docs/Glossary/IIFE

 

 

Scope

  • The context of execution.
  • The context in which values and expression can be referenced.
  • Global scope: In front-end web development this is the highest level (generally page level) and any variable or function defined in global scope can be access by another other function.
  • Local scope: Think of it as the scope contained within a function. Variables and nested functions defined within a function cannot be accessed by external functions.
    • A nested function can access variables and functions defined in parent (and ancestor) scope, but parents cannot access variables and functions defined in children.
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope
  • https://www.w3schools.com/js/js_scope.asp

 

Lexical Scoping

  • Describes how a parser resolves variable names when functions are nested.
  • The word “lexical” refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available.
  • So, nested functions have access to variables declared in their outer scope.

 

Hoisting

  • Unlike other languages, in JavaScript you can define a variable (e.g. var myVariable;) in you code after you access it (set a value or read it).
  • In other languages trying to access a variable before you first define it will cause an “undefined variable” type error.
  • Hosting allows this later definition.
  • It “conceptually” moves (hoists) the definition of the variable to the top of the scope it is defined in, so it is already available when the lines that access it are executed.
  • JavaScript does not rearrange your code.
  • What happens is during code compilation the variables definitions (also function definitions) are found and loaded into memory at the top of their scope.
    • This scope can include Global Scope and Local Scope. Local scope may be the full scope of a function.
    • As of ES2015, variables defined with “let” can be hoisted to the top of their “block” level scope (the scope defined within a set of opening an closing curly braces (i.e. “{” and “}”). For example, within an if() or for() statement.
  • Then during the next phase – code execution – they are available.
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope

 

Closures

  • In JavaScript a function can be defined within another function.
  • The inner function has access to variables in the scope of the outer function and other parent-of-parent (ancestor) functions.
  • Closure is the ability for the inner function to continue accessing the variables of the parent scope when it is being executed later.
    • i.e. the outer function returns the inner function (or an object containing the inner function) and that inner function is run some time later in code execution.
  • Each instance of the returned inner function has access to its own copy of the variables in parent scope.
  • It allows you create units of “closed” and re-usable functionality, with data (variables) that do no clutter global scope.
  • https://www.w3schools.com/js/js_function_closures.asp
  • https://developer.mozilla.org/en-US/docs/Glossary/Closure
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

 

Namespaces

 

 

 


Resources