teleren/devto huggingface dataset:
Hacktoberfest - PR#4
Tags: opensource, javascript, webdev, programming
Published: 2022-10-23 23:00:33

### Overview

For my last contribution for Hacktoberfest, I've been working on  [React JS project](https://github.com/jsvigneshkanna/tailwind_ui_components).

This project has [website ](https://tailwindcsscomponents.vercel.app/)made for Tailwind CSS UI components. Here we can find almost all UI components made with tailwind CSS which can be used in different languages.

### Issue

For my [issue](https://github.com/jsvigneshkanna/tailwind_ui_components/issues/190) I had to create license page according to the requirements specified in the issue description.

### PR

For my [PR](https://github.com/jsvigneshkanna/tailwind_ui_components/pull/197) I created license page using React JS.

### Overal

I never worked with tailwind CSS before, but it's an easy-to-use framework, even though I enjoy working with CSS(SCSS) more.

Tailwind CSS is similar to Bootstrap, you just apply the class names to any element and watch the magic :)

### Final words

Hacktoberfest gave me a lot of experience. I enjoyed working with people on open-source projects. Everyone is open and welcomes you to contribute to their projects.

Even though, Hacktoberfest is ending, in my free time I will continue contributing to other interesting projects, because it's one more way to learn new technologies and use your knowledge for a good use :)
My first article ever as a junior Front End Dev?
Tags: javascript, webdev, beginners, programming
Published: 2022-10-23 22:08:46


###  First of all hello and welcome to my blog!
So, let's begin this journey,

### Who am I?
My name is Bogdan and I am an 19 years old Romanian Junior Web Developer. I am working as a full time Front End Developer at an amazing company that allows me to develop my skills day by day.
On the side, I am working at my Back End skills by building projects, watching courses and reading articles.

![do more laptop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/betwvyon5pwiovwgn2w7.jpg)

### How did I get into tech?
Well, shortly, 2 years ago, while working at the local garbage company, on a summer project, I wanted to sell accessories. The issue was that I didn't have an online store, and so, I wanted to learn how to build one. Then the pandemic began, and I didn't really have any other things to do except learn how to code.

![garbage truck](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opz4idnof7tzezy4jrrk.png)

### Why have I decided to write?
I've noticed that the more I talk about tech, the more passionate it makes me. When I began working at this company as my first job, I thought I knew how to code. Then, things like *OOP*, *Services*, *HTTP*, *Types*, *Configs* appeared, and I realized... "man, only knowing how to combine HTML with CSS and add some JS functionality means little over nothing". And so, I want to discuss, learn, maybe even teach stuff through writing.

![programming languages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3szbw45jxlu3e0bxo6m.png)

This was my first article ever and I want to thank you very much for reading it! More will come about my journey, about web news, interesting topics and thing I discover and learn as time goes on.
Start with one test
Tags: javascript, webdev, react, testing
Published: 2022-10-23 21:54:57

Throwaway projects aside, would you say testing is important?

### Tests are important but…

It takes too much time…

We don’t have time for that…

I don’t know how to…

I do it manually…

My code is perfect!

### However…

Have you ever had the need to fix something for someone just for it to break it to someone else?

How about fearing touching the files someone else created?

How about it “just stopped working” and when you finally found out why it was because some dependency changed something (or someone changed a file you are dependent on)?

Are you debugging or manually testing, again the code you’ve been debugging and manually testing since last week?

### And what happened was…

To lose a lot of time chasing a bug that appears out of nowhere or to dredge through the work of someone else.

### Test is like coding

Remember learning to code?

Your first tests will be awful, but they will still help you.

Here’s an example:

{% github https://github.com/Noriller/one-test %}


I purposely made this as naive as possible. The biggest problem is that it’s “flaky”, but there are others.

Being flaky means that changes will easily break the test, meaning you will have to fix the tests every time you change the code if you test them like this.

But… it will work, it will help and even save more time than if you were doing it all manually or just hoping it doesn’t break.

And as you learn how to test and best practices you’ll start refactoring your tests (yes, tests are also code that should be refactored) and making more resilient tests, with fewer bugs (yes, tests can also have bugs), also tests that test more than just if it’s working (example: you can test accessibility by using selectors that work with semantic tags and roles).

---

### The more you test…

In my experience, the more I test and the better the coverage, the less I have to rely on manually using it on every change and even less I have to debug.

Not only that, everyone on the team benefits from those tests. They are already there and telling you what should be working and how. And when something breaks, it tells everyone exactly where.

If you get a tested piece of software, you don’t need to know and keep in your mind all the complex rules the code needs to work, so when you need to refactor or change it, you will always know if it's still working or not and be able to catch if the breaks on the test are intended or not.

---

So… what other benefits do you find with testing or what still holds you back from testing?

---

Photo by [National Cancer Institute](https://unsplash.com/@nci?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/testing?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Ng-News: Episode 22/42
Tags: javascript, angular, webdev, programming
Published: 2022-10-23 21:29:15

Introduction into Analog, a meta-framework for Angular, by Brandon Roberts. Release of Node.js 19.

{% embed https://youtu.be/Lwt66DAUBKc %}

## Analog

Brandon Roberts, a member of the NgRx team and a former employee of nx has been working on Analog for several months now.
At ViteConf 2022, he gave an overview, discussed the current features, and laid out the plan for the future.

Analog is a meta-framework for Angular. So a framework around Angular itself, and it comes with additional features. For example, file-based routing, integration of Vite, a very fast builder, and support for Astro, which does partial hydration.
Examples of popular meta-frameworks are Remix, Next.js, Sveltekit, Qwik City, and SolidStart.

Analog has the potential to raise Angular's level to match the new generation of frontend frameworks. A huge undertaking, and hopefully, Brandon will get a lot of support from the community.
You can watch Brandon's presentation of Analog on YouTube.

{% embed https://youtu.be/Znd11rVHQOE?t=16677 %}

## Node.js 19

Its main feature is a watcher mode, that restart the process if it recognises a file change. Node.js has a special release cycle, where the even numbers form the LTS versions. So the ones we - developers - usually use. As soon as an odd number gets out, the former even number becomes the new LTS.

Very likely, you use Node.js 16 at the moment. However, starting this week, version 16 enters maintenance mode, and 18 becomes the new LTS.

{% embed https://nodejs.org/en/blog/release/v19.0.0/ %}

{% embed https://github.com/nodejs/Release %}

## Miscellaneous

### Angular improvement over time

Funny fact: If you want to see how Angular improved over time in terms of bundlesize and build time, then check out the list Robert Isaac. In version we had 8.4 seconds, and now it is just 4.8.

[Angular Size from 2 to 14](https://javascript.plainenglish.io/angular-size-from-version-2-to-14-23858d708914)

### Minor releases

Spectator, a testing framework, up to 11.3.

[Spectator Changelog](https://github.com/ngneat/spectator/blob/master/CHANGELOG.md)

Tailwind, a CSS framework, with quite a lot of new features, to 3.2.

{% embed https://tailwindcss.com/blog/tailwindcss-v3-2 %}
Microsoft 365 Security Options for Organizations
Tags: microsoftcloud, security, azure
Published: 2022-10-23 21:08:57



Microsoft 365 and its suite of solutions offer a slew of applications that are perfect for online work and collaboration when the hybrid method of work is the norm.

As a consequence of the Covid-19 pandemic, a lot of IT departments were forced to adopt Microsoft 365 solutions to facilitate remote work so that organizations could remain productive. However, one downside of this lies in the fact that not all IT teams were versed in Microsoft 365 and the depth of the solution. This has led to a lot of tenants and devices not being securely configured.

This increases the threat surface for organizations, especially with the number of mobile devices, including laptops that are now in play. All is not lost, however, as Microsoft 365 itself has several solutions that organizations can use to up their security and reduce their vulnerability.

The first step is to quickly identify where the organization stands in terms of what applications are most used, how employees are using and accessing them, how often they are used etc. Once this has been established, it is time to look at Microsoft 365’s Identity and Access Management platform and based on your previous assessment, apply what measures or combination of measures will help you.

Azure Active Directory (Azure AD) is a good place to look as well as it offers both stand-alone solutions as well as it can synchronize with your on-prem Active Directory, to facilitate a hybrid environment. With such a configuration several other methods of authentication are introduced including single-sign-on. This method can use your on-prem active directory to authenticate users to the cloud and vice versa.

Azure AD is included with your Microsoft 365 tenant, as such if you do not have an on-prem active directory you are not left out albeit it will not be as full-featured as an on-prem solution. The only caveat to this and the previous solutions highlighted is that it will require a special license add-on, Azure AD Premium P1 or above to unlock all the identity and access management features fully. These features will enable more granular control over your environment

There is also Microsoft 365 Defender which is a purpose-built security suite for the platform.

That being said, even if you only have a standard Microsoft 365 license, there are features there that can be used to increase your security footing. Enabling Multi-Factor Authentication (MFA) on your tenant is one such feature.

These are just my ideas on what you can start looking at to get going in having a more secure 365 setup. What are your thoughts?
The race Condition is the rat's trap
Tags: watercooler, writing, motivation, technicalpoetry
Published: 2022-10-23 21:04:21

Arggh!!! 😡

Why do I hate you so much? 😡

You are only hustling, squeaking🐀 around the house. 

Why won't I share a bite🍎 of my apple with you? 

And I know you love those apples. 😐

Why so much distaste for you when you take just a minute piece? 😐

Maybe because your activities remind me of mine. 🤔

How I won't stop running. 🏃🏽‍♂️ 

From the predator to the predator. 😓

From nothing to nothing. 😓

When no one is chasing and when there is no one to chase. 😓

That's too much fun for you. 😡

I hate you having fun. 😡

So, which would you die by? The rat trap or the rat race?😐
11 Growth Principles to Keep in Mind
Published: 2022-10-23 20:43:02

1. Give your health top priority because you only have one body.

2. When working on your goals, avoid expecting failure. Only because your subconscious processes what you think, expect to win every time.

3. There is no downside to learning a profitable skill.

4. Don't wait for the right opportunity to come your way. Make your reality.

5. If something doesn't work, take a step back and figure out what does.

6. Decide on a course of action and ensure you are surrounded by the right people who are strong in the areas where you are weak.

7. Recognize when to be silent and pay attention. That's how you win people and friends.

8. Consistently endure more pain doing things people are afraid of doing. The greater the risk, the higher the reward.

9. Be unique and original, even if people are faking you. You will always triumph.

10. Do not fear rejection; a "No" only signals the start of a new path.

11. Focus on what matters; everything else will fall into place.
VueJs Beginners part 1 - Directives
Tags: vue, javascript, webdev, beginners
Published: 2022-10-23 20:16:23

I started learning VueJs and tend to share it with you step by step. Slowly, but steadily. 

The Progressive JavaScript Framework
An approachable, performant and versatile framework for building web user interfaces.

## Features and benefits :

- **Virtual dom** like react js
- **lightweight 10k gzip**
- **Progressive :** it can be used for small and large
- **Vue ecosystem**
- **Incrementally adoptable :** it can be integrated for any legacy application page by page.  it doesn't need be written whole app 


## History of Vue js

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


## Some VueJS Directives 
Vue. js Directives are special HTML attributes that allow us to manipulate the DOM. Directives are very powerful and we use them every day.

[v-model](https://vuejs.org/api/built-in-directives.html#v-model): Create a two-way binding on a form input element or a component.
v-if
v-else-if
v-else
[v-colak](https://vuejs.org/api/built-in-directives.html#v-cloak) : Used to hide un-compiled template until it is ready.



## a sample project to check VueJs Directives on a project
 
{% embed   https://codesandbox.io/embed/vue3-basic-cwhnus?fontsize=14&hidenavigation=1&theme=dark  %}


more directives [here](https://vuejs.org/api/built-in-directives.html#built-in-directives)
Weekly 0033
Published: 2022-10-23 20:00:01

### Monday

Woke up early in the hotel and went to the gym.
These will be crazy days full of events. Today is the WPC 2022. I will do a speech in the afternoon about Teams Meeting Extensions development.

The speech in the afternoon went very well and I received a lot of questions after the session.
At the beginning of the session I was a little bit afraid because, at the end, I didn’t a live speech with more than 120 people since 3 years, more or less.
It’s something that you need to train time to time.

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

**Mood: 🥳** 

### Tuesday

Codemotion Day!

As a Codemotion Ambassador I did a lot of activities, meet and greet a lot of attendees and did a lot of public relation activities.

In the afternoon, after lunch, I was the moderator for a panel about various award programs. 

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

**Mood**: 🥳

### Wednesday

Codemotion Day!

Just hanging around and work a lot in the speaker’ room.

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

**Mood: 🥳**

### Thursday

I worked the entire day to the customer’s project about searching in the SharePoint recycle bins. I started to work very early in the morning to make this project finished as soon as possible.
During the day I have implemented the library PnP as dependency injection and I wasted at least 2 hours on a stupid bug during the initialization.

I learned a lot of new thing.

**Mood: 😩**

### Friday

Same as yesterday. Search project with SPFx and Azure Functions. Finally, I solved the bug in the PnP initialization in the early morning and for the rest of the day I started to implement the logic to retrieve the data from the Azure Search Cognitive service. 

**Mood: 😩**
What is JavaScript
Tags: javascript
Published: 2022-10-23 19:39:43

<div>
<p>
JavaScript often abbreviated as JS, is a popular programming language used for building web applications, among many other things.
</p>
<p>
In this article we'll only be looking into some little meaning of js(JavaScript).
</p>
</div>

<div>
<h2>  what JavaScript does. </h2>
<p>
Just as  we use HTML to to define and structure the contents of web pages ,CSS to style and specify the layout of web pages .We use JS(JavaScript) to program the behavior of web pages and add interactivity to them.it enables you( as a web developer) to create dynamically updating content, control multimedia, animate images, and pretty much everything else.Okay, you cannot do literally everything, but it is amazing what you can achieve with a few lines of JavaScript code.),not to forget a line of code written in JavaScript is called<b> script</b>.
</p>
<p>JavaScript can do a lot of things on a website, some of the things it does are:
<ul>
 <li>
 It collects data from users.
</li>
 <li>
It stores data inputs by the users.
</li>
</ul>
and lots of more interesting stufs you'll like to try out.
</p>
</div>
<div>
<h1>
Why Study JavaScript?🤔
</h1>
<p>
As a web developer JavaScript is One of the 3 <b>languages</b> you <b>must</b> learn, that is :
<ol>
<li> HTML</li>
<li> CSS</li>
<li> JavaScript</li>
</ol>
js makes responsive design easier.
JavaScript has become integral (it is essential)to the Internet experience as developers build increased interaction and complexity into their applications. Search engines, e-commerce, content management systems, responsive design, social media and phone apps would not be possible without it(JavaScript).
Also, having good knowledge on html, css and js can land a job with good income, especially when you're good  at what you're doing.
</p>
</div>
<div>
<h3>
Conclusion 
</h3>
<p>
Thanks for reading this article! I hope you found it interesting, I'll be  sharing how to get started on JavaScript in my next article.
</p>
<p>
Pls🙏,stay tuned for more contents on this, if you find it interesting.
</p>
</div>
Holes!
Tags: godot, gamedev
Published: 2022-10-23 19:27:45

After several days of working on it in my spare time, I've finally gotten holes in my rooms to work! As described in [my previous post](https://dev.to/drunnells/moving-student-sprites-1ido), I need a way for the students in this game to walk or fall through openings in the walls. The glb objects that I created in Blender were great for unfolding and making texture images that will be easy to edit later to customize each room, but made it impossible for me to subtract another object from them to create an opening. I think that Godot does allow for a different (internal) shape type to subtract from, but I'm not doing it this way yet. This is what I have so far:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03m3f6k4rdiobfe0oaz2.gif)

The final game will have multiple tools/abilities that can be applied to each student. The current state of things is that I can click on a sprite to position an invisible collision object that triggers the sprite to ignore floors. I was able to implement that as expected. The challenge turned out to be making it _appear_ that there was a hole in the floor. This challenge consumed several days of me learning how shaders work. Godot has a separate language for dealing with shaders, and the concept itself is something that I've never needed to consider before. My custom shader is passed to the object through the material that I apply to each room. Two textures are in this material, one for the appearance, and another hidden texture that I only use to send the local coordinates of each "hole". From there the shader has a function to determine which pixels in each frame are within the radius of the hole and sets their alpha to 0 to make it transparent. It was a little work to get this to how I liked it because the coordinates of the hole is local to the room, which has different sized texture UV images and face rotations depending on the size of the room. In the end, it was interesting and educational and appears to have the effect that I want. I'll do something similar for doors opening/closing.

I think I'll work on doors next, and then maybe a simple test user interface to select the tool to use on the selected student. That should be a good foundation to add more tools/abilities and maybe create working level. I'll think about artwork later, but in the back of my mind I'm still thinking that I'll create a web based level editor that includes room making with uploaded wall texture/pattern images.
My CodexProject Server js
Tags: react
Published: 2022-10-23 19:26:11

```
const express = require('express');
const app = express();
const cors = require('cors');
const http = require('http');
const server = http.createServer(app);
const port =  process.env.port || 5000;
const uuid = require('uuid');
app.use(cors());
app.use(express.json());

server.listen(port, () => {
    console.log('server listen on port: ' + port);
});

const conn = require('./db');

app.post('/createuser', (req, res) => {
  const user_uid = uuid.v4().substring(0, 8);
  const {user_name, user_password, user_batch} = req.body;
    conn.query("INSERT INTO tbl_users SET ?", {user_uid,user_name,user_password,user_batch}, (err, result) => {
        if(err){
          res.send({
            status: false,
            message: 'user not created'
          })
        }else{
        res.send({
          status: true,
          message: 'user successfully created'
        });
      }
    });
    console.log("data saved...");
});

app.get('/getusers', (req, res) => {
  conn.query("SELECT * FROM tbl_users", (err, result) => {
    if(err){
      res.send({status: false, message: 'users data not get', data: []})
    }else{
      res.send({
        status: true,
        message: 'users data',
        data: result
      });
    }
  });
});


app.post('/updateuser/:id', (req, res) => {
  const { id } = req.params;
  const {user_name, user_password, user_batch} = req.body;
    conn.query("UPDATE tbl_users SET ? WHERE id = ?", [{user_name, user_password, user_batch},id], (err, result) => {
        if(err){
          res.send({
            status: false,
            message: 'user not update'
          })
        }else{
        res.send({
          status: true,
          message: 'user successfully update'
        });
      }
    });
    console.log("data updated...");
});


app.get('/getuser/:uid', (req, res) => {
  const { uid } = req.params;
  conn.query(`SELECT * FROM tbl_users WHERE user_uid='${uid}'`, (err, result) => {
    if(err){
      res.send({status: false, message: 'user data not get', data: []})
    }else{
      res.send({
        status: true,
        message: 'single user data',
        data: result
      });
    }
  });
  console.log("request get");
});

app.get('/getposts/:uid', (req, res) => {
  const { uid } = req.params;
  conn.query(`SELECT id,user_uid,post_title,date FROM tbl_posts WHERE user_uid='${uid}'`, (err, result) => {
    if(err){
      res.send({status: false, message: `DAta Not get error: ${err}`, data: []})
    }else{
      res.send({status: true, message: 'single user get posts list', data: result})
    }
  });
  console.log("get posts");
});
  
  
```
Week #4: Without progress
Tags: firestarters, global, sideprojects
Published: 2022-10-23 19:25:50

## Summary

It will be short today. Four weeks of [Firestarters](https://transparentworld.pl/firestarters/) Global Quest behind me and no visible effects. Still learning, still thinking.

Calculations stay the same for previous weeks.
Expenses: 0 PLN
Incomes: 0 PLN

*A vision without a strategy remains an illusion.* - Lee Bolman