teleren/devto huggingface dataset:
Generate a directory structure diagram with mermaid on GitLab.
Tags: gitlab, markdown, mermaid, javascript
Published: 2019-12-22 01:47:39

Recently, while preparing the README file for a project hosted on GitLab, I came across the possibility of using [mermaid](https://mermaid-js.github.io/mermaid/) to generate diagrams from markdown-like text. This gave me the idea of trying to recreate the tree-like diagram obtained from the `tree -L 2` command.

The tree-like format was not fully preserved (the root appears as the leftmost element, but not at the top, and the reading of the elements is not as vertical, for example), but the result, made as simple as I could, was interesting, as you can see [**here**](https://gitlab.com/joaommpalmeiro/diagram-scratchpad). Also, there are a few points to keep in mind:

- The diagram (a.k.a. flowchart) generated with [mermaid](https://mermaid-js.github.io/mermaid/) takes up more space than the diagram generated with the `tree -L 2` command. In addition, if the purpose of this diagram is merely to provide an overview of the directory structure of a given project, obtaining it with [mermaid](https://mermaid-js.github.io/mermaid/) may require extra effort that has no clear benefit.
- With the help of style features, you can use the color, for example, of subgraph boundaries (_stroke_) to encode whether a group of elements concerns a folder or not. This information is already encoded to some extent in the indentation or vertical positioning but may be useful, for example, to separate subgroups of files under the same helper text from other files at the same hierarchical level.
- The use of subgraphs for individual files, as in the case of the README file, is because they have a title. This way each file may also have a helper text.
- The default placement of titles, as well as the "boxes" of each subgraph, can help, in my opinion, the user to quickly associate a particular helper text with the corresponding elements.
- At the interaction level, it is possible to associate a hyperlink with each node (check the root and the README file, please). On the other hand, you can select text from this diagram and copy it easily.

Finally, if you want to know more about [mermaid](https://mermaid-js.github.io/mermaid/) or [GitLab Flavored Markdown](https://docs.gitlab.com/ee/user/markdown.html), you can check out the links. I hope this quick sharing can be helpful to you!
pomodoro
Tags: codepen
Published: 2019-12-22 01:14:16

---
title: pomodoro
published: true
tags: codepen
---



{% codepen https://codepen.io/claive-alvin-polo-acedilla/pen/GRRBMMz %}

https://github.com/cabpacedilla/boyet/blob/master/pomodoro.html
https://bitbucket.org/cabpa/boyet/src/0e25cf15a4223dea07d5e85d05c3f9509cd5e11a/pomodoro
JS Var vs Let difference
Tags: javascript, beginners
Published: 2019-12-22 01:02:18

The difference between **var** and **let** in JavaScript is block scope.

## var

When a **var** is declared outside a block scope, and then re declared inside a block after the first declaration. The value of the **var** gets changed after the block scope is over.

```js
//first declaration of var x
 var x=10;
 {
     //second declaration of var x
     var x=5;
     alert(x); //prints 5
 }
 alert(x); //prints 5
```

## let

However by using **let** keyword to declare a variable. the value of the variable doesn't get changed by the subsequent re declaration inside the block.

```js
//first declaration of let var y
 let y=15;
 {
     //second declaration of let var y
     let y=90;
     alert(y); //prints 90
 }
 alert(y); //prints 15
```
Filtering collection properties the easy way
Tags: javascript, beginners
Published: 2019-12-22 00:47:05

I have a collection from AWS S3 API that looks like this:

```js
[
  {
    Key: 'instances/1/assets/12345.assets_deploy.zip',
    LastModified: 2019-12-15T17:15:01.000Z,
    ETag: '"e9907057481d6ce6fbd5e0d072353b96"',
    Size: 169554,
    StorageClass: 'STANDARD'
  },
  {
    Key: 'instances/1/assets/12345.big.assets_deploy.zip',
    LastModified: 2019-12-15T14:19:25.000Z,
    ETag: '"02eb918489c37029e9aa218f5c1bae8e-10"',
    Size: 171526382,
    StorageClass: 'STANDARD'
  }
]
```

And because I have it on the server-side, and client needs only `Key`, `LastModified` and `Size` information, I need to filter it out before sending it back to the browser.

This is what I came up with:

```js
const body = objects.map(({ Key, LastModified, Size }) => ({ Key, LastModified, Size }));
```

I found it pretty elegant, maybe because I like symmetry :)

Couple words of explanation:

1) `.map` - Mapping over each element of an array - in this case objects
2) `({ Key, LastModified, Size })` - Using object destructuring to pull out only required key/value pairs form each object
3) `=>` - Using arrow function to make it shorter 
4) Using `()` around object literal `{...}` to skip the `return` keyword

