DEV Community: André

How to run laravel in docker

André — Wed, 15 Jul 2020 12:51:15 +0000

This is just a quick post sharing my basic docker setup for new laravel projects.

Setting up a new laravel project can be quite some hassle, the current options with valet, homestead or vagrant are fine but personally don't give me the flexibility I need.

That's why I created a basic laravel docker boilerplate I copy across my projects.

How to use it

First of all you need docker installed on your pc and a laravel projects. Then copy the next two files into the root of your project:

Once you copied the files, you'll need to run docker-compose up in the root of your project directory to start the dev environment. Head over to http://localhost and you'll have your laravel project up and running.

The following file is optional and meant for if you want to use your own docker container image. The docker-compose above uses my pre-build docker image which is hosted on docker hub.

If you want to know more about docker or how to setup your own stack, let me know down below and I'll write something about that.

Thanks

GA? Matomo? Or maybe this ...

André — Thu, 04 Jun 2020 10:55:13 +0000

Which analytics should I choose? What has to be on my privacy policy page? Do I have to choose opt-in or opt-out? Is Google selling my data? Where do I put that cookie banner? Any cookie or tracking services? GPDR? BDSG? ... ... ...

So many things to look after, all that and more just to see how many people have been visiting my site. Is it really worth it? There must be something simpler!

How it all started
My first own analytics server
A new service had to come
The self-hosted server purge
Back to the roots
TLDR; Miss me with that long ass blogpost

How it all started

Back then I needed something to check the traffic for my sites, I was rather scared about privacy issues, didn't know how much GA (Google Analytics from now on) costs, how to set it up etc etc. And to be honest, I wasn't too much of a google fan back then.

I was looking around, comparing prices and if there were on-premise solutions to keep control over the data and what not. I didn't find much out there which fit my needs until I came across Fathom.

My first own analytics server

Some years ago I rented a VPS, setup docker and installed Fathom. I was quite pleased with what I got, given that I didn't have to worry about privacy pages and cookie banners. Fathom doesn't need that.

Everything went well up until my server crashed. Not too bad right?
So I rebooted my server and then went to check if everything is up and running. I opened my analytics dashboard, just to be welcomed with the setup screen again. What?

Time to debug the issue, back to the server

I was looking around, checking if all services were running but couldn't find any issues. Well, little did I know that I messed up with the docker configuration. I forgot to share the docker volume to my host machine and had all data inside the container. Since my containers were broken, everything was lost.

Data inside docker containers don't persist if they are not shared with the host system

I was pissed, at first I blamed fathom, how dare them to not include basic docker knowledge in their docs.... Insane!

A new service had to come

Of course they are wrong and not me, so I deleted the server and went on the hunt for a new analytics suite. After a while I came across Matomo (formerly Piwik, idk why they still include that). It looked nice, so here I went again and created a new server. I didn't use docker for this setup obviously, because at the time, docker was my enemy (yes I realized it wasn't fathoms fault but my own stupidity).

The server was running fine, there even is a third party Matomo app for iOS which I used to check my numbers. That server was running for over a year, I went through all my sites added privacy policies, added cookie banners and what not was necessary to be as much compliant as possible. All data was anonymized and deleted after 180 days. Seemed fine to me. Up until I got fed up baby sitting servers.

The self-hosted server purge

Don't get me wrong, I still love self-hosted and open source solutions. But let me tell you, it gets quite tiring after you have to maintain +10 servers. At some point I simply didn't want to look after all my servers anymore, so I began to look for cloud/hosted services to replace anything I had hosted myself. I went from my own hosted instance of Gitlab to Github, replaced Rocket.chat with Discord, mailcow with gmail and many other services at the same time.

So what happened to Matomo then? Time to use Google Analytics as there is nothing left? Luckily, I came across a fathom tweet
// Detect dark theme var iframe = document.getElementById('tweet-1259192400825643008-804'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1259192400825643008&theme=dark" }

This made me check their prices again. I guess they changed since back then and compared to my time watching my own servers, this was the best deal I could find personally.

Back to the roots

So I went ahead, created a new account, payed for a year sub and started to migrate all my sites back to fathom yet again. But this time, using their hosted solution. It didn't take me long to port my sites over and I already saw traffic coming in. Cool. They added quite some new stuff since the last time I have used them which were a surprise. Oh speaking of which, they are adding simple website monitoring with free notifications to mail, sms and slack this Friday.

There are many solutions for tracking page traffic, find some below. I will update the post with your comments if I am missing something that should be added here. Maybe in a year or two I will continue this journey by replacing fathom with yet something new (I doubt it though, really happy right now).

TLDR; Give me the good stuff

Fathom

Both free and hosted solution, privacy compliant, no need to have a cookie banned or privacy policy for analytics. Perfect if you want an easy and simple solution without much hassle. Here is my personal referral link for fathom. Would be cool if you help me out! https://usefathom.com/ref/MQYHPK You get $10 off.

