Online vergaarbak
Create your own favicon, the icon that represents your website on the browser’s tabs-bar. Just upload an image, and within seconds you can download a zip file containing not just the favicon.ico file, but also Apple and Android specific icon formats.
Font Awesome is a great font containing a lot of icons to use on your webpages. You can use 2.009 free icons, and with a Pro plan you even have 16.083 icons at your disposal.
https://fontawesome.com/search?m=free
Usage example:
Head section:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="(....)==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Style:
.knop {
margin-top:10px;
width:80px;
height:40px;
border-radius:5px;
text-align:center;
padding:0px;
color: #0328fc;
border: 2px solid #0328fc;
cursor:pointer;
font-size:1.8em;
}
Body section:
<button class="knop" type="button" title="Ga dag terug"><i class="fa-solid fa-backward-step"></i></button>
Easily create an API with just 3 variables:
And you’re done! You have an API to your Airtable data.
Example JavaScript code to retrieve a JSON string (All records):
function haalAgenda() {
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
var requestOptions = {
method: "get",
headers: myHeaders,
redirect: "follow",
};
fetch("https://v1.nocodeapi.com/<user>/airtable/<id>?tableName=Gebeurtenissen", requestOptions)
.then(response => response.text())
.then(result => toonAgenda(result))
.catch(error => console.log('error', error));}
A great online database tool!
Airtable (https://airtable.com/) is a great online database. It is very easy to learn because it looks very similar to spreadsheets. But the possibilities are far more:
It is free to try, and you are somewhat limited (1200 records per base, 2GB of attachments). The next (Pro) level starts at $10 a month (yearly billing) or $12 a month (monthly billing).
Taste WordPress is a website where you can (freely) try-out WordPress!
Things the website says it’s suitable (good) for:
Link: https://tastewp.com/
A fresh WordPress is set-up for you in seconds, and you can try anything within 2 days. Through the Backup & Migration plugin it is real simple to perform a website copy. Install the plugin, create a back-up, and on the target WordPress start a restore and paste the location of the back-up. Works great!
The website from Eric A. Meyer uses pen graphics taken from public domain
The ink-sketch images used in this site’s design are adapted from Yūzan Mori’s Hamonshū, Volumes 1-3, published in 1903 and made available for public use by the Smithsonian Libraries and the Internet Archive.
Eric A. Meyer, https://meyerweb.com/ visited 29-5-2021
In my Web Developer Bootcamp 2021 course I follow on Udemy, this CSS reset code by Eric A. Meyer was used. It is meant to give your CSS styling a common starting ground, preventing each browser from applying their own styling to your carefully designed page..
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Service webpage to get an auto random generated API key.
https://degraafonline.com/services/apikey.php
Redone the interface adding my Avatar, giving credits and generating the copyright year:
Voor sommige doeleinden is het handig om de weergegevens/ het weerbericht te kunnen gebruiken. De KNMI heeft een API, maar de documentatie is werkelijk onnavolgbaar.
Veel eenvoudiger is het raadplegen via weerlive.nl. Zij maken de KNMI weer API echt makkelijk.
Weerlive.nl is een doorgeefluik! Ik heb gemerkt dat de ingevoerde login gegevens ook werken op OpenWeatherMap.org. En aangezien ik liever de werkelijke bron gebruik zal ik deze hier uitleggen:
Jasper, 2021.02.03
Hier kan je van 200.000 steden op de wereld gratis weergegevens ophalen. Lees hoe het werkt (in het Engels) op https://openweathermap.org/appid#signup. Je kan je gratis registreren en je kan vervolgens meerdere API keys maken waarmee je gegevens kan ophalen. Let wel: er is een quotum, en er wordt geadviseerd om per locatie maximaal elke 10 minuten de gegevens op te vragen. De query is eenvoudig opgebouwd, maar je hebt wel 2 parameters meer nodig dan bij Weerlive.nl omdat het een globaal systeem is. De uiteindelijke URL ziet er bijvoorbeeld als volgt uit:
https://api.openweathermap.org/data/2.5/weather?q=Purmerend&appid=<api-key>&units=metric&lang=nlWaarbij je <api=key> natuurlijk vervangt met je eigen API key.
Je kan je eigen API keys raadplegen en hernoemen op de Members pagina. Met units=metric zorg je ervoor dat de waarden metrisch worden weergegeven. Dus in graden celcius en meters. En de lang=nl zorgt ervoor dat de teksten in het Nederlands zijn.
De gegevensset in JSON ziet er als volgt uit:
{"coord":{"lon":4.9597,"lat":52.505},"weather":[{"id":803,"main":"Clouds","description":"half bewolkt","icon":"04n"}],"base":"stations","main":{"temp":8.99,"feels_like":8.15,"temp_min":8.33,"temp_max":9.44,"pressure":994,"humidity":92},"visibility":10000,"wind":{"speed":0.45,"deg":19,"gust":3.13},"clouds":{"all":78},"dt":1612332120,"sys":{"type":3,"id":2009151,"country":"NL","sunrise":1612336707,"sunset":1612369769},"timezone":3600,"id":2748413,"name":"Purmerend","cod":200}
Overigens beperkt de taal instelling zich puur tot de weather.description.
De uitleg staat op de KNMI Weer API pagina. Het komt er simpelweg op neer dat je:
Voorbeeld van een opgevraagde dataset:
{ "liveweer": [{"plaats": "Purmerend", "temp": "3.8", "gtemp": "1", "samenv": "Geheel bewolkt", "lv": "100", "windr": "ZO", "windms": "3", "winds": "2", "windk": "5.8", "windkmh": "10.8", "luchtd": " 996.5", "ldmmhg": "747", "dauwp": "3", "zicht": "8", "verw": "Bewolkt en regenachtig", "sup": "08:17", "sunder": "17:30", "image": "wolkennacht", "d0weer": "bewolkt", "d0tmax": "8", "d0tmin": "0", "d0windk": "2", "d0windknp": "6", "d0windms": "3", "d0windkmh": "11", "d0windr": "ZO", "d0neerslag": "21", "d0zon": "0", "d1weer": "regen", "d1tmax": "12", "d1tmin": "7", "d1windk": "3", "d1windknp": "8", "d1windms": "4", "d1windkmh": "15", "d1windr": "VAR", "d1neerslag": "100", "d1zon": "10", "d2weer": "halfbewolkt_regen", "d2tmax": "10", "d2tmin": "6", "d2windk": "2", "d2windknp": "6", "d2windms": "3", "d2windkmh": "11", "d2windr": "ZW", "d2neerslag": "50", "d2zon": "20", "alarm": "0"}]}
The Coolors website helps you pick color schemes for your website or web-App. You can either: