teleren/devto huggingface dataset:
Monolith or Microservices
Published: 2021-05-02 18:32:14

**Monolithic** application has single code base with multiple interdependent modules. Also known as _Integrated systems._

**Microservices** is breaking down large application into highly independent units called services. It can also be called _Distributed Systems_.

So the key concept here is level of **Dependency**.

**Highlight of Characteristics of both**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ngpvetd59jnsrsut10e.png)

Questions to answer before considering Microservices

1. Do you have a complete understanding of what microservices are and how they could influence your development operations?
2. Is your business mature enough to adopt microservices?
3. How strong is your practice of application infrastructure?
4. Do you have a tried and tested agile or DevOps practice?
5. Is your data management team skilled enough to support the incorporation? If it’s a no for this one, they will only slow down what is supposed to be a swift process.
6. Is your product at the fulcrum of your business model?
7. What are your goals and vision on scaling up? The architecture is designed for scalability and is ideal only if you have a sound plan of expanding both your product/service and your market.
8. Is your business model tested and proven?


Here is a thought on Microservices or Monolith:

_So my primary guideline would be **don't even consider microservices unless you have a system that's too complex to manage as a monolith**. The majority of software systems should be built as a single monolithic application.**Do pay attention to good modularity within that monolith**, but don't try to separate it into separate services... unless you're faced with that complexity, remember that the microservices approach brings a high premium, one that can slow down your development considerably_ - **Martin Fowler.** 


# What to do?
There is an architecture that combines the simplicity of monolith (in terms of architecture and deployment) with the logical advantage of microservices. It is the **Modular Monolith** (**Modulith**).

