teleren/devto huggingface dataset:
What is Neo4j? Why it is used? What is graph Database? Neo4j - 1
Published: 2021-04-29 06:10:01

* This will be a series of article's , <br>#1 of Neo4j series <br>

Q.What is a graph DB?
- Database that uses graph structures for semantic queries with nodes, edges and properties to store data! Can perform CRUD operations too..



Cypher Query language 
- Neo4j provides a powerful declarative query language known as Cypher, to represent the graph visually.
The commands of this language are in human readable format 

-  Cypher is easy to learn and can be used to create and retrieve relations between data without using the complex queries like Joins.

- Support's two kinds of Java API: 
   - Cypher API   and  
   - Native Java API to develop Java applications.
<br>

        RDBMS            ->          Graph Database
	 Tables                     -> Graphs
 	Rows 	                      ->  Nodes
 	Columns and Data 	     -> Properties and its values
 	Constraints 	              -> Relationships
 	Joins 	                     ->  Traversal

Neo4j Graph Database has the following building blocks
->    Nodes - represents entities or items (users, accounts..)
->    Edges - Lines that connect nodes to other nodes or nodes to properties (Graphs or relationships)
 ->   Properties - or Attributes which hold the info related to nodes
  ->  Relationships
   -> Labels
   -> Data Browser
![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnn9cfn1jwix1o6wvifk.png)

properties are represented in the circle / rectangle area and the relationship is represented using the lines between the properties
Custom interface for Account Factory in AWS Control Tower
Tags: aws, tooling, infrastructure, security
Published: 2021-04-29 06:03:28

For managing a multi-account AWS environment, Control Tower is a great tool. But, using the included Account Factory to create new AWS accounts is always annoying.

With AWS Systems Manager Automations, you can build a custom interface to create AWS accounts. Thanks to wrapping the existing APIs, you can even enforce custom patterns for the accounts you want to create.

