teleren/devto huggingface dataset:
Let's build a compiler!
Published: 2021-06-05 14:11:40

# Discontinued! 
Sorry, but I made too many mistakes while teaching this tutorial and so I have decided to discontinue this series

Let's build a super simple compiler!

In this series, I am going to show you how to build a compiler. This post is going to contain all the metadata for this series, and the next post onwards will explain all the concepts and stuff.

## Why should I care?

- There are tons of compilers around you, and many important concepts can be taken from them.
  ![What I cannot create, I do not understand](https://pbs.twimg.com/media/DeC-SV5W4AEDegt.png)
- It's a fun side project (my reason)
- You might create a simple language which is faster to code in than javascript and save some time!

## But they seem scary!

According to [the super tiny compiler](https://github.com/jamiebuilds/the-super-tiny-compiler#but-compilers-are-scary)

> Yes, they are. But that's our fault (the people who write compilers), we've taken something that is reasonably straightforward and made it so scary that most think of it as this totally unapproachable thing that only the nerdiest of the nerds are able to understand.

## Ok Ok, I'm in, what exactly are we building?

We are going to build a compiler (basically a function which takes a string as input). The compiler compiles english like syntax into javascript. So if we:

|      Had to...     |      We would...      |
|--------------------|-----------------------|
| Declare a variable | `let the variable variableName be 12.` |

This may seem like nothing, but it is enough to show how a compiler works and its major parts. Edit: I \*will\* stop on this compiler after showing you the first part because I got an idea for another compiler

That's all for now, see you in the next part!
Webpack settings when upgrading Vue2 to Vue3.1 for Rails application
Tags: vue, rails, webpack
Published: 2021-06-05 13:19:07

This is the setting content that corresponds to `3` of the article below.

[vue-next/packages/vue-compat at master · vuejs/vue-next · GitHub](https://github.com/vuejs/vue-next/tree/master/packages/vue-compat#installation)

The content is based on the assumption that you are using the webpacker v5 system.
Also, at the time of writing the article, I am using the beta of Vue 3.1.0.

## Version

- rails: 6.1.3.2
- webpacker: 5.4.0
- vue: 3.1.0-beta.7
- @vue/compat: 3.1.0-beta.1
- vue-loader: 16.2.0

## Preparation

Besed on the content of [vue-next/packages/vue-compat at master · vuejs/vue-next · GitHub](https://github.com/vuejs/vue-next/tree/master/packages/vue-compat#installation), we will update `vue-loader` to `^16.0.0` and `vue`, `@vue/compat` to the `3.1` series.

Modify `package.json` as shown below and run `yarn install` or `npm install`.

```json
  "dependencies": {
    "vue": "^3.1.0-0",
    "@vue/compat": "^3.1.0-0",
    "vue-loader": "^16.0.0",
    ...
  },
```

## Modify webpack settings

Modify `config/webpack/loaders/vue.js` and `config/webpack /environment.js` as follows (if `config/webpack/loaders/vue.js` has not been created, create a new one).

config/webpack/loaders/vue.js
```js
module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader',
    options: {
      compilerOptions: {
        compatConfig: {
          MODE: 2,
        },
      },
    },
  }],
};
```

config/webpack/environment.js
```js
const { environment } = require('@rails/webpacker');
const { VueLoaderPlugin } = require('vue-loader');
const vue = require('./loaders/vue');

environment.config.merge({
  resolve: {
    alias: {
      vue: '@vue/compat',
    },
  },
});

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
environment.loaders.prepend('vue', vue);
module.exports = environment;
```

Sample commit: [Update vue to 3 1 by t0yohei · Pull Request #70 · t0yohei/rails-vue-app · GitHub](https://github.com/t0yohei/rails-vue-app/pull/70/commits/0290648cd0e6a72653c6d0593570e85af41e9168)

## Confirmation of operation

If the settings are correct, when you run `bin/webpack` or `bin/webpacker-dev-server`, you will get warnings and errors like the attached image.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cnc3t2aisw5v3zlzual.png)

## Next To Do

After changing the settings of the webpack, it will be a task to crush the warnings and errors that appear in the build.

For the subsequent work, refer to `4` and later below.
[vue-next/packages/vue-compat at master · vuejs/vue-next · GitHub](https://github.com/vuejs/vue-next/tree/master/packages/vue-compat#installation)

When all the work is completed successfully, the migration to Vue 3.1 is complete.
How do co-authors can sign commits, for vigilant-mode-enabled GitHub users?
Tags: question, github, gpg, help
Published: 2021-06-05 14:03:08

Since [re-writing commit histories](http://stackoverflow.com/questions/1491001/ddg#1491022) that are been public is not [only discouraged by the Git Book itself](https://git-scm.com/book/en/v2/Git-Tools-Rewriting-History), but also [disastrous for downstream (aka fork) maintainers](https://blog.prototyp.digital/avoiding-the-messy-git-history/) and even can [be an nightmare](https://medium.com/collaborne-engineering/git-branches-rewriting-history-and-avoiding-nightmares-part-1-b76f334f142c) since they need to rebase their work first, how do co-authors can safely sign their commits or do they need to do the **chaos management** regarding that to ensure that it's `Verified` not `Partially verified` when someone visits their?

This question assumes that at least one of the co-authors has Vigilant Mode enabled on their GitHub accounts and has at least one GPG key added into their account.
Add multi commands in Cypress
Tags: testing, cypress, automation, framework
Published: 2021-06-05 13:55:31

If you used Cypress before, you would know that it comes with its API for creating custom commands. When creating a new Cypress project, and in the folder structure, we can find the support folder. And inside this folder, we can see a file called commands.js.

If we want to add our custom command, we can use Cypress API as below:

![folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2v8c7i3us5e60edcatc3.png)

Writing all the commands in one file for a small project is fine, but it means that the commands file may contain more than 100 commands for a more extensive project! So we will need to find a better way to organise our commands.

If we open the index.js file inside the support folder, we can see that cypress imports the commands file at the top; this means that we can also create a different javascript file and add our commands and then import it in the index.js file.

![index folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tb4jxhlihi1wkj13k9i.png)

So let's create a new folder and call it commands inside the cypress folder, and inside it, we can create as many files as we want, let's say auth-commands.js, dashboard-commands.js, payment-commands.js
And inside these files, we add all the related commands.
 
![commands folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51upoia8joo7w1s0j2ia.png)

And the only thing left for us to do is to import these files into the index.js file.

![index folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4h5j31sz5e4z9xh8tpj.png)
Largest sum of sub-arrays using Kadane's algorithm
Tags: algorithms, beginners, datastructures, arrays
Published: 2021-06-05 13:50:44

##Sub-arrays
A sub-array is a contiguous part of an array that inherently maintains the order of elements. An array that is inside another array. For example, the sub-arrays of an array {1, 2, 3} are {1}, {2}, {3}, {1, 2}, {2, 3} and {1, 2, 3}.

##Kadane's algorithm
Kadane's algorithm is used to find the “Maximum sub-array sum” in any given array of integers. Let's consider an array ***arr*** with ***n*** values in it, then Kadane's algorithm can be applied as shown in the steps below,

* Initialize the result and max-so-far variables (***res*** and ***maxEnd***) by assigning first element of the array i.e., arr[0]
* Iterate through the elements of the array starting from index 1
* Override the value of ***maxEnd*** by the maximum value between ***maxEnd+arr[i]*** and ***arr[i]***
* Override the value of ***res*** by the maximum value between ***maxEnd*** and ***res*** 
* Return the result variable which will be the maximum sum of subarrays

Let arr = {-3, 8, -2, 4, -5, 6}, n = 6

![kadanes-algorithm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onb0vkg94exki4lipwpb.jpg)

##Code

```
#include <stdio.h>

int max(int a, int b) {
    if(a>b)
        return a;
    return b;
}

// T(n) = Θ(n)
// Aux space = Θ(1)

int maxSubSum(int arr[], int n)
{
    int res = arr[0], maxEnd = arr[0];
    
    for(int i=1; i<n; i++)
    {
        maxEnd = max(maxEnd+arr[i], arr[i]);
        res = max(maxEnd, res);
    }
    
    return res;
}

int main() {
	int arr[] = {-3, 8, -2, 4, -5, 6};
	int n = sizeof(arr)/sizeof(arr[0]);
	
	int res = maxSubSum(arr, n);
	printf("%d", res);
	
	return 0;
}
```

##Output
```
11
```

##Thanks for reading!
If you have any questions about the post feel free to leave a comment below.

Follow me on twitter: [@soorya_54](https://twitter.com/soorya_54)
When using WordPress on Amazon Lightsail, you should be careful about server corruption.
Tags: wordpress, aws
Published: 2021-06-05 12:46:29

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

[off.tokyo, the web media for high-tech lovers](https://off.tokyo/blog/when-using-wordpress-on-amazon-lightsail-you-should-be-careful-about-server-corruption/)

Amazon Lightsai has the ability to get WordPress up and running in an instant for about $3.5/month.

 

There are no cumbersome contracts, no admin screens, and no contracts because you can turn off the instance as soon as it is no longer needed.

 

It's very convenient and cheap, and I've used it quite a bit to set up multiple WordPress media.

 

I've been using Amazon Lightsail for a long time now, but I'm thinking that running WordPress on Amazon Lightsail is a bad idea if you're not careful about the risk of the server breaking.

 

I've been using Amazon Lightsail for a while now, and I've found it to be a great solution for my needs.

 

I'm not sure if this is a good idea, but I'm sure it's a good idea.

 

If you keep rebooting the instance over and over again, it will finally break and stop running.

 

Then you can't even connect to SSH, and you're out of luck.

 

I've only used Lollipop and X server so far, so I don't know much about other servers, but

 

I've only used Lollipop and X server so far, and I don't know much about the other servers, but they have their advantages and disadvantages: Lollipop is cheap but heavy, X server is high performance but expensive.

 

But since both servers did not have the disadvantage of dying and breaking and losing data, I underestimated the risk of such server breakage.

 

I've ruined one site in the past because of it.

 

After all, mazon lightsail is cheap, light, and easy to set up, and I'm so used to it that I can't be bothered to go with another service.

 

I think I'll continue to use it in the future if it doesn't break too much in normal use (I don't know), but

 

I'm not sure if I'll continue to use it in the future if it doesn't break too much, but I'm sure I will.

 

If your server breaks and you can't get your instance up, it's over.
How to use the tailwindcss/typography plugin
Tags: tailwindcss
Published: 2021-06-05 13:50:27

I recently came across the [tailwindcss-typography](https://github.com/tailwindlabs/tailwindcss-typography).
This plugin provides a beautiful set of `prose` classes which you can use to add styling to HTML that you have no control of (such as rendered HTML from Markdown).

This article assumes you have basic knowledge in TailwindCSS. If you are new to TailwindCSS you can have a look at their [installation guide](https://tailwindcss.com/docs/installation)
and here is a great course from [Scrimba](https://scrimba.com/learn/tailwind) that can help you learn the basics.

### 1. Install the tailwindcss/typography plugin

To install the plugin you can either use yarn or npm

```bash
npm install @tailwindcss/typography

#or

yarn add @tailwindcss/typography
```

### 2. Add the plugin to your tailwind config file

```js
// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require("@tailwindcss/typography")],
}
```

### Add prose class to your html

Start by adding the base `prose` class then followed by the size-modifiers for example  `prose-sm`,  `prose-lg`,  `prose-xl` and `prose-2xl`.
Without the base `prose` class it will not work.

```html
<article class="prose prose-lg">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Pellentesque nec lacued eu odio nec nisl varius placerat. 
    In dapibus a lacus vitae fringilla.
    </p>
    <p>
    Donec condimentum tellus augue, eu lacinia est facilisis eu.
    Suspent ipPris a, cursus augue. Sed vitae dictum diam, id interdum ex.
    </p>
    <p>
    Nunc in nunc sed urna congue facilisis. In ullamcorper,
    nunc eget convallis imperdiet, quam felis rhoncus leo, id rhoncus erat leo vel 
    </p>
</article>
```

And that’s pretty much it. You will now have styled content and not have to worry about styling each element individually.

Here is a live [demo](https://tailwindcss-typography.netlify.app/) of content that is styled using this plugin.

Thank you for reading ❤️
Networking Series - CIDR Block
Tags: aws, vpc, cidr, networking
Published: 2021-06-05 13:46:47

### Introduction

Before working in serverless technologies, most of the applications I worked on were hosted on-prem. I used to interact with the infrastructure team and the questions they ask were sometimes not understandable to the application developers. The talk about firewall, ip addresses, ssl, ftp, connect direct connections are too much to comprehend initially. With serverless applications development though the application developer need not have to know about these terminologies, it's good to understand what's behind the scenes. 

AWS opens the doors for the application developers to know about the networking configuration used by their application. Usually in an on-prem applications the networking services are managed by a different team and the developers are not aware of the configuration. The interaction typically happens where the network team share the snippets of the logs whenever an error occurred connecting to our application. But with more applications being developed on cloud services, developers can at least access the lower environment configurations (dev or staging) which is usually mimicked to production. Let us start the series by getting to know what is a CIDR Block.

### CIDR Block (Classless Inter-Domain Routing)

While creating VPC in AWS, the second step is to provide the IP CIDR block i.e the range of IP addresses to be allocated to this VPC. It is of the format 10.0.0.0/16 (IP address followed by / and a number). Most of us knew the IP address format but what does this number signify in CIDR Block. 

![CIDR Block Range](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnkw9e8t3gjt3obvglvf.png)

- CIDR is an industry standard.

- The number is the number of bits in an IP address that must match to be considered as part of the selected CIDR block.

- Each IP Segment i.e the number between the dots is of eight bits that makes the entire segment consisting of 32 bits.

- Let us take the ip address `10.0.0.0` and represent them in binary as `0000 1010. 0000 0000. 0000 0000. 0000 0000`. 

- Let us take the CIDR block notation as `10.0.0.0/16`. The number here mentions that any ip address that has the first 16 digits matched is part of this CIDR IP block. Since the first 16 bits has to remain unchanged, it leaves room for the rest of the 16 digits to take any value. Hence 2<sup>16</sup> `65536` ip addresses are available in this range.

### Additional Resources
https://www.colocationamerica.com/ip-calculator
Nice Clothes Improve Productivity
Tags: productivity
Published: 2021-06-05 13:44:20

Now this may seem weird, but it's actually true. In fact, as I'm writing this, I am conducting this experiment myself. I bought a nice Tuxedo Suit to work from home, and it really seems to be effecting my productivity levels. Of course, it's all todo with the Psychology of it on the mind, so let's see how that works.

I got this idea from reading a post about Elon Musk. It's one of the things he suggests to be hyper-productive. Wearing nice clothes makes you feel important. It makes you feel like your time is precious, hence you shouldn't waste it on useless stuff. Another reason is that nice clothes are usually quite stiff, meaning that psychologically, you feel less free in these clothes. So your brain doesn't argue with you as much when you're trying to get some work done.

Now I'm not saying everyone reading this should go out and buy a 250 Dollar Tuxedo just to try this out. It doesn't even have to be a Tuxedo. But the point is to wear nice clothes to try and make yourself want to do work. Hell, it can even be your own office clothes which you haven't used in months because of C̸͈̆Ő̸̡̪V̵̨̈́͌I̷̠͙̓̽D̸̺͈́-̴̖̝̽1̷̯͉̀̊9̵̙͕͋̓.

Now, just like everything in life, there should always be a *balance*. If you're going to be wearing nice clothes, don't wear them 24/7. Strictly keep these clothes for when you're working. Because if you wear them all the time, your brain will get used to these kinds of clothes, which will diminish the "work time" effect it had on you before. Also, don't get "too" prepared for work. Because if you do, you will be focusing only on not getting your clothes dirty and messed up, which will distract you from your real work.

I hope you guys liked this Article. This is the first part of a series, where I have a look at some Productivity Tips that Elon Musk recommends. See you in the next one. Bye 👋
1 good thing you can do this weekend for web dev
Published: 2021-06-05 12:51:31

I just posted my project on [Product Hunt](https://www.producthunt.com/posts/gluecodes-studio). It's a front-end studio for those developers who are hooked in build-time DOM diffing and awesome automation. If you like it, upvote my product :pray: as it's super important to get the early boost which will keep us higher on their listings so we're noticed.

Here is the product: [GlueCodes Studio](https://www.producthunt.com/posts/gluecodes-studio)
Updating product attributes in WooCommence is a painful experience, right?
Tags: wordpress, php
Published: 2021-06-05 12:47:54

In this section,let me share how to update the product attributes programmatically in wordpress.

Let's say we have a product attribute call "markup". We have to write like this in order to get the attribute correctly.

```php
$markup_value = get_post_meta($product->post_id, '_product_attributes',true)['markup']['value'];
```

In order to save the attribute again, quite tricky but still managable.

```php
$post_id = $product->post_id;
$product_attr = get_post_meta(post_id, '_product_attributes',true);//get the whole product attributes first

$product_attr['markup']['value'] = 50.75;//your desired attribute value

update_post_meta(post_id , '_product_attributes',$product_attr);
```

So, that's it. If you have a list of post id, and you  want to update the product attribute(in our case markup), that's how you are going to do it.
Plan of work
Published: 2021-06-05 12:39:52

| Phase   | Description    | Schedule    |
| --- |:------------------:| -----:|
| Create a dataset for training and testing |<ul><li>summary length > 2 hours</li><li>resolutions: from 240p to 1080p</li><li>train and test videos</li><li>> 500 scene changes</li></ul>|June 7 - June 14|
| Test current solutions | <ul><li>[Solution #1](https://github.com/rust-av/av-scenechange)</li><li>[Solution #2](https://github.com/xiph/rav1e/blob/master/src/scenechange/mod.rs)</li><li>do they make mistakes on the flashes?</li><li>adjust the parameters to increase the f score</li></ul>|June 7 - June 21|
| Analyze the dependency of the current solution from the video resolution | <ul><li>test on downscaled videos on different resolutions:<ul><li>240p, 360p, 480p, 720p, 1080p</li></ul> </li><li>measure precision, recall, f score and speed on them</li><li>make charts to analyze results</li></ul>|June 14 - June 28|
|Make adaptive threshold for the current solution|<ul><li>visualize results to analyze them</li><li>estimate the gain</li></ul>|June 14 - June 28|
| Make metric for flash detection| <ul><li>mark up a few videos</li><li>make flash detection metric based on histogram and mean intensity of the frame</li><li>measure precision, recall, f score and speed</li></ul>|July 10 - first evaluation|
|New metrics|<ul><li>make a list of different scenechange implementation</li><li>possible features<ul><li>motion vectors, edge detector, etc.</li><li>dividing the frame into blocks and calculating metrics on them</li><li>adaptive resolution scaling</li></ul></li><li>estimate gain and speed performance</li></ul>|July 10 - early August|
|Integration|Integrate the final solution into the product|until mid-August|
How I made a Battleship Terminal Game using python 3 - Final Project
Tags: python, github, bash
Published: 2021-06-05 12:27:19

As part of my final project for the computer science path in codecademy, I made a single player battleship game in the terminal. I thought it would be interesting to make and would be a challenge as I was entirely sure of how I would accomplish this.  The program is written in python 3. 

It works by having the 10x10 grid as a dictionary in python 3 with the key being the grid letter and number configuration and the value being "A" by default. I changed the value when I set the battleship in the grid to their own letter which allows me to know if they have been attacked and when it is attacked and it has a battleship on it the value changes to "X" but if it doesn't the value changes to "O".

By using a for loop I went through the dictionaries keys and checked to see if the input the player set was the same as the key and that the value was equal to letter I had assigned to each battleship and if so it would output "KaBoom" if it was successful.

One of the issues I had while programming the game was how I was going to know if a player had successfully sunk a battleship. What I came up with was that when I set up the battleships on the main grid, I would copy in the key:value pairs to a separate dictionary which would allow me to remove them when successfully hit and then if the dictionary was empty the battleship has been sunk by the player.

I feel having been through the process of making this game that I have gained a lot of confidence in coding using python 3 and has helped me to get a better understanding of how to code and I am looking forward to coding a different project in the future.

You can view the game in action here as GIF: https://imgur.com/a/H8L1gdF

If you are interested in trying the game you can find it here: 
{% github Skelly92/Battleship_Terminal no-readme %}