teleren/devto huggingface dataset:
Self Taught Programmer [6.7.2021,  post.1]
Tags: devjournal
Published: 2021-06-07 21:24:09

I've stuck my toes in the web dev water for about a year while working other jobs, producing music etc etc. Obviously, commitment is needed to really master programming. Initially started posting this weekly to Reddit, but recently found this community. 

My goal is to earn one certification from freeCodeCamp every 2 weeks. I will be going through each challenge extensively, posting questions here as well. I may adjust that time frame moving forward, but two weeks seems like enough time to build multiple projects per section, add them to a portfolio, etc. Also, currently working 60 hrs/week at my current non-dev job, but able to work on programming during the day / work breaks.

So - 1 section every 2 weeks puts me at about 22 weeks with the interview prep. We'll call it 24 weeks, so 6 months. My goal is to be interview-ready in 6 months. I've completed the Responsive Web Design cert and am halfway though JavaScript Algorithms and Data Structures cert (having some previous knowledge it took a few days).

Development wise - I've scratched the surface with Angular / python / Node / Git using VS code, but really wanted to start from the beginning. I was just about as lost as you can imagine without the fundamentals. I've been producing music for about 5 years with Ableton / Logic, so learning Unity with C# felt like a natural progression.

This post is to serve as the beginning of my self-taught journey. I've looked into bootcamps but I am challenging myself to put the pieces together, save money and land a job using free and relatively inexpensive resources. This is also for anyone searching the internet looking to start from the ground up. I hope this journal helps us both.

I'm not sure where this will lead but I am hoping to stay consistent by posting weekly to add some accountability and chat with others in the same boat. Hopefully the mods allow it, I didn't see any rules about it. This isn't meant to be self-promotion but rather to start communicating frequently with other developers and beginners who may need motivation to start.



Weekly Questions:

Having trouble committing to a portfolio design. Is that something you started building as you were learning?

What were/are some of your favorite resources?

How could I improve this weekly journal?



Weekly goals;

Finish the JavaScript section on freeCodeCamp

Launch a template portfolio with Angular / Node.JS / VS Code

Add projects from FCC to portfolio with thumbnails, html, CSS and JS.



Resources and current practice items - week 1

- https://javascript.info/

- html exercises on w3

- css exercises on w3

- JavaScript exercises on edabit

- dribbble for design ideas

- angular

- node

- pluralsight

Thank you to everyone who will be answering questions along the way. I'm looking forward to hearing your thoughts, comments, concerns, helpful resources, just to chat, whatever. Again, goal is to be interview ready in 6 months, hopeful to make it happen.

Looking forward to starting this weekly journal
Recipe Layout Using HTML and CSS
Tags: codepen
Published: 2021-06-07 21:16:18

