teleren/devto huggingface dataset:
Shortest Palindrome
Tags: leetcode, dsa, theabbie
Published: 2022-06-07 04:00:49

You are given a string `s`. You can convert `s` to a palindrome by adding characters in front of it.

Return _the shortest palindrome you can find by performing this transformation_.

**Example 1:**

**Input:** s = "aacecaaa"
**Output:** "aaacecaaa"

**Example 2:**

**Input:** s = "abcd"
**Output:** "dcbabcd"

**Constraints:**

*   `0 <= s.length <= 5 * 104`
*   `s` consists of lowercase English letters only.

**SOLUTION:**

    class Solution:
        def shortestPalindrome(self, s: str) -> str:
            n = len(s)
            for i in range(n, -1, -1):
                if s[:i] == s[:i][::-1]:
                    return s[i:][::-1] + s
Learning to build a project from scratch in 4 weeks implementing agile methodologies.
Tags: scrum, beginners, career, programming
Published: 2022-06-07 03:58:06

The purpose of these month is going to build a project in 4 weeks implementing and agile methodology and working with phases. 

This week we’re going to focus on learning how to identify client requirements and make a proposal that we can complete on time. 

## Week 1



### Writing the project specs
    
At this point we need to make a small research about the client who is interested on working with us, because if we don’t have a previous background and don’t understand what they do we can’t offer something that we don’t know if we can build. 
In this phase we have to schedule a meeting with our client in order to understand what are they looking for.
    
It’s important to consider and let them know, what is possible to build and what isn’t. Also a project designed on four weeks is difficult, we can say that we are building and MVP (Minimum Viable Product).
    
Considering this we have to ask for the expectations of the project and start writing down the requirements.
    
### Design a proposal
    
When we got enough information, making our own research based on our client needs we have to start evaluating how much time we got to start working on the project and delimitating tasks. This can be planned using Project management software as Trello, Asana, Jira, etc. 
    
What we also need is to have deadlines and start scheduling sessions with the client to show them a demo of what we are building.  It’s important to ask  many questions as we can because the more information we got it’s going to be easier for us working on the project.
    

### Learning how to negotiate
    
After we already presented the proposal to our client we have to negotiate about things that we previously evaluate, explaining each part of the project to our clients. This is going to be important if we want to make an agreement that in this case can be related to our demo deliverables.
    
In the next weeks, we are going to be learning more about building projects form zero to hero.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/re176bpe3k9rm7rr5cbm.jpeg)
Getting Started with the Angular Tabs Component
Tags: angular, webdev
Published: 2022-06-07 03:43:49

