teleren/devto huggingface dataset:
Developer Diaries: Week 4 - The exploding brain
Tags: testing, devjournal, javascript, react
Published: 2021-09-10 18:34:27

What a week! Let's dive right in. 

# Imposter Syndrome

Let's start off with the _worst_ part of this week. I was getting a little discouraged because I had a PR that it just seemed no matter what I did on it, it wasn't good enough. And I 💯% know it's because I have a team that wants to push me and help me be the best version I can be, but man sometimes it's just a little deflating when you can't get something quite right. 

It had **over 74 comments on it and 9 commits** before it was finally ready to go. And with each commit, I'd be like, okay this is perfect now, right? And it wasn't. 😭 I was like _"Do I even know what I'm doing? Should I be here if I can't write code well yet?"_

But honestly, when I look at where it started vs where it ended, I could tell it was totally worth it, and I learned a lot along the way. Everyone was very patient with me and there was zero shaming for my lack of knowledge or anything like that - it was definitely a "let's do this better together" type of thing, and I was extremely grateful for it in the end, but in the process, I felt a little deflated at having to keep on trying and not getting it quite perfect.

I actually found Reddit to be a nice space to vent for a bit and got a ton of encouragement on this post. So if you're having down days, that's totally normal. There's no such thing as perfect code, and more feedback is totally normal and helps you grow. Reach out to your folks and #TrustTheProcess.

# Learning How To Test with Jest

Part of my Really Long PR (as it will henceforth be named) involved a request for setting up test. This is great, but I had never set up a test before, and it proved to be a little challenging - not just for me, but also another senior dev who was helping me! I was honestly a little encouraged that it wasn't a cut and dry, super simple thing for him either, but together we were able to figure it out, and I actually started added tests to my other PR that I had out, as well!

So I'm going to try to start incorporating more of that to practice. I found Google a little frustrating here, because I'd be like "how do i x with Jest and Enzyme" and i saw all sorts of answers, and honestly, a lot of them didn't work at all. It was super strange. But with some patience and tweaking I was able to get it. 

# Standup Improvements

We currently do standups on M/W/F, but we're contemplating moving those 15 minute meetings to T/TR, and on the other days do an "asynchronous" standup. To do that, we are evaluating if we want to just create a Slackbot reminder message in our channel, or if we want to involve a more formal Standup Bot tool, like [Geekbot](https://geekbot.com/). 

I got to check into the standup bot tools, and I think Geekbot is actually pretty cool. Sends users a DM with questions, and then compiles those answers in a standup report in the channel. I had some fun while I was testing it out.

![image (15).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627656787232/KYOBPxkTX.png)

That's all for this week! 👋
[TIL] More Mysql Stuff
Tags: todayilearned, mysql
Published: 2021-09-10 18:29:30

1) You can get the create statement that was used to create a 
   table with the query
   ```SQL 
    SHOW CREATE TABLE table_name;
   ```

2) JSON type in mysql an can be created by the query
```SQL
CREATE TABLE table_name(col_name JSON);
```
(obligatory crud tutorial coming soon)

3) MySQL has ENUM datatype which can be used to store flag values. 
```SQL
CREATE TABLE table_name(status_flag ENUM('success' 'failed'));
```
This is better than storing string values as enums are indexed by the database.

