teleren/devto huggingface dataset:
Migrating to Netlify, One Page at a Time
Tags: netlify, jamstack, serverless
Published: 2020-12-20 23:15:05

This session was conducted at Jamstack conference 2020. The speaker was Taylor MacDonald, partner and CTO, Ample. This session is all about how to migrate you old, monolithic app onto the Jamstack. From this session I was expecting to get information about how we can shift our old server-based web application to jamstack.

Firstly, he introduces us to a concept called gradual migration. This strategy simply refers to standing up a new site and selectively moving over pages one by one over time. With page we are referring to any accessible path on your site. The benefit of this strategy when compared to other approaches, like a big bang cut over for example, is that it carries much lower risk for your organization and allows you to ease into the new solution at your own pace while paying down technical debt as you go.

Then he shows how this can be achieved in real world. For example, we have a website assume that the engine powering the creation of these pages is a monolithic framework like drupal, wordpress or magento. Now the first step towards gradual migration is to stand up a new site and stick it in between the end user and the old site. So, we are kind of migrating a single page first, then run that page from new architecture and let the rest of the website run from the old architecture. Once the whole pages are shifted to new architecture, we can dispose old architecture and run the whole website on newer architecture. This it lowers risk.

When we create files for new architecture we can put redirects for the old file links. If the file is not created yet, then our links redirects them to the old website. So, the whole website is function accurately. Even the hostname does not change when redirecting to the old website. This was we can continuously host the whole website even while migrating to the newer Jamstack architecture.

Overall this session was quite interesting. The speaker even coded a live example demonstrating how this works. Having such an easy transformation to newer architecture such as Jamstack may be really tempting for various organizations to shift their websites from older architecture to newer ones.
I Built An Online Image Dithering Tool — Dither Me This!
Tags: showdev, webdev, webperf, vue
Published: 2020-12-20 23:01:38

