teleren/devto huggingface dataset:
IPV4 vs IPV6
Published: 2019-09-26 14:44:56

# IPV4:
• It’s a decimal based IP address.
• It contains 4 decimal number separated by dot.
• Each number ranges from 0 to 255, that means 00000000 to 11111111.
• Each of the decimal is 8 bits long, so it’s 32 bits IP address.

# IPV6:
• It's a hexadecimal based IP address.
• It contains 8 hexadecimal number separated by colon.
• Each number ranges from 0 to that means 0000 0000 0000 0000 to FFFF FFFF FFFF FFFF
• Each of the hexa decimal is 16 bits long, so it’s 128 bits.
Distributed Memory Caching
Published: 2019-09-26 14:43:16

There are 2 kinds of in memory data storage system available:
# Redis
* Redis is a single threaded system.
* It can be scaled horizontally easily.
* Size of the key and value can go upto 512 MB each.
* Following 5 types of data types available:
  * String
  * Hash
  * List
  * Set
  * Sorted Set
* Any kind of CRUD operations can be performed on a field level of the given data.
  * which means the application doesn't need to load the entire data.
* There are multiple eviction policy available:
  * No Eviction: On reaching the memory limit, it throws the error.
  * All Keys LRU: Remove keys by least recently used.
  * Volatile LRU: Remove keys, that have an expiration time set, by the least recently used first.
  * All Keys Random: Remove keys randomly.
  * Volatile Random: Remove keys, that have an expiration time set, randomly
  * TTL: Remove keys, that have expired wrt time.
* There are 2 kind of back up supported:
  * RDB Snapshot: This snapshot happens periodically.
  * AOF: Append only file is perform for every write operation. It can slow down the write operation but ensures the data availability.

# Memcached
* Memcached is a multi threaded system.
* It can be scaled vertically easily.
* Size of the key can be upto 250B and value can be upto 1 MB.
* Horizontal scaling is possible through client side complex algorithm.
* It's just on String Data Type.
* Not possible to perform any operations on a field level of the given data.
  * which means the application needs to load the entire data.
* It works on LRU eviction policy only.
• It's a distributed memory cached object storage.
• It has 4 components:
```
o Client software: fetch the list of available servers.
o Server software: A logic to store and retrieve the value for the passed key.
o Expiry: Mechanism to remove the older contents based on the time expiry.
o Client based hashing algorithm: to fetch the corresponding server.
```
• The cached data is stored in the RAM so when RAM runs out of memory, it does the clean up.
• There is no fault tolerance means it doesn't share the data with other servers.
Fancy Exploding Button
Tags: codepen, vue, javascript, showdev
Published: 2019-09-26 14:38:41

<p>Fancy exploding button with the functionality, made in VueJS, and animation, made in GSAP.</p>

<p>Once you press the button, it will splatter candies.</p>

