teleren/devto huggingface dataset:
Day-1: Understanding Base64
Tags: cybersecurity, infosec, blogaday, security
Published: 2020-06-17 15:13:10

Same as other students who want to become software engineer or full stack developer I decided to start my journey in website hacking/pentesting, I'll be posting everyday what I learnt that particular day! The motive of doing this is simple which is to share knowledge. Maybe my daily blogging may help people who want to do the same as me but donno where to start with and also in the other way this will help me to keep tracking of my learnings!

About me: I'm Fenil Shah(18), I'm a security enthusiast as well as a Mozillian. Currently pursuing Bachelor of Computer Application (Second Year).

----------------------------------------------------------------
**Day-1:** Before moving on to different types of vulnerability I am starting with concepts of website or say how the internet works or types of encryptions and tokens used! 

Today I read a blog of Vickie Li in which she explains what base64 encoding is, how to identify the base64 string, how does base64 work, decoding it and other base64 implementations!

Base64 is a binary to ASCII encoding scheme. The pilot use case of base64 is to transmit data across different machines.

```
This is how base64 encoded string looks like,
eg: SGVsbG8gZGV2enohCkhvcGUgeW91J2xsIGFyZSBkb2luZyB3ZWxsIQ==

- Upper case alphabet characters A-Z.
- Lower case alphabet characters a-z.
- Number characters 0–9.
- Characters + and /.
- The = character is used for padding.
```
Each Base64 digit represents exactly 6 bits of data. The = padding character is added so that the last encoded block will have four base64 characters. 

**What is it used for?**

- Data transmission
- File embedding
- Data hashing
- Cryptography
- Data obfuscation


**How does base64 work?**

