DEV Community: Julian Pufler

Annoyed by Microsoft Teams' new Icon? Here's the Solution

Julian Pufler — Mon, 09 Oct 2023 22:01:44 +0000

Microsoft's recent update to the Teams app brought more than just routine enhancements. In a manner reminiscent of their approach with the Outlook redesign, they introduced a new iteration of Teams alongside the existing one. This fresh addition is named Microsoft Teams (work or school) and prominently displays a "New" badge on its icon in the lower-right corner. Meanwhile, the original version has been rebranded as Microsoft Teams classic and retains its familiar icon.

Personally, I don't find it problematic to have both versions coexisting on my system, with the hope that the older one will eventually be phased out in future updates. What truly irks me, however, is that persistent "New" label on the icon – it's enough to drive anyone a little crazy.

Fortunately, there's a simple solution to restore the classic icon to the new Teams app:

Open Finder and navigate to the "Applications" folder, where both Teams apps are located.
Right-click on both apps and select "Get Info." This action will bring up two separate windows.
In the "Get Info" windows, you'll see the app icons. To replace the new app's icon with the classic one, drag the old app's preview image (the icon) and drop it onto the small icon next to the new app's name, as demonstrated in the provided GIF.
Congratulations! You've successfully updated the app icon to match the classic version. If you find that the old icon still appears in your Dock, remove Teams from the Dock and then re-add it. This should ensure that the correct icon is displayed.

By following these steps, you can resolve the annoyance of the new Teams icon and enjoy a seamless Teams experience with the icon you're used to. Cheers!

From Code to Slope: AgentConf 2023

Julian Pufler — Thu, 20 Apr 2023 10:09:19 +0000

This year's AgentConf was an unforgettable experience for my colleagues and me. The event brought together professionals from across the tech industry, with talks and open discussions on topics ranging from web development to machine learning. But what really made this conference stand out was the sense of community and connection that we all felt.

In this article, I want to share our experience at AgentConf 2023 and the skiing trip that followed. From the lessons learned in the conference sessions to the thrills of the slopes, we hope to give you a glimpse into what made this event so special.

Day 1

The day started with Kent C. Dodds making us do squats in the morning, and it went on with him talking about Progressive Enhancement and why JavaScript should enhance rather than be your experience.

As the day went on, we became increasingly excited for the next day's talks, because we hadn't expected all of this to be so gripping. And right before lunch time, Nadia Makarevich’s talk called “React myths and legends” turned everything we thought we knew about rerendering in React upside down.

So to summarize, the high quality of the talks on day 1 set the tone for the rest of the conference!

Day 2

We started our day by listening to Max Stoiber explaining how to “get lucky” like he did by maximizing your luck surface area. Sara Viera got us to play around with a new programming language through her interactive Rust talk called “Rust for the rest of us” and we got our minds completely blown by Christoph Nakazawa when he introduced the crowd to his soon-to-be-released game built only using HTML, CSS and Javascript. He could use all of the separate game components right in his presentation and combine them in single slides. It was a fantastic presentation which we all won’t ever forget, as it felt more like he was playing around than actually presenting.

The slopes

After day two at AgentConf was over, those of us who had planned to go on the skiing trip boarded the bus to Lech. We then had dinner at our hostel and afterwards went down to the cellar where we discovered ping pong tables. Soon, we were joined by other attendees and even some of the speakers, and we spent the rest of the night playing ping pong and enjoying each other's company. It was an unexpected way to end the day and it was a testament to the sense of community and connection that the last days had fostered among the people.

These 2 days of skiing were an unmatched experience! Not only did we have fun on the beautiful slopes of Lech, we got lots of insights into React and the Chrome Dev-Tools, the benefits of progressive enhancement and we were also introduced to exciting new technologies such as Rust and AI language models. However, the most rewarding aspect of the conference was the opportunity to meet and network with like-minded professionals from the industry. It was great to put faces to names and connect with individuals who we previously only knew from Twitter.

We will definitely be coming back for next years AgentConf!

Native HTML5 Input Validation: Build Better Forms

Julian Pufler — Mon, 10 Apr 2023 12:40:09 +0000

While basic HTML5 form validation already provides a useful way to validate user inputs, it is limited to basic validation techniques such as pattern matching, string length, or number ranges. Fortunately, there is a HTML5 API that allows you to set and trigger custom validation messages for form inputs, providing a more flexible and user-friendly native validation experience.

By utilizing setCustomValidity(), you can define your own error message that will be displayed before submitting. When used in combination with reportValidity(), it can further improve the user experience by triggering the invalid event and reporting the validation problem to the user at a certain point.

