teleren/devto huggingface dataset:
Cultivate Curiosity
Tags: growth, curiosity, motivation, productivity
Published: 2021-03-30 11:49:04

---
title: Cultivate Curiosity
published: true
date: 2021-02-23 06:56:04 UTC
tags: growth,curiosity,motivation,productivity
canonical_url: https://x-team.com/blog/cultivate-curiosity/
---
Wednesday afternoon, the late 1990s. Together with my dad, I was walking to my grandparents to drink a bowl of soup. A question popped into my mind.

“Dad, why does my heart beat?”

My dad replied that hearts beat because that's how they pump blood through our bodies. Okay, I thought, but that raises another question. Unless you scrape your knee playing soccer, the blood is already in the body. Why does it need to be pumped around?

Apparently, to push oxygen and nutrients to the places that need it and remove certain types of waste that our bodies naturally produce. Okay, but how does the heart know what to send where and what to take away?

My dad didn't really know. He said that the human body is complex and even the best scientists still have many questions about it. All we know for sure is that it works remarkably well. I agreed with that and forgot my questions when grandma served me a bowl of steaming vegetable soup.

Children are naturally curious. They want to know why the world works the way it does. But somewhere in the process of growing up, we lose that curiosity. We stop wondering. Instead, we prefer those who don't ask strange or hard questions in favor of those who do.

And that's a shame. Without curiosity, we grow bored. The world seems monotonous, gray, and repetitive. We quickly forget how beautiful and remarkable everything actually is:

- Individual grains of sand are [jewels under a microscope](http://sandgrains.com/Sand-Grains-Gallery.html).
- There's a species of jellyfish that [can live forever](https://www.amnh.org/explore/news-blogs/on-exhibit-posts/the-immortal-jellyfish).
- Tears [change shape](https://www.smithsonianmag.com/science-nature/the-microscopic-structures-of-dried-human-tears-180947766/) based on the emotion you feel when you cry.
- There's a power plant in France that [produces electricity with cheese](https://www.zmescience.com/research/technology/power-cheese-53360/).

If you're stuck in a rut, pick a topic you find exciting and dig deep. Ask _why?_ every time you find an answer. You'll notice that curiosity has momentum. The deeper you dig, the more interesting it becomes. That's why X-Team advocates [going down rabbit holes](https://x-team.com/blog/x-summit-2019-going-down-a-rabbit-hole/). A curious person is an interesting person. Dive into your curiosity and you'll never be bored again.
Blog #1: Why did you decide to study Software Engineering?
Published: 2021-02-23 06:52:48

I decided to get into software engineering for a plethora of reasons. I am currently a part-time student at The University of North Carolina Greensboro, pursuing a bachelor's in Political Science. I would like to combine my two certifications to work for a political institution, a non-profit organization, or a think tank. Something that I have noticed is that there are many college graduates that are unable to find a job in their field after graduating. I hope by holding both degrees it will make me very appealing to the job market versus other fresh graduates. 

Another appealing aspect of software engineering is how broad it encompasses. It covers multiple industries such as nonprofit, health care, media, etc. There also seem to be many different types of fields available to explore through software engineering, such as creating webpages, debugging, and enhancing a company's network system. I like the idea of having so many options available to me.
React HoC vs Hooks vs Render Props in 2021
Tags: react, javascript, webdev, codequality
Published: 2021-02-23 06:48:03

Did React hooks took over or there is still room for the HoC and render prop patterns?
___

In 2021 React hooks are everywhere and many serious OSS projects are using functional components already.

During ReactEurope [Erik Rasmussen](https://twitter.com/erikras) did a good round-up of how things started with **HoCs**, went through their replacement — **render props** — and ended up today with **hooks**. It also compares several use cases.


{% youtube pn0pIgdQvhU %}

If I have to make my own conclusion it would sound like that:

> HoC, hooks and render props have their own use cases and none of them is a full replacement of the others. In some cases HoCs and components with a render prop my even make more sense.

A good example of the above is the [connect()](https://react-redux.js.org/api/connect) function from React Redux used to connect your component to the store. It does return a HoC.

```javascript
// This will return a HoC wrapper around MyComponent
connect()(MyComponent);
```

With the modern Redux you can get data and dispatch actions to the store directly using the `useSelector` and `useDispatch` hooks, so `connect()` is no longer required. **While it's true, this is one of these moments where I find the HoC pattern still useful for production apps**. The main reason is... testing. It's very easy to test a component in isolation via props.

```javascript
function MyComponent({
  name,           // own prop
  size,           // own prop
  count,          // redux store selector
  activateAction  // redux action
});
```
With the hooks your tests won't be that straightforward as [per some tradeoffs](https://blog.isquaredsoftware.com/2019/07/blogged-answers-thoughts-on-hooks/) but this is the recommended way to go in the React community.

**To wrap up:** Functional components and react hooks are our preferred way of working with React these days but [hooks are not always your silver bullet](https://webup.org/blog/render-props-vs-hooks). Collaboration, testing, reusability, and logic explicitness, should determine what is a better fit and not the mainstream.
___
5 Steps to Create Face Emotion Recognition Project
Published: 2021-02-23 06:30:01

1. Installing and importing the computer vision and the emotion recognition library

2. Setting up the emotion recognition application for CPU if the system don’t have GPU

3. Initializing the camera and start reading the frame from the camera

4. Passing the frame led by the camera into the emotion recognition library

5. Displaying the output frame which has the classes such as happy 😃 sad 😢 angry 😡 surprised 😱 and cry 😭
.


For more just visit at github.com/attaullahshafiq10
Dive into Live Coding
Tags: coding, livecoding
Published: 2021-02-23 06:28:53

One of my 2021 goals is to start live coding. There’s a few objectives I’d like to achieve by doing it:

- I want my coding sessions to be more focused activities. I think this might happen if I know somebody might potentially be watching me do it.
- I’ve found that my grasp of what I think I know is improved when I’m in the position to have to explain it.

There’s a few technical details I still need to research and/or workout. I may use this article as a reference document to catalogue my findings and strategies.

PS - Another 2021 goal is to write more. This Dev article was a toe in the water.
Some important HTML tags, one should know about
Tags: react, html, css, javascript
Published: 2021-02-23 06:15:17

There are some html tags which is which is lesser talked but has potential to reduce the developer headache.

# 1. Lazy loading the image 
Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.

Lazy loading can occur on different moments in the application, but it typically happens on some user interactions such as scrolling and navigation. 

`<img src = "image.jpeg" alt = "Image" loading="lazy" />`

This also works like magic with iframe and is supported in most of the browsers.

# 2. Picture tag
The HTML <picture> element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.

The browser will consider each child <source> element and choose the best match among them. If no matches are found—or the browser doesn't support the <picture> element—the URL of the <img> element's src attribute is selected. The selected image is then presented in the space occupied by the <img> element.

```
<picture>
    <source srcset="image800px.png"
            media="(min-width: 800px)">
    <img src="imagedefault.png" alt="" />
</picture>
```

This is supported by every browser except Internet Explorer.

#3 http-equiv= “refresh”

I just want to discuss a usecase for this 
Suppose when a user first comes to your website, and you want to show him some loading screen for few seconds to pre-fetch content for a better user experience. In this case it is very useful.

` <meta http-equiv="refresh" content="30; www.streamstyle.live">`

this will redirect to streamstyle after 30 sec

Instructions for content attribute:
  >The number of seconds until the page should be reloaded - only if the **content** attribute contains a positive integer.

  >The number of seconds until the page should redirect to another - only if the **content** attribute contains a positive integer followed by the string ';url=', and a valid URL.
 
# 4. Progress

The <progress> tag represents the completion progress of a task.

`<progress id="file" value="32" max="100"> 32% </progress>`

# 5. Datalist 
The HTML <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.

```
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>
```


#Conclusion 

I Think Html and css is very powerful, and these can be used to inject life in some good websites just by using these two. Despite of heavy usage in industry many people don't dive in deep.

Hope you enjoyed reading my article!
Type casting in Laravel
Tags: laravel, php, programming, webdev
Published: 2021-02-23 00:40:49

Casting a value means changing it to (or ensuring it is already) a particular type. Some types you might be familiar with are `Integer` or `Boolean`. 
Simply put, **type casting** is a method of changing an entity from one data type to another.

##Why should I care about type casting : ##
So, When you store numbers in database - they are returned as string by default. But type casting allows you to cast them as `integer`, `real`, `float` or `Boolean` you can convert `1` and `0` in your database to `true` and `false`
##Let's do it ...##
So in your model you can write : 
```
protected $casts =  [
    'status' => 'boolena',
]
```
It'll convert status(1,0) to `true` or `false`. so when you fetch any data from table it'll convert status column to true or false. you don't need to write any logic like this ...
```
if($post->status == "1"){
   // show status active 
}else{
   // show status inactive
}
```



## Array & JSON Casting ##
Additionally, if your table consist a column which stores serialized JSON string and you want that particular column to be automatically deserialize the attribute to a PHP array when you access it on your Eloquent model, you should use array cast. You can do it like this.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17du5z7nvf47f51objgf.png)

So, you can store JSON tags data into post table , but while fetching the posts you can convert it automatically into PHP array so now you can avoid creating tags table.

##Conclusion##

As you can see, Eloquent attribute casting has a ton of potential to free us up from unnecessary repetitive logic, and also sneakily makes it a lot easier to store data in JSON in our database. Good Stuff!
Some important HTML tags, one should know about
Tags: react, html, css, javascript
Published: 2021-02-23 06:09:57

There are some html tags which is which is lesser talked but has potential to reduce the developer headache.

# 1. Lazy loading the image 
Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.

Lazy loading can occur on different moments in the application, but it typically happens on some user interactions such as scrolling and navigation. 

`<img src = "image.jpeg" alt = "Image" loading="lazy" />`

This also works like magic with iframe and is supported in most of the browsers.

# 2. Picture tag
The HTML <picture> element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.

The browser will consider each child <source> element and choose the best match among them. If no matches are found—or the browser doesn't support the <picture> element—the URL of the <img> element's src attribute is selected. The selected image is then presented in the space occupied by the <img> element.

```
<picture>
    <source srcset="image800px.png"
            media="(min-width: 800px)">
    <img src="imagedefault.png" alt="" />
</picture>
```

This is supported by every browser except Internet Explorer.

#3 http-equiv= “refresh”

I just want to discuss a usecase for this 
Suppose when a user first comes to your website, and you want to show him some loading screen for few seconds to pre-fetch content for a better user experience. In this case it is very useful.

` <meta http-equiv="refresh" content="30; https://amankumarsingh01.github.io">`

this will redirect to streamstyle after 30 sec

Instructions for content attribute:
  >The number of seconds until the page should be reloaded - only if the **content** attribute contains a positive integer.

  >The number of seconds until the page should redirect to another - only if the **content** attribute contains a positive integer followed by the string ';url=', and a valid URL.
 
# 4. Progress

The <progress> tag represents the completion progress of a task.

`<progress id="file" value="32" max="100"> 32% </progress>`

# 5. Datalist 
The HTML <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.

```
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>
```


#Conclusion 

I Think Html and css is very powerful, and these can be used to inject life in some good websites just by using these two. Despite of heavy usage in industry many people don't dive in deep.

Hope you enjoyed reading my article!
RSpec: too much going on in `expect`
Tags: rspec, ruby, testing
Published: 2021-02-23 06:08:33

Sometimes you may see this in tests:
```ruby
expect(described_class.new(at: Time.new(2019, 7, 7, 9, 15)).to_human).to eq "9:15"
```

Line turns out to be too long, Rubocop detects style violation, developer "fixes" it:
```ruby
expect(
  described_class.new(at: Time.new(2019, 7, 7, 9, 15)).to_human
).to eq "9:00"
```

The symptoms are cured, but the disease remains: there is too much going on in `expect()`. Let's introduce some explaining variables:
```ruby
nine_in_the_morning = Time.new(2019, 7, 7, 9, 15)
alarm = described_class.new(at: nine_in_the_morning)

expect(alarm.to_human).to eq "9:15"
```


And if we remove the details that are irrelevant to the test - year, month and day - it gets even better:
```ruby
nine_in_the_morning = Time.now.change(hour: 9, min: 15)
alarm = described_class.new(at: nine_in_the_morning)

expect(alarm.to_human).to eq "9:15"
```
example.com ! What's that?
Tags: beginners, webdev, devrel, lesstan
Published: 2021-02-23 05:40:15

Certain domain names that like [example.com](https://www.example.com/), [example.org](http://example.org/) are provided by **IANA**(Internet Assigned Numbers Authority) for general documentation and research purposes.
As IANA says and I quote - "These domains may be used as illustrative examples in documents without prior coordination with us. They are not available for registration or transfer."
[More Info...](https://www.iana.org/domains/reserved#:~:text=Example%20domains,available%20for%20registration%20or%20transfer.)
Accessibility Audit
Published: 2021-02-22 22:42:37

Hey guys,

I am here to discuss with you guys about accessibility on the web. But why is it important the web should be accessible? 

It is important that the Web be accessible to everyone in order to provide equal access and equal opportunity to people with disabilities. People can have internet connection issues and many other reasons why the Web is not accessible, so this is why it is so important. 

For companies like Walmart, who is a very well known company by shopping in person, or by the web. It is essential their website is in the best shape to perform. 

I ran a Web audit on the website itself and here were my results on accessibility with a max of 100...

Performance: 23
Accessibility: 98
Best Practices: 73
SEO: 77

After analyzing the scores, it's obvious the performance is lacking but the accessibility is near perfect. I went into web.dev to investigate the reason why...

- Eliminate render-blocking resources
- Remove unused JavaScript
- Initial response time was short

So after discovering the issues behind the curtains of performance, it's safe to say that people with slower internet connection will have a frustrating time at browsing this specific website. 

But wait we aren't finished...

Next thing I did was to run a WAVE Audit. 

WAVE is a web accessibility evaluation tool developed by WebAIM.org. it provides visual feedback about the accessibility of your web content by injecting icons as you can see and also indicators in your page. 

No automated tool can tell you if your page is accessible, but WAVE facilitates human evaluation and educates about accessibility issues which is very neat and easy to use. 

Video:
https://youtu.be/Wgcrqa6_c3w
Insertion Order Iteration of Maps in Go
Tags: go, beginners
Published: 2024-05-29 22:28:13

---
title: Insertion Order Iteration of Maps in Go
published: true
date: 2021-02-23 00:00:00 UTC
tags: go, golang, beginners
canonical_url: https://nelson.cloud/insertion-order-iteration-of-maps-in-go/
---

In Go, map contents are randomized. Go doesn't care about insertion order. Elements in a map are always random when iterating through them.

To iterate through map contents in insertion order, we need to create a slice that keeps track of each key. Then we iterate through this slice and use its contents (which are the map keys) to access the map's values in the order in which they were inserted:

```go
package main

import "fmt"

func main() {
	m := make(map[string]int)
	m["a"] = 0
	m["b"] = 1
	m["c"] = 2
	m["d"] = 3
	m["e"] = 4
	m["f"] = 5

	// store map keys in a slice
	keys := []string{"a", "b", "c", "d", "e", "f"}

	// iterate through "keys" slice to get map values in insert order
	// the underscore is there because we wont be using the first value, which is the index of the slice
	for _, key := range keys {
		fmt.Println("Key:", key, "\t", "Value:", m[key])
	}
}
```

```
$ go run example.go

Key: a 	 Value: 0
Key: b 	 Value: 1
Key: c 	 Value: 2
Key: d 	 Value: 3
Key: e 	 Value: 4
Key: f 	 Value: 5
```

Now each key and value is printed in insertion order.


## Additional Notes

The following example shows how iterating through a map won't print out values in order even if assignment was done in a certain order:

```go
// example.go

package main

import "fmt"

func main() {
	m := make(map[string]int)

	m["a"] = 0
	m["b"] = 1
	m["c"] = 2
	m["d"] = 3
	m["e"] = 4
	m["f"] = 5

	// iterate through map and print each key, value
	for key, value := range m {
		fmt.Println("Key:", key, "\t", "Value:", value)
	}
}
```

And the output is:

```
$ go run example.go

Key: e 	 Value: 4
Key: f 	 Value: 5
Key: a 	 Value: 0
Key: b 	 Value: 1
Key: c 	 Value: 2
Key: d 	 Value: 3
```

Interestingly, printing a map without a loop prints elements in insertion order:

```go
// example.go

package main

import "fmt"

func main() {
	m := make(map[string]int)

	m["a"] = 0
	m["b"] = 1
	m["c"] = 2
	m["d"] = 3
	m["e"] = 4
	m["f"] = 5

	// print map directly
	fmt.Println(m)
}
```

```
$ go run example.go

map[a:0 b:1 c:2 d:3 e:4 f:5]
```
About Me
Tags: aboutme
Published: 2021-02-23 04:01:05

Hello, my name is Kyle and I am a student at the Flatiron School. Learning to code is a new journey for me. I decided to study software engineering to take my passion for computers further. I have always wanted to work with computers, seeing as I grew up playing video games and gaming is still a big hobby of mine. I have also always been intrigued by coding and programming and now I am finally getting to actually pursue that passion. I like problem solving and seeing as software engineers, we get to solve coding problems, that is a plus! This is a very exciting time and I cannot wait to learn more and start the journey of becoming a software engineer.
How I added block element to paragraph ?
Tags: html, css, beginners
Published: 2021-02-23 03:56:29

<strong>Introduction</strong>

If looking for how to add block element in paragraph then this post will definitely help you.
In this post I am going show you how you can exactly add block element in your paragraph.

If you want to check out ✔ my blog post <a href ="https://socialconsole.org/ ">click here </a>

As you can see below 👇 screenshot of my blog post that how looks block element in paragraph.
<img height="320" src="https://lh3.googleusercontent.com/MU9wG4U0jRPiLilyhlt3qKLcfm2Wxy7AcIAPWjweltgcM2EgQPdOqRHE8ZUUpYqr2dh2vLsGjuaq2PNcjJFyme8VNnll4IXr-RXeQX4rGQo5g6aE--CS843hxJcisNcHclZdW4WPgw=w2400" style="border-radius: 2px; border: 4px solid rgb(66, 135, 245); content-visibility: auto; display: inline-block;" width="306" />

Now Let’s move forward how you can exactly add block element in your paragraph of projects.
Below 👇 is examples of heading block element.


{% codepen https://codepen.io/DeepAI20/pen/ExNbYqN %}

Below 👇 examples of heading and paragraph block element. 

{% codepen https://codepen.io/DeepAI20/pen/oNYoNBq %}


As you can see above codepen projects that will give you overview how block element looks like. Also i changes background color.
**Read more**:<a href="https://dev.to/deepai/how-i-made-responsive-footer-footer-using-html-and-css-3fci"> Copyright responsive footer using HTML and CSS </a>

Hoping you understand this block element.  
Thank You ☺
Feynmann Diagram tool
Tags: physics
Published: 2021-02-23 03:13:50

---
title: Feynmann Diagram tool
published: true
description: I start to make a diagram edit tool, RDFeymann.
tags: physics
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58hhp9ldjp4oyu0aqnlf.png
---

Feynman Diagram is essential in Physics.
It makes it easy to calculation about particle interactions.
But, its weak point is drawing these diagrams.
Now, I start to make a diagram edit tool, RDFeymann.
You can use the tool in a web browser.
It is a work in progress.

https://github.com/KatagiriSo/RDFeynmann

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yqv99lxjaphogxdesxy.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gw5msh7rcua6s2qmjqbm.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58hhp9ldjp4oyu0aqnlf.png)