Matomo

Both self-hosted and cloud solution, GPDR Manager, automatic deletion of data, anonymized tracking, offers opt-in and opt-out. The best tracking solution if you want to self host your analytics and still be privacy compliant. Matomo

Cloudflare

Free pure traffic tracking, no need to have a cookie banned or privacy policy for analytics. Simply use Cloudflare as your DNS to get pure hits without a page breakdown. Probably the easiest setup but for the price of less detailed stats.
Cloudflare

Simple Analytics

Just going to link it here, similar to fathom Simple Analytics

Google Analytics

Idk, I am still not there - comment below and I will update this. I'll leave you with this 🤷
From Google's policy:

The information we collect includes unique identifiers, browser type and settings, device type and settings, operating system, mobile network information including carrier name and phone number, and application version number [...], your apps, browsers, and devices with our services, including IP address, crash reports, system activity, and the date, time, and referrer URL of your request.

Where did I host you may ask?

Mostly at Hetzner and Contabo

webgems.io 💎 a devs startpage

André — Thu, 25 Jul 2019 08:06:06 +0000

👋 Introduction

Since I am a community person, I am often helping people within several developer discords as well as running my own server called devcord. There is not a single day were I don't find myself linking some resource, as many beginners are asking how to do "that" in flexbox for example.

On our server we even have a bot command to just send an embed saying "Hey want to learn flexbox? Checkout https://flexboxfroggy.com". But sometimes I feel like a particular member might not want to use flexboxfroggy but is looking for a documented approach, so I sent them the link to the css-tricks flexbox guide.

💡 The idea

That brought me to the idea to create a website for beginners, that are looking for resources which will help them get started in the big and chaotic domain of webdevelopment.

As always I started to look out for a domain first, before even thinking about how I would actually implement this site itself. It was the 10th of may that I started to bug my friends asking what they think about this particular domain name. It's just a small flaw of mine, thinking good domain first and then comes the project (but that actually just changed recently - more on that soon).

Here is the list of domains I was running through, until I found the perfect match (with the help of my friends, looking at you Jacob): webgems 💎, "the best gems out there for developers". If you are lucky, you might be still able to register any of these. IMO those are some good domains :)

webbin.io - webbin.dev - sourcebin.io - webcollect.io - devbucket.io - webrepo.io - devcollect.io - devbin.? - resourcebin.io

💻 Starting to dev

Anyhow, once I was settled on the domain, I quickly registered it since you should never wait too long - the domain can be gone anytime. It was now time to decide what stack would be fitting for this site - since Vue is usually my goto framework and just recently I started to rewrite my own website in Nuxt, I decided to use NUXT for webgems as well.

I am not sure how deep I should go into the dev process, I'd only like to highlight that one particular thing has been costing me some nerves:

Being able to click on a copy button that will highlight the card and put a reference in your clipboard.

That's how it looks like now:

It worked completely fine on localhost, but when I pushed it to prod using Netlify, the reference and routing would just break. I was so hyped about this project but this one issue frustrated me a lot. After some hours researching about this issue I found some references about Nuxt+Netlify and Netlify adding trailing slashes. Quickly I decided to spin up my very own server to verify if it was either me or Netlify's issue.

At that time I was kinda sad since I thought i could not use Netlify, even if I enjoyed their whole workflow that much.

I guess that message makes it quite clear?

Well after I came down a bit, I wasn't happy with the current situation and wanted to find out if there was another solution to the problem. It took me some days but I found the solution - here is the final code snipped. I actually forgot how I fixed it, but I will make sure to dig through the commits and come back later with the answer for you!

  methods: {
     async createCopyUrl() {
      try {
        let currentPath = this.$router.history.current.path
        let reference =  this.createReferenceTag(this.$props.title)
        await this.$copyText(`https://webgems.io${currentPath}?card=${reference}`)
        this.$router.push(`${currentPath}?card=${reference}`)
      } catch (e) {
        console.error(e);
      }
    },
}

✅ IT'S LIVE

As that was out of the way and I was now able again to work with Netlify, I continued to add more resources and fix some small things here and there. Several streams on my twitch and one month later, it was finally done. I pushed the last commit and decided to tweet about it, even if I am not a twitter person that much.

Not thinking what would happen, the tweet actually blew up. It was the first time for me that anything I tweeted actually reached that many people.

// Detect dark theme var iframe = document.getElementById('tweet-1139855554761785345-661'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1139855554761785345&theme=dark" }

About 120.000 people saw this tweet and the site itself got about 10k visits within the first week of the launch. I was completely astonished that I'd actually get that support.

Shortly after the launch, S3BAS a friend from the devcord server chimed in on the project and helped me out a bit, refactoring the code and what not. We had some late night shifts but it was well worth it.

This project was also published on producthunt, but I kinda failed the launch there, assuming not posting at the right time.

📖 Skill++

