teleren/devto huggingface dataset:
Creating a "fill text with image" effect using HTML and CSS. 
Tags: css, html
Published: 2019-09-12 19:41:27

---
title: Creating a "fill text with image" effect using HTML and CSS. 
published: true
description: 
tags: CSS,HTML 
---
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/z3mw2wo6bktkcfkmch3p.JPG)

Adding text on images can make your website look amazing. It is great for gaining the attention of readers. This is a popular technique and a classic effect in Adobe Photoshop/Illustrator, thanks to the power of clipping masks. It clips the image to the text, meaning that only the area of the image that sits directly above the actual text remains visible, creating the illusion that the image is inside the text. The rest of the image is now hidden from view which create a solid  Fill layer. This same effect can be make using CSS. And here's how I created it.
First, I created an index.html file, markup have a h1 tag with an ID "title".
 Secondly, I created a style.css file which I linked it to my index.html.  The CSS has tags, classes and id's from my index.html giving them some basic properties. 
 Since the ID <code>title</code> is where my <code> h1 </code> is, I add a background-clip properties to it.
The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
<code>
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
</code>
If the element has no background-image or background-color, this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image).

codepen: https://codepen.io/iamdejean/pen/wvwjjer
github: https://github.com/iamdejean/Fill-text-with-image-using-CSS
IdGenerationTechnique
Tags: replit, java
Published: 2019-09-12 19:40:02

User Id Generation :
Joseph’s team has been assigned the task of creating user-ids for all participants of an online gaming compition. Joseph has designed a process for generating the user-id using the participator’s First_name  , Last_name  ,PIN code and a number N. The process defined by Joseph is as below-
STEP 1:-
Compare the lengths of first_Name abd Last_Name of the participant.
The one that is shorter will be called “Smaller Name “  and  the one that is longer will be calles “Longer Name”. If both first_Name and Last_name are of equal Length , then the name  that appears later in alphabetical order will be called the “LongerName “.
STEP 2:
The user –id should be generated as below-
Last Letter of the smaller name +Entire word of the longer name +Digit at position N in  the PIN when traversing the PIN from left to right +Digit at position N in the PIN when traversing the PIN from right to left.
STEP 3:
Toggle the alphabets of the user-id generated in step-2 i.e upper –case alphabet should become lower-case and lower-case alphebets should become upper –case.
Lets see a few eamples;
Example 1 := if the participates detail as below
First_name=Rajiv
Last_name =Roy
PIN = 560037
STEP1 : Length of Last_Name is less than the Length of first_Name , so the smaller  Name is “Roy” and the Longer Name is “Rajiv”
Step2: The user_id will be =”Last Letter of the smaller name +Entire word in the longer name +Digit at position N in the PIN when traversing the PIN from left to right + Digit at Positin N in the PIN when traversing the PIN from right to left =Last Letter Of “Roy” +Entire word  in “Rajiv” +6th Digit of PIN from left+6th Digit iof PIN from right.
STEP 3:
Toggle the alphabets of the user-id generated in step-2 i.e upper –case alphabet should become lower-case and lower-case alphebets should become upper –case.



{% replit @VikasTomar/Id-Generation %}
A Few Pointers on React Component Props
Tags: javascript, react, props
Published: 2019-09-12 16:55:57

---
title: A Few Pointers on React Component Props
published: true
description: Here are a few pointers that will help us to avoid common pitfalls and write more usable components.
tags: javascript, react, props
---

One of the first things we learn as React developers are how to use props to pass arguments into our components. However, there are a few common pitfalls that we often run into when designing the API of our components that make our components more difficult to use and test. Here are a few pointers that will help us to write more usable components.


Think about the API of your React components the same way you would think about the API of a shared library. How can you make it as easy as possible for another user (or yourself) to get it right?

## Required Props

Your components should have as few required props as possible. For example, boolean props shouldn't be required and should default to false. We see this pattern in the HTML spec and should mimic it in our components.

```jsx
<MyButton disabled={false}/>
<MyButton disabled={true}/>

// vs

<MyButton />
<MyButton disabled />
```

Also, we should provide reasonable defaults for any props that don't affect the behavior of the component.

