teleren/devto huggingface dataset:
Front-end Developers: What tools do you use to test performance?
Tags: discuss
Published: 2020-06-03 06:07:19

---
title: Front-end Developers: What tools do you use to test performance?
published: true
tags: discuss
---

Hi all!

I'm curious what other front-end developers use to test page performance.

Do you just use Chrome Developer Tools or do you have a more complicated system integrated into CI/CD processes?

Also curious about testing... I usually just write unit tests, but not end-to-end testing of the UI. Do you have any quality assurance or testing tools you use for testing UI? (puppeteer?)
Building an Azure Static Web App with GraphQL
Tags: javascript, web, typescript, serverless
Published: 2020-06-03 21:58:40

---
title: Building an Azure Static Web App with GraphQL
published: true
date: 2020-06-03 05:58:46 UTC
tags: javascript,web,typescript,serverless
canonical_url: https://www.aaron-powell.com/posts/2020-06-03-building-an-azure-static-web-app-with-graphql/
---

At Microsoft Build we launched the preview of a new product, [Azure Static Web Apps](https://azure.microsoft.com/services/app-service/static/?WT.mc_id=devto-blog-aapowell). This is a product I've been wanting for **years** on Azure as I've done a lot of static websites on Azure (see [Cutting Azure Costs for DDD Sydney](https://dev.to/azure/cutting-azure-costs-31dl)) but they were always been a bit clunky, especially when it comes to integration with a backend. I have it working for some apps, but there's a lot of infrastructure overhead.

But now, with Static Web Apps, it's a whole lot easier as it's designed for this by using a combination of static hosting and Azure Functions. We've got some [fantastic docs](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=devto-blog-aapowell) (I wrote the Hugo, Gatsby and VuePress docs 😉) that will get you up and running on all things Static Web Apps.

It's one thing to read the docs, and another thing to learn how to actually build something, so at Build I decided to put myself to the test and try to build and deploy an app in ~30 minutes. You'll find the video in the [Microsoft Build YouTube playlist](https://www.youtube.com/watch?v=GY5NYJDP4k0&list=PLlrxD0HtieHhlbuh4wiUVHGeVw8vY4Rco&index=74) but what you might notice about it is that it's a lot of copy and pasting of code, and not a lot of actually writing code.

Well, it's time to really put my money where my mouth is and go about building the application, and to do that I'm going to try out [Twitch](https://www.twitch.tv/aaron_powell) and do a live stream of how we can build the app.

I'm going to kick off at **11.30am (Sydney Time) Friday 5th June**, between now and then I'm going to try and work out how to use Twitch, and we'll see if I can do this without resorting to copy/paste all the time! 🤣

So, come join me on Friday and we'll see if we can't build this app!
Extract key or value from hash in Ruby on Rails
Tags: rails
Published: 2020-06-03 05:52:25

When I was recently working in one of the client project, I had to communicate with external mariadb server to store records from react/rails app, that means I would get activerecord hash from our app which I had to convert to pure sql query and send it to external server for storing.

If you have worked with sql queries previously then you must know that keys and values must be separated for insert operations like

```sql
INSERT INTO users (first_name, last_name, email) VALUES (John, Doe, john@email.com)
```

I could convert attributes to hash easily using `as_json` to get the format `{"first_name"=>"John", "last_name"=>"Doe", "email"=>"john@email.com"}`. But I had to extract keys and values separately so that attributes can be accurately formatted and ready for insert and update operations. Let me show you how I extracted keys and values from the hash and formatted them as required for the operations.

Let's assume we have: `user = {"first_name"=>"John", "last_name"=>"Doe", "email"=>"john@email.com"}`

## Extract single key or value

If we only want **email**

```rails-console
// For key
user.extract!("email").keys # ["email"]

// For value

# with extract
user.extract!("email").values # ["john@email.com"]

# simply
user['email'] # "john@email.com"
```

## Extract multiple keys or values

If we want **first_name** and **last_name** but not **email**

```rails-console
// For keys
user.extract!(*["first_name", "last_name"]).keys # ["first_name", "last_name"]

// For values
user.extract!(*["first_name", "last_name"]).values # ["John", "Doe"]
```

## Extract all keys or values

```rails-console
// For keys
user.keys # ["first_name", "last_name", "email"]

// For values
user.values # ["John", "Doe", "john@email.com"]

```

Do you know more elegant or alternative way to extract keys and values from hashes? Please enlighten and guide us with your precious comment below if you do.
JavaScript polymorphism in Google Apps Script
Tags: todayilearned, javascript, googleappsscript
Published: 2020-06-03 05:23:50

(Updated 2020-06-04 to include Boolean)

Here I am betraying my lack of understanding of polymorphism and thus feeding my imposter syndrome experience. 
```javascript
String.prototype.quoted = function () {
  return  "'" + this.replace(/'/g,"\\'") + "'";
}

Number.prototype.quoted = function () {
  return String(this);
}

Boolean.prototype.quoted = function () {
    return this ? "true" : "false";
}
```
There you have the same method name on three different data types. That's probably a boot-camp fail straight up, especially extending _core_ objects like String, Number and Boolean.

With those in mind, I have this Google Apps Script function that I use to log the attributes of a subset of `DocumentApp` elements.
```javascript
function LogChildren(body) {
    function getInnerText(child) {
        switch (child.getType().toString()) {
            case "PARAGRAPH":
                return child.asParagraph().getText();
                break;
            case "TABLE":
                return child.asTable().getText();
                break;
            default:
                return child.asText().getText();
                break;
        }
    }
    function getStyles(child) {
        const attribs = child.getAttributes();
        const attribList = [];
        for (let att in attribs) {
            try {
                if (null !== attribs[att])
                    attribList.push(att.quoted() + " : " + attribs[att].quoted());
            }
            catch (E) {
            }
        }
        return "{" + attribList.join(", ") + "}";
    }
    const childCount = body.getNumChildren();
    for (let c = 0; c < childCount; c++) {
        const child = body.getChild(c);
        Logger.log("[%s] %s = %s %s", c, child.getType().toString(), getInnerText(child), getStyles(child));
    }
}
```
The use of the three versions of `.quoted()` is in the `getStyles` function above, namely
```javascript
if (null !== attribs[att])
    attribList.push(att.quoted() + " : " + attribs[att].quoted());
```
So sometimes `attribs[att]` is a String or a Number or a Boolean. One way of handling whether to put quotes around `attribs[att]` or not would be to write a function which uses `typeof` to decide what the data type is and then handle it appropriately. Instead of doing it that way I'm banking on the interpreter already knowing the data type and then running the appropriate `.quoted`. 

This works now, but sure as anything there's going to be a time when there'll be other things to quote that aren't as amenable to having their objects extended. As it stands, however, this is diagnostic code and won't be appearing in production.
Interactive widget by Papayoot
Published: 2020-06-03 04:56:23

Cross-App and Platforms solution to manage your state

Build your Boards, share it, and let others interact and engage with it.
By using this amazing suite we can build a really amazing widget,
Interactive…
Multimedia…
Informative…
And even a Games…

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

Everything by DnD functionality and with any share by community
Who is product for ? this a really good… no straight forward answer…
Share content or state between users… one of the fundamental functionality in Papyoot product is to enrich the session between groups around the instant messaging eco-system like Whatsapp, Viber, Skype etc.., while in those environments you can’t pin a state Papayoot bring this ability in nutshell. Let’s take some popular “use-case”… i’m not invite my friends from Whatsapp group to my home in next weekend and make a good BBQ together… so we need to prepare a list and set an time and date in calendar also maybe some of the friends need some map for instruction…Wooo a lot of information… and what a “TODO” list, Bob need to bring Steaks, Joe need to bring Beer etc… if i put everything in our Whatsapp group for sure some of this important information will be forgotten. Let’s see how we can solved it in very easy and convenient way…

Also you can be a little bit a creative by putting some background music or video clip for our exiting event… and what about a cool gif? movie? so that how we create a scene today…
Another point of view of this product is… for Marketing… let’s say i wont to build a interactive banner try to play with it… the amount of graphics/animation that tool offer is really Hugh… you can add any type of objects and animate him… rotate, size, tween…
I invite you to play with this amazing tool and find an existing functionalities :)
Introdução a Testes de Softwares
Tags: javascript, node, codequality, testing
Published: 2020-06-03 04:37:29

**POST 01**
Com toda a demanda de tecnologia atualmente, o desenvolvimento de software vem sofrendo grandes pressões no mercado, ou seja, na medida que  emprego de sistemas de informação cresce ao ponto que a sociedade e os negócios que dependem cada vez mais de softwares é de fundamental importância que os mesmos sejam softwares de qualidade e realizem um excelente desempenho no seu contexto, com isso a fase de testes do software tem como objetivo revelar falhas desse produto, para que as mesmas sejam identificadas e corrigidas, garantindo assim o comportamento eficaz do software para o cliente.


De maneira geral o teste de software serve para encontrar possíveis erros que aconteceram no período de desenvolvimento, e corrigi-los antes que seja lançado no mercado, com isso dizemos que a natureza do teste de software é “destrutiva” e não “construtiva”, pois o objetivo é o aumento da confiança antes da exposição do produto.

Antes de abordarmos mais precisamente sobre teste de software é necessário o entendimento de termos que podem de certa forma confundir, ou pensar que todos têm o mesmo significado, são eles: defeitos, falhas e erros.

**Falha**: É um comportamento inesperado, ou seja, uma função do software que não esta funcionando de acordo com o previsto pelo usuário, uma falha pode ser causada por diversos erros.

**Erro**: é a manifestação de um erro, um ser humano produzindo algo incorreto, ou seja, uma falha ativada durante um teste e constituída de um erro.

**Defeitos**: É uma incoerência no sistema, cometida por um ser humano, ou seja, é quando implementamos de forma errada algum uma instrução, utilizamos mal uma ferramenta ou algum método, defeito e a causa de um erro.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e81ptjx9uztahnqqgoid.png)
Data Structures & Algorithms Study Guide: Where to go from here?
Tags: webdev, beginners, discuss, codenewbie
Published: 2020-06-03 04:35:29

Hello all!

With some extra time on my hands, I'm given the perfect opportunity to perfect the art of technical interviewing before recruitment season. One way I'm bettering my interviewing skills is nailing the fundamentals. With a handy, dandy tool called [Notion](http://notion.so/), I've created a general list of ideas to cover and create notes for, and I feel like I have a basic understanding of the Data Structures & Algorithms I've studied.

![notion screenshot of notes](https://dev-to-uploads.s3.amazonaws.com/i/837goovtbqgapjmen4u3.PNG)

Now I pose a question.. or a few.. towards the community:
* What fundamental topics should be added to the list?
* What algorithms and data structures are popular in 2020? Especially in web development?
* How much breath and depth knowledge of these concepts should be learned?
* Is any of it used frequently on the Frontend?
* What are the next steps for building on these skills?

I'm interested to hear your thoughts.
Upgrading old Rails 4.0 to Rails 6 with webpacker and React.js
Tags: rails, react, webpacker, reactonrubyonrails
Published: 2020-06-03 04:11:37

---
title: Upgrading old Rails 4.0 to Rails 6 with webpacker and React.js
published: true
description: 
tags: ruby on rails, react, webpacker, react on ruby on rails
//cover_image: https://direct_url_to_image.jpg
---

It has been a while since I worked with ruby on rails… for the past couple of years, my main focus programming language is javascript. Node.js in the backend, and React on the frontend. so let’s start how we update our old rails app into the latest Rails app with React.

## 1. Upgrading Rails
update your rails version inside Gemfile:
```
gem 'rails', '~> 6.0'
```
and run bundle update rails

## 2. Setup Webpacker
In your Gemfile
```
# Gemfile
gem 'webpacker', '~> 5.x'
```
then run:
```bundle && bundle exec rails webpacker:install```

Once your webpacker is setup. you are ready to put the bundle pack, you can say a pack is the entry point of your main js file. so all the js file required by rails views should be put inside `packs` folder. and put inside your views `/layouts/application.html.erb`
```
<%= javascript_pack_tag 'application' %>
```
by default, this will refer to /app/javascript/packs/application.js, you can change this path inside webpacker.yml by changing the source_entry_path

## 3. Setup React with Webpacker
initialize react application with webpacker:
```
rails webpacker:install:react
```
it will install all related dependency using [`yarn`](https://yarnpkg.com)

## 4. Build your React Component
I prefer to mount all my component into a single div, so I put empty div inside my `/layouts/application.html.erb`
```
<div id="root"></div>
```
then inside my `packs/application.js`
{% gist https://gist.github.com/kubido/ad5c3057ee6b108451503727e366f380 %}


Done, and you ready to go build your React app inside Ruby on rails application
Alias in React Native
Tags: reactnative, javascript, beginners, react
Published: 2020-06-03 03:42:19

<h3>Creating Alias in React Native:</h3>
Is there anything more frustrating to find this path “../../../../../components/location” in Javascript?

What if we can use “/components/location” from any where in the code base?

<h4>Enter the Alias</h4>
So we are writing alias in .babelrc and we use a babel plugin to get aliasing set up, since we can’t use webpack in react native.

Initially, we want to install **babel-plugin-module-resolver** with `yarn` or `npm`.

```terminal
$ npm install babel-plugin-module-resolver
```

Once we’ve installed, open up the project’s and find .babelrc file, If there is no .babelrc file then create the file .babelrc in root. Under the plugins key, add the below snippet:-

```json
{
  "presets": ["react-native"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": [
          "./src"
        ],
      "alias": {
         "src": "./src",
         "assets": "./src/assets"
       }
      } 
    ] 
  ]
}
```
Now we can use **“src/pages/homepage”** instead of using complex relative paths like **‘../../../src/pages/homepage’**

Now, clear the cache and restart the node server by following steps:

```terminal
$ npm start --reset-cache

$ npm run ios
```

Thanks for reading this article ♥

I hope you would find the article useful. Feel free to ping me in comment section or <strong><a href="https://twitter.com/suprabhasupi">@suprabhasupi</a> 😋</strong></p>
<!-- /wp:paragraph -->

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> Suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>
Enable Dark mode on Chrome everywhere 🌜🌎
Tags: tips, browser, productivity, android
Published: 2020-06-03 02:57:46

![GitHub in Dark Mode](https://dev-to-uploads.s3.amazonaws.com/i/zt46g3cw48b82c9dzjmz.png)

There are lots of extensions out there that turn your web browsing experience much better if you prefer dark backgrounds (who doesn't right?).

My favourite one is [Dark Reader](https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh) but there's just one problem, mobile versions of chrome don't support extensions.

This trick will help you turn on dark mode everywhere.

Steps:

1. Visit Chrome flags by entering `chrome://flags/` into the address bar.

2. Search for dark in the flags search bar.

3. On desktop versions you'll have to enable the flag "Force Dark Mode for Web Contents" which is tagged `#enable-force-dark`.
On Android versions you'll have to enable the flag "Darken websites checkbox in themes setting" which is tagged `#darken-websites-checkbox-in-themes-setting`.

4. Restart Chrome and enjoy the dark side.

That's all, Thank you for reading.
Hopefully this post was helpful to you, see you in the next one.
When to use SHA-256, MD5 and SSDeep..?
Tags: forensics, software, development, ring3
Published: 2020-06-03 02:37:21

---
title: When to use SHA-256, MD5 and SSDeep..?
published: true
description: This article explains when it is safe to use these algorithms
tags: forensics,software, development, Ring3,
//cover_image: https://direct_url_to_image.jpg
---

SHA-256, SSDeep and MD5 are all good and effective hashing algorithms used by forensic investigators to compute or calculate hash values for data objects such as files, special files and so on. 

In this article, we will explore three ways these algorithms can be of a good help to forensic investigators.  

## Need to compute thousands of data objects hash values? 
Sometimes, forensic investigators need a tool to compute hash values of many files on a hard disk within the shortest possible time. 

In this case, we can rely on MD5 otherwise known as message digest algorithm to accomplish this task. MD5 produces 128-bit hash value. 

Although it is possible to generate two hash values from one input via MD5, MD5 algorithm is best suited if you want to compute hash values of many files or data objects very rapidly without wasting much time. 

In addition, it also saves disk space because it produces small hashes as compared to SHA-256.   

## Need a collision-resistant algorithm? 

MD5 algorithm is not collision resistant. SHA-256 is able to deal with collision-resistant. In other words, attackers can not generate the same hash from a different input. 

SHA-256 is best suited for integrity verification. 

The only downside is: calculated hashes from SHA-256 is quite larger in size as compared to MD5 algorithm. 

## Need to examine similarities between two files? 

You can make use of SSDeep to examine similarities between two files and find the difference among files.
Mac Terminalのコマンドチートシート ( 備忘録 )
Published: 2020-06-03 02:36:12

Mac初心者なんで個人的な備忘録でここにチマチマ書いておく、他の人の参考には多分ならない


## ファイルの削除
``` rm -rf ファイル名 ```
削除対象がフォルダの場合は警告されるので引数 -r を付け足す
対象ディレクトリの中に読み込み専用ファイルがあると警告が出るので -rf 引数を付け足すと強制削除になる

---

## Macに接続したAndroid端末のストレージ容量の調べ方
```adb shell``` 
で端末に入った状態で

``` df -h ```
コマンドを実行することで端末のディスク情報を見ることができる
操作が終わったら

``` exit ```
コマンドでshellから出る

---

## ダミーファイルの作り方
需要は微妙だが容量チェックとかで偶に必要になったりする
``` mkfile 1g dummy.txt ```
コマンドで 1GB の dummy.text ファイルが生成される

---

## TerminalからFinderを開く
``` open . ```
これで現在のカレントディレクトリをFinderで開ける
Use Tailwind on any project.
Tags: tailwindcss
Published: 2020-06-03 02:27:19

---
title: Use Tailwind on any project.
published: true
description: Add Tailwind to any project easy using npm even email templates.
tags: TailwindCSS
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f3qgutuo5umptowjp59w.png
---

## Create a directory for the project

In terminal:

```
mkdir project
cd project
```

## Install tailwind, autoprefixer and purgecss-cli:

```
npm install tailwindcss autoprefixer purgecss-cli
```

## Create a css file with tailwind directives

```
mkdir css
cd css
touch tailwind.css
nano tailwind.css
```

Paste this tailwind directives in the file

```
@tailwind base;

@tailwind components;

@tailwind utilities;
```

To save a file with nano editor just press (ctrl + x) then press (y).


## Create tailwind config file:

```
npx tailwindcss init
```

## Create a postcss file

```
touch postcss.config.js
```

Inside the file add the next modules:

```
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}
```

## Create a build command:

Go to your package.json file and in "scripts" key add the next line:

```
"build": "npx tailwindcss build css/tailwind.css -o css/styles.css"
```

This file will get the content of "css/tailwind.css" and build a usable css file in "css/styles.css", this is an example you can change the path as you need just remember add the correct path for the file with the tailwind directives.

## Compile the code and get just the css classes needed.

Tailwind now has purgecss added this makes even easy to compile and reduce the size of your css, just go to your tailwind.config.js file and add a purgecss config as you need:

```
module.exports = {
  purge: {
    mode: 'all',
    content: [
      './*.html',
    ],
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

```

To compile the project just go to the terminal and execute:

```
NODE_ENV=production npm run build
```

In my case I need that purgecss compile my css classes just from index.html, thats why my content array has just a simple rule to get all files with "html" type, but maybe you would have some ".vue" files or anyother.

The mode key, its not really necessary and even not recommended to use this mode, purge reduce a lot the size without this mode, in my case I really need only the specific classes because I want to add them on a "style" tag for my email "html" template.


Thanks for reading.