Below I'll explain the benefits of using setCustomValidity() and reportValidity() and provide an example on how you can use them to improve your form validation process.

Consider a scenario where you need to set up a form to capture a start and end date for a booking request. You need to ensure that the start date is smaller than or equal to the end date while the user is still picking dates. At this point, most people will start looking for libraries, which often add lots of unneeded code to your app, to take care of the validation logic.

This is where the setCustomValidity() function comes in handy. You will just need to perform a check every time the input event is called on your inputs and then set a custom error message if the check fails.

Let's take a look at the example:

As you can see in the example, you are also able to reset the custom error message by setting it to an empty string. At the end of the event handler you can see a call to the reportValidity() method on the end date field. It triggers the invalid event and displays the error message, if any, to the user directly. If not called, the error message would only be displayed when you try to submit a parent form.

In addition to providing a flexible way to validate user inputs, using setCustomValidity() together with reportValidity() can also further improve the user experience by providing informative error messages and reducing the number of validation errors. By leveraging this native browser API you can simplify your form validation process while still providing a user-friendly validation experience, without using any library.

I hope you enjoyed this article and that I could help you! Show me what you build with this browser API!

If you are already using setCustomValidity or have ideas for how to use it, feel free to comment below!

PS: I have attached another example below which shows how you could validate if a username is already taken before the user needs to submit their request. Try 'john_doe', 'jane_doe' or 'bob_smith.

I built a badge API for your GitHub README

Julian Pufler — Thu, 06 Aug 2020 09:41:19 +0000

pujux / badge-it

An API serving useful badges for your GitHub Profile README 🚀🎉 Formerly known as git-badges.

You probably heard of the new GitHub profile READMEs, right?
If not you, check out my last article so you know what this is all about! Basically, you can now add a README and thus display markdown content directly on your profile page and that's awesome, because it allows us to add dynamic content to a profile.

Soon people started building projects that served these dynamically generated images so people could use them and I thought that was really cool!

I came across a visit tracker for READMEs and quickly found out it wasn't working anymore, so I figured I'd just build it myself and see how it works.

I quickly spun up a new node app on my dedicated server and played around with it, it worked great. I initially wanted to call the project 'gh-visitors' or something like that but then I thought that there might be a few other types of badges that people would want to show on their profile so I called the project 'git-badges' to leave open the possibility of more than just visit tracking.

I built the API using ExpressJs and MongoDB and the SVG generating is done by shields.io.

Soon someone started working on a badge that shows how long you have been on GitHub, so I had the idea to dig around in the GitHub API docs. After that I added another badge that show how many repositories you have publicly available.

You can embed the badges on every service that supports markdown but the visit tracker will only be updating the count if the request comes from a github server to mitigate people faking visit counts.

Visits badge (puf17640/git-badges)

Years badge (puf17640)

Repos badge (puf17640)

If you have an idea for a new badge, please let me know either by creating an issue on the repository or by writing a comment down below! 👍

GitHub Secret: Add a README to your Profile

Julian Pufler — Thu, 09 Jul 2020 19:33:14 +0000

So I just played around with the 'repository creation' page on GitHub and found a secret which I wasn't aware they added, so I thought I'd share it with you guys!

If you try creating a repository named exactly after your GitHub username, a little message pops up telling you that you've found a secret. Let me show you!

You found a secret! puf17640/puf17640 is a ✨special ✨ repository that you can use to add a README.md to your GitHub profile. Make sure it’s public and initialize it with a README to get started.

It's as easy as that, create a public repository with your username and add a README.md file to it. The README will then be automatically added to your profile.
You can see my GitHub profile below.

Since it's markdown, you can add links and pictures and everything else you can add to a normal README file.
Awesome, isn't it?

Have fun adding a detailed and cool description to your GitHub profile! I will update mine soon since what you see above is just what I played around with, I went straight to writing the article you just read! 🤪

Spreading, Destructuring and Rest Parameters in Javascript

Julian Pufler — Sat, 20 Jun 2020 18:01:54 +0000

Intro

Since the 2015 version of the ECMAScript specification Javascript developers got access to a lot of new functionality regarding working with arrays and objects. In this article, I am going to explain 'spreading', 'destructuring' and the 'rest parameters' by showing you examples of how they can be used to reduce your code length or make it more easily understandable.

These concepts are not common in other programming languages so they can be something completely new for many developers, even ones that have been in the game for a long time.

Spreading

The spread syntax (...) is a very helpful technique when working with arrays or objects since it allows you to unpack and expand objects or arrays and make shallow copies of them.

Spreading objects

Spreading can be used to copy an object, like Object.assign(), or update it.

Copy

