In this video I’ll be showing you how to use native JavaScript Modules with the import and export syntax in JavaScript – this works on major browsers such as Chrome, Firefox, Safari and Edge. Modules allow you to separate your code into individual chunks or components, allowing for easier maintainability and better file organization. Support…

In this video I’ll be showing you how to convert an HTML5 Canvas into a downloadable or view-able PNG or JPG image. It’s super easy to do with Data URIs and Blobs. Support me on Patreon: https://www.patreon.com/dcode – with enough funding I plan to develop a website of some sort with a new developer experience!…

In this video I’ll be demonstrating how it’s possible to use some simple JavaScript in order to display a preview of an image before uploading it to the web server. Support me on Patreon: https://www.patreon.com/dcode – with enough funding I plan to develop a website of some sort with a new developer experience! Follow me…

In this video I’ll be demonstrating how to use the native JavaScript Date object to work with dates on the client-side of your web application or website. In most cases, a library such as Moment.js may be more suitable for working with dates but sometimes this native object is enough to satisfy your requirements. Support…

Link to code: Google Material Icons: https://google.github.io/material-design-icons/#icon-font-for-the-web In this video we’ll be creating a virtual keyboard using pure HTML, CSS & JavaScript (no libraries required). This is done from scratch and is easy to integrate, responsive and touch-friendly. I think projects like this are super helpful for learning web development or specifically HTML, CSS, &…

In most medium-to-large sized websites or applications, it’s ideal to separate your data from your HTML markup. One way to achieve this is by creating a structure in HTML and then loading the data separately from a dedicated data-file. AJAX is a method of loading data into a web page once it has finished loading…

By using the “unload” event in JavaScript you are able to detect when the window has closed. In the case of an iframe, it is possible to detect when the src attribute has been removed or changed. In this video we take a look at an example of the “unload” event in the case of…

In this video we take a look at the contentWindow and contentDocument properties of an embedded iframe – it allows access to the underlying “window” and “document” objects of the HTML page. Support me on Patreon: https://www.patreon.com/dcode – with enough funding I plan to develop a website of some sort with a new developer experience!…

In this video we’ll be creating a stylish navigation bar with icons, using plain HTML, CSS and JavaScript. The icon library used will be Google Material Icons, which you can read the documentation for here: https://material.io/tools/icons/ To include Google Material Icons on your web page, add this to your head: https://fonts.googleapis.com/icon?family=Material+Icons Support me on Patreon:…

In this video I’ll take you through how to easily detect if CAPS LOCK is enabled with JavaScript – it’s super easy to do with KeyboardEvent.getModifierState(). The example used in this video involves an HTML form and basically we’ll be adding a simple message that warns the user that CAPS LOCK is in fact on.…