teleren/devto huggingface dataset:
How to get that neat Messenger gradient scrolling effect with CSS
Tags: css, webdev, beginners, design
Published: 2020-05-10 18:22:02

For those of you that use Messenger, you probably already know that there are ways to customize a chatroom by changing the message colors, emoji, group name and photo, nicknames, etc. However I recently found that you can add a gradient to you message bubbles which I find to be really pleasing:

![Messenger Background Options](https://dev-to-uploads.s3.amazonaws.com/i/8ytnenw5wot6fhtx24qo.png)

So how does this work? It's actually really easy to do and a great use of `background-attachment: fixed` property value.

With `background-attachment: fixed`, the background does not scroll with its container, and it becomes fixed in place relative to the browser viewport. You can see this a lot in Squarespace templates to create that parallax image effect:

{% codepen https://codepen.io/LegendOfLuis/pen/XWmqPaM default-tab=result %}

The same property can be used with gradients, since those are also treated as images in CSS, creating that scrolling gradient effect. If you also have multiple elements with the same background and fixed attachment, it makes it look like the background gradients flow into each other from bubble to bubble. Since the background is relative to the viewport, the size of the gradient is the size of the viewport:

![Messenger gradient scrolling](https://res.cloudinary.com/practicaldev/image/fetch/s--PuoLPQ6s--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/t14cd07am0p0y1cv2oc2.gif)

What are some other neat things you can do with this? You can make it look like a box is disappearing when you scroll up:

{% codepen https://codepen.io/LegendOfLuis/pen/JjYvavp default-tab=result %}

It's pretty neat what one property in CSS can do to create such an interesting design effect. I'll definitely be putting this in my toolkit!
Vim abbreviation
Tags: todayilearned, vim
Published: 2020-05-10 18:14:04

TIL:VIM's abbreviation command. 

## How to use?
`:ab <string_match> <to_replace_with>
`

## Use cases:
 - There are always some words and patterns which are too repitive and often asks for some shortcut. E.g: sout => System.out.println(). This is default configuration in Intellij.

 -  Can be used as auto-correct. E.g: teh => the
![Ab gif](https://github.com/jayeshathila/til/blob/master/gifs/abbreviation.gif?raw=true)

More to come at - [Github](https://github.com/jayeshathila/til/blob/master/vim/abbreviations.md)
Anagrams in JavaScript(simple)
Tags: javascript, algorithms, challenge, anagram
Published: 2020-05-10 18:05:03

An anagram is a word or phrase formed by rearranging the letters of a different word or phrase, typically using all the original letters exactly once.

**Challenge**
*Given two strings, write an algorithm to check if they are anagrams of each other. Return true if they pass the test and false if they don't. E.g*
```
anagrams('rail safety', 'fairy tales') --> True
anagrams('Cat', 'Act') --> True
anagrams('Save!', 'vase') --> True
anagrams('Hi there', 'Bye there') --> False
```
We need to create a function that will take two strings as an argument and compare them to see if they contain the same characters that are used the same number of times.

I will create a helper function to avoid errors, removing extra spaces, punctuation marks if any, and lower case both strings.


```javascript
function cleanString(str) {
return str.replace(/[^\w]/g,'').toLowerCase().split('').sort().join('')
}
```
In this function I'm using [RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions).

Since we use *sort(*) method that belongs to arrays we will need to temporarily turn a string to an array with *split()* method, *sort()* it and turn back to a string with *join()*

Let's call this helper method to compare two strings, like so:
```javascript
function anagrams(stringA, stringB) {
 return cleanString(stringA) === cleanString(stringB)
}
function cleanString(str) {
return str.replace(/[^\w]/g,'').toLowerCase().split('').sort().join('')
}

console.log(anagrams("Hello","!@#ElLoH")) // true
console.log(anagrams("Helo","!@#ElLoH")) // false
```
Anna Coding Front-end Weekly News Week - 20
Published: 2020-05-10 18:02:20

1. Flutter 1.17 is released: multiple new features and enhancements, the first stable version in 2020
2. Microsoft open source Krustlet, which can run WebAssembly on Kubernetes
3. Android 11 Beta will be released on June 3
4. Azure Sphere Security Research Challenge Now Open, award up to $100,000.

https://annacoding.com/news/4T7RH0NWhAjTjjtR4eXjaq/Front-end-Weekly-News-Week-20?time=2020-05-10
Enable Swagger2 with Spring Boot
Tags: swagger, swagger2, java, springboot
Published: 2020-05-10 18:01:15

![Swagger2](https://miro.medium.com/max/300/1*2DKX6fd0wlVbbjff_noWHg.png)

##__Swagger2 dependencies__
Add these dependencies to your pom.xml file

{% gist https://gist.github.com/raviyasas/085ac5920ffa239a39131fcbbe955a72 %}

##__Swagger configuration file__
Now you can create the Swagger configuration file

{% gist https://gist.github.com/raviyasas/b0abb8d38839af03f2fef857f5276aec %}

Now you are ready. Your REST controllers are now available on Swagger 2. You can access the Swagger documentation via [http://localhost:8090/swagger-ui.html](http://localhost:8090/swagger-ui.html) You may change the port with the port your application is running.



You can find the complete code from my [GitHub] (https://github.com/raviyasas/swagger-demo.git)
Part 1 : What is JAMStack?
Tags: showdev, beginners, tutorial, webdev
Published: 2020-05-10 18:01:01

If you are a developer who loves writing, this post is for you. You might have already authored more than a dozen posts on DEV or you might be planning to write something (like me!). But what if you can also create a blog site of your own out of these posts. If you want to find out how, hang on tight.

## The Elephant

First of all let us address the elephant in the room. JAMStack basically stands for *Javascript*, *APIs* and *Markdown*. But the JAM Stack is not about specific technologies. It’s a new way of building websites and apps. You may have already seen or worked on a JAM Stack site! They do not have to include all attributes of JavaScript, APIs, and Markup. They might be built using sites built by hand, or with Jekyll, Hugo, Nuxt, Next, Gatsby, or another static site generator. 

**The thing that they all have in common is that they don’t depend on a web server.**

On a conventional website when you request a page, the request is sent from the client (your browser) to the server hosting the website. Here the server parses your request and fetches the data from the database. Then the data is processed and sent to your client. The client then renders the data into a form you can view.

On a JAMStack website the data to be served to the user is compiled at deploy time. Ergo, when a request is received by the web server, it simply sends the pre-compiled data that can be readily rendered. We save time, the performance increases because lesser resources are required, the security is increased because the surface area for attacks are reduced and it is easier to scale since only the number of static files increase (CDNs are perfect for this use case).

In conclusion, JAMStack websites work by storing the data in static files that can be readily served without further processing. For a website serving blog posts this is more than ideal, because once a post is published it is rarely edited again, it remains static. And that's why we are here.

In the next post you can find out how to create a JAMStack website using your own posts on DEV.
About Ruby Hash#fetch_values
Tags: ruby, hash, documentation
Published: 2020-05-10 17:57:57

---
title: About Ruby Hash#fetch_values
published: true
description: 
tags: ruby, hash, documentation
---

Get more information and more examples at my AboutRuby project:
* [AboutRuby project](https://github.com/BurdetteLamar/AboutRuby/blob/master/core/Hash/api/markdown.md#fetch_values)

Here's the write-up over at the Ruby project:
* [Ruby project](https://ruby-doc.org/core-2.7.0/Hash.html#method-i-fetch_values)
[feedback request] Pull request dashboard side-project
Tags: github, productivity, startup, sideprojects
Published: 2020-05-10 17:33:12

Hello Friends,

I'm working on a small side project called PRBoard [[prboard.dev](https://prboard.dev)]. It’s a live, instant dashboard for your team's pull requests. Each pull request is represented as a small card with different status messages.

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

I know, GitHub has standard means to notify your team about pull requests like assigning a reviewer or using a slack notification. Still, it's always hard to quickly see what pull requests are open and available for review as well as those that passed all the checks and ready to be merged.

Would love to learn your thoughts about this project. Are you pleased with how your team discovers and notifies about pull requests? Would you use something like PRBoard? Maybe you have an idea of a killer feature for a pull request tool? I'd appreciate if you can share it with me!

Thank you!
NaN - Experience on first project
Published: 2020-05-10 17:31:23

---
title: NaN - Experience on first project
published: true
description: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ucjr4zte8d7mfmhwrhzf.png
tags: 
---

Whenever i have a new idea, i will start coding . In a couple of days, I'll get bored and ended up in not looking over there again.

I had an idea of having dashboard for tests. I made up mind to complete this as product. And I did it .

Check this out at : [https://github.com/NotJustANumber/NaN]

If you are a developer and part of a team maintaining application with multiple version. Getting current status of your tests is tedious.

Many enterprises have their own version of test dashboards. NaN could be your missing test dashboard in your CI/CD stack.

As a java developer, i had a curiosity on exploring React. Created this with base create-react-app. What i admired from React is , its API simplicity. If you know javascript, you can get started in couple of hours.

I had a previous experience on building UI with bootstrap. I tried tailwindcss for the first time, i had a good experience from it. TailwindCss with purgecss will be a good option for a performant side.

I have been a java developer for past 4 years, i tried kotlin for the backend. Spring boot supports kotlin in better way. Kotlin is concise and tried to solves bad dx on the java community(Still i love JAVA). Small teams that need better productivity, kotlin can be our choice.
What is Clipping Path?
Tags: Clippingpath, backgroundremovalservice, imageresizing, photoshop
Published: 2020-05-10 16:53:57

In the realm of illustrations structuring and photo editing,[clipping path](https://www.photoeditor24.com/best-clipping-path-service/)  is the way toward making a framework around an inside item while the remainder of the image is being made straightforward. One genuine case of a clasp path image is the image of the Statue of Liberty in New York. A photo of the Statue taken with no attempt at being subtle will obviously incorporate the sky, the ocean, and the cityscape on the background. So as to hold the image of the Statue while the remainder of the picture is taken out, an uncommon tool in photo editing programming is utilized. As a relationship, clipping path is essentially simply like a cookie shaper. The crude image or photo is simply the dough while the cookie shaper is the clipping path. All together for a cookie to be taken out from the dough, the cookie shaper must be squeezed into the dough deserting the abundance dough. Similar works with clipping path. Clipping path is very much valuable particularly in visual depiction extends that require enormous images. There are unquestionably different approaches to take out the background of the image, however, utilizing the Eraser tool of photo editing programming will require some serious energy and exertion. Add to that the way that when taking background from huge images can be very draggy when utilized with the Eraser tool. Complex images can likewise be very hard to take out like hairs, plumes, sand, and leaves. This is the place clipping path comes in. A very normal editing tool utilized in clipping a path is really the basic Pen tool in Photoshop. there are a lot of tools in photoshop for [Image Background Removal Service](https://www.photoeditor24.com/image-background-removal-service/), Image resizing service,[Image resizing and cropping service](https://www.photoeditor24.com/image-resizing-cropping-service/). Clipping path is one of the important service. This is utilized to follow the framework of an inside item without changing or delete even a solitary pixel of the crude image. This at that point makes two articles, the path and the image. The path itself is a vector image, which implies that the focal article can be resized to any ideal measurement without pixelation. The image alludes to the bitmap. When clipping path is done, these two articles are done spared into a solitary record called EPS. This EPS document can be utilized and reused on various occasions, again without contacting the first image. The path can be utilized and be coordinated with other editing virtual products like Flash, PageMaker, or Illustrator. There are three various types of path: the comprehensive path, selective path, and the compound path. In the event that you might want to make your own path, you can visit different Photoshop instructional exercise destinations on the web about clipping path.
Bite-Size Python: String
Tags: python
Published: 2020-05-10 16:21:54

---
title: Bite-Size Python: String
published: true
description: This mini-tutorial demonstrate how I use string-related functions.
tags: python
---


Python have [many](https://docs.python.org/3/library/stdtypes.html#text-sequence-type-str), [useful](https://docs.python.org/3/library/string.html) functions to work with string. This post I will demonstrate some functions I frequently use.


#### Let's start!


`split` : Splitting a string using `space` as delimiter by default and return a list

```python
>>> paragraph = "Python is an interpreted, high-level, general-purpose programming language. Created by Guido van Rossum and first released in 1991."
>>> word_list = paragraph.split()
>>> word_list
['Python',
 'is',
 'an',
 'interpreted,',
 'high-level,',
 'general-purpose',
 'programming',
 'language.',
 'Created',
 'by',
 'Guido',
 'van',
 'Rossum',
 'and',
 'first',
 'released',
 'in',
 '1991.']
# You can change delimiter too 
>>> word_list_split_by_comma = paragraph.split(',')
>>> word_list_split_by_comma
['Python is an interpreted',
 ' high-level',
 ' general-purpose programming language. Created by Guido van Rossum and first released in 1991.']
```


`join` : Combine list of string to single string with custom delimeter

```python
>>> word_list
['Python',
 'is',
 'an',
 'interpreted,',
 'high-level,',
 'general-purpose',
 'programming',
 'language.',
 'Created',
 'by',
 'Guido',
 'van',
 'Rossum',
 'and',
 'first',
 'released',
 'in',
 '1991.']
>>> "|".join(word_list)
'Python|is|an|interpreted,|high-level,|general-purpose|programming|language.|Created|by|Guido|van|Rossum|and|first|released|in|1991.'
# OR
>>> "|".join(paragraph.split())
'Python|is|an|interpreted,|high-level,|general-purpose|programming|language.|Created|by|Guido|van|Rossum|and|first|released|in|1991.'
```


Slicing : You can slice string as same as list.

```python
>>> first_25_chars = paragraph[:25]
first_25_chars
'Python is an interpreted,'
>>> last_25_chars = paragraph[-25:]
>>> last_25_chars
'd first released in 1991.'
>>> reverse_paragraph = paragraph[::-1]
>>> reverse_paragraph
'.1991 ni desaeler tsrif dna mussoR nav odiuG yb detaerC .egaugnal gnimmargorp esoprup-lareneg ,level-hgih ,deterpretni na si nohtyP'
```


`len` & `count`: string length & counting occurrence sub string

```python
>>> len(paragraph) # This can tell how many index we can use when slicing
131
>>> paragraph.count("ed")
6
``` 


#### For fun
Use `center` to centering your text, with amount of supply width spaces and custom character replacement rather than space.
```python
>>> "TADA!".center(30, "🌈")
'🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈TADA!🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈'
```

Thank you for reading :)

### References

- https://docs.python.org/3/library/stdtypes.html#text-sequence-type-str
- https://docs.python.org/3/library/string.html
- https://en.wikipedia.org/wiki/Python_(programming_language)
Stretchlimouvergleich!
Tags: allgemein
Published: 2020-10-05 07:18:52

---
title: Stretchlimouvergleich!
published: true
date: 2020-05-10 16:21:52 UTC
tags: Allgemein
canonical_url: http://drikkes.com/?p=14281
---

Hafti hat eine neue Vorabsingle zu seinem am 05. Juni erscheinenden [‎weißen Album](https://music.apple.com/de/album/das-weisse-album/1501874350) draußen. „Conan x Xenia“ featured Shirin David und eine sehr lange Strechlimousine. Das eingebettete Video startet deshalb direkt bei 01:47.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/abfoRM9H79c?controls=0&amp;start=107" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Kommt Dir bekannt vor? Yo, die Idee hat Chris Cunningham schon in Aphex Twins epischem „Windowlicker“-Video gebracht. Und den Gag dort um einige Sekunden länger ausgereizt. Siehste ab 03:51.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/5ZT3gTu4Sjw?controls=0&amp;start=231" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Immerhin zeigt Regisseur Chehad Abdallah, wo er sich bedient hat: Auch in seinem Video prangt das [Logo aus dem Original](https://r1creative.net/feed/the-designer-behind-aphex-twins-iconic-logo/).

[![](http://drikkes.com/wp-content/uploads/2020/05/aphextwin_strechlimou.png)](https://imgur.com/gallery/LmC6uc7)

Somit geht das Ganze als hommage durch? Vielleicht ist Hafti ja auch einfach Aphex‘ Zwillingsbrudi.

[Twittern](https://twitter.com/intent/tweet?url=http%3A%2F%2Fdrikkes.com%2F%3Fp%3D14281&via=drikkes)
GitHub üzerinde örnek proje çatallama
Tags: git, github, catallama, fork
Published: 2020-05-10 16:21:32

Bu yazının amacı https://github.com/aciklab/ilkDeneme adresinde yer alan projeyi kendi github alanınıza çatallayıp, kendi bilgisayarınıza indirerek ufak bir değişiklik yaptıktan sonra tekrar github üzerine atmanızı sağlamaktır.

### 1. Projeyi Çatallama(Fork):

Öncelikle https://github.com/aciklab/ilkDeneme adresine girip aşağıdaki gibi fork'a basarak kendi alanınıza çatallamanız gerekmekte.

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

### 2. Kendi alanınızda projeyi görme:

Projeyi başarılı bir biçimde çatalladıysanız kendi adınızın bulunduğu sayfada (https://github.com/adiniz/) artık çatallanmış olarak "ilkDeneme" uygulamasını göreceksiniz.

### 3. Projeyi bilgisayarınıza klonlama

Projeyi kendi alanınızda gördükten sonra projenin kendi alanınızdaki sayfasına girin ve aşağıdaki gibi klonlanacak adresi öğrenin.

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

Daha sonra bilgisayarınıza gelerek bir boş klasör oluşturun. Klasör içerisinde uçbirimde, yukarıda öğrendiğiniz bilgiye göre aşağıdaki komutu yazın:

```bash
git clone https://github.com/adiniz/ilkDeneme.git
```

### 4. Projede düzenleme yapmak.

Bu aşamada github üzerindeki dosyalar bilgisayarınızdaki boş klasöre gelecektir. "merhaba.py" dosyasını herhangi bir metin editörü ile açıp,

```bash
print "Merhaba Dünya"
```

yazısı yerine

```bash
print "Merhaba Dünya, Merhaba"
```

yazıp kaydedin. Veya yaratıcılığınıza göre farklı şeyler yapabilirsiniz.

### 5. Commit ekleme

Dosyadaki değişiklikleri commit olarak eklemek için aşağıdaki komutları giriniz:

```bash
git add merhaba.py
git commit -m "İlk deneme, ilk commit"
```

### 6. Değişiklikleri Github'a göndermek

Yaptığınız değişiklikleri github'a göndermek için aşağıdaki iki komutu yazabilirsiniz.

```bash
git push origin master
git pull
```

### 7. Uygulamayı yerel bilgisayarınızda çalıştırma

Uygulamayı bilgisayarınızda çalıştırmak için ise aşağıdaki komutu yazabilirsiniz:

```bash
python merhaba.py
```

Artık kendi değiştirdiğiniz şekilde uygulama çıktı verebilecektir.
What Are Lambda Expressions?
Tags: python, beginners
Published: 2020-05-10 16:19:15

So far, in my early programming career, Python has been my favorite language to learn and write. It can be as simple or as complex as you want it to be. I would strongly recommend anyone who is interested in coding to first try Python because it is very readable. You won't waste your time memorizing the arcane syntax that other languages have. With that being said, let's talk about Lambda Expressions!

Your task is to create a function that squares a number. So you write the function and test it:

```py
def square(x):
  return x * x

f(5)
25
```

Your code is easy to read and, most importantly, it works. Passing any integer argument into the function `square` will return the desired output. Now, let's rewrite the same function as a Lambda Expression also known as *anonymous* or *nameless* functions:

```py
square = lambda x: x * x

f(5)
25
```
As you can see above, our output is correct and remains the same, however, we had to assign it to the variable `f` in order to use it. 

The basics of writing a Lambda Expression is simple. It will always start with the keyword `lambda` followed by any number of arguments. Remember, it is perfectly okay for a Lambda Expression (or any function) to receive zero arguments. It is then followed by a colon `:` and finally, you enter a single expression. This expression is the return value. *You cannot use multiline expressions in a Lambda*.

Let's now see a Lambda Expression with more than one argument. This function will simply return the sum of the two integers.

```py
sum = lambda x, y: x + y

sum(2, 3)
5
```

As you can see, Lambdas are great for one-line expressions. It's also arguable that it is easier to read than a normal Python function. In my next blog post, I'll teach you the *true* power of Lambda Functions by passing them into other functions. This is called functional programming.
Balloon Blasting Game with Unity
Tags: unity3d, dotnet, mobile, android
Published: 2020-05-10 16:10:59

Hi guys,
I developed an app for kids: "Balloon Blasting Game"(for Android).
Can you take a look? Can you try it please?

Google Play Link

<a href='https://play.google.com/store/apps/details?id=com.semihcelikol.BalloonBlasting&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png'/></a>

I hope you will like it.
Almon Brown Strowger and the Invention of the Automatic Telephone Exchange
Tags: todayilearned, history, watercooler
Published: 2020-05-10 16:01:47

I found this story fascinating and wanted to share...

Almon Brown Strowger was an undertaker and was losing business to a competitor a competitor's wife, working as a telephone operator, was routing calls away from Strowger to their funeral home business.

{% wikipedia https://en.wikipedia.org/wiki/Almon_Brown_Strowger %}

One thing lead to another and Strowger invented the Automatic Telephone Exchange in 1889, essentially putting an end to the telephone operator altogether.

{% wikipedia https://en.wikipedia.org/wiki/Telephone_exchange#Early_automatic_exchanges %}

I'm sure elements of this story have been glorified in history, but it's a fascinating tale with a lot of modern corollaries.