teleren/devto huggingface dataset:
Open Source: As explained to a five-year-old
Tags: github, opensource, dev
Published: 2021-09-28 21:29:57

*It is Christmas, and Daddy brings home a Christmas tree, and the tree needs to be decorated. You have lots of decoration ideas, same as your sister, but you cannot decorate the tree till you receive permission from your Dad. Until permission to decorate the tree is granted, you cannot decorate the tree. This is similar to the way open source works.*

**So what could Open Source mean?**

Open source is the source code of computer software that is accessible to the public to change, redo, remake only when permission is granted.

**How does that work?**

In the development process of that software, publicly making it accessible is considered so that when the software is released, anyone can have access to it through a means of permission. Github is where open source projects are mostly uploaded so they can be made available to the public. From Github, there are repositories where you can get the project to use the code or contribute changes to the software.

The permission given to open source is called License . This License contains conditions where the actual owners of the software state how exactly they want you to use, change or modify their software. Some of these licenses could include MIT license(MIT), Apache License 2.0, GNU General Public License etc.

Open Source Software are most preferred because they are interested in having more control over these kinds of software. Examples of Open Source Projects include; Linux, Mozilla Firefox, Apache, WordPress, VLC Media Player etc.

**Why the need for Open Source?**

Contributing to Open Source has lots of benefits, and they are

1. Open Source Software tends to have fewer bugs than regular software.
2. Open source helps owners do a global software product for little to free cost.
3. It encourages collaboration amongst the Open Source Communities.
4. The source code is made available to the public to understand its purpose or how it works and how it works.
5. It promotes the exchange of knowledge, allowing for more people to become skilled software developers.
6. Since it is made public for modification, it meets all the criteria of the public.
7. It is free.
8. Open Source Software is highly secured because developers constantly review the code, thereby ensuring security and accountability.
Open Source is a key player to the advancement of technologies as well as the improvement in skills of developers. One’s involvement would be beneficial to both them and the community. I hope you consider contributing to Open source today.
I Broke into Dev.to, and you should too.
Tags: firstpost
Published: 2021-09-28 21:13:53

Hi 👋, am glad you're here. This is my first post and am glad am making it. You might be here to know exactly what I mean by "broke into Dev.to", and that you'll know in a bit.

This is my first post on dev.to but not my first blog post generally. I've written in some few blog platforms but i haven't been consistent in any.

I would say part of the reason for the inconsistency in writing/blogging is due to the consistent hassles and struggles i/we face as a developer.

>
I've learnt **this** and **that**, and there's still lot of things to learn; that new technology, this new trend, the new way to do that old thing, that new javascript framework/library, there's no time and (add your own worries).

Along the line of these are what runs through the minds of so many developers, including myself.

While those statements are true, and you need to keep learning, there's one thing you should start doing (if you haven't) that'll help your career and others' in a big way. Start **Writing/Blogging**.

It may not be easy, but it's something that'll yield benefits to you,your future career, and others.

Yes i know you want to be a better developer.
You want to network, you want to engage yourself in the community, you want to follow discussions, you want to contribute to open source, you have to be well...a **developer** 🤷.

One way of actually getting engaged (i believe) is to start blogging your developer journey.

With that said, one of the challenges of maintaining a blog is actually knowing what to write about, and here's what i have to tell you. **Write whatever you feel is/will be useful to someone, and don't over-think it.** Grab a notepad and start writing.

Did you just understand that concept? Tell others who may have not. Did you just realize a better way to go about that stuff? Tell the world. Did you finally fix that tough bug that left you hitting your head on the wall? Tell others how you did it (you might be saving someone's head 😆).

Thanks to development, now you don't need to start building your own full-fledged blogging site to express yourself. Just hop on to [Dev.to](https://dev.to) or any blogging platform of choice and **let it go**.

### Summary
This post is actually a letter to myself (advising myself as I wrote 🙈), but i feel it would be useful to someone else, somewhere.

Even if you don't find blogging any useful to yourself as a developer, write for your future sons and daughters 🙂 and other persons whose day will be saved by your little sentences. Happy coding..🤟

**happytobeindevto**
**gladtoengage**
**firstpost**
**grace**
Button Update
Published: 2021-09-28 20:55:41

So far my partner and I have successfully made a button and added a link to it. We made it so that the link opens up in a new window. Also, we added a hovering state to the button. The button turn blue when the cursor is hovering over it. The icon and text are complete inside the button as well.

Here is the link to our work - https://github.com/PaddysHub/CTAButton
Display Angular 12 App Version
Tags: angular
Published: 2021-09-28 20:52:32

Displaying the app version automatically pulled from package.json is a great way to ask clients and users to verify what version they are using.  It is also helpful to include it in error logging.  In previous versions of Angular it was as easy as doing this inside your environment.ts files:  

```
import { version } from '../../package.json';
```

However in Angular 12 you get an error:
> Error: Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)



