teleren/devto huggingface dataset:
June 15th Side Project Check-in
Tags: watercooler, discuss, checkin, sideprojects
Published: 2020-06-15 13:35:51

---
title: June 15th Side Project Check-in
published: true
description: Come share your side projects!
tags: watercooler, discuss, checkin, sideprojects
//cover_image: https://direct_url_to_image.jpg
series: Side-project Checkin
---
# Morning/Afternoon dev.to travellers!
Hope you all are doing well and staying healthy. How was you week? Any progress to share or cool ideas your looking to start on? Let's chat below. 😁
Events immutability problem
Tags: eventsourcing, immutability
Published: 2020-06-15 13:34:14

Hope, you all know the event sourcing. And one of its core principles, that events should be never changed or deleted. But what if you really need it ?
What problem do we have ? For example, you have a <b>User aggregate</b>. And this aggregate should receive <b>UserCreated</b> event.

```javascript
{ type : "UserCreated", "version" : 1, "id" : 123, "name" : "John", "metadata" : { "city" : "Chicago" } }
```

Then this events are applied on read models like this 

```csharp
public class UserReadModel : IApply<UserCreated>
{
    public int Id { get; private set; }
    public string Name { get; private set; }

    public void Apply(IDomainEvent<UserCreated> @event)
    {
        Id = @event.Id;
        Name = @event.Name;
    }
}
```

And it's working for a year or something. But then manager comes and he says that : "We need to show user city on our UI!". And you don't really know what to do, because your read models are dependent on your events and, in theory, you should support replaying all events from your event store to restore the state of your read models.

If you can't update and delete your events, you can tell your application, that if the v2 of UserCreated event appears during replaying events it should work with new field, but if the v1 appears, you should emit v2 event with new fields.

And this thing is called <b>event upgrader</b>.

```csharp
public class UserCreatedV1ToV2EventUpgrader
{
        public IDomainEvent<UserCreated> Upgrade(IDomainEvent<UserCreatedV1> v1Event) 
=> new DomainEvent<UserCreated>(new UserCreated { Id = v1Event.Id, Name = v1Event.Name, City = v1Event.Metadata["City"] });
}
```

Now, event sourcing becomes a little less complicated <del>(no)</del>
Rename your master branch to something better
Tags: git, github, azurerepos, azuredevops
Published: 2020-06-15 13:36:35

