teleren/devto huggingface dataset:
Entendendo GridView com Flutter
Tags: flutter, dart, gridview, widget
Published: 2021-09-15 23:08:51

Imagine que você precise criar uma tela de exibição de items como fotos ou cards de comidas como os apps de delivery, pois então com certeza o GridView irá lher ajudar e muito na construção.

![GridView Capa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/add0tgv9px5myqdwo4vq.jpeg)

### GridView.count
A maneira mais simples de implementarmos o GridView é através do construtor `GridView.count()`. Com ele é possível já termos uma exibição de grid, como o código de exemplo abaixo:

```
GridView.count(
      crossAxisCount: 2,
      children: List.generate(10, (index) {
        return Container(
          child: Card(
            color: Colors.grey,
          ),
        );
      }),
    );
```
Neste exemplo vemos a presença de um atributo chamado `crossAxisCount` esse atributo delimita quantas colunas teremos na grid, que no exemplo são duas.

No `children` estamos passando o `List.generate` este o qual sua função é replicar as grades que estão sendo demonstradas, neste exemplo colocamos 10 grades, que irão apresentar o nosso `container` , conforme exemplo ilustrado abaixo:

![GridView Count Exemplo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3n2tkqh88b9co6v9esx.gif)
 

### GridView.builder
O GridView.builder é utilizado para requisições de itens em API, no qual não se temos ao certo o número exato de retorno. Através dele podemos ter uma melhor performance em nossas aplicações, pois ele vai trabalhar sob demanda.

Um dos atributos do builder é o `gridDelegate` que é responsável pelo controle de nossa grid, nele podemos passar a instância do `SliverGridDelegateWithFixedCrossAxisCount`, que neste caso vamos fixar a nossa grade em 2 colunas passando `crossAxisCount:2`.

Os outros dois atributos do nosso builder que são importantes é o `itemCount` que vamos passar a quantidade de itens que nossa requisição a API trouxe, e o `itemBuilder` que é onde vamos passar os itens para serem apresentados em widget.

