teleren/devto huggingface dataset:
New Flutter Project and UI design
Tags: appwrite, mobileapplications, flutter
Published: 2021-04-15 00:02:33

In this episode we will create a new flutter project and create UI for login and signup.

{% youtube HvcemJhSeE8 %}


## Source Code
{% github lohanidamodar/flutter_appwrite %}

## Want to Connect with me
- Facebook: [https://fb.me/lohanidamodar](https://fb.me/lohanidamodar)
- GitHub: [https://github.com/lohanidamodar](https://github.com/lohanidamodar)
- YouTube: [https://youtube.com/c/reactbits](https://youtube.com/c/reactbits)
- Twitter: [https://twitter.com/LohaniDamodar](https://twitter.com/LohaniDamodar)
- Linked In: [https://www.linkedin.com/in/lohanidamodar](https://www.linkedin.com/in/lohanidamodar)
Wireframing
Tags: appwrite, mobileapplications, flutter
Published: 2021-04-15 00:00:14

In this episode we will create wire-frame design for our Flutter application using open source vector design tool - [Inkspace](https://inkscape.org/)

{% youtube RjE0tmyBdow %}


## Want to Connect with me
- Facebook: [https://fb.me/lohanidamodar](https://fb.me/lohanidamodar)
- GitHub: [https://github.com/lohanidamodar](https://github.com/lohanidamodar)
- YouTube: [https://youtube.com/c/reactbits](https://youtube.com/c/reactbits)
- Twitter: [https://twitter.com/LohaniDamodar](https://twitter.com/LohaniDamodar)
- Linked In: [https://www.linkedin.com/in/lohanidamodar](https://www.linkedin.com/in/lohanidamodar)
What is the value of "code quality"?
Tags: techdebt, productivity, codequality
Published: 2021-04-18 09:35:24

---
title: What is the value of "code quality"?
published: true
date: 2021-04-15 00:00:00 UTC
tags: techdebt,productivity,codequality
canonical_url: https://jhall.io/archive/2021/04/15/what-is-the-value-of-code-quality/
---

Talk of code quality, paying down technical debt, and software craftsmanship are popular these days. But do these things actually offer any business value?

Think back to the last time you had to make a change to some software you didn’t write, or a system you didn’t build. How easy was it?

I’d be willing to bet a significant sum it wasn’t much fun. You probably said things like “What were they thinking?” as you muddled your way through a jumble of misnamed classes.

This is obviously the cost of _low_ quality, of technical debt, of poor craftsmanship.

So the value of high code quality is code that’s easy to work on, easy to change. Does this have business value?

It does, **if and only if** it allows the business to deliver working user features faster.

* * *
If you enjoyed this message, [subscribe](https://jhall.io/daily) to _The Daily Commit_ to get future messages to your inbox.
Installing the MySQL CLI on an EC2 Instance
Tags: aws, devops, sql
Published: 2021-04-26 11:25:14

---
title: Installing the MySQL CLI on an EC2 Instance
published: true
date: 2021-04-15 00:00:00 UTC
tags: [ aws, devops, sql ]
canonical_url: https://thomasstep.com/blog/installing-the-mysql-cli-on-an-ec2-instance
---

The other day I spun up an RDS cluster in a VPC and wanted to connect to it to make sure everything looked correctly configured. However, since I put the cluster in a private subnet and only allowed connections from the VPC, I was not able to connect from my desktop. The solution I decided to go for was spinning up a small EC2 instance, SSHing into the EC2 instance, and connecting to my database through the CLI. Unfortunately, the default AMI does not come with the `mysql` CLI installed. Here is how I installed it.

```
$ sudo yum install -y https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm
$ sudo yum install -y mysql-community-client
$ mysql -u MY_USER -p`MY_PASSWORD` -h MY_HOST -P 3306
mysql> show databases;

```

After installing and connecting to my database, I was able to confirm that everything was up an running.
How to change the input tag placeholder text color in CSS?
Tags: css
Published: 2021-04-15 00:00:00

---
  title: How to change the input tag placeholder text color in CSS?
  published: true
  tags: CSS
  date: Thu Apr 15 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/change-input-placeholder-text-color-css
  cover_image: https://melvingeorge.me/_next/static/images/main-7f60a2e6e730d1c695f6dc06fc5fcfca.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/change-input-placeholder-text-color-css)
  
To change the `input` tag placeholder text color, we can use the `::placeholder` pseudo-element in the CSS.

Let's imagine you have an `input` tag with placeholder text called `Enter Email..` like this,

```html
<!-- Input Tag with placeholder text -->
<input type="text" placeholder="Enter Email..." class="myInput" />
```

As you can see that we have added a `class` called `myInput` to the input tag now let's reference the input tag with the `::placeholder` pseudo element in the CSS and set the `color` property to the color we want. In our case, let's go with the `blue` color.

It can be done like this,

```css
/* Change Input Tag Placeholder text */
.myInput::placeholder {
  color: blue;
}
```

Yay! We have successfully changed the placeholder text color! 🎊

See the above example live in [JSBin](https://jsbin.com/hoforenege/2/edit?html,css,output).

In `Firefox` for some reasons, they decreases the `opacity` a little bit so let's use the opacity property to make it fully visible like this,

```css
.myInput::placeholder {
  color: blue;
  opacity: 1; /* For Firefox */
}
```

To make it work on the on `Microsft Edge` browsers we can use this code in addition to the above,

```css
.myInput::placeholder {
  color: blue;
  opacity: 1; /* For Firefox */
}

::-ms-input-placeholder {
  color: blue; /* For Microsoft Edge */
}
```

That's all! 😃

### Feel free to share if you found this useful 😃.

---
Setup Appwrite
Tags: appwrite, flutter, mobileapplications
Published: 2021-04-14 23:57:13

In this episode we will learn to setup Appwrite locally using docker, and define a database structure in Appwrite for the application we will be building in this series.

{% youtube teUUt4ZqIvI %}


## Want to Connect with me
- Facebook: [https://fb.me/lohanidamodar](https://fb.me/lohanidamodar)
- GitHub: [https://github.com/lohanidamodar](https://github.com/lohanidamodar)
- YouTube: [https://youtube.com/c/reactbits](https://youtube.com/c/reactbits)
- Twitter: [https://twitter.com/LohaniDamodar](https://twitter.com/LohaniDamodar)
- Linked In: [https://www.linkedin.com/in/lohanidamodar](https://www.linkedin.com/in/lohanidamodar)
Tampilan Baru Konsep Ponsel Hybrid TCL, Dapat Digulung Dan Dilipat
Tags: berita, android
Published: 2021-04-14 23:54:56


Rabu kemarin, perusahaan China yang terkenal dengan TV-nya itu, memberikan tampilan baru bagaimana mereka melihat masa depan ponsel. Perangkat konsep baru adalah kombinasi antara ponsel yang dapat dilipat dan dapat digulung, meskipun masih dalam tahap ide, namun rendernya tetap menarik dan terus berkembang.

![null](https://draftbox-prod.s3.amazonaws.com/content/60135df31e5e3120a5b12c19/content_1618442485124.png)

Seperti yang telah [diungkapkan oleh CNET](https://www.cnet.com/news/tcl-experiments-with-foldable-rollable-displays-in-the-same-mobile-device/) pada Maret lalu, perusahaan menjuluki perangkat barunya itu sebagai **Fold 'n Roll**. Ponsel ini memiliki layar 6,87” saat dilipat sepenuhnya, berubah menjadi phablet 8,85 inci saat dibuka dan kemudian dapat menjadi tablet 10 inci dengan membuka gulungan. Stefan Streit, manajer umum pemasaran global untuk bisnis telepon TCL, memamerkan versi plastik yang tidak berfungsi dari konsep tersebut kepada CNET dalam panggilan video sebelum pengumuman hari Rabu.

Tidak seperti konsep perusahaan lipat tiga (atau "trifold") yang ditampilkan tahun lalu, Streit mengatakan perangkat baru ini akan berukuran sama dengan smartphone biasa meskipun sedikit lebih tebal.

> *“Saya dapat membawa ponsel ini dengan mudah di saku saya dan jika saya perlu memiliki lebih banyak ruang layar, saya tahu saja, buka dan itu menjadi seperti tablet.”*
>
> \-Stefan Streit kepada CNET

Tidak diketahui kapan perangkat tersebut dapat terwujud menjadi produk yang benar-benar dapat dibeli orang, tetapi TCL memiliki prototipe konsep yang berfungsi di labnya. Streit mengatakan perusahaan tersebut berfokus pada perlindungan layar dalam pengujiannya.

Meskipun perangkat ini masih dalam lab, TCL masih berencana untuk merilis perangkat lipat pertamanya pada tahun 2021. Streit tidak akan mengungkapkan faktor bentuk atau harga yang tepat, tetapi mengisyaratkan bahwa produk tersebut akan lebih terjangkau daripada perangkat lipat lainnya yang dirilis selama periode tersebut tahun lalu - seperti Samsung Galaxy Z Fold 2, yang diluncurkan dengan harga $ 2.000.

*“Bagi kami, tidak masuk akal untuk menempatkan produk dengan harga $ 2.500 atau bahkan $ 1.500”* kata Streit. Sebagai pemain baru di bidang telepon, dia mengakui bahwa perusahaannya tidak memiliki kekuatan merek.

Dengan perangkat lipat ini, Streit melihat teknologi baru sebagai peluang bagi perusahaannya, karena memberikan cara bagi TCL untuk benar-benar mencoba dan mengambil ruang dalam kategori baru ini.

*Originally published at [MauCariApa.com](https://maucariapa.com/tampilan-baru-ponsep-ponsel-hybrid-tcl-dapat-digulung-dan-dilipat/) on April 14, 2021.*
Flutter+Appwrite: Series Introduction
Tags: flutter, appwrite, mobileapplications
Published: 2021-04-14 23:54:43

Appwrite is a secure, open source back-end server, which you can easily setup using only docker. It can used as a back-end service for our Web and Mobile applications including Flutter. It is great for Flutter developers to have Appwrite in their toolbox, as this will give them alternative to Firebase, or building own service in back-end. This is unique opportunity for Flutter developers, as they can focus on their application rather than on setting up a remote database and API and managing that application on their own. So, in this ongoing tutorial series, we will learn to setup Appwrite and use it as a back-end for our flutter application.

{% youtube eYXb_xbUjio %}


## Want to Connect with me
- Facebook: [https://fb.me/lohanidamodar](https://fb.me/lohanidamodar)
- GitHub: [https://github.com/lohanidamodar](https://github.com/lohanidamodar)
- YouTube: [https://youtube.com/c/reactbits](https://youtube.com/c/reactbits)
- Twitter: [https://twitter.com/LohaniDamodar](https://twitter.com/LohaniDamodar)
- Linked In: [https://www.linkedin.com/in/lohanidamodar](https://www.linkedin.com/in/lohanidamodar)
Overriding third-party frameworks' SCSS: How its done (SCSS)
Tags: css, npm, javascript
Published: 2021-04-14 23:05:00

##Introduction and backstory
We have all been there. You're working on a project and decided to use a third-party framework for the design on the website. Everything is going smooth and fine, you're maybe using a few of its component. Everything is looking good in a short moment of time.

But after working on it for a while, you look at the design and almost vomit. You don't like how each component have rounded corners by default. You know some CSS and apply

`
border-radius: 0;
`
Everything should been flat, right?
**Wrong!**
It is still the same design and in the framework's documentation, there's no option for disable round corners. You spend hours and hours trying to debug the code and search the web without any result. 

This is based on a real problem I had the last few days until I solved it by...
##Overriding its scss
First of all, you're going to need SCSS for this tutorial
'npm install -g sass'

After installation, make a main SCSS file, **main.scss**
We want to then import the framework's css in the main file, using *@import*
```
//FRAMEWORK
@import "~vuesax/dist/vuesax.css";
```
Then you need to find what classes you want to override in the framework, for me I want to make all vuesax cards have no border-radius. After some research, the styling is under the class *.vs-card*

Write the class name above the import and apply your custom CSS.

```
.vs-card{
border-radius: 0;
}

@import "~vuesax/dist/vuesax.css";
```

Import **main.scss** to your project and see your CSS overriding the framework's CSS. 

Hope this helps you :)

####Some words
This is my first blog post I've written to Dev.to as well a blog post in general. I decided to take the time to write this because on the web, I barely found any information on how to apply your CSS to a framework. 
Wrote this at 1 AM in joy after finding the solution.
Programming in C++ (Part 10 Data Structures)
Tags: cpp, beginners
Published: 2021-04-14 23:03:57

This post describes how to build some common data structures: a hash table, a binary search tree, and a graph. I also describe how to use the STL `unordered_map` class.

* [Simple linked list](https://markm208.github.io/cppbook/chapter10/01/index.html)
* [Simple hash table](https://markm208.github.io/cppbook/chapter10/02/index.html)
* [More complex hash table](https://markm208.github.io/cppbook/chapter10/03/index.html)
* [STL `unordered_map`](https://markm208.github.io/cppbook/chapter10/04/index.html)
* [Binary search tree](https://markm208.github.io/cppbook/chapter10/05/index.html)
* [Graph adjacency matrix](https://markm208.github.io/cppbook/chapter10/06/index.html)

###Call to Action
Now that you have reviewed the guided code walk-throughs I ask that you write a program that includes a class which is equivalent of the `vector` called SafeArray. SafeArray has a method called `at` that returns the element at the specified position. A SafeArray maintains a pointer to an array on the heap. Use the pointer to make the array grow and shrink with calls to `push_back` and `pop_back`. The SafeArray will have a method called `size` that returns the number of items in it. Include a default constructor that sets the initial size of the underlying array to hold 10 elements. Include a destructor to `delete` the array when the SafeArray falls out of scope.

###Comments and Feedback
You can find all of these code playbacks in my free 'book', [An Animated Introduction to Programming in C++](https://markm208.github.io/cppbook/). I am always looking for feedback so please feel free to comment here or to send me a message. You can follow me on twitter [@markm208](https://twitter.com/markm208).
Programming in C++ (Part 7 Structured Data)
Tags: cpp, beginners
Published: 2021-04-14 23:03:26

This post describes how to use structured data types. Structured data types allow you to group related data together so that it can be passed around easily.

* [Simple `struct`](https://markm208.github.io/cppbook/chapter7/01/index.html)
* [Hierarchical `struct`s](https://markm208.github.io/cppbook/chapter7/02/index.html)
* [`vector`s as members of `struct`s](https://markm208.github.io/cppbook/chapter7/03/index.html)
* [`struct`s with a `vector` of objects](https://markm208.github.io/cppbook/chapter7/04/index.html)
* [Calculus with `struct`s](https://markm208.github.io/cppbook/chapter7/05/index.html)

###Call to Action
Now that you have reviewed the guided code walk-throughs I ask that you write a program that has a struct to represent a cell phone. Every cell phone has a model name and manufacturer along with a camera with a mega-pixel resolution. For example, I may want to store information about an Apple IPhone X with a 12 MP camera or a Google Pixel 4 with a 16 MP camera.

Your program will create three cell phone objects, fill them, and then add them to a vector. Lastly, print out the information about each cell phone on the screen.

Write a function that takes a cell phone object by reference and prompts the user to enter in the model, manufacturer, and camera resolution. Write another function that prints information about a cell phone. Write a function that takes a vector of cell phones and prints each one.

###Comments and Feedback
You can find all of these code playbacks in my free 'book', [An Animated Introduction to Programming in C++](https://markm208.github.io/cppbook/). I am always looking for feedback so please feel free to comment here or to send me a message. You can follow me on twitter [@markm208](https://twitter.com/markm208).
Programming in C++ (Part 6 Vectors)
Tags: cpp, beginners
Published: 2021-04-14 23:03:15

C++ comes with the Standard Template Library (STL) which is a collection of different containers. This post will cover vectors. A `vector` is an array-based container that holds data very much like an array does but it is *smarter*. It knows how many elements are in it and it can grow as the program is running. I also show how to read and write data from a file, efficiently search through an array-based container, sort values, and more.

* [`vector`](https://markm208.github.io/cppbook/chapter6/01/index.html)
* [Passing a `vector` to a function](https://markm208.github.io/cppbook/chapter6/02/index.html)
* [Advanced features of `vector`s](https://markm208.github.io/cppbook/chapter6/03/index.html)
* [Reading from a file and storing in a `vector`](https://markm208.github.io/cppbook/chapter6/04/index.html)
* [Linear search and binary search](https://markm208.github.io/cppbook/chapter6/05/index.html)
* [Bubble sort](https://markm208.github.io/cppbook/chapter6/06/index.html)
* [Writing to a file](https://markm208.github.io/cppbook/chapter6/07/index.html)
* [Two dimensional `vector`s](https://markm208.github.io/cppbook/chapter6/08/index.html)

###Call to Action
Now that you have reviewed the guided code walk-throughs I ask that you write a program to read in whole words from a file and store them in a vector of strings. Only store a word in the vector if it is not already present. Strip any punctuation marks from the words and make them all lowercase letters.

###Comments and Feedback
You can find all of these code playbacks in my free 'book', [An Animated Introduction to Programming in C++](https://markm208.github.io/cppbook/). I am always looking for feedback so please feel free to comment here or to send me a message. You can follow me on twitter [@markm208](https://twitter.com/markm208).
Need Help? Are you stuck with your coding issue?
Tags: codenewbie, discuss, tutorial, webdev
Published: 2021-04-14 22:56:50

Need Help?

The following resources are valuable to learning software development:

[Google the problem](https://google.com/)
[StackOverflow](https://stackoverflow.com/)
[Mozilla MDN Web Docs](https://developer.mozilla.org/)
[freeCodeCamp](https://freecodecamp.org/)
[Software development, coding, programming, and tech discord groups](https://dev.to/htnguy/top-10-discord-servers-for-developers-559o/)

P.S. this isn't going to exactly tell you What you need to get past your frustration or issue. 

LOOK FOR THE answer, mostly everyone wants a handout. Don't be like everyone else. 

Go get it yourself, don't be soft. Look for your own damn answers, and quit complaining, frustration is a part of the process.

Help yourself get better by using these. There are plenty more that could be named but this is an ideal way to get some sort of answers to your questions. 👨‍💻
setTimeout e setInterval
Published: 2021-04-14 22:39:44

Chegamos a mais um post da minha [saga de estudos](https://dev.to/inando85/bem-vindo-de-novo-javascript-1b48) em JavaScript.

No post de hoje irei falar um pouco sobre os métodos `setTimeout` e `setInterval`.

### setTimeout

O método `setTimeout` é usado para executarmos uma função após um determinado tempo, esta função será executada uma única vez.

Este método recebe dois argumentos:

- 1: A função que será executada após o tempo informado
- 2: O tempo que deve ser esperado para executar a função do primeiro argumento, esse tempo deve ser informado em milissegundos.

```js
setTimeout(() => {
 console.log('Execução do setTimeout!')
}, 2000)
```

Levando em consideração o código de exemplo acima, após o carregamento da página, será aguardado 2 segundos para executar a função, que no nosso caso é apenas informar no console a string `Execução do setTimeout`.

### setInterval

Já o método `setInterval`, é usado para ficar executando uma função no intervalo de tempo que foi determinado.

Este método também recebe dois argumentos:

- 1: A função que ficará sendo executada
- 2: De quanto em quanto tempo essa função será executada, também em milissegundos.

```js
setInterval(() => {
 console.log('Execução do setInterval!')
}, 2000)
```

Observando o código de exemplo acima, a função passada como primeiro argumento ficará sendo executada a cada 2 segundos, logo, a cada 2 segundos será impresso no console a string `Execução do setInterval!`.

Desta forma, esse `setInterval` ficará sendo executado indefinidamente, pois não foi informado um momento para que esse execução seja parada.

Para fazermos isso, devemos usar um método chamado `clearInterval`. Observe o código abaixo:

```js
let counter = 0

const timer = setInterval(() => {
 console.log('Execução do setInterval!')
 counter++
 
 if (counter === 5) {
  clearInterval(timer)
 }
}, 2000)
```

Como pode ser observado acima, usei o método clearInterval para parar a execução do código assim que a variável counter fosse igual a 5.

Com isso, a cada dois segundos será impresso no console `Execução do setInterval` e a variável counter será incrementada, assim que essa variável atingir o valor 5, cairemos na condição do `if` e com isso, o método clearInterval será executado, parando a execução da const timer.

Por hoje é isso, espero que estejam curtindo as postagens!

Vou deixar aqui abaixo o link do MDN com a documentação sobre [setTimeout](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#settimeout) e sobre [setInterval](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#setinterval)

________________________________________________________________

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

[LinkedIn](https://linkedin.com/in/inando85)
[GIthub](https://github.com/inando85)
[Twitter](https://twitter.com/inando85)
She sued for pregnancy discrimination. Now she’s battling Google’s army of lawyers
Tags: google, womenintech, diversity
Published: 2021-04-14 22:38:29

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vcfpkr1gxmhnsaw4c5u.jpeg)

Meet Chelsey Glasson, she had been discriminated against while pregnant and had witnessed others being treated similarly.

When Chelsey Glasson found out she was pregnant with her second child in 2019, she did not anticipate the first three years of her new baby’s life would be overshadowed by an epic legal battle against a trillion-dollar company.

The 38-year-old sued Google, her former employer, in 2020 alleging she had been discriminated against while pregnant and witnessed others being treated similarly, and faced retaliation from her manager when she spoke up about it.

Read More: https://www.theguardian.com/technology/2021/apr/09/she-sued-for-pregnancy-discrimination-now-shes-battling-googles-army-of-lawyers
FLUTTER order of Constructor, Method, Class, Properties, ect..
Tags: flutter, devops, help, android
Published: 2021-04-14 22:25:45

What’s the order of using Flutters Widget Api? 
There’s:

Constructor,
Properties,
Methods,
Class, 
Ect...

What order do you use what? 
Say.... for a container, or AppBar.... what’s the order for those?