teleren/devto huggingface dataset:
Week 1 Bonus - Palindrome Permutation
Tags: leetcode, python
Published: 2021-01-03 22:53:20

I have the code for this [in this GitHub Repo](https://github.com/ruarfff/leetcode-jan-2021/blob/main/src/Week1Bonus.py)

## The Problem

[Leetcode Link](https://leetcode.com/problems/palindrome-permutation/)


>Given a string, determine if a permutation of the string could form a palindrome.

__Example 1:__

```
Input: "code"
Output: false
```

__Example 2:__

```
Input: "aab"
Output: true
```

__Example 3:__

```
Input: "carerac"
Output: true
```

## My Tests

```python
import pytest
from .Week1Bonus import Solution

s = Solution()


@pytest.mark.parametrize("test_input", ["code", "abc"])
def test_cannot_permute(test_input):
    assert not s.canPermutePalindrome(test_input)


@pytest.mark.parametrize("test_input", ["aab", "carerac", "a", "aa"])
def test_can_permute(test_input):
    assert s.canPermutePalindrome(test_input)
```

## My Solution

```python
class Solution:
    def canPermutePalindrome(self, s: str) -> bool:
        if len(s) == 1:
            return True
        char_counts = {}
        for c in s:
            if c in char_counts:
                char_counts[c] = char_counts[c] + 1
            else:
                char_counts[c] = 1
        values = char_counts.values()
        num_odd = 0

        for n in values:
            if n == 1 or n % 2 != 0:
                num_odd += 1

        return num_odd < 2
```


## Analysis

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

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

## My Commentary

OK, I was pretty lazy with this one but it didn't turn out too terrible. 

I thought if you go through the string and figure out how many letters appear an odd number of times, it was then a reasonable solution to check if we had more than one letter appearing an odd number of times. If we do then no permutation of the string can be a palindrome. 

I have not put much thought into a better solution yet so if you have any tips please let me know :)
Youtube playlist `console` scraping
Tags: javascript, youtube, automation, webscraping
Published: 2021-01-03 22:45:04

### **The motivation** :fire:
Sometimes you face the fact that you need some seed data to do some stuff, in my case I needed some course data in form of the bulk of videos so my first blinking thought was using Youtube playlists where I just needed a couple.

### **Why using the browser console?** :sunglasses:
Of course, I could use selenium if I had to grab a big number of playlist info or dig in with the Youtube API, but the need was quite simpler, so I decided to write a simple JavaScript script in the playlist browser console by analyzing the "current" HTML tree, and it was simple as well.

### **The recepie** :yum:
* Each video in the list was a web component called `ytd-playlist-panel-video-renderer`.
* The video title had the id `video-title`
* The video length in `ytd-thumbnail-overlay-time-status-renderer` element then with `span.ytd-thumbnail-overlay-time-status-renderer` selector
* And finally the relative Url using the id `thumbnail` within the main web component.

Then a couple of grain of salt `getSeconds` and `getEmbedUrl` helper functions we got our finished dish ready.

```javascript
let getSeconds = secondsText => {
    let spl = secondsText.split(':');
    return parseInt(spl[0]) * 60 + parseInt(spl[1]);
};

let getEmbedUrl = url => {
    let vIndex = url.indexOf('?v=');
    let lIndex = url.indexOf('&list=');
    return 'https://www.youtube.com/embed/' + url.substring(vIndex + 3, lIndex);
};

JSON.stringify([...document.querySelectorAll('ytd-playlist-panel-video-renderer')]
.map(x => {
    let title = x.querySelector('#video-title').innerText;
    let secondsText = 
		x.querySelector('ytd-thumbnail-overlay-time-status-renderer')
		 .querySelector('span.ytd-thumbnail-overlay-time-status-renderer').innerText;
    let seconds = getSeconds(secondsText);
    let url = getEmbedUrl(x.querySelector('#thumbnail')
              .getAttribute('href'));
    return {title, seconds, url};
}), null, 2);
```

**Or**
[Code as gist](https://gist.github.com/amenayach/9bf537d14d3e31a66a39e5207573d7dc)

#### **Last note** :wave:

Usually, I use the console built in `copy` function to copy the resulting data to the clipboard, but in this case, I used `JSON.stringify` to print the result out as the Youtube site seems to disable the `copy` function!
Learning Vim the right way
Tags: vim, webdev, tutorial
Published: 2021-01-03 22:15:19

Recently I challenged myself to use only a plain text editor to make some simple website apps as an experiment to see what tools actually made a difference to my performance and quality of my code. You can read about that [here](https://dev.to/jadenconcord/challenge-use-plain-text-editor-and-vanilla-js-31d7). What I leaned from that experiment was that tools like Vim that make make it easier to code can have an impact on the organization of you code. Although Vim has no effect over how you write your code, I have found that some tools can encourage you to have more quality code while other tools just distract you from doing what you need to do.

If you are just starting out leaning Vim and it may seem complicated or challenging to learn, there is this game called Vim Adventures, its a silly game yet effective to getting people used to basic Vim. Try it out [here](https://vim-adventures.com).

After you have the basics down, you can open this text document in Vim that guides you through all the main features of vim. Pop up you command line and simply enter (and of course install vim),
~~~bash
vimtutor
~~~
[if you are using windows](https://itectec.com/superuser/how-to-run-vimtutor-on-windows/)
If you go through the guide you should have a good understanding of vim and your next steps will be just to practice using vim.

Understand that you are not going to use all of the features and that more important than learning Vim is your knowledge and skill in the languages you are developing. I use Vim key bindings in my code editor and I don't use Vim all of the time as the real limit to your projects is you not the tools or software or whatever.
How to create new role in voyager with dashboard access
Tags: laravel, voyager, override, custom
Published: 2021-01-03 21:34:41

Voyager is simply an admin for your Laravel, it comes with a-lot of features under the hook, including roles and permission, by default voyager comes with two roles: user and admin role.

Create new role on voyager dashboard:
- Login in into your dashboard
- Select the roles in the menu tab
- To allow this role access to the dashboard i.e any user having this role 
can also login into the dashboard. 
Check the Browse Admin option as showed in the image below

![role.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1603784997712/hIF5DpW9D.png)
- Click on submit when you are done. 

Congratulation you just created your new role.
Alleviate, Daily Blog and Relaxation app- Part 3
Tags: dohackathon, flutter, docker
Published: 2021-01-03 21:19:40

Whew, didn't take me quite long since the previous but I'm almost done with the app. Since there were very minimal bugs left for me to resolve, I had the biggest challenge to face, which was Deploying the app on the Digital Ocean App Platform. Prior to this hack, I didn't know that App Platform never supported Flutter Apps, and now that I was ready to deploy and play with App Platform, this fact hit me hard. 


![Depression](https://media4.giphy.com/media/qomgI0d6MFwQwX4sc5/giphy.gif?cid=ecf05e47qdmde2ib4jv6g0mqvowu2y476n14blngwkinfzg2&rid=giphy.gif)

But, I never gave up, I saw Docker as a supported framework and thought of using Docker to build and deploy my app using Nginx so that the built app can be downloaded and installed manually on mobile phones.

It took me some time to understand and figure out how Digital Ocean's App Platform works, but documentation and the lovely community helped me figure out each and every part of it. 

Once, I was familiar with the platform and the tools, I started working on the Dockerfile and decided to move from Nginx to Caddy for serving my apk. However, one challenge I faced here was with the ``OutOfMemory`` error which usually happens, when your RAM isn't enough. However, users can increase their RAM and CPU configuration without having to run and build the docker image again. Once, this was done, Voila! The apk was served fresh on a server host, where anyone could download and use it.

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

#### I'd recommend using the 2 GB RAM | 1 vCPU configuration and above for running the Dockerfile.

#### I just have few more bug fixes to deal with and my app would be fully done and dusted in a couple of days.
Selecting a Kubernetes Serverless Framework
Tags: kubernetes, serverless, help, question
Published: 2021-01-03 21:15:10

I'm in the process of trying to set up a Kubernetes cluster as a home lab for personal use. Resources are a concern for me due to using lightweight hardware for energy savings. I was thinking about using serverless as a way to scale applications up and down as needed. 

I'm looking at the frameworks mentioned in this post:
https://winderresearch.com/a-comparison-of-serverless-frameworks-for-kubernetes-openfaas-openwhisk-fission-kubeless-and-more/

I'm trying to pick one of these frameworks.
Which one do you use? Which one would you recommend the most? How easy is it to set up? What kind of guides/resources are there to learn the framework?
Share your slack messages in the form of QR Code.
Tags: dohackathon, javascript, node, webdev
Published: 2021-01-03 20:37:26

Happy New Year Everyone!😇

Last year I decided to build a side project which could help people using slack to share passwords and other important information easy and securely. I have worked on a few side projects last year and this was my last side project of the year 2020!

DEV hackathons always gives developers an amazing opportunity to showcase their work and innovate around new tech. I am always excited and look forward to participate in DEV hackathons as it give me immense motivation to innovate and try out cool new tech.

##Background
So my idea behind the app was very simple, while using slack we sometimes tend to share messages which might contain some sensitive information. This could be anything and sharing such information is always a bit risky specially when your using organisational resources. 

##Solution
In order to be more secure I had an idea in which users can share such messages which will be visible to other user in the form of **QR code**. This QR code will contain the text message which the other user has sent and **will expire after 30 secs**.

## Category Submission:
**Built for Business**

## Permissive License
MIT

##More about the App.
I have created a slack app which will allow users to enter the message in the dialog box and then select the username or channel/ group name where he wants to send the message.

###Steps
The app is very easy to use

* Type `/secure-share` in your message editor.

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


* After that a dialog box will open which will ask you to enter the message.

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

* After entering the message select the channel/username to send the message.

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

* Once we select the sender's name the QR code will be generated and posted to recipient chat.

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

* After 30 secs the message will be deleted from the recipient chat leaving a message.

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

This app is currently deployed over digital ocean servers from where I tested the app locally. A bit amount of work is still pending until the final release and pushing it to Slack app directory.😅

I am really enjoying working on this project as it helped me to learn a whole bunch of new things. I also enjoyed exploring the Digital Ocean platform specially the integrations and deployments part was pretty smooth.😇

In the next post I will be sharing my journey and the paths I will be following to release my app to production.😀
Mentor Wanted !!?
Tags: beginners, discuss, help
Published: 2021-01-03 20:24:21

Hello, I am currently a Jr Front End Developer with basic knowledge of HTML and CSS at the moment. I am looking for someone to mentor and guide me in the right direction with my goal being to land my first Web Developer job. I am nowhere near ready but I know with the right mentor I will excel. Please if any experiened / Skilled Front end or Full Stack devs are interested PLEASE let me know.
Thanks, Whitney Michelle
Set FPS and toggle your animation with requestAnimationFrame()
Tags: dohackathon, javascript, webdev, programming
Published: 2021-01-03 20:21:37

Did you know you can build your own animations and toggle them with JS?

In this article I want to share a little codepen that shows how you can control an animation. The object we will animate is a small drawing on the HTML Canvas. The tool to animate something manually is the [requestAnimationFrame method](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). This function will execute a callback function every x times per second matching your monitors refresh rate. The method returns an ID which can be used to stop the animation:
```javascript
const animationId = window.requestAnimationFrame(animate);
// ...
window.cancelAnimationFrame(animationId);
```
One important thing to know is that you have to call the *requestAnimationFrame* Method inside of your callback function. But that's basically all the magic on how to build your own animation.
If you want to use a custom frame per second count for your animation there is a simple solution. You have to only call the *requestAnimationFrame* if enough time has passed since the last animation.

Enough theory here is the codepen where you can see it in action:

{% codepen https://codepen.io/doener48/pen/vYXRLzJ %}

The animation draws lines on the canvas in a circle and will stop if the lines reach 3/4 of of the circle. In the settings the animation is set to a specific FPS count aswell. 

Examples with 10, 30 and 60 FPS:

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

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

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

Please note there are multiple ways to measure the passed time for your FPS. E.g. you could use the [performance api](https://developer.mozilla.org/en-US/docs/Web/API/Performance) or you could use the passed timestamp of the *requestAnimationFrame* function. I just used a simple solution which is by far not the best.

## Creative Coding Workbench
This article is part of my progress for the Digital Ocean Hackathon Project 'Creative Coding Workbench':

### Used features:
 - ~~draw sketch on HTML canvas~~
 - ~~expose sketch settings to UI~~
 - ~~export sketch for print~~
 - ~~toggle sketch animation~~

### Used Technologies:
 - Sapper 
 - Digitial Ocean App Platform
  
I decided to end my project with this set of features. The next article will be my submission to the Hackathon. Stay tuned for this article as I will describe my full project and the future plans with this little tool.
JavaScript Data Structures: Stacks
Tags: javascript, stacks, algorithms, datastructures
Published: 2021-01-03 20:20:10

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kvg3wrqks2uw2ua1cr2y.jpg)
## What is a stack 

A stack is a list of elements only accessible from one end: the top. It is called a LIFO(Last in first out) data structure. Any element not currently at the top of the stack cannot be accessed. To get to an element at the bottom of the stack, all the elements above it must be disposed.

## Creating a stack

First we will define the stack class and the constructor. The items array will store the elements of the stack.


```javascript

class Stack {
    constructor(){
        this.items=[];
    }
};

```
Next we will define the *push()* method. This add a new item or items to the top of the stack.
```javascript

 push=(element)=>{
        return this.items.push(element);
    }
```
To check the element at the top of the stack, we will define the *peek()* method. 

```javascript

 peek=(element)=>{
        return this.items[this.items.length - 1];
    }
```

The *pop()* function removes and returns the top element from the stack.

```javascript

pop=()=>{
        return this.items.pop();
    };
```



To find how many element are in the stack, we define the *size()* functions
```javascript

 size=()=>{
        return this.items.length;
    }
```


To remove all elements in the stack we define the *clear()* functions
```javascript

 clear=()=>{
        return this.items=[];
    }
```

This is the full code of the Stack class
```javascript

class Stack {
    constructor(){
        this.items=[];
    }
    push=(element)=>{
        return this.items.push(element);
    }
    peek=(element)=>{
        return this.items[this.items.length - 1];
    }
    pop=()=>{
        return this.items.pop();
    }
    size=()=>{
        return this.items.length;
    }
    clear=()=>{
        return this.items=[];
    }
}
```

To use the Stack class:
```javascript

let newStack= new Stack();
//to pop
newStack.pop();
//to add
newStack.push(3);
```



##Use cases of stacks

1. Palindromes- palindromes are words that are spelled the same way forward as backwards like car, racecar. Stacks can be used to determine if a given word is a palindrome. The original string is pushed onto a stack moving from left to right. When the end of the string is reached, the stack contains the word in reverse order with the top of the stack being the first character and the bottom of the stack being the last letter. The reversed string is compared with the original string; if they are equal then the word is a palindrome.

2. Multiple base conversions – Stacks can be used to convert a number from one base to another.
What did I do on new year eve
Tags: happynewyear, vue, javascript, css
Published: 2021-01-03 20:11:35

I was wondering how should I start new year. While I was thinking about it, I was trying to work on a design for sending out loud to friends and family.

What could be better than coding a web page which says so, "I said to myself".

and then I came up with idea to start new year, with a fragile message which would appear on the page with some news from previous year.


The code is kept at my repo at [Happy New YearCode Repo](https://github.com/nar3nd3r/new-year-code) and deployment is set on [Vercel](https://new-year-code.nar3nd3r.vercel.app/).

Now this is not the very best of code which I might have put out there, but the fact that, I did say what I wanted to say, in a way, which I would like.

Meanwhile I recorded the while process and put that on my [YouTube channel](https://www.youtube.com/channel/UCUiekeeMkjztUkFognq7gCA?sub_confirmation=1), and lemme tell you that it was one hell of fun,

If you've read so far, I would like to thank you for being patient on this post, cause this one is the very first of mine on devTo.

I wish you a very Happy New Year 2021, and I wish that this year bring a lot of good stuff for you.

Cheers.
PostgreSQL Sürümleri ve Dağıtımlar
Tags: postgres, distro, version
Published: 2021-01-03 20:08:31

PostgreSQL kullanmak için iki farklı yöntem bulunmakta. Bu yöntemlerden birisi PostgreSQL'in kendi web sayfasındaki depodan kullanmak, bir diğeri ise dağıtımların kendi depolarından kullanmak.

Bu yazı yazılırken, yani 3 Ocak 2020 tarihli depo sürümlerini kullandığım için zamana göre oluşabilecek değişiklikleri tekrar kontrol etmenizde fayda var. Bu yazı kıyaslama ve temel bilgilendirme için yazılmıştır.

*****

# Ubuntu

Ubuntu'nun kendi deposunda aşağıdaki gibi sürümler kullanılmakta olup, 11, 12 ve 13 sürümlerini resmi depodan kullanabilirsiniz.

https://packages.ubuntu.com/search?keywords=postgresql
https://www.postgresql.org/download/linux/ubuntu/

## Ubuntu 16.04

Sürüm: 9.5

## Ubuntu 18.04

Sürüm: 10

## Ubuntu 20.04

Sürüm: 12

*****

# Debian

Debian'ın kendi deposunda aşağıdaki gibi sürümler kullanılmakta olup, 11, 12 ve 13 sürümlerini resmi depodan kullanabilirsiniz.

https://packages.debian.org/search?keywords=postgresql
https://www.postgresql.org/download/linux/debian/

## Debian 9 Stretch

Sürüm: 9.6

## Debian 10 Buster

Sürüm: 11

## Debian 11 Bulleye

Sürüm: 13

*****

# Centos

Centos'un kendi deposunda aşağıdaki gibi sürüm kullanılmakta olup, 11, 12 ve 13 sürümlerini resmi depodan kullanabilirsiniz.

https://pkgs.org/download/postgresql
https://www.postgresql.org/download/linux/redhat/

## Centos 7

Sürüm: 9.2

*****

# PostgreSQL Sürümleri

PostgreSQL sürümlerinin ilk ve son olarak duyurulma tarihleri aşağıdaki gibidir:

* Sürüm 13 - 24 Eylül 2020 - 13 Kasım 2025
* Sürüm 12 - 3 Ekim 2019 - 14 Kasım 2024
* Sürüm 11 - 18 Ekim 2018 - 13 Kasım 2023
* Sürüm 10 - 5 Ekim 2017 - 13 Kasım 2022
* Sürüm 9.6 - 29 Eylül 2016 - 13 Kasım 2021

*****

Özetle hangi PostgeSQL sürümünü kullanmayı düşünüyorsanız onu iyi araştırıp seçiminizi yapmanız en güzeli olacaktır.
Vue 3 typescript component framework - part 1 - basic setup
Tags: vue, typescript, beginners, webdev
Published: 2021-01-03 19:51:37

Hey,

Let us build a component Library together!
On the way, we will learn vue3 and typescript!
And many many more tools!
Here is the first video:

{% youtube C-JP7ZlLgxA%}

Code Repo for youtube: https://github.com/lampewebdev/lcs-components-yt
Code Repo for the project: https://github.com/lampewebdev/lcs-components

**👋Say Hello!** [Instagram](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)
The pros and cons of being a developer
Tags: discuss, career
Published: 2021-01-03 19:40:07

Hey people!

As developers, it's easy to praise our profession, because, for most of us, we get to do what we love - solve problems through coding.

That said, there can also be negative aspects.

## How I see it:
**Pros**
- Hobby and work in one
- Get to work in a field that's praised
- Get to use my brain
- IT is part of every industry there is
- A great community
- There's always something new to be learned
- Can use my professional skills for improving personal life
- Salary's good

**Cons**
- Keeping up with new tech can sometimes be overwhelming
- Long hours behind the computer
- There's always something new to be learned (I know, it's both good and bad imo)
- One can easily burn out

So I'd like to ask you:
## What do you believe are the pros and cons of being a developer?
cURL error 60: SSL certificate problem: unable to get local issuer certificate
Tags: laravel, wordpress
Published: 2021-01-03 19:29:19

Read More: [https://www.scratchcode.io/curl-error-ssl-certificate-problem-unable-to-get-local-issuer-certificate/](https://www.scratchcode.io/curl-error-ssl-certificate-problem-unable-to-get-local-issuer-certificate/)