For a typical Laravel application, you could leverage **namespaces, service providers, autoloaders, packages, API routes** to totally separate these modules. There is a package that could help with this. Check it out here: [nwidart/laravel-modules](https://github.com/nWidart/laravel-modules).

click [here](https://medium.com/@destinyajax/how-to-build-modular-applications-in-laravel-the-plug-n-play-approach-part-1-13a87f7de06) and [here](https://medium.com/@adedotunolawale/using-modular-approach-with-laravel-building-module-based-application-part-1-b5c5a4e9ed38) to read more on the package usage.

In a nutshell, each module will have its own model, providers, config, route, migrations etc.

On a final note, as an application grows the best question to ask is how to structure your application in such a way that it will reduce interdependency among modules. So that when it becomes very large you can easily go microservice.
Destructuring Tweets - Episode 12 - Coalesced False
Tags: snippet, javascript, destructuring, nullish
Published: 2021-05-02 18:23:40

---
title: Destructuring Tweets - Episode 12 - Coalesced False
published: true
description: I pick a more or less random snippet from Twitter and analyze it in depth in this series. It shall help me, and you understand the trickery behind it. In this episode, you learn about a lesser-known but useful operator.
tags: snippet, javascript, destructuring, nullish
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vov5kaw7nd6en38lj25g.png
---

S.P.D.S.V.B.E.E.V.! Look who managed to head to dev.to only to find himself reading an article about a tweeted Javascript quiz. In this series, I try to break such down and this week features a lesser-known but often useful operator: Nullish Coalescing!

# Snippet of the Week

This week's [snippet](https://twitter.com/MoradiDavijani/status/1386810656540839938) is from [Hossein Moradi](https://twitter.com/MoradiDavijani):
```javascript
console.log(1 === null ?? 1)
```
This week we have a super quick one. It logs a logical expression to the console. And that's pretty much already it!
The expression itself consists of two parts. The first one compares `null` to `1`. The result of that is the left-hand side operand of a so-called "Nullish Coalescing Operator" typed as `??`. 
The right-hand side operand is, again, just `1`.

# The Output

The output is also pretty straightforward. At least if you know what a "nullish coalescing operator" does. This expression will log `false` to the console.

# The Analysis

For the analysis, we start with the Strict Equal Operator (`===`) as it takes higher precedence ("will be evaluated before") than the mysterious two question marks. And it's also reasonably easy. Comparing `null` to `1` will undoubtedly result in `false`, won't it? 
What's left looks something like: `false ?? 1`.
So far, so good, now comes the fun part. A Nullish Coalescing Operator works in its core like a Logical Or (`||`). However, instead of checking for falsy values, it only validates for nullish ones! That means either `null` or `undefined`. To get this straight: it will return the left-hand side value if it's not "nullish" or the right-hand side value if not.
And that is the reason `false` gets printed to the console. 🥧

# Snippet Summary

- **Trickery**: a not so well known operator in use
- **Key Learning**: operator precedence and what nullish coalescing operator does
- **Further Reading**:
    - [Nullish Coalescing Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)
    - [Operator Precedence](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)
Kotlin SpringBoot + Ajax JQuery PUT nested objects + Bootstrap example
Tags: kotlin, springboot, ajax, jquery
Published: 2021-05-02 18:11:54

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springboot-ajax-jquery-put-nested-objects-bootstrap-example

Kotlin SpringBoot + Ajax JQuery PUT nested objects + Bootstrap example

In this tutorial, <a href="https://grokonez.com">JavaSampleApproach</a> will show you way to implement a web application with Jquery Ajax that PUTs Nested Objects to Kotlin SpringBoot server.

<!--more-->
<h2>I. Technologies</h2>
– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.8.1.RELEASE
– JQuery
– Bootstrap
– Spring Boot – 1.5.7.RELEASE
<h2>II. Practice</h2>
In the tutorial, we build a SpringBoot project as below:

<img src="https://grokonez.com/wp-content/uploads/2018/02/kotlin-springboot-ajax-jquery-http-delete-project-structure-1.png" alt="kotlin springboot ajax jquery http delete - project structure" width="332" height="307" class="alignnone size-full wp-image-10606" />

<strong>Step to do</strong>
– Create Kotlin Spring Boot project
– Create data models
– Create web controller
– Create RestController for GET/PUT requests
– Create an index.html view
– Create Ajax PUT & GET requests
– Run & Check results
<h3>1. Create Kotlin Spring Boot project</h3>
Use Spring Tool Suite to create a Spring Starter Project with Kotlin language, dependencies:

More at:

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springboot-ajax-jquery-put-nested-objects-bootstrap-example

Kotlin SpringBoot + Ajax JQuery PUT nested objects + Bootstrap example
Kotlin SpringMVC Form Submission – with Thymeleaf + SpringBoot + Boostrap 4 Form
Tags: kotlin, springmvc, springboot, thymeleaf
Published: 2021-05-02 17:50:25

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springmvc-form-submission-thymeleaf-springboot-boostrap-4-form

Kotlin SpringMVC Form Submission – with Thymeleaf + SpringBoot + Boostrap 4 Form

In the tutorial, <a href="https://grokonez.com">JavaSampleApproach</a> will show you how to create a web application <strong>Kotlin SpringMVC Form Submmission</strong> with <strong>Thymeleaf</strong>, <strong>SpringBoot</strong> and <strong>Boostrap 4 Form</strong>.

<!--more-->
<h2>I. Technologies</h2>
– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– Spring Boot – 1.5.9.RELEASE
– Kotlin 1.1.61
- Thymeleaf
- Bootstrap 4
<h2>II. Goal</h2>
In the tutorial, We create a SpringBoot project as below structure:

<img src="https://grokonez.com/wp-content/uploads/2017/12/Kotlin-SpringMVC-Form-Submission-Thymeleaf-SpringBoot-Bootstrap-4-project-structure.png" alt="Kotlin SpringMVC Form Submission - Thymeleaf + SpringBoot + Bootstrap 4 - project structure" width="381" height="272" class="alignnone size-full wp-image-9773" />

<strong>Run and check result</strong>:

-> form submmission:

<img src="https://grokonez.com/wp-content/uploads/2017/12/Kotlin-SpringMVC-Form-Submission-Thymeleaf-SpringBoot-Bootstrap-4-fill-data-to-form.png" alt="Kotlin SpringMVC Form Submission - Thymeleaf + SpringBoot + Bootstrap 4 - fill data to form" width="395" height="486" class="alignnone size-full wp-image-9774" />

<img src="https://grokonez.com/wp-content/uploads/2017/12/Kotlin-SpringMVC-Form-Submission-Thymeleaf-SpringBoot-Bootstrap-4-logs-request.png" alt="Kotlin SpringMVC Form Submission - Thymeleaf + SpringBoot + Bootstrap 4 - logs request" width="491" height="532" class="alignnone size-full wp-image-9775" />

-> result:

<img src="https://grokonez.com/wp-content/uploads/2017/12/Kotlin-SpringMVC-Form-Submission-Thymeleaf-SpringBoot-Bootstrap-4-results.png" alt="Kotlin SpringMVC Form Submission - Thymeleaf + SpringBoot + Bootstrap 4 - results" width="413" height="457" class="alignnone size-full wp-image-9776" />
<h2>III. Practice</h2>
<strong>Step to do</strong>:
- Create SpringBoot project
- Create data models
- Create Web Controller
- Create submission forms
<h3>1. Create SpringBoot project</h3>
We use <strong>SpringToolSuite</strong> to create a SpringBoot project with dependencies:

More :

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-springmvc-form-submission-thymeleaf-springboot-boostrap-4-form

Kotlin SpringMVC Form Submission – with Thymeleaf + SpringBoot + Boostrap 4 Form
EZBookmarks, I created my first chrome extension and hope it is useful to more people :)
Published: 2021-05-02 17:39:17

Hi everyone

Last week I developed my first chrome extension. It is something simple that is useful to me.

I noticed that I have many old bookmarks/favorites that I no longer need. Because they added clutter to my list I thought it would be nice to auto delete those I have not used in a while, at the same time I learned how to code them.

With that in mind I created EZBookmarks, that allows me to configure the number of days after which, any bookmark that I have not visited will be deleted.

https://chrome.google.com/webstore/detail/ezbookmarks/kfpngpodajkfhjdabfeaineopjoooljb?hl=pt-BR&authuser=0

I hope this is useful to someone out there and if anyone has questions or feedback, I would highly appreciate :)
100 days of code - Day 2 
Tags: 100daysofcode, todayilearned, challenge, php
Published: 2021-05-02 17:38:58

