RSSAmplifier

Blog

Andeers.com

I mainly write about web development and tech.

andeers.comRSS feed ↗82 posts

Latest posts

DDEV

I've been working with Drupal for about 12 years now and I've tried a lot of tools for local development: Vagrant, Mamp, Xampp, Docker and installing everything directly on my Mac. All of these solutions worked, but they also had problems. The setup I liked the most was installing PHP, MySQL directly on my mac and set up a local domain with dnsmasq. This setup worked great for me but one big issue…

Can Prettier be used with Drupal?

Prettier is a fantastic tool for JavaScript developers, and after reading about its PHP plugin, I decided to give it a try. Since I primarily work with Drupal, I was curious to see how well Prettier would work with it. Setting up Prettier for PHP To get started, I created a package.json file in the root of my Drupal project and installed Prettier: npm init --yes npm install --save-dev prettier…

This is not a redesign, it's the beginning of one

In the past all my redesigns have been a process of working hard for a while on a redesign, getting tired, and publishing it. Then I would not do anything about it until the urge for a redesign appeared again. This is not a good approach I think, the process should be more continuous. A nice thing about websites is that it's easy to make adjustments. So this time my plan is to make it a longer…

Simple drush with and without ddev

I've recently started using DDEV for local Drupal development, it's very nice but the old way of using drush is very stuck in my muscle memory. I decided too see if I could find a way to get the best of both worlds. DDEV provides a cli that allows you to interact with the docker container, and also check the status of it (with json!). The command ddev status gives you information about the project…

2022

2022 has come to an end. It feels like the year went by in a blink. My daughter turned two at the start of the year, work has had exiting challenges. This website though, has been left untouched. Work I've spent a lot of time this year making Drupal run in Kubernetes, since our hosting provider wanted to move us to the "cloud". It's been a steep learning curve and kind of outsite of what I usually…

Create-react-app in Drupal

Create-react-app (CRA) is nice to start a react project without messing with webpack and react setup. But CRA generates JS and CSS files with a hash in the name which makes it hard to include them in a Drupal library. A libraries.yml entry looks like this: module_name : js : js/script.js : { } css : component : css/style.css : { } To make it work with CRA we would have to update the file path each…

2021 in review

Another year has passed, for me it's been a year of parental leave and Drupal. With a kid there hasn't been that much time for hobby projects, but I have learned a lot and expanded my knowledge of Drupal Some stuff that happened: Started the year with parental leave 👏 Started on a Unity course (refreshing to try something new and different) Had a nice summer vacation hiking in the mountains…

Permissions API

Today I learned about a new browser api called Permissions API . It's a new API that allow you to check the current state of different API permissions such as Geolocation. It can look like this: navigator . permissions . query ( { name : 'geolocation' } ) . then ( function ( result ) { console . log ( 'The current state of geolocation permissions are:' , result . state ) ; // result.state can be…

How to disable FLoC on Netlify

FLoC is Googles next attempt at tracking people online. You can read more about it in this nice article by Adactio. Both WordPress and Drupal are discussing if they should disable it by default. In the meantime, if you’re a website owner, you have to opt your website out of the origin trial. Do opt out of it on Netlify all you have to do is add some lines to your netlify.toml : [[headers]] for =…

10 years!

This website is 10 years old! My first blog post was posted on the 18th of March 2011, as a part of a college course about social media. There have been multiple changes since then: Switching from Norwegian to English Writing about web development Removing Google Analytics in favor of Netlify Analytics Many design attempts and iterations Tech stack My website has always been a place for me to test…

Quicktip: Github profile readme

To make your Github profile page more interesting you can now create a readme file that will be displayed at the top of your profile. This "feature" is kind of hidden, but it's straight forward to enable it. You just have to create a new repository with the same name as your username. For example my username is andeersg , so I created a repository called andeersg with a README.md . Now I have a…

Setting up Nginx with PHP

I'm not a server guy, but from time to time I have to setup a website for testing or development. Here are my steps for setting up nginx with PHP. Installing nginx Installing nginx is straight forward: sudo apt update sudo apt install nginx Next is to verify that the firewall accepts nginx. sudo ufw status If "Nginx HTTP", "Nginx HTTPS", or "Nginx Full" is not listed you have to add the ones you…

How to update to Drupal 9

