teleren/devto huggingface dataset:
How to split a monolith using Martin Fowler's patterns
Tags: microservices, stranglerfig, branchbyabstraction, k8singress
Published: 2020-04-28 16:52:25

---
title: How to split a monolith using Martin Fowler's patterns
published: true
description: https://github.com/javieraviles/split-the-monolith  Repository describing a 3 stages migration from monolith to microservices based on Strangler Fig and Branch by Abstraction patterns. Adding infra along the way to implement a proxy using K8s-ingress and usage of a feature toggle. 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/r1l1ype64uk0pkrvdb46.jpg
canonical_url: https://github.com/javieraviles/split-the-monolith
tags: microservices,strangler-fig,branch-by-abstraction,k8s-ingress
---
Css grid part 1
Tags: Css
Published: 2020-04-28 16:46:47

Css grid is a technology for making responsive Web site features.It is very simple to add grid to your site.We will make it in few steps:

**1.**

```html

<div class="grid">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
<div class="card">9</div>
<div class="card">10</div>
</div>

```
Now let's add css to our project:

**2.**

```css
body {
margin: 10px;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
} 
.card {
height: 35px;
width: 140px:
background-color: dodgerblue;
text-align: center;
} 
```
the display: grid; in the grid class tells the compiler that there we are using grid. grid-gap is the gap between two grid elements. 
With grid-template-columns we are entering the number of columns. 
With repeat(auto-fit, minmax(210px, 1fr)) we make the grid to fit whatever the size of the screen is.

New grid lesson will be soon
A React Router Bug Tip
Tags: react
Published: 2020-04-28 16:45:00

---
title: A React Router Bug Tip
published: true
description: 
tags: React
---

I started learning React recently and wanted to focus on the Router component. Here I'll post a few things I learn as I go through it. I'll update this as I come across new tidibts.

* If you're clicking on a Link and it's not taking you anywhere but it is changing your url, then check to make sure that the link is within your Router component (Be that a BrowserRouter, HashRouter, MemoryRouter, etc). It can be nested within children which are in the Router, but needs to be within the Router. An example: 
```html
<Router>
    <NavBar />
    <Route exact path="/" render={(props) => <MyComponent {...props} />} />
    {/* Other Routes here */}
</Router>
```
Now you can easily develop Flutter apps on Fuchsia with my toolchain
Tags: fuchsia, flutter, mobiledev
Published: 2020-04-28 16:27:03

---
title: Now you can easily develop Flutter apps on Fuchsia with my toolchain
published: true
description: Flutter on Fuchsia
tags: fuchsia,flutter,mobiledev
cover_image: https://preview.redd.it/dnjb5ddsbiv41.png?width=1280&format=png&auto=webp&s=7e33dbc0f86ca5c73a27ee8ac87e96506279884d
---

https://github.com/michaellee8/flutter_fuchsia_toolchain

Features:
- Running Fuchsia in emulator/on device without cloning and compiling the whole source tree using Google's Fuchsia SDK.
- Can run Flutter apps with hot-reload enabled, and build a release package and then push it into Fuchsia as well.
- Wrapped into one single command flutterfx to call all these tools.
Free Copies of React Tutorial Book for Beginners
Tags: react, tutorial, beginners, javascript
Published: 2020-04-28 16:23:42

Have you started building awesome applications with React? 

Well, I covered the fundamentals here and I have received a lot of positive feedback.

Here is the link on dev.to: 