Today, we'll go through the **Symfony Routing component**, which allows to set up routing in PHP applications.

We can add this component to the project with this command : `composer require symfony/routing`

the main Classes of this component that we will see are : *RouteCollection, Route, UrlMatcher,RequestContext*

Let's create an instance of RouteCollection, we will use it to define all routes of our application  :  
`$routes = new RouteCollection();`

To add a route to this collection, we use the function "add" we give it a name and we create an instance of Route which is defined by a route pattern and an array of default values for route attributes, below are 2 examples :  
```
$routes->add('greeting', new Route('/hello/{name}', ['name' => 'world']));
$routes->add('goodbye', new Route('/bye'));
```
in order to match the current URL with one of those in our Collection, we need to use UrlMatcher : 

`$matcher = new UrlMatcher($routes, $context);` 

$context is an object of RequestContext, it holds the current request context informations : 
```
$context = new RequestContext();
$context->fromRequest (Request::createFromGlobals());
```

now We have  everything we need to match any route against the predefined routes that we have ($routes object). To do that we use match method of $matcher object 

` $matcher->match($context->getPathInfo());`

 If the route is found, we get the custom attributes associated with that route. Otherwise, the ResourceNotFoundException exception is thrown if there's no route associated with the current URI.

 Here is the output of $parameters if we access to /hello/joe : 
``` 
var_dump($parameters)

 /* Result:
[
    'name' => 'joe',
    '_route' => 'hello',
];
*/
```

That's all for today, see you next time. 
Have a nice day
ReactQuill with NextJS
Tags: nextjs, markdown, editor, react
Published: 2021-05-02 17:32:34

Hey everyone, just wanted to share this with you. So I've been trying to find rich editors that were compatible with NextJS. Couldn't find any but I found a way to get ReactQuill working.

Import dynamic
```js
import dynamic from 'next/dynamic'
```
After that import ReactQuill using dynamic
```js
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
```
Now you can easily use it!
Example:
```js
import { useState } from "react";
import dynamic from 'next/dynamic';
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import 'react-quill/dist/quill.snow.css';

function App() {
    const [value, setValue] = useState('')
    return(
       <ReactQuill value={value} onChange={setValue}/>
    )
}

export default App;
```
I hope this helps 😊
Day 71
Tags: 100daysofcode, programming, react
Published: 2021-05-02 17:32:17

Day 71/100 of #100DaysOfCode

- I'm learning React JS. And today's topics,Composition vs Inheritance.

-Improve skills by building 15 projects using React  from John Smilga   (Coding Addict). Today practice project
1- "birthday reminder". 