While working on this project I had so much fun and learned/fixed my git and git flow skills. Thanks to the people that sent me messages on how much they appreciated what I and the contributors of this project did. Even today, some weeks after the launch people still thank me for this project. And it means so much to me, that it does exactly what I wanted - help other people (and ofc that I don't have to send individual links anymore :D).

It has been a road of emotions and just recently webgems was mentioned in one of my favorite podcasts "Syntax.fm". I can highly recommend listening to their podcasts and this particular one, where webgems was mentioned -> click here.

I didn't even notice at first it was mentioned there, but yet another friend told me about it. I was actually close to crying, hearing that I made it on there. I was shaking at least and had to tell my friends about it, even if they don't know anything about web development at all and couldn't understand what was going on. But they were happy for me at least, so i appreaciate that.

💾 The Conclusion

Even if your project is nothing completely new, people that may not believe in your idea, the issues you face or any other reason should never stop you form doing what you are passionate about.

The web domain is quite toxic sometimes and even more for beginners - that's why I wrote this story about this small project, that still had an impact.

If you are looking for a friendly community with like minded devs and are in need of help or want to help people, come join us over at devcord - we would love to have you there.

If you want to checkout the source of this project, feel free to do so it's on github. I'd love if you share it when someone is in need of some resources as well as contributing to the project - just shoot a PR or open an issue if you think something is missing.

webgems / webgems

🚨 REPO MOVED

webgems is now back in lostdesign/webgems

View on GitHub

Small details make a difference

André — Tue, 04 Dec 2018 16:45:30 +0000

Recently I had a chat with my fellow web developer friend about forms and how they should not let users submit the request if required fields are missing. I was trying to fill my request for this years christmas vacation and they didn't have any validation going. I ended up adding the same data again 😔..

So why does it matter?

Form validation is important!

How often have you run into the issue of filling forms which do not have any frontend validation, might not even display where the error relies or simply won't work? I guess you know the feeling well!

The issue here is that the user usually assumes everything will be fine once they are done filling the form, but then poof everything is gone. You now have a disappointed or maybe even angry customer. At least that site made this poor cat cry.

How can you fix that?

Well let's just use required on the input!

YAY - Actually no..

You can do it, but you still don't give the user feedback at the right time! We are now at the same point that the user assumes that his filled data is correct.

So what should you do then? You could install all the fancy js libraries in order to get it to work or simply work with plain JS and CSS. Sometimes you may not need much more than what you can see in the codepen down below!

I made this codepen as proof of concept, try clicking the button without entering any values into the input. Afterwards click into the input, add something and press submit.

How the pen works

I have added an addEventListener to the button on mouseenter which will trigger a function called validateNote().

btn.addEventListener('mouseenter', validateNote)

mouseenter in this case is probably the best option to go for, as it's being triggered once the mouse enters the button (read more on event triggers here)

validateNote() checks if the value of the input is an empty string using the ternary operator. Depending on if there is any value or not it will disable or enable the button.

input.value === "" ? disableButton() : enableButton()

disableButton() will add the .err css class to the button, input and label to reveal the error message.

function disableButton() {
    btn.classList.add('err');
    input.classList.add('err');
    errMsg.classList.add('err');

    // this kicks the cursor from the input which still has focus
    document.activeElement.blur();

    // the button here will be disabled
    btn.removeEventListener('click', submitNote, false);
}

enableButton() will do the opposite obviously! It removes the .err css class off the button, input and label to hide the error message.

function enableButton() {
    btn.classList.remove('err');
    input.classList.remove('err');
    errMsg.classList.remove('err');

    btn.addEventListener('click', submitNote, true);
}

Pro tip: Use an inner shadow on the input to prevent it from resizing, since adding a border would make the input actually bigger and your layout would start to shift.

input.err {
    -webkit-box-shadow:inset 0px 0px 0px 2px #f00;
    -moz-box-shadow:inset 0px 0px 0px 2px #f00;
    box-shadow:inset 0px 0px 0px 2px #f00;
    transition: all .3s ease-in-out;
}

Another tip: Since we are working with animations here, use any easing method you would like - at least use any. Find some easing properties here

Btw, you should add labels which are visible any time for your inputs - i didn't do that in this case. But this is a different topic I will address some other time.

Tl;dr

Simply validate all required inputs before the user can submit them in the frontend, but also after the user is done filling the data to prevent any interruptions.

It helps the experience for the user in order to prevent any false expectations which then cause frustration. Telling the user at the right time what's wrong without disturbing their flow is key!

Error messages

should display at right time and place.
should primarily avoid confusion.
should communicate what is happening.
should describe how the user can fix it.
should be short, but meaningful.
should have right color for the message.

Taken from UX Stackexchange

This is the beginning of me trying to figure out how to make big improvements with small details, stay tuned!

I am always happy to improve myself, so feel free to help out! Thanks for my fellow discord people who helped me to improve this article already :d