// without spreading
const originalObject = { 
    enabled: true, 
    darkMode: false 
}
const secondObject = Object.assign({}, originalObject)

// with spreading
const originalObject = { 
    enabled: true, 
    darkMode: false 
}
const secondObject = { ...originalObject }
console.log(secondObject)

// Output:
{enabled: true, darkMode: false}

Keep in mind this only creates a shallow copy of the object and nested objects will still be passed by reference.

Update

Updating objects is effortless using spreading, so let's add another property, stayLoggedIn to our originalObject.

const originalObject = { 
    enabled: true, 
    darkMode: false 
}
const updatedObject = { 
    ...originalObject, 
    stayLoggedIn: true 
}
console.log(updatedObject)

// Output:
{enabled: true, darkMode: false, stayLoggedIn: true}

One thing that has to be noted when updating nested objects is that they have to be spread as well, because they will be overwritten if you do not.

const originalObject = { 
    enabled: true, 
    settings: { 
        darkMode: false 
    } 
}
const updatedObject = { 
    ...originalObject, 
    settings: { 
        stayLoggedIn: true 
    } 
}
console.log(updatedObject)

// Output:
{enabled: true, settings: {stayLoggedIn: true}}

As said above, the settings object will be overwritten. To solve this, you need to spread the nested objects like this:

const originalObject = { 
    enabled: true, 
    settings: { 
        darkMode: false 
    } 
}
const updatedObject = { 
    ...originalObject, 
    settings: { 
        ...originalObject.settings, 
        stayLoggedIn: true 
    } 
}
console.log(updatedObject)

// Output:
{enabled: true, settings: {darkMode: false, stayLoggedIn: true}}

Spreading arrays

Using the spread syntax, you can simplify quite a lot of common tasks, like duplicating arrays.

Duplicate

const originalArray = ['A', 'B', 'C']
const copyArray = [...originalArray]
originalArray.pop()
console.log(copyArray)

// Output:
['A', 'B', 'C']

Cool, right? This creates a shallow copy of the array, this means that all top level properties will be cloned but nested properties will be passed by reference still. But that's not the end, you can also concatenate arrays way easier now.

. Concat

const first = ['A', 'B', 'C']
const second = ['D', 'E', 'F']
const union = [...first, ...second]
console.log(union)

// Output:
['A', 'B', 'C', 'D', 'E', 'F']

You can also split up a string into an array using spreading like this:

const string = 'awesome'
const charArray = [...string]
console.log(charArray)

// Output:
['a', 'w', 'e', 's', 'o', 'm', 'e']

Destructuring

Destructuring is very helpful because it lets you assign array values or object properties to multiple variables at once.

Destructuring objects

Before destructuring came, if we wanted to have specific properties of an object mapped to normal variables, we had to assign every property separately.

const obj = { 
    enabled: true, 
    darkMode: false, 
    stayLoggedIn: true 
}
const enabled = obj.enabled
const darkMode = obj.darkMode
const stayLoggedIn = obj.stayLoggedIn

Now with object destructuring, this can be shortened down to just one line instead of three, check it out!

const obj = { 
    enabled: true, 
    darkMode: false, 
    stayLoggedIn: true 
}
const { enabled, darkMode, stayLoggedIn } = obj
console.log(enabled, darkMode, stayLoggedIn)

// Output: 
true
false
true

As you can see, all properties got mapped to variables with the same name. If you don't want to have your variables named exactly like the properties, you can use a colon (:) to map the right value to another variable name.

const obj = { 
    enabled: true, 
    darkMode: false, 
    stayLoggedIn: true 
}
const { enabled: activated, darkMode, stayLoggedIn } = obj
console.log(enabled, activated)

// Output:
undefined
true

As you can see, the obj.enabled property got mapped to the variable activated instead of enabled. You can easily decide the names for your variables while keeping it's simplicity.

You can also destructure nested properties, it works just like you would expect it to.

const obj = { 
    enabled: true, 
    settings: { 
        darkMode: false,
        stayLoggedIn: true
    } 
}
const { settings: { darkMode, stayLoggedIn } } = obj
console.log(darkMode, stayLoggedIn)

// Output:
false
true

In this example, we mapped the nested properties to variables and didn't bother with any other values, they do not get deleted or anything by this, they just don't get mapped.

Destructuring can also be used to access properties of primitive types, like String.length.

const string = 'awesome'
const { length } = string
console.log(length)

// Output:
7

Destructuring arrays

Arrays can also be destructured, they are guaranteed to preserve their order which means you can destructure it just like an object.

const date = ['09', '04', '2001']
const day = date[0]
const month = date[1]
const year = date[2]

