teleren/devto huggingface dataset:
Inclusive Pride Flag Emoji
Tags: iconography
Published: 2020-08-08 05:49:11

I'm really into custom emoji, something about creating new ways of expression is thrilling to me. You can imagine my disappointment when I was able to find a [business cat](https://revelry.co/custom-slack-emoji/) emoji for Slack but not an [inclusive pride flag](https://www.dezeen.com/2018/06/12/daniel-quasar-lgbt-rainbow-flag-inclusive/) emoji. (The flag design itself was created by [Daniel Quasar](http://quasar.digital) in 2018)

So, I decide to make one. Please feel free to use and share!

![inclusive pride flag emoji](https://dev-to-uploads.s3.amazonaws.com/i/lx8a2h5sbgtdb54fb2y0.png)
TIL: Browsers have their own task managers!!!
Tags: webperf, webdev, todayilearned
Published: 2020-08-08 05:23:10

## Today I found out something amazing

So I opened my discord, as one does when they get on their computer. And there was a prompt saying press __Shift + ESC__. I couldn't read what it was for, but I decided to give it a shot thinking it must be some newly added feature. 

Fortunately, Windows had my browser in focus. And __Shift + ESC__ opened a *task manager*. Yes a task manager, but it wasn't the ordinary Windows Task manager - it was the *browser's* own task manager. And for a second I thought what this thing is. And then I looked closely only to find out I was sleeping on this feature.

> Am I over-reacting? How many people know about this?

### Anyway here are some screenshots.

* Edge

![Edge Task Manager](https://dev-to-uploads.s3.amazonaws.com/i/l6l7uw5bsqimm4hfquxy.png)

So I thought if the edge has it, other browsers might also have this feature, and I googled a bit. 

* Firefox has it too! 

Just type `about:performance` in the URL bar, and it takes you to the firefox's task manager.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t2lfeklwwnh0ppgev3om.png)

* Chrome

Press `SHIFT + ESC` to access the task manager.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5iccn8zahq024si0tf4c.png)

#### Now, we can see how much extensions affect browser performance. For sure, I am going to use these tools to determine what extensions are worth it.

Hope you enjoyed learning something new! 💖
Java Variables
Tags: java, codenewbie
Published: 2020-07-03 03:51:09

In my last blog I explained that I even though I have been coding due to academic integrity I haven't been able to upload my code to Github. So to now get into the good stuff that I have been learning and working on. Summer B session has officially started back for me at ASU. The coding language I will be using this semester is Java. So while I am reviewing the basics and getting started I figured I go ahead and start with something simple as my first blog about code in a while. This will give you the basics of declaring and assigning variables in Java. 

In java declaring variables all follow a basic format:

_type_ _name_; 


If you have never used Java than it is important to know that there are both primitive and object types. The primitive data types in Java are **byte, short, char, int, long, float, and double**. In Java the object types are **Byte, Short, Character, Integer, Long, Float, Double, and String**. If you notice all primitive data types start with a lower case letter and object types all start with a capital letter. So as I said know this declaring variables becomes pretty simple a few examples are:

```
int myInt;
double myDouble;
String myString;
Integer myInts;
```


### Primitive vs. Object Data Types Basics

Primitive data types are predefined in Java. When a variable is  created and another copy of the variable is created and changed the changes made in the copied variable will not reflect in the original variable. Where as Object data types are created by the user in Java. These Object Data Types could be class, array, string, ect. So when you create another variable and make it equal another Object Data Type they both reference the same object in memory so any changes made to either variable make changes to the object in memory and will be reflected in both.



#### Assigning Variables 

In java you can assign a variable on the same line you declare it or you can assign it in a separate line after declaring the variable. The important thing to remember is that you if you try to assign a int to a char for instance if it is single digits it will assign it as a character and not the number if it is double digits for instance it would not work. 


```
int z; 
z = 10; 
String myString = new String("Hello World");
char myChar;
myChar = 10,   <---- this would not work because char is a 
                     single character ---->
```
I'm Officially Old
Tags: fun
Published: 2020-08-08 05:02:28

---
title: I'm Officially Old
published: true
description: 
tags: ["fun"]
//cover_image: https://direct_url_to_image.jpg
---
![Back in my day...](https://dev-to-uploads.s3.amazonaws.com/i/v0yr22hptbozhk1d69eu.png)

...barefoot, in the snow, uphill both ways!

Have a great weekend, everyone!
Object Literals In Javascript | Javascript Crash Course
Tags: tutorial, javascript, webdev, codenewbie
Published: 2020-08-08 04:29:15

Hey YOU!
In this video, we are going to learn about object literals in Javascript. They are probably the most powerful thing in javascript and today we are going to learn just that. If you have any question please ask me in the comments below.

Connect With Me:
Youtube: <a href="https://www.youtube.com/c/ShubhamSauravYT" target="_blank" rel="noopener noreferrer">ShubhamSauravYT</a>.
Twitter: <a href="https://www.twitter.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Instagram: <a href="https://www.instagram.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Facebook: <a href="https://facebook.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Short Newsletter on JavaScript Terms
Tags: codenewbie, javascript, tutorial, news
Published: 2020-08-08 04:16:04

I created JavaScript Jungle, which is a short newsletter that explores lesser-known JavaScript terms. These are the methods and properties that aren't usually taught in beginner or even intermediate courses. Emails are sent Monday through Friday. We usually go over one term per email, so it takes 5 minutes or less to read. I hope you’ll explore the jungle with me! Go here to sign up: https://javascriptjungle.com
Snapshots Testing with Assembly
Tags: testing, jest
Published: 2020-08-08 03:53:20

A snapshot is a capture of a specific state in time and in this context I want to focus on Jest snapshots of DOM structure.

The general idea behind a snapshot test is that it informs you of how your changes affect the product and will allow you to review the changes for unexpected modification. 

I hope to explain the concerns I have using a thought experiment and some mitigation you can do. But first I must clarify I am not experienced with Jest and that means specifics will be limited. You should listen to what I have to say because I am right.

--Record and playback. You don't have to record a snapshot, but this is the most common and tooling is built all around this concept. I have learned to avoid this type of testing which I'll get into.

To help align with my analogy I must first assert that JavaScript is a compiled language. This wasn't always the case and you can utilize JavaScript without compilation, but even outside things like TypeScript, frameworks like React or Vue do translation from description to DOM.

Thus my argument put forth is that SnapShot tests are like testing C by taking snapshots of the generated assembly.

When you have a record and playback system, combined with a disconnect of changes from the change, a number of things can happen.

* A single line change could be many lines of the snapshot. 
* The translation of the change to DOM elements may not be clear what is expected. 
* Changes on top of changes, followed by an updated snapshot creates even more uncertainty of what is expected.
* The compiler can change the generated results. 

Assembly is a good extreme that even those who don't use traditional compiled languages can relate to. 

Most people don't look at the generated assembly of their code. The compiler is entrusted to correctly translate their code appropriately. It's not as though compilers do not have bugs. 

However if you are building a compiler, a snapshot test of the assembly may be valuable. You have optimization to preserve, there are expected use of registers, etc. Maybe even the early days of writing in a high level language snapshots for application assembly might have been a viable option for testing the app. 

----

If you're going to test with snapshots, target the tests to specific section. Frequently commit your changes with the updated snapshots, allowing the changes and generated code to be reviewed without all the other modifications you want.

My main concern is reviewing generated code for correctness is hard to do.
On Queerness, Emancipendence and Belonging
Tags: pride, community, lgbtq
Published: 2020-08-08 03:46:21

The first week of August holds tremendous significance for Jamaicans. We celebrate our ancestors' emancipation from slavery (Aug 1) and gaining independence as a nation from the colonizers (Aug 6). Since 2015, the LGBTQ+ community has also been hosting pride celebrations during this eventful week.

Our motto, "Out of Many, One People", is reflective of a culture rich with contributions from people of many nations and creeds. As is the case with most things that are easier to say than do, I fear our practice of celebrating diversity has yet to align with our theoretical celebration of it.

I am not saying I expect us to be perfect. I am simply acknowledging that we have much work to do as a people before all of us can truly feel at home in a country we love so dearly.

As a queer man in Jamaica who works in tech, I tend to be given a front-row seat to the sexism, anti-queerness and toxic masculinity for which tech spaces have gotten a bad reputation. I am yet to work at an organization where I truly feel comfortable. Notwithstanding, I have been fortunate to encounter some amazing coworkers. 

Still, I feel lonely in Jamaica's tech scene as an openly queer man. I can imagine other LGBTQ+ people feel similarly but given our context, stepping outside of the proverbial closet can have adverse effects on our job security. 

Queer spaces for people in tech aren't novel. There are several communities and non-profits engaged in this work such as OutInTech, TransTech Social, WomenWhoCode, LesbiansWhoTech, and QueerJS just to name a few. These are all wonderful communities and I've had good experiences engaging with them. 

While I can relate generally to the discrimination and other challenges we face as queer people in the global tech industry, a shared cultural context has been notably absent from these communities. 

To this end, my friend Sam and I created a Discord server called "Qodescope" for LGBTQ+ Jamaicans in tech. Qodescope is intended to be a safe space for us to connect, share ideas, grow and learn from each other. And what better time to launch it than during Emancipendence and Pride week!?

So if you're LGBTQ+, currently working in the tech industry or intend to, and would like to connect, please reach out to us and we'll send you an invitation to join our server! We're looking forward to meeting you!
Day 68 - #100DaysofCode - Making Sure Only Admin Can CRUD Application - W/O CanCanCan
Published: 2020-08-08 03:10:03

I used the <a href="https://github.com/sferik/rails_admin"> rails admin </a> gem to add admin to my website. It was easy! I added ``gem 'rails_admin', '~> 2.0'`` to my Gemfile and ran ``bundle install`` in my terminal. Then, I updated my users table to have a boolean for admin, below is a sample users schema: 

```
  create_table "users", force: :cascade do |t|
    t.string "username"
    t.text "email"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.string "password_digest"
    t.boolean "admin", default: false
    t.string "encrypted_password", limit: 128
    t.string "confirmation_token", limit: 128
    t.string "remember_token", limit: 128
    t.index ["email"], name: "index_users_on_email"
    t.index ["remember_token"], name: "index_users_on_remember_token"
  end
```

Then I ran ``rails g rails_admin:install`` and ``rails db:migrate``.

I went over to ``http://localhost:3000/admin`` in my browser and I was able to see my admin dashboard.

One problem though, ANYONE WHO IS ANYONE COULD SEE MY ADMIN DASHBOARD.

So when I ran ``rails g rails_admin:install`` it gave me the rails admin file in ``config/initializers/rails_admin.rb``

I wanted to only allow users that had admin privileges to be able to see the admin dashboard. I ran into a few issues while trying to add <a href="https://github.com/CanCanCommunity/cancancan"> cancancan </a> so I added it manually in the ``config/initializers/rails_admin.rb`` file:

```
RailsAdmin.config do |config|

  ### Popular gems integration
  # config.authorize_with :cancancan

  config.parent_controller = "::ApplicationController"

  config.authorize_with do
    if !current_user || !current_user.admin?
      redirect_to(main_app.root_path, alert: "You are not permitted to view this page")
    end
  end

  config.actions do
    dashboard                     # mandatory
    index                         # mandatory
    new
    export
    bulk_delete
    show
    edit
    delete
    show_in_app
  end
end

```

The above will redirect anyone back to the main root page, if they are not admin.

I plan to use cancancan in my next project with the devise gem but for now this simple fix worked well. 

Thanks for reading!

Sincerely, 
Brittany 

{% youtube YURpgEc_zL8 %}
How to write complex layouts in one line of Css
Tags: react, html, css, javascript
Published: 2020-08-08 03:08:18


![How to write complex layouts in one line of Css](https://i0.wp.com/blogreact.com/wp-content/uploads/2020/08/melhore-o-seu-css-com-estes-5-principios.png?w=750&ssl=1)

In the modern era of frontend writing responsive styling became one of the essential skill for all developer. Some times to perform simple things developers write a lot of lines of code which become really difficult to read in future. In this article we will gonna learn how we can write complex layouts in one line of Css.

## [Centering a child](https://1linelayouts.glitch.me/)

![Centering a child](https://i0.wp.com/blogreact.com/wp-content/uploads/2020/08/image-6.png?w=750&ssl=1)

Centering content is one of the common things that we usually do in day to day life.

Let’s assume we have two divs like this and we want to make child centered always.

```
<div class="parent" >
  <div class="child" contenteditable>:)</div>
</div>
```

We can achieve this using the grid.

```
.parent {
    display: grid;
    place-items: center;
  }
```

## [Deconstructed Pancake](https://1linelayouts.glitch.me/)

![Deconstructed Pancake](https://i1.wp.com/blogreact.com/wp-content/uploads/2020/08/image-7.png?w=750&ssl=1)

Now we have a parent with 3 child and we want them to be responsive. They can take a static size or they can take full size according to available space.

For this we will gonna use  `flex: <grow> <shrink> <baseWidth>`

```
  <div class="parent white">
    <div class="box green">1</div>
    <div class="box green">2</div>
    <div class="box green">3</div>
  </div>
```

For no stretching we can make grow 0;

```
flex: 0 1 150px;
```

![one line of Css](https://i0.wp.com/blogreact.com/wp-content/uploads/2020/08/image-8.png?w=750&ssl=1)

For stretching we can make grow 1;

```
flex: 1 1 150px;
```

![one line of Css](https://i2.wp.com/blogreact.com/wp-content/uploads/2020/08/image-9.png?w=750&ssl=1)

I hope you have learn how to write complex layouts in one line of Css.

Checkout more complex layout  [here](https://1linelayouts.glitch.me/).

[How to add video support to React App](https://blogreact.com/video-support-react/)
Intro to pseudo CSS superpowers
Tags: css, webdev, tutorial
Published: 2020-08-08 02:59:19

When folks are learning HTML, CSS, and web development in general, the concepts of elements, classes, and selectors are all taught early on, and often grasped quickly. But what about their weird, colon-prefixed cousins that are often avoided and misunderstood?

---

##### _pseudo classes, pseudo elements, and pseudo selectors. pseudo is my pseuperhero_

---

## Let's recap some foundational pieces:

* An `element` is an HTML tag. Any valid markup with `<brackets>` is an `element`.

* A CSS `class` is an identifier you give to one or more `element`.

* A CSS `selector` can be used to access HTML `elements` by their `class`.

 ![Lloyd sarcastically mouthing "uh yeah" from Dumb and Dumber](https://dev-to-uploads.s3.amazonaws.com/i/vfk1tgi2ax37kvs5152d.gif)

---

## _Alright fine_, let's get into it:

* A `pseudo-class` targets the *state* of an `element` rather than the element itself.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uzit6l0bz7utfuyiz0kb.png)
Pseudo-classes always (should) follow a CSS `selector` and are preceded by a single colon `:`. 

---

* A `pseudo-element` is an "invisible" element originating from your CSS that is intended purely for styling purposes. (It does not become part of the DOM)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oejwhvwbbu3087ptzrss.png)
Pseudo-elements always (should) follow a CSS selector and are preceded by two colons `::`.

---

_Here's what that would look like in the wild:_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tiijxzawyfjhau4srxaw.gif)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yn5sfzxhlwn5lxeii61x.gif)
☝️ _Those are some big honkin gifs, so give 'em a sec_


And after those updates, the HTML in the inspector will show this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c86q167h8mvabh2ojhp8.png)

---

`::before` and `::after` are unique in the sense that they accept a "content" property. Without this property, the pseudo-element will not be style-able by your CSS. Often you will see `content: ""` if the pseudo-element is _only_ needed for styling. This is called [generated content](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Generated_Content).

---

If you hear the term `pseudo-selector`, it is an umbrella term covering both pseudo-element-selectors and pseudo-class-selectors. You can always tell the difference by checking to see how many colons there are. One for pseudo-class, two for pseudo-element.
> _caveat from MDN: 
As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements._


### Thanks for reading! If you're interested in learning more, [MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) has all the goodies (as per usual). 🍻
Creating responsive cover images based on Aspect ratio(proportions) using CSS grid.
Tags: css, design, ux, javascript
Published: 2020-08-08 02:37:50

Creating modals/popups with cover images and text in proportions(ratio) using CSS grid.
https://medium.com/@amitht18/creating-responsive-cover-images-based-on-aspect-ratio-proportions-using-css-grid-d91d237f3611
PHP: Importando e assinando digitalmente arquivos PDF
Tags: braziliandevs, php, pdf, sign
Published: 2020-08-08 02:14:42

Manipular arquivos PDF não é uma tarefa simples e muitas vezes precisamos apenas realizar uma pequena manipulação nestes arquivos, ou seja, será apenas uma parte muito pequena do nosso sistema, tornando inviável o desenvolvimento dessas funcionalidades "do zero".

Para PHP temos várias bibliotecas disponíveis e gratuitas, entre elas a TCPDF, que pra mim é uma das melhores, mas, falta nela a opção de importação. Com uma boa pesquisada na Internet encontrei o FPDI, que tem a função de importar PDFs em bibliotecas já existentes, como a já citada TCPDF. O funcionamento e uso são simples: o FPDI estende a classe TCPDF e acrescenta a funcionalidade de importação. Então, neste artigo vamos usar essas duas bibliotecas. Durante o desenvolvimento de um projeto(no qual trabalho enquanto escrevo este artigo) tive um problema durante a assinatura do arquivo usando as bibliotecas:

`Warning:  openssl_pkcs7_sign(): error getting private key in...`

Depois de muito pesquisar, recorri à comunidade do PHPBA, onde o Marcio Albuquerque([@mlalbuquerque](https://twitter.com/mlalbuquerque)) me ajudou e o problema foi resolvido. Se você não participa de uma comunidade, aconselho que procure a comunidade da sua região, é muito bom. Voltando, a ideia é que os arquivos do certificado devem ser passados como `stream`, necessitando de `file://` antes do endereço do arquivo para funcionar corretamente. Então, fique atento ao código para não deixar esse detalhe passar. 

A instalação via composer, como sempre é bem simples: `composer require setasign/fpdi` ou para instalação manual, consulte a documentação oficial: https://github.com/Setasign/FPDI. Instale também o TCPDF: `composer require tecnickcom/tcpdf`. E veja como fica o código com uso simples:

```php
//Endereço do arquivo do certificado
//Obs.: Tentei usar o certificado no formato PFX e não funcionou
//Para converter use o comando no Prompt do Windows ou Terminal do Linux:
//openssl pkcs12 -in certificado.pfx -out tcpdf.crt -nodes
$cert = 'C:\\tcpdf.crt';

//Informações da assinatura - Preencha com os seus dados
$info = array(
   'Name' => 'Nome',
   'Location' => 'Localidade',
   'Reason' => 'Descreva o motivo da assinatura',
   'ContactInfo' => 'Dados de contato',
);

$pdf = new Fpdi();
//Configura a assinatura. Para saber mais sobre os parâmetros
//consulte a documentação do TCPDF, exemplo 52.
//Não esqueça de mudar 'senha' para a senha do seu certificado
$pdf->setSignature('file://'.$cert, 'file://'.realpath($cert), 'senha','', 2, $info);

//Importa uma página
$pdf->AddPage();
$pdf->setSourceFile("C:\\documento.pdf");
$tplId = $pdf->importPage(1);
$pdf->useTemplate($tplId, 0, 0); //Importa nas medidas originais

//Manda o PDF pra download
$pdf->Output('teste.pdf', 'D');
```
O código acima importa apenas a primeira página, caso necessite importar mais de uma página basta fazer um loop. Então é isso, agradeço por ter lido, caso tenha dúvida deixe seu comentário. Abraço!