teleren/devto huggingface dataset:
Why did I decide to study software engineering?
Tags: beginners, career, learning, devjournal
Published: 2021-07-02 07:28:11

---
title: Why did I decide to study software engineering?
published: true
description:  
tags: beginners, career, learning, devjournal
//cover_image: https://direct_url_to_image.jpg
---

Ever thought about what brought you here to dev.to and coding? This article is a short recount of my personal journey and motivations.

I started dabbling in code when I as a teenager playing around with their Neopets guild page. I was also exposed to coding through GaiaOnline, where I learnt the bare minimum to make an image map work in PHP. 

> I was fascinated by how interactivity could be produced from *'magical'* text

However, it wasn't until some years ago when I found all the freely available resources for learning to code that my interest was re-ignited. I think [freecodecamp.org](https://www.freecodecamp.org/) was the first one that I tried to work through. I particularly loved the community and eventually found the numerous local get-togethers listed on [meetup.com](https://www.meetup.com/).

> I found great online and local communities of fellow tech enthusiasts

It was through one of these communities (possibly a slack channel for [p1xt's guide](https://github.com/P1xt/p1xt-guides)) that I learnt of [CS50x](https://online-learning.harvard.edu/course/cs50-introduction-computer-science?delta=0). Managing to complete that re-awoke the initial feeling of awe I had experienced as a child. 

> I love the feeling of logic and creativity combined

Throughout this all, I had been working in a variety of jobs - retail, sales, admin, and captioning. I had yet to find a **career**. This is my final motivation for my earnest pursuit of software development.

> A decent way to have an interesting, ever-evolving career

Thanks for coming to my TED talk! I'll be doing more posts in the future about the types of projects I get up to. Follow me if you're interested. 

How did you get into IT? I'd love to hear from anyone, anyone at all! Just leave a comment below.
CSS class builder
Tags: css, vscode, html, codequality
Published: 2021-07-02 07:23:31

As a web developers, we need to write the styles for the given classes.

But for lazy people like me, it creates too much frustration. So I decided to make the VS code extension to solve this problem and finally, I succeed in it. 

My extension name is **CSS class builder.** It will generate the styles from your given classes in the HTML. 

For example, we have the following code
```javascript
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Web Page</title>
</head>
<body>
    <section class="w_40px">
      <div class="mR_auto mL_auto">
        red
      </div>
      <button class="display_block">test</button>
    </section>
</body>
```
After running this extension, the above file changed into
```javascript
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Web Page</title>
   <style is-from-builder>
      .w_40px {
         width: 40px;
      }

      .mL_auto {
         margin-left: auto;
      }

      .mR_auto {
         margin-right: auto;
      }

      .display_block {
         display: block;
      }

   </style>
</head>
<body>
   <section class="w_40px">
      <div class="mR_auto mL_auto">
        red
      </div>
      <button class="display_block">test</button>
    </section>
</body>
```

For more information kindly refer to [this](https://marketplace.visualstudio.com/items?itemName=AlwarG.css-class-builder).

**PS:** I know we have a lot of good CSS frameworks like bootstrap. But it will be helpful for the people who are in the process of learning CSS styles.

Repo Link: https://github.com/AlwarG/css-class-builder
Extension Link: https://marketplace.visualstudio.com/items?itemName=AlwarG.css-class-builder

Thank you for reading this post 🙏. I Just tried what I know. Feel free to post your comments if you want to share something.
OpenPGP proof
Published: 2021-07-02 07:04:01

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/e63bec8a8a9d7af89c55489753697b225d8b3372) to [this dev.to account](https://dev.to/dnaka91). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:e63bec8a8a9d7af89c55489753697b225d8b3372]
Adding CKEditor 5 to Laravel (The Laravel-Mix Way)
Tags: npm, wysiwyg, laravel, cms
Published: 2021-07-02 06:09:15

If you building a CMS with Laravel, you may want to implement the WYSIWYG editor for the content. There are some good editor for it, but I want to introduce one of them here. It's `CKEditor` and it has a rich enough of feature for you. Let's try to implement it in Laravel using Laravel-Mix.

## Prerequisites to code along
Have your own laravel app to follow along, you have used JS and SASS/SCSS using laravel-mix in the app.

## Installing CKEditor5

Based on the package's [page](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic) in npmjs, we can install it the following npm command, but we add it to development dependency:

```
npm install @ckeditor/ckeditor5-build-classic --save-dev
```

## The Component

We just prepare this simple textarea element with `wysiwyg` class in our page, just to test if it's will work or not later:

```html
<textarea class="wysiwyg"></textarea>
```

## Implementing the CKEditor5

Open your js entrypoint file, we can start to import the `ClassicEditor` object from the package with the following path and make it parse the `wysiwyg` element on page load:

```js

...

import ClassicEditor from '@ckeditor/ckeditor5-build-classic/build/ckeditor';

// ref: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#document-ready

var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}

ready(() => { 
    ClassicEditor
        .create(document.querySelector('.wysiwyg'))
        .catch(error => {
            console.log(`error`, error)
        });
});

...

```

And finally, build the asset using:

```
npm run development
```

or 

```
npm run production
```
July 2nd, 2021: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2021-07-02 05:48:36

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Image of the brain](https://media.giphy.com/media/ojmB7lOn3VUU8/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}
Project 86 of 100 - Dynamic Jobs Page
Tags: react, javascript, 100daysofcode
Published: 2021-07-02 05:30:25

*Hey! I'm on a mission to make 100 React.js projects. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to today's deployed app: [Link](https://100-react-projects-day-86-dynamic-resume.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-86-jobs-page)

This is part 6 of 15 in a series on building React projects by John Smilga, covered in [this 10 hour video](https://www.youtube.com/watch?v=a_7Z7C_JCyo) on Youtube.

In this project we exercise many of the same skills we learned in [the last project](https://dev.to/jwhubert91/project-85-of-100-dynamic-restaurant-menu-in-react-1g07), namely conditional rendering, using application-wide state (stored using useState hooks in the App component), destructuring arrays, and iterating over arrays to create JSX elements.

Unlike the last project, we use a useEffect hook to load in the data from a remote endpoint asynchronously, and we display a Loading screen while the data is being fetched.

I won't go into a ton of detail here because we've covered most of these topics in previous assignments.

**If you like projects like this and want to stay up to date with more, check out my Twitter [@jwhubert91](https://twitter.com/jwhubert91), I follow back! See you tomorrow for another project.**
Learn more about CISM Certification
Tags: cismcertification, cismtraining, cismcertificationtraining
Published: 2021-07-02 05:23:24

The CISM certification is for security managers and IT consultants who assist a company's security system. The goal of this CISM course is to provide students with a thorough understanding of IT security solutions. After completing this IT Security facilitation program, the candidate will be able to categorize and revitalize the information security system in his or her organization.

The CISM Live Online program is designed to provide individuals with training on worldwide security principles as well as equip them to plan, manage, and control an enterprise's information security.
The CISM training from Mercury Solutions helps raise your profile among a chosen set of peers. Professionals will provide you with hands-on skills, information, and professional advice.


To get CISM certified, you must meet two requirements: 1. To become a CISM, you must first pass the CISM exam. 2.You must possess the necessary work experience.
You must have five years of experience in information security during the last decade, as well as three years of management experience in three or more of the critical areas specified above, to achieve the second criteria.
<a href="https://www.mercurysolutions.co/cism-certification-training">CISM Certification</a> can lead to a plethora of work prospects as well as a substantial financial reward, based on your skills, experience, and qualifications. 

The CISM earns $127,063, according to a poll conducted by Certification Magazine to determine the average income of security certification holders.
Alternative education is fast growing in popularity. Certifications and courses are in high demand. A certification can assist a person in progressing in their job. It enhances your abilities and aids you in acquiring a better job offer. So getting CISM training (Certified Information Security Manager) is one of the greatest possibilities.
Show GitHub Discussions on your GitHub profile/project readme
Published: 2021-07-02 05:19:14

---
title: Show GitHub Discussions on your GitHub profile/project readme
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Show your latest blog posts from GitHub Discussions on your GitHub profile/project readme automatically using the RSS feed

GitHub Discussions RSS：https://github.com/lencx/rgd

## Getting Started

Run workflow automatically:
1. Generate RSS:
https://github.com/lencx/z/blob/main/.github/workflows/deploy.yml#L21

    ```bash
    # step1
    npm install -g rgd

    # step2
    rgd --owner=lencx --repo=z --limit=10 --outdir=dist --token=${{ secrets.GH_TOKEN }} --site-title=浮之静 --site-link=https://z.nofwl.com --site-desc="浮之静 技术社区"
    ```

2. Blog Post Workflow:
https://github.com/lencx/lencx/blob/main/.github/workflows/blog-post-workflow.yml


## Demo

https://github.com/lencx/lencx
Is anything truly empty?
Tags: javascript
Published: 2021-07-02 05:15:30

I decided to write this series because there are parts of JavaScript that feel right, but aren't. Or feel wrong, but are perfectly acceptable, and they can cause common mistakes that could potentially lead to hours of wasted time in unproductive debugging. This is the first of hopefully multiple posts, explaining such concepts, so that you don't fall into one of these traps ever (again).

## Empty array is truthy
Consider the following code:
```javascript
function checkTruthy(o) {
  if (o) console.log("truthy");
  else console.log("not truthy");
}

let s = "";
let t = 0;
let u = [];

checkTruthy(s);
checkTruthy(t);
checkTruthy(u);
```

So we have an empty string, the number zero, and an empty array. Similar things, right? So what do you expect the output to be? If you guessed anything other than the one below, you're wrong.

```
not truthy
not truthy
truthy
```

That is correct, the empty array is truth-like, and as such, any check that looks like `if(empty_array)` will return `true`. This can be extremely important when what you really need to check for is the emptiness of said array. In such cases, remember to modify your `if` statements like so - 

```javascript
if(my_array && my_array.length) {
  // stuff and things
}
```
>What it really checks is if the array variable is `undefined` or not. That is why the code above also lets you avoid unwanted runtime exceptions.

Oh, and btw? I hope this doesn't blow your mind but you know what makes the empty array non-truthy? A simple negative sign before it. That's right, `if(-[])` will never execute, its else block (if it exists) will instead.

[Photo from Pixabay/Pexels]
Laravel Image Text Watermarking Tutorial
Tags: laravel
Published: 2021-07-02 05:09:03

Hello Friends,

Now let's see example of how to image text watermarking in laravel. This is a short guide on laravel if image text watermarking. We will use how to use image text watermarking in laravel. Here you will learn how to use image text watermarking in laravel. Let's get started with how to image text watermarking in laravel.

Here i will give you many example how you can image text watermarking in laravel.

More..
https://www.mywebtuts.com/blog/laravel-image-text-watermarking-tutorial
ReactJS, Socket video chat app
Tags: react, socket, tailwindcss, peerjs
Published: 2021-07-02 04:55:41

I have complete my video call and chat real-time app by using ReacJS, Socket.IO, PeerJS. I want to share it with everyone who is learning React and Socket.
Link: https://room-call-chat-app.herokuapp.com
Github: https://github.com/lethanhvietctt5/video-chat-app
Facebook: https://www.facebook.com/thanhviet.le.ctt5/
Email: lethanhviet7c@gmail.com
Duplicate parameters in JavaScript Functions
Tags: javascript, webdev, beginners, react
Published: 2021-07-02 04:32:04

Hi Devs,

In this article i will introduce you to one of the most confusing and common doubt for every newbie devs, Duplicate parameters in javascript functions

## Table Of Contents
* [duplicating parameter in regular JS function](#chapter-0)
* [duplicating parameter in non strict mode](#chapter-1)
* [duplicating parameter in strict mode](#chapter-2)
* [How do arrow functions treat duplicate parameters](#chapter-3)

## First we will see duplicating parameters in regular JavaScript function. <a name="chapter-0"></a>
```js
//this is syntax of duplicating parameter in js function
function Func (first, second, first){
	    console.log(first, second, first);
	}
```

### In **non-strict mode**, regular JavaScript functions allow duplicate named parameters <a name="chapter-1"></a>
```js
    function Func (first, second, first){
	    console.log(first, second, first);
	}
     // first => 1  
     // second => 2
     // first => 3
    Func(1, 2, 3); // 3 2 3
    
    // first => 1
    // second => 2 
    // first => undefined
    Func(1,2); //undefined  [undefined, 2, undefined]
```
### Lets check this in **strict mode**,<a name="chapter-2"></a>

```js
    function Func(first, second, first){
	    "use strict"; 
	    console.log(first, second, first);  
	}
	//Throws an error because of duplicate parameters (Strict mode)
```
In Strict mode we cannot duplicate the parameter name.


## How do arrow functions treat duplicate parameters? <a name="chapter-3"></a>

Now here is something about arrow functions:

> Unlike regular functions, arrow functions do not allow duplicate parameters, whether in strict or non-strict mode. Duplicate parameters will cause a  `Syntax  Error`  to be thrown._
```js
    // Always throws a syntax error
    const Func =  (first, second, first)  => 						 
    {
	    console.log(first, second);  
    }
```

CONGRATULATIONS, YOU HAVE LEARNT ONE NEW TOPIC TODAY.
VISIT https://www.capscode.in/#/blog TO LEARN MORE...

Thanks,
CapsCode
Aspiring teachers worried over making Ph.D mandatory for teaching on varsities level
Tags: ugcneteligibility, ugcnetassistantprofessor, ugcnet2021, ntanetexam2021
Published: 2021-07-02 04:28:44

No aspirant will be considered eligible for the post of assistant professor in universities without Ph D from July 2021.
It may be noted that currently, a candidate who has qualified any eligibility test or Ph D is eligible to get assistant professor’s jobs in universities and affiliated senior colleges across the country.

The University Grants Commission (UGC) has set the minimum qualifications for the appointment of teachers in universities and colleges in its new regulations. One of those regulations makes it mandatory for the candidates to have a PhD degree while applying for an assistant professor’s post from July 2021 to improve quality in higher education institutions.

Check the Current <a href="https://www.anujjindal.in/ugc-net-jrf-admit-card-eligibility-result/">UGC NET Eligibility</a> to appear in Exams.

For teaching at colleges, one can have SET/NET or Ph D. The assistant professor is an entry-level designation for teaching in universities.

A university should have research and teaching while colleges mostly conduct out teaching.

Hundreds of candidates qualified National Eligibility Test (NET) and State Eligibility Test (SET) to become a teacher at senior colleges and university departments.

Some academicians feel that the new regulations would reduce opportunities for young teachers, while others think that it will bring experienced teachers to universities.

Commenting on this, the president of Maharashtra Navpradhyapak Sanghatna Dr Sandeep Pathrikar, said thousands of posts of teaching staff are vacant in universities and colleges during the last eight to nine years across the State.

“New rules are being made. It will reduce the opportunities of many aspirants who have been waiting for the jobs for the past few years and will turn 40 soon. But, no Government is talking about the recruitment of teachers nor doing any survey of how many youths got jobs on completion of Ph D till today,” he added.

A teachers union leader on the condition of anonymity, said that the decision is good that only Ph D holder will be eligible for the post of assistant professor in universities but, frequent change in norms can create confusion and cause loss of time in one’s career.

He said that Ph D holder will have at least some knowledge of research against just a UGC NET/SET qualified who lack research experience.

The UGC has also done away with the controversial Academic Performance Indicator (API)-based appraisal and introduced a simplified teacher evaluation grading system.
The promotion in colleges up to associate professor level will be based on teaching-centric metrics and in universities, teaching and research-centric.
Need help with Telegram  200$
Published: 2021-07-02 04:16:34

I need to receive specific photos from Telegram to a Telegram widget on my site. I can pay $200 if you can help. I will have lots of other things to do after that. The chat ID i want photos from has lots of images, and i only want those with a word before them. Suppose there are photos of animals and i only want the ones with cats, so the sentence before has to start with "cat" . And it can only be from the Channel owner, not people who comment.
How to Add Annotations in React Charts of Syncfusion
Tags: react, charts, webdev, annotation
Published: 2021-07-02 03:39:44

Learn how easily you can add an annotation in [Syncfusion React Charts](https://www.syncfusion.com/react-ui-components/react-charts "Syncfusion React Charts"). This video explains how to position the annotation based on a chart or series region, with the coordination unit set to pixel or point. 

Download the example from GitHub: 
https://bit.ly/3whpPPr

**Product overview**: https://www.syncfusion.com/react-ui-components/react-charts
**Documentation**: https://bit.ly/3fnIz9k
**Online samples**: https://bit.ly/3tZVUtR
**Download free trial**: https://bit.ly/3dpXG1V

{% youtube bifgElRZH68 %}
LeetCode 283
Published: 2021-07-02 02:51:44

I use two pointers. P2 starts from index 1, while P1 starts from 0. One is for iteration and search non-zeros, the other one is for zero to exchange with the other one.

If P1 is not zero, go to the next, if P1 find a zero, P2 will exchange value with it if P2 is not zero. After exchange, P1 will go to the next one. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m33dl8t2yauoqg27ov9r.png)
Using tailwindcss (JIT) with sveltekit
Tags: svelte, tailwindcss, jit
Published: 2021-07-02 02:11:59

![Sveltekit and tailwindcss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yen3n82ofaygdxynr1y.jpeg)

I ❤️ Svelte, especially when combined with tailwind css. Usually you'd have to setup all the configuration on your own but there's a easier alternative.

The introduction of sveltekit provides cool stuffs like routing out of the box. Here's a super easy setup to scaffold a Svelte Kit static site.

```zsh
# 1. Create a new sveltekit site
# My choices: TypeScript, SCSS, ESLint, Prettier
npm init svelte@next handsome-app

# 2. Navigate inside your project
cd handsome-app

# 3. Install packages
npm install

# 4. Add TailwindCSS
npx svelte-add tailwindcss
```

Step 4 does all the hard work for you, by creating `postcss.config.cjs, tailwind.config.cjs and svelte.config.cjs`. 

To finalize installing Tailwind, open `app.scss` and add the base Tailwind styles right at the top:

```zsh
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Now you can start the server 
```zsh 
# Run in development mode, and open the site in the browser
npm run dev -- --open
```
LeetCode 27
Published: 2021-07-02 02:06:18

Use two pointers to search the target val.
One pointer 'j' is the slow one, only go forward by 1 if the other fast pointer's 'i''s value is not the target val. In this case, it will be replaced by the fast pointer's 'i' value. 'i' search entire array. If 'i' point to the target value, it does nothing, just go to the next one.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ll4vwz1e0khiirfbj3xt.png)