teleren/devto huggingface dataset:
Shall we web component?
Tags: html, webcomponents
Published: 2021-03-29 03:29:23

Hello there, you are probably wondering if web components are something you should use. Web Components are growing in popularity. Check out the graph. ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mckpq8uh47dzg5b6wli5.png). That image and more basic web component info comes from [here](https://web.dev/web-components-io-2019/).

Web components are custom elements that are open source. They can be picked up and used by anyone. There are so many tech stacks. Applications can built using Angular, React, Ember, Vanilla JavaScript, or basic HTML. Web components are functional, yet separate from the code. They can exist in any of these environments. 

Web components can help expand the HTML tags. Web components can mix together. Web components from different libraries can mixed on the same page. 

Using web components can be more efficient for businesses because web components work with any Javascript framework. Web components can make it easier on developers. Something does not need to be created every time, just create a web component once, and then share it across the company. This also ensures accuracy. If the web component is correct, it will create the same thing each time. There will be less coding error. [This link](https://viljamis.com/2019/why-we-use-web-components/) has some more info on why to use web components.
Thanks to the open source nature, improvements can happen faster, as more eyes can look at the web component. They also can be shared faster. 

[This article](https://dev.to/bennypowers/lets-build-web-components-part-1-the-standards-3e85) by Benny Powers (amazing name) takes a deeper dive into web components. 

YouTube (ever heard of it?) uses web components. I inspected the webpage and we can see the web component tags YouTube uses. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ymonkjarxby4fmri0xmz.png) You can then go [here](https://www.webcomponents.org/element/@polymer/iron-iconset-svg) to learn what that web component does. It allows users to define their own icon sets that contain svg icons.

EA uses web components. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xst8wigxyaq9bk0x5z1w.png) They do not appear to have any micro transactions or loot boxes in their source code. 

Even this newspaper, my central jersey, uses web components. The [iron-ajax](https://www.webcomponents.org/element/@polymer/iron-ajax) element "declaratively exposes network request functionality to Polymer's data-binding system." Don't pretend like you know what that means.  ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2klsdlsolamk0yo3umn.png) New Jersey sucks and they still have web components. New Jersey is just garbage overflowing from New York City. There is no reason for you to not try them out too, if New Jersey can do it.

![meme](https://media.giphy.com/media/3o6ZsZ8wXrsVCIsAkU/giphy.gif)
Here is a video discussing web components.
{% youtube kGMymEBODSs %}
ReactJS Giphy API Tutorial
Tags: webdev, javascript, react, tutorial
Published: 2021-03-31 03:14:56

Giphy is a pretty fun app with a huge amount of content. Lot's of big companies like Slack integrate with Giphy to add some fun to their product, but you might not realize that the Giphy API is free to use for developers as well.

![Giphy API demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/io39kbv9vgn1mj6ej7p0.jpg)

In this video I'll show you how to use one of their newer API features, automatically generating animated text with a bunch of interesting styles.

There's also a bunch of other cool API endpoints available for you to use that I cover towards the end of the video like:
* Search by keyword
* Pre-Built React Components provided by Giphy
* Trending Gifs
* Random and Weirdness sorted Gifs

{% youtube H8JpzxRoS18 %}

Link to Github Repo:
[https://github.com/renaissancetroll/reactjs-gitphy-api-tutorial](https://github.com/renaissancetroll/reactjs-gitphy-api-tutorial)
How to set Husky 4
Tags: codenewbie, vscode, react
Published: 2021-03-31 03:05:58

Hello guys, so this post is just a followup for a post I made at the beginning of 2020, and I recently updated it
{% link https://dev.to/mendoza/how-i-set-eslint-and-prettier-for-a-react-project-on-vs-code-3hp9 %}

# What is [husky](https://github.com/typicode/husky)
So basically husky is "Git hooks made easy" and we are going to use to automatically format all of our code that is staged for our commits, so we are going to use the "pre-commit" hook to run [pretty-quick](https://github.com/azz/pretty-quick) a simpler way to run our prettier scripts with configuration

# Installing packages

```bash
npm i -D husky@4 pretty-quick
```
that's it...

# Setting the scripts

```jsonc
{
// all of your package.json
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}
```

# Wrapping up
This is the simplest and quickest way to have "automatic formatting" on our commits, next time you run a commit, you will have a message something like this:
![Husky output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fvz2m5ft5ixxaywj013.png)
Not much to say but to leave any questions on the comments and I hope you find this post really helpful.
Brief look
Tags: esolang, showdev, language, freakc
Published: 2021-03-31 02:52:08

**The following contents might be offensive, please consider before reading, also, the language's now recreated, this is just the old esoteric one.**

# First note
Esolang, one of the weirdest species in the programming community, often heard as a joke, a programming language that brings frustrations or ridiculous rules to coders. While most esoteric programming languages are straight-up unusable or really hard to have theirs feet in any real world's use cases, there are still useful ones but with some quirks to make them esolangs, like Emojicode, Dogescript, Fetlang,... and FreakC is one of them.

# What exactly is FreakC ?
FreakC is a light-weight transpiled multi-paradigm esoteric scripting language with dirty (or even offensive) syntax, but technically, it functions just like a normal language and is able to create usable programs. It is very similar to Batch, created in Batch, and also transpiled to Batch.

# How is it any usable ?
Like I've mentioned earlier, FreakC is really similar to Batch plus some additional libraries and functionalities. So FreakC's very easy to use and it can do pretty much anything Batch can do. So technically, it is just Batch with dirty syntax.

To show its power, many examples were made [here.](https://github.com/FreakC-Foundation/FreakC/tree/master/Examples)

## Maybe a Hello World program ?
```
Swear[fnc] Hello, World
```

## FizzBuzz ?
```
PoopInt[fnc] count=1
PoopFnc[fnc] loop

DoIfFalse[fnc] %count% LSS 101 (
	EatFnc[fnc] end
) 

PoopInt[fnc] fizzbuzz=%count% %% 15
PoopInt[fnc] fizz=%count% %% 3
PoopInt[fnc] buzz=%count% %% 5


DoIf[fnc] %fizzbuzz% == 0 (
	Swear[fnc] FizzBuzz
) OrNot[fnc] DoIf[fnc] %fizz% == 0 (
	Swear[fnc] Fizz
) OrNot[fnc] DoIf[fnc] %buzz% == 0 (
	Swear[fnc] Buzz
) OrNot[fnc] (
	Swear[fnc] %count%
)

PoopInt[fnc] count++

EatFnc[fnc] loop
```

## Sum of list ?
```
Fuck[fnc] arrayfunc
CountBitches[fnc] "result" "1 2 3 4 5"
Swear[fnc] %result%
:: This will output "15"
```

## Game
I have actually written a text-based farming game entirely in FreakC: https://github.com/FreakC-Foundation/The-Farm-Man


Feel interested ? Try it now [right here.](https://github.com/FreakC-Foundation/FreakC)
What is BEM Methadology?
Tags: css, webdev, codenewbie, programming
Published: 2021-03-31 02:42:10


In this post we will discuss about the BEM in detail and why you should use it too. Let's go. 

The simplicity of the naming convention, along side the benefit of implementation makes this a awfully fashionable alternative. 
It creates standard and versatile CSS that's straightforward to scan, perceive and maintain.

I have used BEM as a naming convention for some time and it's created an enormous change!😉  
I feel like I no longer spend ages trying to figure out how to name things which means I get to spend more time focusing on the actual code. Additionally it fits rather well once used for making elements and style systems.

--- 

BEM - Block Element Modifier is a powerful and straightforward naming convention that helps you create re-usable components. It makes your front-end code easier to read, easier to work with, additional sturdy and easier to scale. 


### Block

A standalone entity that's meaningful on its own. Any DOM node can be a block if it accepts a class name. 

### Element 

Part of a block (usually the child element) that is semantically tied to the block. Element classes contain the block and element name separated by two underscores. 

Example: `.block__element`

### Modifier

Flags on blocks or element used to change appearance, behaviour or state. Modifier classes contain the block or element class they are applied to separated by two hyphens. 

Example: `.block__element--modifer`


--- 

BEM is easy to use for modular and reusable code. It's flexible, configurable and easily combined with other methodologies. The class names can sometimes get a little long but that's a small price for good code readability.😊

--- 

Thanks For Reading 🤟
This telegram bot built with Python and FFmpeg allows you to watermark photos and videos, on the fly
Tags: python, showdev, tutorial
Published: 2021-03-31 02:40:16

Telegram has become a fantastic alternative to WhatsApp and many people are loving it. It also has channels, where you can broadcast your feed to a large audience. Kinda like Twitter.

Are you a content creator or someone who shares lots of videos/images/infographics/gifs on a Telegram channel?

Then watermarking is a fantastic way to boost your brand image. Using a separate app or video editor is time-consuming, especially if you are producing content on the go, all the time.

I made a telegram bot that applies watermark on images, gifs, and videos.

{% github aahnik/telewater  %}

How does this bot work?

It is simple. 
- First of all, you create a bot account with the help of [BotFather](https://telegram.me/BotFather) in Telegram.
- You [deploy the bot to a remote server](https://github.com/aahnik/telewater/wiki/Deploy-to-Digital-Ocean) or [run it locally](https://github.com/aahnik/telewater/wiki/Deploy-to-Digital-Ocean) on your computer.
- You send a video/image/gif to the running bot. It will instantly watermark it and send it back to you.
- You can also add your bot as an admin to a group or channel. It will apply a watermark when you post a new media.

The bot is being actively developed. More new features have most probably been added when you are reading this.

For getting all the latest updates, join this telegram channel  [@tele_water](https://telegram.me/tele_water)(ad-free).

You can also star and watch the repository on [GitHub](https://github.com/aahnik/telewater).

This GitHub repository also has detailed documentation about all the following stuff related to the bot.

- [Environment Variables](https://github.com/aahnik/telewater/wiki/Environment-Variables)
- [Telewater CLI usage](https://github.com/aahnik/telewater/wiki/Telewater-CLI-usage)
- [Install and run using docker](https://github.com/aahnik/telewater/wiki/Install-and-run-using-docker)
- [Deploy to Digital Ocean](https://github.com/aahnik/telewater/wiki/Deploy-to-Digital-Ocean)
- [Run multiple instances](https://github.com/aahnik/telewater/wiki/Run-multiple-instances)


For any further help, feel free to [create an issue](https://github.com/aahnik/telewater/issues) in the GitHub repo.
Single ssh tunnel command with a jump
Tags: ssh, tunneling, command, jump
Published: 2021-03-31 02:11:28


If you are looking for how connect via ssh to a private server; that's commonly behind a other server or trough a firewall, this is a post I hope will help you.

The method most common used to access a remotely server is via a ssh connection, this command allow us create a channel, a secure channel, point to point type.

Even though I don't talk how set up your ssh in depth (but if you want i made a post talking about it, let me know), it is importan you know the basics about ssh use for implement this commands to pull up a tunnel with middle jumps.

The commands below show how pull up these tunnels with a single intermediary server and other one with two middle hosts. If you understand what is used to made it, you can use this theory in some software you know like as putty services.

### variables

* **[middle-server]** : Name or IP address from remote server you need cross.
* **[reach-host]** : Name or IP address from remote hidden host you need reach.

Using the tools that *Openssh* provides to us, we pull up a single tunnel:

```
ssh -fN username@[middle-server] -L 1030:[reach-host]:22
```

> Notice: This IP from reach host has two numbers to side; to the left we has the port we use to make the local connection through localhost ports. The other one, to right side, is the port protocol we decide use for this connection, the obviously answer is the port 22 of ssh protocol.

You must be asking what are these flags, well the first two (**fN**) is for send to background the process of this tunnel and *keep up the channel* and *avoid execute some extra command* on end side when the connection is established. You can see the complete documentation if you run the command 'man ssh' in you terminal.


Now, we well make a tunnel with two middle host cross to us end server we want to reach:

```
ssh -fN username@[middle-server] -L 1030:[second-middle-server]:22
```
This first tunnel above we define the connection with the first middle host jump.

```
ssh -fN -p 1030 username@localhost -L 1031:[reach-host]:22 -L 1032:[other-reach-host]:22
```
In this other one above, we connect the previous tunnel to use and reach the end host, in the flag *'-p'* we indicate we want connect through local port 1030 and make another tunnel in other local port (1031) for the end host we want to see and with the same scheme we can add another end host if we want. 

And is done, just need to do a ssh connection via localhost in the port defined for the reach host we was set. 

Some command like this:

```
ssh username@localhost -p 1031
```

if you have do made a connection before, you may know this is the usual ssh connection command.
I'm finally making a website!
Published: 2021-03-31 02:07:33

FINALLY!

After working on a CLI app, I was still feeling murky, struggling to visualize how it's like creating a website. BUT finally I am creating a website like a full-stack developer!

Honestly, this website was not easy since the learning curve was steep for me. What I struggled with.

1. REST
For some reason this was confusing for me. For example, I was creating a post for the get "/lesson/new". So I named it post "/lesson/new," but later I am told that this does not match REST. I was told that the post route was supposed to be "/lesson." Honestly, I am still confused about this.

2. Associations
I initially created a many-to-many relationship. But to stick to MVP, I decided to only have has-many and belongs-to relationships. By doing so, the tables I also initially migrated had become mixed up. I did notice this mistake until I was trying to create a "current_users" method. When trying to use this method, I would get an error on the browser saying "cannot find table 'join'." It was only then, I realized I had to go back and fix my tables and associations, which made me feel like I had to go back to square one. 

3. Forms
Forms shouldn't have been that hard but I learned the hard way that if you do not have the params and right variable, then your forms will not post the way it should. In my controllers, my local or instance variables would be called "lesson" while the params would be called "lessons." At one point, this became too confusing to the point the mix up gave me constant errors I would have to debug.

4. Styling
I wanted to stay true to Separation of Concerns, but unfortunately CSS styling became difficult to do. In my public folder, I tried to create CSS files for each Views page but for some reason the style would not show on the browser, requiring me to directly style in HTML. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6va45rrddc62isjrmchv.gif)

Here are all my struggles. Despite all of the challenges, I learnt so much more on debugging and how to become a better detective. More importantly, I became a better Googler. Instead of relying on my current knowledge, I solidified my habit to look up what I was unsure on and this helped a lot. 

Knowing that the next project will be another website makes me so excited and I can't wait to make a better one that will look more professional.
Serialização e Deserialização utilizando ES6
Tags: es6, javascript, ptbr
Published: 2021-03-31 01:57:10

Pra começar, explicando o JSON:
**JSON** é um formato para distribuição de dados “pela rede” e pode ser facilmente compreendido e gerado tanto por humanos quanto por computadores.

**Serialização**
Serialização é um processo em que um formato de dados é traduzido para um outro formato de dados (JSON) para ser facilmente distribuído.
O reverso da serialização é a deserialização, em que se transforma um formato de dados recebido em sua forma original, para que possa manipulá-lo e usá-lo no aplicativo.

Um exemplo de serialização é o a seguir:
```
let person = {  
  name: 'Atena',  
  age: 33
}; 
const serialized =   JSON.stringify(person); 
console.log(serialized); // {"name":"Atena","age":33}  
```

Para realizar a deserialização deve-se usar _JSON.parse_ como demonstrado a seguir:

```
  const storedItem = sessionStorage.getItem(MENUS_DOCS);
  if (storedItem) itemParsed = JSON.parse(storedItem);
```

O objetivo desse artigo foi ser um resumo rápido para quem precisar realizar  a serialização.  
Mais informações podem ser consultadas em:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
Work and Study (At the same time)
Tags: productivity, challenge, devjournal
Published: 2021-03-31 01:05:26

Okay, this is my first post here. 
**I'm Giuly, I'm 24 from Argentina.**

I'm writting to distract myself from being tired and burn up. 
This year I challenged myself to have a full time job and take all the classes I have to take on my first year at University. 
Today I woke up at 6.30 am and I'm going to go to bed at midnight most likely. 
I'm still trying to figure out a ballance between Studying for all the classes I have, do homework, don't lower my productivity while working, mantain a relationship, sleep, eat well, have a life and don't die.

**I can tell you how that comes out along the way, but the thing is... I feel super motivated right now.**

I feel like I'm finally going down the way that I want and, even though I'm starting a career and I'm not fresh out of High School, I still feel like I can do it and It'll work out for me. I don't mind feeling sleepy and moody because deep down I know I chose to do this and I think **I can do it** 

I work on the Sales Area for a BIM company and it's cool, but along the way I want to work as a developer, I studied Java 8 last year and now I'm studying Systems Engineering at university. 

**6:30 AM**
*Wake up and take a shower*

**7:15 AM**
*Study and do some homework*

**8:30 AM**
*Start Working*

**1:00 PM**
*Lunch Break*

**2:00 PM**
*Go back to work*

**5:30 PM**
*Stop Work and get another Coffee, little break*

**6:15 PM**
*Classes Start*

**11:00 PM**
*Classes End*

**11:30 - 00:00**
*Go to bed*

Weekends are to study and get some rest. 
I'll be learning Python this year and I want to learn more about HTML, CSS and JavaScript (Don't have the time now but I know I will one day)

I'm open to any suggestions, advices, support or... just whatever comes, you can reach out to me

P.S. I got wireless headphones today and I think it was the best desicion to improve my life while being on my desk
설치형 vs 임대형 vs 입점형 쇼핑몰
Published: 2021-03-31 00:11:10

인터넷이 활성화되면서 가장 성공한 분야가 쇼핑몰인 것 같습니다.
인터넷 기술을 이용하여 물건을 판매하려는 경우, 지금은 다양한 선택지가 있습니다.

형태도 다양할 뿐 아니라 무엇보다 취급하는 업체가 엄청 많습니다.
오히려 어느 업체를 통해 어떤 서비스로 시작해야 할 지 혼란스럽습니다.

쇼핑몰을 시작할 때 선택할 수 있는 형태는 크게 3가지입니다.
**설치형**과 **임대형**, **입점형(오픈마켓)**입니다.

설치형은 가장 고전적인 방법이며 기술적인 지원이 되면 확장의 기회가 많습니다.
임대형은 제공되는 솔루션을 빌려 사용하는 형태입니다.
입점형은 백화점에 입점하는 것과 비슷합니다.

|구분|설치형|임대형|입점형|
|:----:|----|----|----|
|예|[영카트](https://sir.kr)|[메이크샵](https://www.makeshop.co.kr/)|[옥션](http://auction.co.kr/)|
|장점|기능 확장이 쉽다|많은 기능|시작하기가 쉽다|
|단점|기술이 필요,업체이전이 쉽다.|기능확장안됨,최적화어려움,이전 어려움|독자운영안됨|

위 표에서 알 수 있듯이 기술적인 문제를 극복하면 설치형이 오래 사업을 할 경우 많이 유리할 수 있습니다.
무엇보다 운영하면서 나타나는 부족한 부분을 프로그램 개발을 통해 계속 확장할 수 있습니다. 또한, 호스팅 이전이 자유롭습니다.

임대형인 경우, 호스팅 이전이 거의 불가능하지만 쇼핑몰 운영에 필요한 대부분의 기능이 이미 만들어져 제공이 됩니다.

입점형은 설치형과 임대형을 운영하는 경우 시장의 확대를 위해 추가적으로 이용하는 경우가 많습니다.
How to check if a file exists synchronously in Node.js?
Tags: node
Published: 2021-03-31 00:00:00

---
  title: How to check if a file exists synchronously in Node.js?
  published: true
  tags: Nodejs
  date: Wed Mar 31 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-if-file-exists-synchronously-nodejs
  cover_image: https://melvingeorge.me/_next/static/images/main-ca8594c4200f3bb652b1bc9f92929cc7.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-if-file-exists-synchronously-nodejs)
  
To check if a file exists synchronously, you can use the `existsSync()` method in the `fs` (filesystem) module in Node.js.

Let's say I want to check whether the path `/myFolder/myFile.txt` to my file exists or not. Here we can use the `fs.existsSync()` method and pass the path to the file to check as the first argument to the method

It can be done like this,

```js
// require filesystem module
const fs = require("fs");

// check if file exist
// using fs.existsSync() method
const doesFileExists = fs.existsSync("./myFolder/myFile.txt");

console.log(doesFileExists); // true
```

See the above code live in [repl.it](https://replit.com/@melvin2016/check-if-file-exists-synchronously-using-nodejs#index.js).

That's it! 😃

### Feel free to share if you found this useful 😃.

---
Simplify your configuration
Tags: configuration, productivity, programming, devops
Published: 2021-04-03 09:30:28

---
title: Simplify your configuration
published: true
date: 2021-03-31 00:00:00 UTC
tags: configuration, productivity, programming, devops
canonical_url: https://jhall.io/archive/2021/03/31/simplify-your-configuration/
---

This week I started helping a small startup evaluate and streamline their prototype application. Every time I start one of these projects, I’m struck in the face by how many common anti-patterns I see repeated on practically every project.

Today I want to talk about the over-use of configuration.

Here’s an (anonymized) snippet of the configuration for the application I’m working on (extracted from the docker-compose configuration):

```
      - S3_LOCAL_PATH=./static/
      - EMAIL_TEMPLATE=./static/notifications/email.yml
      - SMS_TEMPLATE=./static/notifications/email.json
      - PUSH_TEMPLATE=./static/notifications/email.json
      - FIREBASE_PRIVATE_KEY_PATH=./firebase.json
      - PUSH_NOTIFICATIONS_PATH=./static/notifications/push/push.json

```

This is just silly.

Literally none of these variables should exist.

Why?

This application is executed in one of two modes:

1. From a Docker container
2. In the local development path

Providing file paths to programs that execute from within Docker is almost by definition redundant. The whole idea of Docker is to package a complete application.

And in many cases, such as this one, development needs are no different. If there were some need to specify an alternate path, it would probably be enough to have a _single_ configuration variable pointing to the top-level path.

Needless to say, I’ll be ripping out these configuration variables and replacing them with constants. This will reduce complexity both in the program itself, as well as in the configuration and depoyment. Win-win for Dev and Ops!