teleren/devto huggingface dataset:
MEML Is Working!
Tags: showdev
Published: 2020-06-23 19:14:19

https://github.com/fivnex/meml

MEML has already grown into a reality of sorts. Currently in an early release where I have yet to deal with many of the more pressing issues. I have finally made MEML work. Over the last week, I have built a working lexer and parser with an AST array that works. Tags like p, span, h1, work without a hiccup. I am sharing what each function and tool in the MEML transpiler does because it is one of my most proud creations. I might get a majority of the definitions wrong, but the point is that it works.
# The File Itself
The MEML project is composed of a single JavaScript file. I picked JavaScript because I was comparing Deno to NodeJS in a planned article that fell through, but the V compiler I had is not working. The JavaScript uses NodeJS to function and uses NodeJS based tools. The file itself is 257 lines long, and 7.91 kilobytes in size. The primary functions being the parser, lexer, code stitcher, file creator, and the replacer. At the end of the file is where the code gets CLI argument inputs, and either sends the version, the help information, runs the rest of the script.

# Simple Overview
The if statement looks at the CLI arguments to see if it should send the help information, version information, or read any given MEML file. It looks for any command line arguments, but if a given command is unknown, the script will undeviatingly not react.

On the command output, the script will set the name of the file given to whatever the user wishes. The command will also permit the use of using any file extension, in case you want to put the HTML into something like an HTM, TXT, or whatever kind of file you prefer. If the output command is not specified, the output will automatically send into an HTML file.

The help and version commands display help information and version information, respectively.

The parser function splits the code into the AST, while the lexer makes sense of it. The code stitcher function takes the lexer's output and turns it into information that the file creator puts in the final file.

The replacer function replaces text to a newly defined set, used most often to split the code.

# How to make MEML better
There is a lot of recycling the same functionality, and it would be best to slim down the functions. The translation can be a little janky and has the potential for problems. Right now, the public beta is open, and it is exciting to see what and where this project will go.
What will be the output of following javascript code ?
Tags: javascript
Published: 2020-06-23 19:06:20

const circle = {
  radius: 20,
  diameter() {
    return this.radius * 2;
  },
  perimeter: () =>  2 * Math.PI * this.radius,
};

circle.perimeter.bind(circle);
console.log(circle.diameter());
console.log(circle.perimeter());
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-06-23 18:23:39

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Going forward, we will be sharing our round up the previous week's top posts (based on traffic, engagement, and a hint of editorial curation) on Tuesdays instead of Mondays. The typical week we'll cover still starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

