teleren/devto huggingface dataset:
work in progress #2 Models
Tags: python, django, beginners, tutorial
Published: 2021-03-11 14:58:44

**THIS IS WORK IN PROGRESS, I ACCIDENTALLY PUBLISHED**

[Django Tutorial](https://docs.djangoproject.com/en/3.1/intro/tutorial02/)
Hello,

This is more of note to myself / cheatsheet, regarding basics of Django development. 


**Initial setup**
*1. Update settings.py*
*Database setup - inside project's settings.py*
```
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'DatabaseName',
        'USER': 'username',
        'PASSWORD': 'password',
        'HOST': '127.0.0.1',
        'PORT': '3306',
    }
}
```
*2. Migrate*
```
python manage.py migrate
```
Coding demos in 1992
Tags: showdev, retro, commodore
Published: 2021-03-11 14:57:26

In the early '90s, I was part of the demo scene for a wonderful computer called Commodore Amiga. Most of the code I wrote back then has been lost when I moved out of my parents' house.

However, years later, I found one of the "intros" I wrote on a demo portal, ran it on an emulator and [uploaded the video to Youtube](https://www.youtube.com/watch?v=A1k8ciM_KBo). Enjoy :-)
Playing with contravariant functors in typescript

Tags: typescript, functional, programming, types
Published: 2021-03-11 10:27:47

Lets define a sum type `Ordering` with its data constructors:

```typescript
class LT {}
class EQ {}
class GT {}
type Ordering = LT | EQ | GT;
class Comparison<A> {
  constructor(public runComparison: ((a: A) => (b: A) => Ordering)){}
}
```

Because of the *position of the parameter* we can see that this is a contravariant structure
  
Example usage:
- We can compare numbers
```typescript
const x = new Comparison<number>((a) => b => {
  if (a === b) return new EQ();
  if (a > b) return new GT();
  if (a < b) return new LT();
})
```
            
Now lets define our contravariant functor over Comparison.
            
As you know functors map has a type of: 
```typescript
<A, B>(f: (a: A) => B) => (a: F A) => F B. 
```
And while functors pack things (think of array, or function composition) the contravariant functors "unpack".
Its type is:  
```typescript
<A, B>(f: (b: B) => A) => (a: F A) => F B
```
            
For `Comparison` this is:
```typescript
  type contramapT = <A, B>(f: (b: B) => A) => (a: Comparison<A>) => Comparison<B>;
  const contramap: contramapT = (f) => compC => {
    return new Comparison(a => b => compC.runComparison(f(a))(f(b)))
  }
```

Let say we have some users which age we would like to compare.

```typescript
  const compareNumbers = new Comparison<number>((a) => b => {
    if (a === b) return new EQ();
    if (a > b) return new GT();
    if (a < b) return new LT();
  });
        
  type userT = {
    name: string;
    age: number;
  }
              
  const user1 = { name: "Igor", age: 25 }
  const user2 = { name: "Ivan", age: 28 }
  
  const userAgeComparer = contramap<number, userT>(a => {
    return a.age;
  })(compareNumbers)
  const result = userAgeComparer.runComparison(user1)(user2);
```
  
As you can see from this trivial example we generated a new comparer for our user.
criando o primeiro projeto com flutter
Published: 2021-03-11 14:31:28

Fala galera hoje vamos falar sobre a criação de um projeto em flutter e apresentar os comandos usados e os arquivos gerados pelo framework,

Vamos lá, caso você não tenha o flutter instalado na sua máquina,  link para instalação selecione o sistema operacional de sua escolha.

dentro de um diretório (“pasta do sistema operacional”) escolhido rodamos o seguinte comando **flutter create nome_meu_app** o flutter criara uma pasta chamada **nome_meu_app** contendo varios arquivos conforme a imagem abaixo
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kitixbjtby5ih4h1a6cj.jpeg)

Após criar o projeto vamos entender o conteúdo que foi criado.

**Android** dentro da pasta android contém os arquivos referente a plataforma android nativo geralmente só mexemos nessa parte quando nosso aplicativo requer de um recurso que o time do flutter não implementou ou a comunidade não criou nenhum package .

**IOS** semelhante a pasta android contém configurações nativas e específicas para a plataforma IOS. 

**Lib** essa é a pasta que criamos nosso código e regras de negócio.

**Test** e a pasta onde colocamos nossos testes de unidade.

**WEB** se comporta como as pastas android e ios nessa pasta e onde vão ser gerados arquivos do flutter web caso queira gerar seu aplicativo para web.

**pubspec.yaml** e onde colocamos as dependências do nosso app 

as demais arquivos são de controle do framework 

depois de entendermos o esquema de pastas agora e hora de ver como rodamos nosso projeto para rodarmos nosso projeto precisamos de um emulador ou dispositivo conectado ao nosso computador no meu caso vou criar um emulador usando o android studio 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09drcxzg3sz4pj9hvuq8.jpeg)

