teleren/devto huggingface dataset:
Getting started on the personal development path
Tags: improvement, discuss, growth, dailythoughts
Published: 2021-12-29 08:43:19

---
title: Getting started on the personal development path
published: true
description: Getting started on the personal development path
tags: improvement, discuss, growth, dailythoughts
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mz2gynbz6gahqs7we717.jpg
---

_Originally posted on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/getting-started-on-the-personal-development-path/)._

> What if you devote the first hour of the day to yourself, intentionally trying to improve an aspect of your life that you've been putting off for too long?

You can do that by reading, thinking, writing, meditating even. The [Miracle Morning](https://amzn.to/3FCnYtH) book can show you what and how to do it. Personally, the life SAVERS exercise is something I've stuck with for years now. Here are some [other books](https://www.nikola-breznjak.com/blog/books/want-improve-read-books/) that may be of interest to you.

Oh, and btw, if you spend half of that 1-hour on reading, you'll end up reading 30 books per year (and here's the [math that proves it](https://www.nikola-breznjak.com/blog/books/math-behind-reading-30-books-per-year/)).

---

⚠️ In this new "Daily Thoughts" series, I'm just scratching my own itch. For too long now I've been reading and consuming. Not that there's something inherently wrong with that, but if one doesn't offset that with his own producing, one often falls into the trap of staying a consumer. If you think you know something, or want to learn something about yourself, try to explain it 'on paper'.

Personally, I think best 'on paper', and it's been a while since a wrote a post. So, I'll start small (and build up a habit of daily writing again) by sharing a thought daily. I'll use this as a retrospective a year from now.

Dear readers, feel free to chime in with your thoughts on my thoughts (so Meta; which is popular in its own right these days).
Two Best Themes For WordPress Beginners
Tags: wordpress, webdev, beginners
Published: 2021-12-29 08:30:57

I am writing this short summary or Article for beginners starting there career in WordPress Websites. With WordPress CMS, users can create great interactive mobile friendly websites with little or no coding skills.

## Best Themes To Use

- Astra Theme (multipurpose theme)
- Neve Theme  (multipurpose theme best mobile friendly)
- Ocean Wp

## Must Have Page Builders

Once you install WordPress, the next step is to install a page builder to customize your themes as per your requirement. Some best page builders to work with are

- Elementor
- Divi Builder
- Beaver Builder
- Visual Composer Website Builder

## Essential Plugins

Once you install Page Builder Plugins, another step is to select some more plugins to make your website rank, perform better, and some more advance enhancements.

- Yoast SEO Plugin
- Cache Plugins
- All In One Wp Migration
- Monster Insights
- Word fence

Based on the information share above, [Astra Theme Website](www.kabootarparwari.com) and [Neve Theme Website](www.ojgamer.com) for your reference.
The Crest at Sobha Hartland Apartments
Published: 2021-12-29 08:22:59

 Real Estate company where clients can find all recent projects and off-plan project-related useful information. 
The Crest by Sobha is a master-planned development that offers residents a chance to explore the waterfront lifestyle beside its crystal lagoons.
Its strategic location within The Crest at Sobha Hartland marks one more addition to the MBR locality that offers access to an array of lifestyle facilities.
kids Swimming Pools

Published: 2021-12-29 08:17:17

Have you been searching for the best [kids swimming pools](https://www.fultonswimschool.co.nz/blog/take-a-dip-in-the-best-swimming-pools-in-auckland/) for your child? If yes, then you are at the right place as Fulton Swim School is rated as one of the best swimming pools that you can trust upon for all your needs related to swimming lessons by the industry leaders.
A11y tips: bind form controls and messages
Tags: a11y, tips, html
Published: 2021-12-29 08:03:18

[As we saw before](https://dev.to/carlosespada/a11y-tips-dont-use-links-buttons-or-headings-inside-labels-odp), the ARIA attribute `aria-describedby` can be used to **establish a relationship between a form control and an element**.

It is very important to establish this connection since, when a form control receives focus, screen readers enter the so-called _form mode_ and from there **only the control and its related elements are announced**, for which there must be a good relationship established between them so that the user has all the necessary information at the time of filling it in.

This includes certain types of messages, such as hints about the format that the data must have (eg: passwords), links to other documents (eg: legal terms checkbox) or error messages of the data entered.

And what is the correct way to do it? Assigning the `aria-describedby` attribute of the form control the value of the `id` attribute of the message that we want to relate, as in this example:

```
<label for="password">
  Password
</label>
<input 
  type="password" 
  id="password"
  aria-describedby="password-desc" 
  autocomplete="off">
<p id="password-desc">
  Password must be at least 8 characters long and contain a number.
</p>
```

In case of having more than one related element, the `aria-describedby` attribute [admits more than one value](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute), separated with a space:

```
<label for="password">
  Password
</label>
<input 
  type="password" 
  id="password"
  aria-describedby="password-desc password-error" 
  autocomplete="off">
<p id="password-desc">
  Password must be at least 8 characters long and contain a number.
</p>
<p id="password-error">
  Your password does not comply with the required format
</p>
```
Haskell - part 1 - Introduction
Published: 2021-12-29 07:39:00

When I was doing my master's I learned an alienated programming language. subject name was functional programming. As I am a programming languages enthusiast I just chose the subject without knowing how its gonna be. though I heard its all about a language called Haskell I really didnt bother much to search about it.

So lets come to the Intro.

Haskell is a functional programming language. what? yeah all the other languages also have functions. whats new in here then.

So in haskell everything is a pure function.

okay. what is a pure function?

* It always gives you the same output when you provide same input.
* No side effects.

What are side effects then.

* A side effects are when a function relies on, or modifies, something outside its parameters to do something.

I copied the definition. Anyways I can give you some examples. If you do an API call, IO operation, database calls or even console logs these thing are called as side effects.

So now you might get a doubt on how we can do those side effects.

Actually in Haskell there is a concept called "Monads" to handle it. In a coming blog i will explain how to write a monad. As it has a more learning curve.

This is just a small introduction. will meet the next blog soon. till then enjoy coding.

Cheers!!!
New ReactJS Mini-project Course Alert
Published: 2021-12-29 07:22:16

Hello guys,
I just published a ReactJS Mini-projects course that helps ReactJS beginners sharpen their skills by building mini projects.

Here is a $9 discount
[Get Course Here](https://www.udemy.com/course/reactjs-mini-projects-course/?couponCode=9DOLLARS)

Check out other courses on  [ZinoTrustAcademy.com](https://www.udemy.com/course/reactjs-mini-projects-course/?couponCode=9DOLLARS)
Does high performing organization doesn't care about best practice / architecture?
Tags: devops, discuss, organization
Published: 2021-12-29 07:19:56

Hi all, recently i read Puppet State of Devops 2021 report [link](https://puppet.com/resources/report/2021-state-of-devops-report). Beside gaining a lot of insight from the report, i am also fascinated by a very interesting chart about aggregate team composition for low vs medium vs high performing organization from one of the slide.


![Teams Composition Chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6iq6z077d3vqmhglcjc.png)

Beside telling the usual story about high DevOps evolution characteristic like high performing team invest a lot in automating infrastructure / internal platform or low performing team has significant silo between developer & operation team, i also notice something different.

High performing team has less team composition which emphasis is on architecture or best practice, and has higher team composition which focus on providing reusable assets (tools, library). Below is subset of related statistic.

Teams | Low | Medium | High
--- | --- | --- | ---
A team that creates reusable assets (e.g., libraries, tools, or services) for other teams to assemble into solutions | 3% | 6% | 10%
A team that defines the standards, processes, practices, frameworks or architectures that other teams must follow | 16% | 10% | 7%
A team whose primary mission is to help define and encourage the adoption of good practices by other teams | 7% | 9% | 4%

If understood naively, these statistics would imply that high performing organization doesn't invest much in architecture or best practice, and invest more in tooling/library, hence the click-bait title of this post. It would mean that high performing organization doesn't invest much on DevOps Center of Excellence.

Of course, this naive conclusion is wrong when we look at example of high DevOps evolution company, like Google or Netflix, as frequently they have exemplar best practice (like code stylesheet, or coding practice) and deals with really complicated architecture, like highly available, fault tolerant, zero trust security.

Then maybe, just thinking out loud, there is other reason that this statistic happen. maybe it's:
- High DevOps organization thought that centralized best practice / architecture is slow or ineffective, and prefer shared / decentralized approach to it like frequent pair programming
- Hiring & Screening of Engineers, FANG companies is notorious for their screening of engineers to have high standard on best practice / architecture

But these reasons is just hypothesis from me, i want to understand what's the actual difference or reason of this discrepancy, could anyone with relevant experience (i.e has work experience in high devops evolution team before) share their thought / experience on this issue?
Packets and Frames in libav transcoding pipeline
Tags: multimedia, tutorial, learning, ffmpeg
Published: 2021-12-29 07:19:12

I found it a bit confusing to identify when to use `AVFrame` and when to use `AVPacket` while working with libav.

TLDR; Packets contain encoded data. Frames contain decoded data

That is the only difference between packets and frames but it is the core reason for their differences in attributes and the stage in which they are produced in a transcoding pipeline.

## Let us understand this with an example
Taking referrence from the famous [libav tutorial on github](https://github.com/leandromoreira/ffmpeg-libav-tutorial#chapter-3---transcoding)

![Trancoding pipeline](https://raw.githubusercontent.com/leandromoreira/ffmpeg-libav-tutorial/master/img/transcoding_flow.png)

> The **AVFormatContext** is the abstraction for the format of the media file, aka container (ex: MKV, MP4, Webm, TS). The **AVStream** represents each type of data for a given format (ex: audio, video, subtitle, metadata). The **AVPacket** is a slice of compressed data obtained from the `AVStream` that can be decoded by an **AVCodec** (ex: av1, h264, vp9, hevc) generating a raw data called **AVFrame**.

**To implement this, we use the following functions (in this order)**
- `avcodec_send_packet` to send an encoded packet to the decoder
- `avcodec_receive_frame` to recieve a raw frame from the decoder
<br>

We then perform any modifications such as scaling, resampling, cropping, format conversion, etc. on the raw frame.
Remember to keep the frames compatible for the encoder being used.

- `avcodec_send_frame` to send a raw frame to the encoder
- `avcodec_receive_packet` to recieve an encoded packet from the encoder
<br>

But this also has further intricacies like:

<!--## Misc Notes:-->
### Multiple frames in single packet
A (*encoded*) packet could contain multiple (*raw*) frames while. This can occur separately while encoding and decoding and depends on the attributes of the codec (`AVCodecContext`). 
Hence it is a good idea to use `avcodec_receive_frame` inside a loop and read frames till it does not return an error, specifically `AVERROR(EAGAIN)`, that signals that the internal buffer (of the codec) is now empty.

### `avcodec_decode_*` and `avcodec_encode_*` methods
It can be confusing to find these methods being used in other libav projects/scripts to build a complete transcoding workflow with fewer function calls. 
But, as mentioned [here](https://ffmpeg.org/doxygen/3.2/group__lavc__encdec.html) the above mentioned workflow of packets and frames is meant to replace these legacy functions.
PHP deployment to SSH server using Github action and bash script
Tags: php, github, devops, beginners
Published: 2021-12-29 07:04:15

In this tutorial we would lean how to deploy our PHP code to a remote server using github action .

##Step 1.
ssh into remote server by 

for Windows users use Power shell, while Mac users use Terminal.

yyyy : username
xxxx.xxxx.xxxx : Remote IP address
-p :Reference to a port
ZZZZ: port number 


##Step 2
In the root directory on your linux server create a bash file and write into by using 

``
touch phpdeploy.sh && vi phpdeploy.sh
``

##Step 3

To start typing on the vi editor type press the "a" key and input the following

```
echo "Deploying changes..."


cd /var/www/html

DIR="ECOMM"

if [ -d "$DIR" ]; then
  
  cd DIR
  echo "Pull update "
  git  pull	
fi

else 
 echo "Clone repo"
 git clone 
 https://username:password@github.com/username/projectname.git


fi

```
To exit insert mode on vi editor press escape key followed by shift column and type wq(save and quite).


##Step 4

This is our final step, this involves creating our .github/main.yaml file in the root of our project.

```
name:project name
on:
  push:
    branches: main
jobs:
  build-and-deploy:
    name: Build and deploy next site
    runs-on: ubuntu-latest
    steps:
        - name: copy file via ssh key
        uses: appleboy/scp-action@master
        env:
          HOST:  XXXXXXX
          PORT:  XXXXX
          USERNAME:  XXXXX
          PASSWORD: XXXXXX
          command_timeout: 100m
          script: sh phpdeploy.sh
      
```
For every time your code is merger to "main" branch  the yaml file above would execute.Thanks for reading.
Stop using Array.map() everywhere 🥵
Tags: javascript, webdev, beginners, productivity
Published: 2021-12-29 06:38:59

<span class='first-letter'>M</span>ost of the time I used to see the snippet like this 👇

```js
const fruits = ["apple", "orange", "cherry"];
let text = "";
document.getElementById("main").innerHTML = text;
fruits.map(i => text += i );
```

In the above snippet, we are adding `fruits` text to the DOM in `main` ID.
It seems there is no issue in the above snippet, Though there is one major issue, which we will be going see today.

Let's understand the issue by definition of `map`, `map()` method creates a new array populated with the results of calling a provided function on every element in the calling array.

<u>example:</u>

```js
let n = [1, 2, 3, 4];
let add = n.map(i => i + 2);
console.log(add); // [3, 4, 5, 6]
```

**NOTE:** Using `map()` method means returning a new collection of an array.

As discussed, `map()` method always returns a new array, so if you don’t have any use of a new array then never use `map()` method.
When you just need to iterate through an array, I will always recommend using other array methods like `forEach` or `for..of`.

<u>example:</u>

```js
const fruits = ["apple", "orange", "cherry"];
let text = "";
fruits.forEach(myFunction);

document.getElementById("main").innerHTML = text;
 
function myFunction(item, index) {
  text += index + ": " + item + "<br>"; 
}
```


### Why do we care about it? 🙄

As we know, `map()` method always returns an array. If you just need to update DOM then storing those elements into memory form doesn't add any point.
Of course, for a small chunk of numbers nothing is going to happen, however, if we take a larger number here then it affects the performance side as it will store the value in memory which will be redundant.


### Summary  ⅀

Stop using `map()` method, if you just need to iterate through an array. 
Start using `forEach` or `for...of` method, if you want to iterate through an array.

Thanks for reading the article ❤️
Hope this post will be useful!

<a href="https://www.buymeacoffee.com/suprabhasupi" target="_blank"><img src="https://i.imgur.com/4t25pJE.png" alt="Buy Me A Coffee" /></a>

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        📚 <a href="https://gum.co/css-pseudo-class-elements"> Ebooks</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>
Pardus 21'de tümü-rakam kullanıcı sorunu çözümü
Tags: linux, posix, systemd, username
Published: 2021-12-29 06:30:36


Güncel GNU/Linux işletim sistemlerinde (Örneğin Pardus 21.x veya RHEL 8.x), all-numeric (tümü-rakam) kullanıcı adlarında oluşan problemlerden dolayı özellikle systemd servisindeki güncelleştirmeler sonucunda tümü-rakam kullanıcı oluşturulması engellenmiştir ve bir şekilde oluşturulması durumunda çeşitli işlevselliklerde [hatalar](https://access.redhat.com/solutions/3103631) oluşmaktadır.  

## Sorunun belirlenmesi 

Sorun en temel olarak sistemde kullanıcı eklenirken oluşmaktadır. "--force-badname" olarak kullanıcı eklense bile systemd üzerindeki bazı servislerde problem oluşmaya devam etmektedir.

```
adduser: Please enter a username matching the regular expression configured
via the NAME_REGEX configuration variable.  Use the `--force-badname'
option to relax this check or reconfigure NAME_REGEX.
```

## Domain ortamlarında sorunun çözümü

Sorun, tümü-rakam kullanıcı isminden dolayı olduğu için sistemin sağlıklı çalışabilmesi için kullanıcı ismi manipülasyonu gerekmektedir. Kurumsal ortamda kullanıcı ismi olarak `12345678911@aciklab.lab` şeklinde bir isim ile problem çözülmektedir. 

Tabi ki bu süreç için daha öncesinde sistemin SSSD ile entegre olacak şekilde domaine alınmış olması gerekmektedir.

### sssd.conf kullanımı ile kullanıcı adı manipülasyonu 

Giriş yapacak kullanıcı isimleri için [domain/aciklab.lab] sekmesi altında aşağıdaki parametrenin eklenmesi gerekmektedir.

```
use_fully_qualified_names = True
```

Bu satırın eklenmesi sonrasında servisin yenilenmesi gerekecektir.

```
sudo systemctl restart sssd
```

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

### lightdm üzerinden kullanıcı adı ile giriş yapmak

Varsayılan lightdm ayarlarında daha önce giriş yapılmamış bilgisayarlarda kullanıcı girişi sırasında sadece `12345678911` kullanıcı adı yerine `12345678911@aciklab.lab` veya `ACIKLAB.LAB\\12345678911` kullanıcı adı ile giriş yapılması gerekmektedir. İlk giriş yaptıktan sonra tekrardan uzun isim yazmak gerekmemektedir. Bunun için `/etc/lightdm/lightdm.conf` içerisinde aşağıdaki satırın `true` olmadığı netleşmelidir.

```
greeter-hide-users=false
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwfx6zc2bdv3evwgo6pt.png)
10 Small Projects To Practice Html And CSS
Tags: html, css, webdev, beginners
Published: 2021-12-29 06:22:26

Html and CSS are the basic building blocks in front end development. Having a good command in both of them can help to be a great front end developer. Practicing different Project can help you to learn and grow. 
These are 10 Projects with attached tutorial.



## 1. Build Animated and Creative Our Teams Section

![Project Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8rig28gtm5djtveew1z4.png)

Tutorial Link - [https://www.youtube.com/watch?v=T0RBuU_jclU]()

## 2. About Us Section

![About Us Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nsw6wv7pgra31mri6p3n.png)

Tutorial Link -[https://youtu.be/cWHWJyHunD0]()

## 3. Accordion - Create FAQ Section


![Accordion the webdev guy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19b1lkiujryh5joqb5bn.png)

Tutorial Link - [https://youtu.be/JnYVgNe_Bx0]()

## 4. Course Enrollment Card


![Course Enrollment the webdev guy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vcvk0wakjxutrc3dsxz.png)

Tutorial Link - https://youtu.be/uMccYWjLMh8

## 5. Newsletter Subscription Form


![Newsletter Subscription the webdev guy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5nebdznwhyl6dw80maq.png)

Tutorial Link - [https://youtu.be/K90-ihhUZRc]()

## 6. Portfolio Card 


![Portfolio Card the webdev guy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4w4xolfnm7osyjne1rw.png)

Tutorial Link - [https://youtu.be/5KdgpMr0CmU]()

## 7. Preview Components


![Preview Components the webdev guy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c68e9jf33e9wt6m4mdme.png)

Tutorial Link - [https://youtu.be/-YcERQVI1Lw]()

## 8. Pricing Cards For Website


![Price Cards the webdev guy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0m3o4p6l6j4d1rgydlt.png)

Tutorial Link - [https://youtu.be/plT52cddvGA]()

## 9. Our Skills Section 


![Our Skills the webdev guy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ir4xpst2bv5ffclftfg.png)

Tutorial Link - [https://youtu.be/Pu2yIVpHp5I]()

## 10. Event Registration


![Event Registration the webdev guy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ay8yj2dshbh7g0imc3ms.png)

Tutorial Link - https://youtu.be/_E4--gQ1lRg
Svelte의 안내데스크, svelte-add
Published: 2021-12-29 06:08:01

Vue 에는 내가 단짝이라고 칭한 VueUse 를 기재했었다.
그리고 그 덕분에 VueUse에 관심을 가진 한국 개발자가 늘어났다.

`[대충 흐뭇한 짤]`

내가 Svelte 삽질하다가 슬럼프가 있었다. 그 틈에 많은 개발자들이 스벨트와 Kit 가지고 열심히 지지고 볶는 글을 많이 올려주었다.
뭐? 리액트 단짝? 일단 react-use 가 있긴 한데 나중에 다시 확인해서 소개하도록 하겠다.
오늘 소개할 것은 Svelte의 안내데스크, `svelte-add` 다.
왜 안내데스크냐고?

이 녀석의 목적은 Svelte boilerplate 성격이 강하다.
스벨트 프로젝트를 초기화할 때 필요한 라이브러리가 있다면, 이걸 손쉽게 세팅해서 바로 쓸 수 있게끔 해주는 프로젝트다.
그래서 내가 안내데스크라 칭한 거다.

{% github svelte-add/svelte-add %}

일단 Svelte 에서 공식으로 제공하는 기본 템플릿을 불러오는 명령어다.

```sh
npm init svelte@next my-app
```
my-app 을 원하는 명칭 넣고 부르면 새 프로젝트 끝이다.

이번엔 svelte-add 에서 제공하는 기본 템플릿을 불러오는 명령어다.

```sh
npm init @svelte-add/kit@latest
```
그러면 안내문이 표시되는데, 안내하는대로 입력하면 프로젝트가 완성된다.
여기서 좋은 게 뭐냐면, 추가할 것들을 선택할 수 있다는 것.

게다가 즐기는 모듈과 같이 바로 프로젝트를 초기화할 수 있다.

```sh
npm init --yes @svelte-add/kit@latest -- --with postcss+mdsvex
```

이렇게 하면 해당 프로젝트에 Svelte Kit가 초기화되면서 postcss 와 mdsvex 모듈이 추가된 새 프로젝트를 초기화해줄 것이다.

> mdsvex 가 뭐냐고? 마크다운에 svelte 구문도 쓸 수 있게 해주는 놈.

이게 다가 아니다. svelte-add 의 진가는 프로젝트 관리 중에 일어난다.
이미 초기화가 됐는데 모듈을 추가하고 싶다?
예를 들어 tailwindcss 를 추가하고 싶다면, 간단하게 이렇게 호출하면 된다.

```sh
npx svelte-add@latest tailwindcss
```

초기화할 때는 `npm init` 어쩌고를 썼지만,
운영 중 추가는 `npx`를 썼다.
위 명령어만 호출하면 `tailwindcss` 모듈을 추가하고 관련 초기 세팅을 알아서 해준다.
이 얼마나 기특한 기능이란 말인가!

만약 지원하는 모듈을 알고 싶다면, 공식 Github에서 확인하면 되고.
또한 `npm init @svelte-add/kit@latest` 에서도 확장 가능한 모듈이 표시되니 여기서도 확인 가능하다.

일단... Svelte 를 vite로 관리하는 프로젝트 중심으로 지원한다.
SvelteKit 가 vite 위주의 관리 체계를 가지고 있기 때문에.

한계이긴 하다. 그리고 Svelte가 공식적으로 Vite 중심으로 움직이기 때문에.
Vite를 선택한 이유가 바로 SSR과 HMR이 잘 지원되기 때문이다.

끗.