teleren/devto huggingface dataset:
What's new in Mozilla Firefox 83.0? ✨
Tags: webperf, performance, news
Published: 2020-11-18 01:22:48

Today Mozilla released its next major version of Firefox browser 83.0 with loads of features and enhancements. This blog post will overview about the notable features of Firefox 83.0.

🎉 Following are the new features in 83.0:

* HTTPS-Only Mode
* Significant updates to SpiderMonkey - JavaScript Engine for FF
* Pinch Zooming
* Picture-in-Picture now supports keyboard shortcuts
* Improved UI when presenting on a video conference
* Improvements in search box
* AcroForm support to work with PDFs

# 🔐 HTTPS-Only Mode

HTTPS-Only mode is the brand-new feature in Firefox which enables you to serve HTTPS resource if you navigate non-secured version of the page. 

To enable HTTPS-Only mode in Firefox 83, go to **Options > Privacy & Security**, click on **Enable HTTPS-Only Mode in all windows**.

After enabling it, if you visit non-secured page, it will redirect you to secured version of the page. 

Below is the comparison of example.com in Firefox and Edge.

![HTTPS-Only Mode](https://dev-to-uploads.s3.amazonaws.com/i/ohycfahyk5t8mtdlqv7q.gif)

If there is no secured version found for the web page, then it will display the warning as shown below.

![HTTPS-Only Mode](https://dev-to-uploads.s3.amazonaws.com/i/kp9qa198wl9msnw3atjg.jpg)

# 🐵 Updates to SpiderMonkey

SpiderMonkey is the JavaScript engine for Firefox. In this release, it got significant improvement in terms of performance, responsiveness and memory usage.

# 🔍 Pinch Zooming

Now you can pinch to zoom in Windows touch screen devices and touch pads on Mac devices. Yes, it is a new feature.

# 📽 Picture-in-Picture Controls

Now you can use keyboard shortcuts for the videos in picture-in-picture mode.

# 🎮 Video Conf Controls

If you are presenting a screen on a video conference in Firefox, you will see improved controls.

# 🔎 Selecting Search Engine

Now you can select a different search engine for your search query.

![Select Search Enginer in Firefox 83](https://dev-to-uploads.s3.amazonaws.com/i/w57atmmn6pjly0okfji6.jpg)

# 🪒 AcroForm Support

PDF Viewer feature is available since 81. In this newer version, you will see fresh look and support to fill in, print and save PDF.

Also, this release is a major for WebRender.

Apart from new features, there have been enhancements, fixes, security fixes etc.

Are you planning to upgrade right away or waiting for minor version of 83? :)
Day 258 : Yesterday
Tags: hiphop, code, coding, lifelongdev
Published: 2020-11-18 00:48:56

_liner notes_:
- Professional : Really good day. Had a couple of meetings. Helped a team member with building a NodeJS application. Did some work on the CLI. Spoke with my manager. Day went by quick!

- Personal : I really need to write down what I do. haha Don't remember much of what I did yesterday after work. Maybe I should start using https://HIPHOPtimer.com haha. Pretty sure I did some research on my new side project.

![A view into a green valley in Yanacachi, Bolivia with stony mountains surrounding it.](https://dev-to-uploads.s3.amazonaws.com/i/0reodttoih1s8j3r81nz.jpg)

It's been getting pretty cool at night. Got my two blankets and wearing a hoodie right now. haha. Going to see if I can turn my new side project into a Progressive Web App before I start doing more work. It's going to be pretty important that I get that working for stuff I want to do in the future. I think it's better to get that foundation working from now. 

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube QyTEZ6z81DY %}
Timeboxing Works. Use Parkinson's Law to Your Advantage as a Software Engineer.
Tags: productivity, programming
Published: 2020-11-18 18:21:42

---
title: Timeboxing Works. Use Parkinson's Law to Your Advantage as a Software Engineer.
published: true
date: 2020-08-11 00:00:00 UTC
tags: productivity,programming
canonical_url: https://mannes.tech/parkinsons-law/
---

You’ve probably heard of Parkinson’s Law before. “Work expands so as to fill the time available for its completion.”

It is the introductory sentence in a humorous essay about British civil servants made by Cyril N. Parkinson in 1955. You can find the [original essay here](https://www.economist.com/node/14116121/print). Go read it, it’s still relevant and funny today.

You can take an entire week writing a short essay.
Doing research, outlining, writing, and re-writing.
Or you take 4 hours. Research the essentials, read the style guide, write what you know, and fix grammatical issues.
If you still have time you can smooth some rough edges in your writing.

How can we use this law to our advantage?

Let’s find out.

## Work expands and shrinks based on constraints

Constraints shape the way you solve problems.
They restrict the paths you can use that lead to a valid solution.

In your day-to-day work you have many types of constraints, from time constraints (yay, deadlines!), to resource constraints (a fixed team size), to technical constraints (that obscure API you need to use). You may also be restricted to use certain tools and not others.

> Constraints lead to unexpected but great solutions.

## How to use Parkinson’s Law to your advantage

The two uses I see in Parkinson’s Law are:

- **Timeboxing:** if you want to do anything, set yourself an ambitious deadline and you’ll be more productive, even if you don’t make it. Most often it doesn’t matter if the deadline is self-imposed or comes from a client. Scrum kind of works this way. You start by planning backwards and thinking: “how much can we achieve in the given time?”. Then when the sprint starts your thinking shifts to “how can we reach our sprint goals?” which gives you a time constraint.
- **What if’s:** when you think something takes two weeks, ask yourself how you would approach it if you wanted to finish it today. How can you reach your one-year plan in the next two months? What would you need to focus on, and what should you drop?

Both tools together help you make the most of your most important asset: **your time**.

## How to make time constraints second-nature to you

Here are the three most important exercises around time-constraints:
- **Before you start any task, think about how long it will take you.** Halve that time and see if you can finish your task within this self-imposed deadline.
- **If your to-do list feels too big for the day,** ask yourself what you would drop if you only had 4 hours instead of a full day.
- **Find a plan to reach your personal goals for the year in two months.** Such a heavy time constraint helps you to find alternative paths towards your goals, to identify the essential steps and to use every leverage you can find.
How do I imagine the project?
Tags: writing, devjournal
Published: 2020-11-17 23:51:48

*Cover photo by Glenn Carstens-Peters*

I wrote a lot on the last couple of posts and I realize this beginning will be more verbose because I'm not expressing any code: just thoughts and feelings. Anyway...

In summary, for every match, I want to check the odds from the betting sites (initially, just from bet365) and be able to make a guess of match outcome until the match starts or give up guessing a particular game. I should be able to check the history of my guesses, see how much money I would have earned (or lost), and be remembered of upcoming matches to "bet".

In order to not lose interest in the process, I selected topics that I am passionate about and connected them to real things. Two things that I enjoy a lot are soccer and mathematics. I had my time on betting websites trying to predict the outcome of lots of matches and in the end, I believe I broke even (or lost/won a little). I am a very competitive person too. With these three things in mind, the idea formed as creating an application that displays the next games in my favorite leagues (that is, Champions League, English Premier League, and Brazilian Séries A and B).

![Photo by Chris Liverani](https://dev-to-uploads.s3.amazonaws.com/i/m3eddoexjy0cos3ks2pq.jpg) 

After that, I list the stack I chose and where they fit in the application:

1.  [Gatsby](https://www.gatsbyjs.com/) - A React-based framework to build static websites, which offers 2000+ plugins to integrate lots of different services. Here, I chose it for the possibility of building a PWA, the integration with GraphQL, and the easiness of integrating the plugins;

1.  [GraphQL](https://graphql.org/) - A query language for APIs, which makes possible requesting from the database only the data we want;

1.  [RapidAPI](https://rapidapi.com/) - A marketplace of APIs with lots of free and freemium options. After some research, I decided to use [API-FOOTBALL](https://rapidapi.com/api-sports/api/api-football), which lets me make 100 requests per day. More than enough to prefetch the matches of the day and their odds;

1.  [MongoDB](https://www.mongodb.com/) - A NoSQL database to store the prefetched data from the API;

1.  [Serverless Framework](https://www.serverless.com/) - A framework that allows programmers to use Serverless services from AWS, Azure, GCP, etc. with easy YAML + CLI development. I'll use AWS Lambdas to schedule API calls and save responses to MongoDB, as well as providing an API to the queries we'll send from the frontend.

For the next step, I'll sketch a wireframe to see how the application is going to flow and decide the API calls I'll have to make in order to not exceed the 100 quota.

See you then :D
Snapshot Driven Development with Jest
Tags: javascript, testing, tdd, snapshots
Published: 2020-11-17 23:38:48

Disclaimer: this is not something you can or should apply all the time. Only some very specific situations make it relevant. It makes no sense to use this on simple functions, with simple return values.

Imagine you are working with an external API, and have to transform the internal format to the one the API accepts. Like this:

```js
const user = {
  firstName: 'Marie',
  lastName: 'Curie',
  birthdate: '07-11-1867'
}

const output = {
  first_name: 'Marie',
  last_name: 'Curie',
  date_of_birth: '1867.11.07'
}
```

You’ll probably end up with a function like this:
```js
function formatUser(user) {
  // transform and return the user
}
```

Most of the time, when I have to write such a function, I would apply TDD. But if there are a lot of fields to cover this can be quite tedious. Which is why I often use snapshots to actually write down the result first, then iterate until the test is green. Then I might split up my tests. Let's see how to do this.

First, make your function just return the user as is:
```js
function formatUser(user) {
  return user;
}
```

Next, setup your test:
```js
it("returns the user formatted", () => {
  const user = {
    firstName: "Marie",
    lastName: "Curie",
    birthdate: "07-11-1867",
  };
  expect(formatUser(user)).toMatchInlineSnapshot();
});
```

Now run the test, Jest will change the code to this:
```js
it("returns the user formatted", () => {
  const user = {
    firstName: "Marie",
    lastName: "Curie",
    birthdate: "07-11-1867",
  };
  expect(formatUser(user)).toMatchInlineSnapshot(`
    Object {
      "birthdate": "07-11-1867",
      "firstName": "Marie",
      "lastName": "Curie",
    }
  `);
});
```

You can now just edit the inline snapshot to match what you actually want to return:
```js
expect(formatUser(user)).toMatchInlineSnapshot(`
    Object {
      "date_of_birth": "1867.11.07",
      "first_name": "marie",
      "last_name": "curie"
    }
  `);
```

Then iterate on your code until the test is green.

Of course here you have only 3 properties on your object so it's rather easy to do it manually. You could just have used a `.toEqual` and write down the object yourself. But when the output is complex (imagine tens of properties), or changes several time during development, I find snapshots easier to work with.

Another very nice application for this is when you want your code to return an object, but you're not quite sure yet what it will look like. You can just keep running your test, editing the snapshot as you go (in jest watch mode, that just means hitting `u`).

If the snapshot becomes too big, but you want to keep it anyway, I would suggest to just remove the string, and change the call to `toMatchSnapshot`. This way the snapshot will be stored in a different file.
How to build Instagram in React
Tags: react, javascript, webdev, tutorial
Published: 2020-11-17 22:49:46

---
title: How to build Instagram in React
published: true
description: React tutorial on how to build Instagram
tags: react, javascript, webdev, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ysloio57pl5wrnfbt3bu.png
canonical_url: https://aleksandarpopovic.com/How-to-build-Instagram-in-React/
---

Instagram has such a simple, yet elegant design, and on top of that it’s very modular. It’s almost like a puzzle because it has a lot of parts that can be reused throughout the app which makes it very interesting to build as a practice project. We are going to build Instagram in React and we are going to reuse as much of our code as we possibly can to make profile cards, story icons, posts and pretty much everything else that exists on Instagram’s home page.

Once again, the whole project is a bit too lengthy to fit into a single blog post, but you can check out the video version with full instructions and explanations on Youtube:

{% youtube 6sFTbTAVn5M%}
LocalStorage and SessionStorage cheat sheet
Tags: react, programming
Published: 2020-11-17 21:45:04

LocalStorage and SessionSorage are the features that support current browsers thanks to HTML 5 to save information on the client-side. We keep this information like the behaviour of a dictionary, that is, Key and Value. Everything saved turns out to be a string. Unlike cookies, this information is only persisted on the client-side and is never sent in each request made by our application.

###*LocalStorage*
* Data is shared between all tabs and windows from the same origin.
* The data will not expire. It will remain even after browser restart and survive OS reboot too.
* Limits the size of data you can store (~5MB across all major browsers).
```javascript
//Set the value in a local storage object
localStorage.setItem('name', myName);

//Get the value from storage object
localStorage.getItem('name');

//Delete the value from local storage object
localStorage.removeItem(name);//Delete specifice obeject from local storege
localStorage.clear();//Delete all from local storege
```

###*SessionStorage*
* The sessionStorage exists only within the current browser tab. Another tab with the same page will have different session storage.
* It is shared between iframes in the same tab (assuming they come from the same origin).
* The data survives page refresh, but not closing/opening the tab.
* Limits the size of data you can store (5MB to 10MB).
```javascript
//Set the value in a session storage object
sessionStorage.setItem('name', myName);

//Get the value from storage object
sessionStorage.getItem('name');

//Delete the value from session storage object
sessionStorage.removeItem(name);//Delete specifice obeject from local storege
sessionStorage.clear();//Delete all from session storage
```
Finally, this is a cheat sheet but I have to clarify something ... unless you need to save information that 
* Is not at all sensitive
* Doesn’t need to be used in an ultra-high-performance app
* Isn’t larger than 5MB.

I don't recommend you to use any of this storages, and I will encourage you to read this post about it, because there are better options out there for your necessities.

[Please Stop Using Local Storage](https://www.rdegges.com/2018/please-stop-using-local-storage/)

I wish you all lots of success and thank you for reading!!!
Usability Learnings from Building a CLI
Tags: ux, cli, devops
Published: 2020-11-17 21:36:00

From the past months of iterating on a CLI for managing micro services in our company, I've drawn some conclusions regarding usability.

## The problem

As the number of commands, arguments and flags have grown, so has the risk of confusion. Naming things is not the easiest thing in our industry – should the command for creating a service be called **create**, **init** or **add**? Since it's [idempotent][1] (can be run multiple times), should it instead be called **ensure**?

After changing this back and forth, to ensure/create/add confusion, we sort of gave up and used aliases. 

## The solution

We use [Oclif][2] (The Open CLI Framework), which provides a few features we can use.

### Aliases

By using aliases, you don't have to think too hard on whether it's supposed to be get/set, show/edit or list/add/remove.

``` typescript
export default class UpstreamsShow extends Command {
  static aliases = ['upstreams:get', 'upstreams:list']
  static description = 'Show service upstreams'
  static usage = 'upstreams:show'
  static examples = [
    `$ aw upstreams:show -s hello-cats -e dev
Lists the upstream services for service 'hello-cats' in environment 'dev'.`,
    `$ aw upstreams:show
Lists the upstream services for current service (from repo). You will be prompted for environment.`,
  ]
  ...
}
```

### Help

By making sure all commands have a description, usage and possibly examples, `--help` becomes better. Examples are really good for commands with several arguments or flags. When using topics in Oclif, it's also helpful to add command descriptions in package.json as described on the [topics documentation page][3]

### Autocomplete

I also find [the autocomplete plugin][4] helpful, since you can just tab your way to the full command.

{% youtube HgmbouS1ynw %}

[1]: https://en.wikipedia.org/wiki/Idempotence
[2]: https://oclif.io/
[3]: https://oclif.io/docs/topics
[4]: https://github.com/oclif/plugin-autocomplete
How to install Homebrew on your ARM based Mac
Tags: mac, apple, homebrew, development
Published: 2020-11-17 22:03:21

---
title: How to install Homebrew on your ARM based Mac
published: true
date: 2020-11-17 21:20:57 UTC
tags: mac,apple,homebrew,development
canonical_url: https://medium.com/@andrewbarber/how-to-install-homebrew-on-your-arm-based-mac-3660eb5f0b38
---

[![](https://cdn-images-1.medium.com/max/2600/1*JJbhD_2o64wJjv6BDDMVzw.png)](https://medium.com/@andrewbarber/how-to-install-homebrew-on-your-arm-based-mac-3660eb5f0b38?source=rss-f1da97c5c94a------2)

Unfortunately, homebrew isn’t quite ready for your brand new mac… Performing the typical install seen on their site will present you with…

[Continue reading on Medium »](https://medium.com/@andrewbarber/how-to-install-homebrew-on-your-arm-based-mac-3660eb5f0b38?source=rss-f1da97c5c94a------2)
Kart Bots by Damien Morales
Tags: gamedev, 3d, unity3d
Published: 2020-11-17 21:14:29

Juste a simple kart game 2 players 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zvbg44mept54u1e4xaul.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wzp6kibe6uue3tkxcko5.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w3973y851gk7moj4qd1t.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i7464rtjeqo2cnassrw1.jpg)
Xeno Time Inception -  Action Shooter - on steam
Tags: gamedev, 3d, unity3d, steam
Published: 2020-11-17 21:06:09


Xeno Time Inception is a unique Indie Sci-Fi Solo FPS. Play as Carl and experience his adventures through a world of altered temporality and boundaries. Forget everything you know or expect about time and dive into new parallel worlds. You need to save the world from disruption and total disaster.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l54obbg1sm2cm90fy9lf.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/611hoiaijpitv0hhwai7.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/476d670jn9nsv9m29k2x.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c92lh2uyceaq4waqvlnb.JPG)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hu8fs4vg0izn6ldea3dr.JPG)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rm9s5yqqe2wbpeei67yc.JPG)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gck310ipau54gp7zpbgk.JPG)
https://store.steampowered.com/app/721460/Xeno_Time_Inception/
100 days of code — Dia 7
Tags: python, programming, productivity, 100daysofcode
Published: 2020-11-17 21:01:15

<h2>(17/11/2020)</h2>
[Hoje foi super produtivo]

Hoje tive um daqueles dias em que acordamos inspirados. Consegui aplicar todas as regras de negocio do sistema e agora os usuários estão 100% separados por tipos (explicados em um dos artigos anteriores) e, agora também estão, separados por grupos (os grupos são, nesse caso, as empresas. Cada usuário terá um grupo, ou seja, cada usuário fara parte de um grupo. É uma relação de varios usuários para um grupo).

Ainda não li os livros hoje, mas segue abaixo como esta a leitura:

> Sapiens: 361/428 páginas;
> O que é racismo: 40/82 páginas;

A partir de amanhã, começarei a desenvolver a agenda da aplicação e será uma parte muito desafiadora pra mim, pois nunca desenvolvi uma agenda. Então, é isso!

<br>
*Se hidratem, comam frutas, leiam bastante, a terra não é plana, vacinas salvam vidas e bolsonaro vai tomar no cu.*
100 days of code — Dia 6
Tags: 100daysofcode, python, productivity, programming
Published: 2020-11-17 20:52:45

<h2>(16/11/2020)</h2>
[Deu ruim...]

- __Configurações do meu notebook:__
 - Processador i3;
 - 8Gb de RAM;
 - SSD 120GB (Linux);
 - HDD 320GB (Windows).

Sabendo disso, posso continuar a contar o que me ocorreu nessa linda segunda-feira...

Uso linux, como S.O principal faz 3 anos, testei varias distribuições, mas tenho optado por usar Xubuntu ou Lubuntu, que são distros mais leves e que me dão tudo o que eu preciso para o meu dia a dia como desenvolvedor. Bem, segunda-feira decidi substituir meu Xubuntu, pelo Lubuntu na versão mais recente (20.10 - groovy gorilla) e eis que o problema ocorre. Por algum motivo a distro foi instalada, mas eu n conseguia acessa-la de forma alguma e ai começou a batalha para tentar corrigir o problema. 

Por fim, baixei a ISO novamente, usei outro programa para gravar iso's em pendrive e o problema deixou de ocorrer, mas perdi quase o dia todo terminando de configurar o S.O e sobrou pouco tempo para programar alguma coisa, mas consegui corrigir alguns probleminhas pontuais nas mascaras dos campos de telefone, cpf, cnpj, etc...

> Continuei lendo meus livros:
> Sapiens: 361/428 páginas;
> O que é racismo: 40/82 páginas;

Adquiri dois livros esse final de semana:

![02a755fa-6075-4b2e-973a-c5aeb35bc466](https://dev-to-uploads.s3.amazonaws.com/i/h86codxh0epmn1wykcgd.jpeg)
 
<br>
*Se hidratem, comam frutas, leiam bastante, a terra não é plana, vacinas salvam vidas e bolsonaro vai tomar no cu.*