Result is exactly what client expected:

```js
[
  {
    Key: 'instances/1/assets/12345.assets_deploy.zip',
    LastModified: 2019-12-15T17:15:01.000Z,
    Size: 169554
  },
  {
    Key: 'instances/1/assets/12345.big.assets_deploy.zip',
    LastModified: 2019-12-15T14:19:25.000Z,
    Size: 171526382
  }
]
```

Can it be made better?
Don't Stress: REACTJS | Components
Tags: react, designisorion, uiweekly, javascript
Published: 2019-12-22 00:16:52

Hi readers,

Okay I am back with another post. This one will be about the ReactJS components. Let's go right into the notes I've taken for the components. Hope it helps. Enjoy!

*Components
    - A part of the web interface. 
    - Header, SideNav, Main Content, Footer, and one component to contain the prior 4 components. They come together to make the app.
    - Components are reusable. ie: The LEFT sideNav can also be the RIGHT sideNav.
    - Building blocks of any ReactJS app.

*Component in Code
    - a component is usually the code placed in App.js
    - You can also have component files with the .jsx extension.

*Component Two Types
    - Stateless Functional Component
        (- JavaScript Functions)
    - Stateful Class Component
        (-Class extending Component class)
        (-Render method returning HTML)
Don't Stress: REACTJS (Folder Structure)
Tags: designisorion, react, coding, design
Published: 2019-12-22 00:04:12

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zodyfbbyz5cu9rdw86rz.png)

Folder Structure

Hi readers,

In this post, I wanted to give insight about the folder structure of a ReactJs App. I wanted to create separate post the so you can get insight in a gradual way. Again, I try not to be lengthy on the steps, but get right to the info. Hope you enjoy!



Folder Structure Breakdown

- package.json:  Includes the dependencies and the scripts used to create a project.

- package-lock.json:  Ensure the installation of the dependencies.

- .gitignore & readme:  Don't worry about these files.

- node_modules:  All the dependencies are installed in the folder. It's generated when you run the "create-react-app" command.

