teleren/devto huggingface dataset:
Build A Flutter Tinder Clone with Firebase & BLoC #8/40 SignUp Bloc
Tags: flutter, tutorial, dart, career
Published: 2020-07-22 05:04:28

---
title: Build A Flutter Tinder Clone with Firebase & BLoC #8/40 SignUp Bloc
published: true
description: Tutorial on building a Tinder clone with Flutter, Firebase and Bloc
tags: #Flutter #Tutorial #dart #career
//cover_image: https://direct_url_to_image.jpg
---
In this series of videos we are going to build a Tinder clone with Flutter, Firebase as a backend and Bloc as our state management solution.

Here we handle the SignUp Bloc.

Protip: Watch video at 1.25 speed.

{% youtube Qt3nw_lKwWs %}
What is JSX?
Published: 2020-07-22 04:58:00

JSX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML.

##What does “syntax extension” mean?

In this case, it means that JSX is not valid JavaScript. Web browsers can’t read it!

If a JavaScript file contains JSX code, then that file will have to be compiled. That means that before the file reaches a web browser, a JSX compiler will translate any JSX into regular JavaScript.

#**Why JSX?**
React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both.

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

#JSX Elements And Their Surroundings

JSX elements are treated as JavaScript expressions. They can go anywhere that JavaScript expressions can go.

That means that a JSX element can be saved in a variable, passed to a function, stored in an object or array…you name it.

Here’s an example of a JSX element being saved in a variable:
```
const navBar = <nav>I am a nav bar</nav>;
```
Here’s an example of several JSX elements being stored in an object:
```
const myTeam = {
  center: <li>Benzo Walli</li>,
  powerForward: <li>Rasha Loa</li>,
  smallForward: <li>Tayshaun Dasmoto</li>,
  shootingGuard: <li>Colmar Cumberbatch</li>,
  pointGuard: <li>Femi Billon</li>
};
```
#Attributes In JSX
JSX elements can have attributes, just like HTML elements can.

A JSX attribute is written using HTML-like syntax: a name, followed by an equals sign, followed by a value. The value should be wrapped in quotes, like this:
```
my-attribute-name="my-attribute-value"
```
Here are some JSX elements with attributes
```
<a href="http://www.example.com">Welcome to the Web</a>;

const title = <h1 id="title">Introduction to React.js: Part I</h1>; 
```
A single JSX element can have many attributes, just like in HTML:
```
const panda = <img src="images/panda.jpg" 
alt="panda" width="500px" height="500px" />;
```
I built my own static site generator.
Tags: javascript, webdev, node, showdev
Published: 2020-07-22 04:30:39

Hi everyone,
I'm writing my first article on dev.to and it's about the static site generator I have been building.

About a month ago, I saw a website called `StaticGen`(StaticGen has a list of static site generators for Jamstack sites). There were a lot of static sites generators that I thought why not challenge myself to build a static site generator.

I knew that ssg generates static sites from markdown and other formats of files but I had no idea how. So, I did what must of us programmers do. I searched in google, "How to build static site generator". I found one useful blog which was a tutorial about creating a static site generator.

After researching a bit, I begin to create my own static site generator. I was going to use mustache as a templating engine but I thought why not create my own templating engine. I used `vm` module of nodejs and some regex to create a simple templating engine.

{% twitter 1284110735329484800 %}

I used some npm packages like `frontmatter`, `remarkable` to parse markdown files. Then I built a live reload development server form scratch for my static site generator using `chokidar` and `ws`.