```jsx
const MyButton = ({ color: color.primary }) => {
  ...
}
```

## Data Structures

Sometimes, I see prop types that look like this.

```jsx
// JS

MyComponent.propTypes = {
  data: PropTypes.object.isRequired
}
```

If I am using this component, there's no way I can tell at a glance what the structure of this prop is. I would need to read through the logic in the `render` method, and then hope for the best.

You could give `data` a more specific type, like this.

```jsx
MyComponent.propTypes = {
  data: PropTypes.shape({ 
    value: PropTypes.string,
    id: PropTypes.number,
  }).isRequired,
}
```

But an even better approach might be to flatten out this data structure.

```js
MyComponent.propTypes = {
  value: PropTypes.string,
  id: PropTypes.number,
}
```

If you are dealing with formatted API data, it is okay to [re-format this data at the top level](https://dev.to/beccaliz/react-refactoring-tips-dysfunctional-api-boundaries-1gib) for the sake of readability in your lower-level presentational components. 

If you keep props as simple and readable as possible, I promise you will thank yourself later.
Vue.js or React with D3?
Tags: discuss, javascript, typescript, react
Published: 2019-09-12 18:43:10

Hi all,

I'm currently determining what would be a great step forward for my Open Source project[1]. It is basically a temporal, versioned NoSQL document store which is built from the ground up to store snapshots very space efficient, while still providing excellent query performance, no matter which revision is going to be queried. It is capable of storing and querying XML and JSON documents in a binary format persistently.

I developed some interactive visualizations in my master theses along with diffing algorithms a few years ago. I want to port these to the web (formerly written in Processing).

So, besides comparing and viewing the tree structures of JSON and XML I want to add capabilities to interact with the database backend. As I'm also a backend software engineer and we are stuck on older technology I'm not really familiar with the frontend-stuff. I'm currently reading a book about D3 and learning JavaScript a bit, but I'd rather use TypeScript I guess or even Kotlin transpiled to JavaScript.

If you'd start a new front-end project, would you use React or Vue.js together with D3js?

Of course any kind of help or contributions would be highly welcome :-)

A quick view on how it looked like:
https://youtu.be/l9CXXBkl5vI

Or my master thesis:
https://github.com/JohannesLichtenberger/master-thesis/raw/master/Master/Thesis/thesis.pdf

Kind regards
Johannes

[1] https://sirix.io
🎥 Learn about Ingress Gateway in Istio
Tags: devops, beginners, tutorial, kubernetes
Published: 2019-09-12 18:40:34

---
title: 🎥 Learn about Ingress Gateway in Istio
published: true
description: This video explains the Istio Gateway resource and shows you how you can get external traffic to Kubernetes services running inside your cluster. 
tags: devops, beginners, tutorial, kubernetes
---

This video explains the Istio Gateway resource and shows you how you can get external traffic to Kubernetes services running inside your cluster. 

{% youtube ssqDgcEvdZ0 %}


You will need a Kubernetes cluster with Istio installed to follow along. This is explained in these two videos:

## Get Started with Kubernetes

{% youtube FacPam4bwRk %}

## Installing Istio

{% youtube VBV5JAaUJmA %}


