teleren/devto huggingface dataset:
Klog 1: Cleaning up messes
Tags: python, opensource
Published: 2021-04-30 23:03:38

This is klog, a series of posts on my misfortunes and misadventures in maintaining my project [klarg](https://github.com/tominekan/klarg). The naming is a bit unfortunate, but it sounded (and still sounds) good. If you haven't checked it out, ~~what is your purpose in life?~~ why are you here?

This log (or klog 😏) is about my struggles to refactor the code. Those who have refactored code are very familiar with the discomfort of going through messy code and fixing it. The most painful part was realizing that I wrote such **evil** code. Feelings aside, the problem was that a simple parsing library does not need to contain over _**1000**_ lines of code. It's simply not necessary.


# The Problem(s)

![1062 lines of code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9aa4lwnt4myhdu2n0sm.png)
<center>_the problem_</center>

I had a set of functions that I needed to call two times, one being for a command line subcommand, and another for a command line command (hmm 🤔, that sounds confusing). Anyway, the way I implemented it was that I copied and pasted the function definition from the command to the subcommand, with both the string and number functions, with minor edits. This meant that if any _oof_ happened to my code, I was in deep trouble. I would have to go and change 4 instances of the code, each with different customizations. Not only that, but inside each copy, there were multiple copies. Just think about that (or look at it)

![Three copies of the same code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k21vkraoyzc6i3nnj7cc.png)
<center>_big oof_</center>


This is twelve copies that need to change if anything goes wrong. 


# The Process
I decided that I would make a set of base functions, I would then rebuild on top of them and run the tests to make sure nothing broke. I also decided that I would try to remove as much copying as possible, therefore, I would base (haha) my number collecting function on my string collecting function.

# The Result
Somehow, I got exactly what I wanted (maybe it's just me, but what developers envision in their head and what it actually becomes a lot of the times doesn't match up). I reduced the code size **19%** (203 lines). I uploaded it to GitHub and made a new release.

![Much Reduce](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adqfhud8292xitvmjhno.png)
<center>_🔥👌🔥_</center>


# The Oof Factor
While creating a new release, I found out that I had klarg as v0.0.1 instead of v1.0.0.

# Conclusion
The end.
Frontend Roadmap
Tags: brazil, english, webdev, frontend
Published: 2021-09-06 23:57:06

# Internet 

Learn about how Internet and browsers work, client and server and the main communication protocols between them. 

What you should learn: 

- What the Internet is
- What is HTTP
- HTTP/3
- How browsers work
- How DNS work 

# Learn HTML 

HTML serves to build the skeleton of a web page. Learn about each tag functionality, learn about semantic HTML and learn the basics of SEO. 

# Learn CSS 

CSS serves to style your web page. Following the human body analogy, CSS would be the page skin. 

# Learn Javascript 

Javascript is what allows you to define your page behavior. With Javascript, you can, for example, execute actions in response to events, like a click event. 

# Learn Git 

Git is a code version manager that serves to maintain control of changes made in your code, as well as the date and author of those changes. 

Git is even more efficient in a situation where many people need to teamwork in the same code base. 

# Learn Package Management

Learn to use a package managing tool like NPM is important because those packages supply ready code to repeating tasks.

# Conclusion

This post was inspired by the website Developer Roadmaps. See the complete Frontend roadmap [here](https://roadmap.sh/frontend). In that page, you will find the continuation of that flowchart and links to where you can learn every described concepts.
Homer Simpson in CSS... with a single HTML element
Tags: css, html, showdev
Published: 2021-09-06 23:24:26

---
title: Homer Simpson in CSS... with a single HTML element
published: true
description: A responsive drawing of Homer Simpson done in CSS, using a single HTML element.
tags: css,html,showdev
//cover_image: https://direct_url_to_image.jpg
---

The other day, I did a lightning talk about [CSS art and accessibility](https://alvaromontoro.com/blog/67979/creating-accessible-css-art) at the Hamburg HTML meetup. Before the meeting, someone commented about drawing a Simpson character in CSS but using a single element... so I decided to give it a try, and here it is. A responsive drawing of Homer Simpson in CSS, using only one HTML element:

{% codepen https://codepen.io/alvaromontoro/pen/vYZKxQj %}

If you like The Simpsons and enjoy coding/looking at CSS drawings, [check my collection of CSS Simpsons](https://codepen.io/collection/DrwLdN).
Project: Automate migration of Amazon Connect Contact flows from one Instance to another
Tags: aws, amazonconnect, python, react
Published: 2021-09-06 22:29:20

This will be a short post about one of my side projects which I recently completed. This post is a description and workings of an utility which will help automate the process of migrating Contact flows from one Amazon Connect instance to another.

Currently the process of Amazon Connect Contact flow migration is very manual where developers have to export the flows from one instance and import on another instance manually. So this utility will help automate the process of exporting and importing with just few clicks. A video about the utility in action can be found here:
https://www.youtube.com/watch?v=tiwDdcNyo20  

The full post can be found here:
https://amlanscloud.com/connectmigrate/
JS13K: A journey through music? (Last 7 Days) 🎶
Tags: javascript, devjournal, challenge, gamedev
Published: 2021-09-06 21:59:03

I made several prototypes of the game and no one that worked properly on game design. I think to being closer to making the game, but it's sad anyway. In the meanwhile I am now able to make polygons with Canvas and make a responsive game even on mobile.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bkuhiozacsh591vzo4p.png)
<figcaption>One of the layout I made. I like the idea of having four buttons, but it's confusing for the players.</figcaption>
Feedback appreciated for prototype app
Tags: webdev, discuss, help
Published: 2021-09-06 21:40:31

I bit ago I started an experimental productivity [app](https://jadenconcord.github.io/tt1/) for task management. It is unfinished and solely experimental.

I would like feedback of the efficiency of the app for task management and the sufficiency of features. Note: passkey and user data are unencrypted as this is only an experiment.
iOS System Design 25 days challenge
Tags: ios, systemdesign
Published: 2021-09-06 21:16:58

Hey dev.to 

I am taking the oath to finish 25 days challenge to do one system design from iOS every single day

If you have been looking out for help on iOS system designs and my post helps you please let me know I will harder and increase the number of questions i can cover everyday ! 

Day:1 
Dt: 7/Sept:- Design a News Feed App
Can you try to design a news feed app in iOS ? 
Answer :- I have designed a small system in which the app starts with AppDelegate / SceneDelegate 
1. On didfinishlaunch calls for the navigation manager:- 
This manager is a Singleton class and has its own viewmodel to handle the logic which screen to load on applaunch
It could be a login screen or List of feeds for an already logged in user. This depends on the view model logic 
2. Lets say viewmodel logic tells its time to show login screen when first time the app was launched. Then we show a login screen which is not part of our scope for now. But let say we stored a flag - logged_in inside userdefaults when log in was succesful
3. After which we open the Feeds List screen directly and this feature has view, viewmodel and a presenter layer. 
The viewmodel is the one that calls for data to be shown on the list, it passes the data to the presenter which is then applied proper mascara before passing it to the view which then displays the feeds 
4. The viewmodel here connects with a layer called data fetcher which internally calls two parts one is networking layer and the other one was the database
5. Database passes all the data that it has but then also calls the feeds api to get the latest data.

I am done for today, I know my notes are not the best today, please keep patience with me, I will make it better everyday and oneday you will enjoy reading these articles.
Video preview on hover with HTML and JavaScript
Tags: html, javascript, webdev, tutorial
Published: 2021-09-06 21:13:24

In this post, I will be showing how to add a preview feature for the videos inside your HTML page.

First, I will be using this simple HTML code as the base to create the preview feature:

```html
<video>
  <source 
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
  />
</video>
```

So, to start, we should create the `startPreview` and `stopPreview` functions. To contextualize, the preview will be played during 4 seconds, starting after the first second at a playback rate of 50%.

The `startPreview` will set the values so that the preview will be played as mentioned, and `stopPreview` will reset the values to the default ones.

```js
const video = document.querySelector("video");

function startPreview() {
  video.muted = true;
  video.currentTime = 1;
  video.playbackRate = 0.5;
  video.play();
}

function stopPreview() {
  video.currentTime = 0;
  video.playbackRate = 1;
  video.pause();
}
```

After it, we should create the event listeners so that the preview can be played on hover. To accomplish this, a timeout will be used to stop the preview after 4 seconds.

```js
let previewTimeout = null;

video.addEventListener("mouseenter", () => {
  startPreview();
  previewTimeout = setTimeout(stopPreview, 4000);
});

video.addEventListener("mouseleave", () => {
  clearTimeout(previewTimeout);
  previewTimeout = null;
  stopPreview();
});
```

It's important to clear the timeout every time the user leaves the video area, because it can happen that a previous timeout stops the video when the user enters the video area for a second time before the 4 seconds.

---

Here is the result:

{% codepen https://codepen.io/juanbelieni/pen/jOwMaaG %}
Github page, which version are you anyway?
Tags: github, ci, versions, pages
Published: 2021-09-06 21:13:06

I was working on my game and couldn't figure out which version was deployed to github pages. So I [added this](https://github.com/ubershmekel/nihongo-shooter/blob/c7c02c37d2f2e62e1e2b2be89fbad365537ee619/.github/workflows/main.yml#L36) to my github deploy action:

```
- name: save version.json file
  run: >
    echo '{ "hash": "'$(git rev-parse HEAD)'" }' > dist/version.json
```

And now I can see the git hash of the live version at https://ubershmekel.github.io/nihongo-shooter/version.json

I could probably also include more information like a label and show it in the game. But this is good enough for my needs. I'll probably include that line in all my github page deploys. Note you may or may not need to store the `version.json` in a `dist` folder. Cheers.
Build Tools and Extensions I Use In Front-End Projects
Tags: webdev, css, frontend
Published: 2021-09-06 20:57:11

## Build Setup

**TL;DR** - I use Eleventy and Sass CLI, and have created a few other build helpers.

I have fallen in love with the static site generator Eleventy - so much so, that I even own the domain [11ty.Rocks](https://11ty.rocks).

Eleventy is a key part of my setup now for every project. The great thing about it is that you can mold it to what works for you, including adding onto its build process.

{% youtube p81J7G1qFAM %}

> For an 11ty overview, check out [my post about 11ty features](https://11ty.rocks/posts/going-beyond-static-with-eleventy/).

I typically start a new project from my [11ty Sass Skeleton Starter](https://github.com/5t3ph/11ty-sass-skeleton) which includes build processing steps using the Sass CLI.

Another step of my build process related to CSS is using postcss to process my styles with autoprefixer and cssnano. You'll see that in the `postbuild` step of the skeleton starter.

> Interested in using Sass via CLI build commands, but not using 11ty? Here's [my gist on a setup which includes Sass processing and Browsersync](https://gist.github.com/5t3ph/077d788501508ea9f2eefda90c1473e0) without a static site generator or task runner.

I've also created a package to help me with developing accessible color palettes called [a11y-color-tokens](https://www.npmjs.com/package/a11y-color-tokens) which I use for more complex projects.

> Check out 🔗 [my full list of front-end resources](https://thinkdobecreate.com/#learn) I've created for developers

## VSCode Extensions

My top extensions that I appreciate no matter what language I'm writing (which for me currently means CSS, HTML, JS, C#) include:
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
- [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
- [webhint](https://marketplace.visualstudio.com/items?itemName=webhint.vscode-webhint)
- [axe Accessibility Linter](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter)

> Do you do code streaming or recordings? You may be interested in [how I setup VSCode for streaming and recording](https://dev.to/5t3ph/how-i-set-up-vscode-for-recording-a-screencast-be7)
LaTeX Errors: Tables and Figures
Tags: codenewbie, latex
Published: 2021-04-29 01:22:40

Hello :) this is going to be the last post about errors.

Talking about errors is essential because sometimes we have mistakes while writing, or we nest some forbidden inside other things, and if we do not know how to solve that error, we can not go further in our document. 

I need to tell you that these errors are the most common ones, but there are many more, so if you are expanding your knowledge in the LaTeX world you will have other kinds of errors, and you can learn from them :) 

# Erros in the `table` environment

> I am going to write the error in `this format`, the description of the error in *this format* and the possible solution in normal format

* `Extra alignment` *You have put an extra `&`, you forget the `\\` at the end of the row, you put a non-existing column number in `\cline{}`*
    - Delete the extra `&` or add another column
    - Put the `\\` at the end of the row
    - Check the number of columns that you have in your table and change the `\cline{}` command

* `Misplaced alignment tab character `&` ` *You put the `&` symbol in a wrong place while aligning*, Change the position of `&` in your table environment


# Errors in the `figure` environment

> I am going to write the error in `this format`, the description of the error in *this format* and the possible solution in normal format

* `LaTeX Error: File myFigure not found` *The figure myFigure is either not available or not in a proper format*
    - Check if the figure has the **same** name, remember that LaTeX is case-sensitive
    - Check if the figure is in the same folder where your `.tex` file is
    - Check if the extension of the figure that you want to put is compatible with the instruction that you are using
    - Check if the extension is the same as your figure

* `Illegal unit of measure` *You misspelled the unit measure in the `includegraphics` command or you use an unrecognized unit of measure*
    - Check your spelling of the unit of measure
    - Check if the unit of measure that you are trying to use is allowed

# Both environments

> I am going to write the error in `this format`, the description of the error in *this format* and the possible solution in normal format

- `LaTeX Error: caption outside float` *You put the `caption` command outside `table` or `figure` environment* Move the `caption` command inside the environments
New to Web Development? Let's show you three ways to setup a Local Server
Tags: webdev, html, css, server
Published: 2021-09-06 19:54:30

Photo by <a href="https://unsplash.com/@fantasyflip?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Philipp Katzenberger</a> on <a href="https://unsplash.com/s/photos/network?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

> This is a preview from my CSSBootcamp.com course.

If you're newer to web development, I understand it can feel a bit chaotic when you want to just start by building something simple. This video shows you how to setup a local server in three different ways so you can run your website on your machine "locally".

{% youtube UOqDO54NoMc %}

## #1. VSCode Extensions

If you're using [VSCode](https://dev.to/bradwestfall/new-to-programming-let-s-setup-vscode-2cio), you can probably setup a local server for static HTML, CSS, and JavaScript websites with an extension called "Live Server". Just go to the extensions section in VSCode and search for "Live Server"

![Screen Shot 2021-09-06 at 12.37.13 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9wxowhr0gx6n4ey2s2c.png)

Install it and then click the "Go Live" link in the footer of VSCode. Make sure you have a project folder open so the extension knows what folder to use as your server. See the video above for an example.

## #2. Starting a server from CLI

These next two options require just a little bit of CLI knowledge. Even if you don't much CLI, you'll need to learn it anyways as a web developer so take every chance you get to learn something new in CLI.

We're going to use a Python command to run a server on a Mac. Python comes installed by default on Macs so we don't need to do much. Even if you're not doing Python development, this is a very easy way to run a server when you need one.

Make sure you `cd` (change directory) to the one you want to use as your server's root path. Checkout the video if you need more help with that. Then do:

```bash
python -m SimpleHTTPServer 8000
```

Now go your browser put this in the URL.

```
127.0.0.1:8000
```

Do `Control+C` to quit the server when you're finished. Since it's a python server you may need to do `Control+C` twice.

## #3. Node and NPM with BrowserSync

If you already have Node installed (do `node -v` to see if you do), then you can use `BrowserSync` after you install it with

```bash
npm install -g browser-sync
```

Now you can just do from any folder and get a server

```bash
browser-sync
```

If you don't have Node/NPM installed, the video walks you through those steps as well.
Configure HTTP security response headers for Azure Static Web Apps
Tags: azure, security, webdev, beginners
Published: 2021-09-06 19:48:08

##Introduction

HTTP security headers is the most crucial part of the web applications that helps to protect against some variety of attacks most likely cross-site scripting, clickjacking and other script attacks, configure HTTP security headers is frequently forgotten by Developers! So, I recently checked my blog on [securityheaders.com](https://securityheaders.com) and results indicated that HTTP security headers are not configured so I decided to put some HTTP security headers for my Azure Static Web Apps.



###Recommended HTTP security headers

1. **Strict-Transport-Security**

2. **Content-Security-Policy**

3. **X-Frame-Options**

4. **X-Permitted-Cross-Domain-Policies**

5. **X-Content-Type-Options**

6. **Permissions-Policy**

### Configure HTTP security headers
You can create a json file called ( staticwebapp.config.json ) in the root of the web site and put the configuration like below then deploy it to your Azure Static Web App host.

```json
{
      "globalHeaders": {
        "content-security-policy": "frame-ancestors 'self'; 
         upgrade-insecure-requests",
        "X-Frame-Options": "SAMEORIGIN",
        "X-Permitted-Cross-Domain-Policies": "none",
        "Referrer-Policy":"no-referrer",
        "X-Content-Type-Options": "nosniff",
        "Permissions-Policy": "autoplay=()"
    }
  }

```
How to build your own Chatbot and Voicebot from Scratch. - Ultimate Tutorial Series
Tags: machinelearning, nlp, flutter, webdev
Published: 2021-09-06 19:45:08

If you are looking to learn to build your own chatbot from scratch. Here is a list of useful resources to get you started. I am a Google Developer Expert and here is a list of content curated by me.
1. <b>Learn how to build a chatbot from scratch.</b> In this ultimate chatbot tutorial, you will learn how to build a basic to an advanced level chatbot that can be integrated into multiple platforms like the web, Facebook messenger, telephone, chat, or messages. {% youtube 6GLFcm7dGiY %}

2. In this part 2 of the ultimate chatbot tutorial, you will learn how to build a basic to an advanced level chatbot that can be integrated into multiple platforms like Facebook messenger, WhatsApp, Twilio, and more. <b>Create a Facebook and WhatsApp Chatbot using Dialogflow</b>
{% youtube bccFFjk76IA %}

3. Learn to <b>connect to backend and integration via fulfillment and webhooks.</b> Learn to integrate with Google Calendar, set appointments, etc. Connect Chatbot to Backend
{% youtube 8ao93nfjeSo %} 

4. Continue to integrate and <b>create a Slack bot, Telegram bot, & Line bot using Dialogflow.</b> Create a Slackbot, Telegram bot & Line bot
{% youtube -9BQ6tCEjTw %}

5. <b>Learn how to add rich responses and SSML for your chatbot.</b> SSML is so cool. - Learn to add rich responses like cards, images, lists, suggestion chips, etc - Rich responses for different platforms like Google Assistant, Facebook, Messenger, Slack, etc. Add Rich Responses and SSML to your Chatbot
{% youtube R27eiWHKYZQ %}


6. <b>Learn how to create your own 3D Digital/Virtual Assistants or Digital Humans.</b> 
{% youtube gjCqS91Vl98 %}


7. Take it a bit further. In this tutorial, you will learn how to build your own flutter application from scratch and also learn how to integrate Dialogflow into the Flutter application. <b>Build your own Chatbot and Voicebot app using Flutter and Dialogflow</b>
{% youtube 4elnjgA7iP8 %}

8. <b>Learn how to hand over or transfer the chat from bot to actual live agent.</b> You will build a simple Dialogflow agent, a Node.js server, and a web interface for handling text-based conversations from a Dialogflow agent to a human operator. Chatbot to Human Handoff from Scratch
{% youtube EOAypIKmzyY %}

9. <b>Understand your users better using Sentiment Analysis.</b> You will learn how to build a chatbot and make it smarter by using the Dialogflow Sentiment Analysis that helps you understand the user's mood or sentiment.
{% youtube elYkFU2SWIQ %}

If you find the content useful, <b>subscribe to the TECH WITH SACH channel and be part of the weekly live streams for more.</b>