I named my static site generator as ulka (meteor) and my templating engine as ulka-parser and published them to npm. Then I created a new npm package `create-ulka-app` which clones a default starter (https://ulka-starter-default.netlify.app/) from GitHub and installs the npm packages. 

ulka: https://github.com/ulkajs/ulka
ulka-parser: https://github.com/ulkajs/ulka-parser

Ulka's working methodology is simple. It parses markdown and ulka files and creates html files. It changes the name of all assets and store in a single folder. Also, you can use javascript inside markdown files. Ulka also provides feature postParse and preParse that accepts array of functions that will run before(prePrase) or after(postParse) parsing markdown files. 

It's not completed yet, but my exams are coming soon. So, I will continue working on this after 1 month. It was fun creating it while learning.
Python plotly bar chart
Tags: python, corona, plotly, requests
Published: 2020-07-22 04:15:31

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

Check, [Python programming tutorials available in programdoc](https://www.programdoc.com/python/intro)
JavaScript Jungle the Newsletter
Tags: javascript, news, learning, tutorial
Published: 2020-07-22 03:56:04

I created JavaScript Jungle, which is a short newsletter that explores lesser-known JavaScript terms. These are the methods and properties that aren't usually taught in beginner or even intermediate courses. Emails are sent Monday through Friday. We usually go over one term per email, so it takes 5 minutes or less to read. I hope you’ll explore the jungle with me! Go here to sign up: <a href=“https://javascriptjungle.com” target=“_blank”>https://javascriptjungle.com</a>
HTML Cheat Sheet
Tags: html, cheatsheat
Published: 2020-07-22 03:43:00

Les comparto mi Cheat Sheet del HTML resumido.

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

English version

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yza8pacfprlmswedk0un.png)
ReactJS: Component everything or not?
Tags: react, webdev, discuss
Published: 2020-07-22 03:15:21

Hey devs! Since I started learn ReactJS some questions don't let me sleep. When we should create components?
We should component everything or only if we will use it again in future? What is not a good practice put inside App.js?

Sometimes I put a entire Form inside App.js and I don't know if it is a good practice when use React.

Let me know what you think.
Minimum Requirements for a SAAS Platform 
Tags: saas, requirements, minimum, checklist
Published: 2020-07-22 02:39:19

---
title: Minimum Requirements for a SAAS Platform 
published: true
description: 
tags: saas, requirements, minimum, checklist
//cover_image: https://direct_url_to_image.jpg
---

Below is a list of minimum requirements I believe are vital to the success of a SAAS platform(Note that this isn't the word product)

- Authentication Strategy(Email, Username, Social, etc..)
- Multi-Tenant Setup
- Database Migrations
- Queuing Mechanism(RabbitMQ, Redis, etc..)
- Caching(Redis, Memcache, etc..)
- Configuration Management
- Search Tools(Elasticsearch, Algolia)
- Unit Tests
- Integration Tests
- Deployment Strategy
- Dockerfied Development
- Dashboard for Statistics(Grafana, Redash, etc..)
- Hosting Provider

Always try to think through these items before digging into the code. I have found that by doing so you significantly reduce the problems you will run into when trying to scale your product and team.
My First (Proper) Website
Tags: feedback
Published: 2020-07-22 03:11:17

A couple of days ago, I began work on my personal website (https://michaelmartin.xyz) with the intention on having 4 base-pages: Home, Blog, Portfolio, and Contact. Today, I have finished my Home page and Contact page. If you feel like it, why not take a look and tell me what you think?

Criticism is, of course, welcome. And the source code can be found on my Github. (Repo name: MichaelMartin.xyz)
Make your VMs cooler - Azure DevOps Environments
Tags: devops, azure, pipelines, virtualmachines
Published: 2020-07-22 02:47:22

Azure Pipelines is a great tool for doing Continuous Integration and Continuous Deployment and thanks to Multi Stage Pipelines we can finally have build, test, and release directly expressed in source code.

Recently they have also introduced the concept of "Environments", which belongs to the release process.

In the previous articles of this series we've looked at the Environments in general, and then we've gone deeper into it and explored the integration between environments and Kubernetes clusters.

Today, instead, we will focus on how we can connect our __Virtual Machines__ to Azure DevOps environments and take advantage of it. _Because we all know that among all the fun and cooler stuff, Virtual Machines are here to stay._

### Video

This time I do not have the _written version of the explanation_, because it is just much better to see this in action.

In this video I will show you first how to set everything up, and then what advantags we have in using Environments with VMs.

Enjoy the watch!

{% youtube zBr7cl6ASMQ %}

### Conclusion

Alright, this is how to use the Azure DevOps Environments with Virtual Machines and how amazing and usefult it is working this way.

As you've seen, super easy to set up and it generates the setup script for you. And remember, the PAT used expires after 3 hours, so you'd have to generate the script again if you haven't used it yet.

And the reolling deployment is super useful!

Let me know in the comment section below what do you think and how you deploy to your VMs.
A First Look at Crystal Programming Language and its Ecosystem
Tags: programminglanguages, softwaredevelopment, crystal
Published: 2021-07-24 17:03:27

---
title: A First Look at Crystal Programming Language and its Ecosystem
published: true
date: 2020-07-22 02:33:53 UTC
tags: programminglanguages, softwaredevelopment,crystal
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/1922/1*REIGND_1S_FS8Cath8MwYQ.png)](https://itnext.io/a-first-look-at-crystal-programming-language-and-its-ecosystem-efab042fbc07?source=rss-9a53804556------2)

Crystal is a general purpose, statically-typed, object-oriented, and compiled programming language coming from Manas Tech. The language…

[Continue reading on ITNEXT »](https://itnext.io/a-first-look-at-crystal-programming-language-and-its-ecosystem-efab042fbc07?source=rss-9a53804556------2)
24 ways to speed up your PC
Tags: computerscience
Published: 2020-07-22 02:17:32

If your computer not response or not responding | then I highly recommended you follow my 24 ways to speed up your PC tips to improve your computer performance. These tips and tricks will help you with better performance. So let Me Introduced You all the tips to speed up your PC.
https://bit.ly/3eOfTE3

1. Uninstall the unwanted software.
Many Computer comes with multiple pre-install application which is not wanted or needs for you. This app large size and cause your computer in low disk space. Uninstall any unnecessary or unused software you might not use.

Right-click the Start menu, choose "Control Panel" > "Programs" > click "Uninstall a program". Select the programs you no longer need and click "Uninstall" at the top of the list.read more https://bit.ly/3eOfTE3

2. Disable startup programs
Your computer may be slow down because of a huge list of startup programs that start along with the system. These application slowdowns the bootup process and degrade the device performance, so disable such apps to speeds up your computer performance and improve the overall responsiveness.

There is the details information on how to manage the startup programs on windows, do the following short-cut to locate and disable the startup programs:
Press the key Ctrl + Shift + Esc to open Task Manager
Click the Startup tab to check the list of startup programs
Right-click and select Disable on programs you only occasionally or ever rarely use read more...
https://bit.ly/3eOfTE3
Small automation with Telegram Bot for price analytics
Tags: telegram, bot, typescript
Published: 2020-07-22 02:06:46

How much time did you deal with a situation when realtors are trying to cheat on you? When do they announce prices, which is much higher than it should be?

Right now(July 2020), I'm in position when with my spouse, we start looking for a new apartment. Here in Singapore, the primary source of rent flats – it's PropertyGuru. 

Luckily for us, they are providing some insights about price history. But, just looking at a list of prices, it's quite hard to guess what is an average price. For better perception, I've decided to visualize this table. Box plot would ideal for this purpose.

![Box plot](https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Michelsonmorley-boxplot.svg/600px-Michelsonmorley-boxplot.svg.png)
<figcaption>Example from Wikipedia</figcaption>
It's showing the distribution of your numerical data. 

So. How it works.
1. I'm sending a link on any apartment
https://www.propertyguru.com.sg/listing/22013261/for-rent-the-seawind-telok-kurau

2. And in 10-20 seconds I get a box plot with a chart.

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

Super simple but very efficient. It's very easy to understand if the mean price is 2k and realtor is asking 3k, it's a sign that someone's trying to make it more expensive than it really is.
Angular Elements: Composable Definition Pattern
Tags: angular, angularelements
Published: 2020-07-28 13:43:08

---
title: Angular Elements: Composable Definition Pattern
published: true
date: 2020-07-22 01:59:46 UTC
tags: angular,angularelements
canonical_url: https://blog.lacolaco.net/2020/07/angular-elements-composable-definition-pattern/
---

Assuming a situation we have…

- An Angular component library project, `Lib1Module`
- An Angular Elements library project, `Lib1ElementsModule`
- An Angular Elements library project, `Lib2ElementsModule` which uses `Lib1ElementsModule`

It can be achieved with loading scripts of both Lib1 and Lib2 separately. But composing multiple Angular Elements definition brings some benefits.

- Unified Angular bootstrapping (better performance)
- Single `<script>` tag in HTML (free from loading order problem)

## Creating `Lib1ElementsModule`

```ts
import { createCustomElement } from '@angular/elements';

export function defineCustomElements(injector: Injector) {
  customElements.define(
    'lib1-button-element',
    createCustomElement(Lib1ButtonComponent, { injector })
  );
}

@NgModule({
  imports: [Lib1Module],
  // `entryComponents` is not needed if Ivy is enabled
  entryComponents: [Lib1ButtonComponent],
})
export class Lib1ElementsModule {
  constructor(private readonly injector: Injector) {}

  ngDoBootstrap() {
    defineCustomElements(this.injector);
  }
}

```

To use `Lib1ElementsModule` , bootstrap it directly. Then `ngDoBootstrap()` method will be called.

```ts
// main.elements.ts
platformBrowserDynamic().bootstrapModule(Lib1ElementsModule);

```

## Creating `Lib2ElementsModule`

`Lib2ElementsModule` enables both Lib1 and Lib2 Angular Elements by composition.

```ts
import { createCustomElement } from '@angular/elements';
import {
  Lib1ElementsModule,
  defineCustomElements as defineLib1Elements,
} from 'lib1';

export function defineCustomElements(injector: Injector) {
  customElements.define(
    'lib2-card-element',
    createCustomElement(Lib2CardComponent, { injector })
  );
}

@NgModule({
  imports: [Lib2Module, Lib1ElementsModule],
  // `entryComponents` is not needed if Ivy is enabled
  entryComponents: [Lib2CardComponent],
})
export class Lib2ElementsModule {
  constructor(private readonly injector: Injector) {}

  ngDoBootstrap() {
    // Compose definition
    defineLib1Elements(this.injector);
    defineCustomElements(this.injector);
  }
}

```
Relative and Absolute paths
Tags: webdev, javascript, learning
Published: 2020-07-22 01:55:38

---
title: Relative and Absolute paths
published: true
description: Short description on paths
tags: webdev, javascript, learning
cover_image: https://i.picsum.photos/id/1063/4867/3215.jpg?hmac=-ksdmOruOUma2z6ENQo9Yqp9T7lsnokLo8SFfAt-UNU
---

This is my third post this week. I was prompted to start blogging about my learnings from Zell Liew's course in order to: 

A) Help myself digest material and 

B) Help others learn or re-learn a concept. 

These posts are my own take on the material of the course and are intended to help solidify some JS and web dev concepts. Feel free to add some comments or better yet, correct me! Thanks!

## Relative and Absolute paths

When I started to get into web dev someone told me that it was extremely important to understand the difference between `relative` and `absolute` paths. I started to overthink it a lot and many times got confused so maybe this analogy will help you understand if you've been struggling to figure it out:

### Relative
Relative paths change. Imagine you walk to the bus stop, take the bus to work, walk to work and go upstairs to your office. Your path`(home/walk1/bus/walk2/office/you)` could have been different or may change in the future. It depends on your location but how you get there may always change. Maybe you get a drive one day: `home/drive/work/you`. I will say that when you have a larger code base, tracking down a file path can be tricky, which is why naming conventions and code structure is very important.

### Absolute
Absolute paths can easily be thought of websites that you point your files to. The website rarely changes, for example `font awesome` or something if you are using a `CDN`. Maybe something behind the scenes on the websites end changed but from your file to the site, is a direct/absolute path.
Building a Code Editor for the Web - Output to Custom Console
Tags: webdev, html, css, javascript
Published: 2020-07-22 01:45:57

In this final video, we'll be displaying the logs we stored in the array to our custom console and styling them according to the log type 🔥

Find the code for this video in this branch: 
https://github.com/luvuong-le/code-editor-tutorial/tree/output-to-custom-console

Check out the previous part to this video [here!](https://dev.to/coderarchive/building-a-code-editor-for-the-web-redefining-the-console-1416)

This was my first time doing a longer series so hope you enjoyed it! 💪

Follow and connect with me on:
----------------------------------
📹 Youtube: https://www.youtube.com/channel/UCWaB4SBBUCvhYb91fz5Vidg
🐦 Twitter: https://twitter.com/coderarchive
📚 Github: https://github.com/luvuong-le
💼 LinkedIn: https://www.linkedin.com/in/lu-vuongle/
📷 Instagram: https://www.instagram.com/coderarchive/
📝 Dev.to: https://dev.to/coderarchive
Day 51 : #100DaysofCode - Code Along
Tags: 100daysofcode
Published: 2020-07-22 01:27:27

My post previous post mentioned that I will add an item to a list. {% link https://dev.to/sincerelybrittany/day-49-100daysofcode-still-coding-along-bb8 %}

In order to create a list ``rails g model item description`` which generates:

```
  invoke  active_record
  create    db/migrate/20200719021641_create_items.rb
  create    app/models/item.rb
  invoke    test_unit
  create      test/models/item_test.rb
  create      test/fixtures/items.yml
```

Then you have to migrate your database and create your schema by running ``rails db:migrate`` and then set up your associations in the models. A List has many items and an Item has many lists. 

Then as always check your database within your console.

``rails c``
``list = List.create(:description => "cookies")``
``milk = Item.create``
``milk.description = "Milk"``
``milk`` 
``milk.list_id = list.id``
``milk.list_id = list``
``milk.save`` 
``milk.list``

Great everything works. The has_many in items creates many methods and allows us to do something like this: 

``list.items.create(:description => "new shoes")``

Feel free to checkout the final code on Github. 

{% github SincerelyBrittany/todo-mvc-lv-codealong no-readme %}

As always, thanks for reading!

Sincerely, 
Brittany
Add a README.md to your GitHub profile.
Tags: git, github
Published: 2020-07-22 01:14:40

Are you want to add a short description to your GitHub profile? Are you know this feature? Here I explain you how to do it. I learned this feature when I was scrolling on Twitter and this is the result.

I show you how to implement it step by step, I hope that this will be useful for you.

## Create a repository

This is a secret feature, you do not tell anyone :)

First step, create a GitHub repository with the same name of your username.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f0mn233kxjjhazoj8ker.png)

## Import or create a local repository
When you create a repository you can do one of this options.

Create a local repository, we will do this.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4rj5ddngdcw71f1d9ipc.png)

Or import a local repository, I know it, only is a file.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/edatapq81dzgh3bs3bnz.png)

## Create a mardown file

You must create a Markdown file named README.md with content like this.

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

## Final result
Here you can see the final result.

{% gist https://gist.github.com/ismaeldevmw/124f30d6eeb5a33fea8558f5014be31d %}

Thanks, for more content you can follow me on my social media. See you.