Until recently Javascript did not have a class system. This doesn't mean that we couldn't create reusable objects but that we had to work through hoops to make it work. Prototypal Inheritance: It's all about the prototype Early versions of Javascript until ES2015 used prototypal inheritance. We create a master object, inherit from the base object, and assign new properties to the object's prototype. In this example, Employee is the base objects with a few attributes. Other types of objects will inherit from this directly or indirectly. js function Employee { this.name = ''; this.dept = 'general'; } The next...
I started working on the web in 1994 and I've been privy to the evolution and complication of the web and its component technologies. The web was much simpler then, with a limited set of tags and little CSS and JavaScript that only changed the look of items on the page. If we wanted applications we had the option of Perl or C to create CGI script and roundtrips to the server for each request. We've improved considerably from those days to where the web is now. We have hundreds, if not thousands, of projects that we can learn from...
JavaScript gives us multiple ways to insert content into the DOM. One generic and simple way and a more flexible and complicated alternative. Inserting new elements: The simple version The simple way to insert content into an existing element is to use appendChildhttps://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild to insert the element after the existing children of the specified element We're using the following HTML element as the host of our new element. html In the JavaScript, we capture the container element in a variable and then create a button element. Next, we assign attributes to the button we just created. An id and the...
Most of the work I've done recently has been as inline SVG meaning that the SVG is inserted directly into the document; this has advantages and disadvantages. In this post we'll discuss why we would use SVG as images, what are the disadvantages and disadvantages and a possible fallback using the picturefillhttp://scottjehl.github.io/picturefill/ polyfill. SVG is a very powerful vector graphics format that can be used either as an inline element or as a format for images on web pages. Which one you use will depend on a few things: - What browsers do we need to support? - What are...
The web has always been a scrolling medium but there are reasons and motivations that will make people decide for one or the other. There is no perfect 'one-size-fits-all' solution and you will have to evaluate which solution works best for your project. In this post, we'll discuss the advantages and disadvantages of pagination and scrolling and suggest one combined solution that may work well as a generic solution when working outside of frameworks. In Pagination vs. Scrolling: The Great Website Debatehttps://thrivehive.com/pagination-vs-scrolling-great-website-debate/ ThriveHive presents the advantages and disadvantages of both pagination and scrolling for web sites. They come to the...
Addy Osmani posted a note on twitter about native lazy loadinghttps://addyosmani.com/blog/lazy-loading/ support that will, hopefully, appear in Chrome 75 canary builds as I write this. This is awesome and I hope that other browsers will implement this as a native feature but it introduces complexities that we need to evaluate before we implement this in development. Before we start Native lazy loading works for both images and iframes but it's behind two flags. Surprisingly neither of them is Experimental Web Platform features. Go into chrome://flags and enable the following flags if you want both elements to work with lazy loading:...
In addition to pointer events, we should also provide a way for keyboard-only users or those users who prefer keyboard navigation to access content. This is particularly important when using custom items like video players and others. We'll look at how to use UI events and Keyboard Event Codes to work with our content. keyboard shortcuts We can use keyboard events and the keyboard event code values to create shortcuts for our apps. In this example, also from the custom video player, we set up a keydown event in the window object to listen for key presses. When the key...
Having to code for touch, mouse and keyboard events is a pain. There has to be a way to make the code easier to work with events. The code will not be shorter we have to work around the lack of pointer event support in mobile Safari but it'll be easier to reason through and, in time, will become shorter when mobile Safari implements the API. In this post, we will discuss both pointer and keyboard events, how to use them together to provide a better user experience, and alternatives for browsers that don't support the API particularly Safari Pointer...
I was looking at Brad Frost's site to look at how he did the little circles at the top and bottom of the page. Hint: he does with a ton of SVG circles and some very interesting use of JavaScript to create the effect. When I saw the CSS code I came across multiple definitions for grids and that got me thinking, again, about automation and how to use CSS properties to make the code easier to work with. CSS properties and Houdini custom properties One of the problems about regular CSS variables also known as CSS custom properties is...
We saw how to create a working templating system using one of many available templating engine Nunjuckshttps://mozilla.github.io/nunjucks/ from Mozilla. But it takes a while to get that first step where the template building works as intended. There are platforms that automate the process. The one that has been on my radar for a while, and was recommended to me, is eleventyhttps://www.11ty.io/ Unlike the previous two strategies, Eleventy requires a dedicated setup and is geared towards Node development rather than Gulp. Rather than start from scratch I've taken the eleventy base bloghttps://github.com/11ty/eleventy-base-blog template from Github as my starting point. I will...