{% codepen https://codepen.io/takaneichinose/pen/jONdGxM %}
What has your developer journey looked like?
Tags: career
Published: 2019-09-26 14:18:04

I'm curious about what has everyone's journey into being a developer and as a developer or even after has looked like. Like a choose our own adventure, I feel like a developer's journey could look very different from one person to another. In sharing I hope we could show others how they can potentially navigate their careers.

You could also share what you aspire to. Perhaps you're a certain type of developer and would like to aspire to a certain role or career path.

Here's a little template that could be fun to help visualize your journey for others.

```
[Role title]
Description
|
|
[Role title]
Description
|
|
[Role title]
Description
|
-- <-- indicates where you'd like to go but not there yet.
|
[Future or aspirational title]
This could be where you'd like to go in your career. Could be based on a path as a developer or not.
```
Internship Updates
Published: 2019-09-26 14:15:04

---
title: Internship Updates
published: true
description: Updates on my internship
tags: 
---
So far, my internship has been going well. I just completed my first Jira ticket and put it up for code review with a pull request. I've already addressed all the comments from my co workers, so I should be able to merge soon. My ticket was about adding unit tests using the cmocka framework to one function. My next ticket will be the same, except I'll be adding unit tests for the rest of the functions in the file I was working on. We aim for 100% code coverage. For a lot of this internship, I've been by myself researching and trying to tackle my problems myself.

Some challenges I faced were with working with Git. I initially had one issue where any code changes I made weren't being reflected on my unit tests. I found out that that was because my VS Code was only making changes to the files in my local machine, not the files on my Linux machine. To solve this, I added a Remote SSH extension to my VS Code so I can connect to my VM and make my code changes on there.

Another issue I faced recently was trying to remove a single white space that I added with a commit. For some reason, Bitbucket flagged a white space in the diff file, even after I already fixed it on Bitbucket. One of my co workers suggested I remove the commit. I found out that to do this, I needed to use the command git revert <commit>. However, I've been having issues trying to connect to my Bitbucket branch instead of my local branch, so whenever I reverted the commit and pushed, I could not see the change reflected on Bitbucket. To fix this, I ran the command git checkout -B <local branch> <Bitbucket branch> because whenever I tried to access my Bitbucket branch, I get an error saying a branch already exists with that name. After doing this, reverting the commit, committing this change, and pushing, my Bitbucket finally removed the commit and the white space is no more.

Some future issues I expect to face are with these unit tests. For the most part, I've been doing the usual unit tests, but in the future, I suspect to tackle problems where I'd have to understand what the code is doing to do the unit test properly.
How to automate one-click debugging on Visual Studio Code
Tags: vscode, visualstudiocode, developertools, productivity
Published: 2019-09-26 14:14:09

---
title: How to automate one-click debugging on Visual Studio Code
published: true
description: Learn a cool automation feature of Visual Studio Code for one-click debugging of local apps.
tags: vscode, visualstudiocode, developer-tools, productivity
cover_image: https://thepracticaldev.s3.amazonaws.com/i/uul3v6q2bnxpnp4ju6sx.jpg
---

> ### "_Debugging is my favorite task_", said **no** developer

Ok. We don't really _enjoy_ debugging. Nevertheless, since we practice code ownership, we must face it at some point.

It doesn't have to be an all boring activity though. Thanks to a cool feature of Visual Studio Code, it's possible to automate the debugging process and implement a one-click solution in our local environment.

In case you'd like to learn more, [join this tech talk](https://zoom.us/webinar/register/WN_V-4DzL5aQF-4iyC9iB1wEQ) with [Kay Plößer](https://dev.to/kayis) next Tuesday (Oct 1) to watch live or receive the on-demand recording:

[![Tech Talk Banner](https://thepracticaldev.s3.amazonaws.com/i/srszvtjgtt6rtqb9z9tp.jpg)](https://zoom.us/webinar/register/WN_V-4DzL5aQF-4iyC9iB1wEQ)

Cover image credits: [Austin Distel](https://unsplash.com/@austindistel?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Color your title underline with the linear gradient
Tags: css, borderbottom, lineargradient, html
Published: 2019-09-26 13:57:54

---
title: Color your title underline with the linear gradient
published: true
description: 
tags: CSS, border-bottom, linear-gradient, HTML
---

## How to use linear-gradient to color border-bottom of title

https://codepen.io/isamrish/pen/zYOXqQE

https://codepen.io/isamrish/pen/OJLGXZN

https://codepen.io/isamrish/pen/vYBqYpv
Add Password Protection To Word Or PDF Files In C#
Tags: security, securepdf, secureword, documentsecurity
Published: 2019-09-26 13:24:04

Everything is going digital. There are outstanding products/tools to pull you into the paperless era. We share information across companies or anywhere in the form of different file formats. It could be a Spreadsheet, PDF, or any of the MS Office formats. But the biggest threat is security. Let’s understand this with a use-case.  

You want to secure a Spreadsheet or PDF file on a machine where MS Office or Adobe PDF is not installed, in that case, you need a tool or API that can secure such documents programmatically without any dependency.
Have a look at the GroupDocs.Merger for .NET code below.
{% gist https://gist.github.com/GroupDocsGists/ba95d278904ea8ab77c59a37a216fc1f %}

One interesting thing about this API is that it gives you two options,

1. Pass a source file and specify its extension as well and save output/protected file with the same extension (source: “test.pdf”, output: “test.pdf”)
2. Secondly, you can pass the source file and for the output you just have to specify the file name and the API will detect file extension on its own based on the source file (source: “test.pdf”, output: “test.”+result.FileFormat)
Let’s Build with JavaScript – Using Mouse Events To Animate Text
Tags: javascript, tutorial, beginners, video
Published: 2019-10-31 19:52:02

---
title: Let’s Build with JavaScript – Using Mouse Events To Animate Text
published: true
tags: javascript, tutorial, beginner, video
canonical_url: https://web-crunch.com/javascript-mouse-events-to-animate-text/
---

In this installment of my Let’s Build with JavaScript series I talk about using mouse events to animate text.

This tutorial is heavily inspired by a video from Wes Bos’ course [JavaScript 30](https://javascript30.com/) which I highly recommend for a crash course in JavaScript.

[View the CodePen](https://codepen.io/webcrunchblog/pen/aboPYxv)

{% youtube MgF9AajVjUw %}

We’ll be building a text-shadow animation that takes place on mouse hover. As you move your cursor over a containing div the text can animate in real-time thanks to JavaScript events. We’ll target the `mousemove` event specifically to hook into coordinates defined in the browser relative to where your cursor lands on the screen. Combine some math and some ES6 and we’ve got a pretty cool little animation effect.

#### Relative links:

- [MDN: Events](https://developer.mozilla.org/en-US/docs/Web/Events)
- [MDN: mousemove Event](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event)
- [JavaScript30](https://javascript30.com)

#### The Series So Far

- [Let’s Build: With JavaScript – DIY Dropdowns and Responsive Menus](https://web-crunch.com/lets-build-with-javascript-diy-dropdowns-responsive-menus/)
- [Let’s Build: With JavaScript – Broadcast Bar with Cookies](https://web-crunch.com/lets-build-with-javascript-broadcast-bar-cookies/)
- [Let’s Build: With JavaScript – Sticky Nav](https://web-crunch.com/lets-build-with-javascript-sticky-nav/)
- [Let’s Build: With JavaScript – Dynamic Tabs](https://web-crunch.com/how-to-create-tabs-with-vanilla-javascript)
- [Let’s Build: With JavaScript – Modals](https://web-crunch.com/lets-build-with-javascript-how-to-code-modal-vanilla-javascript/)
- [Let’s Build: With JavaScript – HTML5 Video Player](https://web-crunch.com/lets-build-with-javascript-html5-video-player/)
- [Let’s Build: With JavaScript – Accordions](https://web-crunch.com/how-to-create-accordion-vanilla-javascript/)
- [Let’s Build: With JavaScript – Skeleton Screen Effect](how-to-create-skeleton-screen-loading-effect)
- [How to Code an Off-Canvas Menu – Let’s Build: With JavaScript](https://web-crunch.com/off-canvas-menu)
- [Show More – Show Less Toggle with JavaScript](https://dev.to/justalever/how-to-code-a-show-more--show-less-toggle-with-javascript-3c7m)
- [How to use Local Storage with JavaScript](https://web-crunch.com/how-to-use-local-storage-with-javascript)
- [Let’s Build: With JavaScript – Dynamic Checkboxes](https://web-crunch.com/javascript-dynamic-checkboxes)

The post [Let’s Build with JavaScript – Using Mouse Events To Animate Text](https://web-crunch.com/javascript-mouse-events-to-animate-text/) appeared first on [Web-Crunch](https://web-crunch.com).
The revolution will have to be trademarked.
Tags: allgemein, netzeug, digital, internet
Published: 2020-09-24 12:12:09

---
title: The revolution will have to be trademarked.
published: true
tags: Allgemein,Netzeug,digital,internet
canonical_url: http://drikkes.com/?p=13951
---

Wie sagte schon Emma Goldman:

[![](http://drikkes.com/wp-content/uploads/2019/09/Wenn-ich-sie-nicht-urheber-rechtlich-schu%CC%88tzen-kann-ist-es-nicht-meine-Revolution._.png)](https://www.google.com/search?hl=de&q=wenn%20ich%20nicht%20dazu%20tanzen%20kann%20ist%20es%20nicht%20meine%20Revolution%20zitat)
Zoom in Reason
Tags: reason, expo, reasonreactnative, reactnative
Published: 2019-09-17 14:44:21

---
title: Zoom in Reason
published: true
description: A basic ReasonExpo app demonstrating zooming an image.
tags: reason, reasonml, expo, reason-react-native, react native
---


## ImageWithZoom Module

Pass in an image size which is passed to the `uri` variable. Whatever the image size it will be scaled to the `width` and `height` defined in the `styles##image` property.
Each time this component is called, a diffent image from `https://picsum.photos/`is retrieved.

```reason
let styles =
  Style.(
    StyleSheet.create({
      "image": style(~width=400.->dp, ~height=400.->dp, ()),
    })
  );

[@react.component]
let make = (~size=?) => {
  <Image
    style=styles##image
    source={Image.Source.fromUriSource(
      Image.uriSource(~uri={j|https://picsum.photos/$size/$size|j}, ()),
    )}
  />;
};
```

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


## Resources

[picsum.photos](ttps://picsum.photos)

[original repo](https://github.com/browniefed/KenWheelerReasonZoom/blob/master/re/root.re) via [@browniefed](https://twitter.com/browniefed)

See it on `snack.io` https://expo.io/@idkjs/zoomreason.
See the [source](https://github.com/idkjs/reason-expo-image-with-zoom).
Select Multiple Fields With Fauna
Tags: fauna
Published: 2019-10-01 00:09:56

---
title: Select Multiple Fields With Fauna
published: true
tags: fauna
canonical_url: https://scottw.com/select-multiple-fields-fauna-db
---

I am thinking of using [Fauna](https://fauna.com) for my next small side project and began experimenting with it last night. I wanted to return two fields from a document, but I could not get the syntax correct.

I was working under the assumption that [`SelectAll`](https://docs.fauna.com/fauna/current/api/fql/functions/selectall) would allow me to extract multiple fields, but it turns out this is for returning multiple items from an array.

I posted a message in their slack group[^1] and learned that you could pass an array to the Lambda with more than one [`Select`](https://docs.fauna.com/fauna/current/api/fql/functions/select).

```
Map(
  Paginate(Match(Index("all_customers"))),
  Lambda("X", [
    Select(["data", "firstName"], Get(Var("X"))),
    Select(["data", "lastName"], Get(Var("X")))
    ]
  )
)

```

[^1]: Slack is such a bad option for support like this. All the answers are locked in their walled garden.
How would you design an interview coding challenge? What could you learn about a candidate from it?
Tags: career, challenge, programming, discuss
Published: 2019-09-26 12:47:19

Please try to make your answer as language agnostic as possible - I'm not interested in "I would have the candidate build a website using ROR and MySql" - but more things like "I would want to see how would the candidate try to solve a bug"
Crossed 5k follower! Thank you everyone!
Tags: discuss, javascript, beginners
Published: 2019-09-26 12:45:05

---
title: Crossed 5k follower! Thank you everyone!
published: true
description: "Thank you everyone! Reached 5k followers on dev.to"
tags: discuss, javascript, beginners
---

A quick post to say thank you everyone! Just crossed 5k follower on dev.to! What a fantastic community! Who's on Twitter too? Let's connect => [I'm here](https://twitter.com/gagliardi_vale).

Stay tuned and happy coding!
How to recover NTFS partition with directory structure?
Tags: recovery, help, ntfs, storagespaces
Published: 2019-09-26 12:18:54

### What I've already tried:
I've googled and found some recovery softwares but nothing worked. Most recovery software will scan the HD for lost files and list them by types. The directory structure and the file name is lost. So far, no success in recovering anything. I've around 350GB of items to be recovered from a 500GB external HD. One of the recovery software(DMDE) was able to show the deleted partition and I can navigate through all its folders but free version didn't recovered more than a few files.

### What I need:
I need a software which can restore the whole partition. If recovering the whole partition is not possible, then I'd like to backup all the files in the HD with all its directory structure.

----------------

***My present state of mind:***  
I'm totally mad. Someone just help me, please.

***How I messed up my external HD:***  
I made an empty partition in it. Turned on Storage Spaces in Windows. I didn't know that Storage Spaces formats the full HD and make a new partition in it. I removed instantly when I notice my HD's partition is gone in "My PC"
Colocation is still underrated
Tags: web, components
Published: 2019-09-26 11:49:11

---
title: Colocation is still underrated
published: true
description: Why putting everything (even CSS) in a component is a good idea.
tags: web,components
---

Colocation has been a thing in the Web space for quite a while now. React, Vue.js and others have been pushing it for a couple of years with their Component-based frameworks.

The traditional approach of separating HTML, CSS and JavaScript code doesn't make a whole lot of sense. Each of these is a different technology but they need to work together. Most features would have some code split across three different files.

Everyone seems to be on board with putting their HTML and JavaScript in the same component file, however many developers I talk with have different ideas when it comes to CSS.

Either because it's just not simple and easy to implement or because it hasn't been popularised as much. For some reason, a lot of developers are against writing CSS in their component files.
 
Regardless of implementation or style, here's why colocation is great:

Isolated from other features means less intertwining bugs. One section of CSS code can be isolated from others making sure it's not unknowingly depending on or being depended on other code.

It's harder to let one technology become out-of-line with the others. If the structure of the markup changes, the styling is right there in front of you and so you'll naturally keep this up-to-date as well. This isn't the case when the styles are hidden away in another file.

Removal of dead or obselete features are much simpler. Since there are no hidden ties to any other code, once a feature is no longer needed, it can be just removed.

All the details of how a feature is implemented can be hidden away inside a single file. If someone is new to the code or doesn't need to understand it just yet, they don't have to.

This all enables a team to move faster, reduce bugs and keep the amount of code down.
Flutterwave in brief
Published: 2019-09-26 11:42:24

Working in a company that still pays its staffs in cash is unimaginable. The stress, time wasted involved in creating such records and sending the records through different levels of authorization. This doesn't only cause delay in payment, but could result in several inevitable errors and omissions. How about the risk involved in carrying huge sum of money about, highly unsafe and archaic. Digital transaction has come to help us get rid of all our financial related stress. An effective and secure Digital transaction platform is Flutterwave.

Flutterwave is a payment technology company that provides convenient, instant and secured payment, Flutterwave doesn't only carry out credit card payment, but other alternating digital payment across Africa, such as mobile money, etc.

Flutterwave has two amazing products,

1. The Flutterwave Rave

2. The Flutterwave Barter

These applications are the platforms where you can carry out all your financial transaction as well as make payment of bills, such as TV bills, utility bills, internet and mobile data subscriptions, this is a plus for busy schedulers, allowing them enjoy the benefit of technological adaptations. Unlike your local mobile banking applications that only allows you carry out transaction within your country, flutterwave allows you Send and Receive across the continent, it also has a Request money feature, which allows you to request money from Family and Friends who use the application.

These apps are fast, convenient and secure, with a welcoming and user-friendly interface and beautiful designs.

Due to its reliability and dependability, Flutterwave has gained international recognition and received several awards,  in 2018, Flutterwave received the award for  ‘Best Payments Company’ award at the Ghana eCommerce Awards ceremony, amongst others.

With over 30,000 customers, Flutterwave has experienced about 600% growth in customer base, while it still maintaining relationships with large-scale customers such as Arik air, fly wire, uber, Dusu pay, broad pay and pennysmart.
Fulletwave still maintains key partnership within the financial industries.
Use bcrypt to campare passwords using nodejs
Tags: bcrypt, security, node, javascript
Published: 2019-09-26 10:37:20

---
title: Use bcrypt to campare passwords using nodejs
published: true
description: 
tags: #bcrypt #security #nodejs #javascript
---

Storing your password as a plain text is fast, however it is not secure, this why you have to make it complicated for hackers to get important information by using *hashing*, there is a couple of hashing functions like *md5*, we’ll not use md5 which it is not designed for passwords plus it’s *cryptographically broken* when the attacker can generate a list of common password and their corresponding hashes, then comparing the hashes to the site has stored.

You’ll use `bcrypt` which it is more designed for passwords, bcrypt use a *salt* to make a hash output unique even if your users use the same password, and this is a simple use case of bcrypt for a user who wanna update his password.

```js
const bcrypt = require("bcryptjs");

// Generate Salt
const salt = bcrypt.genSaltSync(10);

// Plain Text Passwords
const currentpPassword = "abc123";
const oldPassword = "abc123";
const newPassword = "nWd6yCyj";

// Generate the Current User Password Hash
// by combining the salt and the password
const currentPasswordHash = bcrypt.hashSync(currentpPassword, salt);

// Compare the Old Password set by the user
// to the Current Password Hash
if (!bcrypt.compareSync(oldPassword, currentPasswordHash)) {
  console.log("The Current Password is Wrong");
}

// The new password should not be similar
// to the old password
if (bcrypt.compareSync(newPassword, currentPasswordHash)) {
  console.log(
    "The new password is similar to the new password, please choose a different one",
  );
}
```