teleren/devto huggingface dataset:
Daily Challenge #39 - Virus
Tags: challenge
Published: 2019-08-12 13:23:17

---
title: Daily Challenge #39 - Virus
published: true
description: 
series: Daily Challenge
tags: #challenge
---

You've just finished writing the last chapter for your novel when a virus suddenly infects your document. It has swapped the 'i's and 'e's in 'ei' words and capitalized random letters. In today's [challenge](https://www.codewars.com/kata/583710f6b468c07ba1000017), you will write a function which will:

a) remove the spelling errors in 'ei' words. (Example of 'ei' words: their, caffeine, deceive, weight)

b) only capitalise the first letter of each sentence. Make sure the rest of the sentence is in lower case.

> Example: He haD iEght ShOTs of CAffIEne. => He had eight shots of caffeine.

Good luck and Happy Coding~!

***
_This challenge comes from kkavita92 on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Exploring React
Tags: react, javascript
Published: 2019-08-12 12:53:45

Seems like I've been exploring a lot these days. That means I've to settle down and build actual projects. So, this time it's the all popular React. I must say, I imagine writing components for every little thing that needs to get done. At the end, My project would have >= 80 JS files. 😅 Just Kidding.

But that's just imagination. Right now, I'm still learning the ropes. I understand that components are created either by:
1. Using class syntax
2. Using functions which receive props as arguments
After creating components, they are rendered using 
```javascript
ReactDOM.render(<Component />, desired-node)
```
#Something a little more real
Let's assume we have a div with id = "test node" <div id = "test-node"></div> If we want to fix stuff in it using react, it would probably go like this.
```javascript
class MyComponent extends React.Component {
  constructor (){
    super()
  }
  render (){
    return (
      <div>
        <h1>Just another boring text in a component</h1>
      </div>
    )
  }
};

ReactDOM.render(<MyComponent />, document.querySelector('#test-node'))
```
I hope I stick to this thing called React. --There are a million websites trying to teach me react--. I probably stick to it.
Build React Carousel -Part2
Tags: react, javascript, css, html
Published: 2019-08-12 12:53:03

