How to Create a Simple App with Vue

How to Create a Simple App with Vue

learn how to create your a simple app with Vue.

Create your own user interface, and make a simple to-do app with Vue.

Learn How to Create a Simple App with Vue

In this guide, we’ll post a step-by-step tutorial on how to create a simple app online with Vue.

To begin, go to https://codesandbox.io, and familiarize yourself with their online text editor.

View Files from Github

Simple to-do list app with Vue

How to create a simple app with Vue.

Locate Your File Editor​

Once you’ve located your file editor, you’ll need to input this dependency:

https://www.npmjs.com/package/vue.

Vue Package

Add the Vue Dependency Package

Import Files

Now, import the following files in order to view and customize your simple new app.

  • Index.html
  • App.vue
  • index.js
  • package.json
  • variables.scss

Now, create a new custom folder and import the following Components:

  • BaseinputText.vue
  • TodoList.vue
  • TodoListItem.vue
Import Vue Components

Styling Your App

Change the styling of your new app by editing the variables.scss.

Customize the font color and add custom styling using SASS.

See it in Action

Finally, use the sandbox text editor to see your app in action.

Start customizing the new app to make yours, and save your file by integrating with Github.

Software Developers.

View the live app

Learn About Vue and Sass

What is The Open Graph protocol?

The Open Graph protocol enables any web page to become a rich object in a social graph. For example, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

Metadata – The Open Graph Protocol

To turn your web pages into graph objects, you need to add basic metadata to your page. We’ve based the initial version of the protocol on RDFa which means that you’ll place additional <meta> tags in the <head> of your web page. The four required properties for every page are:

  • og:title – The title of your object as it should appear within the graph, e.g., “The Movie”.
  • og:type – The type of your object, e.g., “video.movie”. Depending on the type you specify, other properties may also be required.
  • og:image – An image URL which should represent your object within the graph.
  • og:url – The canonical URL of your object that will be used as its permanent ID in the graph, e.g., “http://www.imdb.com/title/tt0117500/”.

As an example, the following is the Open Graph protocol markup for The Rock on IMDB:

 

Structured Properties

Some properties can have extra metadata attached to them. These are specified in the same way as other metadata with property and content, but the property will have extra :.

The og:image property has some optional structured properties:

  • og:image:url – Identical to og:image.
  • og:image:secure_url – An alternate url to use if the webpage requires HTTPS.
  • og:image:type – A MIME type for this image.
  • og:image:width – The number of pixels wide.
  • og:image:height – The number of pixels high.
  • og:image:alt – A description of what is in the image (not a caption). If the page specifies an og:image it should specify
  • og:image:alt.

Full Image Example:

Optional Metadata

The following properties are optional for any object and are generally recommended:

  • og:audio – A URL to an audio file to accompany this object.
  • og:description – A one to two sentence description of your object.
  • og:determiner – The word that appears before this object’s title in a sentence. An enum of (a, an, the, “”, auto). If auto is chosen, the consumer of your data should chose between “a” or “an”. Default is “” (blank).
  • og:locale – The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
  • og:locale:alternate – An array of other locales this page is available in.
  • og:site_name – If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., “IMDb”.
  • og:video – A URL to a video file that complements this object.

For example (line-break solely for display purposes):

The RDF schema (in Turtle) can be found at ogp.me/ns.

Structured Properties

Some properties can have extra metadata attached to them. These are specified in the same way as other metadata with property and content, but the property will have extra :.

The og:image property has some optional structured properties:

  • og:image:url – Identical to og:image.
  • og:image:secure_url – An alternate url to use if the webpage requires HTTPS.
  • og:image:type – A MIME type for this image.
  • og:image:width – The number of pixels wide.
  • og:image:height – The number of pixels high.
  • og:image:alt – A description of what is in the image (not a caption). If the page specifies an og:image it should specify og:image:alt.

Structured Data

Arrays

If a tag can have multiple values, just put multiple versions of the sametag on your page. The first tag (from top to bottom) is given preference during conflicts.

<meta property="og:image" content="http://example.com/rock.jpg" />

 

Put structured properties after you declare their root tag. Whenever another root element is parsed, that structured property is considered to be done and another one is started.

For example:
Arrays - Open Graph Protocol

This means there are 3 images on this page, the first image is 300×300, the middle one has unspecified dimensions, and the last one is 1000px tall.

Object Types

In order for your object to be represented within the graph, you need to specify its type. This is done using the og:type property:

When the community agrees on the schema for a type, it is added to the list of global types. All other objects in the type system are CURIEs of the form.

The global types are grouped into verticals. Each vertical has its own namespace. The og:type values for a namespace are always prefixed with the namespace and then a period. This is to reduce confusion with user-defined name-spaced types which always have colons in them.

Music

  • Namespace URI: http://ogp.me/ns/music#

og:type values:

music.song
  • music:duration – integer >=1 – The song’s length in seconds.
  • music:album – music.album array – The album this song is from.
  • music:album:disc – integer >=1 – Which disc of the album this song is on.
  • music:album:track – integer >=1 – Which track this song is.
  • music:musician – profile array – The musician that made this song.
music.album
  • music:song – music.song – The song on this album.
  • music:song:disc – integer >=1 – The same as music:album:disc but in reverse.
  • music:song:track – integer >=1 – The same as music:album:track but in reverse.
  • music:musician – profile – The musician that made this song.
  • music:release_date – datetime – The date the album was released.
music.playlist
  • music:song – Identical to the ones on music.album
  • music:song:disc
  • music:song:track
  • music:creator – profile – The creator of this playlist.
music.radio_station

music:creator – profile – The creator of this station.


Video

  • Namespace URI: http://ogp.me/ns/video#

og:type values:

video.movie

  • video:actor – profile array – Actors in the movie.
  • video:actor:role – string – The role they played.
  • video:director – profile array – Directors of the movie.
  • video:writer – profile array – Writers of the movie.
  • video:duration – integer >=1 – The movie’s length in seconds.
  • video:release_date – datetime – The date the movie was released.
  • video:tag – string array – Tag words associated with this movie.

video.episode

  • video:actor – Identical to video.movie
  • video:actor:role
  • video:director
  • video:writer
  • video:duration
  • video:release_date
  • video:tag
  • video:series – video.tv_show – Which series this episode belongs to.

video.tv_show

A multi-episode TV show. The metadata is identical to video.movie.

video.other

A video that doesn’t belong in any other category. The metadata is identical to video.movie.


No Vertical

These are globally defined objects that just don’t fit into a vertical but yet are broadly used and agreed upon.