[Read more »](https://sbstjn.com/blog/aws-control-tower-account-factory-wrapper/)
How I add Tailwind to my ReScript projects
Tags: tailwindcss, rescript
Published: 2021-04-29 05:56:57

I've been using [Tailwind CSS](https://tailwindcss.com/) for a couple of years and I think it's the fastest and most convenient way of styling an app. Since I'm also very fond of ReScript I naturally want to combine the two. Luckily, adding Tailwind to a ReScript project isn't any harder than in a JavaScript app.

I've included some tools and templates in the end if you want to look at complete code or get set up quickly.

This assumes that you have an existing ReScript project where you want to add Tailwind. Start by adding the necessary dependencies, if you are using [`vite`](https://vitejs.dev/) you won't need `postcss`.

```bash
npm install --dev tailwindcss postcss autoprefixer
```

We are now ready to run `npx tailwindcss init -p`, this will create two files for us:

- `tailwind.config.js` - A default Tailwind configuration
- `postcss.config.js` - A PostCSS configuration with Tailwind and Autoprefixer

To add all of Tailwind's features we create a CSS file inside the `src` folder with the following content.

```css
/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

We then import this CSS file in our ReScript code, I usually put it in my entry file. If you use `es6` output, you would add

```rescript
// Index.res
%%raw("import './index.css'")
```

Or, if you use `commonjs` as your output

```rescript
// Index.res
%%raw("require('./index.css')")
```

That should be it! `webpack`, `vite`, or whatever you use should pick up the CSS and compile all of Tailwind's classes.

### Enable Tailwind's JIT compiler

Tailwind (> v2.1) [includes a just-in-time compiler](https://tailwindcss.com/docs/just-in-time-mode#enabling-jit-mode). It only generates the styles you use and will therefore be much faster. It also includes some nice new features like all variants being included by default and creating arbitrary styles.

The feature is still in preview, but I haven't had any major issues with it. To enable it, just add one line to your Tailwind configuration.

```js
// tailwind.config.js
{
  mode: 'jit',
  ...
}
```

> **NOTE** : Make sure that the `purge` setting has been added or no styles will be generated

### Tools and templates

To make the process of integrating ReScript and Tailwind even easier, here are some tools and templates to help you.

- [Supreme](https://github.com/opendevtools/supreme) - A CLI I've written that can quickly set up a ReScript template with Tailwind (JIT and dark mode included) and Vite. Just the way I like it.
- [Next.js + Tailwind](https://github.com/ryyppy/rescript-nextjs-template) - A Next.js template with Tailwind created by [@ryyppy](https://twitter.com/ryyppy)
Don't want miss recent post on dev, Make feed on your web
Tags: discuss, javascript, webdev, programming
Published: 2021-04-29 05:33:40

[Dev](https://dev.to/) is a community of software/web developers getting together to assist each other. We can’t be active all time over community so don’t miss creative post, You can get all post under single page over your website or your blog.

Let’s start with [node.js](https://nodejs.org/en/)

I will show you to scrap dev.to latest post including their title and relevant content. You will be required to include Axios npm package to send http request over dev.to. This package will extract html of latest post, Afterward you need to load html and have to scrap html content, For which you must install [cheerio](https://www.npmjs.com/package/cheerio) npm package.

Http request to extract html using [axios](https://www.npmjs.com/package/axios)

```
axios.get(url)
.then(response => {
getData(response.data);
})
.catch(error=>{
console.log(error);
})
```

##Load and scrap html using cheerio

```
let getData = html => {
  data = [];
  const $ = cheerio.load(html);
  $('a.crayons-story__hidden-navigation-link').each((i, elem) => {
    data.push({
      title : $(elem).text(),
      link:$(elem).attr('href')
    });

  }); 
```
Here i just scrap title and their href , Whatever you want to scrap of a post , you may access using class name or id. Store scrap data into an array and send to view files for render.

```
<div class="jumbotron">
        <h1>Dev.to Feeds</h1>
        <ul>
	    <% data.forEach(function(elem) { %>
	        <li>
	            <strong><a href="https://dev.to/<%= elem.link %>"><%= elem.title %></a></strong>

	        </li>
	    <% }); %>
	</ul>
    </div>
```
Preview

![Coodigdessign.com](https://www.coodingdessign.com/wp-content/uploads/2020/12/image-1-768x535.png)

You may get code from [here](https://github.com/shantun7792/dev.to_scrap_with_nodejs/tree/master)

![Thanks for reading!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xczd6k8rs5gqpfv7kn4g.png)

Originally published at my blog [coodingdessign.com](https://www.coodingdessign.com/)
Create Strings using Template Literals
Tags: javascript, tutorial, beginners, programming
Published: 2021-04-29 05:24:32

A new feature of ES6 is the template literal. This is a special type of string that makes creating complex strings easier.

Template literals allow you to create multi-line strings and to use string interpolation features to create strings.
* Let's consider the code below
```
const person = {
  name: "Randy Rivera",
  age: 24
};

const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;
```
```
console.log(greeting);
```
* The console will display the strings Hello, my name is Randy Rivera! I am 24 years old.

To be honest with you a lot happed in this code. First, the example uses backticks (`), not quotes (' or "), to wrap the string. Second, notice that the string is multi-line, both in the code and the output. This saves inserting \n within strings. The ${variable} syntax used above is a placeholder. Which is basically, you won't have to use concatenation with the + operator anymore. To add variables to strings, you just drop the variable in a template string and wrap it with ${  }.

* Let's Challenge ourselves:

Use template literal syntax with backticks to create an array of list element (li) strings. Each list element's text should be one of the array elements from the failure property on the result object and have a class attribute with the value text-warning. The makeList function should return the array of list item strings. Use an iterator method (any kind of loop) to get the desired output(shown below, for this example let's go with this).
````
[
  '<li class="text-warning">no-var</li>',
  '<li class="text-warning">var-on-top</li>',
  '<li class="text-warning">linebreak</li>'
]
````
````
const result = {
 success: ["max-length", "no-amd", "prefer-arrow- 
 functions"],
 failure: ["no-var", "var-on-top", "linebreak"],
 skipped: ["no-extra-semi", "no-dup-keys"]
};
````
````
function makeList(arr) {
  const failureItems = [];
  for (let i = 0; i < arr.length; i++) {
    failureItems.push('<li class="text-warning">${arr[i]}</li>')
  }

  return failureItems;
}

const failuresList = makeList(result.failure);
````
````
console.log(failuresList); will display 
[ '<li class="text-warning">no-var</li>',
  '<li class="text-warning">var-on-top</li>',
  '<li class="text-warning">linebreak</li>' ]
````
Reset pod's restart Count
Tags: reset, restartcount, kubernetes
Published: 2021-04-29 05:07:30

สวัสดีครับ ในการ Monitoring K8s Cluster ตัวแปรสำคัญหนึ่งคือ restartCount ที่จะบอกเราว่า container มีการ restart ไปแล้วกี่ครั้ง
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/616zzj04z7f1sq00apeo.jpg)

หรือสามารถเช็คได้จาก key statusCount: 17
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28mlodvxtgier2g4q62v.jpg)


การ restart มีความเป็นไปได้หลายสาเหตุครับ เช่น onFailure ในตัว container เอง, livenessProbe ไม่ผ่าน เพราะมีปัญหาที่ฝั่ง Network หรืออื่นๆ ได้หลายกรณี ฉะนั้นค่าที่ได้จาก restartCount จึงมีความสำคัญในการช่วย Investigate

ถ้าต้องการ reset ค่าของ restartCount เช่นทุกๆ 24 ชั่วโมง เพื่อที่จะ Monitor ได้ง่าย, หรือช่วยในการเก็บ Report จาก status ของวันนี้มี restartCount แล้วกี่ครั้ง

ปัจจุบัน ยังไม่สามารถ reset ค่า restartCount บน container ได้ครับ
สิ่งที่ทำได้ จะเป็นการ rollout restart เพื่อบังคับให้สร้าง container ใหม่ ค่า restartCount ก็จะเริ่มนับที่ 0 ใหม่โดยอัตโนมัติ

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

ทั้งนี้ ใน Community ก็ได้มีการร้องขอให้เพิ่มความสามารถ ในการ reset ค่า restartCount นี้อยู่ครับ คงต้องติดตามในอนาคตว่า Kubernetes จะเพิ่มความสามารถนี้เข้ามาไหม
Host Flutter Web App On Firebase Hosting
Tags: flutter, firebase, flutterfirebase, firebasehosting
Published: 2021-04-29 05:05:58

Hello guys, in this post I will show you how to deploy your Flutter Web App on Firebase.

In this tutorial I’m assuming you have installed firebase-tools and you have created firebase project on firebase console.

[Click here to learn How to Install firebase-tools](https://www.npmjs.com/package/firebase-tools)

Before diving into the process, Let’s talk about some topics in flutter web deployment.

##Minification
Minification is handled for you when you create a release build.

A debug build of a web app is not minified and tree shaking has not been performed.

A profile build is not minified and tree shaking has been performed.

A release build is both minified and tree shaking has been performed.

##Web Renderers
By default, the flutter build and flutter run commands use the auto choice for the web renderer. This means that your app runs with the HTML renderer on mobile browsers and CanvasKit on desktop browsers. This is Flutter recommended combination to optimize for the characteristics of each platform. You can also define the renderer when building by using --web-renderer option with flutter build web command. See more about [Web Renderers](https://flutter.dev/docs/development/tools/web-renderers)

##Building Flutter Project for Release
* Open your terminal and cd to your root of flutter project
* Then run `flutter build web` command, This generates the app including the assets, and places the files into **build/web** directory
* The release build of a simple app has the following structure:

```
/build/web
  assets
    AssetManifest.json
    FontManifest.json
    NOTICES
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
  index.html
  main.dart.js
  main.dart.js.map
```

##Initializing Firebase
* Run `firebase init` command in root of the project
* Choose **Hosting: Configure and deploy Firebase Hosting sites** option (press space bar to choose) and press **Enter**
* Now I’m using **Use an existing project** option you can use **Create a new project** option if you haven’t created the firebase project yet.
* Now select your newly created project
* Now enter **build/web** as public directory
* For next question enter **Y**
* Then it will ask to setup automatic builds and deploys using git, in this tutorial we skip that option by saying **N**
* It will ask another question, to override the build/web/index.html, say no to it by entering **N**
* Now firebase has initialized on our project directory, you will see two new files as **firebase.json & .firebaserc**, it means firebase has initialised, let’s move on
* Now run `firebase deploy` this command will deploy our app to firebase, after successful deploy you will see like below.
* Visit your newly hosted web app by going to **Hosting URL**

Watch the short video tutorial on YouTube:
{% youtube WBCF2DvMg1s %}

Want to develop this simple landing page using Flutter? Watch my tutorial on YouTube:
{% youtube PM-ASOgxBn8 %}
First time on DEV
Tags: beginners, webdev, programming, computerscience
Published: 2021-04-29 05:02:48

Hello Dev

This is my first post on dev and I was actively following the community from a while ago. I am truly fascinated by the perspectives of many other developers.
I am a Computer Science Graduate student. I like working with JS frameworks(React and Angular) and I love to solve problems that challenge my abilities.
I hope I will add value to the community through my findings and perspectives.

See you in my next post...
When should you use rest api for rendering vs server-side rendering?
Tags: beginners, discuss
Published: 2021-04-29 04:42:51

---
title: When should you use rest api for rendering vs server-side rendering?
published: true
description: When to use a rest api and consume with a client-side framework. Vs a backend server-side template.
tags: #beginner #discuss
//cover_image: https://direct_url_to_image.jpg
---

So hopefully the question makes sense. But I'm needing some guidance. When you are using something like laravel. When should a rest api be used to consume, and display that data using a client-side framework such as vue? Vs using something like blade templates and letting the server-side render the view and just pass the data to the template?

Would be happy to get any guidance on this as im sort of just confused.

Thanks!
The swing of the "works on my machine" pendulum!
Tags: kubernetes, docker, devops, containers
Published: 2021-04-29 04:37:47

# Why dev-prod disparity is such a big issue?

We need to get to the history of the gap between development and production systems. Once upon a time, during the era of punching cards, there was no gap between development and production systems. If there were no errors, time to deploy was close to zero. If there was even a single error, developer had to start all over again (almost, though there was some reusability) and wait in line to get a chance to schedule next run. There was no WOMM issue at that time as the giant mainframe was everyone's machine.

Next era was the era of thick clients. Think of visual basic running on MS Access database. This was the brief golden age of WOMM being true. If it worked on developer machine, it had to work on the production machine (unless machine was corrupted). 

Next era was of client-server. To scale applications, a server component was added and that brought in server administrators. Servers were beefier machines. They were mostly Unix (like Solaris, HP-UX). Initially developers worked on these machines but it was not a very scalable model. This problem was solved with the popularity of Java. The slogan "write once, run anywhere" actually meant "write on cheap machines and run on expensive machines. This was the sunset era of WOMM. If it worked on developer machine, mostly it worked on the production systems. 

Next era was the era of Linux. Though Linux was invented in early 90s, its real value became visible only in early 2000s. There were various factors which worked as perfect storm. One of them was the dot-com bust and companies looking for cheaper alternatives. Another was Google making server farms a cool and popular idea. As more and more applications started being deployed in scaled out fashion using server farms, the dark ages for WOMM started. There was too much traffic on the network and applications not only had to care about their own reliability but also network reliability.  

Next came the cloud-era (no pun intended). Migration to cloud, presented an opportunity to rethink application design. This also got help of the popularity of service oriented architecture. Initial popularity of services, led to microservices and now nano-services. This created the peak of dark ages for WOMM. Now not only servers were scaled out but even functions were spread out on the network. This also created the opportunity for a lot of policing between developer and production. This policing has only made the production problems worse as now developer to production gap is at its worst.
Singly LinkedList implementation in JAVA
Tags: java, datastructures
Published: 2021-04-29 03:34:13

## What is a linked list
1) each element in a linked list is called a node.
2) It is similar to an array, each node in the linked list has the data part and a link to the next node.
3) linked lists have O(1) time complexity for insertion or deletion at the beginning i.e at position 0.

