teleren/devto huggingface dataset:
Previewing Laravel markdown Notifications directly in your browser
Tags: laravel, php, testing
Published: 2019-10-12 13:36:43

##Preview your notifications easily with just a couple of lines of code

Sometimes you want to develop beautiful notifications in HTML or markdown format. But how do you style them easily without having to send them every time you've changed something? Laravel offers an out of the box solution for this. In your web.php you can easily return a notification to render it and display it in your web browser.

####Let's code!

If you'd like to try this with an easy example you can code along with me. First, we start with creating an example notification:

`$ php artisan make:notification InvoicePaid`

Secondly, we add the following lines to our `web.php` to be able to display the notification in our browser:

{% gist 
 https://gist.github.com/MrAtiebatie/096b030b351cd571cf36e1fed09c3411 %}

As the title of this article might confuse, it sounds like we render a Notification, in this case, InvoicePaid. But what we're actually rendering here is the `MailMessage` we return in the `toMail` method.

###Rendering markdown notifications
Laravel supports sending markdown notifications as well and it would be nice to be able to preview these as well in the browser. For this kind of notifications it requires a little bit more code:

{% gist https://gist.github.com/MrAtiebatie/3dc33e0b39af8154a9f69e4e37b37207 %}

In this case, we use the `\Illuminate\Mail\Markdown` class to render the markdown to HTML. Go to `/notification` in your browser to see if it works!

###(Bonus!) Rendering On-Demand Notifications

All objects which are using the `Notifiable` trait can be notified through their desired channel. This is a great out of the box feature from Laravel. But there are times that you'd like to send a notification to an email or mobile number which isn't a Notifiable instance (yet). Laravel calls these [On-Demand Notifications](https://laravel.com/docs/6.x/notifications#on-demand-notifications). To render On-Demand Notifications in your browser we have the following workaround:

{% gist https://gist.github.com/MrAtiebatie/b015d7061619df6507125b027d32b5ef %}

In the background, Laravel uses the `AnonymousNotifiable` class to send notifications on-demand. 


---

[I'm currently working on Laravel Pigeon. A notification center for all your communication with customers AND for debugging notifications in your browser!](https://mailchi.mp/bb9baf834bc0/laravel-pigeon)
Less Than 10 Lines of CSS to Create a Responsive Nav Menu
Tags: css, responsive, ui, flexbox
Published: 2019-10-12 13:34:24

---
title: Less Than 10 Lines of CSS to Create a Responsive Nav Menu
published: true
description: Create a responsive navigation menu with less than 10 lines of CSS
tags: css, responsive, ui, flexbox
cover_image: https://thepracticaldev.s3.amazonaws.com/i/yawsu6la2jpvyz5mqdik.png
---

####Creating navigation menus are now as easy as swiping right on Tinder :P with only less than 10 lines of CSS.

Thanks to FlexBox! FlexBox is a 1D property and that's enough for a nav menu. No more floating lefts and rights, all you need is a list of menu items inside 'ul' tag. Add your logo in that list too.


#####Here's the HTML:
![HTML](https://thepracticaldev.s3.amazonaws.com/i/7v0agqa5gocqvp3dsmhr.png)


---
---
Now comes the CSS part. You just have to set the display property of the ul to 'flex' and the necessary padding.

#####Here's the CSS:
![CSS](https://thepracticaldev.s3.amazonaws.com/i/ta46lz5imlxhi94jfz2d.png)


---
---
Now we want to push the menu to the right and the logo to the left, right? But we can't use float. We will just use one line of CSS for the '.logo' class.
####
![Logo](https://thepracticaldev.s3.amazonaws.com/i/wedxs69bm91uy5itcn6c.png)

**Do you see that 'margin-right: auto' property??**
That is doing the whole magic. That is filling all the white-spaces to the right of the logo with the menu items. That gives us the logo on the left and the menu items on the right. **Isn't that awesome?**


---
#####Here's the output
![Nav Menu](https://thepracticaldev.s3.amazonaws.com/i/t8t9zwkrk2xxvayso06t.png)

**And that was all.** That's all you need to know to create a responsive nav menu. Now to go to the next level, you can add media queries to change the menu for different devices.

#####Here's a simple media query for an iPad device
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2oz4g9dqmtsdcjj1yk6a.png)



**You can also check it out on my CodePen [profile](https://codepen.io/mandeepdebnath)**

Thanks for reading it to this far. I'm still working on my explanations. I know, I'm no expert. I'm just a learner.
You can share any of your feedback, I appreciate all. Thanks!
Multiple commands running in a single shell (windows in tmux)
Tags: linux, tmux
Published: 2019-10-12 13:17:23

---
title: Multiple commands running in a single shell (windows in tmux)
published: true
description: Quick tip on a very useful tool that will allow you to keep multiple workspaces open in a single shell
tags: linux, tmux
---

I'll just jump straight to it.  Sometimes, your app needs a lot of commands running.

_You're probably running babel on your Javascript, using `react-native start`, running gulpfiles and gruntfiles and webpacks and whatever other new JS build systems there are, and you've got your test suite running and there's some CSS pre-processing and.._

The list goes on.  You're probably running a lot of commands that just need to.. run, and sometimes you'll need to check their output.

Does that mean you need a million terminal windows open?  No.  You just need one, and a terminal multiplexer.

**Enter tmux**.

tmux is the tool you need.  It allows you to do all sorts of things in a single shell.  We'll cover the absolute basics here, but there's a lot more to know:

- To start, `Ctrl-b` takes you into the command mode. The next bullet points all require you to be in command mode.
- `c` creates a new window
- `n` takes you to the next window
- `p` takes you to the previous window
- `&` deletes the current window

In each window, you can have a command running (you can actually run more, but you need to know more about tmux).  You can only view one window at a time and you use the commands above to cycle through them.

That's all for now!

---

Want more tips on tmux, VIM, and general productivity in Linux?  Follow me here on dev.to or hit me up on [Twitter @connorbode](https://twitter.com/connorbode).  I can also be found on the web at [matix.io](https://matix.io).
Web page loading optimization
Tags: webdev, performance, discuss
Published: 2019-10-12 13:13:44

I watched this talk:
Maximiliano Firtman - Hacking Web Performance
https://www.youtube.com/watch?v=ub1wjVgE52I
And I was surprised how much I don't know about the web page loading optimization.

I had already experience optimizing a web site with the Lighthouse audit, compressed images, but I didn't know about the size of the first TCP packet and the http/2 vs http vs http/3 and other low level staff.

I started web development with React, 3 years ago, coding sort of at high level. And from time to time, in need to fine tune performance, had to get down to low level - to communication protocols.

I understand now that I have to read staff, have to make my web knowledge more complete, know the basics.

What are the must-read low level staff for full-stack web app development? 
Do I need to read the protocols themselves or the documentation. Or is it suffice to read articles that summarize the relevant matters ?
Introducing Undecorated: Collection of reusable layout pattern of CSS and styled-components
Tags: css, styledcomponents, layout
Published: 2019-10-12 13:07:34

---
title: Introducing Undecorated: Collection of reusable layout pattern of CSS and styled-components
published: true
description: Collection of reusable layout pattern of CSS and styled-components
tags: css,styled-components,layout
---

Introducing new project called Undecorated. This is available at https://makotot.github.io/undecorated/.

I made Undecorated mainly for the following two purposes.

* To be able to browse a variety of reusable CSS layout patterns  and make them available for instant copy and paste.

* Just import it with [npm](https://www.npmjs.com/package/undecorated) so that you can create the layout you want.


There are multiple sites that list layout patterns in grid and sites that introduce layout patterns in flexbox, but  I could not find any sites that could view various layout patterns (regardless of properties such as flexbox, grid, table, etc) .
So I wanted to create a site where I could browse various CSS layout patterns.

In addition, I want to make those layout patterns available anywhere just by `import`(
For now with [styled-components](https://www.styled-components.com/)).
For example, if you want to center an element vertically and horizontally, you can do it by just following.

```jsx
import { Centered } from 'undecorated'

<Centered>
  <SomethingYouWantToCenter />
</Centered>
```

{% codesandbox centered-with-flexbox-6jqsq %}


Unlike the existing flexbox and grid utility libraries that leave the layout to the user, it only provides patterns that achieve a specific CSS layout.

The source code is on [Github](https://github.com/makotot/undecorated).
Building a larger Serverless application - Part 1: Getting started
Tags: serverless, aws
Published: 2019-10-12 12:53:00

---
title: Building a larger Serverless application - Part 1: Getting started
published: true
description:
tags: serverless, aws
---
Serverless is often touted as a panacea for software delivery. It will let you write code must faster, deliver to production faster, be cheaper to run, make the tea, fix world hunger, etc. It's not, of course, but it can still be a good way to go in certain circumstances.

So many tutorials and examples are written from the point of view of a single endpoint, or at best a couple. And as an API only service, with no client using it. That's great for absolute starters, but real life applications very quickly outgrow it.

I'm going to attempt a series of articles that cover how to write a larger Serverless application, with a reasonable architecture to the backend, services that depend on each other, databases/queues/etc, a web frontend that can talk to it, and so on. There will also be an eye on how the actual code can be structured.

These will be more aimed at solo or indie developers, rather than larger companies. As such, there will be more emphasis on free tooling and keeping complexity down - for example I'll probably aim for a monorepo because that's easier for a small set of people to handle.

I can't guarantee it'll work. I can't promise that this will be any better than anything else out there. But we'll see how it goes.
#CodepenChallenge Orange and Blue: Flat-style Company Card
Tags: codepen, html, css, design
Published: 2019-10-12 12:24:36

<p>This is just a simple card, designed for redirection to the main site.</p>

<p>I used flat-style designing. Few animation, and bright colors.</p>

<p>I only used colors that are provided at Codepen's Assets-&gt;Colors.</p>

<p>This is also a good opportunity for me to practice my skill in blending colors.</p>

{% codepen https://codepen.io/takaneichinose/pen/YzzwNyB %}
Deployment automation tools for everyone!
Tags: devops, productivity, webdev, java
Published: 2019-10-12 12:01:57


We all know about some deployment automation, cd process, and all that buzzwords, but probably most of us scary to use services that provide automation for those processes. There are a lot of reasons, and I was one of those developers.

First of all, I am scary about "black box solutions", some company says me that it will take my code and ship directly to my server, huh, sounds great? But when you try it, you have no idea what they are actually doing with your server, how they will deploy the application, and what is going on.

We faced the same problem with most of the products and decided to build our own service. We had such a service for our internal needs for years, but someday we decided to share it with the community and open it for everyone. That’s how [DeployPlace](https://deployplace.com/) was born. We are on prelaunch stage and plan to release at the end of October, we are providing a lifetime discount for our early adopters, and free plan for opensource and lone-wolf developers, so feel free to subscribe.

If you want to read more about [deployment tools](https://deployplace.com/blog/how-deployment-tools-save-time/) and its benefits you are welcome to [our blog](https://deployplace.com/blog/).

Today I want to share my experience with different deployment tools that are already in the market:

Octopus Deploy

First imagine was like, hm, those guys probably know something, as they provide deployments for java applications and all of that. I try to sign up and next hour I was looking at this image

![nice signup](https://i.ibb.co/qr5mHXx/2019-10-12-14-37-25.png)

after it has gone, they told me “Sorry we faced some problems”.


Deploybot and DeployHQ

Its friendly simple service, probably good for some very simple projects like websites, client apps, but they ask you full access to git, so it’s a big no-no for me and our company. Also to you will have a lot of pain trying to deploy something more complex than a static website.

Buddy.works

I have to say that I enjoy their design, and from the first view, it looks nice and simple, until you try to deploy something.. You will have some chain with hundreds of tools, services, servers and so on. I felt like this service a bit overwhelmed, and still, I cant deploy.


The biggest problem with all of those services is that if you have CI and self-hosted git, there is no easy solution to deploy from your CI directly, all process is a black box. At [DeployPlace](https://deployplace.com/) our main goal is to create service, that developers will not be afraid to use, will understand each step of what they are doing, and will enjoy as everything made from developers to developers!
Actor model vs Microservices
Tags: healthydebate, discuss, programming
Published: 2019-10-12 12:12:16

---
title: "Actor model vs Microservices"
published: true
date: 2019-10-12 11:29:32 UTC
tags: [healthydebate, discuss, programming]
canonical_url: https://stereobooster.com/posts/actor-model-vs-microservices/
---

This idea happened recently to me: what if microservice is a reinvention of the wheel? What if microservices try to accomplish the same thing as actor model?

### I’m not the first one who asked this question

There is [a similar question on StackExchange](https://softwareengineering.stackexchange.com/questions/338847/what-is-the-difference-between-actor-model-and-microservices). I’m not convinced by given answers.

> Actor model - is a mathematical model for concurrent computations, and microservices - an implementation of service-oriented architecture.

And? There are a lot of things that can be used for computations, for example, [Lambda calculus (formal system in a **logic** ), billiard balls, quantum, live cells, Game of life](https://dev.to/stereobooster/what-is-a-computer-3ag4). The fact that they are in different categories doesn’t prevent to use all of them for computations.

> Again, microservices could be stateful too, but it goes against the design principles of microservices.

Right, but you need to store the information somewhere (accounts, records, users)? If you don’t count the database as service itself, the same logic can be applied to the actors.

### What if?

For microservices, you need to use some kind of protocol for communication, like REST, Protocol Buffer, GraphQL, and many more examples. In actor model it is not harder than a function call.

When you deploy microservices it assumes that each microservice is isolated in its machine (virtual machine, jail, docker, etc.), because of this you end up with big number of machines, it is hard and expensive to deploy a lot of machines instead you can deploy virtual machines and to do this you need to use Kubernetes or similar. Where is in actor model you deploy actors to cluster and they can be spread automatically.

When you work with microservices you need to use distributed tracing to debug issues. In actor model you can use “stack trace” (which can be a feature of the programming language itself).

When you develop microservices you start to put everything in separate repositories, but then it’s hard to do changes across multiple services, so you put everything in monorepo. It feels like we are walking in circles.

The big difference is that you in microservices you can use different programming languages, but in actor model you need to use one (not counting external interfaces and shell calls).

> Once a programmer becomes used to a complex solution to a problem, simple solutions to the same problem feel incomplete and uncomfortable.
> 
> — [Doug Hoyte](https://letoverlambda.com/index.cl/guest/chap2.html)

**Disclaimer**. I’m not referring to any specific implementation of actor model, it’s a more idealistic version of actor model. I hope that [pony](https://www.ponylang.io) can come close to what I imagine, but I haven’t played with it yet.
JavaScript FizzBuzz solution in details
Tags: fizzbuzz, javascript, hacktoberfest
Published: 2019-10-12 11:23:27

---
title: JavaScript FizzBuzz solution in details
published: true
description: fizzbuzz solution learning algorithm passion
tags: fizzbuzz, javascript, hacktoberfest
---

The first time I solved FizzBuzz, my code result was: 
```
for (let i = 1; i <= 100; i++) {
    if (i % 3 == 0 && i % 5 == 0) {
        console.log("FizzBuzz");
    } else if (i % 3 == 0) {
        console.log("Fizz");
    } else if (i % 5 == 0) {
        console.log("Buzz");
    } else {
        console.log(i);
    }
}
```

While looking for pull requests to make for Hacktoberfest, I stumbled upon {% github s-bridges/Hacktoberfest_Fizzbuzz %} ~ the [Hacktoberfest_Fizzbuzz](https://github.com/s-bridges/Hacktoberfest_Fizzbuzz) repo (😢 it has now been marked as 'invalid' for hacktoberfest). On the moment though, I got excited and aimed to refactor my previous solution to the smallest possible one I could find using JavaScript.

Note: The repo author asked to print 'Spider' instead of 'FizzBuzz', 'Ghost' instead of 'Buzz' and 'Rat' instead of 'Fizz'.

My result: 
```
console.log([...Array(100)].map((_,i)=>{i++;return(i%15?'':'Spider')||(i%5?'':'Ghost')||(i%3?'':'Rat')||i;}).join('\n'));
```

**SET UP**
--> `console.log()`: to directly _log_ the result.
--> `[...Array(100)]`: to create a temporary array of 100 to produce the much wanted indexes.
--> `.map((n,i)=>{}`: to return an array filled with new content after the current values have iterated through the method's callback function.

**CALLBACK**
--> `i++`: to initiate `i` to be 1 (in this case, we don't want to start from 0).
--> `return`: to stop the function from running once its done iterating and return the new array.
--> `(i%15?'':'Spider')`: check if `i` is divisible by 15 (if divisible by 15, it is also divisible by both 3 and 5); if there's a remainder, print nothing; if there isn't, print 'Spider'.
--> `||`: OR
--> `(i%5?'':'Ghost')`: check if `i` is divisible by 5; if there's a remainder, print nothing; if there isn't, print 'Ghost'. 
--> `||`: OR
--> `(i%3?'':'Rat')`: check if `i` is divisible by 3; if there's a remainder, print nothing; if there isn't, print 'Rat'. 
--> `||`: OR
--> `i`: if it isn't divisible by any of the previous options, print the fucking number.

**FINISHING**
--> `.join('\n')`: to return a string of all the concatenated elements of the new array using a new line as separator; thus, jumping a line between each elements to `console.log` a nice SpiderGhostRatNumber list! =)

_PS. In JavaScript, an integer converts to a boolean such that 0 is false and all non-zero values (even negative ones) are true._ 

![Melting Statue Of Liberty GIF](https://media.giphy.com/media/EFJ1O1plZZOBW/giphy.gif)

## What's your FizzBuzz solution?
Connect react svg components
Tags: react, svg
Published: 2019-10-12 07:31:49

---
title: Connect react svg components
published: true
tags: react,svg
---

# Connect two rectangles via straight line

{% codepen https://codepen.io/nctaowen/pen/wvvMMpm %}

The from and to position is hard coded. Can we make the shapes collaboratively figure out these parameters?

# Add from and to property

{% codepen https://codepen.io/nctaowen/pen/zYYrryG %}

This time, Rect saved its center to its datum. The Line can figure out x1, y1, x2, y2 by querying its from and to node datum.

# Make it draggable

{% codepen https://codepen.io/nctaowen/pen/xxxZVdd %}

Copied the code from https://dev.to/taowen/make-react-svg-component-draggable-2kc . We can see, the line is not following the rectangles. Let's fix it.

# Make the connector follow dragging

{% codepen https://codepen.io/nctaowen/pen/gOOPPZv %}

We added a custom event called `moved`. When Rect being dragged, the `moved` event will be handled by both Rect itself and the connected lines. D3 require multiple listener to be registered in its own namespace, so the event name has different suffix.

# Add circle

{% codepen https://codepen.io/nctaowen/pen/JjjGXJJ %}

Circle is easier than Rect, as cx and cy is its center. However, due to we have two lines now, the event namespace need to be unique, so `assignId` is introduced.

# Draw line before drawing the rectangles

{% codepen https://codepen.io/nctaowen/pen/jOOWqZE %}

We can see the line disappeared, because the connected rect is not drawn yet. We need to fix this.

# Order should not matter

{% codepen https://codepen.io/nctaowen/pen/qBBbZGY %}

Introduced another custom event 'nodeAdded'. If the line can not find the node, it will monitor the nodeAdded event to find out if the collaborators all ready.