As you can see, this is nearly the same as it was with the objects, before destructuring, we had to assign them separately after another which can take up a lot of lines in your code.

const date = ['09', '04', '2001']
const [day, month, year] = date
console.log(day, month, year)

// Output:
09
04
2001

You can also skip values by not specifying a variable name.

const date = ['09', '04', '2001']
const [day, , year] = date
console.log(day, year)

// Output:
09
2001

Nested arrays can also be destructured, just like nested objects.

const nested = ['A', 'B', ['C', 'D'], 'E']
const [a, b, [c, d], e] = nested
console.log(a, b, c, d, e)

// Output:
'A'
'B'
'C'
'D'
'E'

Object destructuring and array destructuring can be combined into one assignment and you can even use default parameters when destructuring, let me show you!

const obj = { 
    enabled: true, 
    darkMode: false, 
    roles: ['user', 'admin', 'moderator']
}
const { 
    enabled, 
    date = new Date(), 
    darkMode, 
    roles: [userRole, , moderatorRole] 
} = obj
console.log(date)

// Output:
Wed Jun 17 2020 09:52:20 GMT+0200 (Central European Summer Time)

Rest parameters

Instead of allowing you to unpack or update objects and arrays, rest parameters makes it easy for you to create arrays with an indefinite amount of arguments.
The syntax is the same as it is for spreading (...).

const foo = (...args) => console.log(args)
foo('A', 'B', 'C', 'D')

// Output:
['A', 'B', 'C', 'D']

As you can see, all arguments passed to foo were aggregated into the array args.

Rest parameter syntax can only be used in two ways, as the last parameter, catching all arguments that are not declared, or as the only parameter of a function, catching all arguments as shown above.

const foo = (first, second, ...args) => console.log(first, second, args)
foo('A', 'B', 'C', 'D')

// Output:
A
B
['C', 'D']

That's not everything, though!

const { enabled, ...originalObject } = { 
    enabled: true, 
    darkMode: false,
    stayLoggedIn: true
}
console.log(enabled, originalObject)

// Output:
true
{darkMode: false, stayLoggedIn: true}

As you can see, objects can also be destructured using rest parameter syntax, but it is also possible with arrays, let me show you!

const [first, second, ...rest] = ['A', 'B', 'C', 'D']
console.log(first, second, rest)

// Output:
A
B
['C', 'D']

TLDR:

Spreading can be used to unpack arrays and objects
Destructuring can be used to create multiple variables from arrays or objects
Rest parameters can be use to create arrays with indefinite size

You should definitely be using them in your next project! Have fun experimenting with these three techniques.

Building a COVID19 Dashboard using Node.js

Julian Pufler — Sat, 16 May 2020 15:36:06 +0000

Hey there! My name is Julian.

I am one of the core-maintainers of the NovelCOVID API, which is an open-source API for COVID19 related data.
In this article, I would like to show you how easy it is to build a COVID19 dashboard using our API.
A few weeks ago, I built Covid Detail, Covid Overview and Covid19 Daily Digest with the data provided by the API.

This guide is for people that know a bit about coding and are interested in the topics presented.
Complete beginners might have a hard time understanding some of the concepts portrayed in the article.
I advise experienced coders to check out the API Documentation and my API Wrapper.

Preparation

We are going to build a Node.js project using Express and EJS (a templating engine). You will need to have Node.js installed.

Create a new folder for your project, you can choose any name but I will call mine covid-dashboard.
Open the folder in your terminal and run npm init -y to generate a package.json file.
Create a file called app.js and two folders called public and views in the root of the project.
In public/, create a main.css file and in views/, create a index.ejs file.

Your project directory should now look like this:



  covid-dashboard
  ├── package.json
  ├── app.js
  ├── public
  │   └── main.css
  └── views
      └── index.ejs

Step 1: Installing dependencies

Alright, so after preparing our project, we can start adding our dependencies. For this project, we are going to need 3 packages:

Express (web framework)
EJS (templating engine)
NovelCOVID (API wrapper)

Install them by running:
npm install --save express ejs novelcovid

Step 2: Setting up the server

After installing all the packages we will use, it's time to code!

First we need to require our packages express and novelcovid, then we can create our express object by calling express().
After that we set our view directory to the folder views/ and specify our view engine, in this case ejs. Then we tell express to expose the contents of public/ on the server root so we can use them in the frontend.
Now we can start our server by calling app.listen(...) and passing in our port of choice, in my case 8080, and a callback.

I have also specified a GET route in the example below. If you start your server now using node ./app.js and open localhost:8080/ in your browser, you will receive a greeting.
The server works!