A quick overview on how to create and configure the Syncfusion [Angular Tabs component](https://www.syncfusion.com/angular-ui-components/angular-tabs) in an Angular project. The Angular Tabs component is a content panel showing multiple categories of content in a compact space, organized into tabs. 

In this video, you will learn how to add a simple Angular Tabs component to an Angular app. You will see how to change the tab header position and set styles to the active tab header. Finally, you will learn how to initialize the tab component using a template and HTML elements. 

**Product Overview**: https://www.syncfusion.com/angular-ui-components/angular-tabs

**Tutorial video**: https://www.syncfusion.com/tutorial-videos

**Download example from GitHub**: https://github.com/SyncfusionExamples/getting-started-with-the-angular-tabs-component

{% youtube wV8uFPNK4EU %}
Refactoring 005 - Replace Comment with Function Name
Tags: javascript, beginners, refactorit, programming
Published: 2022-06-07 03:04:23

*Comments should add value. And function names too.*

> TL;DR: Don't comment on what you are doing. Name what you are doing. 

# Problems Addressed

- Bad Names

- Comments

# Related Code Smells

{% post https://dev.to/mcsee/code-smell-05-comment-abusers-2ba5 %}

{% post https://dev.to/mcsee/code-smell-75-comments-inside-a-method-2bk %}

{% post https://dev.to/mcsee/code-smell-06-too-clever-programmer-37lb %}

# Steps

1. Name the function with the previous comment

2. Remove the Comment

# Sample Code

## Before

[Gist Url]: # (https://gist.github.com/mcsee/ec23401dcd3a6e03ca6613d3c58867d0)
```php
<?

function repl($str) {
  // Replaces with spaces the braces 
 
  $str = str_replace(array("\{","\}")," ",$str);
  return $str;

}
```

## After

[Gist Url]: # (https://gist.github.com/mcsee/25b76368b744b08194ea3c853fc8f5e8)
```php
<?

// 1. Name the function with the previous comment
// 2. Remove the Comment

function replaceBracesWithSpaces($input) {
  
  return str_replace(array("\{","\}")," ", $input);

}
```

# Type

[X] SemiAutomatic

Some IDEs have this refactoring although naming is not fully automatic.

# Why the code is better?

Comments always lie.

It is hard to maintain comments.

On the contrary, Functions are alive and self-explanatory.

# Limitations

As always, very important design decisions are valid comments.

# Tags

- Comments

# See also

[What is in a name?](https://dev.to/mcsee/what-exactly-is-a-name-part-i-the-quest-61k)

# Credits

Image by Jannik Texler from Pixabay

* * * 

This article is part of the Refactoring Series.
Sourcecode syntax highlighting in html with highlight.js
Tags: html, javascript, highlightjs
Published: 2022-06-07 03:01:22

## highlight.js example

In this article I will show you how to use the highlight.js JavaScript module to present your code beautifully syntax highlighted.

The code below is a simple html page with two source code samples in typescript and Python. The first example only has the plain source code. The second example shows the usage of the highlightjs-line-number addon that adds line numbers to the source code which makes it much easier to refer the lines in the code you want to show in your html page.

```html
<html>
  <head>
    <!--Highlight.js: https://highlightjs.org/usage/-->
    <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.3.1/styles/default.min.css" />
    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.3.1/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
  </head>
  <body>
    <h1>Source code highlighting</h1>
    <h2>Typescript</h2>
    <pre name="source" id="source1" ><code id="source" class="language-typescript">
class MyClass {
    public static myValue: string;
    constructor(init: string) {
        this.myValue = init;
    }
}
import fs = require("fs");
module MyModule {
    export interface MyInterface extends Other {
        myProperty: any;
    }
}
declare magicNumber number;
myArray.forEach(() => { }); // fat arrow syntax
    </code></pre>
    <h2>Python</h2>
    <pre name="source" id="source2" ><code id="source" class="language-python">
@requires_authorization(roles=["ADMIN"])
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass

    </code></pre>
    <script lang="javascript">
        var source1 = document.getElementById('source1')
        hljs.highlightElement(source1);

        var source2 = document.getElementById('source2')
        hljs.highlightElement(source2);
        hljs.lineNumbersBlock(source2, {
            startFrom: 1
        });
    </script>
  </body>
</html>
```

Below you can see the result in the browser
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewudcnq4bth47xmbr9k4.png)

You can read all the details about highlight.js and the highlightjs-line-number module here:
* https://highlightjs.org/usage
* https://github.com/wcoder/highlightjs-line-numbers.js/
Arithmetic Slices
Tags: leetcode, dsa, theabbie
Published: 2022-06-07 03:00:41

An integer array is called arithmetic if it consists of **at least three elements** and if the difference between any two consecutive elements is the same.

*   For example, `[1,3,5,7,9]`, `[7,7,7,7]`, and `[3,-1,-5,-9]` are arithmetic sequences.

Given an integer array `nums`, return _the number of arithmetic **subarrays** of_ `nums`.

A **subarray** is a contiguous subsequence of the array.

**Example 1:**

**Input:** nums = \[1,2,3,4\]
**Output:** 3
**Explanation:** We have 3 arithmetic slices in nums: \[1, 2, 3\], \[2, 3, 4\] and \[1,2,3,4\] itself.

**Example 2:**

**Input:** nums = \[1\]
**Output:** 0

**Constraints:**

*   `1 <= nums.length <= 5000`
*   `-1000 <= nums[i] <= 1000`

**SOLUTION:**

    class Solution:
        def numSlicesEndingHere(self, nums, i, n):
            if i in self.cache:
                return self.cache[i]
            if i < 2:
                return 0
            if i == 2:
                if nums[2] - nums[1] == nums[1] - nums[0]:
                    self.cache[i] = 1
                    return 1
                self.cache[i] = 0
                return 0
            if nums[i] - nums[i - 1] == nums[i - 1] - nums[i - 2]:
                val = 1 + self.numSlicesEndingHere(nums, i - 1, n)
                self.cache[i] = val
                return val
            self.cache[i] = 0
            return 0
        
        def numberOfArithmeticSlices(self, nums: List[int]) -> int:
            n = len(nums)
            self.cache = {}
            ctr = 0
            for i in range(n):
                ctr += self.numSlicesEndingHere(nums, i, n)
            return ctr
VS Code Tip of the Week: New Tailwind CSS language mode for VS Code
Tags: vscode, vscodetips, vscodeextension
Published: 2022-06-07 02:39:25


> Tailwind uses a bunch of non-standard at-rules like @tailwind and @apply, so you get lint warnings in VS Code if you use the regular CSS language mode.
>
>To get around this, we’ve always recommended people use the PostCSS Language Support plugin which gets rid of those warnings, but also removes all of the other CSS IntelliSense support.

You can read more about the [new Tailwind CSS language mode for VS Code](https://tailwindcss.com/blog/2022-05-23-headless-ui-v1-6-tailwind-ui-team-management?ck_subscriber_id=1238260793#new-tailwind-css-language-mode-for-vs-code)

Since that then, the Tailwind team has released [Tailwind CSS Intellisense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

![Tailwind CSS Intellisense extension missing on one side showing lint errors and on the other side the Tailwind CSS Intellisense extension enabled with no errors](https://tailwindcss.com/_next/static/media/tailwindcss-language-mode.743db867cce5edbd2a3d15d503609a45.png)

Once you have the extension installed, if you want to try it out choose “Tailwind CSS” as the language mode for your CSS files.

Thanks Tailwind team and happy VS Coding!
Unraveling the inline mess in C++
Tags: cpp, inline
Published: 2022-06-05 23:28:32

In [my previous post](https://dev.to/mdh81/odr-member-vs-non-member-functions-1l8b) about inline keyword, I loudly wondered:

> I still don't know if a function that's implicitly inline is actually inlined when it's invoked. There is this c++ maxim that says "inline is only a hint and the compiler is free to ignore it". Does that apply to implicitly inlined functions? In other words, if I were to stick a 500 line definition for a function that's defined in the class definition, will the compiler still inline it?

Turns out, this is a valid question because the compiler is NOT guaranteed to inline a member functions that are present in class definitions even though defining them in the class definition *implicitly defines them as inline*

The answers in this [SO](https://stackoverflow.com/questions/9192077/is-inline-implicit-in-c-member-functions-defined-in-class-definition) clearly states that it's still up to the compiler's discretion to actually inline the calls to this function. I have highlighted the relevant sections from an upvoted answer:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6d2hzrsfcgnmdomono4z.png)

The last comment is more telling because it exactly talks about what was happening to the non-member friend function defined in Foo.h in the previous post. If you were to create a header only library, if you don't use the `inline` keyword for your non-member functions, you will end up make your library useless. You won't catch this error unless you include your header in multiple sources in your tests (something that's easy to do). 

In short, I'm not a fan of this C++ feature. I see SO responses that go to great lengths to explain the feature, but I don't think even the gurus can point to this feature as a strength of the language.
Replace Elements in an Array
Tags: leetcode, dsa, theabbie
Published: 2022-06-07 02:30:38

You are given a **0-indexed** array `nums` that consists of `n` **distinct** positive integers. Apply `m` operations to this array, where in the `ith` operation you replace the number `operations[i][0]` with `operations[i][1]`.

It is guaranteed that in the `ith` operation:

*   `operations[i][0]` **exists** in `nums`.
*   `operations[i][1]` does **not** exist in `nums`.

Return _the array obtained after applying all the operations_.

**Example 1:**

**Input:** nums = \[1,2,4,6\], operations = \[\[1,3\],\[4,7\],\[6,1\]\]
**Output:** \[3,2,7,1\]
**Explanation:** We perform the following operations on nums:
- Replace the number 1 with 3. nums becomes \[**3**,2,4,6\].
- Replace the number 4 with 7. nums becomes \[3,2,**7**,6\].
- Replace the number 6 with 1. nums becomes \[3,2,7,**1**\].
We return the final array \[3,2,7,1\].

**Example 2:**

**Input:** nums = \[1,2\], operations = \[\[1,3\],\[2,1\],\[3,2\]\]
**Output:** \[2,1\]
**Explanation:** We perform the following operations to nums:
- Replace the number 1 with 3. nums becomes \[**3**,2\].
- Replace the number 2 with 1. nums becomes \[3,**1**\].
- Replace the number 3 with 2. nums becomes \[**2**,1\].
We return the array \[2,1\].

**Constraints:**

*   `n == nums.length`
*   `m == operations.length`
*   `1 <= n, m <= 105`
*   All the values of `nums` are **distinct**.
*   `operations[i].length == 2`
*   `1 <= nums[i], operations[i][0], operations[i][1] <= 106`
*   `operations[i][0]` will exist in `nums` when applying the `ith` operation.
*   `operations[i][1]` will not exist in `nums` when applying the `ith` operation.

**SOLUTION:**

    class Solution:
        def arrayChange(self, nums: List[int], operations: List[List[int]]) -> List[int]:
            n = len(nums)
            pos = {}
            for i in range(n):
                pos[nums[i]] = i
            for a, b in operations:
                i = pos[a]
                nums[i] = b
                pos[b] = i
            return nums
Web Bio Link dan Kartu Nama Multi User Membership Pro
Tags: teknologi, komputer, pemrograman, jaringan
Published: 2022-07-21 21:33:35

---
title: Web Bio Link dan Kartu Nama Multi User Membership Pro
published: true
date: 2022-06-07 02:17:29 UTC
tags: Teknologi,Komputer,Pemrograman,Jaringan
canonical_url: https://mycoding.id/item/124/web-bio-link-dan-kartu-nama-multi-user-membership-pro
---

Script Web Bio Link dan Source Code Web Generator vCard Multi User Membership Pro. Framework Laravel versi Terbaru. Source Code Web link bio kartu nama online multi user sistem SaaS membership... Selengkapnya https://mycoding.id/item/124/web-bio-link-dan-kartu-nama-multi-user-membership-pro Web Bio Link dan Kartu Nama Multi User Membership Pro - by MC Project - Produk Digital dan Jasa Freelance
Russian Doll Envelopes
Tags: leetcode, dsa, theabbie
Published: 2022-06-07 01:30:39

You are given a 2D array of integers `envelopes` where `envelopes[i] = [wi, hi]` represents the width and the height of an envelope.

One envelope can fit into another if and only if both the width and height of one envelope are greater than the other envelope's width and height.

Return _the maximum number of envelopes you can Russian doll (i.e., put one inside the other)_.

**Note:** You cannot rotate an envelope.

**Example 1:**

**Input:** envelopes = \[\[5,4\],\[6,4\],\[6,7\],\[2,3\]\]
**Output:** 3
**Explanation:** The maximum number of envelopes you can Russian doll is `3` (\[2,3\] => \[5,4\] => \[6,7\]).

**Example 2:**

**Input:** envelopes = \[\[1,1\],\[1,1\],\[1,1\]\]
**Output:** 1

**Constraints:**

*   `1 <= envelopes.length <= 105`
*   `envelopes[i].length == 2`
*   `1 <= wi, hi <= 105`

**SOLUTION:**

    import bisect
    
    class Solution:
        def maxEnvelopes(self, envelopes: List[List[int]]) -> int:
            n = len(envelopes)
            envelopes.sort(key = lambda x: (x[0], -x[1]))
            sub = []
            for w, h in envelopes:
                i = bisect.bisect_left(sub, h)
                if i == len(sub):
                    sub.append(h)
                else:
                    sub[i] = h
            return len(sub)
Anatomia de tags HTML
Tags: html, webdev, tag, javascript
Published: 2022-06-07 01:20:34

Hoy hablaremos de la anatomia y estructura de un tag HTML para poder utilizarla en nuestro sitio.

```
<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
   <h1>Hola Mundo!</h1>
 </body>
</html>
```


Si probamos este código, vemos que se muestra en el sitio la frase "Hola Mundo!", esto es gracias a la linea de nuestro código:

```
   <h1>Hola Mundo!</h1>
```


Aquí podemos ver un tag de apertura y un tag de cierre del tipo Heading 1 (O "h1"). 

Entre esos tags está el contenido al que queremos aplicar esa estructura (Nuestra frase "Hola Mundo")

Estos tags hacen solicitudes al navegador pidiéndole que estructure y muestre nuestro texto sin formato en la forma en que queremos que se visualice (En este caso, queremos que se vea la frase como un título de tamaño grande).

Otro tipo de tag que precisamos ver es el de tags que no tienen cierre. Como por ejemplo "<br>" para especificar un salto de línea.

Pero, ¿cómo averiguamos si algo requiere un tag de cierre o se cierra automáticamente?

Podemos dirigirnos a la documentación [Aquí](https://devdocs.io/html/element/heading_elements).

Si echamos un vistazo a la documentación de los elementos de encabezado, puede ver que hay una parte en la tabla que dice omisión de tag y dice que tanto la tag inicial como la final son obligatorias para qué puede especificar a qué parte de su texto desea aplicar esta estructura.

Si echamos un vistazo al br o al elemento de salto de línea, puedes ver eso bajo omisión de tags, dice que debe tener un tag de inicio y no debe tener un tag de finalización.

Sabemos que la primera parte de la tag es el elemento HTML y es br, hr o lo que sea que quieras usar.

La segunda parte dentro de nuestro tag se llama un atributo HTML y básicamente da más información al navegador para especificar modificaciones a ese elemento HTML.
K-th Symbol in Grammar
Tags: leetcode, dsa, theabbie
Published: 2022-06-07 01:00:53

We build a table of `n` rows (**1-indexed**). We start by writing `0` in the `1st` row. Now in every subsequent row, we look at the previous row and replace each occurrence of `0` with `01`, and each occurrence of `1` with `10`.

*   For example, for `n = 3`, the `1st` row is `0`, the `2nd` row is `01`, and the `3rd` row is `0110`.

Given two integer `n` and `k`, return the `kth` (**1-indexed**) symbol in the `nth` row of a table of `n` rows.

**Example 1:**

**Input:** n = 1, k = 1
**Output:** 0
**Explanation:** row 1: 0

**Example 2:**

**Input:** n = 2, k = 1
**Output:** 0
**Explanation:** 
row 1: 0
row 2: 01

**Example 3:**

**Input:** n = 2, k = 2
**Output:** 1
**Explanation:** 
row 1: 0
row 2: 01

**Constraints:**

*   `1 <= n <= 30`
*   `1 <= k <= 2n - 1`

**SOLUTION:**

    class Solution:
        def kthGrammar(self, n: int, k: int) -> int:
            if n == 1 and k == 1:
                return 0
            prev = self.kthGrammar(n - 1, (k + 1) >> 1)
            if k & 1:
                return prev
            return 1 - prev
Longest string without repeating characters in javaascript
Tags: javascript, string, programming, algorithms
Published: 2022-06-07 00:52:01


```/**
 * @param {string} s
 * @return {number}
 */
var lengthOfLongestSubstring = function(s) {
  let map = new Map();
    if (!s.length) {
        return null
    }
    for (let i = 0; i < s.length; i++) {
        let count = 0;
        let checkString = s.substring(0, i + 1)
        let start = 0;
        while (s.substring(start, s.length - 1).indexOf(checkString) > -1) {
            count++;
            if (map.has(checkString)) {
                let existedCount = map.get(checkString);
                map.set(checkString, existedCount + 1)
                existedCount = 0;
            } else {
                map.set(checkString, count)
            }
            start++;
        }
    }
    if (map.size) {
        let keys = Array.from(map.keys());
        return keys.reduce((a, b) => map.get(a) > map.get(b) ? map.get(a) : map.get(b))
    }
};
//console.log("Higest", lengthOfLongestSubstring('abcabcbb'))
//console.log("map", map)`
```

> Any suggestions or comments are welcome.
Find First Palindromic String in the Array
Tags: leetcode, dsa, theabbie
Published: 2022-06-07 00:30:49

Given an array of strings `words`, return _the first **palindromic** string in the array_. If there is no such string, return _an **empty string**_ `""`.

A string is **palindromic** if it reads the same forward and backward.

**Example 1:**

**Input:** words = \["abc","car","ada","racecar","cool"\]
**Output:** "ada"
**Explanation:** The first string that is palindromic is "ada".
Note that "racecar" is also palindromic, but it is not the first.

**Example 2:**

**Input:** words = \["notapalindrome","racecar"\]
**Output:** "racecar"
**Explanation:** The first and only string that is palindromic is "racecar".

**Example 3:**

**Input:** words = \["def","ghi"\]
**Output:** ""
**Explanation:** There are no palindromic strings, so the empty string is returned.

**Constraints:**

*   `1 <= words.length <= 100`
*   `1 <= words[i].length <= 100`
*   `words[i]` consists only of lowercase English letters.

**SOLUTION:**

    class Solution:
        def firstPalindrome(self, words: List[str]) -> str:
            for word in words:
                if word == word[::-1]:
                    return word
            return ""