teleren/devto huggingface dataset:
Save your up arrow key, use history more
Tags: linux, productivity
Published: 2020-01-09 14:40:02

---
title: Save your up arrow key, use history more
published: true
description: Utilizing command history is easy and saves you for spamming your poor up arrow key.
tags: linux, productivity
---

One common day to day scenario we face everyday is reusing a terminal command that we carefully crafted maybe hours before we went on a ~reddit binge~ rabbit hole during other work.

To find a past used command I would normal just keep pressing the up arrow key until I finally found the command I was looking for.

However, `history` is really simple and saves you *time* and *typing*. Check it out.

```
$ history

12100  git commit  --allow-empty -m "triggering deployment"
....
12107  ga app/controllers/
12108  ga app/models
12109  gst
12110  gcmsg "Adding some missing methods for user authentication"
12111  gp
```

`history` is kind of self explainatory, it shows your shell command history. 

The first column is the command ID, whereas the 2nd column is the string of the command itself.

You might be tempted to reach out to your mouse to copy & paste the command you were searching for, but there's a better way:

`$ !<command entry ID you want>`

So for example, if I were to enter `!121000` it would pluck the command with the ID `121000` and now it appears in my terminal prompt like magic. Woo!

## Extra Fun

You can utilize Linux pipe operators to search your history for specific things, maybe you want to see your last copy operations:

`history | grep cp`

This will give you a last of your last `cp` commands. Now you can find where you lost that file you meant to copy to your home directory.


## Extra Extra Fun

To make life even _easier_ you don't even have to spend the mental energy piping commands or reading your history line by line.

Built in you can use a search function that's activated with `ctrl + r`. It will activate a reverse search, this allows you to search for past commands by name.

For example, enter `history` then `ctrl + r`. You'll be greeted with a prompt similar to (depending on your *nix environment):

```
bck-i-search:
```

You can type in the beginning of the command you're racking your brain for, and it'll give you the first result of the last command you ran beginning with your search term. Amazing.
Day 4: Look and say
Tags: challenge, learning, kotlin
Published: 2020-01-09 14:37:31

Let's go for day 4! Finally posting every day is really pleasant! I wanted to thank you who are reading this and a big thank you for your comments on the previous posts :smiley: 

Now let's place the problem of the day!

## Details
- Difficulty: Medium
- Asked by: Epic

## Problem

The "look and say" sequence is defined as follows: beginning with the term `1` each subsequent term 
visually describes the digits appearing in the previous term. The first few terms are as follows:

```
1
11
21
1211
111221
``` 
As an example, the fourth term is `1211`, since the third term consists of one `2` and one `1`.

Given an integer `N`, print the `N`th term of this sequence. 

## My solution
I have to say this one took a moment to understand. After some research, I gave up trying to find a solution to determine the Nth term with some magic mathematics finally, I just determine all the terms until N. Not the best solution I agree.

```kotlin
/**
 * Determine the nth term of the "look and say" sequence
 *
 * @param n, index of the term we want, must be positive
 * @return the nth "look and say" term
 */
fun lookAndSayAt(n: Int): String {
    if(n < 1) return ""
    else if(n == 1) return "1"

    var scanningTerm = "1"

    for (i in 1 until n) {
        var currentTerm = ""

        var currentValue = scanningTerm[0]
        var numberOfCurrentValue = 1
        for (c in scanningTerm.substring(1)) {
            if (c == currentValue)
                numberOfCurrentValue++
            else {
                currentTerm += "$numberOfCurrentValue$currentValue"
                currentValue = c
                numberOfCurrentValue = 1
            }
        }
        currentTerm += "$numberOfCurrentValue$currentValue"
        scanningTerm = currentTerm
    }
    return scanningTerm
}
```

So do you have another solution? :smiley:
Where'd composer go?
Tags: composer, terminal, zsh
Published: 2020-01-09 14:04:01

---
title: Where'd composer go?
published: true
description: Get your bash aliases back
tags: composer,terminal,zsh
---