Also, we are celebrating Pride Month and legendary technologist, Alan Turing’s birthday today! [Don’t miss this roundup](https://dev.to/devteam/celebrating-dev-pride-alan-turing-52eh) of inspiring stories from some of the LGBTQIA+ folks on DEV. 

---

### Pulling Through (G)it Together

Jane gives a particularly helpful overview of all aspects of getting started with git including how to start collaborating with your team — and a bonus section on forking. 🔥

{% link https://dev.to/tracycss/git-and-github-for-beginners-po3 %}

### Becoming an AWS Solutions Architect for the Low Cost of Mostly Free!

Matt dives into their experience of taking the AWS Solutions Architect exam, with a focus on the best free resources to help you along the way.

{% link https://dev.to/aws-heroes/how-i-passed-the-solutions-architect-professional-with-mostly-free-content-ine %}

### Setting Up Your Hardware and Mindset for Streaming

Jhey explains their thought process behind the decision to start streaming and the specs to make it watchable, smooth, and entertaining. 

{% link https://dev.to/jh3y/starting-a-streaming-journey-2jj5 %}

### Cutting through the TypeScript Confusion

Ibrahima shares a super-referenceable guide to advanced variables, function parameters, returned values, and object properties in TypeScript.

{% link https://dev.to/ibrahima92/advanced-typescript-types-cheat-sheet-with-examples-5414 %}

### How to Fail the Password Test (and Pass the Next Time)

People suck at passwords, writes Joy. So how can you create, store, and share them in a way that _doesn't_? 

{% link https://dev.to/joywinter90/6-password-security-risks-and-how-to-avoid-them-53e4 %}

### Using Offset for Pagination is Not a Good Idea

There are better ways to paginate. Abdisalan walks us through their approach.

{% link https://dev.to/abdisalan_js/1-sql-query-you-should-stop-using-1e5k %}

### Fun with Three Dots

In this article, Tomomi shows some practical tricks that use spread syntax making everything much easier to understand than simply reading definitions. 

{% link https://dev.to/girlie_mac/spread-syntax-three-dots-tricks-you-can-use-now-aob %} 



_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_

![yay](https://media.giphy.com/media/xULW8zjkhlKJwobzRS/giphy.gif)
Angular 9 App From Scratch - Build Angular 9 Memes Generator App 😜😜
Tags: angular, tutorial, javascript
Published: 2020-06-23 18:46:36

Angular 9 App From Scratch

In this video we gonna be looking at how to create an Angular 9 Memes Generator App From Scratch, 

we will be looking at,
👉👉 How to design the entire Angular app using bootstrap 4 
👉👉 How to Deal with HTML 5 Canvas in Angular 9 App
👉👉  How to use color-pickers in Angular 9

Tutorial link - https://youtu.be/jt4IHKCqAHk
How we achieved 1000 User in one Month 
Tags: analytics, seo, writing
Published: 2020-06-23 18:33:19

snipbits was started at the end of Mai (last Month), Here are the most useful things I learned:
1- SEO is superpower few devs have
2- post's title is as important as the content
3- Building a blog is like building a product. You can't just say, "I'm my own user" and expect what's interesting to you will be interesting to them. A combination of SEO + reader psychology is the key to writing what people want to read and share.
4- people do use social sharing buttons (thanks for sharing our Blog Posts with your friends )
5- Updating old posts is more efficient than writing new ones 
6- the number of posts is still important (most of the traffic is generated by only 2 posts) 

Finally thanks for visiting https://www.snipbits.dev/ and sharing our articles with your friends
Best React JS Covid19 Tracker ever!
Tags: react, javascript, opensource
Published: 2020-06-23 18:16:17

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x953bdu9me6h7pg19kiw.jpg)
Hi everyone. I want to introduce my first COVID19 Tracker based on React JS. I watched the video on youtube, where it was shown how to build it, and build my own one. Due to respect to the video author, I will post the link of the video at the end of the article as well =)
My version consists of simple code, global, worldwide, and single country statistics. As it is my first published application, I' will be waiting for your feedback, will be happy for github stars of the project, that will motivate me to share my other interesting applications.

Video tutorial: https://www.youtube.com/watch?v=khJlrj3Y6Ls&t=84s
My Code demo: https://huseyn0w-covid-tracker.herokuapp.com/
Github Repository: https://github.com/huseyn0w/Covid19-Tracker

Thanks.
How To Upgrade NVM, NPM, Node, and NPX
Tags: node, frontend, backend
Published: 2020-06-23 18:13:38

---
title: How To Upgrade NVM, NPM, Node, and NPX
published: true
description: Upgrading dependencies 
tags: #Node #Frontend #Backend
cover_image: 
---
I was working on a project and almost all of my Node packages were outdated, I searched for commands and options on keeping versions of core components consistent. I couldn't get all in one article so I wrote this about NVM, NPM, Node.js, and NPX.

**NVM.**
I think the most recent version of NVM is v0.35.3 and to install or update NVM use this command:


`curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash`


**NPM.**
To upgrade NPM to the latest version use following command:

`npm install -g npm@latest`



**Node.**
Once you have nvm installed you can use the following command to get the latest stable version of Node.js

`nvm install stable`

**NPX.**
Since NPX is also node package we can use NPM to install or update it:

`npm install -g npx`

Thank you for Reading!
NextJs Tutorial (Nextjs SSR, Bulma, Css Modules, GitHub Api, Vercel)
Tags: react, javascript, nextjs
Published: 2020-06-23 17:48:04

---
title: NextJs Tutorial (Nextjs SSR, Bulma, Css Modules, GitHub Api, Vercel)
published: true
description: 
tags: react, javascript, nextjs, 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/i99l8rdrszzhxb65tu2x.png
---

Hello everyone 👋! Recently I launched my own youtube channel focusing on tutorials. It mostly JavaScript and Web related technologies. 🚀

I started with tutorial series about *Nextjs*. You can watch it here:

{% youtube LbmW2OKIOWU %}

Please subscribe to my [Waldev channel](https://www.youtube.com/channel/UCWOcBjKEbegNxJmGtqxniyQ) if you are interested 🎥. Thank you!

<hr/>

I appreciate any support and feedback you can give, otherwise I can't improve and be better. 💖
Wishful thinking about a Tumblr API v3
Tags: rest, api, tumblr, 100daystooffload
Published: 2020-06-23 17:43:51

Let’s say you want to read a Tumblr post information from their [API v2](https://www.tumblr.com/docs/en/api/v2). Nothing special at the first look, but beyond the obvious parameters, there’s an interesting one: notes_info. The API designer thought to make this optional (it defaults to false) as to not overload the server and cause unneeded traffic with all the likes and reblogs your requested post might have – especially if popular.
```
https://api.tumblr.com/v2/blog/your-blog-to-check/posts?api_key=0ABCDEFGH&id=12345678¬es_info=true
```
And how will those notes look like? Well, the API documentation forgets to document that. Its last update is from 2011, the very year where the [Swagger project](https://swagger.io/) was started so we can forgive them for the lack of documentation. But if we quickly try the API, it will – somewhat obviously – return only the first 50 notes. Obviously, because what if the post had a million notes?
```
[{
avatar_shape: "circle",
blog_name: "ablogname",
blog_url: "https://ablogname.tumblr.com/",
blog_uuid: "t:kjhlIU(/OLUGu7g",
followed: false,
post_id: "9873875387587638",
reblog_parent_blog_name: "anotherblog",
timestamp: 1592801102,
type: "reblog"
},
…
```
Now, HOW on earth could we paginate over these notes? The obvious answer is: no way, it’s an inner structure and the REST idea doesn’t allow for that. I mean, something like
```
https://api.tumblr.com/v2/blog/your-blog-to-check/posts?api_key=0ABCDEFGH&id=12345678¬es_info=true&offset=50
```
logically would apply to the response of the call. So, whenever Tumblr does an API update, maybe 2021 to celebrate 10 years since the last one, how about they make the notes first class citizens and let one access them properly.
```
https://api.tumblr.com/v2/blog/your-blog-to-check/posts/12345678/notes?api_key=0ABCDEFGH&id&offset=50
```
And as a modern OpenAPI and documented right? Like even the [petstore of Swagger](https://petstore.swagger.io/) is? And while we’re talking about changes, discoverability wouldn’t hurt either – add a Link header! It’s official (together with the [types next/prev/first/last](http://www.iana.org/assignments/link-relations/link-relations.xml)) so should be fairly well known, and Spring REST supports it out of the box.
```
Link = https://api.tumblr.com/v2/blog/your-blog-to-check/posts/12345678/notes?api_key=0ABCDEFGH&id&offset=100; rel=”next”
```
That was just a silly and frustrated example. It doesn’t have to be offset pagination, it could be cursor pagination or anything. Just have it there, thank you!

(Published as part of the #100DaysToOffload challenge [https://100daystooffload.com/](https://100daystooffload.com/))
Nearly two weeks since I joined dev.to - what I found so far
Tags: community
Published: 2020-06-23 17:42:16

* 🌈 The community is really nice, thank you for ❤️'ing my intro, I got a badge, that was unexpected. Thank you! 
* 🙅 What **not** to post, thanks to an acquaintance.
* 👉 Posted my first listing and learnt I can use organisation I'm part of (thanks to aforementioned acquaintance again).
* 🙇 **#help** tag is not where I thought I should post for help (e.g. my Chinese Cantonese techie terms post, I'm looking for help on finding more up-to-date terms currently used) - Got dinged by mods for that. Oh well, it happens.
* 🧙 dev.to has some kind of hold on me, I feel compelled to post on it and check what people have been posting. It's magic, I tell ya! 😆

I'm still learning what to post here, and I hope I don't get myself into too much trouble. The experience has been super amazing so far (bar the teeny hiccups).
Day-7: Nmap -- Hacker's Favourite Scanning Tool!
Tags: cybersecurity, security, infosec, blogaday
Published: 2020-06-23 17:36:52

**Day-7:** I started my day watching Dude perfect's [documentary](https://www.youtube.com/watch?v=lbK24iwrYbY) and ended it learning Nmap and about its scan types! Also, In between, I bought pentesterlab pro access (3mths - Student access). 

**Note:** I won't be writing more in deep, but my notes! And will be providing all the links/resources (Don't forget to check-out the resource section) from where I learned so that you can refer to that resource and learn more! Thanks!❤️

### **What is Nmap?**
- Nmap stands for Network Mapped (Nmap) and is a network scanning and host detection tool that is very useful during several steps of penetration testing. 
- Nmap is open source and can be used to:
   - Detect the live host on the network (host discovery)
   - Detect the open ports on the host (port discovery or enumeration)
   - Detect the software and the version to the respective port (service discovery)
   - Detect the operating system, hardware address, and the software version
   - Detect the vulnerability and security holes (Nmap scripts)

### **Nmap Syntax:**
```
nmap [scan type] [options] [target specification]
```

### **Nmap Scan types:**

- TCP SCAN
- UDP SCAN
- SYN SCAN
- ACK SCAN
- FIN SCAN
- NULL SCAN
- XMAS SCAN
- RPC SCAN
- IDLE SCAN


### **Using Nmap help:**
- The best way to get used to nmap and its flags is using `nmap -h`, run this command in the terminal and will give you the following results:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7m1r2w75jbmccq2b6vr1.png) and one more screenshot, but it is creating a mess so wont post it! Try yourself and explore the world of nmap! Happy Scanning!


### **Port states recognized by Nmap?**
-  Six port states recognized by Nmap are:
   - Open
   - Closed
   - Filtered
   - Unfiltered
   - Openfiltered
   - Closedfiltered

---

# **Resources:**

**Medium Blogs:** https://medium.com/bugbountywriteup/intro-to-nmap-192c1796bb39
**Nmap Installation:** https://nmap.org/download.html
**HackerSploit Nmap Tutorial:** [YouTube](https://www.youtube.com/watch?v=5MTZdN9TEO4&list=PLBf0hzazHTGM8V_3OEKhvCM9Xah3qDdIx)
**Port Scanning basics:** https://nmap.org/book/man-port-scanning-basics.html
**Scan Types:** [Edureka](https://www.edureka.co/blog/nmap-tutorial/)


# **Contact:**

Got doubts? Contact me on [Twitter](https://twitter.com/FenilShah1616). 
Feedbacks are welcomed, do comment it down below! :)
My first browser extension is now available! The process of creating a new tab replacement for Chrome and Firefox
Tags: showdev, vue, javascript
Published: 2020-06-23 17:33:28

During the month of May, I participated in a [Code with Friends](https://scottkwang.github.io/CodeWithFriends-Spring2020/) event hosted by [Mayuko](https://www.youtube.com/user/hellomayuko). The goal of the event was to bring developers together and build projects that improved quarantine life.

I love being in the outdoors, and having to comply with shelter in place can make it difficult to experience nature while also being cooped up all day and working from home. Outdoor Inspiration was built as a reminder of what is waiting for us when life returns to normal, and to encourage people to make plans to explore the outdoors. I wanted to inspire people with views of natural wonders while they are unable to experience them in person.

## Building a Browser Extension

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5onba5ymv9d164zdrbla.png)

I used this project as a learning experience for building extensions on Chrome and Firefox. While the initial build is a very simple extension that basically replaces the new tab with a Vue application, I plan to add to this over time and build more features to better integrate it with each browser.

I primarily used the [Chrome Extension Guide](https://developer.chrome.com/extensions) to build this out initially. For Firefox, I used their [Extension Workshop Site](https://extensionworkshop.com/) to learn about their process, but since I have a very basic extension, I just had to make sure my manifest.json file was compatible with Firefox. Mozilla has a very useful tool called [Extension Test](https://www.extensiontest.com/) which I used to test my Chrome extension, and fortunately it was easily portable over to Firefox.

---

Building a browser extension can definitely be a daunting task, especially if you want deeper integration with the browser as well as cross-compatibility. If you just want to replace the new tab without all the bells and whistles however, it's as easy as making a `manifest.json` and packaging it up. I do want to add a few other integrations over time, such as browser syncing and settings which will add another layer of complexity to the app, but will be a great next step for me to learn more about building browser extensions.

Feel free to check out the project on Github and let me know your thoughts!

{% github https://github.com/luisaugusto/outdoor-inspiration %}
How do you launch apps?
Tags: webdev, productivity, discuss
Published: 2020-06-23 17:15:50

---
title: How do you launch apps?
published: true
description: 
tags: webdev, productivity, discuss
//cover_image: https://direct_url_to_image.jpg
---
I've seen different approaches on devs launching apps: from the use of terminal to built-in search in the Start menu or launching from the desktop icons / pinned stuff in the taskbar.

I'm on Windows and lately I've been using a tool called [Keypirinha](https://keypirinha.com/).

What are your methods of launching apps?
Quick! Share your awesome coding tunes!
Tags: discuss, productivity
Published: 2020-06-23 17:11:10

Mine may be kind of *basic*, but I love [Carbon Based Lifeforms](https://open.spotify.com/artist/38DX4hQVvPBs3PThDIAK11) and [God is an Astronaut](https://open.spotify.com/artist/079svMEXkbT5nGU2kfoqO2). 

I find myself too distracted if the music has lyrics or any flashy melodies, so I listen mostly to post-rock tunes and instrumentals. 

However, whenever I find myself strangely pumped, I put on something a little more upbeat like [Amy Winehouse](https://open.spotify.com/artist/6Q192DXotxtaysaqNPy5yR) or [Bruno Mars](https://open.spotify.com/artist/0du5cEVh5yTK9QJze8zA0C). It steals my focus but I tend to enjoy more 😅

What's *your* coding 🎶🎶🎶?
What are you learning today?
Tags: questions
Published: 2020-06-23 17:07:45

1. How much time do you spend on learning?  What kinds of things do you learn?  What is the last thing you learned that you used in production?

2. How do you learn?  Do you learn on your own? Do you read? Watch screencasts?  Tinker with code? Use examples or samples? Code from scratch?  Do you learn with other people?

3. What do you do after you learned something? Do you deploy it? Do you test it? Do you tell someone?  How do you tell them? Slack? PR on GitHub? Blog post?

4. Have you 'given up' on learning something? Why? Did you come back to it? Did you get unstuck? How? 

5. Are there patterns on how you learn? A time of day? Place? Mood? Music?  If you find an error (in the code, example, data, or documentation) what do you do then?
Developing a Conway's Game of Life algorithm in Javascript
Published: 2020-06-23 16:49:52

First we will start with our possibilities:

Given the possibilities of a cell's neighbours where the cell is 'C' there are 8 possible neighbours as detailed in the tables below, the first table would be cardinal direction while the second table is a relative coordinate where the first digit represents x or the rows, and the second represents y or the columns. I.e. SW is relatively 1 row further than C and -1 column further than C.
```
NW  N  NE 
W   C  E  
SW  S  SE 

[
 [-1,-1],
 [-1,0],
 [-1,1],
 [0,-1],
 [0,0],
 [0,1],
 [1,-1],
 [1,0],
 [1,1]
]
```
We need to cycle through each cell in the total grid and compare each of its neighbours and see how many of its neighbours are alive.

To this end, I have represented alive with ‘1’ and dead with ‘0’ which in javascript equate to truthy and falsy respectively, while still maintaining their integer value.I am using this to my advantage.

Duplicate the existing grid.
  For i in rows,
    For j in columns
      For x,y in possibilities
        We will add the current row index (i) to the possible x value
        We will add the current col index (j) to the possible y value 
	If the combined x is greater than or equal to 0 and less than the number of rows and the combined y is greater than or equal to 0 and less than the number of columns:
	  Add 1 to the total number of neighbours for the current cell
      Once we’re finished finding number of neighbours: if the neighbours is greater than 3 or less than 2, set the current cells value to 0 (Rule 1 and 3)
      If the current cell’s value is 0 and the number of neighbours is 3, set the current cell to 1 (alive)
      All other cells should be left alone
Set the existing grid equal to the altered duplicated grid

```javascript
    const tempGrid = JSON.parse(JSON.stringify(grid))
    
    for(let i = 0; i < rows; i++){
      for(let j = 0; j < cols; j++){
        let neighbours = 0;
        possibilities.forEach(([x,y])=> {
          const nextI = i + x;
          const nextJ = j + y;
          if(nextI >= 0 && nextI<rows && nextJ >= 0 && nextJ < cols){
            neighbours += grid[nextI][nextJ] 
          }
        });
        if (neighbours < 2 || neighbours > 3){
          tempGrid[i][j] =  0;
        } else if (grid[i][j] === 0 && neighbours === 3) {
          tempGrid[i][j] = 1;
        }
      };
    }
```

Given the above code requires a few other pieces of data to run I will include how they existed in my code. I was using React to run my frontend so I used the useState hook to maintain the state of my grid.

```javascript

const rows = 50
const cols = 50

const possibilities = [
  [-1,-1],
  [-1,0],
  [-1,1],
  [0,1],
  [1,1],
  [1,0],
  [1,-1],
  [0,-1],
]

const zeroArray = (rows,cols)=> {

  let arr = new Array(rows);
  for(let i = 0; i < arr.length; i++){
    arr[i] = new Array(cols);
    for(let j = 0; j < rows; j++){
      arr[i][j] = 0
    }
  }
  return arr;
}

const [grid, setGrid] = useState(zeroArray)
```
I kept a reference to zeroArray because I wanted to include a function that cleared the board and reset all cells to 0.