teleren/devto huggingface dataset:
LeetCode Longest Palindromic Substring
Tags: leetcode, cpp, go, javascript
Published: 2021-04-04 11:22:44

---
title: LeetCode Longest Palindromic Substring
published: true
description: LeetCode longest palindromic substring in C++, Golang and Javascript.
tags: #leetcode, #cpp, #golang, #javascript
---

https://alkeshghorpade.me/post/leetcode-longest-palindromic-substring
Understanding Kubernetes in a visual way (in 🎥 video): part 9 – Labels & Selector
Tags: kubernetes, devops, docker, beginners
Published: 2021-04-04 11:13:12

---
title: Understanding Kubernetes in a visual way (in 🎥 video): part 9 – Labels & Selector
published: true
description: Serie of videos about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in a visual way - (in video) in video
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ttb72sy1xfdjcqwqhzq.png
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes, then I've auto-published a book and since now I've started a new serie of video! :-)

I imagined a serie of short videos with a mix of sketchnotes and speech.

I think it could be a good way, more visual, with audio & video to explain Kubernetes (and others technologies).

The new episode is focused on a very important Kubernetes object: Labels & Selector.

{% youtube k43ZXkVU2J4 %}

The video is in French BUT I done the subtitles in english (and french too).

If you liked the video and are interested to watch another ones, please give me some feedbacks (and you can also subscribe to [my Youtube channel](https://www.youtube.com/channel/UCrRk0kOP58lBMl9B8ZS8Vlg), if you want to ❤️).

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 165 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

If you like theses sketchnotes, you can follow me, I will publish others sketchs shortly :-).
Begining My Front End Life Activities
Tags: html, css, frontend
Published: 2021-04-04 11:08:54

So sometime in November last year, I wanted to try out my frontend skill which I have been studying for well over 2 years so I got on to the Frontend Mentor Challenges and picked one of the Newbie Free challenges.

I abandoned it a week after upon facing setback with arranging the profile boxes (equal sizing and even spacing), I later picked it up again and upon consulting a friend, I was pointed in the direction of CSS Grids which solved my issue.

Abandoned again, finally completed the mobile view and uploaded my challenge solution. I know it isn't the best solution out there but I am proud I finally completed.

**My experience plus:**
1. Design for mobile first
2. Technology is daily improving, stay current or you become 
   archaic, being good in a lot of old stuff 

Repository: [bitbucket.org/Odemilade/social-proof-sec](https://bitbucket.org/Odemilade/social-proof-sec)
    (I had an issue with my git)
Live website: [social-proof](https://gracious-lalande-b74b42.netlify.app)
Angular 6 HttpClient – Get/Post/Put/Delete requests + SpringBoot RestAPIs + Bootstrap 4

Tags: angular6, springboot, restapi
Published: 2021-04-04 11:07:37

https://grokonez.com/frontend/angular/angular-6/angular-6-httpclient-get-post-put-delete-requests-springboot-restapis-bootstrap-4

Angular provides the <code>HttpClient</code> in <code>@angular/common/http</code> for front-end applications communicate with backend services. In the tutorial, we show how to build an Angular application that uses the <code>HttpClient</code> to make <code>get/post/put/delete</code> requests with <code>Observable</code> apis to SpringBoot RestAPIs.

Related posts:
- <a href="https://grokonez.com/frontend/angular/angular-6/angular-6-service-with-observable-data-for-asynchronous-operation">Angular 6 Service – with Observable Data for Asynchronous Operation</a>
- <a href="https://grokonez.com/frontend/angular/angular-6/angular-6-routing-navigation-with-angular-router-service">Angular 6 Routing/Navigation – with Angular Router Service</a>
- <a href="https://grokonez.com/frontend/angular/angular-6/angular-6-template-driven-form-ngmodel-for-two-way-data-binding">Angular 6 Template Driven Form – NgModel for Two-Way Data Binding</a>

<!--more-->
<h2>Technologies</h2>
<ul>
<li>Java 1.8</li>
<li>Maven 3.3.9</li>
<li>Spring Tool Suite – Version 3.9.4.RELEASE</li>
<li>Spring Boot: 2.0.3.RELEASE</li>
<li>Angular 6</li>
<li>RxJS 6</li>
<li>Bootstrap 4</li>
<li>Visual Studio Code – version 1.24.0</li>
</ul>
<h2>Overview</h2>
<h3>Goals</h3>
We create 2 projects:

- Angular Client Project:

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-http-client-get-post-put-delete-request-angular-6-project-structure.png" alt="angular-6-http-client-get-post-put-delete-request + angular-6-project-structure" width="206" height="527" class="alignnone size-full wp-image-13346" />

- SpringBoot Server Project:

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-http-client-get-post-put-delete-request-spring-boot-rest-apis.png" alt="angular-6-http-client-get-post-put-delete-request + spring-boot-rest-apis" width="301" height="162" class="alignnone size-full wp-image-13347" />

<strong>Overview</strong>

<img src="https://grokonez.com/wp-content/uploads/2018/06/springboot-rest-apis-angular-6-http-client-angular-http-service-architecture.png" alt="springboot-rest-apis +angular-6-http-client +angular-http-service-architecture" width="570" height="542" class="alignnone size-full wp-image-13348" />

<strong>UserCase</strong>



More at: https://grokonez.com/frontend/angular/angular-6/angular-6-httpclient-get-post-put-delete-requests-springboot-restapis-bootstrap-4
ConvertMore | Convert More Website Visits into Calls!
Published: 2021-04-04 10:27:57

You are probably wondering how you can get the ball rolling and finally get some more clients and sales. We have created [software ](https://convertmore.com/)that can help you convert your leads into sales in just a few clicks. The setup is free of charge and will help you get in touch with clients immediately. If your potential clients have queries, they can easily reach you with just a click of a button on their screen. You can also set up a timed popup that would appear after a user has spent a certain amount of time on your webpage. This will help you reach your customers before they leave your website. Schedule your Convert More demo today and see what it’s all about.
Deploy Angular 4/6/7 Application on Google App Engine – Google Cloud Platform
Tags: angular, deploy, googlecloud
Published: 2021-04-04 10:26:15

https://grokonez.com/deployment/google-cloud-platform/how-to-deploy-angular-4-6-7-application-on-google-app-engine-google-cloud-platform

Google App Engine is a web framework and cloud computing platform. App Engine enables developers to stay more productive and agile. So in the tutorial, we show you how to deploy Angular 4/6/7 Application on Google App Engine - Google Cloud Platform.

Related posts:
– <a href="https://grokonez.com/frontend/angular-6-dynamic-navigation-bar-add-remove-route-dynamically">Angular 6 dynamic Navigation Bar – add/remove Route dynamically</a>

<!--more-->
<h2>Technologies</h2>
- Google Cloud Platform
- Angular
<h2>Goal</h2>
- We deploy Angular Application on Google App Engine:

<img src="https://grokonez.com/wp-content/uploads/2018/12/deploy-angular-on-google-app-engine-deploy-gcloud.png" alt="deploy-angular-on-google-app-engine---deploy-gcloud" width="707" height="408" class="alignnone size-full wp-image-16187" />

<img src="https://grokonez.com/wp-content/uploads/2018/12/deploy-angular-on-google-app-engine-done-v1.png" alt="deploy-angular-on-google-app-engine---done-v1" width="489" height="284" class="alignnone size-full wp-image-16188" />
<h2>Practice</h2>
<h3>Create Google App Engine & Storage</h3>
- Use your Google account -> Go to the Google Cloud Console then Login with your Google account. Create a Google App Engine <code>gcp-angular-app</code>:

<img src="https://grokonez.com/wp-content/uploads/2018/12/deploy-angular-on-google-app-engine-create-google-app-engine.png" alt="deploy-angular-on-google-app-engine---create-google-app-engine" width="755" height="302" class="alignnone size-full wp-image-16189" />

- On <strong>Search</strong> box, search <code>Storage</code>, and create a <code>bucket-angular-app</code> bucket.

<img src="https://grokonez.com/wp-content/uploads/2018/12/deploy-angular-on-google-app-engine-storage-search.png" alt="deploy-angular-on-google-app-engine---storage-search" width="625" height="144" class="alignnone size-full wp-image-16190" />

<img src="https://grokonez.com/wp-content/uploads/2018/12/deploy-angular-on-google-app-engine-create-a-bucket.png" alt="deploy-angular-on-google-app-engine---create-a-bucket" width="717" height="677" class="alignnone size-full wp-image-16191" />

<img src="https://grokonez.com/wp-content/uploads/2018/12/deploy-angular-on-google-app-engine-create-a-bucket-overview.png" alt="deploy-angular-on-google-app-engine---create-a-bucket-overview" width="532" height="510" class="alignnone size-full wp-image-16192" />

Now the cloud is almost setup

More at: https://grokonez.com/deployment/google-cloud-platform/how-to-deploy-angular-4-6-7-application-on-google-app-engine-google-cloud-platform
How to slice a substring from Swift string
Tags: ios, swift, string
Published: 2021-04-04 10:21:27

    

    extension StringProtocol {
        func slice(_ start: Int, _ end: Int) -> SubSequence {
            let lower = index(self.startIndex, offsetBy: start)
            let upper = index(lower, offsetBy: end - start)
            return self[lower...upper]
        }
    }

    "BibinJ".slice(2, 4) // Answer is "bin"
Angular Built-in Pipe Uppercase Pipe + Lowercase Pipe + Titlecase Pipe Example
Tags: angular, pipe
Published: 2021-04-04 10:05:22

Angular Built-in Pipe Uppercase Pipe + Lowercase Pipe + Titlecase Pipe Example

https://grokonez.com/frontend/angular/angular-6/angular-built-in-pipe-uppercase-pipe-lowercase-pipe-titlecase-pipe-example

In the tutorial, we show how to work with Angular Built-in Uppercase, Lowercase and Titlecase pipes.

Related posts:
- <a href="https://grokonez.com/frontend/angular-6-keyvalue-pipe-ngfor-loop-through-object-map-example">Angular 6 KeyValue Pipe</a>
- <a href="https://grokonez.com/frontend/angular-built-in-datepipe-example-pre-defined-format-timezone-locale-custom-format">Angular Built-in DatePipe</a>
- <a href="https://grokonez.com/frontend/angular-6-custom-pipe-with-parameterizing-a-pipe-angular-pure-pipes-impure-pipes">Angular Custom Pipe | Pure & Impure Pipes</a>
- <a href="https://grokonez.com/frontend/angular-built-in-slice-pipe-array-slicepipe-string-slicepipe-example">Angular Built-in SlicePipe</a>

Related pages:
<ul>
<li><a href="https://grokonez.com/angular-tutorial">Angular Tutorials</a></li>
</ul>


More at: https://grokonez.com/frontend/angular/angular-6/angular-built-in-pipe-uppercase-pipe-lowercase-pipe-titlecase-pipe-example
Automation using ENTR
Tags: linux, productivity, automation, terminal
Published: 2021-04-04 10:00:37

> PS this is my fist post on dev.to :)

`entr` is a command line utility to run commands when file(s) change. Meaning, `entr` can be used for anything, ranging from a LaTex recompilation to updating your status bar!

## Installation
`entr` should be available in most `*nix` distributions' package repos. Use the package manager to install it. Check out the [github repo](https://github.com/eradman/entr) for more info on compiling it manually.

## Usage

Lets assume you have a LaTex file named `notes.tex`. Now, to recompile the LaTex document, we need to run `pdflatex notes.tex notes.pdf`. Lets automate this. The general way to run `entr` is 

`ls <name of file> | entr <command to execute>`

so, changing it to our needs,
`ls notes.tex | entr pdflatex notes.tex notes.pdf`

## Useful options!!

Here are a few useful options for entr,

- `-p` -> Don't run the command at startup
- `-s` -> Use `$SHELL` to evaluate the command
- `-c` -> Clear the screen before starting

To quit `entr` while it is running, press `q` 
To execute the command immediately, press `<space>`

Read `entr (1)` for info on other options.

Check out a video tutorial on `entr` [here](https://youtu.be/H36TT5WIUQ4):

Please check out my [website](https://devhypercoder.com) and [patreon](https://patreon.com/DevHyperCoder)
MBP02 Basic select queries in Mybatis-plus
Tags: mybatisplus, springboot
Published: 2021-04-04 09:54:48

# Mapper中的基本查询

Continue to use the database table and entity class created in the last blog:

```sql
create table users (
  id integer primary key not null auto_increment,
  username varchar(50) not null,
  password varchar(100) not null,
  question varchar(150),
  answer varchar(50)
);
```

```java
@TableName(value = "users")
public class AppUser {
    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;
    private String username;
    private String password;
    private String question;
    private String answer;
}
```

```java
public interface AppUserMapper extends BaseMapper<AppUser> {
}
```

## selectById 与 selectBatchIds

```java
AppUser appUser = appUserMapper.selectById(2);
```

```java
List<Integer> ids = new ArrayList<>();
ids.add(1);
ids.add(2);
ids.add(3);
List<AppUser> users = appUserMapper.selectBatchIds(ids);
```

## 通过Map - selectByMap

通过Map来封装查询条件，map中写的是数据表中的**列名**，而非实体类的属性名。

```java
Map<String,Object> columnMap = new HashMap<>();
columnMap.put("username", "jisu");
columnMap.put("question", "What is my name?");
List<UserInfo> users = userInfoMapper.selectByMap(columnMap);
```

## 使用QueryWrapper

QueryWrapper是一个查询构造器，相当于Where条件。

```java
QueryWrapper<AppUser> queryWrapper = new QueryWrapper<>();
queryWrapper.like("username","ha").like("question", "What");
```

QueryWrapper的方法见下表：

| method name | note | example |
| --------- | --------- | ------- |
| eq | = | eq("name", "wong") |
| ne | != | ne("name", "wong") |
| gt | > | gt("age", 18) |
| ge | >= |  |
| lt | < |  |
| le | <= |  |
| or | OR | 紧接着的下一个方法不是用ADD连接eq("id", 1).or().eq(age, 18) |
| between |  |  |
| notBetween |  |  |
| like |  |  |
| notLike |  |  |
| likeLeft |  |  |
| likeRight |  |  |
| inSql |  |  |
| notInSql |  |  |
| groupBy |  |  |
| orderByAsc |  |  |
| orderByDesc |  |  |
How to store passwords and keys in your project
Tags: python, django, tutorial, howto
Published: 2021-04-03 10:20:46

#### Prepare
* Django project ready to deploy
* Many private keys: 
    * Database username/password
    * Twilio username/password 
    * Django `SECRET_KEY` 
    * ... many others

#### Solution
Yes, you may to save variable directly in your code. **But this is a bad practice**. Because **not secure** save keys in Github or another git solution!

1.Use **Environment variables** 
```python
import os

os.environ['MY_VAR'] = 'Private value' # Set key-value
my_var = os.environ.get('MY_VAR') # Read variable value from anywhere
```

**Cons**: after restart server we loose `Environment variables`

2.Save `Environment variables` in `.bashrc (.zshrc)`

Add to your `~/.zshrc` file:
```
...

export MY_VAR="Private value" # Here!

# source ~/.zshrc
```

Good. Now we can to read our variable:
```python
import os

my_var = os.environ.get('MY_VAR') # return 'Private value'
```

#### Bonus
* For Django use useful `environ-wrapper`: [django-environ](https://github.com/joke2k/django-environ)
* Create `.env` file, past private data to it and this is all:
```python
env = environ.Env()
environ.Env.read_env()

SECRET_KEY = env('SECRET_KEY')

# Database
# https://docs.djangoproject.com/en/2.1/ref/settings/#databases
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': env('DB_NAME'),
        'USER': env('DB_USER'),
        'PASSWORD': env('DB_PASSWORD'),
        'HOST': 'localhost',
        'PORT': '',
    }
}
```
* Don't forget to add `.env` to your `.gitignore`
Clipping-Path-Service-usa
Published: 2021-04-04 09:50:55


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hapmpv32x024r10vipbf.jpg)

Clipp Asia is an offshore graphic design studio with over 100 hundred Photoshop DTP professionals from three countries. We work 24 hours a day to provide high quality photo editing services and help you meet all your deadlines.

We offer high quality hand drawn clipping paths, advanced photoshop masks, shadow effects,
https://clippasia.com/clipping-path-services
After years working as a team member (sw eng.)- I built a productivity tool specifically for them (and possibly you 😊)!
Tags: productivity, showdev, tooling
Published: 2021-04-04 09:34:17

Hi everyone!

I'm Ram, the creator of [Queues](https://queues-app.com?invite_code=dev.to)- a productivity tool for individuals in collaborative spaces.
The idea for Queues has come from a personal pain I've had while working as a team member myself (software engineer on a few different companies).

Queues is on beta and I wanted to invite you to try it out and share any feedback you might have!


Background: Modern teams use a wide set of collaborative tools for their work, many of which have become **streams of work** for the team **individuals**.

The problem: Our work as individuals is scattered around multiple tools and places. It is **not organized** according to the person that actually performs it- **us**!

The solution: Queues provides you with **your own** private space for managing **your own** collaborative work, as sourced from the multiple tools your team uses.

How it works:

1. Get all collaboration updates from the multiple tools your team uses in one personalized feed
2. Easily convert updates that require further action to synced tasks
3. Reflect on all your work- smartly ordered by impact, and organized according to your own context
4. + Learn from your habits and become more productive

Queues is currently in limited beta, with waiting list slots opening regularly. Use the "dev.to" invite code on sign up to get waiting list priority.

[https://queues-app.com?invite_code=dev.to](https://queues-app.com?invite_code=dev.to)

Thanks, Ram
A better way to Git Commit
Tags: github, git
Published: 2021-04-04 09:23:56

## What's Git?
As described on the official website, Git is a free and open-source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. [git-scm.com](https://git-scm.com/)

### Git Commit
The "commit" is a command in git, it's used to save your changes to the local repository and captures a snapshot of the project's current stages changes. Committed snapshots can be thought of as "safe" version of a project, Git will never change them unless you explicitly ask it to.

The commit message should be structured as follows:
```
<type>(<scope>): <subject>

<body>

<footer>
```



##### message `<subject>`:
First-line cannot be longer than 70 characters, the second line is always blank and other lines should be wrapped at 80 characters.

##### message `<body>`:
* uses the imperative, present tense: `change` not `changed` nor `changes`.
* includes motivation for the change and contrasts with previous behavior.

##### message `<footer>`:
Closed issues should be listed on a separate line in the footer prefixed with "Closes" keyword like this:
```
Closes #101
```
or in case of multiple issues:
```
Closes #101, #102, #103
```

##### `<type>` values:
* **feat** (new feature).
* **fix** (bug fix).
* **docs** (changes to documentation).
* **style** (formatting, missing semicolons, etc; no code change).
* **refactor** (refactoring production code).
* **test** (adding missing tests, refactoring tests; no production code change).
* **chore** (updating grunt tasks etc; no production code change).

##### `<scope>` values:
* **init**
* **runner**
* **watcher**
* **config**
* **web-server**
* **proxy** 
* **etc** 

*The `<scope>` can be empty (eg. if the change is a global or difficult to assign to a single component), in which case the parentheses are omitted.*


#### Breaking changes
All breaking changes have to be mentioned in footer with the description of the change, justification and migration notes.
```
BREAKING CHANGE:
`port-runner` command line option has changed to `runner-port`, so that it is
consistent with the configuration file syntax.

To migrate your project, change all the commands, where you use `--port-runner`
to `--runner-port`.
```

Source from:
[Karma](https://karma-runner.github.io/0.10/dev/git-commit-msg.html)
Kotlin Spring WebFlux Annotation-Based RestAPIs - with SpringBoot 2
Tags: kotlin, springwebflux, restapi
Published: 2021-04-04 09:17:07

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-spring-webflux-annotation-based-restapis-springboot-2

Kotlin Spring WebFlux Annotation-Based RestAPIs - with SpringBoot 2

<a href="https://grokonez.com/category/reactive-programming">Reactive programming</a> is about non-blocking applications. And Spring Framework 5 includes a new spring-webflux module, supports Reactive Streams for communicating backpressure across async components and libraries. So in the tutorial, <a href="https://grokonez.com">JavaSampleApproach</a> will guide you through the steps for creating a <strong>Kotlin Spring WebFlux Annotation-Based RestAPIs</strong> with <strong>SpringBoot 2</strong>.

Related posts:
- <a href="https://grokonez.com/spring-framework/kotlin-spring-mvc-requestmapping-restful-apis-getmapping-postmapping-putmapping-deletemapping-springboot-example">Kotlin Spring MVC RequestMapping RESTful APIs with @GetMapping, @PostMapping, @PutMapping, @DeleteMapping | SpringBoot Example</a>

<!--more-->
<h2>I. Technologies</h2>
– Java: 1.8
– Maven: 3.5.2
– Spring Tool Suite: Version 3.9.0.RELEASE
– Spring Boot: 2.0.0.M7
- Kotlin 1.1.61
– Spring Boot Starter Webflux
- Postman client
<h2>II. Spring WebFlux</h2>
<strong>Spring Framework 5.0</strong> supports <strong>WebFlux</strong> with fully asynchronous and non-blocking and does NOT require the Servlet API(Unlike Spring MVC).

<strong>Spring WebFlux</strong> supports 2 distinct programming models:
– Annotation-based with <code>@RestController</code>
– Functional with Java 8 lambda style

In the tutorial, we will introduce WebFlux with <strong>Annotation-based</strong> and <strong>Kotlin</strong> language.
For starting with WebFlux, SpringBoot supports a collection dependency: <strong>spring-boot-starter-webflux</strong>.

Kotlin sample code:

<pre><code class="language-java">
import reactor.core.publisher.Flux;
import reactor.core.publisher.Mono;

@RestController
@RequestMapping(value="/api/customer")
class RestControllerAPIs {

	@GetMapping
    fun getAll(): Flux<Customer> {
    	return Flux.fromIterable(ArrayList(custStores.values));
    }
	
	@GetMapping("/{id}")
    fun getCustomer(@PathVariable id: Long): Mono<Customer> {
		return Mono.justOrEmpty(custStores.get(id))
    }
	
	...
}
</code></pre>

– <code>reactor.core.publisher.Flux</code>: is a standard <strong>Publisher</strong> representing a reactive sequence of <strong>0..N</strong> items, optionally terminated by either a success signal or an error.
– <code>reactor.core.publisher.Mono</code>: <strong>Mono</strong> is a specialized <strong>Publisher</strong> that emits at most single-valued-or-empty result.

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-spring-webflux-annotation-based-restapis-springboot-2