DEV Community: dominikjosch

Join my journey as a self-employed developer

dominikjosch — Thu, 29 Dec 2022 15:25:00 +0000

Hey there, it's Dominik! 👋🏼 I am a self-employed web-developer based in Innsbruck, Austria 🏔️

I am also a teacher and build digital products and solutions.

Heads up, I am starting a newsletter. In my newsletter, I want to give you insights on what I learned, what went good and what went wrong. You will receive links to content I enjoyed and will be the first to know when I launch a thing or two. 💌

The newsletter starts on Tuesday, 10.01.2023 (10/01/23 for all of my american fans out there). 🚀

You can sign up here for free:

https://mailchi.mp/cd82168021b4/newsletter-sign-up

I would be happy if you would support me and join my journey!
Thanks!

Want to know more?

Here are some anwers for questions you might have, might not.

Why am I doing this?

I like reading stories from people in the industry a lot. They inspire me, give me ideas. Continous learning and getting better as a person and developer is really important to me. Going out and talinkg about my story helps me improve - and maybe inspires someone out there.

You are a web developer. Why are you using MailChimp Landing Pages?

To be honest, I wanted to have a blog or a newsletter for a long time. In fact, this was one of my new years resolution for 2022. The year is ending, I don't have a blog or a newsletter yet. So I start unperfect and will adapt on the go.

What will I be writing about?

I will write about my projects and the things I learn while coding, managing and communicating. You will also get insights in my process and the way I work.

What is my experience?

I am self-employed web-developer since 2020. Before that, I worked as developer and project manager in local agencies for 3 years. Besides beeing developer, I've been teaching web development for 4 years.

What is my tech stack?

I consider myself Full Stack Developer. I mostly use ReactJs and GatsbyJs for the Frontend, Laravel for Backend. As CMS, I use WordPress or Dato.

What am I working on at the moment?

Right now, I am supporting two agencies as an external developer. I am also doing two website-projects (one nearly finished, one just started). Since one year, I am working on an app that will also be published soon.

Why wording is critical on your to-do list

dominikjosch — Thu, 03 Mar 2022 14:07:43 +0000

Your brain really likes to think as little as possible. Thinking might be it's job, but the brain also is a bit lazy or busy sometimes.

Clear wording on your to-do list reduces the thinking-work your brain needs perform before taking care of your tasks.

So if you provide clear wording, you (and your brain) will be more willing to work on your to-dos - because they are less work to think of.

If your to-do is looks like that:

Call doctor

you and your brain will need to think a lot about it before finally doing it. What doctor do I need to call? And why? Is there anything wrong with me?

A better way of writing that to-do would be:

Call Doctor Smith and schedule a control appointment for March

You could just call the doctor whenever you read the to-do. No need of thinking about it again.

For all of my to-dos, I try to explain them as clear as possible. No matter if I write tasks for my personal to-do list or for my projects at work, if the tasks are explained and worded well, it is much easier to work on them for me.

At the beginning, it was hard for me to have clear, explaining wording on my to-dos. It seemed a bit strange to explain what to do next to myself. I mean, I already know that?

What helps me here is to imagine that I write the to-do for someone else.

In Austria and Germany, we have the tale of “Heinzelmännchen” (hine-cell-man-ken for my english-speaking friends).

You can imagine them as santa’s elves for personal use. They will come at night and do all of the work you couldn’t finish throughout the day.

In the classic tale, those little friends helped a shoemaker. They visited his shop and found a lot of unfinished shoes and boots on the floor. So they decided to help the shoemaker out and finished all of the shoes and boots for him.

Imagine, those little elves would come to your desk to help you out. There are no unfinished tasks lying around on the floor. You are working on your computer all day. So they start your computer, hack the password and open your to-do-list-app.

What a pity! They have no idea what to work on. They are wondering:

"What does all of that mean?"

Nothing is explained or clear, everything is confusing. Sorrowful, they leave your desk again without helping you. They are sad. You are sad. No happy end. If you only had well-explained and clear to-dos on your list!

Even if this might be a bit childish, I try to keep that in mind. If the “Heinzelmännchen” ever visit my office, they will find a clear-worded, well-explained to-do list to work on. No chance I will miss the opportunity of free workforce.