[https://dev.to/ibaslogic/react-tutorial-a-comprehensive-guide-to-learning-react-js-in-2020-1jdi](https://dev.to/ibaslogic/react-tutorial-a-comprehensive-guide-to-learning-react-js-in-2020-1jdi "React tutorial")

Now, I'm giving out a thorough guide (my newly published React tutorial Book) for as many aspiring developers as possible for FREE.

This book covers the core React fundamentals and Hooks. You will also get to build React Apps from Scratch.

To get one:

- Follow me on [Twitter](https://twitter.com/ibaslogic "Ibaslogic Twitter") 
- Drop/Inbox your Email on Twitter
Laravel Controllers
Published: 2020-04-28 15:55:45

_Exceprts from the book Laravel: Up and Running by Matt Stauffer_

Requests can come to applications not only via routes, but also cron jobs, Artisan command-line calls, queue jobs etc.
Controller's primary job is to capture the intent of an HTTP request and pass it on the rest of the application.

To create controller, run:
`php artisan make:controller <controller-name>`

This creates a controller class inside `app/Http/Controllers/`.
Additionally, the `--resource` option can be used to autogenerate methods for basic resource routes like create() and update()

Artisan's **make** namespace provides a lot tools for generating skeleton files for a variety of system files.

A common controller method example:
`
//SomeController.php
public function index(){
return view('tasks.index')
->with('tasks',Tasks:all());
}`
The above can be used as:
`//route/web.php
Route::get('/','SomeController@index');
`
This loads the `resources/views/tasks/index.blade.php` or `resources/views/tasks/index.php` and passes it a single variable named **tasks** which contains the result of the **Task::all()** Eloquent method.
Curso JSON - 8. Finalización
Tags: spanish, vscode, node, javascript
Published: 2020-04-28 15:47:00

{% youtube pCeZv0kNTTg %}

Curso sobre JSON de novato a experto (**versión GRATIS**)
Presentación: https://slides.com/equimancho/json/#/8

Evaluación: https://forms.gle/WtPKfEMgTffm9KrQ6
Encuesta: https://forms.gle/mA3SgMXZ9BY8dUsA9 🙏

Redes Sociales:
Twitter: https://twitter.com/equiman/
Dev.to: https://dev.to/equiman
YouTube: https://www.youtube.com/c/equimancho
LinkedIn: https://www.linkedin.com/in/equiman/

---

**That's All Folks!
Happy Coding** 🖖

[![cerveza](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4zle20oa7anpfjvap8n.png)](https://github.com/sponsors/deinacademy)
Curso JSON - 7. Reto
Tags: spanish, vscode, node, javascript
Published: 2020-04-28 15:43:53

{% youtube xX5uRAEC7Lg %}

Curso sobre JSON de novato a experto (**versión GRATIS**)
Presentación: https://slides.com/equimancho/json/#/7

Repositorio:
https://github.com/equiman/playground-json

API de Game of Thrones:
https://api.got.show/doc/

Descargas:
Postman: https://www.postman.com/

---

**That's All Folks!
Happy Coding** 🖖

[![cerveza](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4zle20oa7anpfjvap8n.png)](https://github.com/sponsors/deinacademy)
Angular CSS using Directives only
Tags: angular, typescript
Published: 2020-04-28 15:39:35

**Directives Instead of CSS**

CSS is messy for sure, hard to refactor and it's everywhere. What if we can encapsulate CSS into Directives making them dynamically adhere to input parameters? 

```typescript
import { Directive, ElementRef, Input, OnInit } from "@angular/core";

@Directive({
   selector: "[appGrid]",
})
export class GridDirective implements OnInit {
   /** Enter number as string; units are em */
   @Input() minWidth: string = "5em";
   /** Enter number as string; units are fr */
   @Input() maxWidth: string = "1fr";
   /** Just put in number units are in em */
   @Input() columnGap: string = "0.5em";

   constructor(private elementRef: ElementRef) {}

   ngOnInit() {
      let css = `
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(${this.minWidth},${this.maxWidth}));
     grid-column-gap: ${this.columnGap};`;
      this.elementRef.nativeElement.setAttribute("style", css);
   }
}
```
It currently only supports Columns, but is easily changed to do other things. Because it uses auto-fit the number of columns are 100% fluid meaning they shrink and expand based on the width of the window. No media queries necessary. All the @Inputs have default values so everything works out-of-the-box.  However, the minmax values are able to be injected from the user of the directive.

**How do we use it?**

Simply add "appGrid" into any HTML container tag, like this:

```html
<div appGrid>
  //each successive html container is a candidate for its own column
</div>
```
Take away: What you see above is the replacement of using the class attribute and any back-end specific styles. Because of intellisense, we can right click on appGrid and "go to definition" at any time. It's just a better way to effect styling all around.

View Encapsulation is unaffected by this.

Coming up: Adding More function to the Angular Grid Directive...

JWP2020
Vim to the rescue: Multiple Cursors
Tags: vim, tutorial, productivity, todayilearned
Published: 2020-04-28 15:39:02

I have faced loads of situations where there is a large block of text which needs a particular action performed per line. This can easily be done using a macro in vim. But when we use vim, we care about efficiency. So we will be seeing how it can be done by using the `visual block mode` in vim.

---

## Visual Block Mode

The visual block mode in vim is used to visually select multiple lines/block of text in vim and perform a certain action on it. This action can be anything ranging from an insertion to a deletion. This action is then reflected in each and every line of the block of text just like you would use multiple cursors in an IDE like VS Code. 

To activate visual block mode, press **Ctrl + v**. Now you can select lines horizontally/vertically by using the navigation keys:

```
[num]h|j|k|l
```

Once you select a block of text, you can press any of the vim's keybindings for performing actions on the block. For example, you can press **d** to delete the block.

---

## Line by line operation in visual block mode


To insert/delete text on a line-by-line basis, press **I** to go into insert mode in the visual block or **A** to go into append mode. Once you do that, It will deselect the block and take you to the top line. Perform your desired action there and press escape. This action will then be reflected in each and very line of the visual block.

![Visual Block Mode](https://dev-to-uploads.s3.amazonaws.com/i/lpue4p5js0b75czf5wk9.gif)

---

## Incrementing numbers in a list

Imagine that you have to make a long list of incremental numbers. What would you do? 

There is a very easy way to do this in vim using the visual block mode. Let us say we need to write numbers from 1 to 100. Follow the following steps:

* Write 1 and a newline and copy it a 100 times by typing: **y1j**. Now paste it a 100 times using **100p**.

* Go to the visual block mode **Ctrl + v** and select the number block from the second 1, using **99j**.

* Press **g** and then **Ctrl a**. The latter is used to increment numbers and the former makes sure that the global context of numbers in a visual block is realized.

![Increment Integers](https://dev-to-uploads.s3.amazonaws.com/i/egracmuld8fk04ftxyh5.gif)


---

## Indenting a block of code

A block of code can be effortlessly indented using the visual block mode. Select a block using **Ctrl + v** and the navigation keys. Then hit **>>** for right indentation and **<<** for left indentation.

The **o** button can be used to go to the other side of the selected text in visual block mode, in addition to using **$**. The latter will take you to the end of a line rather than the end of the highlighted block.

![Indentation](https://dev-to-uploads.s3.amazonaws.com/i/bsabv3fi8auf6nlx8275.gif)
100daysofcode Flutter
Tags: 100daysofcode, flutter
Published: 2020-04-28 15:31:12

day 50/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Today learn about async ,await, try catch, finnaly
https://github.com/triyono777/100-days-of-code/blob/master/log.md

sorry for skipping yesterday
🚨 Live Tonight: Build an Accessible React Component #2
Tags: a11y, react, webdev, livecode
Published: 2020-04-28 15:26:46

---
title: 🚨 Live Tonight: Build an Accessible React Component #2
published: true
description: Join me on Twitch and we'll build a second accessible React component together.
tags: a11y, react, webdev, livecode
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/dnio5lmxyca8d117jp1n.png
---

Last week, we built an accessible Breadcrumb component. [The video](https://www.twitch.tv/videos/598816211) is still on Twitch (I'm moving it to YouTube soon) and I also wrote an article with everything we accomplished:

{% link https://dev.to/ashleemboyer/build-an-accessible-react-component-part-1-breadcrumbs-259o %}

Tonight, at 7PM EDT, we're building another random component! We'll spin the widget wheel as stream starts and let fate decide which one for us. The link you need is below, and it's the same link you can go to in order to follow me if you want to be notified when I go live!

🌐 Twitch Link: https://twitch.tv/ashleemboyer

Hope to see you there! 🤗

---

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to [https://ashleemboyer.com/newsletter](https://ashleemboyer.com/newsletter).
Gralig - A modest CSS library
Tags: css, uiweekly, showdev, design
Published: 2020-04-28 15:23:24

Gralig is a modest, grayish CSS library. (You can make it colorfull with helpers). It can be starting point for your CSS development. It provides a set of small modules, including flexbox based grid and dark mode. There is no JS, only CSS.

You can check it at https://gralig.com
Newbie's Guide to Hoisting in JavaScript
Tags: javascript, codenewbie, beginners
Published: 2020-04-28 15:22:37

[Hoisting in JavaScript](https://medium.com/@aliciafasciocco/hoisting-in-javascript-578698970a13) first appeared on [Medium](https://medium.com).

There are a lot of confusing concepts in JavaScript. As a newbie, hoisting has tripped me up a lot. I got caught up on variable scope crossed my wires somewhere around there. Frankly, the lightbulb didn’t go off until I had my project review. So, let’s talk about this confusing magic!

*What is hoisting?*

JavaScript defines all variable and function declarations at the top of the scope (even if they are written at the bottom of the scope). These declarations are stored into memory during the compilation phase.

Hoisted ‘var’s are always hoisted as “undefined”, even if you assign a value, because ONLY the declaration moves to the top of the scope. Take this example:
```js
var cat;
console.log(cat);
cat = `parker`;
//undefined
```

This will console.log “undefined” because we’re assigning cat to ‘parker’ after we console.log, so the variable is initializing after we call it. This is pretty clear. But, take a look at this example. It will return “undefined” as well:
```js
console.log(cat);
var cat = `parker`;
//undefined
```

Why? Well, it works exactly the same as the first example. Although ‘var cat’ is being hoisted, ‘= parker’ is not, because ONLY the declaration moves to the top.

In yet another example, if we did the following, we’d get “ReferenceError: cat is not defined”:
```js
console.log(cat)
cat = `parker`
// ReferenceError: cat is not defined
```

When we console.log, JS has no idea what we are talking about, because no hoisting as occurred (cat = ‘parker’ is an initialization).

Here is a working example:
```js
cat = `parker`;
console.log(cat);
var cat;
// parker
```
This returns “parker,” because the declaration hoists to the top and we define it / call it after it is declared.

***Let, Const***
Unlike var, let and const don’t hoist as an initialized ‘undefined.’ Check out this example:
```js
console.log(cat)
const cat = `parker`
// Uncaught ReferenceError: Cannot access ‘cat’ before initialization
```

Whether the above code said ‘const’ or ‘let’, the error would remain the same: “Uncaught ReferenceError: Cannot access ‘cat’ before initialization”

**Tip:** *Always declare your ‘let’ and ‘const’ variables at the top of the scope!*

As a new developer, understanding hoisting is key. Without knowledge of how it actually works, you may spend a lot of time debugging code. (I mean, you’ll probably already spend a lot of time debugging code, but you know what I’m saying. Right?)
Capture Network Packet
Tags: bash, linux, network, tcp
Published: 2020-04-28 15:21:17

Tcpdump is a very useful tool to capture network packets.
e.g. to capture TCP packet from interface lo0 via port 9999

```
sudo tcpdump -i lo0 port 9999 -XX -v
```

Here demostrate sending some UDP packets, using tcpdump to capture them and using Tcpreplay to playback.


1. Send some UDP packets via port 9999
![](https://www.chuanjin.me//images/udps.png)
2. Listen UDP packets from port 9999
![](https://www.chuanjin.me//images/udpl.png)
3. Capture UDP packet using Tcpdump, save captured packets into a file
![](https://www.chuanjin.me//images/tcpdump_udp.png)
4. Playback captured packets
![](https://www.chuanjin.me//images/tcpreplay_udp.png)
5. Listen UDP packets to verify
![](https://www.chuanjin.me//images/udpl2.png)


Let's have more fun! Assuming we have captured some UDP packets using the command below:

```
sudo tcpdump -i en0 udp port 3333 -XX -v -w li.pcap
```

Then we use tcprewrite command to reverse the source and destination.

![](https://www.chuanjin.me//images/final.png)

And if we double check the modified .pcap file, it shows as we want.
![](https://www.chuanjin.me//images/reversed.png)

I also wrote a shell script to rewrite the network package automatically.
{% gist https://gist.github.com/chuanjin/d0fa3bc5b90e15fd14354731dd0c7a7a  %}


**References:**
- http://xmodulo.com/how-to-capture-and-replay-network-traffic-on-linux.html
- http://rationallyparanoid.com/articles/tcpdump.html
- https://danielmiessler.com/study/tcpdump/#gs.Xztynp0
- http://www.jianshu.com/p/5334025cfb5e
🌍Peekaboo - Animations (JS + CSS) [YouTube LIVE]
Tags: javascript, tutorial, frontend, animation
Published: 2020-04-28 15:16:16


⬇️ In this video I'll show you how to program animated HTML, and in particular, Peekaboo boxes using CSS transitions. The transitions are triggered using only one line of JavaScript! The Peekaboo box can be animated into the web page at any desired scroll point.  

Codepen: https://codepen.io/EleftheriaBatsou
Peekaboo image: https://derpicdn.net/img/2017/1/11/1337488/thumb.png
Working project: https://codepen.io/EleftheriaBatsou/pen/mdewyvz
Inspiration:  http://www.developphp.com/
Video tutorial: https://youtu.be/Mp7jO6GGIHQ

************************************

👋Hello, I' m Eleftheria, an app developer, master student, public speaker, and chocolate lover.

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!

**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/eleftheriabatsou/)
Retrieving notes from the Firestore database and displaying sorted notes
Tags: vue, database, tutorial, webdev
Published: 2020-04-28 15:14:59

## Introduction
We have our database linked to our Vue app. We can save our notes in the database, but we cannot fetch them. 

In this part of the series, we will retrieve our notes from the database and also display them on the screen. Let's start with fetching notes from the database.

## Retrieving notes from the database
We retrieve data from a Firestore database using `db.collection().get()`. With this, we will get access to all the data in the collection we specify. We can map over it and extract what we want. We can store it in the `notes` array and display the notes from this array.

But we need to render our notes when the page loads so we will use the `mounted` lifecycle hook:

![Retrieving notes from Firestore database in mounted lifecycle hook](https://dev-to-uploads.s3.amazonaws.com/i/0hjybgovdxvbagf2l13w.png)

Displaying the notes is a simple deal with the `v-for` directive. 

![Displaying notes from the notes array](https://dev-to-uploads.s3.amazonaws.com/i/8g1h6ezg95gtlmy5xpe7.png)

## Sorting the notes
Although the notes are displayed in the order we create them, that is only until we refresh the page. After refreshing the page, the `notes` array is reset to the original blank state and is filled with the notes again after retrieving them from the Firestore database. But, they are not in the order we added them. 

We can sort them with this computed property by title:

![Using a computed property to sort notes by title](https://dev-to-uploads.s3.amazonaws.com/i/0gbeuzqmkyvkigfrf4o3.png)

And we need to replace the `notes` array in the template with the computed property.

![Using the computed property to display notes](https://dev-to-uploads.s3.amazonaws.com/i/psaykd13c5ct6kt8vuqc.png)

> *You can sort the notes in any other order. It's not necessary to sort it by title.*

## Wrapping up
The main functionality of our app is ready. We are able to create new notes which are stored in a database. We retrieve our notes from the database when our app is mounted. Our notes are also sorted by their title. 

All that is left is to add a way to delete our notes, both from the array and the database. We will add this feature in our next and last part.

This is it for this part. Feel free to leave any questions and suggestions in the comments below.
Caesar Cipher In Python
Tags: python, beginners, tutorial
Published: 2020-04-28 15:01:28

---
title: Caesar Cipher In Python
published: true
description: 
tags: #python #beginners #tutorial
---

1 What is Caesar Cipher?
2 Caesar Cipher in Python
3 The ord() function
4 The chr() function
5 Encryption for Capital Letters
6 Decryption for Capital Letters
7 Encrypting numbers and punctuation
7.1 The solution
8 Using a lookup table
8.1 What is a lookup table?
8.2 Creating a lookup table
8.3 Implementing the encryption
9 Negative shift
10 File encryption
11 Multiple shifts (Vigenère Cipher)
12 Why Caesar Cipher is weak?
12.1 BruteForce Attack
13 Conclusion


https://likegeeks.com/python-caesar-cipher/

Hope you like it.
Regards,
ReactJS para iniciantes #05 - comunicando com uma API REST
Tags: react, javascript, tutorial
Published: 2020-04-28 14:58:30

{% youtube Ly_QYZM-YHI %}
Nesse vídeo nos colocamos nossa API para funcionar utilizando json server e implementamos uma comunicação básica da nossa aplicação React com uma API REST.

✅ Me acompanhe nas redes sociais:

https://twitter.com/vinicius_dacal
https://www.instagram.com/dacaldev
https://www.linkedin.com/in/viniciusdacal

✅ Pull request(faça o review): https://github.com/viniciusdacal/react-iniciante/pull/4

✅ Código Inicial: https://github.com/viniciusdacal/react-iniciante/tree/feature-5

✅ Código Final: https://github.com/viniciusdacal/react-iniciante/tree/feature-1

✅ db.json: https://gist.github.com/viniciusdacal/5bc0a705a9e3000e643ae27157732e56

✅ Json server: https://www.npmjs.com/package/json-server

#reactjs #javascript #viniciusdacal
Agorakit is looking for developers
Tags: opensource, help, contributorswanted, laravel
Published: 2020-04-28 14:58:18

Agorakit, the open source groupware for collectives is in intense use due to covid-19 on the free hosted instance here : https://app.agorakit.org 

Would you like to contribute to a cool Laravel 7 based project used by thousands of users? Would you like your contribution to help groups in need of better organization tool in this weird period?

Your help will be highly appreciated and mentorship WILL be provided.

Please read the contributing document here : https://github.com/agorakit/agorakit/blob/master/CONTRIBUTING.md

Thank you !!!