Drupal 9 was launched this week. So if your modules are ready it's time to update. Updating betweeen major versions can be tricky, sometimes Composer won't update a package because another package have a common dependency, but with another version. And sometimes the conflicting package is the one you try to update. That happened to me when I tried to update drupal/core from 8.8.6 to 9.0.0 . Drupal…

Generate many screenshots for inspiration

Drafts and scheduled publishing

A nice feature I had in Jekyll was drafts and the option to schedule publishing of content. In Jekyll you placed drafts in a separate folder called _drafts and when you built the site with the flag --drafts they where included. I have gone a different way in my Eleventy site, and keep the drafts in the same folder ( _posts ) as the published content. To mark something as draft I add it to the…

Disable row in Drupal tableselect

When you use the tableselect element there may be reasons you want to make a row not selectable: Permissions Missing properties on the element Or any other reason to not make a row selectable I had to do this recently and thought it should be a easy thing to do, since all form elements seems to support the #disabled property. A tableselect element looks something like this: $form [ 'table' ] = […

Refresh Service Worker

Have you ever enabled a service worker and then realised that your updates are not showing because of caching. I have. According to MDN a service worker will update every 24 hour or so or when all pages/instances are closed. This can be a problem if you have made recent changes or the website is added to home screen. There could be reasons not to force update the service worker whenever a new one…

Eleventy tip: Markdown template engine

You can use helpers, filters and template logic in your markdown files. And by default the template language for markdown files is liquid . This can lead to interesting results when you use a different template language that looks the same. To fix this and ensure correct results you can define which template engine should be used for markdown files like this (in .eleventy.js ): module . exports =…

Eleventy Essentials

I switched my personal site to Eleventy recently. It's a very good static site generator. Here are some tips and tricks I have discovered that are nice to have when you are creating a site. Start using the _data folder If you come from Jekyll you are used to different kinds of variables being available in your templates ( site.time , site.posts ). Eleventy does not have these by default, but it's…

The CSS Widows

If you are like me you have probably been annoyed when your editor autocompletes wid to widows and you wanted width or something similar. I have always wondered why my editor is not smarter, since this is something I have never used. And I have to admit that up until I started writing this I have thought it said windows . But the last time I saw it I had more time and started to wonder. What does…

Different front page for logged in users in Drupal 8

Sometimes we have the need to show logged in users something different than the regular visitors. It could be a dashboard for logged in users and a landing page for regular users. Or anything. How to solve it At first I tried using the configuration override system to override the front page setting, but this does not work. It looks like that setting cannot be overridden on a per user role basis.…

Use DigitalOcean and home computer to update domain IP

Using DigitalOcean(DO)'s API, a domain and a script on your home computer, you can have a subdomain pointing to your home network all the time. If you just want the script, here it is (remember to to replace [token] , [domain] and [record_id] ): #!/bin/bash PUBLIC_IPV4=$(curl ifconfig.co) curl -X PUT -H "Content-Type: application/json" -H "Authorization: Bearer [token]" -d…

Entity API in Drupal 8

A quick walkthrough of the most common entity operations in Drupal 8. Changes from Drupal 7 Everything is different from Drupal 7, but if you really want to you can still use [core_entity]_load and [core_entity]_load_multiple . You should note that they are marked as deprecated in the code and will be removed (In Drupal 9), so you should just use the new ways right now. Load a node in Drupal 8 To…

Programming advent calendars

If you like coding and advent calendars I can really recommend Advent of Code . Every day up until Christmas you get access to a new two-part task you have to solve with programming. Here is my solution to day 3 if you want to get inspired/see what it can be: var fs = require('fs'); var triangles = fs.readFileSync('./input-triangles.txt', 'UTF-8'); triangles = triangles.split(" n"); var possibles…

24 days of Christmas

December is here. Enter the advent calendars and gingerbread cookies. This Christmas I have decided to try to write a blog post every day. I haven’t made any specific plans on what to write about, but it will be related to web development, open source and productivity. So to kick it off I want tell you about this small library I made at work. I had to import some documents from a Norwegian service…

Optimizing websites

I have recently done some optimizations to my blog to improve the loading speed of it, and thought I should write it down, because a faster web-site is a happier web site. If you want to take a closer look at the examples in this post you can take a look at my website's repo on Github.com . JavaScript Every website that showcases code samples need some syntax highlighting, but not all pages have…

CSS Calc is pretty neat