And if they won't come around, I still have a to-do list my brain likes to work on. Because the to-dos are so clear, even elves would understand.

Create a repeatable field in Laravel Voyager in 5 steps

dominikjosch — Thu, 16 Dec 2021 09:06:44 +0000

Laravel Voyager is a great tool for creating custom backends for all different kinds of apps or webapps. I used Voyager to create an app backend for a customer of mine. Beside some other functionalities, the app contains different kinds of recipes.

For every recipe, I need to store ingredients. Every ingredient has an amount, a unit and some text. In the end, an ingredient section could look a little like that:

(No style applied yet, though)

So what I needed to do is create a repeatable field with multiple inputs. Every Input should be able to be deleted again.

Here are the 5 steps we need to take to get that thing working:

1. Add your field to the database

For this example, we will store the ingredients as JSON in the recipe-table to keep it simple.

You could (or should) use another table for the products as well and store the ingredient-connection in a meta-table. Especially if you want to filter recipes based on the ingredients or implement other ingredient-based functionalities, this might be a thing.

I think JSON is okay here in this example. As a first step, we thus have to add a field called "ingredients" that contains "LONGTEXT" or "JSON" to the recipe-table:

2. Register your custom form field

To use a custom field in BREAD, we need to create a custom form field and register it. First, let's create a new folder and a new file in app/FormFields/IngredientsFormField.php:

namespace App\FormFields;

use TCG\Voyager\FormFields\AbstractHandler;

class IngredientsFormField extends AbstractHandler
{
    protected $codename = 'ingredient';

    public function createContent($row, $dataType, $dataTypeContent, $options)
    {
        return view('formfields.ingredients', [
            'row' => $row,
            'options' => $options,
            'dataType' => $dataType,
            'dataTypeContent' => $dataTypeContent
        ]);
    }
}

If you use this code-snippet, just keep in mind to change the codename and the path of the view based on your needs.

We now need to tell Voyager to use this form field in BREAD. This can be done in the register()-function in AppServiceProvider.php:

use TCG\Voyager\Facades\Voyager;
use App\FormFields\IngredientsFormField;
...
public function register()
{
    Voyager::addFormField(IngredientsFormField::class);
}

When creating a BREAD, we should now be able to choose our custom form field type as input type:

Note: The Edit-Page for BREAD-Elements now wont work anymore, because we didn't create a view for the form field already. That will be our next step.

3. Create your View

We create two new files for managing the view-layout in the customer backend. First, we create app/resources/views/formfields/ingredients.blade.php.

This view will contain the main logic of my input field. The path to this view is specified in app/FormFields/IngredientsFormField.php.

Next, let's check if there are already ingredients stored in the database. If they are, we decode the JSON and store it in a variable.

Afterwards, we add some markup for the table header.

If we already have data in the database, we create rows for every ingredient by including a subview. We could use custom components here as well.

If we have no data, we create an empty ingredient-row.

At the end we provide a button to add more ingredients.

@php
    $data = json_decode($dataTypeContent->ingredients);
@endphp

<div id="ingredients-container">
    <div class="ingredients-header-row row">
        <div class="voyager-header-col col-md-2">
            <p class="control-label">
                Amount
            </p>
        </div>
        <div class="voyager-header-col col-md-2">
            <p class="control-label">
               Unit
            </p>
        </div>
        <div class="voyager-header-col col-md-8">
            <p class="control-label">
                Name
            </p>
        </div>
    </div>

    @if ($data)
        @foreach ($data as $row)
            @include('formfields.parts.ingredient', ['index' => $loop->index, 'row' => $row])
        @endforeach
    @else
        @include('formfields.parts.ingredient')
    @endif
</div>
<button type="button" name="add" id="addIngredient" class="btn btn-light">Add Ingredient</button>

In app/resources/views/formfields/parts/ingredient.blade.php we create the markup for a single ingredient view.

By default, if we have no row to display, we use an empty row and start our count by zero. We will also add a delete-button for each row already.

@php
    $default_row = new \stdClass();
    $default_row->unit = "";
    $default_row->amount = "";
    $default_row->ingredient = "";
    $row = $row ?? $default_row;
    $index = $index ?? 0;