og:type values:

Article – Namespace URI: http://ogp.me/ns/article#

  • article:published_time – datetime – When the article was first published.
  • article:modified_time – datetime – When the article was last changed.
  • article:expiration_time – datetime – When the article is out of date after.
  • article:author – profile array – Writers of the article.
  • article:section – string – A high-level section name. E.g. Technology
  • article:tag – string array – Tag words associated with this article.

Book – Namespace URI: http://ogp.me/ns/book#

  • book:author – profile array – Who wrote this book.
  • book:isbn – string – The ISBN
  • book:release_date – datetime – The date the book was released.
  • book:tag – string array – Tag words associated with this book.

Profile – Namespace URI: http://ogp.me/ns/profile#

  • profile:first_name – string – A name normally given to an individual by a parent or self-chosen.
  • profile:last_name – string – A name inherited from a family or marriage and by which the individual is commonly known.
  • profile:username – string – A short unique string to identify them.
  • profile:gender – enum(male, female) – Their gender.

Website – Namespace URI: http://ogp.me/ns/website#

 

Read More Guides from Omaha Code

Introduction to Node.js | Learn Node.js

Introduction to Node.js

Introduction to Node.js® – it is a JavaScript runtime built on Chrome’s V8 JavaScript engine. In this brief tutorial, we’ll cover the following topics:

In this brief tutorial, we’ll cover the following topics:

  • Getting Started/Downloading Node
  • Debugging
  • Profiling
  • Creating a Node.js web app
  • Migrating to safe buffer constructors

Introduction to Node.js

First, Download the Node.js source code or a pre-built installer for your platform, and start developing today.
Download Node.

How do I start with Node.js after installing it?


Getting Started Guide

Once you have installed Node, let’s try building our first web server. Create a file named “app.js”, and paste the following code:

Learn Node JavaScript<

After that, run your web server using node app.js, visit http://localhost:3000, and you will see a message ‘Hello World’.

Debugging Guide

This guide will help you get started debugging your Node.js apps and scripts.

Enable Inspector

When started with the –inspect switch, a Node.js process listens via WebSockets for diagnostic commands as defined by the Inspector Protocol, by default at host and port 127.0.0.1:9229.

Each process is also assigned a unique UUID (e.g. 0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e ).

Inspector clients must know and specify host address, port, and UUID to connect to the WebSocket interface.

The full URL is ws://127.0.0.1:9229/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e , of course dependent on actual host and port and with the correct UUID for the instance.

Inspector also includes an HTTP endpoint to serve metadata about the debuggee, including its WebSocket URL, UUID, and Chrome DevTools URL.

Get this metadata by sending an HTTP request to http://[host:port]/json/list . This returns a JSON object like the following; use the webSocketDebuggerUrl property as the URL to connect directly to Inspector.

Node Debugging

{
  "description": "node.js instance",
  "devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e",
  "faviconUrl": "https://nodejs.org/static/favicon.ico",
  "id": "0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e",
  "title": "node",
  "type": "node",
  "url": "file://",
  "webSocketDebuggerUrl": "ws://127.0.0.1:9229/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e"
}

A Node.js process started without –inspect can also be instructed to start listening for debugging messages by signaling it with SIGUSR1 (on Linux and OS X).

As of Node 7 this activates the legacy Debugger API; in Node 8 and later it will activate the Inspector API.


Enabling remote debugging scenarios

It’s recommended that you never have the debugger listen on a public IP address. If you need to allow remote debugging connections we recommend the use of ssh tunnels instead. We provide the following example for illustrative purposes only.

Please understand the security risk of allowing remote access to a privileged service before proceeding.

Let’s say you are running Node on remote machine, remote.example.com, that you want to be able to debug. On that machine, you should start the node process with the inspector listening only to localhost (the default).

$ node --inspect server.js

Now, on your local machine from where you want to initiate a debug client connection, you can setup an ssh tunnel:

$ ssh -L 9221:localhost:9229 [email protected]

This starts a ssh tunnel session where a connection to port 9221 on your local machine will be forwarded to port 9229 on remote.example.com.

You can now attach a debugger such as Chrome DevTools or Visual Studio Code to localhost:9221, which should be able to debug as if the Node.js application was running locally.

Node Inspector

Debug your Node.js app with Chrome DevTools by using an intermediary process which translates the Inspector Protocol used in Chromium to the V8 Debugger protocol used in Node.js.

Learn Easy profiling for Node.js Applications

The built-in profiler uses the profiler inside V8 which samples the stack at regular intervals during program execution. It records the results of these samples, along with important optimization events such as jit compiles, as a series of ticks:

code-creation,LazyCompile,0,0x2d5000a337a0,396,"bp native array.js:1153:16",0x289f644df68,~
code-creation,LazyCompile,0,0x2d5000a33940,716,"hasOwnProperty native v8natives.js:198:30",0x289f64438d0,~
code-creation,LazyCompile,0,0x2d5000a33c20,284,"ToName native runtime.js:549:16",0x289f643bb28,~
code-creation,Stub,2,0x2d5000a33d40,182,"DoubleToIStub"
code-creation,Stub,2,0x2d5000a33e00,507,"NumberToStringStub"

In the past you need the V8 source code to be able to interpret the ticks. Luckily, tools have recently been introduced into Node.js 4.4.0 that facilitate the consumption of this information without separately building V8 from source. Let’s see how the built-in profiler can help provide insight into application performance.

To illustrate the use of the tick profiler, we will work with a simple Express application. Our application will have two handlers, one for adding new users to our system:

