DEV Community: Jan Schröder

4/100 days of code

Jan Schröder — Mon, 02 Nov 2020 23:29:58 +0000

Today was a short one and I need to revise the rules. Was it that I need to spend an hour on the code for it to qualify for the challenge? Well, that might get rough.

Here’s to a little rule breaking in advance, because after a work day, preparing dinner and spending time with my partner, it’s late and I might not have an hour. Anyhow, I’ll do my best.

Today I managed to get the pics from my new (to me) digital Camera onto my computer to take a peek and see that yes, ¾ of them are as bad as I expected. But there are some pictures that will do just fine as article pics and such and of course I will keep doing more.

One goal of mine is to use only my own pictures in this project.

So after downloading darktable and realizing that editing the pictures will be a major time sink, I set up the pieces to make Gatsby fetch my articles from dev.to, which will function as my note pad for now.

3/100 days of code

Jan Schröder — Sun, 01 Nov 2020 22:15:11 +0000

Today was more productive.

Set up the initial styling of the navigation bar, which is something that I still am hesitant about to implement from scratch. The approach is to use a list and then style it horizontally with css grid.

I really like css grid.

Then got started with css-in-JS, which I know is a controversial thing and I am not yet totally convinced, but I decided to go with it for this project. So I can say that I tried them and I guess it doesn’t hurt to know my way around them in case I come across another codebase that uses them.

2/100 days of code

Jan Schröder — Sun, 01 Nov 2020 22:07:54 +0000

So, just the second day in and it already becomes apparent, what a challenge this will be to daily work on a personal project.

It was Halloween today and since we’re in lockdown mode here in Hamburg, there was no going door to door for the kids, but they kept the spirit up and we just went knocking doors inside the house.
So it was a long day and then I still wanted to get a run in tonight so after the kitchen was done and the clock was showing 1:15 a.m. I still had to sit down to write some code.

Almost didn’t make it, but I did.

Going by the course, I was implementing the navigation in the page. After going through the various possibilities to do this, we set the basic layout of the page in a gatsby-browser.js file which offers to wrap everything rendered, i.e. a first level wrapper.

1/100 days of code

Jan Schröder — Sat, 31 Oct 2020 10:04:43 +0000

Getting started on the project. A personal portfolio page for a graphical artist/ developer.
So, could be for me or could be a template. We’ll see.

It is based off of Wes Bos’ Gatsby course. In order to get started quickly, I am using his starter files to lay out the base of the page.

I like the course and am following along and this project is going to be a transfer of what I learned.

Avoiding stale elements in Capybara tests

Jan Schröder — Wed, 25 Sep 2019 00:00:00 +0000

Yesterday night, I encountered a new error: StaleElementReferenceError.

What it is? It is an error thrown by Selenium WebDriver, in my case used in a Capybara test with Ruby.

It is thrown, when the reference to the selected element changed.

In my case, I was testing an uploading function and was checking to see the preview image once the upload had finished.

The mistake in writing the test that I made, was that I was declaring a variable, where I was storing the selected element.

Then('(I )see the preview of {string}') do |name|
  preview_image = page.find(".preview-image")
  expect(preview_image[:style]).to include(name)
end

After the image appeared, React changed the DOM and put a new element with the image. This caused the reference inside the variable to get, well, stale. And so, on one of the retries, Capybara threw the error.

This situation can easily be avoided, by writing the test without the variable like so:

Then('(I )see the preview of {string}') do |name|
  expect(page.find(".preview-image")[:style]).to include(name)
end

This way, Capybara checks for the element on every retry.

Mindset

Jan Schröder — Fri, 06 Sep 2019 00:00:00 +0000

On of the key factors that decide if a student will be able to 'learn' a language, i.e. communicate with natives in the given language fluently, is their willingness to change their mind. And I don't mean change a decision.
I mean, change the way they think. Change the way they approach situations and interactions.
Every language has a different way to see the world. To experience live. It's a different culture and making that culture your own, really adapt to it, is a very deep and personal journey.

This observation was not made be me, originally. I heard it articulated by Gabriel Wyner and my own experience of teaching hundreds of students from all different kinds of backgrounds agrees with it.

After teaching German as a foreign language for 7 years fulltime, I transitioned into software development and, after a self-teaching period of ~8 month, have been employed as a front-end developer for the last 14 month.

Looking back, I notice how my mindset changed in the transitioning time. I changed the way I thought about things and I adopted to the culture of software development.

Not only that, I took the necessary step of making it my own. Now I can say, I am a software developer.

That is not to say, that I stopped learning. Far from it. The more I learn, the more I realize how little I know. But I am able to articulate my own ideas. Express my thoughts in code.

That is what will make you fluent in anything. Absorb it and then, make it your own.

Expand & collapse groups of items in a list.

Jan Schröder — Mon, 25 Mar 2019 09:11:06 +0000

My ticket this week: Show documents with the same file name as a version stack.

Tech used: Javascript, React, lodash

Some background. In the app, the user can upload files and attach those files to messages. Since our backend only cares about the unique id, that every uploaded file gets, users can upload multiple files with the same name. The creation date on the saved files is the timestamp from the upload.

If we're now to display a list of those files, we'll get lots of duplicates, which can get out of hand pretty quick. Like so:

|- oneFile.pdf      21.03.2019 16:34
|- oneFile.pdf      19.03.2019 14:23
|- anotherFile.pdf  18.03.2019 15:10
|- oneFile.pdf      14.03.2019 10:50

Not too cool, especially since 95% of the times, the user would not need to access the older versions.