---
title: Rename your master branch to something better
published: true
date: 2020-06-15 13:32:42 UTC
tags: git,github,azurerepos,azuredevops
canonical_url: https://jessehouwing.net/git-rename-your-master-branch-to-something-better/
---

 ![Rename your master branch to something better](https://jessehouwing.net/content/images/2020/06/source.gif)

I just went through my GitHub repositories to rid them of the `master` branches. It was a relatively simple process that took me about an hour or 2 for all my repositories.

Scott Hanselman explains the base process. It's a simple set of steps to create a new branch with a new name (I chose `main`), switching the default branch and deleting the old `master`.

[Easily rename your Git default branch from master to main](https://www.hanselman.com/blog/EasilyRenameYourGitDefaultBranchFromMasterToMain.aspx)

Some people seem to object to this. Arguing that `master` is not from `master/slave`, but from the concept of a 'manufacturing master' or 'master copy'. This shows it isn't the case:

[Re: Replacing “master” reference in git branch names (was Re:Proposal:](https://mail.gnome.org/archives/desktop-devel-list/2019-May/msg00066.html)

I bit the bullet, but ran into a few extra things to repair in my Azure Pipelines. You may as well if you have Continuous Integration and/or continuous Deployment enabled.

_Default branch in Azure Pipeline builds_

![Rename your master branch to something better](https://jessehouwing.net/content/images/2020/06/image.png)

_Trigger branch filters_

![Rename your master branch to something better](https://jessehouwing.net/content/images/2020/06/image-1.png)

_Trigger branch in YAML files_

![Rename your master branch to something better](https://jessehouwing.net/content/images/2020/06/image-2.png)

_Custom conditions_

![Rename your master branch to something better](https://jessehouwing.net/content/images/2020/06/image-3.png)

_Artifact branch triggers_

![Rename your master branch to something better](https://jessehouwing.net/content/images/2020/06/image-4.png)

_Artifact branch filters_

![Rename your master branch to something better](https://jessehouwing.net/content/images/2020/06/image-5.png)

_Remove Branch Protection_

![Rename your master branch to something better](https://jessehouwing.net/content/images/2020/06/image-6.png)

Knowing where to look is half the work.
GitUI - v0.7
Tags: git, rust, terminal, productivity
Published: 2020-06-15 13:31:43

**GitUI** - the *fastest* terminal tool for git written in rust

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gha7jwfxoifh82jc3rsc.gif)

In [v0.7](https://github.com/extrawurst/gitui/releases/tag/v0.7.0) you can commit-amend, cursor-support for the commit message and open detail info on stashes with ⚡️speed: https://github.com/extrawurst/gitui/releases/tag/v0.7.0 

Contributors: 
* [@alistaircarscadden](https://github.com/alistaircarscadden)
* [@jonstodle](https://github.com/jonstodle)

Please check it out and let me know what you think❤️
I work with Containers, Automation and Cloud Stacks for up to 10 years now, ask me anything
Tags: container, cloud, automation, ama
Published: 2020-06-15 13:30:30

While I continue to work on about 5 posts in parallel, I thought this would be fun to do. 

While it normally only works with celebrities, in the worst case noone answers and I can shamefully delete this post. Then I'd have to wait for the day I become famous for crashing some thought-to-be-indestructible software by pure accident. 

I am by no means an Expert in these fields (they are huuuuge), but I have been around the block a while. I'm the Kid noone talks to, because I take the whole automation thing too far and put anything that sounds fun into containers to deploy it on azure or my k8s clusters somewhere. 

So if you got fun questions, or need something containerized/automated feel free to hammer away at your keyboard, I take requests/challenges :)
Another random string generator
Tags: deno, typescript, javascript
Published: 2020-06-15 13:29:16

So here we are again generating random strings. I was doing this for a Google Apps Script project where I wanted random names for temporary Google Docs files. I wanted something short, pithy and ... well ... random. Obviously, it's not cryptographically random, but that's not the goal.

The following code was written for Deno, so it's got TypeScript markup in it. Also, I do all my GAS projects in TypeScript, with [ts2gas](https://github.com/grant/ts2gas) in the workflow to convert to JavaScript before uploading to Google.

The script works by generating an Array with a parameter-controlled `n` slots in it. This gets filled with zero and then `.map` comes in to map each element to the base36 representation of a random number between 0 and 35. All that then gets `.join`-ed into a single `n` length string.

```typescript
const randomChars = (n: number) =>
  Array(n).fill(0).map((elt: number) => {
    return Math.ceil(Math.random() * 35).toString(36);
  }).join("");

console.log(randomChars(Deno.args.length ? parseInt(Deno.args[0], 10) : 40));
```
With the above called `randomChars.ts` one may invoke with
>deno run randomChars.ts

and get something like this:
```
b3xavd4po2ryfvkyrkgi7j9bg35cdhhnq27fhv59
```
or invoke with 
>deno run randomChars.ts 17

and get something like that:
```
hdvyeb1qo47ix3wcs
```
Doubtless there are better ways of doing this, but it's working and it was cool to be able to use Deno to do it.
Debug Go with VIM
Tags: go, vim, debugger
Published: 2020-06-15 13:21:02

VIM is a wonderful text editor. With the high configurability, it's possible to use VIM as a debugger. This post specifically focuses on Go lang debugging. To debug Go, [vim-go](https://github.com/fatih/vim-go) plugin should be installed. vim-go provides many features such as go fmt on save, addition of go imports on save, go to definition, go to references and a debugger.

Install [vim-go](https://github.com/fatih/vim-go#install)

Following video walks through vim-go debugger, specifically how to invoke the debugger, set breakpoints, and stepping to next breakpoint. ✌️

{% youtube ZFezUr_vgTI %}
FastJsonparser, Fastest JSON parser for Ruby
Tags: rails, jsonparser, fast, ruby
Published: 2020-08-06 12:39:16

---
title: FastJsonparser, Fastest JSON parser for Ruby
published: true
date: 2020-06-15 13:17:59 UTC
tags: rubyonrails,jsonparser,fast,ruby
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*crHTNrtSc0PJ24CZHkpxNw.png)

[FastJsonparser](https://github.com/anilmaurya/fast_jsonparser) is ruby wrapper for [simdjson](https://simdjson.org/) which is written in c++.

> JSON is de facto standard for exchanging data between web server and browser.

If your application is parsing large JSON data then you must consider optimising it for better performance.

I came across [Simdjson](https://simdjson.org/) which claims to parse gigabytes of JSON per second, It also claims to be over 2.5x faster than other production-grade JSON parsers. I thought this is fantastic why I am not using it.

I looked for the ways to use it and came across [simdjson\_ruby](https://github.com/saka1/simdjson_ruby) gem . It is wrapper for simdjson c++ library but unfortunately it was not working.

![](https://cdn-images-1.medium.com/max/888/1*RKp5ys4aAkoOSsEUcXH2aA.png)

I started fixing it but got stuck in configurations then I thought why not create a new gem and import all code which I need from this gem, thus FastJsonparser was born.

To verify simdjson claim that it is really fast, I did benchmarking with existing gem [Oj](https://github.com/ohler55/oj) which claims to be fastest JSON parser for Ruby

### Benchmark results:

1. Parsing 1.2 MB JSON file

![](https://cdn-images-1.medium.com/max/1024/1*qPSxGzrutcjmAVZi37XuxQ.png)

Check benchmark reference [here](https://github.com/anilmaurya/fast_jsonparser/blob/master/benchmark/file_benchmark.rb)

2. Parsing local JSON

![](https://cdn-images-1.medium.com/max/1024/1*5pMZe7YSKSvX-QvupaizcA.png)

Check benchmark reference [here](https://github.com/anilmaurya/fast_jsonparser/blob/master/benchmark/json_benchmark.rb)

**Clearly FastJsonparser outperforms both Oj and ruby’s built in JSON parser**

### How to Use FastJsonparser

![](https://cdn-images-1.medium.com/max/1024/1*3H2GpwgrizKXbTrNiU1C3w.png)

Github: [https://github.com/anilmaurya/fast\_jsonparser](https://github.com/anilmaurya/fast_jsonparser)

Let’s use it in your Ruby / Ruby on Rails projects and let me know how it performs.

P.S — Thank you [https://github.com/saka1](https://github.com/saka1) for initial code.
My #lockdown at a glance
Tags: aws, azure, career
Published: 2020-06-15 12:58:18

Hey guys, hope you are all doing well. With this pandemic, I had some time to spare.
So here is how I utilized my time during #lockdown, things I achieved in the past 2 months:

**April:**

- AWS Solutions Architect Certified
- Oracle Cloud Foundations Certification
- Joined and contributed the sub-reddit r/awscertifications
- Consistently write blog posts on DEV.to

**May**:

- Started Preparing for AWS Certified Developer Associate
- Got the 4 Week Streak Badge on dev.to
- Published my notes for all the cloud exams that I am preparing for : [https://rishabkumar7.github.io/CloudNotes/](https://rishabkumar7.github.io/CloudNotes/)

**June**:

- AWS Certified Developer Associate
- Started preparing for Azure Fundamentals (AZ-900), thanks to @johanrin for the motivation!


**Bonus**:
Received 8 Week streak badge🎉

I don't think I did a lot but I am quite happy with these achievements.
Feel free to share you wins, all wins count -- big or small 💪
GitHub to replace racially-loaded terms (master, slave, blacklist and whitelist)
Tags: github, discuss, news
Published: 2020-06-15 12:58:14

Amidst all the protests around the globe, the tech community is also engaging in some ways. GitHub has announced that they'll replace racially-loaded terms.

This includes dropping terms like "master" and "slave" for alternatives like "main/default/primary" and "secondary;" but also terms like "blacklist" and "whitelist" for "allow list" and "deny/exclude list."

[(read full article here)](https://www.zdnet.com/article/github-to-replace-master-with-alternative-term-to-avoid-slavery-references/)

What do you think about this? What other terms do you think should also be changed?
My eyes! or How to [get, avoid] Forced Synchronous Layouts

Tags: javascript, webdev, perfomance
Published: 2020-06-15 12:51:46

Manipulating the DOM in JavaScript allows us to do very interesting and impressive stuffs. This is a powerful ability, but, as you know, a powerful ability is often a double-edged sword. On the one hand we can have “Wow! Cosmically 🤩 cool!”. But on the other hand we can have “What's with the jank 🤢 on this page?!”

> ####jank
> 1. choppy performance
> 2. discontinuos, surprising experience

Rash manipulating the DOM can lead to performance problems. One of them is `layout thrashing` or `Forced Synchronous Layouts`.

Each time we change the top, left, width, height and other `geometric` properties of the DOM element, the current layout becomes invalid and needs to be updated.

Typically, an update (or reflow) occurs at the end of the current frame. But we can force this process. If we ask for any geometric data, the browser will have to immediately update the layout.

There is one excellent example in the [Google Web Fundamentals repository](https://github.com/googlesamples/web-fundamentals). Visit this [page](https://googlesamples.github.io/web-fundamentals/tools/chrome-devtools/rendering-tools/forcedsync.html), follow all instructions and then analyze the performance record. You will see many purple rectangles labeled “Layout” and marked with a red triangle in the upper right corner. This mark is a warning that executed code leads to a forced reflow. And this significantly reduces FPS (the number of frames that the browser can draw in one second). In this case, we have much less than 60 frames per second, which is optimal for smooth animation.

Let's look at the code to understand how we can get the same effect.
```javascript
for (var m = 0; m < movers.length; m++) {
   movers[m].style.left = ((Math.sin(movers[m].offsetTop + timestamp / 1000) + 1) * 500) + 'px';
   // movers[m].style.left = ((Math.sin(m + timestamp/1000)+1) * 500) + 'px';
}
```
At each iteration, we ask the `offsetTop` property of the `movers[m]` element. Due to the fact that the DOM has been changed and the layout is invalid, the browser needs to recalculate the layout in order to return the current position of the element. At each iteration! Think about it.

An another example.
```javascript
const el = document.getElementById(‘element’);
const container = document.getElementById(‘container’);

if (el.offsetLeft > container.offsetWidth) {
  el.style.left = 0;
}

if (el.offsetTop > container.offsetHeight) {
  el.style.top = 0;
}
```
First, we request `offsetWidth` and get the value from the current layout. Then we change the `left` property and invalidate the layout. And we get Forced Synchronous Layouts when we request the `offsetHeight` property!

But it will be much better to get the width and height of the container in the first step, and then perform a comparison and other things.

### Useful links

[What forces layout / reflow by Paul Irish](https://gist.github.com/paulirish/5d52fb081b3570c81e3a)
[Web performance for the curious by Ilya Grigorik](https://www.igvita.com/slides/2012/web-performance-for-the-curious/#1)
Top Alternatives to Google Adsense (ideal for small publishers)
Tags: googleads, google
Published: 2020-06-15 15:51:23

---
title: Top Alternatives to Google Adsense (ideal for small publishers)
published: true
date: 2020-06-15 12:49:55 UTC
tags: googleAds, Google
canonical_url: https://www.ma-no.org/en/web-marketing-seo-sem/top-alternatives-to-google-adsense-ideal-for-small-publishers
---

It's a fact: Google dominates the Internet and is the undisputed leader in the search engine market in such a way that it is frankly difficult to avoid the Mountain View giant, not only from a SEO perspective in terms of where the traffic comes from, but also in terms of the revenue options for advertising publishers. With AdSense, the most popular and well-known advertising platform through which to offer advertising inventory on web pages, Google also remains at the forefront of the cost-per-click business. However, there is life beyond Google AdSense. It is very common that, due to strict… !



Read on [📖!](https://www.ma-no.org/en/web-marketing-seo-sem/top-alternatives-to-google-adsense-ideal-for-small-publishers)
Use infinite animate create fancy effect
Tags: css, tricks, animation
Published: 2020-06-15 12:33:41

---
title: Use infinite animate create fancy effect
published: true
description: infinite animate in css
tags: CSS,Tricks,Animation
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9b384tzq70bv2pxmx2m8.jpg)

I have feature should show stocks indeics auto infinite scroll.  first i want to use javascript to controll it. but other developer told me we can use CSS animation create this，it's cool let's me show you code below.

```vue
<template>
  <div class="marquee">
    <div class="marquee" :style="{ width: `${width}px`, height: `${height}px` }">
      <div class="marquee--inner">
        <div class="group">
          <slot />
        </div>
        <div class="group">
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PropTypes from 'vprop-type'
export default {
  name: 'Marquess',
  props: {
    width: PropTypes.integer,
    height: PropTypes.integer.def(20),
    itemKlass: PropTypes.string.def('item'),
    speed: PropTypes.integer.def(8) // 5s
  }
}
</script>

<style scoped lang="scss">
@import '_variable.scss';
.lb-marquee {
  overflow: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  .marquee {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
  }
  .marquee--inner {
    display: block;
    width: 200%;
    margin: $gutter-sm 0;
    position: absolute;
    // keywords
    animation: marquee 40s linear infinite; 
  }

  .marquee--inner:hover {
    animation-play-state: paused;
  }

  .group {
    float: left;
    width: 50%;
    .item {
      width: 100px;
      display: inline-block;
      float: left;
    }
  }

  @keyframes marquee {
    0% {
      left: 0;
    }
    // here is keywords
    100% {
      left: -100%;
    }
  }
}
</style>

```

That all you can use the Vue component like this:

```vue
<Marquess :width="210 * 8" :height="140">
  <div v-for="(item, index) in  items" :key="item.id" :index="index" class="item" :style="{ width: '210px' }">
    ......
  </div>
</Marquess>
```

I have videos to show what the component is [demo](http://public.mixbo.cn/screen-capture.webm)

Hope it can help you :)
What is a CIDR
Tags: cidr, networking
Published: 2020-06-15 11:37:17

---
title:  What is a CIDR
published : true
description : 
tags: #cidr #networking
layout: post
categories: #cidr #networking
---

The Wikipedia link is here [Classless Inter-domain Routing](https://en.wikipedia.org/wiki/Classless_Inter-Domain_Routing)

And here is the basic information you need to know.

A CIDR identifies a machine connected to a network.

An example CIDR for IPV4 address looks like this `192.168.100.14/24`.

The numbers `192`, `168`, `100`, `14` are four octets. An octet represents `8` bits. We use four octets, so we are using `32` bits to represent the machine. 

A bit can have two possibilities either `0` or `1`. So, an octet can have 256 (2 ** 8) values, starting from 0 and ending with 255, which means 4 octets can represent 4,294,967,296 possibilities (2 ** 32).

But, the number after the `/` puts a limit on this.

Before, I explain how the limit is applied, I'll have to explain what number `24` means. The number `24` could also have been represented as 4 octets. If we did, it would look like `255.255.255.0`. The number `24` is a compact way of representing these 4 octets. Are you wondering how these are equivalent? The value `255` when represented by a an octet (8 bits) looks like this `11111111`. So `255.255.255.0` would be `11111111.11111111.11111111.00000000`. I put `.` in between for readability. As you can see, this big number has `24` leading bits set to `1`. That's the link between the two representations.

This number is telling us that while using the address `192.168.100.14`, don't use the first 24 bits or the first 3 octets. That is, `192.168.100` are off limits. That leaves us with only the last octet, so only 256 possible values :( ! Imagine if this number was `31`, that leaves only `1` bit or two possibilities. 

The 3 octets that we do not use, along with a a `0` for the fourth octet `192.168.100.0` represents something called a `routing prefix`. If you represent this routing prefix in the form `255.255.255.0`, it's called the `subnet mask` and logically represents the same thing.
Fixing Rust Dependencies Vulnerabilities
Tags: rust, tutorial, beginners, programming
Published: 2020-06-15 12:07:43

Rust is a new fun programming language trying to achieve the trifecta of security, stability and speed.     

As developer we know its a pain in the ass of staying up to date with the latest dependency versions.


## Dependency Vulnerabilities   
Since the evolution of rust is moving forward and more eyes are throw at it and the security community in rust is becoming bigger and bigger, more and more security problems are being addressed and fixed.   
Even google's security fuzzing project "OSS-Fuzz", have found several thousand of vulnerabilities in a large chunk of opensource software is now supporting Rust.    
Source: 
https://google.github.io/oss-fuzz/

Luckily thanks to an active community more and more security vulnerabilities are being reported so we need to keep our crates 
versions up to date.

If you are running your own gitlab instance you can easily do something cool like a ci runner that validates each push request and checks if your Cargo.toml file is okey.  
A nice tutorial about how to do this with Jenkins is posted here:
https://blog.firosolutions.com/2019/07/firo-sec-rust-with-jenkins/

A small group in the rust community has found a rust security advisory called https://rustsec.org/ where anyone can report security vulnerabilities found in public dependecies/crates. 


## Scan your Cargo.toml file    
I like to use this site called https://rust.firosolutions.com  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8wkd8n4jb2xnmlkandaf.png)


Simply just paste in your Cargo.toml file or link to it and the site will give you feedback on what is out of date and which dependencies contains vulnerabilities.  
So that you can easily just update the versions in you Cargo.toml file.

You can even upload your Cargo.toml file to like a pasting service or similar and just tell the site to scan it with their api:
```shell
curl -H "Accept: application/json" -H "Content-type: application/json" -X POST -d '{"urllink":"https://raw.githubusercontent.com/FiroSolutions/vuln_rust/master/Cargo.toml"}' https://rust.firosolutions.com/apiadd
```

I like rust.firosolutions.com because you can also import your Cargo.toml file and receive email notifications when new versions get's released so you do not need to worry about staying out of date!

### External links:
https://rust.firosolutions.com
https://blog.firosolutions.com