app.get('/newUser', (req, res) => {
  let username = req.query.username || '';
  const password = req.query.password || '';

  username = username.replace(/[[email protected]#$%^&*]/g, '');

  if (!username || !password || users.username) {
    return res.sendStatus(400);
  }

  const salt = crypto.randomBytes(128).toString('base64');
  const hash = crypto.pbkdf2Sync(password, salt, 10000, 512, 'sha512');

  users[username] = { salt, hash };

  res.sendStatus(200);
});

and another for validating user authentication attempts:

Please note that these are NOT recommended handlers for authenticating users in your Node.js applications and are used purely for illustration purposes. You should not be trying to design your own cryptographic authentication mechanisms in general. It is much better to use existing, proven authentication solutions.

Validating User Authentication Requests
Validating User Authentication Requests

app.get('/auth', (req, res) => {
let username = req.query.username || '';
const password = req.query.password || '';
username = username.replace(/[[email protected]#$%^&*]/g, '');
if (!username || !password || !users[username]) {
return res.sendStatus(400);
}
const { salt, hash } = users[username];
const encryptHash = crypto.pbkdf2Sync(password, salt, 10000, 512, 'sha512');
if (crypto.timingSafeEqual(hash, encryptHash)) {
res.sendStatus(200);
} else {
res.sendStatus(401);
}
});

Now assume that we’ve deployed our application and users are complaining about high latency on requests. We can easily run the app with the built in profiler:

NODE_ENV=production node --prof app.js

and put some load on the server using ab (ApacheBench):

curl -X GET "http://localhost:8080/newUser?username=matt&password=password"
ab -k -c 20 -n 250 "http://localhost:8080/auth?username=matt&password=password"

and get an ab output of:

Concurrency Level:      20
Time taken for tests:   46.932 seconds
Complete requests:      250
Failed requests:        0
Keep-Alive requests:    250
Total transferred:      50250 bytes
HTML transferred:       500 bytes
Requests per second:    5.33 [#/sec] (mean)
Time per request:       3754.556 [ms] (mean)
Time per request:       187.728 [ms] (mean, across all concurrent requests)
Transfer rate:          1.05 [Kbytes/sec] received

...

Percentage of the requests served within a certain time (ms)
  50%   3755
  66%   3804
  75%   3818
  80%   3825
  90%   3845
  95%   3858
  98%   3874
  99%   3875
 100%   4225 (longest request)

From this output, we see that we’re only managing to serve about 5 requests per second and that the average request takes just under 4 seconds round trip.

In a real world example, we could be doing lots of work in many functions on behalf of a user request but even in our simple example, time could be lost compiling regular expressions, generating random salts, generating unique hashes from user passwords, or inside the Express framework itself.

Since we ran our application using the –prof option, a tick file was generated in the same directory as your local run of the application. It should have the form isolate-0xnnnnnnnnnnnn-v8.log (where n is a digit).

In order to make sense of this file, we need to use the tick processor bundled with the Node.js binary. To run the processor, use the –prof-process flag:

node --prof-process isolate-0xnnnnnnnnnnnn-v8.log > processed.txt

Opening processed.txt in your favorite text editor will give you a few different types of information. The file is broken up into sections which are again broken up by language. First, we look at the summary section and see:

Summary Section

This tells us that 97% of all samples gathered occurred in C++ code and that when viewing other sections of the processed output we should pay most attention to work being done in C++ (as opposed to JavaScript).

With this in mind, we next find the [C++] section which contains information about which C++ functions are taking the most CPU time and see:

 [C++]:
   ticks  total  nonlib   name
  19557   51.8%   52.9%  node::crypto::PBKDF2(v8::FunctionCallbackInfo const&)
   4510   11.9%   12.2%  _sha1_block_data_order
   3165    8.4%    8.6%  _malloc_zone_malloc

We see that the top 3 entries account for 72.1% of CPU time taken by the program. From this output, we immediately see that at least 51.8% of CPU time is taken up by a function called PBKDF2 which corresponds to our hash generation from a user’s password.

However, it may not be immediately obvious how the lower two entries factor into our application (or if it is we will pretend otherwise for the sake of example).

To better understand the relationship between these functions, we will next look at the [Bottom up (heavy) profile] section which provides information about the primary callers of each function. Examining this section, we find:

 ticks parent  name
  19557   51.8%  node::crypto::PBKDF2(v8::FunctionCallbackInfo const&)
  19557  100.0%    v8::internal::Builtins::~Builtins()
  19557  100.0%      LazyCompile: ~pbkdf2 crypto.js:557:16

   4510   11.9%  _sha1_block_data_order
   4510  100.0%    LazyCompile: *pbkdf2 crypto.js:557:16
   4510  100.0%      LazyCompile: *exports.pbkdf2Sync crypto.js:552:30

   3165    8.4%  _malloc_zone_malloc
   3161   99.9%    LazyCompile: *pbkdf2 crypto.js:557:16
   3161  100.0%      LazyCompile: *exports.pbkdf2Sync crypto.js:552:30

Parsing this section takes a little more work than the raw tick counts above. Within each of the “call stacks” above, the percentage in the parent column tells you the percentage of samples for which the function in the row above was called by the function in the current row.

For example, in the middle “call stack” above for sha1block_data_order , we see that _sha1_block_data_order occurred in 11.9% of samples, which we knew from the raw counts above.

However, here, we can also tell that it was always called by the pbkdf2 function inside the Node.js crypto module. We see that similarly, _malloc_zone_malloc was called almost exclusively by the same pbkdf2 function.

Thus, using the information in this view, we can tell that our hash computation from the user’s password accounts not only for the 51.8% from above but also for all CPU time in the top 3 most sampled functions since the calls to _sha1_block_data_order and _malloc_zone_malloc were made on behalf of the pbkdf2 function.

At this point, it is very clear that the password based hash generation should be the target of our optimization. Thankfully, you’ve fully internalized the benefits of asynchronous programming and you realize that the work to generate a hash from the user’s password is being done in a synchronous way and thus tying down the event loop. This prevents us from working on other incoming requests while computing a hash.

To remedy this issue, you make a small modification to the above handlers to use the asynchronous version of the pbkdf2 function:

app.get('/auth', (req, res) => {
  let username = req.query.username || '';
  const password = req.query.password || '';

  username = username.replace(/[[email protected]#$%^&*]/g, '');

  if (!username || !password || !users[username]) {
    return res.sendStatus(400);
  }

  crypto.pbkdf2(password, users[username].salt, 10000, 512, (err, hash) => {
    if (users[username].hash.toString() === hash.toString()) {
      res.sendStatus(200);
    } else {
      res.sendStatus(401);
    }
  });
});

A new run of the ab benchmark above with the asynchronous version of your app yields:

Concurrency Level:      20
Time taken for tests:   12.846 seconds
Complete requests:      250
Failed requests:        0
Keep-Alive requests:    250
Total transferred:      50250 bytes
HTML transferred:       500 bytes
Requests per second:    19.46 [#/sec] (mean)
Time per request:       1027.689 [ms] (mean)
Time per request:       51.384 [ms] (mean, across all concurrent requests)
Transfer rate:          3.82 [Kbytes/sec] received

...

Percentage of the requests served within a certain time (ms)
  50%   1018
  66%   1035
  75%   1041
  80%   1043
  90%   1049
  95%   1063
  98%   1070
  99%   1071
 100%   1079 (longest request)

Your app is now serving about 20 requests per second, roughly 4 times more than it was with the synchronous hash generation. Additionally, the average latency is down from the 4 seconds before to just over 1 second.

Hopefully, through the performance investigation of this (admittedly contrived) example, you’ve seen how the V8 tick processor can help you gain a better understanding of the performance of your Node.js applications.

Creating a Node.js web app

How to create a simple web application in Node.js.

First, create a new directory where all the files would live. In this directory create a package.json file that describes your app and its dependencies:

{
  "name": "docker_web_app",
  "version": "1.0.0",
  "description": "Node.js on Docker",
  "author": "First Last <[email protected]>",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.16.1"
  }
}

With your new package.json file, run npm install. If you are using npm version 5 or later, this will generate a package-lock.json file which will be copied to your Docker image.

Then, create a server.js file that defines a web app using the Express.js framework:

'use strict';

const express = require('express');

// Constants
const PORT = 8080;
const HOST = '0.0.0.0';

// App
const app = express();
app.get('/', (req, res) => {
  res.send('Hello world\n');
});

app.listen(PORT, HOST);
console.log(`Running on http://${HOST}:${PORT}`);

View the rest of the guide to Creating a Dockerfile.


Migrate to safe Buffer constructor methods

The Buffer() and new Buffer() constructors are not recommended for use due to security and usability concerns. Please use the new Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() construction methods instead.

Finding problematic bits of code using grep

Just run grep -nrE '[^a-zA-Z](Slow)?Buffer\s*\(' --exclude-dir node_modules.

It will find all the potentially unsafe places in your own code (with some considerably unlikely exceptions).

Finding problematic bits of code using Node.js 8

If you’re using Node.js ≥ 8.0.0 (which is recommended), Node.js exposes multiple options that help with finding the relevant pieces of code:

  • –trace-warnings will make Node.js show a stack trace for this warning and other warnings that are printed by Node.js.
  • –trace-deprecation does the same thing, but only for deprecation warnings.
  • –pending-deprecation will show more types of deprecation warnings. In particular, it will show the Buffer() deprecation warning, even on Node.js 8.

You can set these flags using environment variables:

$ export NODE_OPTIONS='--trace-warnings --pending-deprecation'
$ cat example.js
'use strict';
const foo = new Buffer('foo');
$ node example.js
(node:7147) [DEP0005] DeprecationWarning: The Buffer() and new Buffer() constructors are not recommended for use due to security and usability concerns. Please use the new Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() construction methods instead.
at showFlaggedDeprecation (buffer.js:127:13)
at new Buffer (buffer.js:148:3)
at Object. (/path/to/example.js:2:13)
[... more stack trace lines ...]

Node.js API Reference Documentation

The API reference documentation provides detailed information about a function or object in Node.js.

Node.js core concepts

Read More Guides

Learn more topics regarding Front-End Web Development, User Experience Design, and Industry-related Technology topics.

Also learn tips and tricks you can try for yourself, like learning how to create your own free CDN.

View our post on LinkedIn

About Node.js®

As an asynchronous event driven JavaScript runtime, Node is designed to build scalable network applications. In the following "hello world" example, many connections can be handled concurrently. Upon each connection the callback is fired, but if there is no work to be done, Node will sleep.

Node.js Docs

How to use Visual Studio Code

How to use Visual Studio Code

Visual Studio Code is completely Open Source, and costs no money to use. It has become my favorite editor, over Atom and Sublime Text.

Table of Contents Learn VS Code
Also, Microsoft releases an update every month to ensure quality.

How to Use Visual Studio Code Guide

Download Visual Studio Code Once you’ve completed the download, you should see the welcome screen image featured below.

Visual Studio Code Welcome Screen

Welcome Screen - Visual Studio Code The 5 icons on the left toolbar give you access to:

File Explorer

File Explorer Press the “Open Folder” button in the sidebar, or the Open folder… link in the Welcome page. Both will trigger the file picker view. Choose one folder where you have source code, or even just text files, and open it.

VS Code will show that folder content in your view:

Opened Folder On the right hand side, the empty view shows some commands to perform some quick operations, and their keyboard shortcut. If you select a file on the left, that file will open on the main panel: Files List Once you start editing it, you’ll notice a dot will appear next to the file name in the tab, and in the sidebar as well: Editing File Pressing CMD+P will show you a quick file picker to easily move in files on large projects: File Picker You can hide the sidebar that hosts the file using the shortcut CMD+B.
Note: This is using Mac Keyboard Shortcuts
View Visual Studio Code Shortcuts
The second icon in the toolbar is “Search”. Clicking it shows the search interface: Search You can click the icons to make the search case sensitive, to match whole words (not substrings), and to use a regular expression for the search string. To perform the search, press enter. Clicking the ▷ symbol on the left enables the search and replace tool. Clicking the 3 dots shows a panel that lets you just include some specific kind of files, and exclude other files: Search Replace

Source Control

The Source Control tab is enabled by clicking the third icon in the toolbar. Source Control

Git & Visual Studio Code

Visual Studio Code includes integration with Git out of the box. In this case the folder we opened does not have source control initialized. Clicking the first icon on top, with the Git logo, allows us to initialize the Git repository: git-repo-initialized The U beside each file means that it’s been updated since the last commit (since we never did a commit in the first place, all files are updated). Create the first commit by writing a text message and pressing Cmd-Enter, or clicking the ✔︎ icon on top. First Commit I usually set this to automatically stage the changes when I commit them. The 3 dots icon, when clicked, offers lots of options for interacting with Git: Git Options
Git Repo Initialized
Git Repo Initialized

Debugger

The fourth icon in the toolbar opens the JavaScript debugger. This deserves an article on its own. In the meantime view out the official docs.

Extensions

The fifth icon brings us to extensions. Visual Studio Code - 15 Awesome Extensions Extensions are one great feature of VS Code. They can provide unlimited value that you’ll definitely end up using many of them. I have many extensions installed. Remember that every extension you install is going to somewhat impact the performance of your editor. You can disable an extension you install, and enable only when you need it. You can also disable an extension for a specific workspace (we’ll talk about work workspaces later). For example, you don’t want to enable the JavaScript extensions in a Go project. There is a list of recommended extensions, which include all the most popular tools. Recommended Extensions If you need to edit markdown files for something like Github, VS Code automatically suggests the MarkdownLint extension, which provides linting and syntax checking for Markdown files. As an example, let’s install it. First, we’ll inspect the number of views. It’s 1.2 million – ton! And the reviews are positive (4.5⁄5). Clicking the extension name opens the details to the right. Extension Details Pressing the green Install button starts the installation process, which is straightforward. It does everything for you, and you just need to click the “Reload” button to activate it, which effectively reboots the editor window. Done! Let’s test it by creating a markdown file with an error, like a missing alt attribute on an image. It successfully tells us so: Markdown Link Down below we introduce some popular extensions you don’t want to ignore, and some of the extensions that I use frequently.

The Terminal

VS Code has an integrated terminal. You can activate it from the menu View ➤ Integrated Terminal, or using CMD+\` and it’ll open with your default shell. Terminal This is very convenient because in modern web development you almost always have some npm or yarn process running in the background. You can create more than one terminal tab, and show them one next to the other, and also stack them to the right rather than in the bottom of the window: Multiple Terminals

The Command Palette

The Command Palette is an extremely very powerful tool in your arsenal. You can enable it by clicking View ➤ Command Palette, or using CMD+SHIFT+P A modal window will appear at the top, offering you various options, depending on which plugins you have installed, and which commands you used last.

Common operations to perform are:

  • Extensions: Install Extensions
  • Preferences: Color Theme to change the color theme (I prefer a darker theme)
  • Format Document – which formats code automatically
  • Run Code – which is provided by Code Runner, and executes the highlighted lines of JavaScript
you can activate any of those by starting typing, and the autocomplete functionality will show you the one you want. Remember when you typed CMD+P to see the list of files, before? That’s a shortcut to a specific feature of the Command Palette. Here are others:
  • Ctrl-Shift-Tab shows you the active files
  • Ctrl-G opens the command palette to let you enter a line number to go to
  • CMD+SHIFT+Oshows the list of symbols found in the current file
What symbols are is dependent on the file type. In JavaScript, those might be classes or functions. In Markdown, section titles.

Themes

You can switch the color theme used by clicking CMD-k + CMD-t, or by invoking the Preferences: Color Theme command. This will display the list of themes installed: Light Theme Visual Studio you can click one, or move with the keyboard, and VS Code will show you a preview. Click enter to apply the theme:

Customization

The Theme is just one customization you can make. Sidebar icons that are assigned to a file are also a big part of a great user experience. You can change those by going to Preferences ➤ File Icon Theme. The Ayu theme comes with its own icons theme, which perfectly matches the theme colors: All the customizations we’ve made so far, the theme and the icon theme, are saved to the user preferences. Go to Preferences ➤ Settings (also reachable via CMD-,) to see them: Visual Studio Code Settings The view shows the default settings on the left, for an easy reference, and the overridden settings on the right. You can see the name of the theme and the icon theme we set up, in workbench.colorTheme and workbench.iconTheme. I zoomed in using CMD-+, and this setting was saved as well to window.zoomLevel, so the next time VS Code starts up, it remembers my choice for zooming. You can decide to apply some setting globally, in User Settings, or relative to a workspace, in Workspace settings. Most of the times these settings are automatically added by extensions or by the VS Code itself, but in some cases you’ll directly edit them in this place.

Workspaces

User settings can be overridden in Workspace settings. They take precedence, and are useful for example when you use a project that has linting rules different from all the other projects you use, and you don’t want to edit your favorite settings just for it. You create a workspace from an existing project by clicking the File ➤ Save Workspace as… menu. The currently opened folder will be enabled as the workspace main folder. The next time you open VS code, or you switch project, instead of opening a folder, you open a workspace, and that will automatically open the folder containing your code, and it will remember all the settings you set specific to that workspace. In addition to having workspace-level settings, you can disable extensions for a specific workspace. You can just work with folders until you have a specific reason for wanting a workspace. One good reason is the ability to have multiple, separate root folders. You can use the File ➤ Add Folder to Workspace to add a new root folder, which can be located anywhere in the filesystem, but will be shown along with the other existing folder you had.

Editing

How to edit in Visual Studio Code shown below.

Errors & Warnings

Settings When you open a file you will see on the right a bar with some colors. Those colors indicate some issues in your code. For example here’s what I see right now:

Visual Studio Command Line

When you install VS Code, the code command is available globally in your command line. This is very useful to start the editor and open a new window with the content of the current folder, with code..
-n
will create a new window. A useful thing that’s not always knows is that VS Code can quickly show the diff between two files, with code
--diff file1.js file2.js.

Solving High Usage CPU Issues

When running into an issue of high CPU usage, and spinning fans, with a project with lots of files under node_modules.. We’ll include this configuration and things will be normal again:
 "files.useExperimentalFileWatcher": true,
  "files.exclude": {
    "/.git": true,
    "/.DS_Store": true,
    "/node_modules": true,
    "/node_modules/": true
  },
  "search.exclude": {
    "/node_modules": true
  },
  "files.watcherExclude": {
    "/node_modules/": true
  },

Visual Studio Code | 15 Useful Extensions

Visual Studio Code | 15 Useful Extensions

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. VS Code is free and available on Linux, macOS, and Windows.

Visual Studio Code

Visual Studio Code – 15 Extensions

We’ve provided a list of 15 awesome Visual Studio Code extensions that’ll make life easier for developers.

VS Code Editor

Pull Requests

The Github Pull Requests extension from Github allows you to view and interact with your Pull Requests directly from within VS Code.

Angular 7 Snippets

This extension offers TypeScript and HTML snippets and code examples for Angular 2,4,5,6 & 7.

Slack Chat

The Slack Chat extension for VS Code embeds a chat window in the editor. This is useful for chatting during Live Share sessions. It also has the added benefit of being able to start a Live Share session with the “/live share” command. Slack Extension

Share Your Localhost

VS Code Live Share enables you to share any TCP process on your computer with people who are currently connected to your Live Share session. Choose “Share Server” from the Command Palette and select a port to share.

Deployment

App Service is Azure’s Platform as a Service (PaaS) that let’s you deploy and scale web, mobile, and API apps. Use the Azure App Service extension for VS Code to quickly create, manage, and deploy your websites.

Refactor To ES6

VS Code can refactor your JavaScript to ES6. It can update imports, convert prototype functions to ES6 classes and more. Anytime you see an ellipsis, you may be able to refactor that code. Check the lightbulb to find out.

CSS Preview

VS Code has built-in support for editing style sheets in CSS .css, SCSS .scss and Less .less. In addition, you can install an extension for greater functionality.

Preview CSS

Toggle Activity Bar

This extension can create command sequence as one command and bind a key. Also pass arguments to commands by defining a command sequence with args parameter.

Activity Bar

To start using breadcrumbs, enable it with the View > Toggle Breadcrumbs command or via the breadcrumbs.enabled setting.

View Breadcrumbs

NPM Script Explorer

View and run all of the available npm scripts in your package.json file by enabling the NPM Scripts viewlet. Add the following line to your User Settings file:

"npm.enableScriptExplorer": true

Preview Images

The Image Preview Extension shows image preview in the gutter and on hover. Additionally, the Image Preview Extension provides inline previews for images included HTML file types.

View Extension

Cosmos DB

The Cosmos DB extension for VS Code puts Mongo DB database access right inside of the editor.

Bracket Pair Colorizer

The Bracket Pair Colorizer extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.

Vetur

The Vetur extension is a Vue tooling for VS Code, powered by vue-language-server.

ESLint

The ESLint extension uses the ESLint library installed in the opened workspace folder. If the folder doesn’t provide one the extension looks for a global install version.


Visual Studio Code – Toggle Sidebar Focus

Use ⌃/⌘+ 0 to set focus to the Sidebar and ⌃/⌘+ 1 to set it to the editor.

On a Mac, you can use ⌃/⌘+ ⇣ to select a file in the Sidebar Explorer with your keyboard, while on Windows, simply press the enter key.

macOS Shortcuts

Visual Studio Code CSS Preview

How to Create Your Own Free Content Delivery Network (CDN)

How to Create Your Own Free Content Delivery Network (CDN)

Learn how to Create your own free Content Delivery Network (CDN) to host CSS and JavaScript files easily with Cloudinary.


Follow these steps I’ve outlined below to create your own blazing fast CDN.

 

Image CDN Cloudinary and WordPress.
Image CDN – Cloudinary and WordPress CDN Tutorial.

What is a Content Delivery Network?

A content delivery network, or content distribution network is a geographically distributed network of proxy servers and their data centers. The goal is to distribute service spatially relative to end-users to provide high availability and high performance.

In other words, CDN’s improve site speed by reducing the amount of bandwith on a server, increasing the performance of your website.


How to setup your own free Cloudinary CDN

Test my newly created link below. Speed Kills.

https://res.cloudinary.com/ux-ui-technologies/raw/upload/v1543467854/omahacode.min.css 

To setup your Content delivery network, you must first create a free account with Cloudinary.

  1. Go to Cloudinary.com.
  2. Sign up for your free account.
  3. Locate your dashboard.
  4. Open your preferred text editor (Atom, Visual Studio Code, Sublime text).
  5. Create a new .css file in your desired text editor (I recommend minifying your CSS).
  6. Navigate to the Media Library tab within Cloudinary.
  7. Upload your new .css file.
  8. Copy the URL of your new .css file (i.e., https://res.cloudinary.com/ux-ui-technologies/raw/upload/v1543467854/omahacode.min.css.)
  9. Insert your new CDN url in the top ‘head’ area of your website.

<!doctype html>

Locate your Cloudinary Dashboard

After you’ve created an account, you’ll be able to view your Cloudinary dashboard.

 

View your Cloudinary Dashboard
View your Cloudinary Dashboard

Upload your files into Cloudinary

Now that you’ve create a new CSS or JS file with your favorite code editor, upload the new file into Cloudinary.

Cloudinary Upload Image
Uploading your files into Cloudinary Media

Copy the URL of Your Newly Uploaded File

Now, Select the link icon and copy this to add as a stylesheet.

Copy Media File Cloudinary
Click on the link icon and copy your CDN url

Insert the url within the Section as a Stylesheet

Add the new url as a stylesheet:

Cloudinary Media Expert - Neil Humphrey of Omaha

Omaha Code Loads in under 2.5 seconds

View how fast OmahaCode.com loads.

Omaha Code Web Page Test Score

Learn More

10 Best Free WordPress Plugins

WordPress Plugins: I’ve compiled a list of my favorite free plugins. In no particular order, here are the plugins that I use on a daily basis.

Free Plugins


Best WordPress Plugins

My favorite free plugins that are essential for your next website are:

  1. Yoast SEO
  2. WP-Super Cache
  3. AMP For WP
  4. Imagify
  5. Contact 7 Forms
  6. Child Theme Configurator
  7. Head & Footer Code
  8. Schema Review
  9. UpdraftPlus WordPress Backup Plugin
  10. Markup (JSON-LD)

Yoast SEO

Yoast SEO

My favorite plugin to boost Search Engine Optimization is Yoast SEO; is the most complete WordPress SEO plugin. It handles the technical optimization of your site and assists with optimizing your content.

WP-Super Cache

WP-Super Cache

This caching plugin generates static html files from your dynamic WordPress blog. After a html file is generated your web server will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts

AMP for WP

AMP For WP

Accelerated Mobile Pages automatically adds Accelerated Mobile Pages (Google AMP Project) functionality to your WordPress site. AMP makes your website faster for Mobile visitors.

Imagify

Imagify

This image compression plugin speeds up your website by reducing the size of your images without losing quality.

Contact 7 Forms

Contact 7 Forms

The Contact 7 form plugin manages multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup.

Child Theme Configurator

Child Theme Configurator

Want to create a Child Theme? This is a fast and easy to use utility that allows you to analyze any theme for common problems, create a child theme and customize it beyond the options of the Customizer.

Head & Footer Code

Header and Footer Code

Easily add code to the header and footer of your website. This plugin allows developers to add code in each page, blog post, or custom page.

Schema Review

Schema Review

Leave reviews on your blog posts – Schema Review is an extension for the Schema plugin, it extends Schema functionality by adding schema.org review and rating Structured Data with functionality for Editors and Authors.

UpdraftPlus WordPress Backup Plugin

Updraft Plugin

Backup into the cloud directly to Dropbox, Google Drive, Amazon S3 (or compatible), UpdraftVault, Rackspace Cloud, FTP, DreamObjects, Openstack Swift, and email.

Markup (JSON-LD)

Markup JSON-LD

The Markup (JSON-LD) plugin allows you to include schema.org JSON-LD syntax markup on your website.

How to Make a Great Github Profile

How to Make A Great Github Profile

How to make an awesome github profile for developers who want to show off their work.

A strong Github profile is one thing that can work in your favor when applying for a job.

Table of Contents

Github profile

Github Profile

Have 2-4 reasonably complete projects that you can show off your skill set, along with experiments or tutorials you have done. Have a reasonably regular commit frequency (two a week on average is more than enough – don’t worry about missing a few weeks every now and then but the more activity the better overall). Bonus points for providing meaningful contributions to other projects.
How to Make a Great Github Profile.
How to Make a Great Github Profile.

README.md

Inside one of your flagship projects ensure the code is clean and readable, documentations such as a README helps a lot. Good commit messages that show your project evolving helps show you know how to use git effectively. Live demos can also help (Netlify, Firebase or Github Pages are good hosting for static sites). Additionally, the better a project you have and the more proud of them you are then the better it looks. A couple of good projects are much better then lots of incomplete or unfinished projects. However, presence of these do not detract from the profile, only the lack of a good one does – so definitely put more effort into that, but don’t be afraid to include your half complete experiments if you have any.

Github Projects

Projects will look better to an employer if they are similar to the tech stack they use, but don’t worry too much about matching it exactly. Additionally, If you want to build a project then try to use/learn the stack for the companies you are applying to but don’t go out of your way to squeeze in all the tech they use. It’s is far better to use things fit for purpose than match what they want.

Github Profile Overview

In conclusion, the most important aspect is that you should be proud to show it off and enjoy working on the projects it contains. This will encourage you to contribute more to it which looks better overall.

Great Github Profiles

Here’s a list of developers with awesome Github profiles.

What is Netlify?

Netlify Netlify is an all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS. And that’s just the beginning.

What is firebase?

Google Firebase Firebase is Google’s mobile platform that helps you quickly develop high-quality apps and grow your business.

About Omaha Code

My First Progressive Web App

My first Progressive Web app is ebitcoins.app. The .app domain provides Security, Discoverability, Name Recognition, and SEO.

Progressive Web App Score

I created my first Progressive Web App to deliver an amazing User Experience, but also to test my skills as a UX/UI Designer and Front-end Developer.

PWA Ebitcoins app

PWA Score


Progressive Web App

My PWA score was provided by Lighthouse. Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

SEO – Progressive Web App

I earned an SEO score of 100/100 according to Google Lighthouse. My PWA is mobile friendly, has valid Structured Data, and is indexed by Google.

SEO PWA
Progressive Web App – Search Engine Optimization.

Accessibility – Progressive Web App

These checks highlight opportunities to improve the accessibility of a web app. Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.

  • Elements Have Discernible Names
  • Elements Describe Contents Well
  • Color Contrast Is Satisfactory
  • Elements Are Well Structured
  • Page Specifies Valid Language
  • Meta Tags Used Properly

Best Practices – Progressive Web App

Google Lighthouse provided a list of the best practices that were used when creating ebitcoins.app.

 


What are Progressive Web Apps?

Progressive Web Apps (PWAs) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications.  According to Google, Progressive Web Applications are user experiences that have the reach of the web, and are:

  • Reliable
  • Fast
  • Engaging

Reliable

When launched from the user’s home screen, service workers enable a Progressive Web App to load instantly, regardless of the network state.

Additionally, a service worker, written in JavaScript, is like a client-side proxy and puts you in control of the cache and how to respond to resource requests. By pre-caching key resources you can eliminate the dependence on the network, ensuring an instant and reliable experience for your users.

Fast

53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no janky scrolling or slow-to-respond interfaces.

Engaging

Progressive Web Apps are installable and live on the user’s home screen, without the need for an app store. They offer an immersive full screen experience with help from a web app manifest file and can even re-engage users with web push notifications.

Additionally, The Web App Manifest allows you to control how your app appears and how it’s launched. You can specify home screen icons, the page to load when the app is launched, screen orientation, and even whether or not to show the browser chrome.

Progressive Web App

Why build a Progressive Web App?

In addition, Building a high-quality Progressive Web App has substantial positive benefits, making it easy to delight your users, grow engagement and increase conversions.

Some additional benefits of PWAs are:

  • Worthy of being on the home screen
  • Work reliably, no matter the network conditions
  • Increased engagement
  • Improved conversions

 

Examples of Progressive Web Apps

Lastly, some great examples of Progressive Web Apps (PWAs) include:


Why HTTPS Matters

You should always protect all of your websites with HTTPS, even if they don’t handle sensitive communications.

Additionally, HTTPS helps prevent intruders from tampering with the communications between your websites and your users’ browsers. Intruders include intentionally malicious attackers, and legitimate but intrusive companies, such as ISPs or hotels that inject ads into pages.

HTTPS is the future of the web

Powerful, new web platform features, such as taking pictures or recording audio with getUserMedia(), enabling offline app experiences with service workers, or building progressive web apps, require explicit permission from the user before executing.


Passive Listeners

Setting the passive option on your touch and wheel event listeners can improve scrolling performance


Avoids document.write()

One known cause of poor performance is the use of document.write() inside pages, specifically those uses that inject scripts. As innocuous as the following looks, it can cause real issues for users.


Cross-Origin Resource Sharing (CORS)

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.

Furthermore, A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.


Avoids Requesting The Geolocation Permission On Page Load

Users are mistrustful of or confused by pages that automatically request their location on page load. Rather than automatically requesting a user’s location on page load, tie the request to a user’s gesture, such as a tapping a “Find Stores Near Me” button.

In conclusion, make sure that the gesture clearly and explicitly expresses the need for the user’s location.

Learn More


HTML doctype

The <!DOCTYPE html> declaration is used to inform a website visitor’s browser that the document being rendered is an HTML document.

While not actually an HTML element itself, every HTML document should being with a DOCTYPE declaration to be compliant with HTML standards.


Detects the Javascript libraries

The Library Detector extension discovers which Javascript libraries are being utilized on webpages you visit and displays their icons, along with a link to the library’s homepage, in the address bar.


Avoids Requesting The Notification Permission On Page Load

As explained in What Makes a Good Notification, good notifications are timely, relevant, and precise. If your page asks for permission to send notifications on page load, those notifications may not be relevant to your users or precise to their needs.

Front-End Web Developer Skills & Job Titles in 2018

Front-End Web Developer Skills

Front-End Web Developer Skills & Job Titles in 2018: A front-end developer is typically only on a team that designs and develops web sites, web applications, or native applications running from web technologies.

Let's Go

Front-End Web Developer Skills in 2019

Front-end Web Developer Skills

Front-End Web Developer Job Titles in 2018

The common, or most used (i.e., generic), title for a front-end developer is, “front-end developer” or “front-end engineer“.


Front-End Developer

A front-end web developer describes a developer who is skilled to some degree at HTML, CSS, DOM, and JavaScript and implementing these technologies on the web platform.

Front-end Web Developer


Front-End Engineer (JavaScript Developer or Full-stack JavaScript Developer)

The job title given to a developer who comes from a computer science, engineering, background and is using these skills to work with front-end technologies. This role typically requires a computer science degree and years of software development experience.

Additionally, the when “JavaScript Application” is included in the job title, this will denote that the developer should be an advanced JavaScript developer possessing advanced programming, software development, and application development skills (i.e has years of experience building front-end applications).


Front-End Testing/QA

When “Testing” or “QA” is included in the job title, this will denote that the developer has extensive experience testing and managing software that involves unit testing, functional testing, user testing, and A/B testing.


Front-End Dev. Ops

Front-end Dev Ops Description

When “DevOps” is included in the job title, this will denote that the developer has extensive experience with software development practices pertaining to collaboration, integration, deployment, automation, and measurement.


Front-End Accessibility Expert

Web Accessibility

When the word “Accessibility” is included in the job title, this will denote that the developer has extensive experience crafting front-end technologies that support accessibility requirements and standards.


Front-End SEO Expert

Search engine optimization involves making small modifications to parts of your website.

When viewed individually, these changes might seem like incremental improvements, but when combined with other optimizations, they could have a noticeable impact on your site’s user experience and performance in organic search results.

Search Engine Optimization Results

When the word “SEO” is included in the job title, this will denote that the developer has extensive experience crafting front-end technologies towards an SEO strategy.


Web/Front-End User Interface (aka UI) Developer/Engineer

When the word “Interface” or “UI” is included in the job title, this will denote that the developer should posses interaction design skills in addition to front-end developer skills or front-end engineering skills.


Front-End Web Designer

When the word “Designer” is included in the job title, this will denote that the designer will posses front-end skills (i.e., HTML & CSS) but also professional design (Visual Design and Interaction Design) skills.


Front-End Web Development Skills

Here’s a list of skills that Front-end Developers and Software Engineers should be familiar with.

  • Progressive Web Apps (PWA)
  • Content Management Systems (CMS)
  • Node.js
  • Cross-Browser Testing
  • Cross-Platform Testing
  • Unit Testing
  • Cross-Device Testing
  • Accessibility / WAI-ARIA
  • Search Engine Optimization (aka SEO)
  • Interaction or User Interface Design
  • User Experience
  • Usability
  • E-commerce Systems
  • Portal Systems
  • Wire-framing
  • Prototyping
  • CSS Layout / Grids
  • DOM Manipulation (e.g., jQuery)
  • Mobile Web Performance
  • Load Testing
  • Performance Testing
  • Progressive Enhancement / Graceful Degradation
  • Version Control (e.g., GIT)
  • MVC / MVVM / MV*
  • Functional Programming
  • Data Formats (e.g., JSON, XML)
  • Data APIs (e.g Restful API)
  • Web Font Embedding
  • Scalable Vector Graphics (aka SVG)
  • Regular Expressions
  • Content Strategy
  • Microdata / Microformats
  • Task Runners, Build Tools, Process Automation Tools
  • Responsive Web Design
  • Object-Oriented Programming
  • Application Architecture
  • Modules
  • Dependency Managers
  • Package Managers
  • JavaScript Animation
  • CSS Animation
  • Charts / Graphs
  • UI Widgets
  • Code Quality Testing
  • Code Coverage Testing
  • Code Complexity Analysis
  • Integration Testing
  • Command Line / CLI
  • Templating Strategies
  • Templating Engines
  • Single Page Applications
  • XHR Requests (aka AJAX)
  • Web/Browser Security
  • HTML Semantics
  • Browser Developer Tools

HTML

Hypertext Markup Language, or HTML, was primarily designed to provide a means of creating structured scientific documents.

HTML can embed scripting languages such as PHP or JavaScript to affect the behavior and content of web pages. The World Wide Web Consortium (W3C) maintains both the HTML and CSS standards.

Learn HTML5

To build websites, you should know about HTML — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.


CSS

Cascading Style Sheets, also known as CSS, is a declarative language that controls how webpages look in the browser.

The browser applies CSS style declarations to selected elements to display them properly. A style declaration contains the properties and their values, which determine how a webpage looks.

CSS
What is CSS?

CSS is one of the three core Web technologies, along with HTML and JavaScript. CSS usually styles HTML elements, but can be also used with other markup languages like SVG or XML.


JavaScript

(JS) or JavaScript, is a lightweight interpreted or JIT-compiled programming language with first-class functions.

While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat.

Vue JavaScript

JavaScript runs on the client side of the web, which can be used to design / program how the web pages behave on the occurrence of an event. JavaScript is an easy to learn and also powerful scripting language, widely used for controlling web page behavior.


Responsive Web Design

The use of mobile devices to surf the web is growing at an astronomical pace, but unfortunately much of the web isn’t optimized for those mobile devices.

Mobile devices are often constrained by display size and require a different approach to how content is laid out on the screen.

Responsive web design is made up from 3 basic ingredients.

Flexbox Grid will allow you to quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

Responsive Web Design - Google

A multitude of different screen sizes exist across phones, “phablets,” tablets, desktops, game consoles, TVs, and even wearables. Screen sizes are always changing, so it’s important that your site can adapt to any screen size, today or in the future.


API

An application programming interface (API) is a set of tools, definitions, and protocols for building application software. It lets your product or service communicate with other products and services without having to know how they’re implemented.

API
Application Programming Interface

Technically, API stands for Application Programming Interface. APIs as a way to serve your customers. At some point or another, most large companies have built APIs for their customers, or for internal use.


Curated List of Links for Front-end Web DevelopersGithub Open Source Software Developers

This is my open source project for Front-End web developers and Software Engineers to view and add the top resources for developers in 2018.


Progressive Web Apps

Progressive Web Apps are user experiences that have the reach of the web, and are:

  • Reliable – Load instantly and never show the downasaur, even in uncertain network conditions.
  • Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • Engaging – Feel like a natural app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.

Desktop Progressive Web Apps

Desktop progressive web apps can be ‘installed’ on the user’s device much like native apps. They’re fast. Feel integrated because they launched in the same way as other apps, and run in an app window, without an address bar or tabs.

Desktop Progressive Web Apps

They’re reliable because service workers can cache all of the assets they need to run. And they create an engaging experience for users.

Progressive Web App Checklist

Progressive Web Apps (PWA) are reliable, fast, and engaging, although there are many things that can take a PWA from a baseline to exemplary experience.

To help teams create the best possible experiences we’ve put together a checklist which breaks down all the things we think it takes to be a Baseline PWA, and how to take that a step further with an Exemplary PWA by providing a more meaningful offline experience, reaching interactive even faster and taking care of many more important details.


About Me

I’m a professional Front-End Web Developer & UX/UI Designer in Omaha, Nebraska.