The idea behind local storagehttps://html.spec.whatwg.org/multipage/webstorage.htmlstorage also known as web storage is that we can save key/value pairs of data in the browser for later retrieval and use. A good example of where this may be useful is to set basic settings of an application and persist them between visits to the site. The feature is supported by all browsers except Opera Minihttps://caniuse.com/feat=namevalue-storage We'll look at the setting and retrieving values to local storage and how we can use them in making an application configuration consistent across visits to the page. How does it work? Although the API is widely supported...
As I begin working on layouts one of the things that started to beg for attention is how to size the text properly for it to be legible online as well as being pleasant to the eye when looking at the page. > These are notes, observations and learning points from books, websites and the work I've been doing for my layout experimentshttps://caraya.github.io/grid-experiments/ site. They also span a long time between writing so they may not read quite the same. The 62.5% system When I first started working on the web it was common to see the following CSS at...
As an undergraduate, I did fairly extensive work in early text-based virtual communities, particularly the way in which people interacted and communicated in text-based virtual realities. The research may color my vision of Duplex and other technologies that make it harder for people to know who they are speaking with. This makes the argument that we have the "right" to know that we're speaking to a 'bot harder to accept for me. Unless you know the person you're speaking with how can you really tell who are you communicating with? How do you know that the knowledge they claim is...
A lot of the projects that I work with use a fairly standard setup of tools and scripts. Rather than reinstall them every time and have to fix paths and install dependencies outside the Node ecosystem I've created a script that will perform the following actions: 1. Check if package.json exists. If it doesn't then create one with default values 2. Install packages explaining what it's doing when installing each group 3. Run an additional script that will create configuration files 4. Remove the .git directory and recreate it for the current directory This way I can initialize a new...
SetTimeout and SetInterval provide ways to schedule tasks to run at a future point in time. setTimeout allows you to schedule a task after a given interval. setInterval lets you run a task periodically with a given interval between runs. SetTimeout setTimeout takes two parameters: A string representing code to run and a number representing the time interval in milliseconds to wait before executing the code. In the following example, the browser will wait two seconds before executing the anonymous function and presenting the alert message. javascript let myGreeting = setTimeoutfunction { alert'Hello, Mr. Universe!'; }, 2000 We're not required...
When we write Javascript we normally do it synchronously, every instruction is executed one at a time in the order they appear in the script. The script will finish once the last instruction is executed. In the example below, we log three items to the console. javascript console.log'1'; console.log'2'; console.log'3'; We will always get the same result: 1 2 3. This works great for small pieces of code or scripts that don't produce output on the browser. But sooner rather than later you will want to work on larger scripts and you will find one of the first issues with...
There are times when it's good to have a sense of how long your code takes to execute. Maybe you're troubleshooting performance or you're concerned that parts of your code are not as fast as they could be. In the beginning, you could do something like this: javascript function myHeavyTask { for let i = 1; i
If you work with CSS in JS you will soon discover that all values CSS gives the JS parser are strings that you must parse to get the data you need to continue processing the styles. This is when you use the element.style.attribute syntax. javascript // Element styles. el.style.opacity = 0.3; typeof el.style.opacity === 'string' // Ugh. A string!? // Stylesheet rules. document.styleSheets0.cssRules0.style.opacity = 0.3; The CSS Typed Object Model Typed OM adds types, methods, and an object model to CSS values. Instead of strings, values are exposed as JavaScript objects to facilitate performant and sane manipulation of CSS. Instead...
> If we grow the language in these few ways \that allow extensibility\, then we will not need to grow it in a hundred other ways; the users can take on the rest of the task. Guy Steele, Growing a Languagehttp://www.cs.virginia.edu/evans/cs655/readings/steele.pdf, 1998 ACM OOPSLA CSS Houdini is a set of APIshttps://drafts.css-houdini.org/ under development by the CSS Working Grouphttps://www.w3.org/Style/CSS/ and the Technical Architecture Group to provide users with ways to extend CSS to match their needs. The extensibility language is usually JavaScript but some of these are written in pure CSS. To translate the tech speak: Houdini will provide the hooks...
> If you're working with modern evergreen browsers, classes are the preferred way to create reusable code. They work in all modern browsers according to caniuse.comhttps://caniuse.com/feat=es6-class out of the box. Prototypal inheritance will work if you need to support older browsers. Prototypal Inheritance Before ES6 we created reusable content using functions to create objects and attaching the methods to the object's prototypehttps://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Objectprototypes. This way every object that inherits from the object will also inherit the methods attached to the prototype. In the example below the Person has the following properties: first, last, age, gender, and interests. all these properties are...