-And problem-solving on codewars.
Best Online IDE to Program Any Language - Repl.it
Tags: python, javascript, node, java
Published: 2021-05-02 17:10:54

This video is about the cool website I found. It's called Repl. With this website, you can code almost any programming language you can think of (online inside your favourite browser). I think this is perfect for learning and practising a language before jumping into an actual big project.

Repl: https://repl.it/

You don't have to install anything, any language on your computer. Instead, open Repl anywhere and start coding for the next big thing. And yes, you can code on your mobile as well. Feel free to send me your codes if you want to show me.

Watch more: https://www.youtube.com/SouvikPaulTech

You can support my work by buying me a coffee.
Coffee: https://www.buymeacoffee.com/souvikpaul

Python tutorials:
Free: https://youtu.be/_uQrJ0TkZlc
Paid: https://bit.ly/2NXzc6M
C++ Tutorials:
Free: https://youtu.be/vLnPwxZdW4Y
Paid: https://bit.ly/3sKopLQ

Read articles about new & cool gadgets.
Visit: https://gadgetsgadder.com

Let's talk about tech:
Instagram: https://instagram.com/amisouvikpaul
Facebook: https://fb.com/thesouvikpaul
Twitter: https://twitter.com/thesouvikpaul
Best JavaScript Weather App In Codepen 2021
Tags: html, css, javascript, beginners
Published: 2021-05-02 17:10:40

Hello guys, in this video we will show you the top 3 best JavaScript Weather app in codepen 2021

1 https://codepen.io/grayghostvisuals/full/dpXPbp
2 https://codepen.io/tutsplus/full/gObLaEP
3 https://codepen.io/stack-findover/full/vYgQrPP

{% youtube lfyjGXE_1IE %}

###You may like this###
<a href="https://blog.stackfindover.com/how-to-find-a-word-in-a-paragraph/">How to find the word in paragraph</a>
<a href="https://blog.stackfindover.com/trending-responsive-menu-2020/">Responsive menu design 2021</a>
Make A Simple Website using HTML and CSS | Free Source Code
Tags: simplewebsite, websitedesign, freesourcecode, htmlcss
Published: 2021-05-02 17:10:13

**How can I make a beautiful website using HTML and CSS?**
After watching and reading the following video and article, you will definitely able to create beautiful websites using HTML and CSS as an image.

Hello, friends today in this blog I will teach you how to Create A Website in HTML and CSS Only. Earlier I have shared a blog about a Complete Personal Portfolio Website using HTML CSS & JavaScript and now I'm going to create a simple website.

**What is a Website?**
A website is a combination of several web pages of codes, and hyperlinks,  and designs. There are various types of websites like E-commerce websites, Portfolio websites, magazines, or Social Media Websites actually blog is also a website. The website can be used for educational or marketing and other purposes. Websites have not limited boundaries.

**How can I make my website attractive?**
To make a website beautiful and attractive you need to follow the following steps

Take simple colors for your website.
Use a maximum of 3 to 4 color
Make Website Responsive (Fite in any screen sizes devices)
Try To use the same sizes and font family for text.
Keep essential navigation links inside the navigation bar

**Simple Website using HTML and CSS | Free Source Code**
You can download all source code from the given link. <a href="https://www.codinglabweb.com/2020/12/create-website-in-html-css-only-design.html">Click Here To Download All Source Code</a>
Logging to a Docker Container stdout from a Background Process
Tags: docker, container, logging
Published: 2021-05-02 17:05:13