4) using markdown text editor of this site.(It's pretty cool actually).

**Conclusion (da ta daaa)** this flimsy article was written so that i don't break the habit of writing flimsy articles. Any form of constructive criticism is always welcome with open arms. So.. see you around i guess ${insert awkward goodbye}.
Debugging Azure App Service from Visual Studio
Tags: csharp, dotnet, azure, visualstudio
Published: 2021-09-10 17:39:43


> This will later be included in a series of articles I plan on writing about my journey of building a SaaS on Azure.

Today I’m having issues with deployment slots for one of our Azure App Services. For some reason, our Staging slot is using some weird config nowhere to be found within our current codebase that’s deployed out of staging branch. Since `ASPNETCORE_ENVIRONMENT` is set to Staging I expect out .NET 5 app to use config from _appsettings.Staging.json_ which doesn’t seem to be the case. To troubleshoot I needed to attach debugger to the live app but the steps outlined here https://devblogs.microsoft.com/premier-developer/remote-debugging-azure-app-services/ didn't work. That bug was already reported and supposedly fixed by MS in VS v16.5 yet we are on v16.11 now and the issue is still there. Fortunately, user ZubairMunir-5725 saves the day with his workaround posted here https://docs.microsoft.com/en-us/answers/questions/528107/unable-to-attach-remote-debugger-to-app-service-sl.html
In case the link becomes dead the steps are:
1=> Latest Visual studio
2=> Go to Debug tab
3=> Click on Attach process
4=> In Dialog there is Connection Target paste your site url without http like(myappservice.azurewebsites.net)
5=> Hit the Refersh button
6=> Again dialog apperies add your app service crediential username and password and check remember me
7=> A list of process will be shwon to you just click on the w3sp process .
8=> Now check debuger is attached and now you can debug .
Note:Explanation of step 6 to get cridential
There is two methods to get username and password
1) Download publish profile and open in notepad++ there you can see the username and password.
```
<publishData>
<publishProfile profileName=”myappservice — Web Deploy” publishMethod=”MSDeploy”
publishUrl=”myappservice.azurewebsites.net:443"
userName=”{USERNAME}” userPWD=”{PASSWORD}” …>
<databases />
</publishProfile>
<publishProfile profileName=”myappservice — FTP” publishMethod=”FTP” …>
<databases />
</publishProfile>
</publishData>
```
2) you can also get this username and password from azure portal
i)=>Go to azure portal
ii)=>Open your app service
iii=>Developement center
There is three tab on top right side click on FTPS Cridential
there is the username and password .
Note your app has to be in debug mode otherwise when setting up the breakpoint you will see this

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

We are using Github actions to deploy our code so all I had to do was just update our .yml file located in <project root>/.github/workflows replacing Release with Debug
```
- name: Build with dotnet
run: dotnet build --configuration Debug
- name: dotnet publish
run: dotnet publish -c Debug -o ${{env.DOTNET_ROOT}}/myapp
```
It can also be accessed via VS by right-clicking your Web project -> Publish…

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

Just another day in the life of a miserable MS stack developer, happy troubleshooting :)
This is my basic portfolio designed with hugo
Tags: hugo, go, portfolio, webdev
Published: 2021-09-10 17:22:24