**This part I will show adding css to get the structure.**
![](https://thepracticaldev.s3.amazonaws.com/i/cfimvcz6x9y2g2sq840e.png)

As we can see slides inside _carousel-inner-container_ will come inline and will change the left and right position. the outer container _carousel_ will maintain the width of the visible area and overflow content will not be visible.

full css is here
{% gist https://gist.github.com/nabaraj/3772aa105b02f1c599d1956d82a297d6.js %}
Ripple button with VueJS
Tags: codepen, vue, design, showdev
Published: 2019-08-12 12:50:07

<p>Just a simple retro'ish ripple button with few Javascript (VueJS) codes for events and some sort of controls.</p>

<p>I tried to re-design the animation, and the movement of the pen that I did before. I tried to improve it, but I think, it still needs an improvement. I still have to study more, and redo it.</p>

---

# How it works

### Placing of a ripple

<p>With the source code below, we can put the location of a ripple.</p>

```javascript
// Get the exact location of the button from the screen.
let pos = el.getBoundingClientRect();

// 'this.ripples' is a looped variable for the ripples element.
this.ripples.push({
	x: e.clientX - pos.left,
	y: e.clientY - pos.top
});
```

### Expansion of a ripple

<p>The expansion of a ripple is made in CSS animation.</p>

```css
.ripple {
	background-color: #ff1ead;
	width: 1rem;
	height: 1rem;
	position: absolute;
	border-radius: 50%;
	/* After we placed the ripple, this code below will put the ripple element at the center of the clicked area */
	transform: translateX(-100%) translateY(-100%);
	mix-blend-mode: screen;
	animation: ripple 1000ms ease-out forwards;
}

/* From original position, we are going to scale the element to 1rem * 50. It is somehow enormous, and it will occupy the whole space of the button, and then, set the opacity to 0. */
@keyframes ripple {
	0%   { transform: translate(-100%, -100%); }
	80%  { transform: translate(-100%, -100%) scale(50); }
	100% { transform: translate(-100%, -100%) scale(50); opacity: 0; }
}
```

### After animation

<p>After the animation, we have to destroy the element, so that our element will not be flooded by a ripple element.</p>

```javascript
// You will notice the code below at the template of the component.
// v-on:animationend="rippleEnd(i)"
// It is an 'onanimationend' event that will be triggered after the CSS animation was ended.

// Yes, I simply spliced the element from the ripples array.
rippleEnd: function(i) {
	this.ripples.splice(i, 1);
}
```

* About [onanimationend](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onanimationend).

---

# Suggestions

<p>This behaviour is not yet perfect. Especially, when the animation was ended, you can't put any ripples after a second (The exact animation time). I don't know if this is a bug, or there is something I did not do well. So if some of you got a suggestion, please comment down below. Very much appreciated.</p>

<p>Thank you!</p>

{% codepen https://codepen.io/takaneichinose/pen/KJVLqm %}
Do you know Vim can execute normal mode command while in insert mode?
Tags: vim, productivity, insertmode, discuss
Published: 2019-08-12 12:09:12

---
title: Do you know Vim can execute normal mode command while in insert mode?
published: true
description: When I did, it changed my vim editing life - for the better
tags: vim, productivity, insertmode, discuss
canonical_url: https://irian.to/blogs/vim-insert-command-mode
---

*Follow [@learnvim](https://twitter.com/learnvim) for more Vim tips and tricks!*

Vim has been my go-to editor for the last 1.5 years, yet I am still learning something new. Recently I learned about "Insert Normal" mode and I'd like to share how you can use this mode to code faster in vim!

![typing-300wpm](https://thepracticaldev.s3.amazonaws.com/i/bz9018prk4ltg68i90tu.gif)

Feedbacks are highly appreciated. If you think of more ways to save keystrokes using this mode, feel free to share in the comments!

# What the heck is insert-normal mode?

Glad you asked! 

It is a mode in insert mode where you can execute normal mode commands. Instead of switching modes from `insert` -> `normal` -> (do normal mode stuff) -> `insert`, you can execute normal code commands while remaining in insert mode.

_All you need to do is to press **`C-o`** while in insert mode._

How can you tell that you're in insert-normal mode? In insert mode, you can see `-- INSERT --` indicator on bottom left. If we press `C-o`, it will change into `-- (insert) --`.

**Important**: you can only execute one command in this mode. After executing a normal mode command, you're back to insert mode.

Even with this limitation, this is still a powerful feature. Let's give some examples what we can do with insert-normal mode.

# Example 1: Navigating while remaining in insert mode

Let's say while typing, you wanted to add a word in the beginning of current line. Do `C-o 0` to jump to the beginning of the line, add the word, then jump back with to the end with `C-o $`. 

Maybe you are adding something after comma in the same line, just do `C-o T ,` and you'll jump right after the comma. `C-o $` to jump back to the end. 

You can always mix it with other vim motions. I find `H, M, L, [], ()` useful for quick navigation.

# Example 2: Centering screen

I am typing this article in vim. As I am typing this, I am at the bottom of the screen. I can center my current position by doing `C-o zz`.

# Example 3: Repeating characters

Say I want to type `*` 100 times. I can just type `C-o 100 i * <esc>` (the downside is, this will force you to leave insert mode).

# Example 4: Deleting faster

If I wanted to delete a block of text from my current position to an anchor, say a comma, I can just do `C-o d T ,` 

# What's next?

These are some ways we can take advantage of insert-normal mode. 

I am interested to learn how other devs can take advantage of insert-normal mode. _What other ways do you guys think insert-normal mode can be used?_
1 to 50 - MAN VS SELENIUM
Tags: selenium, automation, python, challange
Published: 2019-08-12 10:16:38

---
title: 1 to 50 - MAN VS SELENIUM
published: true
description: An example of how selenium can work to automate a little game.
tags: Selenium, Automation, Python, Challange
---

With some friends we discover the game [1To50](http://zzzscore.com/1to50/en/?ts=1565597472067#). 

_THE GAME_

The game consists of a grid composed of 25 boxes, in every box there is a number from 1 to 25.
After clicking the box, the number inside is replaced with a number from 26 to 50. 
The player should click the numbers in increasing order from 1 to 50.
![](https://thepracticaldev.s3.amazonaws.com/i/rmf68m0bhy9kf4r8b6yd.PNG)

_Human problems_  
The human player has the following problems:
1. The man has trouble to remember the order of all numbers when he is trying to play the game in a fast way.
2. The man has difficulty to click fast the numbers.
  * Move the cursor take time 
3. After the number 26 the man should find the numbers.

The result of my friends are in the range 45 seconds and 35 seconds.
(I'm terrible, my best result is 43 seconds)

_The challange_
In order to defeat my friends I decided to automate the game with Selenium.

The first thing to do is open the page. (I used firefox [geckodriver]):
```python
driver = webdriver.Firefox(executable_path=path_geckodriver)
driver.get("http://zzzscore.com/1to50/en/?ts=1565597472067#")
```

After opening the page i need to find the grid where all the numbers are
```python
grid = driver.find_element_by_id('grid')
```

The last thing is make a loop to click in increasing order all the numbers inside the grid
```python
for number in range(1, 51):
    grid.find_element_by_xpath('//div[text()={}]'.format(number)).click()
```

DONE!
The final code to automate the game is:
```python
from selenium import webdriver
path_geckodriver = r"path_where_is_the_geckodriver"

driver = webdriver.Firefox(executable_path=path_geckodriver)
driver.get("http://zzzscore.com/1to50/en/?ts=1565597472067#")
grid = driver.find_element_by_id('grid')
for number in range(1, 51):
    grid.find_element_by_xpath('//div[text()={}]'.format(number)).click()
driver.close()
```


All the human problems are removed.


The final results of the software is:
__**5.802 seconds**__

35 seconds of difference(80% less time)


__NEW WAY TO SEE__
Do you know different way to automate the game?
Is it faster or slower?
Let's talk about.
I'm curious to know and learn new things.
EoPL + Elm Weekly Status Update 2
Tags: eopl, elm, plt
Published: 2019-08-12 12:05:18

---
title: EoPL + Elm Weekly Status Update 2
published: true
description: 
tags: eopl, elm, plt
series: EoPL + Elm Weekly Status Updates
---

## What I accomplished

I completed [all the exercises for Chapter 1](https://github.com/dwayne/eopl3/tree/168014d359cf1c76c4bf0fcd837c0fa874b18a86#chapter-1).

I finished reading Chapter 2 and I wrote up my [notes](https://github.com/dwayne/eopl3/blob/168014d359cf1c76c4bf0fcd837c0fa874b18a86/04-ch2.md). However, I didn't complete the 10 exercises from Chapter 2 like I planned.

## What I plan to do

Chapter 2 has 30 exercises so I will do at least 5 exercises per day in order to complete all of the chapter's exercises.

Secondly, I will start to read Chapter 3 - Expressions and write up my notes on it.

Finally, I will start to implement, using Elm, each of the interpreters it describes. However, I don't plan to finish this task by next week.

## What's blocking me

Nothing at the moment.
LinkeInLogin
Tags: sociallogin, androidapp, linkedinlogin
Published: 2019-08-12 12:02:44

LinkedInLogin: It is the simplest way to social login for android app users.

This provides the web view to Login with LinkedIn and getting callback to your activity or fragment

Here are the key features:Integrate LinkedIn Login

If you wanted to know how we made this product check code here: **[Easy LinkedIn Login](https://github.com/Mindinventory/LinkedInLogin)**
Noob Logo: Just a Concept
Published: 2019-08-12 11:43:51

Just a Wallpaper, I made to relay the concept of the Noob Logo, I just cooked up.

![](https://i.ibb.co/vZDQF2V/noob-wallpaper-1920x1280.jpg)

[Download 1920x1280 Wallpaper](https://i.ibb.co/vZDQF2V/noob-wallpaper-1920x1280.jpg)

Waiting for your feedback.
Boolean arguments to functions in Python
Tags: python
Published: 2019-09-12 07:50:44

---
title: Boolean arguments to functions in Python
published: true
tags: python
canonical_url: https://ivergara.github.io/boolean-arguments-to-functions-in-python.html
---

Recently I did read the following [short piece](https://martinfowler.com/bliki/FlagArgument.html) from M. Fowler regarding the use of boolean flags in function signatures. I’ll wait while you read it… done? Good!

As a general rule, I completely agree with him. They can be confusing, and should, in general, be avoided (easier said than done). But the article got me to reflect on this advice in the context of Python.

The example shown in the article would translate to Python (with type annotations and following PEP8) as follows

```python
class Concert:def book(self, customer: Customer, is_premium: bool):
    ...
```

This definition does indeed has all the downsides mentioned in the article. But what if we use the `keyword argument`-only feature of Python?

```python
class Concert:def book(self, customer: Customer, *, is_premium: bool = False):
    ...
```

In this case, by adding the `*` in the signature, one is forced to mention the name of the argument when calling the function. Thus, a call like the following one

```python
a_book = concert.book(customer, True)
```

will raise a `TypeError` exception. Then, the correct way to call the function would be

```python
a_book = concert.book(customer, is_premium=True)
```

There is no ambiguity as to what the flag points to, completely transparent and explicit.

However, since in most cases a boolean flag implies some branching in the code of the function, this approach still has some downsides that could be avoided by getting rid of such boolean flag.

Ultimately, it’s a matter of judgment as with everything. If the function has basically one of such flags that have a very restricted function, it’s still manageable.
Deploying Laravel on shared Hosting
Tags: php, laravel, webdev, sharedhosting
Published: 2019-08-12 09:59:55

---
title: Deploying Laravel on shared Hosting
published: true
description: If you are here, you are probably exploring how laravel works on shared hosting, on some low-budget project or just have reasons you prefer shared hosting. Alright, let's get down to business.
tags: php,laravel,webDev,sharedHosting
canonical_url: https://voidnerd.com/posts/deploying-laravel-on-shared-hosting
---

If you are here, you are probably exploring how laravel works on shared hosting, on some low-budget project or just have reasons you prefer shared hosting. Alright, let's get down to business.

Here are the steps to get laravel up and running on shared hosting:

(1) Run `php artisan config:clear`; this clears the cache config. Since you are going to be editing `.env` online; you don't need your local configurations cached.

(2) Export Your migrated Database to a file (db.sql) without the `create database` statement, like so:

```sql
DROP TABLE IF EXISTS `users`;

CREATE TABLE `users` (
 `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
 `title` varchar(255) DEFAULT NULL,
 `name` varchar(255) NOT NULL,
 `facebook_id` varchar(255) DEFAULT NULL,
 `google_id` varchar(255) DEFAULT NULL,
 `linkedin_id` varchar(255) DEFAULT NULL,
 `tagline` varchar(255) DEFAULT NULL,
 `email` varchar(255) DEFAULT NULL,
 `username` varchar(255) DEFAULT NULL,
 `email_verification_code` varchar(255) DEFAULT NULL,
 `email_verified_at` timestamp NULL DEFAULT NULL,

 `password` varchar(255) DEFAULT NULL,
 `remember_token` varchar(100) DEFAULT NULL,
 `created_at` timestamp NULL DEFAULT NULL,
 `updated_at` timestamp NULL DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB;

DROP TABLE IF EXISTS `password_resets`;

CREATE TABLE `password_resets` (
 `email` varchar(254) NOT NULL,
 `token` varchar(254) NOT NULL,
 `created_at` timestamp NULL DEFAULT NULL,
 KEY `password_resets_email_index` (`email`)
) ENGINE=InnoDB;
```
(3) go to `MultiPHP Manager` on c-panel and confirm you have php 7.1 or higher.

(4) Zip the finished project (we will call this **myproject** from now on) and upload to root directory of hosting storage through File Manager (c-panel) or FileZilla; it should be something like `/home/domain-name`.

(5) Extract myproject in root directory(`/home/domain-name`) of hosting storage.

(6) Enable "Show Hidden Files". This is so you could see files like .htaccess, .env, etc.

(7) In `myproject/public`, move all it's contents to `/public_html`.

(8) Now edit  `/public_html/index.php` to point to your laravel project, like so:


```php
//previous state
require __DIR__.'/../vendor/autoload.php';

// changed to
require __DIR__.'/../myproject/vendor/autoload.php';

//previous state
$app = require_once __DIR__.'/../bootstrap/app.php';

//changed to
$app = require_once __DIR__.'/../myproject/bootstrap/app.php';

```


(9) Edit .env in `/myproject` with your config keys

(10) Import and run the `db.sql` script you exported earlier on your created database through phpmyadmin on c-panel.

The end!
Svelte vscode component extractor tool
Tags: svelte, vscode
Published: 2019-08-12 09:43:52

Made this vscode extension that helps to extract a component

1. Highlight code you want to extract
2. Ctrl + Shift + P to run command pallete
3. Select "Svelte Extract Component"
4. Input new component Name
5. Your new component is created and imported

![Svelte Component Extractor Demo](https://media.giphy.com/media/UthaofeoJ7Dx4fGFAu/giphy.gif)

you can find it here
https://marketplace.visualstudio.com/items?itemName=proverbialninja.svelte-extractor
Will Java be as widely used in five years? 
Tags: java, discuss
Published: 2019-08-12 09:34:03

[Interesting interview on our blog](https://www.client-server.com/blog/2019/08/the-story-is-java-future-proof) with three senior engineers about the future of Java. Interesting points made about cold start ups, hopes for new releases, and the biggie - whether Java will be as widely used in the next five years. 

What does everyone think?
If you were designing a programming language what would your favourite features be?
Tags: discuss, random, thoughts
Published: 2019-08-12 09:30:49

Having learnt a few different languages over the years I have a shortlist of my favourite features across different languages (_note_ I have included a few things that are not strictly language features, but are commonly used libraries that I think are just great!) - I will list my own thoughts below, but I thought it would also be a fun question to ask the community!

So here's my list in no particular order:

1. [Generics](https://en.wikipedia.org/wiki/Generic_programming)
1. [Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
1. [Async/Await](https://javascript.info/async-await)
1. [LINQ queries](https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/linq/)
1. [Extension methods](https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/classes-and-structs/extension-methods)
1. [Attributes](https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/attributes/)
1. [Database migrations](https://en.wikipedia.org/wiki/Schema_migration)

What are your thoughts on these features? Would you include them if you were to write a language? What else would you add and why?

_Edit: one that is really useful, some would say absolutely key, in modern web development, is native strong-typed JSON serialisation/unserialisation - ie being able to convert easily between object and JSON representation without having to manually map the internal fields, especially where nesting is involved. C# has a [great implementation](https://www.newtonsoft.com/json/help/html/Overload_Newtonsoft_Json_JsonConvert_DeserializeObject.htm) utilising generics for the "to" object type when deserialising - the equivalent [serialiser](https://www.newtonsoft.com/json/help/html/Overload_Newtonsoft_Json_JsonConvert_SerializeObject.htm) is pretty good too, with easy support for custom converters for things like string representations of enums, etc_
Create-React-App on NFS? 
Tags: npm
Published: 2019-08-12 09:30:25

Hey Folks, 

I'm running centos 7, i have an NFS mounted volume to my macbook. I've installed npm on the server. version 10.2 - I'm in my development folder and i'm trying to run npm create-react-app myapp or npx create-react-app myapp. But i seem to get errors. Maybe I'm missing something, or you can't run it from an NFS folder? but it should be same as a regular drive volume shouldn't it? What am I missing? Thanks.