Background processes in Docker containers can be a bit of a pain for logging, however they can't always be avoided. For instance, I was working on a container for a legacy CGI application at work recently, which required both a FastCGI wrapper and a Nginx webserver in the same container, with Nginx running as the foreground process and logging to the container's stdout. The CGI application does a lot of logging and we didn't really want to have to manage those logs separately from the Nginx logs. The CGI wrapper we were stuck with doesn't pass on stderr (with CGI stdout goes to the browser so that's pointless also) so we had to resort to more devious means.

Linking a file/logging to /dev/stdout (or /dev/stderr) doesn't work because these are merely references to the current process's stdout/stderr and logging to a terminal device similarly doesn't work because in production, there won't really be a terminal. 

So, I was stuck and gave up on the idea for a bit until I realized that in Linux process can write to other processs' stdin and stderr. There are 'files' in  /proc/TARGET_PROCESS_PID/fd that represent stdin and stderr for that process, and you can write to them just like any other file if you have the right permissions. Processes can only write to these 'files' if they're running under the same user and group as the target process, and if the user is not root, you might have to change the permissions of the 'files' further down the link chain. Of course, in in my situation, the master nginx process was owned by root and the CGI scripts were running under an unprivileged user. However, I worked around this by writing to the stdout of a nginx worker processes, which would then be picked up by the master process. 

Unfortunately, due to the way we set up the container in the end, this solution hasn't found it's way into production, but I hope it's useful to you.
Add Item Form – react-redux example
Tags: react
Published: 2021-05-02 17:00:55

https://grokonez.com/frontend/react/add-item-form-react-redux-example

Add Item Form – react-redux example

We have built a <a href="https://grokonez.com/frontend/how-to-connect-react-with-redux-react-redux-example">React Application that connects with Redux</a>, then <a href="https://grokonez.com/frontend/how-to-filter-list-react-redux-example">filter with input text</a> and <a href="https://grokonez.com/frontend/how-to-sort-list-react-redux-example">sort</a> list of items. In this tutorial, we continue to create a Form for adding item to list using react-redux.

<!--more-->
<h2>Example Overview</h2>
Our app has add item form. If we fill in title, author(, description), published year and click on <strong>Add Book</strong> button, the list of Book items will be updated immediately.

<img src="https://grokonez.com/wp-content/uploads/2018/04/react-redux-example-add-item-form-overview.png" alt="react-redux-example-add-item-form-overview" width="435" height="414" class="alignnone size-full wp-image-11869" />
<h2>Add Item Form</h2>
<h3>Context</h3>
Remember that our App state is like this:
<pre><code class="language-javascript">
const demoState = {
    books: [
        {
            id: '123abcdefghiklmn',
            title: 'Origin',
            description: 'Origin thrusts Robert Langdon into the dangerous intersection of humankind’s two most enduring questions.',
            author: 'Dan Brown',
            published: 2017
        }
    ],
    filters: {
        text: 'ori',
        sortBy: 'published', // published or title
        startYear: undefined,
        endYear: undefined
    }
};</code></pre>
We also have <strong>addBook</strong> action:
<pre><code class="language-javascript">
// actions/books.js

export const addBook = ({
    title = '',
    description = '',
    author = '',
    published = 0
} = {}) => ({
    type: 'ADD_BOOK',
    book: {
        id: uuid(),
        title,
        description,
        author,
        published
    }
});</code></pre>
=> <code>dispatch(addBook(bookFromForm))</code> will add Book to the List.
<h3>Solution</h3>
We need:
- a Form to fill in Book fields => create <strong>BookForm</strong> Component with <code>form</code> and <code>onSubmit</code> function. <strong>BookForm</strong> Component has its own <em>state</em> to update data from <code>form</code> elements.
- an <strong>AddBook</strong> Component to contain <strong>BookForm</strong> Component => it connects with Redux to pass <code>dispatch(addBook)</code> to <strong>BookForm</strong> Component.
<h2>Practice</h2>
<h3>Create BookForm Component</h3>

https://grokonez.com/frontend/react/add-item-form-react-redux-example

Add Item Form – react-redux example
Challenge: Regular Expressions
Tags: javascript, devops, tutorial, beginners
Published: 2021-05-02 16:31:10

#### Find One or More Criminals in a Hunt
* Let's Write a greedy regex that finds one or more criminals within a group of other people. A criminal is represented by the capital letter C.

* Here's an example to review how to do this:

* The regex `/z+/` matches the letter `z` when it appears one or more times in a row. It would find matches in all of the following strings:
```
"z"
"zzzzzz"
"ABCzzzz"
"zzzzABC"
"abczzzzzzzzzzzzzzzzzzzzzabc"
```
* But it does not find matches in the following strings since there are no letter `z` characters:
```
""
"ABC"
"abcabc"
```

* Answer:
```
let reCriminals = /C+/;
```
* Now your regex should match three criminals (CCC) in the string P1P5P4CCCcP2P6P3.
* Now your regex should match five criminals (CCCCC) in the string P6P2P7P4P5CCCCCP3P1.