### Solution:
```
export const environment = {
  ...
  VERSION: require('../../package.json').version,
};
```

And there is a good chance you will need to add this to your `tsconfig.app.json`:

```
"types": [ "node" ]
```

ref: https://stackoverflow.com/a/68653103/2686911
Bytesize Architecture Sessions
Tags: architecture, collaboration, diagrams
Published: 2022-10-01 17:11:29

---
title: Bytesize Architecture Sessions
published: true
date: 2021-09-28 20:48:00 UTC
tags: architecture, collaboration, diagrams
canonical_url: http://roundcrisis.com/2021/09/28/bytesize-architecture-sessions/
---

![Summary of Bytesize architecture session](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdskn8klost35en6pirw.png)



The more you do something, the better you get at it. It applies to software architecture too. How to do it more often?

People new to a codebase and those less experienced with programming generally have incomplete or incorrect mental models about the codebase. One would expect that as time passes, the mental models should become correct, how about being more deliberate about it?

Here is an easy to try option: Run a Bytesize architecture session:

- An hour long recurrent meeting with your team. Bi-weekly at the start and you can phase it to once a month as people run out of things to draw.
- Decide together a subset of the architecture you want to draw. This is not a test, it’s an opportunity to learn together about what you know and, most importantly, what you don’t know.
- Set a timer for 5 minutes.
- Separately, everyone draws in a piece of paper, this is [“Alone Together”](https://www.roundcrisis.com/2022/10/01/the-power-of-alone-together/) time. If you don’t know something, leave it blank.
- When the timer goes off show each other what you drew. Yes, it’s kind of scary.
- Discuss and find consensus on what is the resulting diagram should be. Finally record the diagram(s) created somewhere (e.g: draw.io, miro, plantuml, etc)

It is normal to forget some parts. Together you can make a better picture.

## Outcomes

- Understanding of whatever you decided to focus on the session will increase. Now you have concrete questions, and generally you can find the answers in the code.
- Deliberately thinking about architecture with a cadence keeps the ideas fresh in people’s mind.
- The resulting diagrams become a design tool that is inherently familiar to the team, since they created it.
- The resulting diagrams highlight obvious areas for improvement.

## What do you need to run a session

- Cup of tea / coffee / water
- 1 hour with your team
- pen and paper or an online board
- Psychological safety (essential)

## What is this practise trying to address

- In most teams there is at least one person that has a high fidelity image of the architecture in their heads. It is common for other people in the team to defer questions and decisions about the architecture to that person, this is great (is it tho?) until that person is not available.
- If everyone in the team has the same or similar picture of the architecture in their heads, they will make better decisions on their day to day.
- I have tried this for a few years and it has proven super useful. Teams are happy to build this together and get a feeling of ownership.
Why I am building remotefront.io
Tags: react, remotework
Published: 2021-09-28 20:17:39

If we look at some popular remote job boards, all are made targeting job posters. There is not much to offer for job seekers.

- Most of the websites are ugly
- Hard to browse
- Not many filters to arrive at the dream remote job matching the user's preferred skills

We are here to solve this issue. We would like to offer brilliant UX, the ability to filter jobs with all possible filters
like

- Salary
- Allowed regions
- Skills
- Job title

Ability to subscribe to receive automated weekly new job alerts based on personal preference. Passive job hunting is the best policy to find your perfect remote company. Sophisticated tech people prefer to receive job alerts based on their skillset. Why browse 10 job websites and lose mental energy.

Rather follow remotefront.io and put your job hunting on autopilot.
How to start your hacking career?
Tags: hacking, cybersecurity, pentester
Published: 2021-09-28 20:11:07

Hii everyone it's my first post here , so I don't know where to start writing so if I do anything wrong forgive me 
So now let's move to on topic

If you want to start your hacking career and don't have any idea how to start then don't worry this post will be helpful for you,

£ Before starting your career in hacking ask yourself ....

Main purpose of choosing career in hacking (eg. For money, for learning, for fun or anything ...)

* Now if you are a serious learner and looking it as a career then follow below given t
Steps..

For learning:
1.computer fundamental
2.networking fundamental (TCP ip ..)
3.php, javascript,bash, python,java.
4.Have a better knowledge in one programming language (specially java , python , js)

5.read daily infosec or medium writeup related to hacking

6.how hacking tools work

Now it's end next part will be how to practice and tutorials on hacking tools.

Thank you 🥰
How to turn any design into HTML & CSS
Tags: html, css, webdev
Published: 2021-09-28 19:48:52

Online courses hide the most important part of web dev: what to do when it’s just you, an idea, and your IDE.  Todo-list-sized projects are fine, but anything more complicated? It can be overwhelming.

One of the surprisingly hardest parts is HTML. Not the syntax of it, but how to effectively create a UI for your idea.

I learned a technique early on that will take a design and turn it into a near-perfect HTML skeleton for your app. 

### Pen and paper to the rescue

The approach is very visual. I use pen and paper in real life, but use an iPad here to record the screen: 
{% vimeo 617218454 %}


### How can we use this approach for our own apps when we don't have a design?

Feel free to reach out to me if you get stuck on this part.

To come up with a prototype design, list out the features you want for your app. Then, scratch out a design with pen and paper until all the features are covered by your prototype. 

Once you have it down, use the same method shown in the video to come up with the HTML skeleton.

### ...but it doesn't look pretty?

Steal the aesthetics! Don’t use it for commercial gain, but find a design you like and just borrow it. Discord has a nice dark-theme design, AirBnB makes great use of white space for a professional feel, search [Dribbble](https://dribbble.com/shots/popular/product-design) for user-submitted design inspiration, [Bootstrap released some nice themes](https://themes.getbootstrap.com/), and maybe even look into [Tailwind](​​https://tailwindcss.com/).

Aesthetic can be a big draw, but the most important part when building out practice projects is nailing the functionality. Design skills slowly seep in over time. Thankfully, design ain't our job anyways!
Arctic Code Vault
Tags: github, codenewbie, opensource, webdev
Published: 2021-09-28 19:05:58

## In one word, **brilliant** 
_When I read about it, I found this whole AWA thing out of this world_
  
## What is **Arctic Code Vault?**

It is a data repository. a mere data repo? **Nope**
>The GitHub Arctic Code Vault is a data repo that is preserved for future generation. 

**On 02/02/2020 GitHub took a snapshot of every active public repository of GitHub and stored it in the Arctic Code Vault.**
>Those millions of repo were designed to last for 1000 years. 

It is preserved in **Arctic World Archive** (AWA) which is located in decommissioned coal mine in the Svalbard archipelago, closer to the North Pole than the Arctic Circle.

## The idea behind preserving these repo
>It is much less likely that in case of global catastrophe, we could lose everything stored on digital media, in upcoming few generations. 


>In worst case, if it gets true  our today's vital codes will be completely lost and most likely they'll be forgotten, so to prevent these things from happening, GitHub Arctic Code Vault is preserved for long years.


To know more about it, [click here] (https://youtu.be/fzI9FNjXQ0o) and see this video.


**Hope it helped xD**


 
#Stay Kind
Front End Dev Available
Published: 2021-09-28 19:03:20

I'd love to connect with any other Front End Devs. I'm an entry level React dev (Gatsby/Sanity/GraphQL/ES6) looking for a Junior Dev position.

You can learn more about me and see examples of my work at my portfolio site: https://ericrodgers.io.

Please get in touch or pass my info along to anyone who might be in a position to hire or help. Thanks!
What is Virtual DOM doing?
Tags: react, beginners, codenewbie
Published: 2021-09-28 19:03:09

## Introduction
In Vanilla JS or jQuery, we need to manipulate DOM and add event handlers to handle every change. This makes the UI slow.

A React Application is responsible for the View part of the system. 
This means it handles the user interface for the application.

When a user interacts with the system, changes take place.
`For example` The user fills the username and password and then clicks on the Login button. We take that user to the Homepage after successful login or give an error message if the username or password is wrong.
This leads to updating the prior state to the current state. Then the app describes what the UI should look like after these changes by the user. This process is called rendering and the output of this render is a React Element. 

>A react element is a simple plain JavaScript Object that maps to the DOM Element.

It keeps a light-weight representation of the actual DOM element and performs all operations on it. This is called the Virtual DOM. 
![DOM state before state change](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hjjwhp7bk5l3rs4do67.png)
Whenever we change the state of a component, we get a new React Element.
![Virtual DOM changed state](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ybqvxgixrdld2l9v5yn.png) 
React then compares this element along with its children with the prior state in the virtual DOM and figures out what is changed. After this, it updates the part of the actual DOM to keep it in sync with the Virtual DOM.
![After re-rendering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4c7u2cjjf5hdp1deswxy.png)
Automatic cross-platform testing: part 5: OpenBSD
Tags: testing, githubactions, ci, openbsd
Published: 2021-09-28 18:32:00

#Previously on this channel

* [Introduction and testing on Linux](https://dev.to/drhyde/automatic-cross-platform-testing-part-1-linux-40ih)
* [Testing on FreeBSD](https://dev.to/drhyde/automatic-cross-platform-testing-part-2-freebsd-2394)
* [Testing on MacOS](https://dev.to/drhyde/automatic-cross-platform-testing-part-3-macos-2h2i)
* [Testing on Windows](https://dev.to/drhyde/automatic-cross-platform-testing-part-4-windows-1p7e)

#Testing on OpenBSD

It's been a while since I wrote the first few parts of this series. Part 1 where I talk about automatic testing on Linux is now obsolete. Travis CI is no longer free for open source projects, so I switched to using Github Actions. Github also support Mac OS and Windows, but I've not migrated my testing on those platforms, because I am lazy.

And I'm now experimenting with [Github Actions for OpenBSD testing](https://github.com/DrHyde/perl-modules-Palm-TreoPhoneCallDB/blob/68b39dda0ac01a56bdced5c15140b551bedf6295/.github/workflows/installation-openbsd.yml) too. This despite it not being a platform they support. After a bit of faffing about it seems to Just Work, so I'll roll this out to all my projects soon.

How it works is a [terribly cunning hack](https://github.com/marketplace/actions/cross-platform-action) that has been packaged up into an action that anyone can incorporate into their workflows. Github's Mac OS runners run in virtual machines on real Macs; Apple's hypervisor supports nested virtualization; so my OpenBSD tests run in an OpenBSD VM inside a Mac VM.

As such there are some limitations. I can't use any other Github actions inside the OpenBSD VM, because Github don't know about it and it doesn't know about Github. However, it does open up the possibility of supporting other OSes too. FreeBSD is already supported, and I can see that there is a repository under active development for NetBSD. Perhaps once that's stable I'll badger the author into supporting Solaris.

#Next
The [next part of this series](https://dev.to/drhyde/automatic-cross-platform-testing-part-6-32-bit-linux-fh2) will show you how to automatically test on strange variations on the theme of Linux, such as 32 bit and weird distributions.
Awesome GitHub profile every developer 👨🏻‍💻 must have‼️🤩
Tags: github, programming, javascript, webdev
Published: 2021-09-28 18:27:11

## Background story
A few weeks ago I was scrolling through my Twitter and saw that one guy, who tweetet his nice and new GitHub profile. First thoughts I had, were... OMG this looks awesome or did he do that, so I wanted to do the same with my GitHub profile. After a few seconds I've already found the right page, that explained every single step to me.
With this article I am going to explain all these steps to you. So stay tuned and read till the end! 
<hr>
## Let's start
### First step: Create a GitHub repository
For this step, you need to create a GitHub repository, that has the name of your GitHub account.
In my case it was "PaulD103", like the name of my GitHub profile. 

### Second step: Create a README.md file
Do you know how to create README files?
It's basically the same. Just write some markdown language, give your README file a headline and write some personal information!

#### For a more detailed GitHub profile, you can use this template here:
{% github PaulD103/PaulD103 %}

#### Information
When visiting my profile you're able to see my total amount of Twitter followers, the views on my GitHub profile and my current stats on GitHub. I show you all the platforms, where you're able to connect with me to, like Twitter or Instagram and I tell you some tools and languages I am used to.

#### How to use this template?
- click on this profile
- look up the code
- copy it
- change all the name tags, with your information

<hr>

### Small template for a easier way to use
```
<h1 align="center">Hi 👋, I'm Paul</h1>
<h3 align="center">A Self-Taught Developer, Currently Learning Artificial Intelligence in Python</h3>

<p align="left"> <img src="https://komarev.com/ghpvc/?username=pauld103&label=Profile%20views&color=0e75b6&style=flat" alt="PaulD103" /> </p>

<p align="left"> <a href="https://github.com/ryo-ma/github-profile-trophy"><img src="https://github-profile-trophy.vercel.app/?username=pauld103" alt="PaulD103" /></a> </p>

- 🔭 I’m currently working on [Side Projects in Javascript](https://github.com/PaulD103/javascriptcodingProjects), I share on my own coded [React WebApp](https://javascriptcoding.org)

- 🌱 I’m currently learning **Artificial Intelligence, CS50's Introduction to Artificial Intelligence with Python**

- 👯 I’m looking to collaborate on **JavaScript projects**

- 🤝 I’m looking for help with **Artificial Intelligence in Python**

- 👨‍💻 All of my projects are available at [javascriptcoding.org](https://javascriptcoding.org)

- 💬 Ask me about **Python, Flask, JavaScript, React.js, CSS and SQL**

- 📫 How to reach me **contact@javascriptcoding.org**

- ⚡ Fun fact **I love films about artificial intelligences**
```
Change the basic information about me like my profile names and set it to yours!

### Support:
Comment down below, what you think about my [GitHub profile](https://github.com/PaulD103). Follow me on Instagram [@javascript_coding](https://www.instagram.com/javascript_coding/) and make sure to check out my website for more awesome JavaScript side projects I coded on my own!