With a centered layout it can be hard to have full with elements without a hassle. In this post will I show you a neat trick to get full width sections in a layout that are centered. If you just want the demo check out this CodePen . The snippet should work in Internet Explorer 9 and up and the other major browsers. .full { left : calc ( ( 100% - 100vw ) /2 ) ; position : relative ; width : 100vw…

CSS Grid Layout

If you have worked with the web, grids are nothing new to you. The grid layout specification is a different take on grids than the numerous grid frameworks that exist. Much like Flexbox does the Grid Layout allow us to control the html in a new and simpler way. Even though Bootstrap has made it quite easy to set up a grid, there is a still a battle of negative margins, paddings, floating and…

Getting started with Jekyll

A couple of days ago I moved my blog from WordPress to Jekyll, a static site generator. Jekyll has a simple structure that allows for easy theming and styling. In this post I will go through: What Jekyll is How to get started Features of Jekyll Hosting your site on Github What is Jekyll Jekyll is a static site generator created by Tom Preston-Werner in 2008. It’s written in Ruby and compiles all…

A new WordPress theme – Part 1

I have for long wanted to improve my site. I was not happy with the old design and I felt like I had locked myself in a corner. The theme used a big banner image (inspired of Medium) and I never felt I could create a nice image for it. And also the code was a mess and I was not motivated to improve it. So I decided to start working on a new theme. For months I have crawled the web looking for…

WordPress SEO and relative links

I really like WordPress SEO , it’s a nice plugin that does everything I need for SEO. But for long I have had a problem with the sitemap feature. My posts did not show up in the post-sitemap. I did not look into it anymore until today, when I looked through webmaster tools and figured I should get everything to work. I opened class-sitemaps.php in the WordPress SEO plugin and started to go through…

New tools are not scary

Being a developer is not the same as it was a couple of years ago. It was HTML, CSS and JS you had to cope with. These days it’s completely different. Every day there are new tools and technologies coming out that can help and improve our workflows. New stuff can often look scary and it’s easy to feel like todays workflow and way of doing stuff is the best. Why should i spend time learning all…

currentColor

currentColor is a quite unknown CSS value with good browser support, and i thought i should check it out and see if i could use it for something useful. It’s supported in all major browsers according to caniuse.com , except Internet Explorer 8 (of course). Example usage: .element { color: #e6e6e6; border: 1px solid currentColor; /* #e6e6e6 / } .element a { color: currentColor; / #e6e6e6 / }…

Writing CSS with ITCSS

Inspired by Harry Roberts’ talk about ITCSS at Trondheim Developer Conference in October, i decided to use it for a redesign/optimization i was going to work on for a client at work. What is ITCSS? ITCSS stands for Inverted Triangle CSS and is a way of structuring your CSS. The inverted triangle means that you start off in the wide end (low specificity) with base styling of html tags and the more…

When ideas become an obstacle

Everyone has ideas and it’s a good thing we have them. But for me they can sometimes become an obstacle. That’s because i always see stuff i want to improve in the solutions i use and get ideas of things that would be cool to create. So i have figured out that i must suffer from IID , an pretty unknown problem(mainly because i just made it up) that is called Instant Idea Development . When i get…

Creating a command line tool with Node.js

Command line tools are always useful. They can help you do stuff faster and be more productive. And with Node.js it’s really easy to create them yourself. The easiest command line tool may be something like this: #!/usr/bin/env node console.log(process.argv); The first line tells that it’s Node that should be used for this. The second line just outputs every argument back to you. To make this work…

Trondheim Developer Conference 2014

Last week I attended Trondheim Developer Conference #tdconf in Trondheim. It was the first conference I have attended and I must say it was fun and inspiring. I really liked going, and it was a nice way to learn new stuff and see interesting people you usually only see on Twitter. The conference consisted of 5 venues with 8 talks on each during the day plus three talks for everyone. It was a long…

Creating patches for Git

Today i had to fix some bugs in a contributed drupal module in a project i’m working on, and to make sure my changes was not lost in a module upgrade i created a patch for them, and here is how i did it. What is a patch? A patch is a single file which can contain modifications for multiple files. A patch can for example rename a variable in every file in your project. How do i do it? The first…

Configuring Varnish for WordPress

Varnish is a very effective caching software, it can cache every part of your WordPress site. But when you turn it on you loose some nice features of WordPress. Varnish works by sitting in front of your web server, and giving the visitor a cached version of your page if it has any, and only if there is no cached version available send the visitor to the web server. But without some configuration…

Featured image as background image

If you have a theme with the custom background image feature enabled it’s pretty easy to replace it with the featured image of your posts. First you need to add the wp-head-callback -attribute to your add_theme_support('custom-background') -function: add_theme_support( 'custom-background', array( 'wp-head-callback' => 'change_custom_background_cb', ) ); This tells WordPress to use our function…

WordPress development with Vagrant

Vagrant is a tool for creating virtual development environments. It allows you to setup a environment with the OS you want and all the functionality you want without messing with your computer. Why vagrant? Up until recently i used xampp on my mac to setup local sites. It works pretty good, but sometimes there were trouble like when some tools did not understand which php they should use (xampp or…

Atom.io

Github just released a beta version of their new editor Atom, and i must say it looks good. It has a very clean user interface, and i must say i like what i see. Atom editor displaying functions.php The editor is highly flexible with loads of packages you can download. A package can be a theme for the editor or new features and functions. A couple of packages highlighted on the atom.io site: Color…

Grunt – The JavaScript task runner

Grunt is a command line tool that’s running tasks for you. It can automate all the things you have to do manually (at least many of them). You can for example make it compile your SASS-files, check your JavaScript syntax, combine the JS-files and minify them with one command. What is Grunt really? In itself Grunt does nothing, you have to add plugins to actually do stuff. Right now there are over…

Moving my blog to DigitalOcean

I have been looking for another host for my blog for some time now, and in december i found DigitalOcean. I decided to move my blog there yesterday. DigitalOcean With DigitalOcean you get a server, a linux OS and then you are on your own. Luckily for people without server knowledge (me) they also have lots of guides for setting up various things. I spent my Christmas holiday configuring and trying…

Getting started with Backbone.js

I have wanted to look at JavaScript frameworks for some time now. I like the idea to only send JSON data from the server and let the client do the rest. But there is a jungle of frameworks, so it is hard to get information about which one you should choose. I started on a small project for a client at work where they wanted to list courses and let people sign up. It was going to be a one-page…

A new blog theme

Today i changed my blog theme to a new theme i have created. It’s a theme heavily inspired by Inside Envato and Bensmann.no . It’s a work in progress, and changes will come. I’m also trying something new by writing in english. I want to do this to improve my writing skills and also get a potentially greater audience.

iOS7 – et førsteinntrykk

I går lanserte Apple iOS7 på sin WWDC-konferanse. Et operativsystem det ble sagt at skulle være det største som har skjedd med iPhone siden iPhone ble lansert. Min mening er at det stemmer. Det har blitt en helt annen telefon, og foreløpig liker jeg det jeg ser. De har redesignet alt fra låseskjermen, til menyene, animasjonene og ikonene. Ikonene Alle appene til Apple har fått oppdaterte ikoner…

Angrep mot WordPress

I det siste har det vært flere artikler om store angrep mot WordPress-installasjoner. Derfor er det veldig viktig å ta noen forhåndsregler sånn at din WordPress er sikker. Angrepene prøver brukernavnet “admin” sammen med veldig mange passord. “admin” er et brukernavn veldig mange har satt som standard og derfor er det dette angrepet prøver på. Har du “admin” som brukernavn? Ta det med ro, det er…

Nyheter i WordPress 3.6

WordPress 3.6 har blitt tilgjengelig i betaversjon, og har man lyst kan man allerede nå teste den ut ved å aktivere WordPress Beta Tester . Da får du mulighet til å laste ned de aller nyeste versjonene av WordPress. NB: Det er ikke anbefalt å gjøre dette på en produksjonsside da det er større sjangse for at det forekommer bugs. Hva er nytt? En av de største forandringene jeg la merke til er at…

Mailboxapp – skaper liv rundt lanseringen

For noen dager siden ble Mailboxapp tilgjengelig på App Store , og i løpet av de første timene appen var tilgjengelig fikk den veldig mye omtale og oppmerksomhet. Mye av oppmerksomheten kom av den noe spesielle måten de valgte å gi tilgang på. Før lansering kunne man oppgi telefonnummer og sette seg på venteliste. Når lanseringen kom fikk man tilgang til appen etter rekkefølgen man meldte seg på…