@endphp

<div class="row ingredients-row" id="ingredients-row-{{$index}}" data-index="{{$index}}">
    <div class="col-md-2">
        <input
            type="number"
            class="form-control ingredients-amount"
            name="ingredients[{{$index}}][amount]"
            required
            value="{{$row->amount}}"
        />
    </div>
    <div class="col-md-2">
        <input
            type="text"
            class="form-control ingredients-units"
            name="ingredients[{{$index}}][unit]"
            required
            value="{{$row->unit}}"
        />
    </div>
    <div class="col-md-7">
        <input
            type="text"
            class="form-control ingredients-ingredie"
            name="ingredients[{{$index}}][ingredient]"
            required
            value="{{$row->ingredient}}"
        />
    </div>
    <div class="col-md-1 remove-ingredients-col">
        <button class="btn btn-danger remove-ingredients-row-btn" data-remove-row={{$index}}>
            X
        </button>
    </div>
</div>

As you can see, I wrote the names of the inputs in array-notion.

This way, we submit the data as array without extra code needed. We are basically creating an ingredients-array, where each row is a new array-element. anto.online did a pretty good job describing how this works over here.

Those elements further contain the amount, the unit and the ingredient. This provides the following structure in the database:

[
    {
        "amount":"200",
        "unit":"ml",
        "ingredient":"Milk"
    },
    {
        "amount":"50",
        "unit":"ml",
        "ingredient":"Water"
    }
]

After finishing the view, the edit-page should work again. We should also be able to insert one ingredient already. To make the field repeatable, we need to add some Javascript.

4. Make it repeatable

We create a new file: public/js/ingredients.js.

This file will contain all the code to make the field repeatable. We use vanilla Javascript here, but you can, of course, use whatever library you like.

To use the file, I added it to webpack.mix.js:

.js('resources/js/ingredients.js', 'public/js')

I also added the file to the existing additional_js-array in config/voyager.php.

'additional_js' => [
    'js/ingredients.js',
],

As we are working with Javascript now, we need to make sure we are compiling our code as well.

If you didn't change the package.json already, compiling should work with npm run watch or yarn watch.

In the Javascript-file, we add three functions:

main
addIngredientRow
removeIngredientRow

The main-function is looking for the addIngredient-Button. If this button exists on the page, it adds the addIngredientRow-function to the button. It also adds the removeIngredientRow -function to all the remove-buttons.

addIngredientRow clones the first row, clears it, sets the id to the current row count and appends it as a new, clean row to the container.

removeIngredientRow removes the current row from the DOM by using the remove-row-dataset.

const addIngredientRow = (firstRow) => {

    const rowsCount = document.querySelector(".ingredients-row:last-child").dataset.index + 1;

    const newRow = firstRow.cloneNode(true);

    newRow.id = `ingredients-row-${rowsCount}`;
    newRow.dataset.index = rowsCount;
    newRow.querySelector('.ingredients-amount').setAttribute('name', `ingredients[${rowsCount}][amount]`);
    newRow.querySelector('.ingredients-amount').value = "";
    newRow.querySelector('.ingredients-units').setAttribute('name', `ingredients[${rowsCount}][unit]`);
    newRow.querySelector('.ingredients-units').value = "";
    newRow.querySelector('.ingredients-ingredients').setAttribute('name', `ingredients[${rowsCount}][ingredient]`);
    newRow.querySelector('.ingredients-ingredients').value = "";
    newRow.querySelector('.remove-ingredients-row-btn').dataset.removeRow = rowsCount;
    newRow.querySelector('.remove-ingredients-row-btn').addEventListener('click', (e) => {removeIngredientRow(e)}, false);
    document.querySelector('#ingredients-container').appendChild(newRow);
}

const removeIngredientRow = (e) => {
    e.preventDefault();
    document.querySelector(`#ingredients-row-${e.currentTarget.dataset.removeRow}`).remove();
}

const main = () => {
    if(document.querySelector("#addIngredient")) {
        const firstRow = document.querySelector("#ingredients-row-0");
        const addButton = document.querySelector("#addIngredient");
        addButton.addEventListener('click', () => {addIngredientRow(firstRow), false});

        const removeButtons = document.querySelectorAll(".remove-ingredients-row-btn");
        removeButtons.forEach((btn) => {
            btn.addEventListener('click', (e) => {removeIngredientRow(e)}, false);
        })
    }
}