- public folder
    - manifest.json: Used for Progressive Web Apps (PWA's)
    - favicon.ico: Nothing specific, just the icon for the title.
    - index.html:Typically you won't change anything in the body. Maybe the head tag but that's all. This contains the root DOM node.

- src folder: The folder you will work with the most for the development. 
    - index.js: specify the 'root' element which is controlled by React.
    - app.js: Responsible for showing the UI (view) within the browser.
    - app.css: Used for styling the app UI.
    - app.test.js: Used for testing
    - index.css: applies styling to the body tag.
    - logo.svg: refrenced in the app component.
    - serviceWorker: used for PWA's only.
Overcoming a Fixed Mindset
Published: 2019-11-13 17:54:17

I was coasting. And I knew it. I had been working in marketing for over a year, and still hadn't found much of a thrill in it. Some areas I did find interesting, however my day-to-day was not doing it for me. Having lived with two developers I had always been exposed to coding and software development, and decided to give it a try, beginning with a couple Codacademy courses. Enjoying this, I moved on to more substantial resources, including Free Code Camp and a lengthy Udemy Course where the end product was your own fully functioning website. 

So, I knew this was a field I was interested in , but I couldn't possibly go forward with it as a career... could I? To anyone looking from the outside in, CS is such a foreign concept. Quite literally a different language. As most are aware, Imposter Syndrome is so prevalent among those attempting to begin their journey in the industry. I only realised I wasn't alone in feeling like this when I began researching online and listening to podcasts about how to get into programming, hearing about other people's experiences. 

This was only reinforced by my inherently fixed mindset - what if I didn't have the programming 'gene'? As a female entering a male dominated field, this was a difficult feeling to overcome. 

However, things soon changed. When I decided to undergo the course at Makers Academy and began the pre-course, I came across the article 'Effective Learning Strategies for Programmers' by Allison Kaptur, describing the issues people undergo when faced with a fixed mindset verses a growth mindset. Previously I wasn't even aware of the concept, let alone that it is in fact what I had been experiencing. 

This is the point where my whole outlook changed. I had been actively holding myself back - entirely unnecessarily. Once I realised that a growth mindset was something to aim for, I made the active decision to eradicate the state of a fixed mindset from my thought process. 

Since then, whenever I'm struggling to understand a problem or fix a bug, I make an effort to push these 'dead-end' thoughts from my mind, and think about how the solution is to just keep working at it. There is no such thing as 'not being good enough to program'. While it's easier said than done to just magically change your entire way of thinking, I did begin to allow myself to fully enjoy the tasks I had at hand, as, in the end, they inevitably will be resolved. The problem became significantly more enjoyable as I could now look forward to the inevitability of eventually solving it, instead of exacerbating my immediate frustrations with the idea that 'I can't do it, it's impossible, it will never be done'. I just had to remember; it will all work out in the end!
Don't Stress: REACTJS | Start!
Tags: designisorion, react, javascript, beginners
Published: 2019-12-21 23:40:30

Don't Stress: ReactJS (Day 01)


Hi Readers,

For a while now I wanted to start learning ReactJS, but was in fear. Not any more and for the year of 2020, I decided to take a step forward into React making major upgrades in the skillset. Yes there are frameworks that are compared to React such as Vue and Angualar, but my interest kept leaning towards this library. I am writing these collection of post for ones whom are starting React, but don't know where to start. If you are like me, you've probably visited the Reactjs.org site millions of times never really understanding. Hope this helps your Reactjs journey.

Hope you enjoy!!!



*What is ReactJS?

- Open source library for building user interfaces
- Not a framework
- Focus on building amazing UI
- Rich ecosystem

*Why learn ReactJS?

- Created and maintained by Facebook
- More than 100K Stars on Github
- Huge Community
- High Demand skillset

*Component Based Architecture

- A website can be broken down into: Header, SideNav, Main Content and Footer.

*Reusable Code

- Components are allowed to be reused. 

*React is declarative

- Tell React what you want and React will build the actual UI
- React makes it painless to make the complex UI
- React will handle efficiently updating and rendering of the components
- DOM updates are handles gracefully in React.

*More on why React?

- Seamlessly integrate react into any of your applications.
- Portion of your page or complete page or even an entire application itself.
- React native for mobile applications.


Prerequisites

- HTML, CSS and JS fundamentals
- ES6 
- JavaScript - 'this' keyword, filter, map and reduce
- ES6 - let & const, arrow functions, template literals, default parameters, object literals, rest and spread operators and destructing assignment. 
( The review should take an hour or so max and you won't need any additional studies if this is known to learn React)



Let's begin Simple ReactJS Hello World! App

- Create a folder to hold the React project(s). My folder is called "ReactJs". 
- Within the VSCode Terminal type the following: npx create-react-app "app name"
    -This may take a moment due to packages being installed.
- Then type: cd-my-app
- Then type: npm run build
- Once you so, the default browser will display a webpage showing the React logo. The page is locally hosted at : http://localhost:3000/
- To edit you will have to navigate to the .src/App.js file. To do so, you will go into code editor folder menu.
- Within the src/App.js file, change the wording in between the paragraph tags to "Hello World!". 
- Navigate back to the browser showing the localhost React site. Refresh. Congrats "Hello World!" should appear. 

You've created your first Reactjs App!
Installing Laravel Homestead on MacOS🔧
Tags: laravel, homestead
Published: 2019-12-21 23:28:50

---
title: Installing Laravel Homestead on MacOS🔧
published: true
description: This is the steps for installing Laravel 6.x on MacOS with Homestead
tags: Laravel,Homestead
---

[Laravel Homestead](https://laravel.com/docs/6.x/homestead) is official local development environment.
It is a great tool that allows you to easily create an environment with all the functions required for development.

The following is the steps for installing Laravel 6.x on MacOS with Homestead.

Install VirtualBox.

- Downloads – Oracle VM VirtualBox https://www.virtualbox.org/wiki/Downloads

Install Vagrant.

- Download - Vagrant by HashiCorp https://www.vagrantup.com/downloads.html

Install the Homestead Vagrant box.

```
$ vagrant box add laravel/homestead
```

By the way, if you couldn't install homestead above command, you can use the following:

```
$ vagrant box add laravel/homestead https://vagrantcloud.com/laravel/homestead 
```

Install Homestead.

```
$ git clone https://github.com/laravel/homestead.git ~/Homestead
```

Create the Homestead configration file.

```
$ cd ~/Homestead
$ bash init.sh
```

`Homestead.yaml` is created in the directory.

```
$ cat Homestead.yaml
---
ip: "192.168.10.10"
memory: 2048
cpus: 2
provider: virtualbox

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

folders:
    - map: ~/code
      to: /home/vagrant/code

sites:
    - map: homestead.test
      to: /home/vagrant/code/public

databases:
    - homestead

features:
    - mariadb: false
    - ohmyzsh: false
    - webdriver: false

# ports:
#     - send: 50000
#       to: 5000
#     - send: 7777
#       to: 777
#       protocol: udp
```

View the `folders` property of the Homestead.yaml file.

```
folders:
    - map: ~/code
      to: /home/vagrant/code
```

Create directory according to settings.

```
$ mkdir ~/code
```

Edit the `sites` property of the Homestead.yaml file. In the case, the project directory name is `myproject`.

```
sites:
    - map: homestead.test
      to: /home/vagrant/code/myproject/public
```

Add name resolution to hosts file.

```
$ sudo vi /etc/hosts

192.168.10.10 homestead.test
```

Launch Vagrant.

```
$ cd ~/Homestead
$ vagrant up
```

If there are not `id_rsa` (secret key) and `id_rsa.pub` (public key) in `~/.ssh` directory, create key files.

```
$ ssh-keygen -t rsa
```

Connect to virtual machine using SSH.

```
$ vagrant ssh
```

Install Laravel with project name `myproject`.

```
$ cd ~/code
$ composer create-project --prefer-dist laravel/laravel myproject
```

View `homestead.test` in your browser.

![Welcome to Laravel](https://thepracticaldev.s3.amazonaws.com/i/trvx1ylz17tycinp0w8a.png)

Good Job!👍
#100DaysOfCode D???
Tags: javascript, codenewbie, 100daysofcode
Published: 2019-12-21 22:49:16

Hi! My name is Paidamoyo-Janet Azehko aka Myles. I'm a newbie web dev on my journey through 100 Days of Code, and this is my third or fourth attempt.  I'm not even sure what day that would make this.  But the best thing about learning to code is that you never stop trying, so I'm using this as a way to document my journey a little more in depth in hopes that I can keep up and learn something along the way. I hope you'll join me.

A little about me, I started learning to code through Jessica Livingston's Summer Hacker's Program. (https://foundersatwork.posthaven.com/why-i-started-the-summer-hackers-program).  Now that the program is done, I'm still continuing on my journey to learn to code.  I didn't get far in the program, I learned some HTML, some CSS and got to JavaScript which is where my brain couldn't keep up, so today that's where I'll start.

JavaScript, its not the name of the font that your barista writes your name on your morning cup of coffee in, it is a robust and amazing programming language that the internet is built on and it's the foundations of the coding language React.  Everything in JavaScript is an object because it is an object oriented programming language.

Let's start with Variables. Variables are defined by using the var keyword. Variables can different types like numbers, strings or booleans.  Number variables can be either integers (whole numbers without a decimal point) and floating numbers (numbers with a decimal point).  Variables can also be a boolean, which is either true or false.

Variables can be either undefined or null.  An undefined variable is a variable that is a variable that has been used without declaring it first:

```javascript
var newVariable;
console.log(newVariable);
```

A null variable is a variable that is empty meaning that it hasn't been given any value on purpose.

```javascript
var emptyVariable = null;
console.log(emptyVariable);
```

This variable will print null.


Alright, that's all for today on my who knows what day this is of #100DaysOfCode.
One of my favorite testing/productivity tools: guard
Tags: rails, ruby, testing, productivity
Published: 2019-12-21 22:08:41

`guard` is not a new library. It has been a staple in many areas of Ruby development for years. Many of us use it, but I felt like shedding a bit of light on it as a great too folks should know about in general.

{% github https://github.com/guard/guard %}

> Guard automates various tasks by running custom rules whenever file or directories are modified.

At DEV, we use `guard` to run tests as files are saved in order to optimize our test-driven-development practices.

I say "we" and "our" without total certainty that it is used across the team and among contributors because it is not _needed_ in our flow. This is probably one of the better things about its use with `rspec`. It is the cherry on top.

It's not a heavy-handed default, but so engrained in my own workflow, I almost forget it's not the default.

The gem is most popular in conjunction with Rails and testing, but I'd advise folks to check out its usefulness in any situation where saving a file can kick off a task. [The guard ecosystem is vast](https://github.com/guard/guard/wiki/Guard-Plugins).

Are there similar tools in other language environments folks check out?
DevOps Engineers, What Do You Like About Your Job?
Tags: devops, discuss, architecture
Published: 2019-12-21 22:05:27

I just recently passed my AWS Certified Solutions Architect Associate exam and I really enjoyed learning about cloud computing and the different services that are offered by AWS. I'm a developer who has spent a majority of my career coding but now in my current position I am getting more into the DevOps side of things with building Jenkins pipelines and what not.

Now I want to know from those who have been DevOps engineers and even cloud solutions architects, what is it about your job that you like. 

I would also like to hear the parts that you dislike as well. Thanks!
Useful Bits of Code From Around The Web
Tags: javascript
Published: 2019-12-21 20:48:23

## [Reading Files in JS](https://stackoverflow.com/a/46129280)

### Text File

```javascript
fetch('file.txt')
  .then(response => response.text())
  .then(text => console.log(text))
  // outputs the content of the text file
```

### JSON File

```javascript
fetch('file.json')
  .then(response => response.json())
  .then(jsonResponse => console.log(jsonResponse))     
   // outputs a javascript object from the parsed json
```
Microsoft Azure service model
Tags: azure
Published: 2019-12-21 20:05:23

Cloud computing types are service deployment models that let you choose the level of control over your information and types of services you need to provide. There are three main types of cloud computing services, sometimes called the cloud computing stack because they build on top of one another.

The first cloud computing type is <a href="https://azure.codefari.com/2018/11/microsoft-azure-service-model.html#iaas" target="_blank">infrastructure-as-a-service (IaaS),<a/> which is used for Internet-based access to storage and computing power. The most basic category of cloud computing types, IaaS lets you rent IT infrastructure - servers and virtual machines, storage, networks, and operating systems - from a cloud provider on a pay-as-you-go basis.

The second cloud computing type is <a href="https://azure.codefari.com/2018/11/microsoft-azure-service-model.html#paas" target="_blank">platform-as-a-service (PaaS)</a> which gives developers the tools to build and host web applications. PaaS is designed to give users access to the components they require to quickly develop and operate web or mobile applications over the Internet, without worrying about setting up or managing the underlying infrastructure of servers, storage, networks, and databases.

The third cloud computing type is <a href="https://azure.codefari.com/2018/11/microsoft-azure-service-model.html#saas" target="_blank">software-as-a-service (SaaS)</a> which is used for web-based applications. SaaS is a method for delivering software applications over the Internet where cloud providers host and manage the software applications making it easier to have the same application on all of your devices at once by accessing it in the cloud.

<a href="https://azure.codefari.com/2018/11/microsoft-azure-service-model.html#advantage"> Advantage of Azure Services</a>