## How to implement
-> Java has builtin LinkedList which you can import from the utility library
-> or you can implement your own LinkedList
### Built-in LinkedList
```java
        LinkedList<String> x = new LinkedList<String>();
//        to add elements to the list
        x.add("1"); // here the first element we added becomes the head
        x.add("2");
        x.add("3");
        x.add("4");
        x.add("5");
        x.remove("5");

//      to traverse the linked list
        Iterator<String> i = x.iterator();
        while(i.hasNext()){
            System.out.print(i.next()+"->");
        }
``` 
### implementing a LinkedList, my approach:
```java
// LL stands for LinkedList
public class LL {
    public Node head;

    public LL() {
        head = null;
    }

    public LL(int data) {
        head = new Node(data);
    }

    public void add(int data) {
        if (head != null) {
            head.appendToTail(data);
        } else {
            head = new Node(data);
        }
    }

    public void printList() {
        Node dummy = head;
        while (dummy != null) {
            System.out.print(dummy.data + "->");
            dummy = dummy.next;
        }
        System.out.print("null");
    }

    public void delete(int d) {
        Node newHead = new Node(0);
        newHead.next = head;
        Node previous = newHead;
        Node current = head;

        while (current != null) {
            if (current.data == d) {
                previous.next = current.next;
            } else {
                previous = current;
            }
            current = current.next;
        }

        head = newHead.next;

    }

    public class Node {
        Node next = null;
        int data;

        public Node(int data) {
            this.data = data;
        }

        void appendToTail(int d) {

            Node end = new Node(d);
            Node n = head;
            while (n.next != null) {
                n = n.next;
            }
            n.next = end;

        }
    }
}
```
Try out these [challenges](https://www.hackerrank.com/interview/interview-preparation-kit/linked-lists/challenges) on LinkedList to get a good grasp
Top Flock Integrations

Published: 2021-04-29 03:33:16

Gmail Flock Integration: 
Get new emails in Flock: This automation will get new incoming Gmail emails sent directly in Flock.

Google Sheets Flock Integration: 

Post Flock messages whenever rows are updated on Google Sheets: This integration will respond to each update you make on Google Sheets.
 
Trello Flock Integration:
Get new Trello notifications in Flock: Quickwork  will capture every new notification on Trello and forward it to Flock
GitHub Flock Integration:

Get Flock notifications for new GitHub mentions: This will help to notify you on Flock every time someone mentions you on a particular repository on Github.

Google Calendar Flock Integration:
Post upcoming Google Calendar events to a Flock group: This will post upcoming events to a Flock group.

Dropbox Flock Integration:
Get Flock notifications whenever a new file is added to a folder in Dropbox: This will notify you and your team on a Flock group every time any file is added to a particular Dropbox folder.


Quickwork helps companies integrate multiple systems and applications, to design delightful user journeys using Quickwork automation builder. Quickwork automation builder is an API-driven, zero-code, DIY tool, enabling any user to design and implement workflows with ease and speed.
I built a game with Vite
Tags: vite, gamedev, phaser, typescript
Published: 2021-04-29 01:25:44

![Where is Bob is a game made in 48 hours](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfsngyt4x1iqhcscglcx.png)

As part of Ludum Dare, a competition for making a game in 48 hours, I like experimenting with new tech. It's always painful to experiment while under time pressure, but it's also a great opportunity to time constrain a learning experience.

Last year I tried to use Rollup, Phaser, and TypeScript based on an existing template. When I tried to `npm install` an audio library (Howler) - it [broke](https://github.com/geocine/phaser3-rollup-typescript/issues/1#issuecomment-715410600) in such a way that I needed to debug a convoluted asset build configuration. I couldn't figure out how to fix it. In the end I decided to ditch the build system entirely and go pure JavaScript. 

This year I tried out Vite, Phaser, and TypeScript. I was able to throw in different odd libraries and it all just worked. There were just 2 issues which were straightforward to debug:
* The inlining of assets into URL encoding that Vite does was incompatible with Phaser. Luckily the relevant Vite docs popped up when I searched for the issue. After a small config [change](https://github.com/ubershmekel/ld48/blob/7b6a1185e9f5e773500f4c12b3e3e9373e404aba/vite.config.js#L7) of `assetsInlineLimit` to zero,  I was on my way. 
* GitHub pages are hosted in a subfolder, so I had to add `  base: './',` to the `vite.config.js` as well. Perhaps this should be the default setting.

The game is pretty simple, you can [play "Where is Bob"](https://ubershmekel.github.io/ld48/) if you like. I also made a [vite-phaser-typescript template](https://github.com/ubershmekel/vite-phaser-ts-starter) if you'd like to start such a project from scratch. The main goal of this post if to just say thank you to @yyx990803 and the Vite team for such a smooth build system that mostly just worked.
Flock with Github Integration

Published: 2021-04-29 03:32:24

GitHub Flock Integration:

Get Flock notifications for new GitHub mentions: This will help to notify you on Flock every time someone mentions you on a particular repository on Github.

Quickwork helps companies integrate multiple systems and applications, to design delightful user journeys using Quickwork automation builder. Quickwork automation builder is an API-driven, zero-code, DIY tool, enabling any user to design and implement workflows with ease and speed.