teleren/devto huggingface dataset:
Lunch break talks #2: Things I wish I knew when I was younger
Tags: techtalks, leadership, motivation, tips
Published: 2020-11-18 22:16:17

---
title: Lunch break talks #2: Things I wish I knew when I was younger
published: true
description: Six inspiring learnings shared by one of the best public speakers around 
tags: #techtalks #leadership #motivation #tips
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9i0a705otbeabj9b7vyx.jpeg
canonical_url: https://aurelio.me/blog/Lunch-break-talks-2-things-i-wish-i-knew/
---

> I like to watch talks during my lunch breaks, so I share some of the best ones I bump into, along with my notes.

There are at least 3 reasons why a talk from [Simon Sinek](https://en.wikipedia.org/wiki/Simon_Sinek) is pretty much always worth your time:

1. He picks simple yet clever and entertaining topics
2. He is a great motivator
3. He's one of the best public speakers around. 

See for yourself.

{% youtube p9gzGmyDJvc %}

## "See the bagel"

> Cafeteria tables, aligned next to each other and a long line of runners hoping to get a free bagel. So I said to my friend "Let's get a bagel".
> He looked at me and said "No man, the line is too long".
> And I looked at him and said: "It's a free bagel!"

- 2 ways you can see the world. You can see the thing you want, or you can see the thing standing in the way
- Focus on your goals, not on what's standing in the way
- If you focus on the end result, the obstacle is an opportunity for innovation

## Perspective matters

- Interpret nerves as excitement. Same symptoms (heart beat, sweat etc), totally different mindset
- Being nervous (negative) vs being excited (positive)

## Give yourself to your team members selflessly

- The highest performing teams on the planet are not the strongest, not the strongest, not the fastest. They are the ones that **give to each other selflessly**
- "You are here because someone took care of you and you have the responsibility to take care of others. This is the **core of leadership**".

## Listen first, speak last

- Be a great listener by allowing others to talk first
- Ensure they **feel listened**
- Great leaders don't start the conversation, they **end it**
- Practice to be the last to speak when you're part of a team

## Don't panic

- Don't panic, so people around you stay calm
- We confuse moments of happiness with fulfilment 
- Fulfilment is entirely different

## "We all deserve a styrofoam cup"

- [Hear the story](https://youtu.be/p9gzGmyDJvc?t=1258)
- Rewards and accolades are given not to you, but to the position you hold

![A styrofoam cup](https://dev-to-uploads.s3.amazonaws.com/i/8oxs762hzhrviwqnq3dl.jpg)

---

_Bagel image is by [Kreated Media](https://unsplash.com/@kreatedmedia)_
_Cup image is by [Marco Chilese](https://unsplash.com/@chmarco)_
Using Lo-Fi Music To Code and Get Stuff Done
Tags: productivity, lofimusic, programming, beginners
Published: 2020-11-18 22:06:12


2020 has been a crazy year huh? If you have been following me on my Instagram, you would know that my coding journey hasn't been all that great this year. As a matter of fact, it has kinda been at a standstill. Why? Well my brand new HP Envy x360 laptop that I bought in December 2019, crashed three times. Not one, not two, but three times. They finally sent me a replacement laptop that that had been refurbished with my original specs.

I haven't done much coding, but when I did do a little something something I listened to a genre of music called Lo-Fi and some Chillout music to help me get to work. I would describe Lo-Fi music as a jazzy form of Hip Hop with a smooth bent to it, and Chillout is a form of House music that you can literally chill too. Actually you can chill to both, focus, rest, or get work done while listening to them.

![Laptop sitting on bed with mug of coffee](https://dev-to-uploads.s3.amazonaws.com/i/pgjakrjdvb3tk147rcyy.jpg)

I have been using the following YouTube Channels, online radio stations, and playlists to stay focused and busy:
-   [Code Radio at FreeCodeCamp](https://coderadio.freecodecamp.org/)
-   [The Chillout Classics playlist on Spotify](https://open.spotify.com/playlist/37i9dQZF1DXcG4kXwIFULb)
-   [The nourish. channel on YouTube](https://www.youtube.com/c/nourish/featured)

Code Radio by FreeCodeCamp has a great selection of Lo-Fi music to keep you focused. The Chillout Classics playlist on Spotify helps me get stuff done with all of my fave 90s Chillout House tracks. The nourish. channel is the best because you can find all types of calm and soothing music on there. They have a great selection of Lo-Fi music too. If you are looking for more meditative tracks, check out this post on my other blog [The Fat and Skinny on Fashion](https://www.thefatandskinnyonfashion.com/finding-calm-in-difficult-times-with-binaural-beats/).

Stock photos are from [Unsplash](https://unsplash.com).
I Used GitHub's Profile README Feature
Tags: github, readme, opensource, tutorial
Published: 2020-11-18 22:00:33

GitHub has a new profile README feature that lets you put a README file at the top of your profile so users can see information about you like a mini bio, portfolio space, contact me page, or anything you want. The reason I said that is was "secret" is because it is a secret feature that has been blogged and written about all over social media now, so the cat is kinda out of the bag. 

![GitHub README Generator](https://dev-to-uploads.s3.amazonaws.com/i/c5yoggsxtqxxagboy3zc.jpg)

I first started seeing web development website [Dev.to](https://dev.to/) talking about it on Twitter. Then I saw [Monica Powell](https://www.aboutmonica.com/blog/how-to-create-a-github-profile-readme) tweet her blog post about the new feature. After going through her post and a bunch of Dev.to articles, I saw a GitHub Profile README Generator from [Rahul Jain](https://dev.to/rahuldkjain/github-profile-readme-generator-with-addons-like-visitors-count-github-stats-etc-44bg). 

It was simple and easy to use. I really recommend it. If you are looking to try it, use his [generator](https://rahuldkjain.github.io/gh-profile-readme-generator/). You can also look at [Monica's site](https://rahuldkjain.github.io/gh-profile-readme-generator/) for step by step instructions on how to add it to your GitHub repository as well as see examples from other developers.

![GitHub README Generator](https://dev-to-uploads.s3.amazonaws.com/i/m4kekfv86ctdh0bxl556.jpg)
Your First Step to Resolve Gatsby Dependency Issues
Tags: gatsby, javascript, npm
Published: 2020-11-18 21:59:21

I just ran into an issue where my dependencies broke my Gatsby project. 

I knew I hadn't done anything to break it, so I followed the steps below in order to bring my project back to life.

### Follow These Steps

1. Remove package-lock.json and/or yarn.lock
2. Issue terminal command $ gatsby clean
3. Remove node_modules folder
4. Install the dependencies again with your package manager of choice, either npm or yarn.
5. Issue terminal command $ gatsby develop

If the dependencies were the issue, your error message should now be gone. 

I hope these simple steps help you as much as they have helped me!
I finally understand TypeScript `outDir`, `include`, `exclude` configuration properties...
Tags: typescript, config
Published: 2020-11-18 21:45:41

It took me a while to understand the behavior behind these TypeScript properties and that was driving me nuts at times. Every time I start a new project I forget what they are because you don't use them often, just when you set up your project scaffold. So that's why I write this small post, to remember.

Let's use this base for our examples
```
.
├── node_modules
├── src
│   ├── main.ts
│   └── test
│       └── a.ts
└── test
```

### outDir

`outDir` is default to each individual file location. So for instance the compiler will output the file `src/test/a.ts` as `src/test/a.js`, quite simple.
<b>It's important to understand that not using `outDir` or using `"./"` as its value is not the same thing !</b>

### include

`include` is default to `["**/*"]` which translates to *compile every `ts` files encountered recursively from the root (defined by the `rootDir` property)*.

Now here's the tricky part, when you don't use `outDir` the interpreter uses the full paths, so for instance the file `src/test/a.ts` (matched by `src/**/*`) will go in the same absolute path matched by `src/**/*` (therefore `src/test/a.js`).

But when you use `outDir` **the wildcards are what is really interpreted by the compiler**, so for instance when you use `"outDir": "./"` the file `src/test/a.ts` will go in the location matched by the **wildcards** in the expression `src/**/*` therefore prepended outDir `./` plus `test/a.ts` (not `src/test/a.ts` !), `src` here is not part of the match, it's just a reference to find the files.

### exclude

Now you may ask, if the root is my project why won't `ts` files in `node_modules` get compiled as well ? The reason is because the default value of `exclude` is `node_modules`.

# one example

If you want your compilation to have this final structure :

```
.
├── main.js
├── node_modules
├── src
│   ├── main.ts
│   └── test
│       └── a.ts
└── test
    └── a.js
```

you would use `tsconfig.json` like that 

```json
{
  "compilerOptions": {
    "outDir": "./"
  },
  "include": [ "src/**/*" ],
  "exclude": []
}
```
| HTML | HTML: The Next Steps and Semantics
Tags: javascript, html, css, webdev
Published: 2020-11-18 21:33:35

---
title: | HTML | HTML: The Next Steps and Semantics
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---
The focus of this post was to include new information from Colt Steele Web Developer Bootcamp Updated Version.  
HTML: Next Steps and Semantics 
           

              -What Exactly is HTML5?
              -Block vs. Inline Elements - Divs and Spans
              -Odd Elements: HR, BR
              -Entity Codes
              -Intro to Semantic Markup 
              -Playing with Semantic Elements-
              

###What Exactly is HTML5?
HTML5 is the standard that defines HTML. HTML is basically a set of instructions for how HTML should work. 

###Block vs. Inline Elements - divs and Spans
Inline elements fit in alongside other elements 
Block level elements take up a whole "block" of space. 

divs are block level elements that function like a container 
spans are inline elements that do not take up their own block of content 


###Odd Elements: HR, BR
hr - is a horizontal ruler it functions like a divider
br - is a line break in the content


###Entity Codes
HTML Entities start with ampersand and end with a semicolon &code; 
The entities are used to display reserved characters, that normally would be invalid. 
They are also used in place of difficulty to type characters. 
The browser interprets them and renders the correct character instead. 

###Intro to Semantic Markup 
Semantic Markup makes your code more tolerable, friendly to other applications such as screen readers. Semantics help explain what the code is and what it is suppose to be used for. 

###Playing with Semantic Elements
Instead of always using divs to organize the content on a web page it is important to replace the divs with semantic markup. 

-section -represents standalone which doesn't have a more specific semantic element to represent it contained with an HTML document. Typically, but not always sections have a heading. 


-article represents a self-contained composition in a document, pages or sites which is intended t-o be independently distributed or reusable. An example would be a form post, magazine or newspaper article and blog entry. 



-nav -represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common uses of nav is menus, tables, and indexes 

-main -used for dominant content of the <body> of a document. Main content are consist of content that is directly related to or expands upon the central topic of a document or the central functionality of an application.
Content that is repeated across a set of documents sections such as sidebars, navigation links, copyright information, site logos, and search forms. 
 

-aside -represents a portion of a document whose content is only indirectly related to the documents main content. Asides are frequently presented as sidebars or call-out boxes.
Ignore react-router's basename
Published: 2020-11-18 20:54:46

Suppose we have a routing tree like such in our `notifications` service

```jsx
<HashRouter>
  <Switch>
    <Route path='/notifications/dashboard' component={A} />
    <Route path='/notifications/:id' component={A} />
    ...
```

If every path in this particular service contains `notifications`, it might be tempting to simply add a basename prop to HashRouter.

```jsx
<HashRouter basename='notifications'>
```

This does make it really convenient when we have a link to a page in the same service. Instead of

```jsx
<Link to='/notifications/dashboard' />
```

We can do

```jsx
<Link to='/dashboard' />
```

The fundamental flaw with `basename` is its totality. There is no way to escape its effects (at least with `react-router-dom` components).

Say we want to direct the user out of the notification service with a URL, there is no way to do so with `Link`

```jsx
<Link to='/tasks/123' />
// yields <a href="/notifications/tasks/123" />
```

This is also a hindrance to a Redirect
```jsx
<Route path="/dashboard" 
  render={() => hasPermissions ? <Dashboard /> : <Redirect to="/403" 
/>
// redirects to "/notifications/403"
```

One should therefore proceed cautiously (probably never in the microservice case) with `basename`. As the documenation notes:

> The base URL for all locations. If your app is served from a sub-directory on your server, you’ll want to set this to the sub-directory

Alternatively, we can nest routes like so
```jsx
<Route path="/notifications"
  render={({match: {url} }) => (
    <>
      <Route path={`${url}/dashboard`} component={Dashboard}
```

But soon with react-router v6 [nested routes will just work](https://reacttraining.com/blog/react-router-v6-pre/#introducing-routes)

```jsx
<Route path="users" element={<Users />}>
  <Route path="/" element={<UsersIndex />} />
  <Route path=":id" element={<UserProfile />} />
```
Demystifying Architecture with David Whitney
Tags: discuss, podcast
Published: 2020-11-18 20:54:25

---
title: Demystifying Architecture with David Whitney
published: true
description: A preview of this week's episode of DevDicsuss, plus some easy listening links
tags: discuss, podcast
series: DevDiscuss Season 3
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/lkda09di7zjotra5ranv.png
---

> **Listen to S3E2 here on DEV:**

{% podcast https://dev.to/devdiscuss/s3-e2-demystifying-architecture %}

This week, @Jess and I chatted about **software architecture**, its problematic reputation as being esoteric and only for the highly experienced developer to understand — and the right way to think and talk about it. 

Our guest on this episode was [David Whitney](https://dev.to/david_whitney), an independent software consultant at Electric Head Software and bestselling author. David is currently working on his _third_ book, which is about programming as it relates to philosophy and ethics.

David also authored this post back in April about the very subject of this week's episode. Don't miss it!

{% link https://dev.to/david_whitney/architecture-for-everyone-1b0h %}

---

_You can [follow DevDiscuss](dev.to/devdiscuss) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## Quick Listening Links
- [Apple Podcasts](https://podcasts.apple.com/podcast/id1513053883)
- [Spotify](https://open.spotify.com/episode/4gLbGzZUfwz19s3FKTQfJm)
- [Google](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5kZXZwb2RzLmRldi9kZXZkaXNjdXNzX3BvZGNhc3QueG1s/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZkaXNjdXNzLzE5?sa=X&ved=0CAQQkfYCahcKEwjgvaXu64ztAhUAAAAAHQAAAAAQAw)
- [Listen Notes](https://www.listennotes.com/podcasts/devdiscuss/s3e2-demystifying-architecture-akSsr-YzdXN/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevDiscuss-p1324596/?topicId=158840886)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [Transcript](https://devpods.herokuapp.com/podcasts/devdiscuss/episodes/65)
- [Pocket Casts](https://pca.st/i7czmkwt)

---
_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- Our season three sponsors, [Triplebyte](https://triplebyte.com/a/YU8fSn0/d) and [Rudderstack](https://rudderstack.com/)!

# 🗣️🗣️🗣️
In Chess and Code, Move Past the Shiny
Tags: codenewbie, beginners, chess
Published: 2020-11-18 20:36:29

> TLDR: Stressing over tools and languages isn't useful for the new coder. Beginners should focus on learning reusable concepts like iteration, logic, and data structures.

Queen's Gambit is a great show on Netflix that has been exploding chess' popularity. I love it! But!... one scene in the first episode frustrated me. Right after the first few games, Beth's chess friend tells her to learn the Sicilian opening and gives her a book of chess openings!

That doesn't deter her genius play, but it wouldn't work for most beginning chess players. Beginners need to study tactics, not openings.

## The shiny

In chess, openings are the shiny objects. They have attractive names like Sicilian Dragon, the Spanish game, or the Caro-Kann defense. People will go passionately instruct you to learn one or the other to win. They'll call other openings "boring" or "lazy" or not for "real players".

Sound familiar?

**The same thing happens to beginner programmers.**

New coders jump into a bewildering landscape of languages and code tools. "Should I learn Ruby or React?" "Should I start with one kubernet?" "Is JavaScript the same as Java?"

Without context, it's overwhelming. There's a ton of literature and a lot of it is actually quite entertaining. People pick fights constantly on Twitter to push their favorite tool or language.

But these are the shiny objects of programming.

## Move past the shiny

I once heard a chess coach say that they teach new players two openings, one for white and one for black. Then players do tactics. Why? Because you're going to spend most of your game either trying to cause or defend against tactics. The openings are _just enough_ to get a player safely to the middlegame, where tactics and strategy are more important.

For new coders, I say **move past the shiny**.

Learn enough of a language to get started, then move on to problems and projects. Follow a tutorial and make changes to it. Do problems on a site like [Exercism](exercism.io/).

The core concepts for beginning programmers are:

1. Logic, like if/else conditionals
2. Iteration, like loops
3. Data structures

Get enough knowledge to get to the core concepts and you'll find that the language itself doesn't matter as much. Many in the industry switch languages multiple times a day, and that's because their foundation in the core concepts is solid.

If you liked this, find me [on Twitter](https://twitter.com/CamAsMetaphor) I'd love to chat about it. Also you can always challenge me to a game of correspondence chess [on Lichess](https://lichess.org/@/zerocamilo) or on [Chess.com](https://www.chess.com/member/zerocamilo)!
Picking up Ruby, as a Python Dev & interview questions
Tags: ruby, python, codenewbie
Published: 2020-11-18 20:11:17

*This is a continuation of Picking up Ruby Fast, as a Python Dev. Again, expect examples with no math and no crappy names*

---

## Variable Assignment in an `if` statement
In Ruby, you can assign variables in an `if` statement. This can't be done in Python. Not sure why I'd ever want to do this, but now I know that I can. Seems like it would be a bad idea.

```ruby
#ruby
if cat_age = 12
  puts "The cat is #{cat_age}"
else
  puts "The cat is not #{cat_age}"
end
```
## Decisions with `if`
Making decisions with `if` in Python is pretty much always the same. It seems there are several options in Ruby.

```python
#python
cat_age = 12
dog_age = 5

if cat_age > dog_age:
    print("Cat is older than dog")
else:
    print("Dog is older than Cat")
```

```ruby
#ruby
cat_age = 12
dog_age = 5

# option 1
if cat_age > dog_age
  puts "Cat is older than dog"
elsif 
  puts "Dog is older than cat"
end

# option 2
puts "Cat is older than dog" if cat_age > dog_age
puts "Dog is older than cat" if dog_age > cat_age
```

## Checking for Empty String

There are plenty of different ways to do the same thing. Yet,  Ruby's `empty?` method is really intriguing me more than it should. It just makes so much sense. In Python, you'd typically just compare things with the `not` operator.

```python
#python
username = "Vicki"

if not username.strip():
    print('empty String: please enter a username')
else:
    print("not empty: success")
```

```ruby
#ruby
username = "Vicki"

  if username.to_s.empty?
  	puts "empty String: please enter a username"
  elsif
    puts "not empty: success"
```

## A Few More Quick Points of Difference

| Ruby        | Python           |
| --------- |-------------|
|  `&&` |  `and` |
| `end` | not 4 spaces or tabbed in |
| Can use some characters in nameing. like `meal_time?` | Only underscores like `is_it_meal_time` |

## Interview Questions to Ask the interviewer(s)

Not sure if you caught this, but I'm learning Ruby for the sole purpose of a potential job. So, I'm working on some questions to ask the interviewer(s). Here's kinda what I plan to ask:

 - Did I answer all of your questions?
 - Ruby is new to me and I've heard it's expressive. How does that help the job?
 - Did anything change at the start of the pandemic?
 - Is there anything I've said that makes you doubt I would be a great fit for this position?
 - Do you have any unpaid interns or fellows?

And, I was gonna ask something like:
 - How would you score the company on current DEI initiatives

but I got a better suggestion from @robocel
{% twitter 1328450134150098944 %}

If you have any suggestions on what to ask, I'd love to hear them. I'm super excited about this potential job and hoping they'll know I am very very willing and capable of learning.

---
If you missed the first post in this series, I've heard it's a good read and there's cats.
{% post https://dev.to/vickilanger/python-to-ruby-1hc2 %}