[#codepenchellenge](https://codepen.io/tag/codepenchallenge?cursor=ZD0xJm89MCZwPTM=)         [#cpc-recipe](https://codepen.io/tag/cpc-recipe/?cursor=ZD0xJm89MCZwPTM=)                                                 {% codepen https://codepen.io/parag-rokade/pen/PopaeNG %}
Getting started with C# - Storing and retrieving data
Tags: csharp, dotnet, codenewbie, 100daysofcode
Published: 2021-06-07 20:44:15

## C# Variables
Variables are containers for storing data values.

In C#, there are different types of variables (defined with different keywords), for example:

### int:
- stores integers (whole numbers) without decimals, such as 123 or 123.

### double:
- stores floating-point numbers, with decimals, such as 19.99 or -19.99.

### char:
- stores single characters, such as 'a' or 'B'. Single quotes surround char values

string:
- stores text, such as "Hello World." Double quotes surround string values

### bool:
- stores values with two states: true or false

## Declaring Variables

By declaring variables we are creating a variable, you must specify the type and assign it a value:

### Examples
```csharp
int num = 5;
Console.Writeline(num);
```
```csharp
//double
double num = 3.92
Console.Writeline(num);
```
```csharp
string name = "Jordan";
Console.WriteLine(name);
```

### Modifying variables

A good thing to note is if you assign a new value to an existing variable, it will overwrite the previous value:

```csharp
int myNum = 115;
myNum = 220; // myNum is now 220
Console.WriteLine(myNum);
```

### Constants

You can also add the `const` keyword to prevent others from altering the existing values; this could be helpful in certain situations.  

```csharp
const int numPi = 3.14
numPi = 20; // error
```

The const keyword is used to tell a variable always to keep the same value.

Note: You cannot declare a constant variable without assigning the value. If you do, an error will occur: A const field requires a value to be provided.

### Using the keyword var.

The `var` keyword has been around for a long time, and it's commonly used in code examples.

The use of the `var` keyword is significant in C#. There are some situations where the data type may be different than the code intended to use it.

```csharp
var message = "Hello world!";

var message = 19.0m;
```

Sneak Peak for the next lesson we will continue to put this all together for what we have learned so far.

```csharp
int age = 25; 
int name = "Jordan";

Console.Writeline($"Hey Friends!, my name is {name}, and I am {age}!");
```
If you want to dive in deep with variables take a look at the links below.

### sources

- https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/language-specification/types#default-constructors
- https://docs.microsoft.com/en-us/learn/modules/csharp-literals-variables/
- https://www.w3schools.com/cs/cs_variables.asp

Like, share and follow me 🔥 for more content:

📽[YouTube](https://www.youtube.com/channel/UCWMddXhNGWkzBYYS9cv-7Qg)
☕[Buy me a coffee](https://ko-fi.com/justjordant)
💖[Patreon](https://www.patreon.com/JustJordanT)
🌐[JustJordanT.com](www.justjordant.com)
🐱‍💻[GitHub](https://github.com/JustJordanT)
🤠[Twitter](https://twitter.com/Just_Jordan_T)
🏢[LinkedIn](https://www.linkedin.com/in/justjordant/)
Getting started with C# - Hello World!
Tags: csharp, dotnet, coding, codenewbie
Published: 2021-06-07 20:43:19

Hey friends!

If you are like and you realized that C# and the whole .NET ecosystem is fun to work with or you are just getting your feet wet this is fast little series of articles for you to go through to get up and running with C#. 



## What is C#?

C# is pronounced "C-Sharp".

It is an object-oriented programming language created by Microsoft that runs on the .NET Framework.

C# has roots from the C family, and the language is close to other popular languages like C++ and Java.

The first version was released in year 2000. The latest version, C# 9 that was released in 2020.

## C# is used for:

- Mobile applications.
- Desktop applications.
- Web applications.
- Web services.
- Web sites.
- Games.
- VR.
- Database applications.

And a whole lot more!

### So by now you may be thinking... Why Use C#?

- It is one of the most popular programming language in the world.
- It is easy to learn and simple to use.
- It has a huge community support.
- C# is an object oriented language which gives a clear structure -to programs and allows code to be reused, lowering development costs.
- As C# is close to C, C++ and Java, it makes it easy for .
- programmers to switch to C# or vice versa.

### Let's get building!

Microsoft has built this handy tool to try .NET and C# that is vary user friendly or beginner or even if you don't want to mess with IDEs it get straight to coding. 


**Click me** - [Try.dot.net](https://try.dot.net/)


### Taking out first steps.

Now that we have our web IDE, let's start coding something simple. We can remove all the default test on [Try.dot.net](https://try.dot.net/) and copy this in there and click run.

```cSharp
using System;

namespace HelloWorld
{
  class Program
  {
    static void Main(string[] args)
    {
      Console.WriteLine("Hello World!");    
    }
  }
}
```
We can view our results.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f895f26n52cfspcfyo9q.png)

And there we are running our first lines of code in C#.

In part 2 we will take a look at Storing and retrieving data in C#.

#### Resources

- https://www.w3schools.com/cs/default.asp
- https://en.wikipedia.org/wiki/C_Sharp_(programming_language)
- https://docs.microsoft.com/en-us/dotnet/csharp/

Like, share and follow me 🔥 for more content:

📽[YouTube](https://www.youtube.com/channel/UCWMddXhNGWkzBYYS9cv-7Qg)
☕[Buy me a coffee](https://ko-fi.com/justjordant)
💖[Patreon](https://www.patreon.com/JustJordanT)
🌐[JustJordanT.com](www.justjordant.com)
🐱‍💻[GitHub](https://github.com/JustJordanT)
🤠[Twitter](https://twitter.com/Just_Jordan_T)
🏢[LinkedIn](https://www.linkedin.com/in/justjordant/)
Simple BPD Diagnoser
Tags: mentalhealth, python, codecademy, programming
Published: 2021-06-07 20:32:53

This is my first portfolio project for the first half of Codecademy's Computer Science career path. It's a simple terminal program meant to give people a simple idea of what their symptoms might mean in relation with Borderline Personality Disorder. It's also meant to raise awareness against suicide and BPD in general.

!["My program assesses your symptoms to draw a simple, plausible conclusion. It also checks for suicidal tendencies." ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iymg9j7zz32r60dnxa2j.png)

Coming from someone that suffers through BPD, I'd like to dedicate my programming future to raising awareness for a variety of mental health illnesses people might not even know they have.

My code uses input and lists to keep track of the user's symptoms, then, according to the selected symptoms, it draws up a plausible conclusion. If suicidal thoughts are one of the symptoms, then it prints info from the National Suicide Hotline.

Have a look at my code:

https://github.com/XanderDelpin/BPD-Diagnoser

Thank you!
Is there some great tools you know?
Published: 2021-06-07 20:30:31

Today, I'm a quite bit curious. Do you know some cool tools, frameworks... ? *(for devops, backend, frontend...)* 

I'm already regularly checking new tools, new releases... but I'm quite sure there is a lot of cool underground projects which only wait to be shared! It can be one of yours, from a friend...

So if you have one, please share it and if you want, explain why it's a good tool!

Thanks and have a nice day :)

---

# Your propositions
- [V Lang](https://vlang.io/) by [Heiker](https://dev.to/vonheikemen)
One-liner to sum up numbers from a CSV file
Tags: linux, bash, cli
Published: 2021-06-07 20:18:03

This is the `shopping.csv` CSV file that we will be working with throughout this blog post.

```
item,price
rice,2.49
potatos,1.49
pasta,3.79
```

The goal is to create a one-line bash script that prints the sum of the prices in the file above, which is **7.77**.

**Step: 1. Print the file content**

```bash
$ cat shopping.csv
```

This command prints the file content without modifications.
It gives us a way to redirect - pipe - the output to another command in the next step.

Output:

```
item,price
rice,2.49
potatos,1.49
pasta,3.79
```

**Step: 2. Cut the first line**

There are many ways to achieve it, but we use the `tail +n` syntax.

In our case, it takes all the lines until the end of the file, starting from the second line.

```bash
$ cat shopping.csv | tail +2
```

Output:

```
rice,2.49
potatos,1.49
pasta,3.79
```

**Step: 3. Cut the first column**

`awk` splits each line by a separator defined by the option `-F`.
In our case, it's the comma.
Then it prints the second column from every row.

```bash
$ cat shopping.csv | tail +2 | awk -F , '{print $2}'
```

Output:

```
2.49
1.49
3.79
```

**Step: 4. Concatenate the prices**

`xargs` is used to "squash" the lines into a single string, separating them by space.

```bash
$ cat shopping.csv | tail +2 | awk -F , '{print $2}' | xargs
```

Output:

```
2.49 1.49 3.79
```

**Step: 5. Replace spaces with pluses**

The `sed` expression replaces the escaped space with `+` in the entire string (globally - `g`).

```bash
$ cat shopping.csv | tail +2 | awk -F , '{print $2}' | xargs | sed -e 's/\ /+/g'
```

Output:

```
2.49+1.49+3.79
```

**Step: 6. Perform the calculation**

`bc` is a simple calculator that you can use interactively or by piping an equation into it.

```bash
$ cat shopping.csv | tail +2 | awk -F , '{print $2}' | xargs | sed -e 's/\ /+/g' | bc
```

Output:

```
7.77
```
Making a dead simple configuration service with Typescript
Tags: typescript, javascript, drops
Published: 2021-06-07 20:11:41

If you're working with NodeJS applications, you probably has `process.env.VARIABLE` statements all around your code base. The most simple method to configure an application is installing dotenv and creating that lovely .env file on the root folder of your project.

This approach, however, has some pitfalls and is error prone. What if you don't set that process.env port? You'll probably have a default value (maybe 3000?), but you will need to run your application to discover such type of thing.

That same problem has been solved by typescript for almost anything. When you have the help of static typing, you can discover some errors a lot faster. That said, how can you use Typescript to have a type-safe way to access configurations?

# Show me the code!
Take a look at that short snippet:
```typescript
export class EnvironmentService<Environment> {

  public constructor(
   private readonly variables: Environment
  ) {
    // some logic to assign process.env to this.variables
    // you can use, for instance, 
    this.variables = Joi.attempt<Environment>(process.env))
  }

  public get<T>(name: keyof Environment) {
    return <T><unknown>this.variables[name];
  }
}
```
In a nutshell,
- First, you need to define an interface for you environment;
- Then, you do pass it as a type parameter to the EnvironmentService class when instantiating a new object;
- Finally, use something like class-validator, Joi or you library of choice to assert if the `process.env` object has all required variables and assign its value to the `variables` attribute;

After those simple steps, you can use the method `get` to fetch all possible environment variables with the help of typescript to guide your choice - and if you need, you can cast the value to some desired type:

![Test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t29ood28uu1ekr89gzr1.gif)

# Conclusion
That's all folks! If you liked that simple content, don't forget to comment and share with someone you might help. Also, that's my first attempt to write something in english: if you see something wrong, just message me on Twitter (@dotmendes).

# References
- [Typescript Handbook: Keyof](https://www.typescriptlang.org/docs/handbook/2/keyof-types.html)
The complete Full-Stack roadmap 2021 (with resources + based on experience)

Tags: react, javascript, webdev, node
Published: 2021-06-07 20:10:13

Hi,

This is a website I created for learning fullstack engineering in 2021. It's based completely in my experience and it's up-to-date with the current technologies. Also, It's organized and indexed by paths (topics). I hope you like it. Please share it and upvote the roadmap in ProductHunt 🌈❤🚀


[Website](http://superengineer.vercel.app)

[ProductHunt page ](https://www.producthunt.com/posts/super-engineer)
Building a Professionally Designed Website Episode 3 - Header & Footer, Hamburger Menu, Animating SVGs
Tags: react, css, javascript, tutorial
Published: 2021-06-07 19:51:12

### This is Part 3 in our deep-dive into how to develop a professionally designed, high-end NextJS + Payload CMS website from start to finish.

In this episode, we're diving deep into React. You'll learn how a design agency organizes its components and you'll start to see a lot of the CSS boilerplate that we defined in Episode 2 start being put to use. We're going to build and animate the Header, Footer, and Mega Menu—all in React and TypeScript.

{% youtube vSEcBiyNe8Y %}

### Table of Contents

- [0:00](https://www.youtube.com/watch?v=vSEcBiyNe8Y&t=0s)​ - Intro
- [3:33](https://www.youtube.com/watch?v=vSEcBiyNe8Y&t=213s) - The logo - an SVG React component
- [12:02](https://www.youtube.com/watch?v=vSEcBiyNe8Y&t=722s)- Animating the hamburger button
- [25:13](https://www.youtube.com/watch?v=vSEcBiyNe8Y&t=1513s)​ - Retrieving menu global data from Payload
- [32:27](https://www.youtube.com/watch?v=vSEcBiyNe8Y&t=1947s)- Building the main menu
- [38:48](https://www.youtube.com/watch?v=vSEcBiyNe8Y&t=2328s)- Building a CMSLink component
- [48:25](https://www.youtube.com/watch?v=vSEcBiyNe8Y&t=2905s)- The animated "Let's Talk" SVG call to action
- [55:35](https://www.youtube.com/watch?v=vSEcBiyNe8Y&t=3335s)- Building the Footer
- [1:14:06](https://www.youtube.com/watch?v=vSEcBiyNe8Y&t=4446s)- Outro

### Use Payload for free

Check out Payload for free, forever. The [Personal License](https://www.youtube.com/pricing) gives you everything Payload does, all for free. We think you'll find Payload's developer experience second to none. It just feels _right_ to build sites and apps with it.

### Feedback welcome

As always, let us know what you think about the video - and about Payload!
Use Floating Action Button in Flutter
Tags: flutter
Published: 2021-06-07 19:48:21

FloatingActionButton(FAB) is the widget to create a icon button that hovers over content to promote a quick action in a app screen.

![How FAB looks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgbob9hhpukrthhlk23x.png)

## Design guidance
One screen should have at most one single floating action button. If you want to have more than one quick action, you may consider [ExpandableFab](https://flutter.dev/docs/cookbook/effects/expandable-fab).

## Style
A normal FAB can be constructed via FloatingActionButton(…) and a FAB with stadium shape can be constructed via FloatingActionButton.expanded(…) as the example below. You can add text label to the expanded one.

## Location
The location of FAB is set on its parent Scaffold widget’s floatingActionButtonLocation property. If appBottomBar is used for a BottomNavigationBar, it can be set to one of the ‘docked’ location such as `floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked`
![Docked FAB](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9xkbcr9lgnexgjrr2if.png)
Refer [this](https://api.flutter.dev/flutter/material/FloatingActionButtonLocation-class.html) for more location details.

## Tips
If the FAB triggers an asynchronous action which may take a few seconds to process(such as login or getting device location), it would be good to have some animation to provide better user experience. I find using a variable ‘_isLoading’ to switch to a CircularProgressIndicator() provide a good feedback to user’s action. 
```
…
floatingActionButton: Visibility(
    visible: _isButtonVisible,
    child: _isLoading
        ? const CircularProgressIndicator()
        : FloatingActionButton(
            onPressed: () {
                setState(() {
                    _isLoading = true;
                });
                // some actions
            },
            child: const Icon(Icons.navigation),
            backgroundColor: Colors.green,
          ),
),
…
```




## Code example
```
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'FAB Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FAB AppBar Label'),
      ),
      body: const Center(
        child: Text('Center Text'),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          // Action of the button
        },
        label: const Text('Submit'),
        icon: const Icon(Icons.thumb_up),
        backgroundColor: Colors.green,
      ),
    );
  }
}


```
NIAGABET | HUBUNGI KAMI
Published: 2021-06-07 19:17:29

* Biolinky.co/niagabet
* linktr.ee/niagabet
* niagabet.mikz.com
* niagabet.tumblr.com
* lnky.in/niagabet
* heylink.me/niagabet
* twitter.com/niagabet
* pinterest.com/niagabet
* sites.google.com/view/niagabet
* sites.google.com/view/niagabetidnplay
🔎 Quem sou eu?
Tags: transicaodecarreira, carreira
Published: 2021-06-07 19:16:10

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etf3v2stjaczbkdimjtk.JPEG)
Em 2020, aos 32 anos, entrei de cabeça nos estudos e migrei pra área de tecnologia e nesse percurso posso dizer que: Aprendi a Aprender. Aprendi a me desafiar. Aprendi a confiar e acreditar que sou capaz de escolher o caminho que quero trilhar. 🏅

Tenho me especializado no desenvolvimento Front-End (HTML, CSS, JavaScript e suas bibliotecas/frameworks) e a inserção no mundo da tecnologia me trouxe um novo suspiro e reativou a motivação que eu precisava para inspirar e transformar a vida de outras pessoas através da minha experiência! 🚀

Gosto de me relacionar com pessoas e experiências prévias com atendimento ao cliente, análise de processos e resolução de conflitos, me ensinaram a valorizar as relações e a me apaixonar pela história das pessoas. Além disso, aprendi que as impressões que deixamos são únicas, por isso, por onde passo deixo um sorriso. Alegria é algo que se espalha em qualquer lugar. ☺️

As várias mudanças que passei — de países ou não — e a troca de experiências, me ensinaram a me adaptar a qualquer lugar. Abraçar o ambiente e o trabalho em equipe é um diferencial no ambiente institucional. Exercito sempre essa partilha, e acredito fortemente que quando você sai da sua “bolha de convívio” a sua perspectiva amplia 100x mais e você nunca volta ao mesmo lugar. 🌎

Assim, permaneço numa busca constante de oportunidades para me aperfeiçoar na área, assim como, incentivar a inclusão de mais mulheres na tecnologia 🖥️👩🏽‍💻 Também está nessa jornada? Me chama pra gente tomar um chimarrão e bater um papo! 📞

#transicaodecarreira #mulheresnati #tecnologiadainformacao  #carreiraprofissional