In the old days, you could get away with fetching an image, assigning the file to the src attribute of your image and then proudly display your Javascript chops to the rest of the world. The times are changing, young padawan. Now you have to do several things. 1. Fetch the image using the fetch API 2. If the response was successful convert it to a BLOB using the method on the response object. If the response was not ok, throw an error and pass to the catch block 3. Create a URL from the block using createObjectUrlhttps://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL 4. Create...
One important thing that Windows users should know. There is a reason why we went through all the work of installing PowerShell and WSL: Interoperability. WSL and Powershell were designed to work together and are continuously improved on the interoperability front. This can take one the following ways: You can run Linux commands from Windows prepending the wsl command to the command you want to run. The example below runs Ace installed via NPM on Linux. If this meets your needs, then you don't need to install Node on Windows. Running wsl node will take care of it when working...
Since we're working on the command line we also need to learn about what makes the Unix/Linux command line work. Globes There are times when we need to match commands against one or more files. It can be as simple as listing only files of a certain type or having the command run only on some files, not others. Unix-like shells like those on MacOS and WSL provide globs global or pattern matching to help you with the searches. I could go on for pages and pages about globs, but rather than do that I will give you some examples...
Node Node.jshttps://nodejs.org/en/ or just Node is a cross-platform Javascript interpreter built on the V8https://developers.google.com/v8/, the same Javascript interpreter that powers Google Chrome. Initially, Node was created to run Javascript on the server but it has also been used to create a lot of tools for use on personal computers. This is the side of Node that we'll concentrate on. In this section we'll look at the following aspects of Node: - Installing Node with NVM - Why I chose this method - Installing, removing and updating packages - Global install - Some examples of what you can do with Node...
Most Operating systems have ways to automate software installation, upgrade, management and configuration of the software on your computer with package managers. Package managers are designed to eliminate the need for manual installs and updates. This can be particularly useful for Linux and other Unix-like systems, typically consisting of hundreds or even tens of thousands of distinct software packages.\2\ We'll look at Homebrewhttps://brew.sh/ and apt-gethttps://itsfoss.com/apt-get-linux-guide/, their requirements and ecosystems, along with some basic commands to get you started. Homebrew and Cask Homebrew allows you access to a large ecosystem of Unix Software on your Mac. It is a Rubyhttps://www.ruby-lang.org/en/ application...
This series of posts intends to walk you through some basic concepts, activities and shell commands to take the fear and pain away from working with a text-based interface that links directly to the Operating System. In more formal terms: > A command-line interface is a means of interacting with a computer program where the user or client issues commands to the program in the form of successive lines of text command lines. A program which handles the interface is called a command language interpreter or shell. > > Wikipediahttps://en.wikipedia.org/wiki/Command-lineinterface So what does it mean? It's like an old style...
There are times when writing the same thing over and over again gets to be really tedious. Think of populating large bulleted lists, select statements and other repetitive elements. We've been able to do this for a while using libraries... We'll look at it handlebars.js and then we'll look at using the template tag built into the HTML specification. We'll also look at why we might want to keep working with libraries to support older browsers and browsers with incomplete support. The current way: Template Libraries When I first looked at Handlebars it appeared to be too much work for...
Using CSS Variables to create themes we should be able to create more than one and then switch between them. I've experimented with using multiple roots with different classes and then use javascript to switch the class of the HTML element to match the theme. I understand the theory but I had a little bit of a hard time understanding how to add/switch a class from the HTML element. Looking at code from @justmarkuphttps://justmarkup.com/log/2016/02/theme-switcher-using-css-custom-properties/ articlehttps://justmarkup.com/log/2016/02/theme-switcher-using-css-custom-properties/ helped clarify the idea. Initially, I had decided to use buttons to make the theme switcher but a select drop down menu looks better. We...
One of the best things about CSS variables is that they allow you to create themes for your content. Reviewing CSS Variables CSS variables or, more precisely, CSS Custom properties allow you to define reusable values for elements across your stylesheet. This is particularly good for consistency and ease of change, we only need to make one change and all the places where we use the variable will be changed automatically. Variables can be global, those defined in the :root pseudo-element equivalent to the HTML document and those specific to elements in the page. Defining The Core Theme The example...
MPEG-DASH is one way to create adaptive bitstream playback, but it's not the only one. In this post, we'll explore Apple's HLS HTML Live Streaminghttps://www.wikiwand.com/en/HTTPLiveStreaming a direct competitor for MPEG-DASH and see how to build a package ready for Video On Demand. I will use FFMPEG to encode the video as required in the HLS specification. This is the same tool that I've used to create videos with other codecs. HLS Creation: Single Rendition At WWDC 2017, Apple announced support for HEVC H265, letting you work with both types of streams in the same playlist. The technologies to implement HEVC...