This is just a short post for anyone that may have experienced something I encountered recently.

I have several shortcuts/aliases for quick terminal commands and I noticed that when I was running a composer update on a project, it would say composer is not found. I was confused because I've used composer hundreds of times on this machine and never had an issue. I was racking my brain to figure out what could have happened, then it dawned on me. ZSH.

I had recently upgraded my mac terminal as well as my linux box terminal to use ZSH instead of bash and discovered that the .bash_profile settings no longer work. So if you are experiencing this same issue, the solution is super simple. Just copy all those commands you have stored in .bash_profile and either open or create a .zshrc file in the same folder as your .bash_profile and paste all those commands in there, save, and restart your terminal! That's it. You're aliases are back now!
Meteor 1.9 ❤️ Node 12
Tags: meteor
Published: 2020-01-09 13:55:54

Meteor 1.9 is finally [out](https://github.com/meteor/meteor/blob/release/METEOR@1.9/History.md)! Supporting Node 12!  

There're even more awesome changes which are about to hit soon like updating to Cordova 9 and MongoDB to 4.2. What a way to start 2020!   

And what's even more exciting is that Meteor Meetups are slowly coming back. You can view [Meteor Meetup NYC](https://www.youtube.com/watch?v=utVONxUrres) where they talk about the new roadmap and next steps.

You can join the forums to discuss the release [here](https://forums.meteor.com/t/meteor-1-9-is-out/51358).


Happy new year guys!
The headers you don't want & clean code tips you will want to know
Tags: todayilearned, programming
Published: 2020-01-09 13:00:14

*TL;DR notes from articles I read today.*

### [The headers we don’t want](http://bit.ly/36EZjDA)

Some unnecessary HTTP headers you want to avoid:
- Vanity headers such as *server, x-powered-by* and *via* offer little value to end-users or developers but at worst they divulge sensitive information.
- Some headers, such as *p3p, expires, x-frame-options* and *x-ua-compatible*, represent deprecated standards.
- Headers that are only useful to debug data but are not recognized by any browser, such as *x-cache, x-request-id, x-aspnet-version, x-amzn-requestID*. As a developer, you may want to keep them on but know that removing them makes no difference to how your pages are rendered. 
- *x-robots-tag* is a non-browser header only useful when the requesting agent is a crawler.  

*[Full post here](http://bit.ly/36EZjDA), 7 mins read* 

---

### [These four ‘clean code’ tips will dramatically improve your engineering team’s productivity](http://bit.ly/2FA9iOl)

Top strategies based on Robert Martin’s Clean Code:
- ‘If it isn’t tested, it’s broken’, so write lots of tests, especially unit tests. Code not covered by a test gets invisibly broken until customers spot the bug.
- Choose meaningful, short, precise names for variables, classes and functions and make it easy to find files by name. In case of conflict, choose precision over brevity.
- Keep classes and functions small - four lines per function and 100 lines per class at most - and make them obey the single responsibility principle. This will help with documenting code better as you will have lots of well-named sub-functions. 
- Ensure functions have no side effects (such as modifying an input argument), and specify this explicitly in the function contracts if possible (such as passing in native types or objects that have no setters).

*[Full post here](http://bit.ly/2FA9iOl), 7 mins read*

---

### [Principles of dependency injection](http://bit.ly/2Td3rXc)

- Dependency injection can make your code more maintainable, using abstractions and by decoupling things. 
- If you code to implementation, you will get a tightly coupled and inflexible system. Use abstractions and make your code be reusable and flexible. 
- Follow the single responsibility principle and let each class do only one thing.
- Differentiate between creatables (which should be created within the constructor if the whole class uses them) and injectables (which should be asked for by the constructor and not created directly).
- Your constructors should only check for null, create creatables and store dependencies for later use. They should be free of any coding logic.  

*[Full post here](http://bit.ly/2Td3rXc), 4 mins read*

---

*[Get these notes directly in your inbox every weekday by signing up for my newsletter, in.snippets().](https://mailchi.mp/appsmith/insnippets?utm_source=devto&utm_medium=post08&utm_campaign=is)*
What is Object Orientated Programming (Part Two - Inheritance)
Tags: oop, ruby, beginners
Published: 2020-01-09 13:52:23

In today's blog post we will be diving into class inheritance from a Ruby perspective.

If you need a refresher about classes, you can read my previous [blog post here.](https://dev.to/aweysahmed/what-is-object-orientated-programming-oop-part-one-nn5)

Classes are blueprints for creating objects. So if you wanted to create a new object that needed a new blueprint you would create a new class.

However, this can create repetition. Let's look at an example of this.

```ruby
class Cat
 def endothermic
   true
 end

 def live_birth
  true
 end
end 
```

```ruby
class Dog
 def endothermic
  true
 end

 def live_birth
   true
 end
end
```

We can improve the cat and dog class by using inheritance. If we create a superclass that contains the methods that are common to both the cat and dog class, then we can have the classes inherit from the superclass.

```ruby
class Mammal
def endothermic
  true
 end

 def live_birth
  true
 end
end
```

Now that we have a Mammal class, we can now use inheritance to DRY up our code. The <em>"<"</em> indicates that this is an inheritance. 

```ruby
class Cat < Mammal
end

class Dog < Mammal
end

annabelle = Dog.new
stella = Cat.new

puts stella.endothermic  # output true
puts annabelle.endothermic # output true
```

In Ruby, a class can only have one parent that they inherit from. However, modules can be a way around this constraint.

The next blog post will cover super and modules.
I made some dots for a slider, Instagram style
Tags: angular, showdev
Published: 2020-01-09 13:51:51

I'm currently working in a firm who develop software for utilities company (distributors of energy, gas and water). I'm in the web development team and I'm currently building an app (using [capacitor](https://capacitor.ionicframework.com/)) where final customer can check and pay bills, consumptions, send self-readings, etc.

I had to build an horizontal slide for the last bills, so this slide can have more than 10 elements in it. The problem was they want some indicators on the bottom, so I tought about **instagram dots indicator**.

![Instagram style dots](https://thepracticaldev.s3.amazonaws.com/i/gj4stk51jepdvyg258mv.png)

## Premises
The slider is made with an horizontal `CdkVirtualScroll` (see the  [docs](https://material.angular.io/cdk/scrolling/overview)) element and work fine in mobile because you can drag the slides without adding javascript, plus it **optimize the memory usage**. The example is very semplified but the indicator component is the same I use in my project.

# The code
I've made a component for the dots that mutate according the `length` and the current `index`. Note that works also for infinite scrolling with the length changing while scrolling!

The solution was to listen to changes with `ngChange` functionality and change the class of indicator elements. Then set the css to make smooth transitions.

{% stackblitz instagram-dots file=src/app/components/carousel-indicator/carousel-indicator.component.ts view=editor %}

Try it out with your phone in device mode with Chrome dev tools.
https://instagram-dots.stackblitz.io

Hope I've help someone, I'll read and respond to all of your comments
Any software application or tool you always wanted but not yet built or missing?
Tags: discuss, productivity, watercooler
Published: 2020-01-09 13:30:44

As a Windows user, I always wanted a tool that provides the ability for me to drag to scroll. Adobe Acrobat has this feature inbuilt. I want something like that for every windows application. There used to be a utility application with name MouseImp 12-15 years back, but was abandoned and no more work with Windows 10 unfortunately. I believe Mac has Smart Scroll, which provides such functionality.

Any missing application or feature which you always wanted?
Beyond JavaScript Frameworks: Universal Login Button Component
Tags: vue, webcomponents, javascript
Published: 2020-01-09 13:24:59

---
title: Beyond JavaScript Frameworks: Universal Login Button Component
published: true
description: Learn how to use Web Components technologies to build a login button that works in any JavaScript framework.
tags: #vuejs #webcomponents #javascript
canonical_url: https://auth0.com/blog/beyond-javascript-frameworks-universal-login-web-component/
---

TL;DR: In this tutorial, you will learn the basics of Web Components technologies and will use them to build a universal login button component. This component allows you to add Auth0 authentication to your Web application regardless of the JavaScript framework you are using. 

[Keep reading 🚀] (https://auth0.com/blog/beyond-javascript-frameworks-universal-login-web-component/?utm_source=dev&utm_medium=sc&utm_campaign=ul_webcomponent)
5 Ways to Carve Large Pull Requests Into Bite-Sized Ones
Tags: tutorial, productivity
Published: 2020-01-09 18:51:23

---
title: 5 Ways to Carve Large Pull Requests Into Bite-Sized Ones
published: true
date: 2020-01-09 13:15:42 UTC
tags: tutorial, productivity
canonical_url: https://glennstovall.com/5-ways-to-carve-large-pull-requests-into-bite-sized-ones/
cover_image: https://glennstovall.com/wp-content/uploads/2020/01/igor-miske-_6jk-nvKRK0-unsplash-scaled-e1578575668708.jpg
---

Substantial, complicated updates break software in large, complicated ways. Smaller, simpler changes break in smaller, simpler ways. It would help if you considered applying the “[ship more, ship smaller](https://dev.to/gsto/what-s-the-best-publishing-cadence-5dhn)” mindset. It’ applies the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle) to your pull requests. Avoiding large pull requests also means avoiding arduous code reviews and delayed deployments. Here are five patterns you can use to refactor your pull request strategy.

## “Prefactor” Your Code

This idea is from Ben Ornstein on the [Art of Product](https://artofproductpodcast.com/) podcast. If there is any refactoring required, do it in a pull request separate from any functionality changes. It would be best to keep this branch as pure as a refactor as possible, with no functionality changes whatsoever. 

## Deploy Lonely Functions

You can create a PR that adds unused as of yet functions and classes. You can deploy this code with tests to ensure they do what you expect them to do. Creating PRs like this also helps you practice better software development practices, as it encourages you to avoid complex and intricate dependencies in your codebase.

## Decouple Your Database Schema

Separate changes to your database schema into an independent pull request. This tactic helps you avoid scenarios where your code and your schema get out of sync. The larger and more complex your database gets, the more useful this becomes.

## APIs Without A UI…

You can create pull requests to add unused internal API endpoints. I’d only recommend this for internal APIs for your frontend, not for public APIs, just in case.

## …And UIs Without an API

On the other side of the coin, you can create unreachable UIs filled with mock data. You could show these to only the development team using feature flags or environment settings.

## Why It Matters

By using these techniques, you can improve the deployment and flexibility of your development team. Flexibility is one of the best factors to optimize in both teams and code bases. Making more, smaller changes is more flexible than making fewer, smaller ones. It’ll force the team to get their CI/CD house in order so that they can deploy changes frequently. By breaking up PRs, you’ll end up with a more effective process and higher quality software.

## Any Other Ideas? 
What are some other ways you can break up your pull requests?
Drone on Kubernetes with Gitea, something went wrong
Tags: gitea, droneio, kubernetes, troubleshooting
Published: 2020-01-09 13:12:53

For a while I have my own Kubernetes stack on [DigitalOcean](https://m.do.co/c/b40a659c34a7) where I can do some science and host what I want or what others ask me like blogs, landing pages, cron-jobs and of course a [Gitea](https://gitea.io/en-us/) instance. One day I decided to fire up a [Drone.io](https://drone.io/) instance so I can automate the boring tasks with it. It was like Drone 1.0 or something. Everything worked as I expected and I was happy. One day I updated Gitea and suddenly Drone stopped working. No problem, updated Drone too and that's where all the fun part started.

I always got an error message:
```invalid character '<' looking for beginning of value```

I tried to find a reasonable answer, but found nothing. I knew from that error message it's definitely coming from a JSON parser that received HTML instead. I met this error message a lot of times before, but I did not know why it happens. Drone->Gitea connection should be fine because the OAuth login works and the Webhook calls back to Drone when push happened.

I decided to sit back and who cares, those jobs are running like monthly once and there is already a `Makefile` in there that does the same. So for like 3-4 months I built/published them manually. Not a bit deal, like extra 5-10 minutes, but still... It's not working and it's poking brain hard, WHY? But I had no time for that. Deeply, I had a light hope it's not something I fix but they have to fix it. 

But now, I had time for that. Updated Gitea and Drone. Kick off a build... It's still the same error. And that was the point where I said "No I can't get away with this, I will find and fix it" and I did ;)

That's the reason why I write this, maybe someone else has the same problem and has no idea why it does not work. After I decided to recreate the whole Drone stack based on the documentation... it has the same error again. I went to sleep. A woke up from a serious nightmare where a whale with a tattoo tried to catch me. The tattoo was (obviously, thanks brain) "invalid character '<' looking for beginning of value". And I was not able to sleep back.

Solution? Is there a solution? Or is it an infinite pain I have to live with? Yes, there is a solution. I don't really know how I ended up changing the value for `DRONE_GITEA_SERVER` but I did. And suddenly everything worked. Here is a diff that made me crazy:

```diff
- DRONE_GITEA_SERVER=https://gitea.domain.com/
+ DRONE_GITEA_SERVER=https://gitea.domain.com
```

Yes, I just removed (to be more precise, I missed it during the copy-paste) and that's it. That was the solution. With the trailing slash was fine for the OAuth redirect, but for git clone it was an error.

If you came here because you have the same problem. I hope it helps you and you don't have to wake up because a giant whale chases you.
massCode just released to v0.3.4
Tags: vue, electron
Published: 2020-01-09 13:07:06

---
title: massCode just released to v0.3.4
published: true
description: massCode – a code snippets manager for developers bump to v0.3.4
tags: vue, electron
---

Hey folks, 
massCode just released to v0.3.4

Available Mac, Linux and Windows versions.
We are waiting for feedback and bugs ))).

{% github antonreshetov/massCode %}
Iterating over object properties in JavaScript
Tags: javascript, beginners
Published: 2020-01-09 12:40:47

There are a few ways to iterate over object properties in JavaScript but key to all of them is Object.entries() which returns an array of a given object as key-value.

```
const myObject = {
  name: 'John Doe',
  age: 44,
  city: 'Paris',
  country: 'France',
};

const myObjectAsArray = Object.entries(myObject);

// Option 1:
myObjectAsArray.map(item => {
  console.log(item);
})

// Option 2:
myObjectAsArray.forEach(item => {
  console.log(item);
})

// Option 3:
for (let [key, value] of myObjectAsArray) {
  console.log(`${key}: ${value}`);
}
```

As video:
{% youtube LTxtlGG03ZM %}

Let me know in the comments how you would do it. Are there better ways of doing this?
Editing SVG Images in CSS
Tags: coding, css, filter
Published: 2020-01-09 18:32:11

---
title: Editing SVG Images in CSS
published: true
date: 2020-01-09 12:15:23 UTC
tags: Coding,CSS,filter
canonical_url: https://blog.jws.app/2020/editing-svg-images-in-css/
---

You might have noticed in my previous post about [dark mode](https://blog.jws.app/2020/css-dark-mode/) that there was a css rule to flip an SVG image from dark to light.

{% codepen https://codepen.io/steinbring/pen/ZEzNmrK %}

There are a few other things that you can do, though. The same filter function can do [blur](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur), [brightness](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness), [contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast), [drop-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow), [grayscale](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale), [hue-rotate](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate), [invert](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert), [opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity), [sepia](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia) and [saturate](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate). Let’s take a look at one other example.

{% codepen https://codepen.io/steinbring/pen/xxKNQNa %}

So, there are a few options available out there for you. Have a questions? Feel free to drop a comment, below.