Category: Web

How to change the WordPress footer text, even if your theme does not want to let you. This article is about the Neve theme, but the system will work on all themes. Continue reading “Hack WordPress Footer”

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.

https://favicon.io/

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:

1. Give your API a title
2. Copy the Airtable account API key (from https://airtable.com/account)
3. Copy the base App id (from https://airtable.com/api)

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:

• In each table, you can use 26 data types (Excel and Google sheets have 4 types only)
• You can create as many views of the data as you want
• Simplify data-entry through great forms
• Airtable can be used in Webflow and WordPress, and can be coupled to 1000’s of popular Apps and websites through Zapier.
• Use automation to perform smart tasks by itself. Automate your workflow.

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:

1. Starting with WordPress (and migrate to a production website)
2. Play with WordPress, try-out new themes et cetera
3. Clone your live website to try-out without endangering your production website

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!

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;
}

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

OpenWeatherMap.org

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=nl

Waarbij 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.

Weerlive.nl

De uitleg staat op de KNMI Weer API pagina. Het komt er simpelweg op neer dat je:

1. Een gratis API key aanvraagt op deze pagina. Je vult een paar gegevens in, en je hebt meteen je API key in je e-mail zitten.
2. Vraag de gegevens op in JSON formaat. Bijvoorbeeld https://weerlive.nl/api/json-data-10min.php?key=demo&locatie=52.0910879,5.1124231 geeft het liveweer in Utrecht. Met je eigen API key kan je 300 dataverzoeken per dag doen. Bijvoorbeeld in de vorm van https://weerlive.nl/api/json-data-10min.php?key=<APIkey>&locatie=Purmerend.
3. Verwerk de JSON gegevens. Op de Parameters tab op de KNMI Weer API pagina zie je wat de gegevens betekenen.

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"}]}