So, my task last week was to improve this, by only displaying the most recent file of each these groups. Each file that had multiple versions should display a button next to it, that would display the older versions when clicked.

To get started, let's take a look at our incoming data. We receive references to the files from the backend as objects in an array that looks something like this:

const files = [{
  id: 1,
  file_name: 'oneFile.pdf',
  created_at: '21.03.2019 16:34'
}, {
  id: 2,
  file_name: 'oneFile.pdf',
  created_at: '19.03.2019 14:23'
}, {
  id: 3,
  file_name: 'anotherFile.pdf',
  created_at: '18.03.2019 15:10'
}, {
  id: 4,
  file_name: 'oneFile.pdf',
  created_at: '14.03.2019 10:50'
}]

This is a flat array, with all the objects that are going to be displayed.

The first thing I did, was grouping the objects by the file_name key. For that, I used the groupBy() function from lodash.

const groupedFiles = groupBy(files, 'file_name')
// Expected output:
// { 
//  oneFile.pdf: {
//    { 
//      id: 1,
//      file_name: 'oneFile.pdf',
//      created_at: '21.03.2019 16:34
//    }, {
//      id: 2,
//      file_name: 'oneFile.pdf',
//      created_at: '19.03.2019 14:23'
//    } ...
//  },
//  anotherFile.pdf: { ... }
// }

Now, we don't need those keys really. In order to display a list, the array was fine. Lodash offers a function for that: values().
Values() takes the values of an object and puts them into an array. Exactly what we need.

const groupedList = values(groupedFiles)
// Expected output:
// [{
//    { 
//      id: 1,
//      file_name: 'oneFile.pdf',
//      created_at: '21.03.2019 16:34
//    }, {
//      id: 2,
//      file_name: 'oneFile.pdf',
//      created_at: '19.03.2019 14:23'
//    } ...
//  }, { ... }
// }

When we print this to the console. It should look something like this:

Array: [{{...}{...}{...}}, {{...}{...}}, ...]

Neat. Now we have our groups of files. Next is to render out the list.

This is the App component that contains our list. Here the files are passed to the List component as props.

import React from 'react';
import './App.css';
import List from './components/List'

const files = [{
  id: 1,
  file_name: 'oneFile.pdf',
  created_at: '21.03.2019 16:34'
}, {
  id: 2,
  file_name: 'oneFile.pdf',
  created_at: '19.03.2019 14:23'
}, {
  id: 3,
  file_name: 'anotherFile.pdf',
  created_at: '18.03.2019 15:10'
}, {
  id: 4,
  file_name: 'oneFile.pdf',
  created_at: '14.03.2019 10:50'
}]

const App = () => {
  return (
    <div className="App">
      <List files={files}/>
    </div>
  );
}
export default App;

Now on to the List itself.

import React, { useState } from 'react';
import { groupBy, values, orderBy, take, includes } from 'lodash';

const List = (props) => {

  // Take in the original array and group the files by filename 
  const groupedFiles = groupBy(props.files, 'file_name');
  const groupedList = values(groupedFiles);

  // Set a hook to manage the state of each list item.
  // Using an array, multiple items can get added. 
  // When an item is added to the list, the complete group will be rendered. 
  const [filter, setFilter] = useState([])

  // Here items are being added or excluded from the array in the hook.
  const toggleFilter = ({ file_name }) => {
    if (includes(filter, file_name)) {
      return setFilter(filter.filter(item => item !== file_name))
    } else {
      return setFilter(filter.concat(file_name))
    }
  }

  // This function takes one individual group and return the JSX elements to render the data
  const renderGroup = (group) => {

    // to make sure, that the most recent file is at the beginning of the group, sort by creation date
    const sortedGroup = orderBy(group, 'created_at', 'desc');

    // Only render the button on a list element that is the first of a group bigger than 1.
    // This could be done inline, but I think that it is cleaner this way.
    const renderButton = (file) => sortedGroup.indexOf(file) === 0 && group.length > 1;

    let files, buttonLabel;

    if (includes(filter, group[0].file_name)) {
      files = sortedGroup;
      buttonLabel = 'show less'
    } else {
      files = take(sortedGroup);
      buttonLabel = 'show more'
    }

    return files.map(file => (
      <li key={file.id}>
        <p>{file.file_name} - {file.created_at}</p>
        {/* We can render an element conditionally, by including it into a statement like the following. 
        The button gets rendered only when the renderButton() function returns true. Nifty. */}
        {renderButton(file) && <button onClick={() => toggleFilter(file)}>{buttonLabel}</button>}
      </li>
    ))
  }

  return (
    <ul>
      {groupedList.map(group => renderGroup(group))}
    </ul>
  );
};

export default List;

Let's walk through this. First, our component receives the ungrouped list through props. Then we take them in, group them as discussed above and finally pass them to the render function.

In the render function we first set up the elements which will contain our list. Then we take our array with the groups and use map() to iterate over it. Inside map, we get to process each group individually.

Now we need to decide wether we want to display all items or just the most recent one. Since we're going to render a button that enables thje user to switch between both, we need some form of state managment. A great opportunity to use hooks.

So we end up with a conditional statement that, depending on the state, passes all items of the group or just the first one.

Finally, we use map again to process the group. Here we return the JSX elements that we want to pass to the List component.

In order to not render the button on all the elements, we wrap the button element inside another conditional statement, so that the button only renders if the group is bigger than 1 and the element is at index 0 of the array.

And there you have it. Obviously there was no styling whatsoever done, but I hope this small example demonstrated some real life use cases for map(), conditional rendering and hooks in React, to set up a component to dynamically render a list of items.