Hi, I created a simple portfolio page using Hugo and hugo-theme-shell. This is quite simple and very attractive according to me. I am interested in all about operating system because of this reason I prefered to design like shell. This is very simple form, I am going to develope the site. You can click the [link](https://noaahhh.github.io) if you want to check it out. What are your thoughts? Please write below.
A11y media queries via Svelte stores
Tags: svelte, a11y
Published: 2021-09-10 17:20:40

Svelte's readable stores provide a useful way to track the state of a media query in JS throughout your application, and update settings automatically when it changes. 

Here's an example: we'll create a readable store called `prefersReducedMotion` whose value is tied to the state of the `prefers-reduced-motion` media query.

In `store.js`:
```js
import { readable } from "svelte/store";

export const prefersReducedMotion = readable(true, set => {
  // No behavior unless we're in a browser.
  let stop = () => {};

  if (typeof window != "undefined") {
    let mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    // Define a function that sets the store to match the media query
    const setMatches = () => set(mediaQuery.matches);
    // Call it once now
    setMatches();
    // Call it on changes
    mediaQuery.addEventListener("change", setMatches);
    // Set the stop function which will be returned
    stop = () => mediaQuery.removeEventListener("change", setMatches);
  }
  return stop;
});
```

Now, in our Svelte components, we can import the store and reference it in markup using the reactive store syntax (`$storeName`), and our markup will update immediately when the setting changes. 

In any `.svelte` file:
```svelte
<script>
  import { prefersReducedMotion } from "/path/to/store"
</script>

{#if $prefersReducedMotion}
  <p>Reduce motion and animations please!</p>
{:else}
  <p>No need to reduce motion for me.</p>
{/if}
```

An example REPL can be found [here](https://svelte.dev/repl/fcc9a16d31ec4e8192313e96551ca53f?version=3.42.5).
Deploying NUXT SSR to CPanel
Tags: nuxt, cpanel, node
Published: 2021-09-10 17:14:27

Sharing this because maybe there are many people like me who struggling how to deploy nuxt ssr to cpanel.so, here is the steps:

**1. Create basic node app on cpanel**
first, create [node](https://hadezuka.dev/category/koding/nodejs/) app on cpanel. You can find it on 
`Software - Setup Node.js App` then fill the input like follows:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0nkw5gvjc80fsrghzoq.png)

**2. Upload your nuxt project**
after creating the app, next step is upload your nuxt project into your folder that you've been specified on step 1. 

**3. Setting up**
you can either using ssh or terminal. here i am using terminal on cpanel. to do so, copy the command from  `Enter to the virtual environment`. Then go to `cpanel dashboard -> terminal`.
paste that command there, and execute the following commands:
1. `npm run install` to install all your deps
2. `npm run build` you can skip if you're already build it.
3. `npm install pm2` to install pm2 process manager
4. `npx pm2 start npm --name "nuxtjs" --interpreter bash -- start` to run the "nuxtjs" app using pm2. "nuxtjs" is your app name.

**4. Setting the .htaccess**
after that, now you need to add this code to your .htaccess on public_html if it's not subdomain, or on the specified folder if subdomain:
```
Options +FollowSymLinks -Indexes 
 
IndexIgnore * 
 
 DirectoryIndex 
 <IfModule mod_rewrite.c> 
 RewriteEngine on 
 RewriteRule ^(.*)$ http://localhost:<your Port>/$1 [P] 
 </IfModule>
```

change your port with the actual port that your app use.

Done!
sorry if my explanation not that good. But I hope you get what I mean.

More of my [articles](https://hadezuka.dev/).
CaraLengkap mengatur menu di theme wpberita
Tags: wordpress, install, themes, wpberita
Published: 2021-09-10 16:49:00

[CaraLengkap](https://caralengkap.com) mengatur menu di theme wpberita Caranya sangat mudah tinggal masuk ke appearance -> menus, dan tinggal anda atur saja menunya. Lengkapnya wajib lihat tutorial video dibawah.

Pada theme wpberita terdapat 5 tempat menu seperti pada tutorial diatas, Primary (Support 3 level menu), Secondary (Support 3 level menu), Side menu (Support 2 level menu),  Scroll Mobile Menu (Support hanya 1 level menu) dan Footer menu (Support hanya 1 level menu). Silahkan anda lihat baik2 tutorial diatas jangan di skip agar paham.

Note: Disini sudah support simple mega menu, menu new, menu dengan dot dan warna menu(Support 4 warna saja). Cara pengaturannya:

1. Silahkan anda aktifkan terlebih dahulu CSS Classes nya, klik Screen Options pada kanan atas. Maka akan muncul setingan nya, lihat gambar dibawah:

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

2. Lalu anda centang pilihan CSS Classes nya. Setelah itu Edit Parent Menu nya, atau menu utama (silahkan anda lihat video diatas)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6sl5g70hmeh0uxh9ys2y.jpg)

3. Pada CSS Classes, silahkan anda masukkan kode:

-col-2 untuk 2 kolom submenu
-col-3 untuk 3 kolom submenu
-col-4 untuk 4 kolom submenu

4. Diatas simple megamenu, untuk kode class warna, new dan dot, silahkan anda masukkan kode:

-menu-dot untuk memberi titik diatas menu
-menu-new untuk memberi tulisan new pada menu
-menu-orange memberi warna orange pada menu
-menu-green memberi warna hijau pada menu
-menu-blue memberi warna biru pada menu
menu-red memberi warna merah pada menu

5. Anda bisa memasukkan lebih dari 1 kode css, misalnya anda ingin memasukkan dot dengan warna merah maka silahkan anda memasukkan 
kode: menu-dot menu-red.

4. Selesai. Cukup mudah caranya bukan

Nah yang berbeda lagi pada theme ini yaitu side menu, settingan wajib yang anda isi silahkan lihat contoh settingan menu dibawah:

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

Lihat nomor 1, nomor 1 adalah judul menu yang nanti letak nya akan paling atas, sedangkan nomor 2 adalah submenu yang secara otomatis akan terbagi menjadi 2 kolom dibawah judul menu.

Note: Anda wajib melihat tutorial video diatas jika anda ingin paham mengatur menu pada theme ini, untuk icon bisa anda lihat divideo diatas juga, atau tutorial lama berikut:
Semoga bermanfaat.

{% link https://dev.to/caralengkap/cara-install-dan-pengaturan-theme-wpberita-1bm4 %}

  Cara mengatur menu di theme wpberita

{% youtube  E8e_fkxSWGE %}
My introduction
Tags: opensource, osd600, programming, firstpost
Published: 2021-09-10 16:37:01

Hello! My name is Jiyun Jung. I am in my 5th semester of CPAC(Computer programming and analysis) at Seneca College. 
I am from South Korea, but I am currently living in Toronto right now. It is challenging for everyone because of covid-19, but I feel grateful to continue my study remotely. This pandemic has shown me the advantages of this career as the only tools that I would require are a computer and the internet. 

I took OSD600 class because I wanted to improve my ability to use the tools of open source development. There are a lot of advantages to using open source, but what attracted me the most was the software community. I want to learn, collaborate and share my thoughts with the community.

At the end of OSD600 class, I hope to use open-source tools appropriately by learning the licensing and copyright laws regarding software. I don't know what specific project I want to work on, but I want to work on web development. 
I am excited to learn how to break large chunks of code into smaller codes and debug them throughout this class so that i will be more comfortable handling open source by myself later. Plus, I know that I need to manage my time and push myself, so I am looking for a better myself when managing and organizing my schedule.

The GitHub trending repo that I researched and attracted me was short javascript code snippets. The title of "30 seconds of code" peaked my interest as soon as I saw it, and I am always interested in javascript, so that is why I chose it. When I looked into their website, I found many helpful javascript snippets that I can use, not only javascript but also react hooks, python, git, etc. 
This GitHub threading repo is about helping programmers code faster and easier because they provide pieces of the shortcode that can be used for a particular purpose, such as Math, Algorithm and String, etc. As a student still learning to program, I think this would help me when I struggle with coding by learning different ways of coding. 
[Here is the 30 seconds of code link](https://www.30secondsofcode.org/)
RxJs: withLatestFrom
Tags: rxjs, withlatestfrom, rxjsoperators, javascript
Published: 2021-09-10 16:22:37

Hi all, in this post we will learn how we can use RxJs withLatestFrom operator.

Let's say we have 2 observables bs1, bs2. We are interested in getting notified whenever bs1 streams any data. Also, we want to consider latest value streamed by bs2 whenever bs1 streams data. In this case we can make use of withLatestFrom.

We subscribe to bs1 & use withLatestFrom(bs2).

Use this stackBlitz link to get an example: https://stackblitz.com/edit/rxjs-uhrmor?devtoolsheight=60
You need to observe the console logs to understand the use of withLatestFrom. 

I hope this helps.

Thanks!!
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-09-10 16:21:51

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there! 


Looking back on this past week, what was something you were proud of accomplishing?

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Trying out a new recipe... or whatever else might spark joy ❤️ 

---

Happy Friday — and congrats on your wins! 🎊 

![Hip hip hooray](https://media.giphy.com/media/26gsfdArwyEnXnDGw/giphy.gif?cid=ecf05e47zz9elnkhpte2wqd62rl31a0lq872lz43ghrku3od&rid=giphy.gif&ct=g)
Que es una comunidad y como mantener una comunidad sana
Tags: comunidades, spanish, espanol, coc
Published: 2021-09-10 16:21:38

---
title: Que es una comunidad y como mantener una comunidad sana
published: true
description: 
tags: comunidades, spanish, espanol, coc
//cover_image: https://direct_url_to_image.jpg
---


{% youtube ubm4lTfy3Fo %}

Hablando todo de como crear tu comunidad y mantenerlas en el tiempo de una forma sana y agradable, diversa y segura en Épico (Empresa Pública Municipal para la Gestión y Competitividad) de Guayaquil con GuayaquilTech
How to configure the Ceph Grafana dashboards manually
Published: 2021-09-10 16:16:26

---
title: How to configure the Ceph Grafana dashboards manually
published: true
description: I did not have Grafana dashboards that worked in my Ceph installation. Hence, I had to install Prometheus and Grafana manually and then configure the dashboards to show up in my Ceph cluster dashboard screens.
tags:
cover_image: https://i.ytimg.com/vi/c8R64LF3JjU/maxresdefault.jpg
---

{% youtube c8R64LF3JjU %}

I did not have Grafana dashboards that worked in my Ceph installation. Hence, I had to install Prometheus and Grafana manually and then configure the dashboards to show up in my Ceph cluster dashboard screens.
Vocabulary Building day14
Tags: gre, day14
Published: 2021-09-10 16:14:58

1. **concede**(verb): admit or agree that something is true after first denying or resisting it.
![alt text](https://www.pilotonline.com/resizer/a36DVQdDTw3c99rhsOujFkxMKZw=/1200x0/top/cloudfront-us-east-1.images.arcpublishing.com/tronc/3M4FXMUL75BO7ETXIVOWR23U2M.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=concede&oq=concede&aqs=chrome..69i57j0i433i512j0i20i263i512j0i512l5j0i20i263i512j0i512.3633j1j9&sourceid=chrome&ie=UTF-8)

2. **gainsay**(verb): deny or contradict, speak against or oppose
![alt text](https://lh3.googleusercontent.com/-c9l7CXVUEw8/WrmRYNiSriI/AAAAAAAAA2s/BgTvgIzk8Q82N9p5DaQ2CV1FMc1wCRvTACHMYCw/s640/Untitled51.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=gainsay&oq=ga&aqs=chrome.0.69i59j69i57j69i59j0i131i433i512j0i131i433j69i60l3.2974j0j9&sourceid=chrome&ie=UTF-8)

3. **engender**(adjective): cause or give rise to (a feeling, situation, or condition).
![alt text](https://images.squarespace-cdn.com/content/v1/5563c849e4b09841c644c3bc/1433558448712-1ARIE1J0KQO3CCHD90VO/image-asset.jpeg?format=2500w)
[Checkout Pronunciation](https://www.google.com/search?q=dictatorial&oq=dictatorial&aqs=chrome.0.69i59j0i20i263i433i512j0i20i263i512j0i512l7.5343j0j9&sourceid=chrome&ie=UTF-8)

4. **conspicuous**(adjective): clearly visible,attracting notice or attention.
![alt text](http://www.wordinfo.info/words/images/conspicuous-1.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=conspicuous&oq=conspicuous&aqs=chrome..69i57j35i39j0i20i263i512j0i512j0i433i512l2j0i512l4.1851j0j9&sourceid=chrome&ie=UTF-8)
5. **gall**(noun): the trait of being rude and impertinent.
![alt text](https://img.tfd.com/wn/32/66911-gall.png)
[Checkout Pronunciation](https://www.google.com/search?q=gall+meaning&oq=gall&aqs=chrome.1.69i59l2j0i433i512l2j0i20i263i433i512j46i175i199i512j69i65j69i60.3669j0j9&sourceid=chrome&ie=UTF-8)
I hope this helps you if you are preparing for GRE exams.
Material You Seek Bar
Tags: materialdesign, css, javascript, web
Published: 2021-09-10 16:11:46

---
title: Material You Seek Bar
published: true
description: A JS and CSS seek bar in the style of Google's new Material You design language
tags: materialdesign, css, javascript, web
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5k5kj7uy5syznjxgnkh.png
---
 
When I saw Google's new Material You update to their popular Material Design framework, I was very excited about some of the bold choices they made, it looks really different.

If you haven't seen it yet, check our their blog post at https://material.io/blog/announcing-material-you

This video they included particularly inspired me, you can see a wavy seek bar in the bottom left hand corner:
<video controls loop autoplay muted>
<source src="https://kstatic.googleusercontent.com/files/9430d9604eff1ecd370d688cb57eb95781e546279ed9bbb04c15dd0b80881c564addc8aaed5d37b3a5fc656b1fc673cfbd25c4b6a08b9d3e7ea396808f00ba20">
</video>

I decided to try and recreate this seek bar using html, css and javascript, and this is what I got at the end:
{% codepen https://codepen.io/GRA0007/pen/vYxvMNp %}

My implementation is definitely not perfect, but I think it does a pretty good job of replicating the video, and it's responsive! Try moving the progress handle around.

In order to create this effect, I'm generating an animated SVG element using javascript to make sure it responds to the position of the seek bar and is responsive when the screen width is smaller. I suggest you take a look at the [MDN docs for SVG paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) to understand how it works, but essentially I'm using the `Q` operator to emulate a sine wave, and giving it three steps to animate between to emulate the wave travelling from left to right.

I tried to make this seek bar accessible as well, but I'm not an expert on aria properties 😅 Let me know if you attempt this a different way or have any questions. What's your favourite new Material You component?