Abaixo exemplo de um código de um `GridView.builder` recebendo itens da [API Dog](https://dog.ceo/dog-api/).

```
GridView.builder(
  padding: EdgeInsets.all(12),
  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
               crossAxisCount: 2),
               itemCount:_dogAPIStore.dogAPI.message.length,
               itemBuilder: (context, index) {
                   return Column(
                      children: [
                        DogItem(
                         imageDog:_dogAPIStore.dogAPI.message[index]
                                  .toString(),
                           heigth: 0.2,
                           width: 0.4,
                         ),
                       ],);
}),
```
O widget `DogItem` será o que representará cada item vindo da API, nele criamos um atributo para receber a imagem, e os outros dois atributos para setar a altura e largura.

Exemplo em execução:

![GridView builder Exemplo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgg5a2aqc388dnsp5bu4.gif)
5 cool CSS properties  (part 1)
Tags: css, html, webdev, tutorial
Published: 2021-09-15 22:58:54

Hi, I'm [Aya Bouchiha](developer.aya.b@gmail.com), and this is part 1 of some cool CSS properties.
 
+ [part 2 of some cool CSS properties] (https://dev.to/ayabouchiha/part-2-5-cool-css-properties-bdl)

## caret-color

+ **caret-color**: used to change the cursor of editable elements like input fields.

{% codepen https://codepen.io/Aya_Bouchiha/pen/ZEyaRpL  %}

## clip-path

+ **clip-path**: used to hide a specific area of an element and build complex shapes like the octagon.

{% codepen https://codepen.io/Aya_Bouchiha/pen/eYReKLe  %}

+ [website will help you to build complex shapes using clip-path](https://bennettfeely.com/clippy/)

### resources to learn about clip-path

+ [css-tricks (article)](https://css-tricks.com/almanac/properties/c/clip-path/)
+ [designCourse (youtube video)]()


## content

+ **content**: used with :before & :after for adding a generated content w

{% codepen https://codepen.io/Aya_Bouchiha/pen/ZEyajYx %}

+ [more info](https://css-tricks.com/css-content/)

## pointer-events

+ **pointer-events**: specify that the user could react to pointer events or not.

{% codepen https://codepen.io/Aya_Bouchiha/pen/QWgOBpq %}

## resize

+ **resize**: specify if an element is resizable or not.

{% codepen https://codepen.io/Aya_Bouchiha/pen/gORXdeK %}

## Summary

+ **clip-path**: used to hide a specific area of an element and build complex shapes like the octagon.
+ **resize**: specify if an element is resizable or not.
+ **pointer-events**: specify that the user could react to pointer events or not.
+ **content**: used with :before & :after for adding a generated content.
+ **caret-color**: used to change the cursor of editable elements like input fields.

## Reference 
+ [https://www.w3schools.com/](https://www.w3schools.com/)


## Suggested Posts

+ [57 Essential HTML Tags To Know As A Beginner](https://dev.to/ayabouchiha/57-essential-html-tags-to-know-as-a-beginnert-1f3f)
+ [part-1: 5 HTML Tags That Almost Nobody Knows](https://dev.to/ayabouchiha/5-html-tags-that-almost-nobody-knows-5p5)
+ [Part-2: 5 HTML Tags That Almost Nobody Knows](https://dev.to/ayabouchiha/part-2-5-html-tags-that-almost-nobody-knows-nj8) 
+ [part 2 of some cool CSS properties] (https://dev.to/ayabouchiha/part-2-5-cool-css-properties-bdl)


Have an amazing day!
Lab 1 reviewing other student code sources
Tags: opensource
Published: 2021-09-15 22:30:20

In lab 1, I have to network through Slack to find a partner to review and test my SSG code. I meet a new friend named Eugene Chung on slack. 

Testing and reviewing code might sound difficult, but with my previous co-op experience. I got better and better to read someone else code. It is like reviewing a Pull request. 
No code is perfect, they will be always a bug, improper formatting, unnecessary comment. One of the issue reading his code was the code wasn't properly formatted and they are random comment all over the place. [Issue #2](https://github.com/ycechungAI/cmd-ssg/issues/2), [Issue #3](https://github.com/ycechungAI/cmd-ssg/issues/3). After creating those issue Eugene fixed within a day and the code was much nicer to read.

After I reviewed Eugene code, he had to review mine. I always like people to review my code and tell me what I can improve on. For me it is a way to learn how to write efficient code in the future.
When Eugene testing my SSG code, even with some error checking I put in place he was still able to find some bug in my code. One of the issues [Issue #1](https://github.com/Kevan-Y/text-ssg/issues/1) he found was my code wasn't checking recursively for any .txt files. One of the solutions is to implement a recursive check to check if there is any .txt file in the children's directory. The second big bug [Issue #5](https://github.com/Kevan-Y/text-ssg/issues/5) was that the generated HTML file does not pass HMTL5 standards. I notice that for a .txt file that has a name with space, it will convert to an HTML file with name + space. The solution was to replace all space with hyphens when creating the HTML file. The same logic applies to folders too.

In the end, fixing my issue was not too hard thanks to Eugene's description. I was able to identify the bug part quickly in the code. Testing and reviewing someone else code was the same steps when I was working as a QA. I had to test other people's scripts and add feedback in the Pull Request.


My GitHub Repo: [text-ssg](https://github.com/Kevan-Y/text-ssg)
Eugene GitHub Repo: [cmd-ssg](https://github.com/ycechungAI/cmd-ssg)
GitHub Repository Readme Template
Tags: github, git, tutorial
Published: 2021-09-15 22:04:34

I'm a big fan of README.md file in the GitHub repository, as it provides essential details about the application or project. However, the problem begins when we start thinking about what  necessary details need to be added in readme?

Here is my attempt to create a generic [readme template](https://github.com/an1meshk/tutorials/blob/main/readme-template/readme-template.md).


What details do you keep in your readme file?
Day 452 : To Feel It
Tags: hiphop, code, coding, lifelongdev
Published: 2021-09-15 21:44:01

_liner notes_:
- Professional : Where did the day go? Even though I didn't have any meetings, I feel like I didn't get as much as I thought I would. Probably spend a little more time to finish up some things.

- Personal : Last night, I wasn't feeling too well. The weather has been changing and I'm starting to feel it. I went through a bunch of tracks for the radio show. Watched an episode of "Boruto". Then ended the night reading some documentation on how I think I'm going to handle uploading images on my side project using Cloudinary.

![Mountains covered in pine trees in Fassa Valley, Italy with more stone mountains in the distance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmn7uq0pe6jo5w9ks7jc.jpg)

Got a new version of a cherry drink I normally get that has protein added to it. The one I've been getting previously would take like a week to get delivered so I decided to try it. We'll see how it taste. More protein couldn't hurt. Going to finish up some stuff from work. Listen to some tracks for the radio show. Watch an episode of "Boruto" while having dinner. I also want to see if I can get the photo uploading to work on my side project. Almost forgot, there's a meetup happening online that's talking about Svelte.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube p2ySy4mzs6M %}
Born to be a UX/UI Designer.
Tags: ux, uiweekly, design, webdev
Published: 2021-09-15 21:18:41

## Where it all began.

I love art and I have always been an artist since way back in primary school. In high school I fell in love with code and couldn't take my eyes off the green lines on the console. In my first year of Uni, I made my first website with HTML and performed a few tweaks to beautify it using CSS which made me feel like a god😂😂😂. Here is where I was drawn to perfection in web applications and as time flew, mobile apps.

## Inception
After attending a 20 week bootcamp, I learnt the basics and cores of web development in the most advanced way I could afford. From simple HTML5 to javascript then Angular JS and later REACT. I graduated as a Fullstack developer and went into the world of development where I started off as a frontend developer. 

## Inspiration & Journey since.
Designs on sites like [Dribble](https://dribbble.com), [Behance](https://behance.com) and [Pinterest](https://pinterest.com) blew my mind away and for any project I started, I'd find myself always trying to beautify the frontend and ended up submitting the project with a faulty backend😂😂.Comments such as "Gerald, you're good at frontend," made me so happy and tuned my mind to the direction of Interface Design. Here is where my passion for UI Design was born. 

I self taught myself with resources from Youtube([FLUX](https://www.youtube.com/c/FluxWithRanSegall), [Punit Chawla](https://www.youtube.com/c/PunitChawla) and many more) and a couple of courses on [Skillshare](https://skillshare.com). Fortunately I got a freelance job which has been my pillar of experience, helping me grow and discover more in the UX/UI field. Today, I'm proud of the step I took into design, fixing things to make someone happy as they look at their devices, as they click that link in expectancy to feel awesome and have a smooth run. 

## Word of Encourangement.
To anyone who's starting off in UX/UI Design, keep on pushing, don't give up, keep on building, keep working on those components😉.
Enable Emmet support for React in VS Code
Tags: vscode, react, javascript, html
Published: 2021-09-15 20:10:13

---
canonical_url: https://josemukorivo.com/blog/enable-emmet-support-for-react-in-vs-code-2f2c
---
Back in the day in 1965😂(just kidding I mean 2019) when I was writing plain HTML in VS Code I used to work with emmet to be super fast with my markup. I started using react in 2019 and guess what, emmet was not working by default with React in VS Code and I had to write all my mark up one by one with their attributes. 

It turned out that Emmet, React and VS Code already had a relationship👨‍👩‍👦 that I didn't know of. You know what🤔 Let me just show you how to enable it in VS Code.

Go to `settings > extensions > emmet > include languages` and add `javascript` as the item and `javascriptreact` as the value.

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


Photo by <a href="https://unsplash.com/@lazycreekimages?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Michael Dziedzic</a> on <a href="https://unsplash.com/s/photos/html?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Writing a Leetcode Kotlin Android App - Day 3 
Published: 2021-09-15 20:04:57

This post is a continuation of the daily development journal I [started](https://dev.to/stephanbranczyk/writing-a-leetcode-kotlin-android-app-day-0-3eg5) earlier. I'm creating a Leetcode-related Android application and my last journal entry was posted a while ago. 

Since then, I've done some additional experimentation, and this is what I found thus far. The Android WebView works extremely well for displaying each LeetCode problem, but with one caveat. 

For the best user experience, each problem will have to be manually shortened or summarized. The longer problems just didn't display well on my phone and if I want users to study those problems on their phone, without needing to pinch-zoom the web view every time, I will need to shorten them. 

Also, my vision for the app has changed slightly. I no longer just want to provide the most efficient answers to problems. Instead, I want the app to focus on all the possible naive solutions first, then, and only then, focus on refining those naive solutions little by little. 

<!-- 
analogy:
sculpting wood/stone
experimentation
mind like a chisel (one point at a time)

analogies and memes? What's a meme


Here are what some of the screens will look like:

Mock up

Usability testing -->
Ruby2d: Take your first steps toward animation and game design
Published: 2021-09-15 20:02:37

With a quick Google search into how modern video games are developed, you'll likely stumble upon the [powerful gaming engines](https://www.incredibuild.com/blog/top-7-gaming-engines-you-should-consider-for-2020) behind industry-leading games like World of Warcraft or Call of Duty. These engines give the developers the tools they need to create games with complex physics, sophisticated visual processing powerful performance. 

If, like most early developers, you're not ready to develop a complex, 3-dimensional interface, Ruby2d might be a good place to start.

## Ruby2d
What is Ruby2d? Ruby 2d is a gem that can be installed into any Rubyist's environment to so that 2d apps can be written and run from one simple script. Ruby2d comes with predefined classes that allow for a variety of shapes, animations, and user interactions. 

>"...creating 2D applications should be simple, natural, and joyful, in the spirit of the Ruby language itself" [(ruby2d on Github).](https://github.com/ruby2d/ruby2d)

## Get started

As per ruby2d documentation, to get started, simply install the ruby gem and `require 'ruby2d'` in your ruby file. For your first app, they recommend simply rendering a rainbow triangle on screen. 

```
set title: "Hello Triangle"

Triangle.new(
  x1: 320, y1:  50,
  x2: 540, y2: 430,
  x3: 100, y3: 430,
  color: ['red', 'green', 'blue']
)

show
```

In your command line, run `ruby triangle.rb`, and 
voila! You've created a 2d app. 

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



## Predefined Classes

Spend some time exploring some of the classes available to you with the ruby2d gem. There are more than just triangles! 

Ruby gives you the ability to integrate text, audio, images, user input, and sprite animations. In no time, you'll be building your own games, like [this Rubyist's](https://dev.to/joaocardoso193/i-made-a-simple-snake-game-with-ruby-2d-4on4) ruby2d-coded version of snake.

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

I recommend you explore the documentation and start tinkering with what ruby2d makes available. With the power of the ruby2d gem, you can build [classic games](https://github.com/mariovisic/ruby2d-games) in only a few lines of code. Go for it!




### Resources
- [ruby2d](https://www.ruby2d.com/)
- [Top 7 Gaming Engines You Should Consider for 2021](https://www.incredibuild.com/blog/top-7-gaming-engines-you-should-consider-for-2020)
- [How I Made a Simple Snake Game with Ruby 2D](https://dev.to/joaocardoso193/i-made-a-simple-snake-game-with-ruby-2d-4on4)
- [ruby2d-games](https://github.com/mariovisic/ruby2d-games)
Learn GraphCMS and GraphQL by building a Next.js Disney+ Clone
Tags: gql, graphcms, nextjs, tutorial
Published: 2021-09-15 19:52:12

Learn how to use GraphQL and GraphCMS by building a Next.js Disney+ Clone! In this 2hr tutorial I show you how to use a Headless CMS in order to build a working streaming app.

You must sign up here to follow along with the tutorial: https://go.graphcms.com/ania 

What you will learn:

00:00 Introduction
01:37 Setting up GraphCMS 
25:35 writing GQL queries and mutations
32:54 Starting a Next.js App
37:34 Getting data into our App
50:54 Creating individual movie pages
58:18 Creating Components
01:46:45 Writing mutations in the App
01:57:00 Final styling

Final code: https://github.com/kubowania/disney-clone-graphcms

{% youtube u1ovHJXkPBY %}
Creando un ID random en JAVASCRIPT
Tags: begginers, webdev, javascript, reactnative
Published: 2021-09-15 19:10:19

La semana pasada, necesitaba encontrar una manera de generar un id único para crear nombres para los archivos del teléfono en sistemas IOS (no estoy segura porque me venian en undefined). 
De todos modos, buscando en Google, en San Google y San StackOverflow, encontré esta pequeña y hermosa funcion. Super sencilla.

Todo lo que tenes que hacer es invocarla, donde tenes que generar el id, y pasar la longitud deseada del id.
Y ¡magia! Devuelve un id/nombre/dato hecho con letras y números (en este ejemplo es asi!) 

```
const makeRandomId= (length) => {
      let result = ''
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      for (let i = 0; i < length; i++ ) {
        result += characters.charAt(Math.floor(Math.random() * characters.length));
     }
     return result;
  }

```

👉 charAt: El método charAt() devuelve el carácter en un índice especificado en una cadena.
👉 floor(): El método floor() redondea un número hacia abajo al entero más cercano, y devuelve el resultado.
👉 random(): Math.random() devuelve un número aleatorio entre 0 (inclusive), y characters.length (excluyente):

> Math.random() usado con Math.floor() puede ser usado para devolver enteros aleatorios (como esta en el ejemplo!)

Eso es todo por ahora :)
Missing Amplify UI Styles in Electron App
Published: 2021-09-15 18:57:28

---
title: Missing Amplify UI Styles in Electron App
published: true
description: Troubleshooting AWS Amplify styles Electron React Boilerplate app 
tags: 
cover_image: https://bliskavka.com/2021/09/15/amplify-ui-css-in-electron-boilerplate/missing-amplify-styles.png
canonical_url: https://bliskavka.com/2021/09/15/amplify-ui-css-in-electron-boilerplate/
---

I recently discovered the [Electron React Boilerplate](https://electron-react-boilerplate.js.org/) project and wanted to use the [AWS Amplify Authenticator](https://docs.amplify.aws/ui/auth/authenticator/q/framework/react/). Lo and Behold: its ugly...

I had used the typical `index.tsx` import and I could see the CSS output, but for some reason it did not work.

```tsx
// index.tsx
import "@aws-amplify/ui/dist/style.css";
```

After much Googling, it turns out that Electron React Boiler plate does some webpack-ing magic under the hood.

The correct way to add the css is to import it in `App.global.css`:

```css
/* App.global.css */
@import '~@aws-amplify/ui/dist/style.css';
```

[Originally posted on my blog](https://bliskavka.com)
Meet the Tanukis: Christos Bacharakis
Tags: gitlab, devops, community, techtalks
Published: 2021-09-15 18:50:29

Meet the Tanukis is a stream about the amazing Team members at GitLab. Each episode focuses on a team member discussing issues in tech that are important to them. This episode features Christos Bacharakis, Code Contributor Senior Program Manager. 

{% youtube 655eigAff1I %}

Links: 
[Hackathon!](https://about.gitlab.com/community/hackathon/)
[Contribute to GitLab](https://about.gitlab.com/community/contribute/)

[Free Licenses for Education/Research Institutions!](https://about.gitlab.com/solutions/education/join/)
👤 4 Authentication Tools That Increase Retail Conversion Rates
Tags: authentication, security, tools
Published: 2021-09-15 18:39:40

#### 🔓 How to decrease abandoned carts by improving the simplicity and security of your user login process.

### <br>

When consumers create e-commerce accounts, retailers can use their purchasing history to offer a more personalized shopping experience, which can boost [retail conversion rates](https://www.mckinsey.com/industries/retail/our-insights/personalizing-the-customer-experience-driving-differentiation-in-retail) by up to 15%. However, it is tough for retailers to convince people to actually sign up — case in point, [a 2021 DMI survey](https://baymard.com/lists/cart-abandonment-rate) found that 24% of U.S. shoppers abandoned an order just because they were asked to make an account.

We [surveyed](https://images.ctfassets.net/2ntc334xpx65/7o4UAUaHOMHJeV5fmgK9S1/b4c300762c64becf6cef5989046aaf8f/Infograph_2_2x.jpg) over 8,000 consumers across six global markets (the UK, France, Germany, Australia, Singapore, and Japan) to learn about the login experience they preferred and discovered widespread frustration with standard username/password (UP) login methods and businesses that fail to meet their ease-of-login expectations.

Our survey found five problems that stop consumers from signing up for an online account:

1.  Completing long login or sign-up forms (49%)
2.  Meeting minimum password requirements (47%)
3.  Entering private information (46%)
4.  Creating a new ID and password for every app or online service (43%)
5.  Verifying their account with one-time passwords (OTP) (23%)

<br>
Such frustrations lead to some of the worst security hygiene offenses, in particular, reuse of passwords across multiple accounts. Our survey found that 85% of international consumers reuse passwords, with 41% of them doing so “frequently or all the time” and 29% “sometimes”.

We asked consumers about the kind of login experience that would increase their chances of signing up for an account and found that adding certain authentication features would actually encourage them to do so. Our survey results indicated that, when available, consumers are more likely to complete the signup process if given more secure and easy-to-use login experiences.

![Authentication 01](https://images.ctfassets.net/23aumh6u8s0i/24uCeR7yhZbNmMpbFE7v3v/c2245aa707cc9d83b5242357ed06ac39/Passwordless-Authentication-sep1.jpg)

Below are four authentication tools that can improve your retail conversion rate by creating a more streamlined, secure login experience that satisfies users.

[Read more...](https://auth0.com/blog/four-authentication-tools-that-increase-retail-conversion-rates/?utm_source=content_synd&utm_medium=sc&utm_campaign=authentication)