main();

If you are working with JSON-values as well, this should already work for you most of the time. In some cases, we might need to change the save-function to encode the JSON-values. Let's take a look at that in step five.

Note:

Your Javascript-code is not working? Try to restart npm run watch. It could also be necessary to restart php artisan serve. In some cases you might need to clear your config by running php artisan config:cache before running php artisan serve.

5. Save your data

If JSON is not working right away or you would like to store the data in another way, you will need to override the save-method of your model.

You should find your model-file in your app or your app\modelfolder. Most of the time, it has the same name as your BREAD. If you can't find it, just create a file in your app-folder that containins the following code.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Recipe extends Model
{

}

Don't forget to add the model to your BREAD:

If you want to work with the input-field now, just extend the save-method of your model. In my example, I performed a JSON-encode on my ingredients. You can do whatever you like here.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Recipe extends Model
{
   public function save(array $options = [])
    {
                // Do whatever you want
        $this->ingredients = json_encode(request()->input('ingredients'));
        parent::save();
    }
}

That's it.

We created a custom repeatable formfield in Laravel Voyager in just five steps. Hope this works for you as well. Thanks for reading!

P. S. I am planning to do more Laravel and Laravel Voyager Content. Follow me on Twitter @dominikjosch, if you don't want to miss it.

Stats, Sources, Versions

I used Laravel v8.76.2 and Voyager v1.5 for this example. You can find a tutorial on how to create a custom formfield in Voyager in the official documentation as well.

Two obvious tips on how to use video courses the right way

dominikjosch — Tue, 24 Nov 2020 10:20:51 +0000

TL;DR: Take notes and change code.

Video Courses are all out there in dev-land. And to be honest, most of them are really great. Nearly every dev in the world knows (or at least has heard of) Wes Bos, Scott Tolinski, Brad Traversy or Florin Pop. Just to name a few of the great teachers out there.

For me, video courses always help me to get into a new topic. They help me to learn new stuff or to get a different point of view on things I already use.

But too often, I forgot the great things I learned really fast. And if I didn't forget things, I wasn't able to bootstrap a project on my own after the course.

The tips you get here are no secret. Most instructors tell you in the course about those tips as well. But if you are a bit like me, chances are, you ignored them.

So, if you have the same problems, here are the two obvius, not secret tips on how to use video courses best, that really helped me out.

Take notes

This tip is so simple, it feels like cheating. But yet, it is very effecitve.

First, when you take notes, you have to focus on the course and the code. Taking notes beside coding is hard work and the course might take longer, because you will have to pause. But you won't get distracted so easily by your phone, reddit, ...

When taking notes on subjects, you have to think about what you learned and write it down. And while reflecting and using your own words, you use a lot of brain-juice. And our brain is not stupid - when thoughts need a lot of brain-juice to produce, they count as important. And it is harder to forget them then.

You also get a document to look things up later on, which might be helpful. You could even turn those notes into a blogpost as well.

Improvise. Adapt. Overcome.

Most of the times, you will build a small project in your video course.

Make this project your own.

You can change names, colors, contents and even some components while developing.

This way, you wont just be the person re-typing all the stuff you see, but you will have to think about all the things on your very own as well.

If you don't want to change things while the course is running, you should add some new features to the project afterwards. Add those rankings to your minigames!

Another cool thing is to build something completely new based on the things you learned. You just built a knowledge-database? Fine! Now build a music-database on your own! (Not the best examples, I know... )

If you have problems with your new features, get out on Stack Overflow, Twitter or ask a friend. When talking about your problems and your code, you will learn even more.

Conclusion

Those tips seem to be really obvious. Of course they seem, because they really are.

But when doing courses, I tend to be distracted. Taking notes keeps my focus where it should be - on the course. I also have notes, that I can look up later and I learn better when writing things down.

And in fact, you learn better, when you build stuff on your own. If you adapt your course project - in the course or later, you will have to think about what to do next. This way, you will get better at starting your own projects.