Skip to content

Instantly share code, notes, and snippets.

View davidvandenbor's full-sized avatar

David van den Bor davidvandenbor

10 followers · 0 following
View GitHub Profile
@davidvandenbor
davidvandenbor / get-the-full-date-javascript.html
Last active March 15, 2022 21:49
Get the full date from the Javascript Date() method.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// Create arrays for the months and the weekdays
const weekdays = ["Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag","Zondag"];
@davidvandenbor
davidvandenbor / canonical-via-js-in head.html
Last active July 16, 2020 12:51
Add canonical url via JS in html
<script type='text/javascript'>
var link = !!document.querySelector("link[rel='canonical']") ? document.querySelector("link[rel='canonical']") : document.createElement('link');
link.setAttribute('rel', 'canonical');
link.setAttribute('href', location.protocol + '//' + location.host + location.pathname);
document.head.appendChild(link);
</script>
@davidvandenbor
davidvandenbor / README.md
Last active April 30, 2020 22:51
gist-html-includes-with-standard javascript

Html includes with standard javascript

An example of how you can include "snippets" of HTML into other HTML pages. This might come in handy for things like including headers, footers, menu's or sidebars to multiple pages of a website or application. For instance, you can embed this into 20 or 30 webpages: a single top bar navigation menu which was saved as a reusable piece of code in a seperate text or HTML file. It takes just a couple of lines of javascript to do this.

As a bonus, I've also added a few lines of code that sticks an ".active" css class on the menu item with the name as the currently loaded page. It does this by checking the URL that's actively present in the address bar of your browser.

See it in action

@davidvandenbor
davidvandenbor / Grid-challenge-exercise-solution-with-grid-areas.md
Last active May 4, 2021 20:47
Grid challenge exercise solution using grid areas

Grid challenge exercise (solution with grid areas)

One of three lesson files with CSS grid exercises. This file contains the grid areas solution to the layout challenge. There's a second one with the solution using grid lines, see here.

Preview: at bl.ocks.org

@davidvandenbor
davidvandenbor / Grid-challenge-exercise-solution-with-grid-lines.md
Last active February 2, 2022 06:48
Grid challenge exercise solution using grid lines

Grid challenge exercise (solution with grid-lines)

One of three lesson files with CSS grid exercises. This file contains the grid lines solution to the layout challenge. There's a second one with the solution using grid areas see here

Preview: at bl.ocks.org

@davidvandenbor
davidvandenbor / basic-css-grid-example-study-of-grid-lines.markdown
Last active January 30, 2022 22:59
Basic CSS Grid example, study of grid lines
@davidvandenbor
davidvandenbor / Mobile-first-scalable-layout-with-media-queries.markdown
Last active April 28, 2020 01:31
Mobile first scalable layout with media queries

Mobile first scalable layout with media queries

Example of how to scale a layout from mobile to desktop (and larger) by figuring out when the layout "breaks" when resizing, and then placing your css media queries strategically. Note also the clever use of REM measurements for margins and paddings, relative to the global font-size! Preview: at bl.ocks.org

Edit:

Edit / Play around with it for yourself in Plunker! > See link below: https://plnkr.co/edit/gist:b98556c9eedd735e79a4af043835f909

@davidvandenbor
davidvandenbor / Drawing-tiny-houses-with-P5.js.md
Last active April 28, 2020 01:48
Drawing houses with P5.js and javascript nested loops
@davidvandenbor
davidvandenbor / Simple-navigation-for-desktop-and-mobile.md
Last active January 30, 2022 23:30
Simple navigation, usable on both desktop and mobile

Simple navigation for desktop and mobile

Example of a very simple horizontal bar navigation which changes into a vertical navigation menu on mobile (meaning, when the screen is smaller than 500px) As a bonus, I've also added some javascript that sticks an ".active" class on the menu link of the current page (that is loaded in the browser window)

Preview: at bl.ocks.org

@davidvandenbor
davidvandenbor / event-listeners-in-javascript.markdown
Last active January 31, 2022 21:53
Event Listeners in javascript

Event Listeners in javascript

An example demonstrating the use of event listeners (used as one-offs or globally) in Javascript. When using event listeners globally you can use event.target.matches to "listen" for events executed on all HTML elements (identified bij element, class or ID)
Preview at: bl.ocks.org