teleren/devto huggingface dataset:
KVision v4.0.0 is released (major upgrade with lots of improvements)
Tags: kvision, kotlin
Published: 2021-02-14 18:55:42

---
title: KVision v4.0.0 is released (major upgrade with lots of improvements)
published: true
description: KVision is an open source web framework created for Kotlin/JS.
tags: kvision,kotlin
---

[KVision](https://kvision.io) is an open source web framework created for Kotlin/JS. It allows developers to build modern web applications with the Kotlin language.

I have released KVision 4.0.0. This is a major upgrade bringing a lot of significant changes and new features. 

After the information about the upcoming [sunset of Bintray](https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/) warmed the Java/Kotlin community, I've made the decision to move publication to Maven Central while changing group identifier and package name to `io.kvision` at the same time. This is a breaking change for all KVision projects, but a simple global replace should fix the problems. More details can be found in the [migration guide](https://kvision.gitbook.io/kvision-guide/part-1-fundamentals/migration).

Other highlights include:

- Update to Kotlin 1.4.30 with IR backend enabled by default in all templates and examples.
- Upgraded dependencies (Serialization 1.1.0-RC, Ktor 1.5.1, Javalin 3.13.3, Vert.x 4.0.2, Micronaut 2.3.2, Dokka 1.4.20, Gradle 6.8.1, Bootstrap 4.6.0, NPM Publish 1.1.1).
- Support bidirectional data binding for all form components.
- Support for custom serializers module in the `RestClient` component.
- Major performance optimizations.

Enabling IR by default can now significantly decrease the bundle size of most KVision projects, without much additional trouble.

For more details about this release see the [changelog](https://github.com/rjaros/kvision/releases/tag/4.0.0).

I've also published new example demo application, created with [Patternfly UI toolkit](https://www.patternfly.org/). It presents how easy it is to create KVision application with a modern design system alternative to Bootstrap, even without direct support for this toolkit. You can find sources in the [kvision-examples](https://github.com/rjaros/kvision-examples/tree/master/patternfly) GitHub repo and [live demo here](https://rjaros.github.io/kvision-examples/patternfly/).
Note: The application is heavily inspired by the [Patternfly Kotlin project demo](https://patternfly-kotlin.github.io/patternfly-fritz2-showcase/#user-demo).

Don't forget to ⭐️ my [project](https://github.com/rjaros/kvision) if you like it!

As always, any feedback is appreciated!
Play with Header on Page Transitions
Tags: css, html, javascript, beginners
Published: 2021-02-14 18:48:45

Author:- Paulina Hetman

<p>Inspired by the header from my personal website <a href="https://pehaa.com" target="_blank">https://pehaa.com</a> built with Nuxt.js</p>

{% codepen https://codepen.io/pehaa/pen/wvBLpNK %}
Extend input type=“number” with modifiers
Tags: codepen, input
Published: 2021-02-14 18:48:23

---
title: Extend input type=“number” with modifiers
published: true
tags: codepen, input
---
<h2>Add keyboard modifiers to input type=“number”</h2>
<p>When you use <code>input type=“number”</code> the user can change the number by the specified value of the value specified in the <code>step</code> attribute. I wanted the let the user step by default with <code>0.01</code> but also wanted the user to be able to hold down <code>SHIFT</code> and change by <code>0.1</code> and <code>ALT</code>/<code>CMD</code> to change by <code>1.00</code>.</p>

<p>I added two event listeners for <code>keydown</code> to activate the modifier and <code>keyup</code> to disable the modifier.<p>

<pre>
// This is pretty neat!
// Changes the step value on the input type number step value
// No modifiers => step = .01
// SHIFT => step = 0,1
// ALT (or CMD) => step = 1
eleMatrix.addEventListener("keydown", (evt) => {
  const { altKey, shiftKey, metaKey } = evt as KeyboardEvent;
  const target = evt.target as HTMLInputElement;
  if (altKey || metaKey || shiftKey) {
    target.step = altKey || metaKey ? "1" : "0.1";
  }
});
eleMatrix.addEventListener("keyup", (evt) => {
  const { altKey, shiftKey, metaKey } = evt as KeyboardEvent;
  const target = evt.target as HTMLInputElement;
  if (altKey || metaKey || shiftKey) {
    target.step = altKey || metaKey ? "1" : ".1";
  } else {
    target.step = ".01";
  }
});</pre>

<p>You can try out the effekt in this pen.</p> 

{% codepen https://codepen.io/netsi1964/pen/JjbENzQ %}
What would be a good first project in Ruby?
Tags: ruby, watercooler, help
Published: 2021-02-14 18:31:41

I want to try Ruby since it's got a major release (3.0). What would be a good first project to do in Ruby? I'm okay with using gems, and I'm probably okay with trying out Rails (though it seems a bit harsh for a newcomer with all the code it generates).
Don't learn a new language using a book
Tags: books, languages, learning
Published: 2021-02-14 18:28:24

Back in the 2000's, before the invention of YouTube, people used to learn new programming languages using books and manuals. While books may be a good way to learn things in general, they are not the _most_ effective when it comes to learning a programming language. 

# Books cost money
First of all, books are not free. It costs money to print a book and physically get it to you. You may argue that online resources like courses are not always free and you are right. Websites like Udemy offer lot's of courses for learning programming languages and they are mostly paid. But there are a **lot** of free resources on the internet, like w3schools.com and, of course, **YouTube**.

# Digital resources are more convenient
Something else to consider, is that when using online resources, you can code along. With a book, you have to clear space on your desk and flip the pages aswell. While this my not be an issue for most people, it is still more convenient to use a digital resource.

# Live examples
An important thing to point out, is that websites like w3schools.com often have live previews so you can see what a given block of code does. This helps you to visualize what the given code does and also play around with it. Books can not do this, for obvious reasons.

So next time you want to learn a new programming language, the browser is the place to go :D

Thank you for your attention.
Quick conversion of Enums into Tables for Hasura
Tags: database, graphql
Published: 2021-02-14 18:24:41

**tldr;** I have a ton of Enums in my pretty schema but now Hasura tells me they want tables instead! Here is a script #regexForTheWin

---

## Why?
Hasura recommends `Tables` versus `Enum` types [see why here](https://hasura.io/docs/1.0/graphql/core/schema/enums.html#enums-in-the-hasura-graphql-engine)

## How it works.js
Given a sql string with CREATE TYPEs. .. in it, convert them to CREATE TABLE.

## Don't forget
Tell hasura to use those tables as enum tables and don't forget to update the fields that used to reference your enums by pointing to the table and adding foreign keys. For example:

```
ALTER TABLE myschema.users ADD CONSTRAINT
  myschema."usersStatus_fkey" FOREIGN KEY (status) REFERENCES myschema."Status";
```

### Here is the gist of it:
{% gist https://gist.github.com/oliviermills/e32086d755da37625cb70a06cf806bce file=convertEnumToTable.js %}

### What you get
{% gist https://gist.github.com/oliviermills/e32086d755da37625cb70a06cf806bce file=output.sql %}
Write good PHP - Lookup-arrays
Tags: php, programming, webdev
Published: 2021-02-14 18:23:57

You have a list of potential values to return, dependent on a value to evaluate. A super common operation, right? You'll instantly think, chuck in an if statement, or even a switch, and call it a day - let's see an example. We want to return the relatives name based on the relation (Does anyone else forget names easily??):

```php
$relative = $_GET['relative'];

if($relative == 'mother') {
    return 'Harriet';
}

if($relative == 'father') {
    return 'Robert';
}

if($relative == 'daughter') {
    return 'Rachel';
}

if($relative == 'grandmother') {
    return 'Audrey';
}

// imagine 10 more! 
```

This is a perfectly adequate solution: but you'd probably want to use a switch, to simplify it even further:

```php 
$relative = $_GET['relative'];

switch ($relative) {
    case 'mother':
        return 'Harriet';
        break;
    case 'father':
        return 'Robert';
        break;
    case 'daughter':
        return 'Rachel';
        break;
    case 'grandmother':
        return 'Audrey';
        break;
    default:
        return 'relative not found!';
}
```
Great, this feels much more structured, but it's quite heavy on syntax, right? Perfectly serviceable, but let's take it one step further.

Enter lookup-arrays. A lookup array is a key-value paired list, where the key is what is looked up! 

The above, in the form of a lookup-array is:
```php
$relative = $_GET['relative'];

$relatives = [
    'mother' => 'Harriet',
    'father' => 'Robert',
    'daughter' => 'Rachel',
    'grandmother' => 'Audrey',
];

return $relatives[$relative] ?? 'relative not found!';
```

You can see how much easier to read a lookup-array is, and how it dramatically reduces the quantity of code, in a concise way! To note, lookup-arrays aren't always the best choice, but when they are, it should feel pretty natural!

Thanks for reading - let me know your thoughts!
Dos formas de unir objetos en JavaScript
Tags: javascript, tips, objectos
Published: 2021-02-14 18:12:04

Aquí tienes dos formas de unir objectos fácilmente en JavaScript. Olvidate de complicarte la vida con librerías como lodash. Una tarea tan sencilla como esta se soluciona fácilmente:

```javascript
const animales = {
    hamster: '🐹',
    koala: '🐨',
    leon: '🦁',
    perro: '🐶'
};

const insectos = {
    mosca: '🪰',
    abeja: '🐝',
    mosquito: '🦟',
    hormiga: '🐜'
};

const resultado = { ...animales, ...nombres };
const resultado2 = Object.assign({}, animales, nombres);
```

El resultado para ambos objectos `resultado` y `resultado2` sería el mismo:

```javascript
Object {
  abeja: "🐝",
  hamster: "🐹",
  hormiga: "🐜",
  koala: "🐨",
  leon: "🦁",
  mosca: "🪰",
  mosquito: "🦟",
  perro: "🐶"
}
```

Puedes ver el codigo funcionando en [este Codepen](https://codepen.io/alextomas80/pen/gOLgNjX).

> Artículo original en [Dos formas de unir objetos en JavaScript](https://alextomas.com/blog/dos-formas-unir-objetos-javascript)

Y esto es todo. Espero que te pueda servir 😉
The hidden gem of Perl advent calendars of 2020
Tags: perl
Published: 2021-02-14 17:47:24

We had advent calendars once again this year :smiley:
![Yeah Kiss](https://dev-to-uploads.s3.amazonaws.com/i/3nb4l1imqqf87fk29a85.gif)

There was the [Perl advent calendar 2020](http://perladvent.org/2020/) that was special this year since it was a "best of".

There was also the [Raku advent calendar](https://raku-advent.blog/) where I even contributed an article about [performances, profiling and optimizations](https://raku-advent.blog/2020/12/10/day-10-my-10-commandments-for-raku-performances/) :sunglasses:

And the [Twelve days of dancer](https://advent.perldancer.org/2020) :dancer:

I think there was no **Mojolicious** advent calendar this year (?!).

Except if I forgot one (please comment!) this is the list of Perl related advent calendars... But STOP! There was an hidden gem that traversed december while being relatively unnoticed.

[Paul "Leonerd" Evans](https://metacpan.org/author/PEVANS) delivered a complete [Perl advent calendar 2020](http://leonerds-code.blogspot.com/2020/12/2020-perl-advent-calendar-day-1.html) (alone! :astonished:)

To be honest, I discovered recently and haven't had time to read it, but I wanted to share the link :grin:

The advent calendar discusses asynchronous control flow which is a very interesting but complex topic. 

It's the second time he produced an advent calendar alone (see his [Perl advent calendar in 2013](http://leonerds-code.blogspot.com/2013/12/futures-advent-day-1.html)).

I recognize the effort when it personally takes me a lot of time to write blog posts, maybe because I'm not an English native speaker, but also because it simply just takes a lot ot times to write blog posts.

This guy clearly deserves a medal.

Without mentioning that [he is writing a core Perl feature blog serie](https://dev.to/mjgardner/paul-evans-writing-a-core-perl-feature-110e) and [he pushed de-experimentalising "signatures"](https://github.com/Perl/perl5/issues/18537) that was very well received.
![Emojis](https://dev-to-uploads.s3.amazonaws.com/i/nk6v8qqosn56hz8gpnx7.png)

And on top of that, he's a core Perl contributor.
![Strong](https://dev-to-uploads.s3.amazonaws.com/i/ze9didry8rai9ne72ytz.png)
How to get free Webhosting?
Tags: 100daysofcode, webdev, wordpress, html
Published: 2021-02-14 17:40:13

in this video, I will tell you about free hosting!
https://youtu.be/OdBxtw9XkP0

#freewebhosting

#programming #100daysofcode #webdeveloper #webdeveloper #code #webseries #webdevelopment #webdesign #website #codinglife #hosting
Git Metric - Solving the Pain of Measuring a Project Migration
Tags: showdev, opensource, webdev, javascript
Published: 2021-02-14 16:21:03

## The Pain of Measuring a Project Migration
In the past few years I've had the chance to participate in ongoing project migrations like AngularJS to React, or JavaScript to TypeScript. Such migrations are usually incremental and take time. 
In most cases, it's hard to analyze what's the status of the migration: 
* Are we keeping a certain velocity, or are we slowing down? 
* Do we obey defined rules, like stop adding AngularJS files when migrating to React?
* Which developer contributed the most to the migration? 


## Enter Git Metric
In an attempt to help with such questions, I've recently published a small utility called [Git Metric](https://github.com/omril321/git-metric). I believe it can help tracking the progress of most project migrations.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h3f22fk6mmiwufqjn3ef.png)

If you are in the middle of a project migration, Git Metric can be useful for you.
With Git Metric you can quickly analyze git repository's history within minutes. Simply define the metrics you want to track (like specific file extensions, or a certain keywords in specific files) - and get a complete and holistic view of your project. You can find more details [here](https://github.com/omril321/git-metric).

 I'd love to hear your thoughts about it :smile:
Object-Oriented JavaScript and Address Books
Tags: javascript, codenewbie, webdev, beginners
Published: 2021-02-14 17:23:14

# Address Book: Objects Within Objects

### **Examples**

---

Add contacts to an `AddressBook` with its constructor and prototype methods:

**scripts.js**

```jsx
// Business Logic for AddressBook ---------
function AddressBook() {
  this.contacts = {};
}

AddressBook.prototype.addContact = function(contact) {
  this.contacts[contact.firstName] = contact;
}

// Business Logic for Contacts ---------
function Contact(firstName, lastName, phoneNumber) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.phoneNumber = phoneNumber;
}

Contact.prototype.fullName = function() {
  return this.firstName + " " + this.lastName;
}
```

# Unique IDs

# **Example**

---

Here's how `scripts.js` will look by the end of the lesson:

**scripts.js**

```jsx
// Business Logic for AddressBook ---------
function AddressBook() {
  this.contacts = {};
}

AddressBook.prototype.addContact = function(contact) {
  contact.id = this.assignId();
  this.contacts[contact.id] = contact;
}

AddressBook.prototype.assignId = function() {
  this.currentId += 1;
  return this.currentId;
}

// Business Logic for Contacts ---------
function Contact(firstName, lastName, phoneNumber) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.phoneNumber = phoneNumber;
}

Contact.prototype.fullName = function() {
  return this.firstName + " " + this.lastName;
}
```

# Finding and Deleting Contacts

# **Examples**

---

Find a `Contact`:

```jsx
AddressBook.prototype.findContact = function(id) {
  if (this.contacts[id] != undefined) {
    return this.contacts[id];
  }
  return false;
}
```

Delete a `Contact`:

```java
AddressBook.prototype.deleteContact = function(id) {
  if (this.contacts[id] === undefined) {
    return false;
  }
  delete this.contacts[id];
  return true;
}
```
Protect user uploads with Laravel
Tags: laravel, php
Published: 2021-02-14 16:41:52

In the Laravel, you can protect your uploaded files access, restricting by authenticated user, with a simple code.

Move the uploaded file to `local` disk:

```php
$path = $request->file('file')->store('photos', ['disk' => 'local']);
return Photo::create(['path' => $path]);
```

```php
Route::get('photo/{id}', function (Photo $photo) {

    $disk = Storage::disk('local');

    return response($disk->get($photo->path), 200, [
        'content-type' => $disk->mimeType($photo->path)
    ]);

})->middleware('auth');
```
JavaScript Primitives have methods and properties! Wait what?
Tags: discuss, javascript, python, programming
Published: 2021-02-14 16:33:25

{% youtube phglBX1FHuc %}

Hey guys! How are you?

Last time, I was discussing with a colleague that everything in Python was an object. Even numbers. To show this, I just did the following:
```py
print((2).__add__(2)) # should print 4
```
That is, numbers have *methods*.
The same is true for other programming languages like Ruby.
However, in basically every other programming language (including JavaScript) we do have primitives. How do we create them? Well, with single or double quotes, like this:
```js
let a = "foo"
```
If we take the type of this variable it will be of type string:
```js
console.log(typeof a) // "string"
```
How do we create string objects? Like this:
```js
let b = new String(a)
console.log(typeof b) // "object"
```
Thus, if we compare the values of `a` and `b` we will get:
```js
console.log(a == b) // true
console.log(a === b) // false
```
As you know, the `==` operator will compare for equality after doing any necessary type conversions. The `===` operator won't do any conversion. And as `a` and `b` are of different types, then we get `false`.

We can also get primitives from `String` calls in a non constructor context. That means, called without the `new` keyword). 

```js
let c = String(a)
console.log(typeof c) // "string"
console.log(a == c) // true
console.log(a === c) // true
```
As you see, this time the `===` operator returns `true` because `a` and `c` are both primitives.

## But then, why we can call methods of primitives?

Certainly, we can do something like this:

```js
console.log(a.length) // 3
console.log(a.toUpperCase()) // "FOO"
```
We can get the `length` property of a primitive and call a `toUpperCase` method. Wait what? How can a primitive have *properties* and *methods*? 

Well, they don't. It depends on the **context**.

When a method is to be invoked on a primitive string or a property lookup occurs, JavaScript **will automatically wrap the string primitive and call the method or perform the property lookup**.

The same happens with the other primitives in JavaScript:

* Number
* BigInt
* Boolean
* Symbol

To get the primitive value from these objects, just call the `valueOf()` method. For example:

```js
let d = b.valueOf()
console.log(a == d) // true
console.log(a === d) // true
```

Pretty cool!
DSA #1😎✌🎉
Tags: programming, coding, beginners, todayilearned
Published: 2021-02-14 16:27:44

Hi, Guys ...
   Let me tell u what I did today towards my goal 
if u don't my goal then check this out:https://dev.to/thedharsan/my-power-pack-goal-for-the-next-7-5-months-roadmap-2jai

NOTE: if u want to learn what I am learning I will provide the resource that u can also learn from and continue!!

1.Learned about Time complexity

resouce:https://www.geeksforgeeks.org/analysis-algorithms-big-o-analysis/?ref=leftbar-rightbar

2.Learned about Array Data Structure:

resource:https://www.geeksforgeeks.org/array-data-structure/

what I learned:
       *operations in array(insertion,deletion,..etc)
       *Largest element in Array
       *Second largest element in Array
       *Check if the array is sorted
       *Reverse an Array
       *Remove Duplicates in array
       *Move Zeros to end
       *Left rotate array by one and by d places also
       *Leaders in array
       *Maximum difference Problem with order
       *Frequencies in a sorted array 

These questions mention above solve from naive to the optimized way
you can search in GFG for problems and solutions also.


link for SDE Sheet:https://docs.google.com/document/d/1SM92efk8oDl8nyVw8NHPnbGexTS9W-1gmTEYfEurLWQ/edit
And For SDE sheet Part:

 1.Sort an array of 0’s 1’s 2’s without using extra space or sorting Algorithms 

2.Kadane’s Algorithm 



See you tomorrow in post guys✌👍😎!!!
Google search is experimenting with Dark mode
Tags: google, webdev, darkmode
Published: 2021-02-14 16:26:21

---
title: Google search is experimenting with Dark mode
published: true
description: Soon, the world most visited website will have Dark Mode support
tags: google, webdev, darkmode
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/y2wkz8e6pa8qzn5n9q0v.png
---

## __Introduction__

In User Interface (UI) design, Dark mode (or Dark theme) is a website design trend where a website offers its users a totally different look suitable for low lighting situations.

Dark mode was among the breakout design trends of 2020. Now, Google, the worlds most visited website is testing Dark Mode on its search website.

<hr>

Few days ago, I was a using the search engine when I saw a notification to try out Dark Mode (for now, Google calls it Dark theme). I clicked on it, and I was redirected to [https://google.com/preferences](https://google.com/preferences).

I scrolled down the page and saw `Appearance` settings after `Auto complete with trending search` settings as shown in the image below:

![Appearance settings on Google search website](https://dev-to-uploads.s3.amazonaws.com/i/eumt0lo15js2dsh005tm.png)

As usual, I clicked on `Dark theme`, and scrolled down and saved the settings and navigating to [https://google.com](https://google.com), I was greeted with this design:

![Google search homepage in dark mode](https://dev-to-uploads.s3.amazonaws.com/i/y2wkz8e6pa8qzn5n9q0v.png)

I performed a search, and it looked like the following:

![Search result on Google in dark mode](https://dev-to-uploads.s3.amazonaws.com/i/ytuan7thv4v4mmqmep5o.png)

## __Note__

The original title of this post was `How to enable dark mode in Google search`, but as I was typing this article, I decided to switch to dark mode (because I liked it) then I notice the `Appearance` setting is __no longer available__ after `Auto-complete with trending searches` as shown in the image below:

![Google search preference settings](https://dev-to-uploads.s3.amazonaws.com/i/ljisp2ac3t2db69e4wgc.png)

A little Google search revealed, __the Dark mode was a test__ made available to some lucky users (lucky me! 😉).

Nonetheless , when Dark mode is available for everyone on Google search, I'll update this article.

## __Conclusion__

It's evident this was test by Google on its search engine, but due to the current _whiteness_ of the search engine, I think most users will use the Dark mode feature when it becomes globally available.
Try to sketch your technical docs
Published: 2021-02-14 16:20:07

<sub><span>Photo by <a href="https://unsplash.com/@nspm">Nicolás Pinilla</a> on <a href="https://unsplash.com/s/photos/sketch">Unsplash</a></span></sub>

It's very complicated to do good documentation.
It has to be organized, accurate, and easy to read. Visual can help greatly the documentation. And *organic* visuals are great for people to get an idea.

That's why I'm trying to use sketch to understand what we document, and how to to do it.

I have found 2 tools:

- [Sketchpad](https://sketch.io/sketchpad/)
- [Excalidraw](https://excalidraw.com/)

So far, i have identified the following:
- identify which actors the drawings 
- think about your design
- try to draw a complex scenario to find missing things
- draw


Hope this helps !