Base64 encoding converts every three bytes of data into four base64 characters. For more to understand in a practical way, I would suggest to have a look at this video on [YouTube](https://www.youtube.com/watch?v=aUdKd0IFl34). 

---------------------------------------------------------------
**Resources**: https://medium.com/swlh/powering-the-internet-with-base64-d823ec5df747 (You need premium subs to read this blog).
Encoding: You can encode any base64 string [here](https://www.base64encode.org)
Decoding: You can Decode any base64 string [here](https://www.base64decode.org)
Another Tool for Encoding and Decoding: https://url-decode.com/tool/base64-decode

Got doubts? Contact me on [Twitter](https://twitter.com/FenilShah1616). 
Feedbacks are welcomed, do comment it down below! :)
Lazy Loading: A Performance Journey
Tags: webperf, performance, react, javascript
Published: 2020-06-17 15:09:21

Last September I gave a talk at the ASOS head offices for the React London Meetup where I discussed some lazy loading strategies for performance gains within React applications.

Given I've just started blogging, I thought I would re-post here! :smile:

{% youtube 3FhcYQEnb_I %}

My talk on performance starts at 1:55 though I recommend watching through the other interesting talks as well!

---

What are you using to improve performance in your projects? Drop your ideas and suggestions in the comments below!
Build A Personal Knowledge Store With Topic Modeling In Contextualize
Published: 2020-06-17 15:07:39

<p>Our thought patterns are rarely linear or hierarchical, instead following threads of related topics in unpredictable directions. Topic modeling is an approach to knowledge management which allows for forming a graph of associations to make capturing and organizing your thoughts more natural. In this episode Brett Kromkamp shares his work on the Contextualize project and how you can use it for building your own topic models. He explains why he wrote a new topic modeling engine, how it is architected, and how it compares to other systems for organizing information. Once you are done listening you can take Contextualize for a test run for free with his hosted instance.</p><p><a href='https://www.pythonpodcast.com/contextualize-topic-modeling-episode-267/'>Listen Now!</a></p>
A private conversation
Tags: remote, communication, xp, goodpractices
Published: 2020-06-17 15:00:38

I have the bad habits to share everything with my team, expose my problems, ideas, advices anything through a public channel whatever tool we have chosen. However, I can understand that for some people, shy people, it could be a bit hard so I do my best when someone initiates a conversation in a private channel with me and take any excuse to move the conversation to the public channel. That is fine and is part of the process to build a team. What I wasn't expecting was that making all this information public could be overwhelming or even annoying for some people, usually people that hold high positions in the organisation.

I was thinking about that, about the reasons why it is so frustrating for these guys and the reason that it is gaining more weight is that they prefer to hide the dirty laundry. The motivations could be multiple but, in my opinion, it is an attempt to hide their own incompetence, if they are not able to fix the problems that arise in these conversations they choose to swipe them under the carpet.

Privacy is good, I am a big defender and a practitioner but when it comes to building a team it is really bad. Communication is key, in a remote team even more important and to hide information leads to misinformed people, and misinformed people usually make errors. I am not going to boring you with a long list of mistakes my team and I are doing all the time thanks to following strongly this bad practice but I am sure you know what kind of errors I am talking about.

The path to building a team is painful and frustrating and sometimes fruitless but it is worthy, so if you are in my skin right now, I strongly encourage for you to continue doing what you are doing. I believe it is a big improvement and remove some waste on the way but, don't fall into the same pits you are trying to fix, to give an example is a great mechanism to settle down a new practice, again communication is key, so be open with your team and all the people affected by this change, explain why you think it is important, listen to them and please share with us how is it going.
How to use UUID in Laravel
Published: 2020-06-17 14:57:18

As we all know, Laravel provided `Str` helper to produce a UUIDv4. However, UUID is not the default primary key they use in their Eloquent. We must implement it ourselves.

In this article, I will share how use that helper to generate ID (primary key) in Eloquent automatically.

> FYI, I used [Laravel 6.x](https://laravel.com/docs/6.x) for this example. Maybe, you have to adjust some code, if you have different version.
> I assume you have installed Laravel without a single table created.

Here are the simple steps:
1. Change the automatic increment primary key in the table to UUID.
2. Disable auto increment, change the table's primary key to String in Eloquent.
3. Use helper to generate UUID in Eloquent automatically.

### Change the automatic increment primary key in the table to UUID

Let's take default User model as example.

{% gist https://gist.github.com/husenisme/ad6576b3d93ab9027ac363d7d00d8cd1 file=default_users_table_migation.php %}

The migration above will create `users` table with auto increment big integer id as primary key. We can change the migration to something like this.

{% gist https://gist.github.com/husenisme/ad6576b3d93ab9027ac363d7d00d8cd1 file=uuid_users_table_migation.php %}

> If your table has been filled with some data, you must change the primary key by creating a new migration. Delete the primary key, and change the id type column to UUID.

### Disable auto increment, and change the table's primary key to String in Eloquent

This is default `User` table.

{% gist https://gist.github.com/husenisme/ad6576b3d93ab9027ac363d7d00d8cd1 file=User.php %}

We have to override `getIncrementing()` and `getKeyType()` method from system Model. 

{% gist https://gist.github.com/husenisme/ad6576b3d93ab9027ac363d7d00d8cd1 file=UserStringID.php %}

Actually, you can override this using the property. But, I prefer to use the methode. :)

### Use helper to generate UUID in Eloquent automatically

And finally, add this to boot method of the Model.

{% gist https://gist.github.com/husenisme/ad6576b3d93ab9027ac363d7d00d8cd1 file=UserUUID.php %}

At this point, UUID will automatically be filled. But, this only applies to ordinary Model. If you have a custom Pivot model, you must change it to be like this.

{% gist https://gist.github.com/husenisme/ad6576b3d93ab9027ac363d7d00d8cd1 file=RoleUser.php %}

## Bonus

Some of you might not want to bothered with the manual method above. So, I have provided a faster way.
This is the package that I made. You can read the documentation about how to use it.

{% github datakrama/eloquid no-readme %}
GSAP Animations in Angular - Apply directive to html
Tags: tutorial, angular, typescript, greensock
Published: 2020-06-17 14:53:36

# Let's apply the directive to our HTML elements!

Now we can apply the directive to our HTMLElements. First of all we need to declare the ***FadeInDirective*** inside the **AppModule**:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {FadeInAnimationDirective} from './directives/gsap/fade-in-animation.directive';

@NgModule({
  declarations: [
    AppComponent,
    FadeInAnimationDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

And in your *app.component.html* add this HTML:

```html
<p
  fadeInAnimation
  [duration]="1"
  [delay]="1"
>
  That's a cool effect, or not?
</p>
```

We are creating a ***paragraph*** animated with a fadeIn animation using our directive, with a duration of *1 second* and a delay of *1 second* too! This should be the result:

![FadeInAnimation example](https://dev-to-uploads.s3.amazonaws.com/i/d4x1hp0mh5wg377kpdlx.gif)

As you can see, the animation is working! You can also combine different animations using different delays:

```html
<p
  fadeInAnimation
  [duration]="1"
  [delay]="1"
>
  That's a cool effect, or not?
</p>
<p
  fadeInAnimation
  [duration]="1"
  [delay]="2"
>
  This too, but a little bit delayed
</p>
```

![FadeInAnimation example 2](https://dev-to-uploads.s3.amazonaws.com/i/o456atk8i0cmrrt5p1z9.gif)
GSAP Animations in Angular - Getting Started
Tags: tutorial, angular, typescript, greensock
Published: 2020-06-17 14:53:14

# What is GSAP and what will we learn in this tutorial

***Greensock Animation API*** [GSAP](https://greensock.com/) is an animation library written in JavaScript. It works with *ES6 and above* javascript environments, and lets you create animations without struggles. It's the most used animation library in the world, and for specific reasons, it is:

1. Performant
2. Easy to use
3. Easy to understand
4. Handle SVG animations seamlessly

In this tutorial series we will learn how to use GSAP in Angular, using attribute and structural directives.

This is what we will create:

{% stackblitz angular-gsap-directives %}

> NOTE: This tutorial will cover only a 1% of GSAP functionalities, for more visit the library [website](https://greensock.com/).

## Prerequisites

1. Angular base knowledge
2. npm basic knowledge
3. GSAP basic knowledge
4. Angular and Node installed

## Part 1. Install GSAP

Create a new angular app with the following command: `ng new myApp`, choose the name you want for the app, angular routing and SCSS as the main style preprocessor (or what you prefer).

Installing GSAP in Angular is pretty simple using **npm**, from the root of your angular app type `npm install --save gsap @types/gsap`.

If the installations are successful you will get a message in the terminal as follow:

![Installation successful](https://dev-to-uploads.s3.amazonaws.com/i/1qjlmsdlkm80e3us8ekt.png)

This will install GSAP and its types as a dependency of your project.

> Note: you could get different packages version, these are the latest versions nowadays.

In the next episode we will create the core directive and our first animation!

## Thanks to

* [clideo.com](https://clideo.com/) - an amazing tool to edit videos online (you can also make memes 😎)
* [onlineconverter.com](https://www.onlineconverter.com/) - an online tool to convert video (and other files)
* [TabNine](https://www.tabnine.com/) - a plugin for a lot of IDEs which uses deep learning to perform code completion - see the article [here](https://dev.to/nicolalc/tabnine-put-your-coding-speed-to-the-next-level-4e6a)
Loading Error in PhoneGap desktop app
Tags: phonegap, mobileapp, hybrid
Published: 2020-06-17 14:53:09

---
title: Loading Error in PhoneGap desktop app
published: true
description: error in phonegap desktop not running
tags: #phonegap, #mobileapp, #hybrid
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1d0hth8wpg0u2zcuiouz.jpg)
 
#step1 
After installing #Phonegap desktop app
Navigate to this folder address *C:\Program Files (x86)\Adobe\PhoneGap\PhoneGap Desktop\resources\app.asar.unpacked\bin* and run *postinstall*. You will get an *errors* of *npm ERR! node v6.3.1, npm ERR! npm v3.10.3, npm ERR! code EMISSINGARG*

##Step2 
Download the node v6
-Click on the following node v6 link[https://www.youtube.com/redirect?redir_token=fxkeAmGR__l6MbOpJAdurx1avgF8MTU5MzA1Mzk4NEAxNTkyOTY3NTg0&q=http%3A%2F%2Fgestyy.com%2Fe0nU6U&event=video_description&v=j8PWNSc-FI4] to download the __"node-v6.17.1-win-x86"__ file.
- Extract the __"node-v6.17.1-win-x86"__ file
- Navigate to __"node_modules"__ folder
- Navigate to __"npm"__ folder, make the npm folder a zip file
- copy and paste the zip file into this file address *C:\Program Files (x86)\Adobe\PhoneGap\PhoneGap Desktop\resources\app.asar.unpacked\bin* 
- Then run _postinstall_ again Boom 💥💥💥

Thanks for reading!!!
###for more reference check out this Youtube video 👇
youtube root resource[https://www.youtube.com/watch?v=j8PWNSc-FI4]
How does dev.to Notify Likes and Coments?
Tags: meta, curious
Published: 2020-06-17 14:51:10

If I recall correctly a couple of month ago every like was notified instantly, sometimes multiple likes bundled into one notification, if they were done in a short amount of time I suspect.

But today I made a comment, for which I received 1 like notification, I then went to the comment itself and had around 5 likes.

I'm kinda curious on hoe it is managed, as I could not find info about this in the FAQs. 

Cheers, have a nice day!
Welcome Thread - v78
Tags: welcome
Published: 2020-06-17 14:50:58

---
title: Welcome Thread - v78
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
---

![lightbulb hey](https://media.giphy.com/media/l3vR9IG7KlnQEAwTe/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Web Designing Trends in 2020
Tags: webdev, design, javascript
Published: 2020-06-17 14:50:30

When it comes to web design, we are always biased towards choosing the right colour scheme. Well, that was of utmost importance back in the days and is still relevant today. However, it is not the only thing that web designers focus on. The dark mode has been trending for the last couple of years and has been a top web design trend because everybody wants it so badly that even WhatsApp had to roll out the dark mode. There is nothing special about the dark mode, it is just a black theme but the spontaneous demand from the users made many web applications to shift their design to integrate that web design trend. In order to stay in the race and not losing users, your web apps theme should also be updated from time to time. You might have noticed that Gmail, YouTube, and Twitter keep doing that.

[Top 8 web design trends in 2020](https://www.decipherzone.com/blog-detail/web-designing-trends-2020)
Your own Kubernetes cluster for < 15 euros?
Tags: kubernetes, productivity, devops, showdev
Published: 2020-06-17 14:43:53

Yes! you heard it right 15 euros, actually 14.38 if I am being pedantic. 

I have been running my private Kubernetes cluster for a while now, this serves me as playground to test my skills and serve as a learning platform. As I get comfortable I started to move all my productivity apps to my cluster and optimize the deployment along the way. 


 {% twitter 1273018945566584832 %} 


I have started a series **Cheap Kubernetes Cluster** on my personal blog to explain how I managed to setup applications including _Password manager, Mail server, DNS Server(s)_ and other services in my cluster and managed to keep the full bill under 15 euro mark. 

----
Like it? Did I spark an interest. If so, follow me to keep yourself updated on the follow up posts in this series. The more interest I see, the faster I will be able to create posts. 

✌️
Python Correlation Matrix Tutorial
Tags: python, beginners, tutorial
Published: 2020-06-17 14:26:53

---
title: Python Correlation Matrix Tutorial
published: true
description: 
tags: #python #beginners #tutorial
---

1 What is the correlation matrix?
1.1 What is the correlation coefficient?
2 Finding the correlation matrix of the given data
3 Plotting the correlation matrix
4 Interpreting the correlation matrix
5 Adding title and labels to the plot
6 Sorting the correlation matrix
7 Selecting negative correlation pairs
8 Selecting strong correlation pairs (magnitude greater than 0.5)
9 Converting a covariance matrix into the correlation matrix
10 Exporting the correlation matrix to an image
11 Conclusion

https://likegeeks.com/python-correlation-matrix/

Hope you like it.

Best Regards,
DevOps and CICD
Tags: devops, cicd, deploy
Published: 2020-06-17 14:22:05

Speed and optimisaton is the mantra whenever you got to take a code to production

I wrote this 10 minute read on DevOPs and CICD practices. Do give it a read and let me know what you think

This is my first post here. Looking forward to more

https://www.linkedin.com/pulse/speed-all-matters-gaurab-dey
#AskingForExperts: Where Do You Keep Your SRE Artifacts
Tags: sre
Published: 2020-06-17 14:13:21

Hi All;

I have seen some fantastic articles here regarding SRE and some of the efforts that you have taken to start implementing SRE principals to your respective organizations.  

At my company, our org is starting to build a vertical that is focused on reliability and availability by applying SRE principals.  One thing we were wondering was, how have folks collaborated and organized some of their artifacts with resepect to SRE (i.e. FMEA docs, arch docs, etc).

My initial thoughts were things like Confluence, or Jira, or Sharepoint - but any "SRE" specific tools?

Thanks!
Currying Function and It's Advantages
Tags: javascript, codenewbie, webdev, beginners
Published: 2020-06-17 14:03:31

* Turning a function that takes multiple arguments, to a function which returns functions (Unary and Anonymous).

* Currying is right-associative (Read from Right-Left).

* The concept acts systematic: Property needs to interact with other basic properties in order to fully develop its advantages. __There is a mutual dependency between the properties involved.__

* Makes working with HOC(Higher Order Component) much more effective, provided the passed in functions are in curried form themselves.

Let's Look at an Example:

```javascript
// * Abstraction over Arity(the amount of functions you can curry into one function)

const comp = f => g => x => f(g(x));
const inc = x => x + 1; // * Unary Function
const mul = y => x => x * y; // * Binary Function

// * Normal Composition of two unary Functions:
comp(inc)(inc)(2); // * 4

// * Composition of Binary and Unary Funtions:
comp(mul)(inc)(2)(3); // * 9

// * Invalid Composition of an inner binary Function:
comp(inc)(mul)(2)(3); // * Type Error
```
__Let's look at the Invalid Composition Example:__

* Here, *f's* arity doesn't matter, because "comp" is polymorphic in nature/return.

* If *f* is substituted with *inc*, *comp's* return type becomes: 
```javascript
x => f(g(x))
``` 
* If *f* is substituted with *mul*, *comp's* return type becomes: 
```javascript
x => y => f(g(x))(y)
``` 
Which is perfectly valid. However, *mul* here is *g* and it requires 2 arguments but only one is given, hence, type error.


### Important Things to note here:

* Arguments Order matters, it only concerns non-commutative functions.

* Primary parameters should be placed at the end to facilitate function composition.

* Parameters that are least likely to change should be place leftmost to facilitate partially applied functions.

### DON'T:

* Rely on function's length property.

* Use magic auto currying, that is, functions as return values are curried automatically.
Non-ASCII characters in Azure metadata fields
Tags: azure, webdev
Published: 2020-06-17 13:54:35

#Azure Blob Storage and Azure Search - Handling non-ASCII characters with Azure Indexers

Azure Blob Containers will only accept ASCII characters in metadata fields. In order to store a character like "ó" in your metadata fields, URL encode the metadata before writing to Azure:

```
title: encodeURIComponent(docTitle),
```

The encoded data will look like "%C3%B3" to preserve the non-ASCII characters. Simply decode before displaying on the front end. 

##But what if my metadata needs to be searchable in Azure Search?

I pushed the above change to production, and it broke our search page. Special characters were not searchable because there were no special characters in the search index (they were encoded). And encoding the search queries before executing a search just seemed like a bad idea.

Azure Indexers, which we used to get our data from the blob into the search index, [allow you to configure field mapping functions to transform your data as you are adding it to the search index] (https://docs.microsoft.com/en-us/azure/search/search-indexer-field-mappings#urlDecodeFunction)

"urlDecode" is one of these mapping functions. The configuration looks like this:
```
{
      "sourceFieldName": "title",
      "targetFieldName": "my_document_title",
      "mappingFunction": {
        "name": "urlDecode"
      }
}
```

Now the special characters are stored unencoded in the search index and ready to be searched.
Started to build game server for indie developers
Tags: go, status, gamedev
Published: 2020-06-17 13:50:44

---
title: Started to build game server for indie developers
published: true
description: 
tags: #go #status #gamedev
---

For the last months I didn't write anything, isolation in the house, work and work. Searching for the new contracts to work in free time, it was a bit exhausting :) and I decided to build something new for me.

I've just started to work on generic purporse game server for indie developers. I have already implemented key, value storage, leaderboards, guest auth by device id and working on the social networking.

I know that nakame exists, but it's challenge to make my own server and apply it for the current games in the market. Crystal Blast starting from 2.1 release version would use own analytics platform and storage instead of Firebase.

Plan to go away for external tools like firebase, game services and have everything in house and in the same time as cheap as possible.

Planning to open source it in 2-3 months if the games in prod will work fine.

Update: [Crystal Blast](https://crystalblast.page.link/install) is going to have sounds, leaderboards, settings syncing between platforms by using social sign in.