teleren/devto huggingface dataset:
Flutter localization
Tags: flutter, dart, localization, i18n
Published: 2020-11-03 22:54:01

Flutter is a cross-platform technology that promises a lot. However, during its early days it didn't have practical localization support and many unofficial solutions were created. In this article we are going through streamlined Flutter localization that relies on official Intl package and ARB files.

The easiest way to localize your Flutter app is to use **Flutter Intl** extension for [VS Code](https://marketplace.visualstudio.com/items?itemName=localizely.flutter-intl) or [Android Studio](https://plugins.jetbrains.com/plugin/13666-flutter-intl). It does a lot of work for you, and brings you some functionalities, such as autocomplete suggestions for the string keys in Dart code, extraction of strings from Dart code to ARB files, etc. 

### 1. Initialize plugin for your project
Go to **Tools | Flutter Intl** and run **Initialize for the Project**

### 2. Add dependency
Add following dependency to `pubspec.yaml` file:
```yaml
dependencies:
    flutter_localizations:
        sdk: flutter
```
### 3. Set `localizationsDelegates` and `supportedLocales` for your `MaterialApp`
```dart
import 'package:flutter_localizations/flutter_localizations.dart';
import 'generated/l10n.dart';
class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            localizationsDelegates: [
                S.delegate,
                GlobalMaterialLocalizations.delegate,
                GlobalWidgetsLocalizations.delegate,
                GlobalCupertinoLocalizations.delegate,
            ],
            supportedLocales: S.delegate.supportedLocales,
            title: 'Flutter Demo',
            home: new MyHomePage(title: 'Flutter Demo Home Page'),
        );
    }
}
```
### 4. Add string keys to main ARB file
Your main ARB file by default is `lib/l10n/intl_en.arb`
```json
{
    "title": "Hello world!"
}
```
Here is more info about [ARB file syntax](https://localizely.com/flutter-arb/).

### 5. Reference the keys in Dart code
```dart
Widget build(BuildContext context) {
    return Text(
        S.of(context).title
    );
}
```
That's all :slightly_smiling_face:

## Translation management for Flutter apps

As you start adding more locales to your app, the translation management becomes complicated. Check out the original article [Flutter Localization](https://localizely.com/flutter-localization-workflow/) from [Localizely](https://localizely.com) for more info on simplified translation management.

If you need to manage translations over-the-air, without building and releasing a new app version for simple text changes, take a look at [Flutter over-the-air translation updates](https://localizely.com/flutter-over-the-air/).
Best 11 CI/CD Services for building React Native Project iOS & Android
Tags: reactnative, ci, devops, cicd
Published: 2020-11-03 22:48:37

---
title: Best 11 CI/CD Services for building React Native Project iOS & Android
published: true
description: 
tags: ReactNative, ci, devops,cicd
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/86zek5trhg5v7326cnsl.png
---


A week ago I watched with tears how a pipeline finally finished after almost half an hour. That slow CI service pissed me off every day. And I decided to make my research to find the most powerful CI/CD service!

I've just created a blank react native project:

```sh
npx react-native init testApp --version 0.67.1
``` 

After that, I found several services which can build a mobile app and I begin integrating them:

- AppCenter: web config, stored on the service side
- appcircle: web config, stored on the service side
- Azure DevOps: [azure-pipelines-android.yml](https://github.com/retyui/react-native-ci-cd-compare/blob/main/azure-pipelines-android.yml)
- Bitbucket Pipelines: [bitbucket-pipelines.yml](https://github.com/retyui/react-native-ci-cd-compare/blob/main/bitbucket-pipelines.yml)
- Bitrise: [bitrise.yml](https://github.com/retyui/react-native-ci-cd-compare/blob/main/bitrise.yml)
- Buddy: [buddy.yml](https://github.com/retyui/react-native-ci-cd-compare/blob/main/buddy.yml)
- Circle CI: [.circleci/config.yml](https://github.com/retyui/react-native-ci-cd-compare/blob/main/.circleci/config.yml)
- Codemagic: [codemagic.yaml](https://github.com/retyui/react-native-ci-cd-compare/blob/main/codemagic.yaml)
- GitHub Actions: [.github/workflows/*.yml](https://github.com/retyui/react-native-ci-cd-compare/blob/main/.github/workflows/)
- Gitlab CI: [.gitlab-ci.yml](https://github.com/retyui/react-native-ci-cd-compare/blob/main/.gitlab-ci.yml)
- Travis CI: [.travis.yml](https://github.com/retyui/react-native-ci-cd-compare/blob/main/.travis.yml)

After successful integration and configuration, I started collecting metrics. I was primarily interested in the trace. parameters:

- Build Speed 
- Rebuild Speed (when developer push new changes and cache invalidate)
- Hardware 
- Environment

---

To collect hardware info and environment setup I used an [`envinfo`](https://github.com/tabrindle/envinfo#readme) package

```json
// package.json
{
  "scripts": {
    "postinstall": "npx envinfo"
  },
}
```


[All result about hardware & environment ...](https://github.com/retyui/react-native-ci-cd-compare/blob/main/ENVINFO.md#environment-information) 


---

Finally lets have a look at results of [build speed](https://github.com/retyui/react-native-ci-cd-compare#builds-speed)

[![top eleven ci  cd services for react-native](https://dev-to-uploads.s3.amazonaws.com/i/t4ug5z8kb0okernxwdyv.png)](https://github.com/retyui/react-native-ci-cd-compare#builds-speed)

Given the [limitations](https://github.com/retyui/react-native-ci-cd-compare#limitations-of-cicd-services), I believe that it is obvious who is the favorite on this list 😉

---

if you have any question I am glad to discuss them in the comments!

(c) MurAmur
Cree un paquete npm sobre regex
Tags: opensource, github, npm, javascript
Published: 2020-11-03 22:29:05

Hace unas semanas cree un paquete npm sobre regex (expresiones regulares), la idea de por qué decidí construir esto fue para utilizarlo en mis proyectos futuros, el paquete tiene pocas regex por el momento pero me pareció una idea interesante.

___
> _La verdad es que soy malísimo con las expresiones regulares y no creo que sea el único. 😂 Pero bueno es algo que utilizaremos en casi todos lo proyectos y hay que tenerlo en cuenta_. 

___
## Introducción
Podemos hacer una breve intro de como funciona.

Instalamos el paquete:
```sh
$ npm i regexs
``` 

Y luego lo requerimos

```js
const regexs = require('regexs');
```
Una regex del paquete (una función), es agregar la coma a cifras numéricas.

Tenemos cifras numéricas que pueden ser de varios tamaños y quizá te des cuenta que necesitas una regex para colocar la coma según el tamaño. 

Ejemplo: 
```js
const numbers = regexs.numberCommas(50000);

console.log(numbers); // 50,000
```
Por el momento solo hay cuatro funciones que contienen una regex.

Funciones:
* `numberCommas()`
* `rmAccents()`
* `spaceScriptsMedium()`
* `spaceScriptsLow()`

Cualquiera puede contribuir, mejorar o agregar más regex al paquete! 🙂

Por si te interesa acá está el link: 

* [Regexs](https://github.com/Franqsanz/regexs)

En el repositorio encontrarás una breve documentación.

## Conclusión
Como puedes ver es un paquete muy pequeño y básico, iré agregando más regex durante el tiempo.

Seguramente habrá paquetes muchísimos mejores que esté pero la sensación de que sea algo tuyo no te lo quita nadie, en fin, espero que esto te motive a crear algo increíble o al menos intentarlo. ☺️

¡Feliz codificación!
My Battle Station: Getting A New Chair
Tags: wfh, remote, workstations, productivity
Published: 2020-11-03 22:14:44

Today I got my new [Secretlab TITAN](https://secretlab.co/collections/titan-series#titan_2020_softweave-black3) in black SoftWeave fabric and put it together! It did take a few months as I purchased this chair from one of their "preorder" waves (actually from a [recommendation here on DEV](https://secretlab.co/collections/titan-series#titan_2020_softweave-black3))

![SecretLab TITAN chair in room corner](https://dev-to-uploads.s3.amazonaws.com/i/prfapojeqw30op8pl8ml.jpg)

I'm moving from a refurbished Steelcase Leap chair that I've had for the past 8 years whose piston was broken (leaving me sitting at the lowest setting). Being able to actually adjust my chair is a huge step up in the comfort department. I'm also satisfied with how supportive and thick the padding is on this Titan.

The chair also reclines an unnerving degree (but was totally stable once I got over my fear and trusted it). Combined with the memory foam pillow sent with it, I believe I actually could take a nap in this chair. Unfortunately I can't really use that right now as my current working space doesn't have that much room (next thing to improve about my battle station I guess).

Professionally sitting in chairs has made me a little picky and I've had the chance to sit in a half-dozen or so models (unloading furniture at Steelcase was actually my first job before college). Most important to me is the number and range of adjustment options. No chair will be ergonomic for me unless it can be adjusted to my body. It does not matter how curvy or expensive they make it; unless it is molded to my body, it is not ergonomic.

In that department this chair does very well for the price range. Standard height adjustment, but also reclining angle, lumbar support force, rocking, armrest height, width, depth, and angle. The only things missing that might be found on different chairs are the rarer seat depth adjustment, lumbar position adjustment, and seat front angle adjustment (i.e. the seat front can bend down or up from the main seat height). The only chairs I've found those adjustments on are double the price (and less attractive in my opinion) or missing other important adjustments.

So, for day one I'm happy and would recommend a Secretlab chair for those that have been thinking about it. Ask me any questions you have if you're considering the chair, I'm happy to answer. I'll post again on the durability and longevity of the chair once I have experience with it.
Unable to add Gatsby blog thumbnails
Tags: gatsby, graphql
Published: 2020-11-03 21:53:23

I've figured out how to setup a blog page with netlifycms and it works, but when user uploads an image, I'm having trouble getting the image to display in my blog page component using graphql.

Here is a link to my issue:

https://stackoverflow.com/questions/64670824/how-do-i-fix-typeerror-childimagesharp-is-undefined-on-netlifycms-build

Any help is very much appreciated!
Functional Composition and Legos
Published: 2020-11-03 21:49:06

<sub>Legos are snap-together plastic toy parts which children love. They seem to enjoy the snapping part where they can join and build whatever they want.

We as coders love to snap together functional parts, it allows us to build things faster and stronger. 

Consider this code:
```typescript
function components(rpa: RelatedPeopleAddComponent) {
   let personComponent = rpa.rpc.personComponent;
   let relatedPersonSelectComponent = rpa.rpc.rps;
   let relatedPersonGridComponent = rpa.rpg;
   let relatedPersonMainComponent = rpa.rpm;
   let relatedPersonComponent = rpa.rpc;
   return {
      pc: personComponent,
      sc: relatedPersonSelectComponent,
      rpg: relatedPersonGridComponent,
      rpm: relatedPersonMainComponent,
      rpc: relatedPersonComponent,
   };
}

```
It infers rich composition, as we see plenty of "." (dots). We are able to pull out five different components (and hundreds of properties or functions) from just one parameter passed in. Our return statement allows us to shorten the name for ease of use. 

**Connecting Lego-like parts**

```typescript
export async function 
  funcAddToGrid(
   rpa: RelatedPeopleAddComponent
  ) {
   // Get addressibility to part components
   let { pc, sc, rpg } = components(rpa);
   // start joining things together
   rpa.relatedPerson = pc.person;
   //Build small part for later
   let relationKind = sc.currentKind;
   // Build small part for later
   let relation = 
    new Relation(
      // Each of these are small parts
      // from other components.
      rpa.person, 
      rpa.relatedPerson, 
      // Use Small part
      relationKind.id
    );
   // Build another part
   let dspRel = new DisplayableRelation(
      rpa.person,
      rpa.relatedPerson,
      rpa.relationShipKinds,
      // Use small part from above
      relation
   );
   // Set value from small part
   dspRel.optionToSelect = relationKind.display;
   // Set value via composition 
   dspRel.relationship = pc.person.kind;
   // Use 2nd part, adding to grid for Display
   rpg.addRelatedPerson(dspRel);
}
```

We are easily able to reach into our box of components and start building at will. If we are missing any parts, we just add them following the Single Responsibility Principle. 

SUMMARY 

Anytime we see a '.' (dot) think of composition. Composition allows us to morph an object into predefined types. They may be any of Typescript'intrinsic types. Which could be simple or complex properties or other objects. This is sometimes referred to as Hotizontal Inheritance. It is the realization of 'Favor Composition Over Inheritance'
Meet Nova - A modern new code editor from Panic
Tags: code, editor, showdev
Published: 2020-11-07 18:31:14

---
title: Meet Nova - A modern new code editor from Panic
published: true
date: 2020-11-03 21:43:00 UTC
tags: code, editor, showdev
canonical_url: https://web-crunch.com/posts/meet-nova-from-panic
---

{% youtube _oumkp8FUQw %}

Meet Nova, Panic's newest code editor.

I have been a long time fan of [Panic software](https://panic.com/) since the original Coda code editor was released. Having switched from Coda to Sublime Text to Visual Studio Code and now Panic's new app called [Nova](https://nova.app/) has given me nearly a full spectrum of code editor experiences.

This video is quick review/unboxing of the application. I ended up purchasing it and plan to put it to more use where I can. [VS code](https://code.visualstudio.com/) still wins in terms of features/formatters/extensions but Nova is a really nice app that you could get by just as well with.

The real nice aspect of the app is the fact that it's completely native to the Mac. There isn't any Electron in these apps since it's all proprietary code underneath. Something about that excites me and makes me favor native apps over electron-based.

If you want to see more walk-throughs/reviews like this be sure to let me know. They are pretty fun to go through live. I hope you enjoy!
Why we use points in Agile estimation
Tags: agile, beginners, career, codenewbie
Published: 2020-11-04 09:17:48

---
title: Why we use points in Agile estimation
published: true
date: 2020-11-03 21:42:44 UTC
tags: agile,beginners,career,codenewbie
canonical_url: https://www.notonlycode.org/why-estimate-points/
cover_image: https://www.notonlycode.org/content/images/2020/11/estimations1-thumbnail.jpg
---

In this video I'm talking about why we use points estimation instead of estimating how much time will features take to implement. This is something I often need to explain to junior developers and I believe it deserves a few minutes video. Agile software development, while in my opinion strongly overrated and in the past overhyped, became a standard in our industry and whether we want it or not, sooner or later we have to deal with agile estimation, Scrum and other rituals.

{% youtube 4mrNtAHVEq8 %}

🎥 Video timeline:  
[0:00](https://www.youtube.com/watch?v=4mrNtAHVEq8&t=0s) Intro  
 [1:05](https://www.youtube.com/watch?v=4mrNtAHVEq8&t=65s) What's wrong with time estimation  
 [3:30](https://www.youtube.com/watch?v=4mrNtAHVEq8&t=210s) Example from non-software world   
[4:15](https://www.youtube.com/watch?v=4mrNtAHVEq8&t=255s) Introducing (story) points  
 [7:12](https://www.youtube.com/watch?v=4mrNtAHVEq8&t=432s) What is "velocity"  
 [8:50](https://www.youtube.com/watch?v=4mrNtAHVEq8&t=530s) Outro
terminal UI for git 🤩
Tags: git, terminal
Published: 2020-11-03 21:42:39

# lazygit ❤️

![lazygit](https://dev-to-uploads.s3.amazonaws.com/i/bv2lxjpo65q3vpt457pa.png)
 

* Similar to other UI tools.
* Easy to switch branch and commit changes.
* Supports VIM commands for navigation.
* Has mouse support if you need.
* Launch menu if you don't remember shortcuts 😀

Reference - https://github.com/jesseduffield/lazygit

# gitui

![gitui](https://dev-to-uploads.s3.amazonaws.com/i/s7yq6600dvo9uyuwvmls.png) 

* Fast keyboard only controls.
* Context based help for hot keys.
* Async git API for fluid control.
* written in rust 🦀

Reference - https://github.com/extrawurst/gitui

# tig

![tig](https://dev-to-uploads.s3.amazonaws.com/i/9riaaap84chdgc4ncxnt.png)

![tig-help](https://dev-to-uploads.s3.amazonaws.com/i/522jag5ykaf4vlqr8mp2.png)  

* ncurses-based text-mode interface 🤔
* directly use sub-command from terminal 👍
* kind of similar to gitk 😬

Reference - https://github.com/jonas/tig
Laptops - what is more important?
Tags: discuss, watercooler
Published: 2020-11-03 21:37:11

When buying a laptop/notebook computer there is usually a trade off to be made. Which do you prefer, and why?
1. Slim and lightweight but unable to upgrade the components
1. Heavier and larger but you can easily upgrade components

---

Photo by [CoWomen](https://unsplash.com/@cowomen?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/notebook-computer?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
CWD: A new document format
Tags: pdf, document, cwd, web
Published: 2020-11-03 21:17:12

Recently, I'm working on a very ambitious project: a new document format, essentially is a PDF replacer.

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

The name is CWD and stands for Compact Web Document and is a new powerful and multimedia document file that allows rich contents such images, videos, audios, live maps and of course, text.

Look the project (under construction) home page here: https://www.compactwebdocument.com/

With CWD you can easily build your own document with HTML, CSS and JavaScript and the resulting file is a high standard and compressed portable document, readable with a CWD Reader.

Why do this? Adobe PDF is still here, and we don't need another document format! Well, I think that is not true, PDF have a lot of limitations.

Manipulating a PDF is the absolute pain ever, you have to read carefully the PDF reference in order to do the things in the right way and this is not always true, every PDF Reader will render in a very different and specific way and the standard is now obsolete.

So here became the idea, we have HTML, CSS, JS and so many technologies that are standard and more extensible, also, a web page can hold ANY type of content today, even a PDF.
🚀 Writing secure React Native app
Tags: reactnative, security, ios, android
Published: 2020-11-03 21:16:17

> Check if you are aware of the risks and threats developers should address to prevent typical security mistakes in React Native applications. 

Find details in a new [Cossack Labs’ blog post] (https://www.cossacklabs.com/blog/react-native-app-security.html) or first get an appetite for it with an abstract here.
***
**When looking at the React Native app from the security perspective**, you need to analyze all its parts one by one, and the communication between them as well. It requires an understanding of iOS and Android native platforms, JavaScript engines, and the connection between them – the Bridge. 

Trusting React Native platform and its components means that you understand and accept potential security consequences.

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

Keep in mind that:

1. The collaboration of backend and mobile app developers is key to produce secure mobile applications. The community around React Native platform provides common modules for platform-specific features. They help React Native developers save precious time by avoiding writing native code. 
> The downside is that the additional abstraction layer distances developers from app internals even further. When choosing React Native as a platform for mobile applications, you also need to accept the risk of delayed updates (compared to pure native apps) and increased MTTD/MTTR, and prepare a remediation strategy.

2. React Native platform is a third-party framework developed by Facebook. And who knows what Facebook code is inside The Bridge? So, adding the React Native framework means adding another party that should be trusted as well.

3. Even though React Native apps are associated with an adequate level of protection against XSS attacks, developers can use potentially dangerous API in JavaScript code, like the eval() function.

4. In addition to React Native security specifics, OWASP MASVS and MSTG should be used as a foundation of appropriate security measures in apps.

5. Continuous dependency scanning and patching is an essential step in Secure-SDLC and automated security testing of React Native apps. Many tools help in automating the update process (f.e. Dependabot), but manual work always remains for modules that can't be updated easily.

So... What are the best practices to build a secure React Native app? [@Julia Potapenko] (https://twitter.com/julepka) from [@CossackLabs] (https://twitter.com/cossacklabs) packed some working ideas in a [new blog post here] (https://www.cossacklabs.com/blog/react-native-app-security.html).
What is your most used tool/resource for developing?
Tags: discuss, productivity, tooling, saas
Published: 2020-11-03 21:10:14

I found this amazing cheat sheet for nearly all web concepts that I have ever encountered. Check it out at [this link](https://andreasbm.github.io/web-skills/?compact).

But this page made me wonder, what do other developers use to find out new things about a certain technology or concept?
How to Change Background Opacity without Affecting Text
Tags: beginners, codenewbie, css, 100daysofcode
Published: 2020-11-03 20:51:09

CSS can be tricky, and at times, frustrating to work with. One of the things I had trouble figuring out was how to change the opacity of a background without it also affecting the opacity of the text it contained. 

For instance, let's say you have a parent div wrapped around some text and you wanted to change the opacity of just the div. You'd think that it'd be something as simple as the below.

**HTML**
```html
<div class="opacity">
    <p>Hello World!</p>
</div>
```

**CSS**
```css
.opacity {
    background: #03acf0;
    opacity: 0.5;
}
```

However, if you've tried this, you probably found that it affects the opacity of whatever is nested within it as well. In this case, our text.

Well, here's a simple trick to help. There are other ways to work around this, but I've found this one to be the easiest.

Simply use rgba to define your background color and specify opacity with it at the same time by adjusting the last value, for alpha, in your rgba code. 

For scaling, bringing the value closer to 0 increases transparency. 

**CSS**
```css
.opacity {
    background: rgba(3, 172, 240, 0.5);
}
```

To simplify your HTML, you don't even need the parent div around your block of text to do this. Another way is to add the opacity class to whatever element you are working with.

**HTML**
```html
<p class="opacity">Hello World!</p>
```

**CSS**
```css
.opacity {
    background: rgba(3, 172, 240, 0.5);
}
```

*Day 2 #100daysofcode*
Top 3 CSS Frameworks for Front-End Development
Tags: css, tailwindcss
Published: 2020-11-03 20:43:12

Rather than discuss the pros and cons of CSS frameworks, we'll show you how to set up and use the most commonly used Bootstrap, Materialize, and TailwindCSS components.

Pros and cons are great but you know if the framework is popular the cons of using it are probably minimal. 

Images and code for each framework component are provided. 

[https://www.ordinarycoders.com/blog/article/top-3-css-frameworks](https://www.ordinarycoders.com/blog/article/top-3-css-frameworks)