Just wanted to share a tool I built. It lets you dither images online: [Dither Me This!](https://doodad.dev/dither-me-this).

I wrote an article on dev.to about [Why Your Website Should Be Using Dithered Images](https://dev.to/shadowfaxrodeo/why-your-site-should-be-using-dithered-images-3bad) if you want to know the thought process behind building this.

If you like it and want to know more about how dithering works, [wikipedia has a good article on it](https://en.wikipedia.org/wiki/Dither)

Hope you like it, let me know what you think!
Padrão Decorator em Python
Published: 2020-12-20 22:05:53

O Decorator é um **padrão de projeto estrutural**, este permite a adição de novos comportamentos para objetos, basicamente decorando (ou enfeitando) um objeto mais simples, usando agregação ou composição.

####Exemplo de código em Python
```python
class Component():
    def operation(self) -> str:
        pass


class ConcreteComponent(Component):
    def operation(self) -> str:
        return "ConcreteComponent"


class Decorator(Component):
    _component: Component = None

    def __init__(self, component: Component) -> None:
        self._component = component

    @property
    def component(self) -> str:

        return self._component

    def operation(self) -> str:
        return self._component.operation()

class ConcreteDecoratorA(Decorator):

    def operation(self) -> str:
        return f"ConcreteDecoratorA({self.component.operation()})"
```
A classe *Component* representa a interface que será seguida pelos componentes concretos(*ConcreteComponent*), poderão existir inúmeros componentes concretos diferentes.

A classe *Decorator* segue a mesma interface dos outros componentes, o seu principal propósito é definir a interface que irá "cobrir" todos os componentes concretos. Esta classe delega todo o trabalho para os componentes cobertos por ela.

A classe *ConcreteDecoratorA* chama os objetos cobertos e altera seus resultados de alguma maneira.

A implementação em Python não tem nenhuma particularidade em relação a implementação em Java.

***
**Referências**
[Padrões de Projeto](https://diogomoreira.gitbook.io/padroes-de-projeto/) (Diogo Moreira, 2020)
[Mergulho nos Padrões de Projeto - v2020-1.14](https://refactoring.guru/pt-br/design-patterns/book) (Alexander Shvets, 2020)
*Os códigos usados como exemplo foram retirados do livro Mergulho nos Padrões de Projeto.*
Cyberpunk 2077 Inspired Menu in CSS only! Video Tutorial!
Tags: css, webdev, beginners, tutorial
Published: 2020-12-20 22:02:48

Hey,

I have created a video where you can learn how to create a menu like in cyberpunk!
{% youtube Wmb-V87tmqI %}

If you just want to see the code it is here:
https://github.com/lampewebdev/cyberpunk-menu

**👋Say Hello!** [Instagram](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)
How do you format curly braces? {}
Tags: watercooler, discuss
Published: 2020-12-20 21:37:47

A discussion just for fun!

When coding in languages that use the curly braces `{}` do you place the curly brace on a new line or in line?

Like so:

Option A:
```C
int main()
{

}
```

OR

Option B:
```C
int main(){

}
```

Just curious what others use. I always use option A and I'm always glad to see a codebase using the same because it's so much easier to read for me 😅

So what about you?
Beginning the Journey of a Software Developer
Published: 2020-12-20 21:33:40

In 2019, I was working as a high school teacher in New Orleans, LA, and I was in the process of securing a position at new school. Everything was proceeding according to plan... until I learned what subject they wanted me to teach: Computer Science--the fundamentals of JavaScript to be exact. A modern high school hiring a Computer Science instructor to teach JavaScript programming principals makes total sense; however, I wasn't a computer science instructor. Prior to accepting this new position, I was a Film and Digital Media teacher.

Don't get me wrong, I am very technically savvy. I can operate sophisticated video and audio recording equipment and edit on a variety of platforms, but I had never been exposed to ANY programming language before, let alone JavaScript. However, my new school had a plan for that: I would attend an immersive teacher training course focused on JavaScript. For 2 weeks, I ate, drank and slept the fundamentals of JavaScript programming, and it was a completely eye-opening experience. 

As a filmmaker and storyteller, experiencing computer programming for the first time was like being introduced to an entirely new creative medium. It was both art and science. I taught JavaScript for a year, although that year was severely disrupted by the onset of the Covid pandemic in the United States. Continually exploring and engaging with the vast possibilities of computer programming was one of the things that kept me going in these chaotic times.
As the crisis deepened, I took that time to attend another immersive training course. Increasingly, I realized that I wanted to pursue this path full-force--I wanted to be a software developer.

Flash forward to December, 2020... Now I am student in Flatiron's Software Engineering program and enjoying every minute of it.
DevAnalytics at DOHackathon: some ideas for a better look&feel
Tags: dohackathon, devanalytics, angular, typescript
Published: 2020-12-20 21:28:38

I added some help in the header on how to generate an API key if you have none.

Besides, I've been thinking about how the data should be visualized instead of a table. I came up with the idea of using cards.

They are ugly so far, and they will stay like that for a couple of days. First, I'm going to create all the cards organized into different subsections, then I will do some styling.

![Cards are coming](https://dev-to-uploads.s3.amazonaws.com/i/97br0cavnoi2k3or9jx9.png)

Tomorrow, I plan to create all the cards for article stats.
Padrão Facade em Python
Published: 2020-12-20 21:19:53

O Facade é um **padrão de projeto estrutural**, a sua tradução significa fachada e é exatamente isso que se propõe a fazer. Este padrão consiste em fornecer uma interface simplificada para um conjunto complexo de classes.

####Exemplo de código em Python
```python
class Facade:
    def __init__(self, subsystem1: Subsystem1, subsystem2: Subsystem2) -> None:

        self._subsystem1 = subsystem1 or Subsystem1()
        self._subsystem2 = subsystem2 or Subsystem2()

    def operation(self) -> str:

        results = []
        results.append("Facade initializes subsystems:")
        results.append(self._subsystem1.operation1())
        results.append(self._subsystem2.operation1())
        results.append("Facade orders subsystems to perform the action:")
        results.append(self._subsystem1.operation_n())
        results.append(self._subsystem2.operation_z())
        return "\n".join(results)
```
A classe *Facade* fornecerá uma interface simples para um subsistema que contém muitas partes que trabalham entre si. Esta possuirá as funcionalidades essenciais que o sistema necessita para funcionar sem que seja necessário acessar as funções dentro das classes do subsistema, diminuindo com sucesso a acoplação entre elas.
```python
class Subsystem1:
    def operation1(self) -> str:
        return "Subsystem1: Ready!"

    # ...

    def operation_n(self) -> str:
        return "Subsystem1: Go!"


class Subsystem2:

    def operation1(self) -> str:
        return "Subsystem2: Get ready!"

    # ...

    def operation_z(self) -> str:
        return "Subsystem2: Fire!"


def client_code(facade: Facade) -> None:

    print(facade.operation(), end="")

```
As classes *Subsystem1* e *Subsystem2* são exemplos de subsistemas que terão suas funcionalidades implementadas pela interface. A classe *client_code* mostra como o cliente não precisará conhecer nada sobre os subsistemas para utilizá-los.

A implementação em Python não tem nenhuma particularidade em relação a implementação em Java.

***
**Referências**
[Padrões de Projeto](https://diogomoreira.gitbook.io/padroes-de-projeto/) (Diogo Moreira, 2020)
[Mergulho nos Padrões de Projeto - v2020-1.14](https://refactoring.guru/pt-br/design-patterns/book) (Alexander Shvets, 2020)
*Os códigos usados como exemplo foram retirados do livro Mergulho nos Padrões de Projeto.*
24 days of JavaScriptmas challenge by scrimba-my solutions
Tags: scrimba, javascriptmas
Published: 2020-12-20 21:06:59




> - `Day 1` *Candies*
<https://scrimba.com/learn/adventcalendar/note-at-0-00-co76b40cba6ceb371dc091518>
> - `Day 2` *Deposit Profit*
<https://scrimba.com/learn/adventcalendar/note-at-1-21-co1d34460aa981368aa10b24f>
> - `Day 3` *Chunky Monkey*
<https://scrimba.com/learn/adventcalendar/note-at-0-51-co16d4ec0bcb9b9202eac9f0e>
> - `Day 4` *Century From Year*
<https://scrimba.com/learn/adventcalendar/note-at-1-03-coedf49eea3244d8198ad2346>
> - `Day 5` *Reverse A String*
<https://scrimba.com/learn/adventcalendar/note-at-0-45-co3bc40618b41d5b9a2ee12a3>
> - `Day 6` *Sort By Length*
<https://scrimba.com/learn/adventcalendar/note-at-0-07-co15349d99a120208ea53ba05>
> - `Day 7` *Count Vowel Consonant*
<https://scrimba.com/learn/adventcalendar/note-at-0-47-co1e0410085a35e728a9c1d84>
> - `Day 8` *Rolling Dice*
<https://scrimba.com/scrim/coadb49a2a2f2d4e7d4edfce3>
> - `Day 9` *Sum Odd Fibonacci Numbers*
<https://scrimba.com/scrim/co2024763a71c9484fa5f7640>
> - `Day 10` *Adjacent Elements Product*
<https://scrimba.com/scrim/co8b34b1991ff981ca187ee52>
> - `Day 11` *Avoid Obstacles*
<https://scrimba.com/scrim/co4ed4ecc9b02f3ef5c4a2877>
> - `Day 12` *Valid Time*
<https://scrimba.com/scrim/cob08494d95064c82c1067153>
> - `Day 13` *Extract Each Kth*
<https://scrimba.com/scrim/co20e410884572eeeddf34cab>
> - `Day 14` *Maximal Adjacent Difference*
<https://scrimba.com/scrim/coa054f4a9bef55c8a1475653>
> - `Day 15` *JavaScript Carousel*
<https://scrimba.com/scrim/co81f4af9aa0b65b26ddc16cb>
> - `Day 16` *Insert dashes*
<https://scrimba.com/scrim/co2714910addecb1e5133ad15>
> - `Day 17` *Different symbols naive*
<https://scrimba.com/scrim/co5f64fe9a105d3bd0ef8fde1>
> - `Day 18` *Array previous less*
<https://scrimba.com/scrim/co3de4132b547de12b89ab6b7>
> - `Day 19` *Alphabet Subsequence*
<https://scrimba.com/scrim/co4b347e4a7771ae1310ab7d4>
> - `Day 20` *Domain Type*
<https://scrimba.com/scrim/co17a4551a4d3b7c284da7f06>
> - `Day 21` *Sum of 2*
<https://scrimba.com/scrim/cofb04f7ea954872808e6072b>
> - `Day 22` *Extract Matrix Column*
<https://scrimba.com/scrim/coa3343e089ad04a80652b695>
> - `Day 23` *Social media input challenge*
<https://scrimba.com/scrim/co3674a339e5319fcd7a514c6>
> - `Day 24` *Test your agility*
<https://scrimba.com/scrim/cof5649f59899cb614e51dad8>
Build a Modern Website from Scratch - FULL Tutorial 1+ hour [FREE]

Tags: beginners, tutorial, webdev
Published: 2020-12-20 20:56:03

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6g5ozyfpt7cgea13p8rj.jpg)


In the modern web, responsiveness is so important that your website needs to respond to every device with different screen sizes.

In this tutorial, we are going to build a Modern and Professional website using HTML, CSS, and a bit of JavaScript. 

We are going to use the Mobile-First Approach.

- If you want to follow along, be sure to download the resource: [HERE](https://learn.devchallenges.io/tutorial/highmos-responsive-website).

- Demo Website: [HERE](https://nghiemthu.github.io/higmos-responsive/)

__________ 🎥 Video Tutorial __________

{% youtube CrryRvjYsgc %}

__________ 🔖  Tutorial Structure __________

- INTRODUCTION 
[00:00]   - Introduction
[00:48]   - Project setups + Working Figma

- HERO AREA
[01:42]   - Hero Area section HTML
[06:13]   - Hero Area section CSS
[19:56]   - Hero Area section Responsiveness
[22:34]   - Organizing CSS + Comment sections

- ABOUT US 
[25:02]   - About us section HTML
[26:52]   - About us section CSS

- ACCOMMODATIONS 
[33:36]   - Accommodations section HTML
[38:17]   - Accommodations section CSS
[44:37]   - Accommodations section Responsiveness + Animation

- TESTIMONIALS
[49:35]   - Testimonials section HTML
[54:16]   - Testimonials section CSS

- IMPROVEMENTS
[01:01:32] - Fixed Top Navigation With Transition
[01:06:39] - Date input Safari, Default Date input value

- DEPLOYMENT
[01:07:53] - Deploy Website with Github Pages
[01:09:27] - Happy Coding

 __________ 🐣 About me __________

- I am the founder of https://devchallenges.io/
- Follow my Twitter https://twitter.com/thunghiemdinh
- Join Discord https://discord.com/invite/3R6vFeM
🔥Angular 11 + Tensor js 🔥
Tags: angular, ai, javascript, tensorjs
Published: 2020-12-20 19:51:49

https://youtu.be/FGXwTFy2s_w
Please do subscribe Angular + tensor 

May be future of #ui is in predicting hands by #ai 😋😄
It`s awesome to learn something new this weekend.😉

Angular 11 and Tensor js | Blur Background Video Calling | Finger Gesture Control
220 views

Angular 11 and Tensor js along with GitHub link in description below . 

TensorFlow.js is a JavaScript library developed by Google for training and using machine learning (ML) models in the browser. It’s a companion library to TensorFlow, a popular ML library for Python. Read on to learn about its features, its future, and how it can help you

📹 SUBSCRIBE OUR Channel 📹

💎 FOLLOW US ON  Twitter : https://twitter.com/MrkTutorials

💎 FOLLOW US ON  Instagram : https://www.instagram.com/mrk_tutorials/



Reach us at : 
📧 : mrktutorials@outlook.com  

Credits :
📒 Tutor Name & Editing : Sandeep Machiraju  
Follow on : 
⚡️ https://www.instagram.com/sandeep_mac...
⚡️ https://www.facebook.com/sandeepM20598

⭐️  GitHub Link : https://github.com/machirajusaisandee... ⭐️

Also Watch : 
➡️ Installing Node js : 
https://www.youtube.com/watch?v=AW0oa...

➡️ 5 Major Places to Use Node js
https://youtu.be/S5SMVGV-gs8

➡️ What is DOM ?
 https://www.youtube.com/watch?v=a0ax0...

Future of UI is in hands of Ai is proven correctly here 😄 .

These days zoom , google meet etc such video calling apps are mostly used , I wanted to know how bluring and virtual background are implemented.
Being huge fan of Ironman , I also wanted to control whats available on screen just with gestures , so implemented swipe gesture and todo list (move in list , check and uncheck ) (need to try lot more 😄)
Thankfully,Tensor js which is developed by google helped me solve problem without need of backend much

Useful links : 
➡  https://github.com/tensorflow/tfjs-mo...
 ➡  https://github.com/tensorflow/tfjs-mo...
 ➡  https://github.com/andypotato/fingerpose
Padrão Adapter em Python
Published: 2020-12-20 20:52:55

O Adapter é um **padrão de projeto estrutural**, este provê uma interface unificada que torna possível que objetos com interfaces incompatíveis colaborem entre si.

####Exemplo de código em Python
```python
class Target:
    def request(self) -> str:
        return "Target: The default target's behavior."


class Adaptee:

    def specific_request(self) -> str:
        return ".eetpadA eht fo roivaheb laicepS"


class Adapter(Target, Adaptee):

    def request(self) -> str:
        return f"Adapter: (TRANSLATED) {self.specific_request()[::-1]}"


def client_code(target: "Target") -> None:
    
    print(target.request(), end="")
```
A classe *Target* representa a interface do cliente, esta contém o protocolo que será utilizado por ele. A classe *Adaptee* representa o código que será adaptado, geralmente bibliotecas de terceiros, pela classe *Adapter*, esta será quem tornará possível que o cliente e a biblioteca adaptada consigam se comunicar sem dificuldade.

A implementação em Python não tem nenhuma particularidade em relação a implementação em Java.

***
**Referências**
[Padrões de Projeto](https://diogomoreira.gitbook.io/padroes-de-projeto/) (Diogo Moreira, 2020)
[Mergulho nos Padrões de Projeto - v2020-1.14](https://refactoring.guru/pt-br/design-patterns/book) (Alexander Shvets, 2020)
*Os códigos usados como exemplo foram retirados do livro Mergulho nos Padrões de Projeto.*
Simple guide to create React CRA component, test locally and publish to npm
Tags: react, npm, opensource, firstpost
Published: 2020-12-20 20:47:00

In this post we will come to understand how to make a simple REACT SPA(single page application) and publish in NPM.
<hr>
## Project Setup

#### Step 1: Create a new React app with CRA
```npx create-react-app app-name 
cd my-app
npm start ```

#### Step 2: Create component
Lets create a button component as ButtonComponent.js inside src/components/ folder.
![src/components/ButtonComponent.js](https://dev-to-uploads.s3.amazonaws.com/i/mdb3wh8jjqnq9kafj968.png)

####Step 3: Create babel.config.js
Create babel.config.js in the root.
```
module.exports = {
   presets:[
        "@babel/preset-env",
        "@babel/preset-react"
   ]
}
```

####Step 4: Update package.json
Now, to publish the button component add the following line to scripts:
```
"publish:npm": "rm -rf dist && mkdir dist &&  babel                      src/components -d dist --copy-files"
This script recreates builds React application, recreates the /dist folder , and stores files in /dist directory. Lastly change private from true to false and main to dist/ButtonComponent.js.

"private": false,
"main": "dist/ButtonComponent.js",
"scripts": {
            "start": "react-scripts start",
            "build": "react-scripts build",
            "test": "react-scripts test",
            "eject": "react-scripts eject",
            "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
            "publish:window": "cross-env NODE_ENV=production && npx rimraf dist && mkdir dist &&  babel src/components -d dist --copy-files"
}
```
Sample of package.json and file directories are as follows :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tgwwa14mlo18txjo4ex7.png)
<hr/>
## Build, Test locally, and Publish

login to npm `npm login`

#### Step 6: Build the project
Transpile code from Es6 to Es5.
```npm run publish:npm```
For windows
```npm run publish:window```

#### Step 7: Test locally
Run npm link inside the project to create a global module of ButtonComponent.
```npm link```
Now, to use the module run npm link <app-name> inside other project from which to test.
```npm link app-name```

#### Step 8: Publish
```npm publish```


#Congratulations you just created your first npm package!!!

Another simple way could be to [publish your package in github registry](https://dev.to/sifatul/create-package-in-github-registry-51p9).
CshtmlComponent V4.0.0 - .NET 5 and More
Tags: webdev, csharp, dotnet, aspnetcore
Published: 2020-12-20 20:39:48

CshtmlComponent was just updated to V4.0.0, which adds support for .NET 5 and manual component rendering. Check it out here: [https://cshtml-component.acmion.com](https://cshtml-component.acmion.com)!

CshtmlComponent is a component library for ASP.NET Core and adds many features that contemporary solutions are lacking. The functionality is quite similar to that of PHP's Laravel Blade templates. You may even find it useful for your own projects.
Closing out 2020 with Scrimba's 24 Days of #JavaScriptmas
Tags: javascriptmas, scrimba, adadevelopersacademy, fullstack
Published: 2020-12-20 20:26:18

*Aside:* This feels weird given it's my first post to the public since I stopped using Tumblr in my teenage years 🙈, but here we go!

---

Hello internet! This is Anna (she/her). 🐒

I'm nearly 4 months into my coding journey with Ada Developers Academy (go C14!), and two weeks into learning Javascript.

One of our instructors shared Scrimba's Javascriptmas challenge, and **what better way to get into the holiday spirit amidst a pandemic...** right?? ☃️

Anywho, this will be short - I'm really just here for a **spiffy** certificate and Discord badge (does one need a Discord account to get the badge?!). Jokes aside, shoutout to all the other folks out there learning to code. 💪

Solutions below:

1. [Candies](https://scrimba.com/scrim/cof01467c87fd67e93cb1a8ec)
2. [Deposit Profit](https://scrimba.com/scrim/cofa04a859bc8cf187d02a148)
3. [Chunky Monkey](https://scrimba.com/scrim/co5c8481cba030fcffd10cf56)
4. [Century from Year](https://scrimba.com/scrim/co904454790a0d0c839591a71)
5. [Reverse a String](https://scrimba.com/scrim/coa5241eda2e253e35b84b030)
6. [Sort by Length](https://scrimba.com/scrim/co5b0471d8f616fe07cce336f)
7. [Count Vowel Consonant](https://scrimba.com/scrim/co1274864bc33fd7cb7d44c53)
8. [The Rolling Dice](https://scrimba.com/scrim/co7c64d528c50520458b3476d)
9. [Sum Odd Fibonacci Numbers](https://scrimba.com/scrim/co1634e1db8f713935d776972)
10. [Adjacent Elements Product](https://scrimba.com/scrim/co1b64e518bbc6d0de30f1373)
11. [Avoid Obstacles](https://scrimba.com/scrim/co22d48e7b4c1296b1f9f5ca4)
12. [Valid Time](https://scrimba.com/scrim/co9014128a516f4f66e129ec3)
13. [Extract Each Kth](https://scrimba.com/scrim/co6fd49fda98de7044354a0f8)
14. [Maximal Adjacent Difference](https://scrimba.com/scrim/coab142c6a9ce0441b0468847)
15. [Carousel](https://scrimba.com/scrim/co0eb40e1a347e6e173475238)
16. [Insert Dashes](https://scrimba.com/scrim/co07749c3b9d351263b51dc79)
17. [Different Symbols Naive](https://scrimba.com/scrim/co7bc4bcf977a4aea29c7ad92)
18. [Array Previous Less](https://scrimba.com/scrim/co7364a12b328a52420fabdd5)
19. [Alphabet Subsequence](https://scrimba.com/scrim/co2b74cdd81f43e5c41a0fea9)
20. [Domain Type](https://scrimba.com/scrim/cob4341ad97e83e8fa9c690fd)
21. [Sum of Two](https://scrimba.com/scrim/co7b5471a9098b9f40c82df7f)
22. [Extract Matrix Column](https://scrimba.com/scrim/coa0544d0a8a4cd30336be0be)
23. [Social Media Input](https://scrimba.com/scrim/co5854da4ac54071cf76d7644)
24. [Spinning Wheel](https://scrimba.com/scrim/co79542e29a496f0cc49f76ea)