teleren/devto huggingface dataset:
No, I don't develop another JS framework!
Tags: webdev, javascript, showdev, webpack
Published: 2020-06-05 09:30:47

## Background story

For the past 9 months I've been developing an online IDE + JS framework to code frontend faster and with no boilerplate setup. 

>
Imagine you can quickly prototype UI with HTML, add few attribute directives and boom! :bomb: You didn't touch JavaScript yet but you already have a working app. Actions are generated and they use data you wrote in HTML. E.g. what you have in your `LI` tags becomes an action which returns an array of objects. When you're done with coding, you can download stand-alone code, run `docker-compose up` and you can keep changing it as you wish. It uses Webpack, Babel and all other open source goodies. 
>

So, is it still just another JS framework?! - judge it your self.

You can find more here: www.glue.codes where you can try a [demo](http://gluecodes-demo.s3-website.eu-west-2.amazonaws.com/ide.html?appId=1&edit=page&id=index) without giving away any of your details. 

Here is the framework repo: https://github.com/gluecodes/gluecodes-framework. 

## Interactive demos

Here are this week's demos which include comments presenting different parts of the IDE/framework:

- [General overview](http://gluecodes-demo.s3-website.eu-west-2.amazonaws.com/ide-structure.html?appId=1&edit=page&id=index)
- [Conditionals & in-context code generation](http://gluecodes-demo.s3-website.eu-west-2.amazonaws.com/ide-conditionalNCommandAssistant.html?appId=1&edit=page&id=index)
- [Reusable slots](http://gluecodes-demo.s3-website.eu-west-2.amazonaws.com/ide-reusableSlots.html?appId=1&edit=page&id=index)
- [Generating actions with example data](http://gluecodes-demo.s3-website.eu-west-2.amazonaws.com/ide-exampleData.html?appId=1&edit=page&id=index)

## Asking for help

Can you give me some feedback and if you like it, follow my social media and help spreading details about the project or talk to me if you'd wish to contribute. Apologies for those who interpret my recent articles as repetitive self-promoting. I'm just trying to get to developers as I really believe it'll make our frontend lives more enjoyable! :wink:
React Native – Ngôn ngữ tương lai của các nền tảng di động
Published: 2020-06-05 09:12:14

Cơ hội nghề nghiệp sáng lán, lộ trình học sẵn có, tài liệu chất lượng, bạn còn chờ đợi gì nữa mà bạn không bắt đầu sự nghiệp của mình với React Native? Thời gian đang trôi đi và nếu không xuất phát từ hôm nay, lợi thế “người tiên phong” của các bạn sẽ mất rất nhanh vào tay những người trẻ tuổi hơn biết chớp thời cơ đấy.
https://blog.itnavi.com.vn/react-native/
Which strategy do you prefer for indexedDB?
Tags: webdev, javascript, IndexedDB
Published: 2020-06-05 09:00:39

/*idb_object*/
var idb_db = window.indexedDB.open("test_db",1);


/*First Approach (Extreme Fast) */
  function push_record(obj){

        var transaction = idb_db.transaction(['test_object_store'], 'readwrite');
        var objectStore = transaction.objectStore('test_object_store');
        var request = objectStore1.put(obj);
           
           request.onsuccess = function(event) { };
           request.onerror = function(event) {
         	 /*In Case it fails single transaction there is no much we can do ,because loop is on its way.*/
           };
           transaction.oncomplete = function(event) {
              /*Doesn't care loop already fired the next element*/
           };


  };


  var i=0,obj=[1....10K],len=obj.length;
  for(i=0;i<len;i++){
      push_record(obj[i]);
  }

/*First Approach-End*/


/*Second Approach*/
function push_record(obj,callback){
	
         var data = obj.data;
         var index = obj.index;
         var len = data.length;

         var transaction = idb_db.transaction(['test_object_store'], 'readwrite');
         var objectStore = transaction.objectStore('test_object_store');
         var request = objectStore.put(data[index]);
	     transaction.oncomplete = function(event) {
                index++;
                if(index<len){		  	  
                  push_record({index:index,data:data},callback);
                }else{
                  callback();
                }
	     };	
         request.onsuccess = function(event) {};
	     request.onerror = function(event) {
	 	  console.log("Stop operation because,sequencing matters in this iteration");
	     };


};

/*Consider obj contain uneven large data like ArrayBuffers*/
var i=0,obj=[1....10K],len=obj.length;  

push_record({index:0,data:obj},function(){
    console.log("Everything is pushed seamlessly");
});
/*Second Approach-End*/


I prefer Second-Approach,it feel much safer and more controlled execution.

Any other strategies please do share?
Restrict input in textarea
Tags: help
Published: 2020-06-05 08:53:20

Maybe someone already did this or there is a package, which I didn't find. 

# Problem statement
Restrict the input to a textarea by maximum number of columns (chars in row) and rows.

# Current situation
I already have a 90% solution, but there are a lot of edge cases (e.g. pasting text, writing text with visual linebreak but no `\n`, selecting text and write ...).

# Additional information
We do use Vue and Quasar in the project.
To Die List: My first indie app!
Tags: showdev, android, flutter
Published: 2020-06-05 08:46:40

<a href="https://www.producthunt.com/posts/to-die-list?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-to-die-list" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=205010&theme=light" alt="To Die List - Complete your tasks before they die! | Product Hunt Embed" style="width: 250px; height: 54px;" width="250px" height="54px" /></a>

I made my first app as an indie dev! It's a todo list app with some [gamification](https://en.wikipedia.org/wiki/Gamification) dust sprinkled on it. The idea is that every time you create a todo/task, there's a timer running down. If you complete the job before the timer hits zero, some additional time is added to the timer for the rest of your tasks. But instead, if the timer hits zero, then one of your tasks will be randomly killed(deleted).

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

The app is currently available on Android only. If people end up liking the Android version, I'll make one for IOS. Here are the links:
* [To Die List](https://play.google.com/store/apps/details?id=com.godcrampy.to_die_list)
* [To Die List Pro](https://play.google.com/store/apps/details?id=com.godcrampy.to_die_list_pro)

The pro version offers additional features such as dark mode and starrable todos. I'd really appreciate it if you could buy the pro version and help me in my indie app journey!

I'd love to hear feedback from you guys. Please feel free to let me know about any suggestions and bugs you may find.

## How I built this
I've made this app using [flutter](http://flutter.dev/) which allows you to create cross-platform apps. Flutter makes it really easy to quickly build mobile apps. If you know React, flutter is a weekend job to learn. If you don't, then two weekends are enough!

----
🌟 I made some [Cheat-Sheets](https://github.com/godcrampy/cheat-sheets)
🚀 Stalk me on [Instagram](https://www.instagram.com/godcrampy/) | [Github](github.com/godcrampy) | [Twitter](twitter.com/godcrampy) | [Website](sahil.surge.sh)
😄 Have a wonderful day!
Designing Programs
Published: 2020-06-05 08:45:41

Dear Developers,

there is a wonderful community on this platform and I do realise that for the majority, you are a community of 'developers'. However, I'm curious to know if there are people out there who may be interested in the more 'creative' approaches to coding. 

I work mostly with Java and JavaScript and have worked extensively with two specific frameworks that were developed for visual artists. These are [Processing](https://www.processing.org/) and [P5js](https://p5js.org/). I have been teaching these to artists and graphic designers for almost a decade now and mostly to higher education students and professionals. 

Today I am reaching out to meet new people in the field or perhaps just those who may be curious and would like to learn more. As part of a long-term initiative and in line with my teachings, I'm going to be writing about this subject and organising some workshops. If you want to join the discussion or simply pass by to say 'hello' then please sign up for my newsletter : [Designing Programs Newsletter](https://tinyletter.com/MWebster)

Thank you for your precious time,

regards

Mark
[Designing Programs Website](https://designingprograms.bitbucket.io/)
Beginner Python tips Day - 02 dict.get()
Tags: python, beginners, codenewbie, tips
Published: 2020-06-05 08:27:26

```python
# Day-02 dict .get()

my_dict = {'hello': 'world'}

try:
    my_dict['world']
    # Throws KeyError exception
except KeyError:
    print('Cannot find the provided key in the dictionary')

# Use .get() to be safe from the exception
print(my_dict.get('world'))
# prints None in the console

# You can pass second argument as default value
print(my_dict.get('world', 'default value'))
# prints 'default value'
```
Things You Need To Know About NODE.JS

Tags: javascript, node, webdev
Published: 2020-06-05 08:26:24

A mobile application development platform is a type of software that allows to rapidly develop, test and deploy mobile applications for smartphones or tablets.

Today we are talking about, one of the fastest gaining popular platform Node.js. It is a good choice for startup ventures as well. Applications like PayPal, Uber, Slack are developed on Node.

Check the benefits of Node.js for the application developers and vendors:

<b>· Node is very much developer friendly</b>
The platform comes with great documentation and tutorial videos to teach the new developers to work on it. As it uses JavaScript it is quite easy to learn and use. Other technologies like Spring and ASP.NET need the developers to know other languages to code on the server side as well. But Node uses JS for both the ends.

<b>· Node is highly scalable</b>
A both Node and JavaScript follows a step-wise approach, repetition of the new addition to existing apps can be easily added to the program, tested on the run and deployed quickly. This makes Node-based apps highly scalable. And the app can be re-used over and over again.


<b>· It uses the same language for both front and backend operation</b>
With Node, the developer can focus on the coding instead of worrying about translating between different languages and need not invest in separate developers. Node.js comes with a two-way communication model. Here the communication between the client and server exchanging data rapidly and effectively.


<b>· Node is very fast</b>
A single node server is capable of handling about twenty times the load produced by java. It does not clutter up slowing down the processing speed. Thus <a href="https://www.sphinx-solution.com/mobile-app-development/">app developers</a> get a fast response and accelerate app development accordingly.


<b>· Node library support is huge</b>
All the elements work very well and in fine-tuned collaboration with each other. In this way, node scores more than other.


<b>· No need to install or configure a web server for HTTP</b>
The node uses TCP and not HTTP for running its web sockets, so there is no need to spend time in installing a separate web server for using the HTTP.


<b>· Node is lightweight</b>
Node does not begin a new thread for every new client request. This means every operation is executed on a single thread in a series.


All these advantages of Node.JS are proved to be extremely helpful in developing the application. It is seen that LinkedIn shifted from Ruby to Node to handle their mobile traffic, got a new system which is faster and also the number of servers is reduced to 3 from 30. The performance capability of Node is great.


It has taken the app world by storm. We are also working on Node.js and taking full advantage of it to offer the best products to the client.
How we decreased our memory usage with jemalloc
Tags: rails, performance, changelog
Published: 2020-06-05 08:21:45

DEV is a Ruby on Rails application deployed on Heroku servers.

The other day [Molly Struve](https://dev.to/molly_struve/), our resident SRE sorceress, noticed we were having some memory troubles. They didn't look like memory leaks, since they plateaued over time. But they were obviously worth investigating.

After investigating a bit I remembered how in the past I happened to switch a Rails app from the standard memory allocator to [jemalloc](https://github.com/jemalloc/jemalloc).

The jemalloc library is an alternative memory allocator that can be used by apps (Redis ships with it) which works better with memory fragmentation in a multithreading environment.

We researched that, activated it and this was the result:

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

*The slight decrease you see before the red bar is due to deployments which for obvious reasons free some occupied memory.*

## How do I do the same in my Rails app(s)?

The prerequisite is that you're using multiple threads with Rails, otherwise it won't help much.

If you're using Heroku you can follow [these instructions](https://devcenter.heroku.com/articles/ruby-memory-use#excess-memory-use-due-to-malloc-in-a-multi-threaded-environment).

If not, you can take inspiration from [this tutorial](https://www.41studio.com/blog/2019/how-to-install-ruby-on-rails-6-with-jemalloc-on-linux-ubuntu-19-04-2/) and recompile your Ruby and activate `jemalloc` support.

## Why does this happen?

Nate Berkopec has an extensive explanation in his post [Malloc Can Double Multi-threaded Ruby Program Memory Usage](https://www.speedshop.co/2017/12/04/malloc-doubles-ruby-memory.html) but long story short: the Ruby virtual machine and the default memory allocator (`malloc`) aren't great at talking to each other when multithreading is involved because of the way they are both designed.

## Are there any downsides?

Potentially yes, as it would make your app less portable (it doesn't work on Windows) and there are options with a smaller footprint that are being explored by Ruby core, like using [malloc_trim()](https://bugs.ruby-lang.org/issues/15667).

My suggestion is to test it :-)
Reverse String
Tags: twopointers, strings
Published: 2020-06-05 07:39:06

---
title: Reverse String
published: true
description: Easy Problem
tags: two-pointers, strings
---

Write a function that reverses a string. The input string is given as an array of characters char[] .

**Conditions:**

Do not allocate extra space for another array, you must do this by modifying the input array in-place with O(1) extra memory.

**Example 1:**

**Input:** ["h","e","l","l","o"]

**Output:** ["o","l","l","e","h"]


## Alogrithm:

1. Loop through the half of the array
2. swap elements
3. profit :-)

## Code

``` JS
/**
 * @param {character[]} s
 * @return {void} Do not return anything, modify s in-place instead.
 */
var reverseString = function(s) {
	let mid = Math.floor(s.length / 2);
	for (let i = 0; i < mid; i++) {
		// Basic Swapping
		let temp = s[i];
		s[i] = s[s.length - i - 1];
		s[s.length - i - 1] = temp;
	}
	return s
};
```

## Alternative Approach

instead of using for loop, you can use pointers

``` JS
/**
 * @param {character[]} s
 * @return {void} Do not return anything, modify s in-place instead.
 */
var reverseString = function(s) {
	let left = 0, right = s.length - 1;

	while (left < right) {
		let temp = s[right];
		s[right--] = s[left];
		s[left++] = temp;
	}
	return s
};
```
How to use Airbnb Cereal in a React app.[deprecated]
Published: 2020-06-05 07:29:17

Recently, I was working on a website that needed somewhat of a 'cool' feel while still being able to deliver readability. The text font-family would definitely play a pivotal role in enabling the web app to feel like that and so I went on a quest to find the perfect typeface for the job.

My encounter with Airbnb Cereal:

I remember the first time I saw Airbnb Cereal (https://airbnb.design/cereal/), I was collaborating on the styled-components website and I saw it. I checked it out and honestly, it was love at first sight.

Airbnb Cereal is a geometric sans serif typeface designed with an overall roundness that feels friendly and approachable. This is all in line with Airbnb's efforts in designing for trust. 

How to get started:

Step 1. Download Airbnb Cereal Font from https://www.cufonfonts.com/font/airbnb-cereal-app.

Step 2. In the src directory of your react app, create a folder called fonts.
![Src](https://dev-to-uploads.s3.amazonaws.com/i/zr2f0v770zrnop76tlcr.JPG)

Step 3. Inside fonts, paste all the AirbnbCereal ttf files.
![Fonts](https://dev-to-uploads.s3.amazonaws.com/i/y4z4bjfkd0ne2uklis8e.JPG)

Step 4. Go into the index.js file and import all the fonts.
![index.js](https://dev-to-uploads.s3.amazonaws.com/i/jotbkvtkx8sk8vwutr03.JPG)

Now you have successfully added AirbnbCereal as a custom font in your React app and you can now use it anywhere inside your app.

In your styles, under font-family, you can set the font family as Bold, Black, Book, ExtraBold, Light, Medium.

![style](https://dev-to-uploads.s3.amazonaws.com/i/ye9wq8xya1yx8ff5a52h.JPG)

*Note that the values are not case sensitive.

Congratulations!! You have successfully added AirbnbCereal as a custom font to your React app.

*Note: AirbnbCereal is a licensed typeface and so legally, you are not allowed to use it in your applications.

Feel free to reach out if you're looking for a developer, have a question, or just want to connect. (kibuikacodes@gmail.com)

Cheers.
[JavaScript] Pass-by-value vs. Pass-by-reference
Tags: javascript
Published: 2020-06-05 07:28:14

>Before going forward with this article, I suggest you may read [Immutable vs. Mutable](https://dev.to/yukiki/mutable-vs-immutable-in-javascript-24o4)



### **1.Passing by value of primitive value**

**pass-by-value** means passing value/argument to function. The change to argument inside of function won't affect outside of function. But if you return function result, then that is another meaning.

```javascript
let a = 10;
function change(x) {
    x = 20;
}
change(a);
console.log(a); //10 not change
```


```javascript
let a = 10;
function change(x) {
    x = 20;
    return x;
}
console.log(change(a));//20
```



### **2.Passing by reference of object**
**pass-by-reference** means passing address instead of argument to call a function. Changing the value inside the function affect its value ouside of function. Array and object pass-by-reference.

```javascript
const person = {
    isStudent: true
};
function graduate(kid) {
    kid.isStudent = false;
}

graduate(person);
console.log(person.isStudent); // false; changed
```


So you will see *person* is declared outside the function *'graduate'*. When function is called, *person* 's value got mutated.

When you pass a reference to function, then function cannot change the reference to point to another object. An example as below:

```javascript
const person = {
    isStudent: true
};
function graduate(kid) {
    kid = {
        isStudent: false
    };
}
graduate(person);
console.log(person.isStudent); // true; no change
```


*'kid'* is another object, which is different from *'person'* object.
Understanding Kubernetes: part 30 – Deployment
Tags: kubernetes, devops, docker, beginners
Published: 2020-06-05 07:23:36

---
title: Understanding Kubernetes: part 30 – Deployment 
published: true
description: Serie of sketchnotes about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/48gvymqv4nbc307u0ayw.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way, more visual, to explain Kubernetes (and others technologies).

We continue the serie of Kubernetes Sketchnotes with a focus on an important resource, Deployment. 

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

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 120 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
Laravel Sanctum Authentication in Vue.js SPA Application
Tags: laravel, php, vue, javascript
Published: 2020-06-05 06:57:52

Laravel Sanctum is another laravel official package from Laravel Framework. Until 20 March 2020, it was Laravel Airlock. Due to trademark dispute, Taylor Otwell renames it with Laravel Sanctum and confirmed it with a [blog post](https://blog.laravel.com/airlock-renamed-to-sanctum "blog post"). It's a lightweight authentication package for working on SPA (Single Page Application) or simple API. Before discovering the package, let's have a look at what Laravel Sanctum offers us.

**Laravel Sanctum features**
* Simple API auth
* Issuing API Tokens
* Token Abilities
* Revoking Tokens
* SPA auth with CSRF protection
* Authenticating Mobile Applications

{% youtube 8Uwn5M6WTe0 %}

> [Tutorial: Laravel Sanctum Authentication in Vue.js SPA Application](https://www.youtube.com/watch?v=8Uwn5M6WTe0 "Tutorial: Laravel Sanctum Authentication in Vue.js SPA Application")
What’s your alternative solution? Challenge #58
Tags: challenge, javascript, codenewbie, learntocode
Published: 2020-06-05 01:37:25

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Calculate Fibonacci(500) with high precision (all digits)

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge52

println(fibonacci(500));

function fibonacci(n)
{
    if (n === 0)
        return "0";

    if (n === 1)
        return "1";

    var n1 = "0";
    var n2 = "1";

    for(var i = 2; i <= n; i++)
    {
        var sum = add(n1, n2);

        n1 = n2;
        n2 = sum;
    }

    return n2;
}

function add(sNumber1, sNumber2)
{
    var maxSize = Math.max(sNumber1.length, sNumber2.length);
    
    var s1 = sNumber1.padStart(maxSize, "0");
    var s2 = sNumber2.padStart(maxSize, "0");

    var s = "";
    var carry = 0;
    
    for(var i = maxSize - 1; i >= 0; i--)
    {
        var digit1 = parseInt(s1[i]);
        var digit2 = parseInt(s2[i]);
        
        var sum = digit1 + digit2 + carry;
        var digitSum = sum % 10;
        carry = sum >= 10 ? 1 : 0;

        s = digitSum.toString() + s;
    }
    
    if (carry > 0)
        s = carry + s;
    
    return s;
}

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.