For more content, check out [Learn Istio Blog](https://blog.learnistio.com).
Python Testing 201 with pytest
Tags: python, testing, pytest
Published: 2019-09-12 18:25:59

{% youtube fv259R38gqc %}

For Python Frederick's September presentation, I presented on Python testing.  In the presentation, I explained more of the features of pytest that went beyond the basics that we explored in March.

The recording from the talk is available on YouTube.  [Check it out!](https://www.youtube.com/watch?v=fv259R38gqc&list=PLFcKEo4b_n1wMFhbiedpMgh2VRT5uICuF&index=2)

In this presentation, I focused on a few big areas:

* Creating tests with a wide variety of example data using `@pytest.mark.parametrize`.
* Advice on organizing your test suite as the suite grows.
* Exploring fixtures as a tool for setup and reuse.
* Examining some useful built-in fixtures.

Questions?  Feel free to mention me on Twitter at [@mblayman](https://twitter.com/mblayman) so I can try to respond to your question.
Day 4 
Tags: javascript, beginners, codenewbie
Published: 2019-09-12 18:23:21



I reached the 5th section of the JS online course . The section is called Advance JS. 

<b>TIL</b> 

*Objects in Java script 
*OOP 
*constructors and instances 
*Inheritance in general 
*Inheritance in JS - Prototypes and prototype chain 

I had to re-watch the same explanation several times to grasp the idea of prototype property. 
 ![Alt text of image](https://media3.giphy.com/media/3o7btPCcdNniyf0ArS/giphy.gif)

It was made much clearer when the instructor explained it again by teaching us how to create a function constructer. 

The explanation made  it clear that if we didn’t have the prototype property , we would have the inherited function  of a constructor in every instances created using the constructor. However , using the prototype property we can use the function without having duplication of functions. 
( This is what I understood , Please correct me if I’m wrong)

It was also explained how the **new** operator works.
[PT-BR] Sou um bot, na verdade Erica, mais uma piscineira na 42SP. Pergunte-me qualquer coisa sobre a 42SP. Ask Me Anything
Tags: ama, piscine, ptbr
Published: 2019-09-12 18:19:31

Já é meu sétimo post na dev.to, sendo o terceiro dentro da Piscineiros da 42SP. Mas nunca é tarde para me apresentar.
Eu sou a Erica Akira, ou Erica Suguimoto, e mais recentemente a Erica bot da 42SP. Isso aconteceu porque eu me tornei muito ativa nos canais da 42SP das redes sociais, principalmente Facebook e Instagram, respondendo as dúvidas da galera. Responder dúvidas é uma forma de absorver melhor o conteúdo adquirido, e eu gosto muito!
Devido a esse fato, quando chegou a semana de apresentação do campus da 42 na Vila Madalena muitos participantes como eu perguntavam se eu trabalhava na 42. Outros questionavam se eu era um bot. O apelido pegou e hoje muitos me chamam de BOT.
Diz a lenda que a melhor pessoa para responder tudo sobre a 42 sou eu, então vamos abrir esse Ask Me Anything sobre a 42 São Paulo, sobre o processo, sobre a piscina, e quem sabe, sobre o curso em si.
Automatically Deploying Nuxt.js + Express app on Now
Tags: devops, nuxt, node
Published: 2019-09-12 18:16:20

I published a demo project that can help you understand deployment environments on Now.sh and how to automatically push to those environments using Github Actions.

Here's the link to the project: https://github.com/msurguy/nuxt-express-now

## More about the repository:

The project has minimal structure to it, but it achieves the goals of demonstrating automatic deployments. It:

- Uses latest stable version of Nuxt and Express (currently Nuxt 2.9.2)
- Uses API endpoint from the ENV file (or from Now.json files)
- Uses Github actions to deploy when a tag with a specific pattern is pushed
- Uses ES6 in Node server code
- Uses basic auth that is conditionally enabled / disabled via env variable
- Automatically trims old deployments (that are not aliased) once a week

## Assumptions

- The default branch is **staging**. All PRs in the project are made against that branch
- When testing is done on staging and approved, PR is opened against master
- When this project is automatically deployed via Now + Github integration (not through Github Action), it uses now.json as the config.

Here's the diagram of what's happening when you push certain tags to the Github repository:

![Now and Nuxt and Express development](https://thepracticaldev.s3.amazonaws.com/i/cc0hqg3rg4p36bl3g9bu.png)

Hope you enjoy and share this project!
Blend images with python
Tags: python, pillow
Published: 2019-07-09 12:27:04

---
title: Blend images with python
published: true
description: python
tags: python, pillow
---
Like images? You can use Python to play with images. PIL is the image library for Python. Sometimes its called Pillow or the Python Image Library.

You can do all kind of effects like blur, resize and others. 
Did you know you can also blend two images? Wait.. What is blending? 

<img src="https://media1.tenor.com/images/0db32ecc30337a58755b39ae4073f895/tenor.gif">

### Blend images

Think of mixing two images, on top of each other. 
That must be hard to do right? 

Not really. You need two images. In this case I've taken these two:

![](https://thepracticaldev.s3.amazonaws.com/i/g2hz4o83759xdp0lfpde.jpg)

![](https://thepracticaldev.s3.amazonaws.com/i/itu28jklzl1tbja138rx.jpg)

In code that becomes:

    #!/usr/bin/python3
    from PIL import Image

    Im = Image.open("lena.jpg")
    print(Im.mode,Im.size,Im.format)
    Im.show()

    newIm = Image.new ("RGBA", (640, 480), (255, 0, 0))
    Im2 = Image.open("flower.jpg").convert(Im.mode)
    Im2 = Im2.resize(Im.size)
    Im2.show()

    img = Image.blend(Im,Im2,0.2)
    img.show()

Run it to see the blended image:

![](https://thepracticaldev.s3.amazonaws.com/i/j43q5py2gaund4ahqdse.png)

The image is not saved, it only shows with img.show(). Any two images can be blend, but they must be the same size of course. That is ensured by resizing:

    Im2 = Im2.resize(Im.size)

So the blending is done with:

    img = Image.blend(Im,Im2,0.2)

The first two parameters are the images.  There are two ways to find out.

* the boring way (read documentation)
* changing the parameter

So you chose the third way? Reading more. Ok it's the alpha value.

    alpha – The interpolation alpha factor. 
    If alpha is 0.0, a copy of the first image is returned. 
    If alpha is 1.0, a copy of the second image is returned. 
    
![](https://thepracticaldev.s3.amazonaws.com/i/107em1z2hoaxd6sd78io.png)


Related links:

* <a href="https://python-pillow.org/">Pillow: Image Library</a>
* <a href="https://pythonprogramminglanguage.com/">Python tutorial</a>
* <a href="https://pythonprogramminglanguage.com/pyqt-tutorials">GUI with Python</a>
Looking for an in-place markdown editor with highlight
Tags: help, javascript, webcomponents, contenteditable
Published: 2019-09-12 18:09:36

I've probably wasted many months searching and still haven't found any working (on mobile) markdown editor / web-component.

I tried:
- codemirror 5 (space-bar somehow closes keyboard on android?!)
- codeflask (weird spacing between normal and highlighted text)
- monaco (sadly doesn't work on mobile)
- probably some more but mostly trying to fix those 3


What I'm looking for is simple inline input / web-component, which can highlight markdown-syntax that works on mobile. 

So `**bold**` would be highlighted (and maybe also bolded, but still have the asterisks visible).

I hope somebody here has found / is using some component like this
Cleave.js - formatting your input fields on the fly.
Tags: javascript
Published: 2019-09-12 18:04:40

---
title: Cleave.js - formatting your input fields on the fly.
published: true
description: I’ve recently come across a nifty JavaScript library called Cleave.js and it formats the user’s input in real-time. It’s great in pure JavaScript but can also be used in React and Angular.
tags: JavaScript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/o4luez50vbtjsa5m4z5j.png
---

# Cleave.js

I’ve recently come across a nifty JavaScript library called [Cleave.js](https://nosir.github.io/cleave.js/) and it formats the user’s input in real-time. It’s great in pure JavaScript but can also be used in React and Angular.

In my day-to-day job I often have customer requirements to validate the user input, have a max length on the input, format currency, things like that. I couldn’t believe how quick it is to implement and want to share it.

First, you include the library in your project, given you have an input that you want formatting, you create a new Cleave instance. The first argument is a String containing the selector you want to target, it can handle the following: 


* ID selector
* Class selector
* Data attributes
* Name attributes
* And more …

The second argument passed in is a configurable object which specifies how you want to format the text. You can specify whether its a credit card number, date, telephone, time or plain numeric. 

A usage I have recently implemented is formatting a Portuguese number. There currency format uses periods ‘.’ in place where we would have commas ‘,’ for thousands.  E.g. 124.545,00
One traditional way of implementing this would be to use string templates and event listeners on the input but with Cleave.js it’s simply this:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2vk28bpscqou4y9s86na.PNG)


Best thing about Cleave.js is that it’s readable, well-written documentation and very flexible. Another use case would be to format an input and once completed, a continue button appears. Luckily for us, there is a ‘onValueChanged’ callback, this is triggered on input change and can obtain the target value. In here, you could validate the length of the value and show/hide the button for example.

If you ever have to format an input in JavaScript, I would highly recommend investigating this library if it’s suitable for your use. Thank you for reading this post, hope this was helpful.
The usefulness of building useless things
Tags: beginners, productivity, sideprojects
Published: 2019-09-12 17:53:13


So you built an e-commerce website as a freelancer but was it fun? maybe you built 'XYZ management system' as a college project but was it fun?

Throughout college, we've been told to build things that are useful for society or to build something that will earn you money and think about all that business stuff.

While deciding the project among all these factors we sometimes miss one important factor... fun.

In this article, I am going to talk about things that won't be useful to anyone and they won't help you get money either but... IT WOULD BE FUN TO BUILD!

SO LEZZGOOO!! 

Building products and coding can be tiring and can give you a headache if you are building something that ummm... you don't like much 🤷 so how to handle this? SIDE PROJECTS!!! Side projects give you an opportunity to go as weird as you want and build a unicorn maybe :/ A UNICORN ROBO YASSS!! 🦄🦄🤖 


It is important to take time off your "work" to work on a side project. A project that you are building just because you want to build it. With these projects, you don't put yourself into any rules of 

**"Cool but what is your target audience?"** 
"My target audience is ME and I approve it so it's successful already 🎉 cheers 🍻"


**"Oh but this feature is too new and won't work on internet explorer"** 
"that's fine forget IE users (who really cares about them anyway)"


**"There's already an app like this"** 
"Yeah, he must have had fun building it too."

So are you convinced to build a side project by now? cool. 
Here's a list of factors to decide your next side project:
1. IT ***SHOULDN'T BE BORING***.

That's it!

With side projects, you will find yourself taking a break from your work and still learning things that you may not learn in your work project.

So I made a lot of such "useless" projects. 
I literally have a command-line tool to search on google. `search how to get a date in javascript` opens chrome and searches for "how to get a date in javascript" (I am just too lazy to double click on chrome (not lazy to write CLI to open chrome though 😂))

Thank you for reading this! Also, there is no project "useless". It is either helping someone else or it is helping you. So yes be creative and build things that are fun to build.

Do mention your projects in comments that you had fun building.
What makes recursion hard
Tags: beginners, discuss, javascript, help
Published: 2019-09-12 17:47:43

I had my first technical interview this week. My only whiteboard question: complete my least favorite challenge, the dreaded recursion.

####Prompt:

Create a function that accepts a number and returns the sum of of the Fibonacci numbers up to that number

####Results:

Unsurprisingly, I wasn't able to pull off the recursion. In the stress of the moment fixated on that instead of solutions that don't use recursion. But since then I've been wondering why recursion is so difficult for me. This is what I cam up with:
1. I don't know where to start
  1. Although I understand recursion theoretically, implementing it is a different case altogether
2. My function never returned my base case
  1. Why? No idea
3. Especially when it's a problem I've seen before, I fixate too much on recreating solutions I've seen
  1. In this scenario, familiarity worked to my disadvantage. Instead of going line by line, I got frustrated by what I thought the solution should look like
4. Nerves and stress
  1. There's nothing more nerve wracking than writing what should be a valid solution only to get `Range Error: Maximum call stack size exceeded`
5. Lack of experience
  1. As frustrating as failing can be, I do realize that these things- interviewing, solving unfamiliar challenges, even recursion- will get easier with more practice

####Conclusion:
Three days after the interview, I'm still frustrated by my perceived lack of progress. But I also feel even more motivated to understand JavaScript concepts better. Instead of recreating code I've memorized, my goal is to 
1. Understand JavaScript is doing under the hood
2. Be able to break complex problems into smaller ones
3. Write code that does what I intend for it to

I also want to consume resources like [this CSX video](https://www.youtube.com/watch?v=m8A1D9IBD50&feature=youtu.be) that focus on exploring programming paradigms

For now, though, I think it's okay to be a little disappointed in myself