// app.js
const express = require('express');
const api = require('novelcovid');

const app = express();

app.set('views', './views');
app.set('view engine', 'ejs');
app.use(express.static('./public'));

app.get('/*', (req, res) => res.send('Hello!'));

app.listen(8080, () => console.log('running on port 8080'));

Step 3: Creating our views

In this step, we are going to use EJS to interpolate javascript variables into EJS templates to create HTML that can be sent to the client. It sounds way more complicated than it actually is, you will see in a bit.
In EJS you can use <%= variable %> to interpolate variables into your EJS template which will then be transformed into HTML.



<!-- index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>COVID19 Dashboard</title>
  <link rel="stylesheet" href="/main.css">
</head>
<body>
  <div class="container">
    <h1>COVID19 Dashboard</h1>
    <table>
      <thead>
        <tr>
          <th>Name</th> 
          <th>Cases</th> 
          <th>Active</th> 
          <th>Recovered</th> 
          <th>Deaths</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Global</td>
          <td><%= cases %></td>
          <td><%= active %></td>
          <td><%= recovered %></td>
          <td><%= deaths %></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Don't worry if you don't understand what this means yet, just keep on reading.

Step 4: Displaying data using EJS

The EJS example above shows a table with 1 row, the first column of the row being 'Global' and its other columns being interpolated variables.
That's all we need to do in EJS.

But where do these values come from and how do we pass them over to the template?

Let me break this up into 2 small steps, getting the data and passing it to the template.

Getting the data As mentioned at the beginning, we will use the novelcovid package to retrieve data from the API. We will use the function api.all() to fetch global data. Don't forget that the wrapper exposes asynchronous functions, so you have to make the request handler async.
Passing it to the template res.render(...) lets you specify a template view's name and optional variables to be interpolated and sends the HTML created from that template view and the variables passed to the client. ```js

// app.js
...
app.get('/*', async (req, res) => {
const global = await api.all();
res.render('index', { global });
});
...

If you start up your server again using `node ./app.js` and head over to `localhost:8080/` in your browser, you should see something like this:

![Dashboard with global data](https://user-images.githubusercontent.com/17516174/82122085-b622af80-9791-11ea-83ca-62b91f7f6601.png)

Amazin how easy that was, right? But it doesn't really look that good, yet. 
Let's add all countries to the list and then use CSS to style the table.

# Step 5: Country Data and Styling
The `novelcovid` package exposes a wide variety of functions to get data from the different endpoints we offer. One of them is `api.countries()`, which lets you retrieve a list of all countries and their data. **Exactly what we need!**

> But how can we make EJS create a table row for each country?

That's very easy. EJS lets you do loops and if clauses. I mean the name literally is 'Embedded JavaScript', just let that sink in. If you wanna know more, head over to their [website](https://ejs.co). 
```html


<!-- index.ejs -->
...
<tbody>
    <tr>
        <td>Global</td>
        <td><%= cases %></td>
        <td><%= active %></td>
        <td><%= recovered %></td>
        <td><%= deaths %></td>
    </tr>
    <% for (const country of countries) { %>
        <tr>
            <td><%= country.country %></td>
            <td><%= country.cases %></td>
            <td><%= country.active %></td>
            <td><%= country.recovered %></td>
            <td><%= country.deaths %></td>
        </tr>
    <% } %>
</tbody>
...

After updating our template, we now need to pass a variable called countries over to our EJS template in our request handler, so let's do that.



// app.js
...
app.get('/*', async (req, res) => {
  const global = await api.all();
  const countries = await api.countries({ sort: 'cases' });
  res.render('index', { global, countries });
});
...

Spin up the server again and you should now see a big list of countries. Still ugly.
Let's add some styling. You can find my example main.css below but you can style it however you like!

The .container class is our wrapper for the table, I will make it a maximum width of 700 pixels and center it. The stylings for tr, th and td elements is for the table.



# main.css

body {

  box-sizing: border-box;

  margin: 0;

  font-family: 'Lucida Sans', Geneva, Verdana, sans-serif;

}

.container {

  width: 700px;

  text-align: center;

  margin: 0 auto;

  padding: 25px 0 0 0;

}

tr {

  text-align: left;

}

tbody > tr:not(:nth-child(2n)) {

  background-color: #eee;

}

th {

  font-size: 125%;

  padding-bottom: 10px;

}

td {

  padding: 5px;

}

td:not(:first-child) {

  text-align: right;

}

The dashboard is finished! Look how easy that was!

You can find all the code on Github.

I really hope you liked the article, if not, please send me feedback to my email. If you have any questions regarding the NovelCOVID API, join our Discord Server.