com o emulador criado vamos abrir o projeto no visual studio code abrir a pasta lib no arquivo main.dart  vamos procurar o metodo main que dara inicio ao nosso app comforme a imagem abaixo 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xezms7t9w9nob2hb7ltz.jpeg)
após apertar no modo debug aguardamos o emulador abrir com a nossa aplicação de exemplo que terá essa carinha 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujx85ems5rkzqi4bb5r3.jpeg)

Esse foi nosso primeiro app feito em flutter, agora é só explorar a documentação (https://flutter.dev/) para criação de belíssimos apps.

Espero que eu tenha ajudado com esse artigo muito obrigado . segue meus contatos: 
dev.to: https://dev.to/clebsonferreira
linkedin: https://www.linkedin.com/in/clebson-ferreira-4a7996a7/
github:https://github.com/ClebsonFerreira
Design breadcrumb navigation
Published: 2021-03-11 14:29:41

 [A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. ](https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices/) 

By adding breadcrumbs to the website, users will have a better feeling for what the site provides and the optional attributes of the product they are looking at or purchasing.

The focus is on how the breadcrumbs can look like and will be implementing the breadcrumbs via HTML and CSS. The links to the breadcrumbs will not function.

With the help of breadcrumb navigation from the below design, we can answer the below questions.
* What can I buy besides blueberries?
* Is everything on this site organic or can I buy conventional produce?
* Does this site offer non-produce items?

## Design
![design snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1pouz6x5phswbxiqxfb.gif)

## HTML
![HTML Snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ami5wyndr0pe55qw1sd.png)

## CSS
![CSS snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxzax5dlapfmtp4orv8s.png)

Example from [codeacademy pro](http://ssqt.co/mQhnf3q)
How to do some short commands inside of Visual Studio Code
Tags: vscode, bash, terminal
Published: 2021-03-11 14:28:10

If we just need to do some short commands, such as a `git commit` or `git push`, while we have the Visual Studio Code open, we can just press <kbd>Ctrl</kbd> <kbd>`</kbd> (Ctrl and backtick) to open up a command prompt.  Then we can type what we need in our command prompt, and press the same keys to close it.
To grep for a word and its adjacent characters
Tags: linux, macos, unix, bash
Published: 2021-03-11 14:07:52

Sometimes we may want to grep for some words, and because the line is too long, sometimes even the whole file on one single line if it is a generated file, we may only want to see some characters before and after the match.

In that case, we can use something like:

```sh
grep -o -E '.{30}theword.{30}' somefile.html
```
or

```sh
curl https://somewebsite.com | grep -o -E '.{30}theword.{30}'
```

The `-E` says to treat it like it is egrep, and `-o` means only output the matched characters but not the whole line.
How to use Twitter embed in ReactJS
Tags: react, webdev, twitter
Published: 2021-03-11 14:07:20

In this post, we'll look at how we use Twitter post and Twitter time-line embedding via ReactJS.

First of all, create a react project and then, run it on the localhost:

```
npx create-react-app my-app
cd my_app 
npm start
```

Then, type in the "my_app" folder's terminal:
``` 
npm install --save react-twitter-embed
```
Import the next at the top of App.js:
```
import { TwitterTweetEmbed, TwitterTimelineEmbed } from 'react-twitter-embed'

```
Now, for displaying the user's profile time-line we'll add the next to our code:

```
<TwitterTimelineEmbed
          sourceType="profile"
          // The preferred screen name goes next: 
          screenName="WHO"
          // Style options goes here:
          options={{ height: 600 }}
/>
```

Now, If we prefer to embed only 1 specific tweet, we'll do the next steps:
1) Go to the tweet and tap the "more options" button.
2) Tap on the "embed tweet button" and copy the tweet ID (the last section of the link it gives you on this website).
3) write the next in your code and change the tweet ID with your tweet ID:

```
<TwitterTweetEmbed 
        // Here goes your copied ID.
        tweetId={"1365778691414974470"} 
        // Style options goes here:
        optins={{width: "900px"}} 
/>

```

Thanks for reading, for viewing the results you can click on the link: https://corona-web-ruby.firebaseapp.com/

For other open-source React and Android native development, you can go to my GitHub: https://github.com/rubenrudov
Simplified: Authentication & Authorization
Tags: security, privacy, todayilearned, todayisearched
Published: 2021-03-11 13:58:26


Are Both Same? Are you also confused between Authentication & Authorization? **Don't Worry! In this blog, it's simplified!**

# Imagine 2 Scenarios ✨
Try to relate these scenarios with Authentication & Authorization.

## Scenario 1
Suppose you're a student of XYZ University & studying any course. At the entrance of the University Campus, students are required to verify the identity that they are the students of this university. So, here what you will do as a Student in this scenario? Yes, Definitely! You will show your ID Card received from University.

Authentication is also the same as this. **Authentication confirms that users are who they say they are.**

## Scenario 2
Suppose you're organizing an Event & you have a team of 10 people. In this event, you have to manage all sections like Registration, Technical, Food, etc. So, What you will do? Yes, that's right! You will distribute these sections in your team & give **ACCESS** to the respective team members.

Authorization is also the same as this. **Authorization gives users permission to access specific resources.**

# Which Comes First?
The authentication process comes before Authorization. In the authentication process User's identity is verified & then Authorization is provided with access to the System.

Ex. 
Authentication -> Social Media Platform Login
Authorization -> Access to Social Media Platform as User

# To Sum It All...
A system can not permit Authorization without Authentication because it is important to verify Person's Identity & provide specific Authorized Permissions with respect to Authorization Level.
**Hope you enjoyed this blog. Thank You!**
Full-stack dev wanted
Tags: womenintech, startup, job, techforgood
Published: 2021-03-11 13:51:59

EARWIG | LONDON | ONSITE | FULL-TIME | EQUITY

📣 Here’s a great opportunity to help the UK’s construction gig workers 👷

For gig tradespeople who use recruitment agencies and feel like the construction industry doesn’t have their best interests at heart, earwig is a career jetpack. It’s what a careers centre could be if it was built by tradespeople and leveraged the latest tech. And unlike standard careers centres, earwig understands tradespeople’s deepest needs — from basic security to self-actualisation — and gives them thrusters to push the boundaries of their potential.

earwig is now looking for a full-stack developer in London for a pioneering product team to radically improve work for the 45 million gig tradespeople around the world.

You don’t need a CV to apply, just your brain. Apply here: https://app.beapplied.com/apply/uw0andhgsy?utm_source=dev
Amazon Alexa Echo Dot in CSS, HTML and JS
Published: 2021-03-11 13:04:17

In this article our goal is to create an Amazon Alexa Echo Dot in CSS, HTML and JS.

You can see the full code on Codepen and feel free to experiment with it.

## CSS

The main things to highlight are the use of `filter: drop-shadow`, `radial-gradient`, and `conic-gradient`.. those were very useful for achieving the end result. 

Here is the CSS I used to create the light.

```scss
.light-ring {
  width: 694px;
  height: 694px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, #fff, #4C90FD, #A7C6FE, #508DFE, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 10px 30px rgba(255, 255, 255, 0.5));
  box-shadow: 0 3px 1px 0px rgba(255,255,255,0.45) inset;
}
```

For the buttons I used a combination of gradients:-

```scss
.btn {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1f1f1f;
  position: absolute;
  box-shadow: 0 2px 1px 0px rgba(255,255,255,0.2) inset;
  filter: drop-shadow(0 2px 1px rgba(255, 255, 255, 0.2));

  &-volume-up {
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    background:
      radial-gradient(ellipse at center, rgba(40,58,71,0.5) 0%,
      rgba(0,0,0,0) 100%), linear-gradient(to bottom,
      rgba(67,85,103,0.1) 0%,rgba(76,95,111,0) 100%);
  }
}
```

## JS

I wanted to ensure I kept the code DRY so rather than creating 80 vent divs and all the accompanying CSS which would lead to a lot of code bloat I decided to use some JS instead here.

This was to duplicate the vents:-

```js
let vent = document.querySelector('.vent');

[...Array(79)].forEach(_ => vent.parentNode.insertBefore(vent.cloneNode(true), vent));
```

I also used JS to rotate and position each vent incrementally, although similar could be achieved with a css mixin.

## Final Result

{% codepen https://codepen.io/flexdigital/pen/eYBbyxr %}

If you found this post useful please share it 🤝

#### About the Author
Simon is a <a href="https://www.flexdigital.uk/">freelance web designer</a>.
Daily Developer Jokes - Thursday, Mar 11, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-03-11 13:00:02

---
title: "Daily Developer Jokes - Thursday, Mar 11, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Thursday%2C%20Mar%2011%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258d992c4e.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ How do programming pirates pass method parameters?

___A:___ Varrrrarrrgs.
 -->
How To Ask Good Questions To Programmers :)
Published: 2021-03-11 12:54:06

Do you find it difficult to ask questions? or maybe you once had a response that put you off asking questions? let's talk about it :)

Asking questions can be the fastest way to arrive at an answer, but if not asked properly can also be the fastest way to make an enemy with your fellow programmers, now let us look at the anatomy of a bad question and how to avoid them.

{% youtube vWGVR8AU6h8 %}

Please subscribe on YouTube if you like this sort of content:
[How To Ask Good Questions To Programmers](https://youtu.be/vWGVR8AU6h8?sub_confirmation=1)
Use emojis to enhance commit messages
Tags: git, gitmoji
Published: 2021-03-11 12:44:28

There is always a problem when choosing the commits message. It's complicated and we often end up with unclear messages like "Improve clarity".

Since then, some conventions have appeared like [Angular](https://gist.github.com/stephenparish/9941e89d80e2bc58a153) or more recently the [Conventional Commits](https://www.conventionalcommits.org/en). What if we put emojis to make it clearer? 🤘

And that's where [Gitmoji](https://gitmoji.carloscuesta.me/) comes in: putting meaning in emojis for commits messages. For example, we can have:

`✨ Add new feature X`

`🍱 update favicon`

`🔥 remove unused css files`

Gitmojis like `:sparkles:` can be written for platforms supporting [GFM](https://docs.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax) (notably Github and Gitlab).

## Advantages and disadvantages

The ➕

- emojis are more precise than conventions, there are a number of them
- the reading of the commit message is simplified and universal
- and it's still pretty cool

The ➖

- you need to know their meaning
- writing gitmojis can be tedious

For these negative points, there are solutions:

First the list may seem impressive, and it is! We can start with a small set of the most used and generic gitmojis.

| gitmoji       | emoji | Sens                                                      |
| :--------- | :---: | :-------------------------------------------------------- |
| `:sparkles:` |   ✨   |  Addition of a new feature                      |
| `:bug:`      |   🐛   | Fix a bug                                           |
| `:recycle:`  |   ♻️   | Code Refactoring                                       |
| `:fire:`     |   🔥   | Code or file deletion                         |
| `:pencil:`   |   📝   | Writing documentation                               |
| `:bulb:`     |   💡   | Add or modify comments in the source code |

Then, you have to enter them. Tools exist for this, for example among others, the [official site](https://gitmoji.carloscuesta.me/) which allows you to copy and paste the gitmoji codes or directly the emojis (the <kbd>CTRL+F</kbd> greatly increases the search speed); or [a tool in CLI](https://github.com/carloscuesta/gitmoji-cli); or [a browser extension ✌️](https://github.com/johannchopin/gitmoji-browser-extension) make life more convenient.
Others are also available and listed on [a page of the official website](https://gitmoji.dev/related-tools).


## ✨ Adopt a simple convention

The convention mostly used by the Gitmoji community is simple: `<gitmoji> Description`. The first word of the description starts with a capital letter. That's it. Simple 💯  
After several months of use, adding a scope on some posts seems quite useful to me, like: `<gitmoji>(scope):`. Sometimes this lends itself well to it! Sometimes not so much. Some emojis don't need a scope: as 🙈 means "Add or update a .gitignore file.", the scope is already included in the meaning of the gitmoji.

## In short

Gitmoji is awesome and fun, so you might as well use it 😄
May your commits messages be happy and clear!
Prerequisites to become a Magento 2 developer

Tags: magento, magento2
Published: 2021-03-11 12:04:36

The Covid epidemic has caused traditional businesses everywhere to turn to e-commerce stores. Therefore, programmers who understand software architecture and fix bugs are in great demand. Not all platforms are alike in complexity, for example WordPress, is hailed as being easy to learn, it doesn't take long to learn and get the site up and running. What about Magento? What skills are needed to work with Magento. In this article, I will talk about the prerequisites to become a Magento 2 developer.

Table of Contents hide 
1. What does the developer Magento 2 need?
2. For Frontend developers
3. For Backend developers
4. Conclude

##What does the developer Magento 2 need?##

Magento has a reputation for being a platform that offers a very good shopping experience.

It offers developers a complete package to develop an e-commerce site that meets all of your store building requirements. The platform comes in two separate editions: Magento Opensource (community edition) and Magento Commerce (enterprise version). Both versions are available in the cloud, ensuring scalability and rich features.

Magento programmer's challenge is complex architecture, learning is difficult, especially in the early stages. It is built in a number of different languages ​​and web technologies. As a developer, you have two options:

Become a developer user interface (Frontend Developers).
Become a backend Developers.
You should have some knowledge before working on Magento at website like: [Magentip.com](https://magentip.com)


##For Frontend developers##

Having a good understanding of HTML & CSS (proper design for the latest versions is a plus).
JavaScript & Prototype for Magento 1 and jQuery for Magento 2
Basic knowledge of PHP and XML to understand how to create templates using block.php and layout.xml

##For Backend developers##
Proficient in PHP with the latest version 7.xx and master the concept of MVC.
Database knowledge - MySQL is an option.
Understanding: Linux, Apache, Git, indexing, cron, HTTP requests, caching technology (Vanish, FPC and Redis) etc.
Conclude
To become a Magento 2 programmer is not difficult. All you need is persistence, constant learning and practice. “Practice Makes Perfect” , Also, try to join the Magento community. Along with that, you can also find a job to gain experience with Magento.

Thank you for reading the article.
Make VS Code look a bit more smooth (on Mac)
Tags: vscode
Published: 2021-03-11 11:54:59

---
title: Make VS Code look a bit more smooth (on Mac)
published: true
description: 
tags: vscode
//cover_image: https://direct_url_to_image.jpg
---

1. Open settings
2. Go to workbench.fontAliasing
3. Set it to auto

You should see the change immediately:

![Skärmavbild 2021-03-11 kl. 12.52.51](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i35t8mu5ek6jbkq5dfqf.png)

![Skärmavbild 2021-03-11 kl. 12.52.56](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6oo0yy55oxkrwwk6snha.png)
New job with Tekt; getting good sleep
Published: 2021-03-11 11:23:01

I started a new freelance job today, working for [Tekt Industries](https://www.tektindustries.com/). I'm learning more about Firebase and Google Cloud, and will be using TypeScript for cloud functions.

The people are friendly, the work is interesting, and I'm confident I can do a good job.

I've also been sleeping much better and getting up early thanks to my magical email reminder script, which emails me every hour to remind me how important it is to go to bed early! I'm also using some melatonin, and the Alarmy app. Getting up early is so much better than staying up late, I feel great.