teleren/devto huggingface dataset:
Project 17 of 100 - React Child Generator
Tags: javascript, react, 100daysofcode
Published: 2020-12-02 17:33:11

*Hey! I'm on a mission to make 100 React.js projects in 100 days starting October 31, 2020 and ending February 7th, 2021. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to today's deployed app: [link](https://100-react-projects-day-17-children.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-17-react-children)

I've been quite sick for the last week and a half, hence my gap in projects for my 100 days 100 projects campaign. 

Yesterday was my first day feeling back to almost normal so I made a goofy little React app dedicated to exploring the concept of children in React.

##props.children
Now, the idea with children is that any number of JSX elements can be given as the inner HTML within another JSX element. Simply make sure you use `{props.children}` within the Component, like so:

```
function MyComponent(props) {
  return (
    <div>
      <p>My little component here...</p>
    </div>
  )
}

function App() {
  return (
    <MyComponent>
      <h2>A little jsx element</h2>
      <h2>Another little jsx element</h2>
    </MyComponent>
  )
}
```

Now all we need to do to to make sure the new JSX is included within the `MyComponent` element is elicit `props.children` like so:

```
function MyComponent(props) {
  return (
    <div>
      <p>My little component here...</p>
      {props.children}
    </div>
  )
}
```

##Application
For my application I had a form where users could prototype a new shape. When the user is happy with the shape they submit the form and the shape is added to an array of child components.

We do this by using `{props.children}` within the `CreatedElContainer` component. We can pass as many child elements as we want to the component! And in any configuration.

I can't understate how useful it is to be able to pass any number of custom child elements to a custom component. This allows us to re-use components as many times as we want and still fill them with unique elements. Pretty cool!

That's it for today's project. See you tomorrow.
#7 DevOps Diary: DevSecOps and how to make the best of learning DevOps in 2021
Tags: devops, newsletter, devsecops, exam
Published: 2020-12-02 17:32:05

Hey everyone, I hope you have/are having a lovely day and Welcome to week 7 🥳

For the better or worse, we have reached December and the year is soon going to be over. What are your goals in the last month? Maybe reaching some last-minute yearly goals of 2020? 

Let me give you some inspiration in this week's newsletter for next year.

## Inspiration: DevOps 2021, something to look forward to 🎉

1. Make a list of conferences that you would like to attend (most of them are likely online or hybrid for most of 2021)
2. Join me in #100DaysOfKubernetes
3. What is something that you always wanted to learn and were never able to take the time for? Maybe the resources in this newsletter provide some inspiration
4. Collaborate with other amazing people in the space; whether on blog posts or videos — I tried and about half of the folks I contacted were quite excited about the idea 🙌🏽

## Videos 🎥

- The [cd Foundation](https://twitter.com/CDeliveryFdn) has an amazing [webinar series](https://www.youtube.com/playlist?list=PL2KXbZ9-EY9RodTXtnbAg42gvuLDvyFtb) going on that provide interesting insights into tools, best practices, and more
- Get started learning more about security with this [introduction to Snyk](https://youtu.be/iri7Nv0k13g)

## Blog Posts (and other written content)🗞️

Staying with the topic on security,

- [Snyk](https://twitter.com/snyksec) also has a great [learning hub to get started with DevSecOps](https://snyk.io/devsecops/) and a comprehensive list of [security-focused resources](https://snyk.io/security-resources/)
- IBM's [X-Force Threat Intelligence Research Hub](https://www.ibm.com/security/xforce/research-hub?_lrsc=adf77b8c-1f49-430d-9edc-b3db664df4d2) with tons of research papers
- Found on Reddit, [DevSecOps University](https://www.practical-devsecops.com/devsecops-university/) has a comprehensive list of resources to get started with — however, the more advanced content is highly focused on AWS. I highly enjoyed this [Cloud Security Architecture](https://youtu.be/4TxvqZFMaoA) Workshop by [Dave Shackleford](https://twitter.com/daveshackleford)
- Monthly ["Getting into DevOps" thread](https://www.reddit.com/r/devops/comments/k4v7s0/monthly_getting_into_devops_thread_202012/) on Reddit
- And lastly some [tips on how to evaluate Kubernetes monitoring solutions](https://sysdig.com/blog/kubernetes-monitoring-best-practices/)

## [View the full newsletter on my Blog](https://blog.anaisurl.com/7-devops-diary/)
Interviewcake - HiCal Solution in Golang
Tags: go, quiz
Published: 2020-12-02 17:30:52

Your company built an in-house calendar tool called HiCal. You want to add a feature to see the times in a day when everyone is available.

To do this, you’ll need to know when any team is having a meeting. In HiCal, a meeting is stored as an object of a Meeting class with integer variables startTime and endTime. These integers represent the number of 30-minute blocks past 9:00am.

## Breakdown
What if we only had two ranges? Let's take:
```java
  [Meeting(1, 3), Meeting(2, 4)]
```
These meetings clearly overlap, so we should merge them to give:
```java
  [Meeting(1, 4)]
```
But how did we know that these meetings overlap?

We could tell the meetings overlapped because the end time of the first one was after the start time of the second one! But our ideas of "first" and "second" are important here—this only works after we ensure that we treat the meeting that starts earlier as the "first" one.

How would we formalize this as an algorithm? Be sure to consider these edge cases:

The end time of the first meeting and the start time of the second meeting are equal. For example: `[Meeting(1, 2), Meeting(2, 3)]`
The second meeting ends before the first meeting ends. For example: ``[Meeting(1, 5), Meeting(2, 3)]``

Here is my solution in Go

{% gist 
https://gist.github.com/Mawulijo/8d45720b8ed3cd495f48b65e471fa8a5
%}
Quest To Get Out of the Google Trap, pt 1
Tags: productivity, privacy
Published: 2020-12-02 17:18:06

---
title: Quest To Get Out of the Google Trap, pt 1
published: true
description: 
tags: productivity, privacy
cover_image: https://www.commondreams.org/sites/default/files/styles/cd_large/public/headlines/google-logo-devil.jpg?itok=ELoUPwRD
---

I'm working to get some of my life out of the Google Trap. I'm starting with email. It seems like there are the most choices.

There's protonmail.com. I have a subscription already and I like the privacy-first approach, but am not happy with the small storage size. It's a 5 gig limit, and I'm paying like $120/yr. You can only get that up to about 50 gigs. The only solution to this cap is to download photos and upload them elsewhere, which is maybe tedious, but also maybe will help me be more thoughtful. I am excited by their forthcoming protondrive.

Right now, I'm experimenting with hey.com email. I like that larger storage size and some of their workflow features. Some of it is new enough that I'm not sure what I think.

Has anyone used either of these or another smaller, privacy-first email provider that they like and recommend?
AzureFunBytes New Episode - 12/3/2020 - @Azure Migrate with @LBugnion
Tags: azure, beginners, tutorial, migrations
Published: 2020-12-02 17:16:14

New #AzureFunBytes - 12/3/2020 2 PM EST / 11 AM PST / 8 PM CST

Not all applications are born in the cloud, some are both in datacenters across the globe.  Moving them into the cloud should be something that excites you rather than looks like a challenge.  This time, [Laurent Bungion](https://twitter.com/LBugnion) joins me on AzureFunBytes at 2 PM EST to discuss how to begin your migration journey into Azure.

We'll chat about "Why" we migrate, "how" we migrate, and "when" to execute your migration plan.

Learn about Azure fundamentals with me! [Microsoft LearnTV!](https://docs.microsoft.com/learn/tv/?WT.mc_id=devops-10835-jagord) The most interactive way to join the show!

{% youtube YWnvcKcs7Qk %}

Live stream is available on Twitch at 2 pm EST Thursday. You can also find the recordings here as well:

https://twitch.tv/azurefunbytes
https://twitter.com/azurefunbytes
https://aka.ms/jaygordonontwitter

Join me, ask questions, and learn about Azure!

[Microsoft Learn: Azure Fundamentals](https://docs.microsoft.com/en-us/learn/paths/azure-fundamentals/?WT.mc_id=blog-devto-jagord)
[Microsoft Azure: $200 Free Credit](https://azure.microsoft.com/free/?WT.mc_id=devops-11037-jagord)
[Azure Migrate](https://azure.microsoft.com/services/azure-migrate/?WT.mc_id=devops-11037-jagord)
[Migrate to the Cloud with Azure Migrate](https://azure.microsoft.com/resources/migrate-to-the-cloud-with-azure-migrate/?WT.mc_id=devops-11037-jagord)
[Azure Migrate Learning Path](https://docs.microsoft.com/learn/paths/m365-azure-migrate-virtual-machine/?WT.mc_id=devops-11037-jagord)
[Azure Migrate Documentation](https://docs.microsoft.com/azure/migrate/?WT.mc_id=devops-11037-jagord)
Thoughts on Spotify's #2020wrapped
Tags: spotify, dataanalytics, 2020, opinion
Published: 2020-12-02 17:03:10

Spotify's year wrapped configuration really grabbed my attention this year. It has in previous years as well, but I felt that this year they took the analytics further. What Spotify's year review does is measure all of your streaming data and portrays it in a short video of your years most listened to music for the year. What I love about this is that not only does it give a person a summation of what their year in music looked like, it gives them their own personal video of their choices in an interesting, quippy and poignant way. I loved that they show how many genres the user listened to and what percentile they were in within the artists total number fans or particular song streams. The data analytics team on Spotify definitely gets an award this year for most unique analysis. 

I'm curious who else will pick up traits like this. Netflix? Do we really want to see who streamed the most hours of Great British Bake Show though?  Maybe...not.

In a similar vein, look at how Spotify is using the users personal data and decorating it with a bow to show them how their data can be portrayed in a fun and poppy way back to a millennials main focus - themselves. Who doesn't love to hear about themselves though? More so, how many people don't really understand what data is being taken from them and what that data is being used for? Let's normalize this data grabbing so that it paints a picture that says - "your data is used in this way so now that you see it in fun colors, don't be so afraid of us taking it from you." -- A slippery slope, friends.

On a high note, this really was something that was a bright spot in my day seeing as I've mentally accepted that my data is being stored everywhere a while ago. I love seeing the history of my listening in a compact fun way and I love being embarrassed that I listen to mostly pop music every year. But! I listened to 304 new genres this year also so - back to it. 

What are your thoughts? Drop a comment below :)
10 Javascript Map Example
Tags: javascript, webdev, beginners, css
Published: 2020-12-02 16:47:55

---
title: 10 Javascript Map Example
published: true
tags: #javascript #webdev #beginners #css
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eow15yi9n78c4zualmzr.png)
<B>If You Like This Article then check Out more Example [gscode.in]</B><b> 
15+ Javascript Map Example</b>
https://gscode.in/javascript-map/

<p>1.Images can animate along lines - even if they are curved. All this demo is made using JavaScript map from amCharts config only - no scripting required! Original demo: <a href="https://www.amcharts.com/demos/animations-along-lines/" target="_blank">https://www.amcharts.com/demos/animations-along-lines/</a></p>

{% codepen https://codepen.io/team/amcharts/pen/pjvawE %}

<p>2.One GeoAdmin map provided by api3.geo.admin.ch. Spy it !</p>

{% codepen https://codepen.io/cedricmoullet/pen/GwLIj %}

<p>3.US State Map in TopoJSON, rendered with D3.js</p>

{% codepen https://codepen.io/girliemac/pen/kGKLh %}

<p>4.My experiment building a responsive inline SVG map of the United States (USA) with SASS and limited use of jQuery.</p>

{% codepen https://codepen.io/thomasjwicker/pen/cibur %}

<p>5.Inspired by mashape.com</p>

{% codepen https://codepen.io/DonSinDRom/pen/nHLfD %}

<B>If You Like This Article then check Out more Example [gscode.in]</B>
<b> 15+ Javascript Map Example</b>
https://gscode.in/javascript-map/

6.
{% codepen https://codepen.io/onelegged/pen/yyYpKy %}

<p>7.This interactive map is built without any scripting at all. It was built originally for MTi Group's <a href="http://mtigroup.com.au/distribution">new site</a>. It has been adapted slightly for this demo. The SASS is a little messy as a result of the hasty port - it was once part of a much larger file.</p>

<p>Thanks a bunch for the featured post!! ♥</p>

{% codepen https://codepen.io/mirichan/pen/jEBmyG %}

<p>8.I used NetworkX for JS to calculate the degree and centrality of all Metro and Bus stops in Los Angeles. </p>

<p>Size of the node represents degrees.
Color scale represents centrality. </p>

<p>Degrees and centrality are calculated from the network representation of the system here: 
<a href="http://codepen.io/stevepepple/pen/dPzGGO" target="_blank">http://codepen.io/stevepepple/pen/dPzGGO</a></p>

{% codepen https://codepen.io/stevepepple/pen/NPvxVZ %}

9.
{% codepen https://codepen.io/nicholaspetersen/pen/NPejZZ %}

<p>10.SVG animation path using tween.js for The100DayProject. Tutorial by LegoMushroom. Illustrator file from Freepik.com.</p>

{% codepen https://codepen.io/SwissWebMiss/pen/qEzRde %}

<B>If You Like This Article then check Out more Example [gscode.in]</B><b> 
15+ Javascript Map Example</b>
https://gscode.in/javascript-map/
Ruby on Rails Pessimistic Locking
Tags: rails, ruby, lock
Published: 2020-12-02 16:44:48

Let's say we have two users and we want to create a money transfer between these users, but we have to make sure that if there is an error in any of the steps, the execution will be canceled and other transactions will only be executed when the current transaction ends, this is also known as Race Condition.

To solve this problem or similar problems, there is a technique in Rails called Pessimistic Lock or Pessimistic Strategy, it provides a row-level locking in SQL like `SELECT … FOR UPDATE` and others and it uses ActiveRecord Transactions. Let's take a look at this code:

```ruby
def transfer_money_from_user_to_user(user1, user2)
  # Charge 200 from the user1...
  user1.balance(-=200)
  user1.save! # Callbacks and other things...
  # and pay the user2
  user2.balance(+=200)
  user2.save! # Callbacks and other things...
end
```

If for some reason, the first transaction (charge from user1) fails, it will not prevent the second one to be executed. We have two ways to prevent this using Rails, lock! and with_lock, let's take a look:

## Lock!

Using Transactions and lock! we could do something like:

```ruby
def transfer_money_from_user_to_user(user1, user2)
  # Initialize an ActiveRecord Transaction
  ActiveRecord::Base.transaction do
    # Lock the users
    user1.lock!
    user2.lock!
    # Charge 200 from the user1...
    user1.balance(-=200)
    user1.save!

    # Pay the user2
    user2.balance(+=200)
    user2.save!
  end
end
```

## With_lock

With_lock simplifies our code and creates a transaction wrapper:

```ruby
def transfer_money_from_user_to_user(user1, user2)
  user1.with_lock do
    # Charge 200 from the user1...
    user1.balance(-=200)
    user1.save!

    # Pay the user2
    user2.balance(+=200)
    user.save!
  end
end
```

That's it. Using Pessimistic Locking inside Rails is a good way to prevent these kind of failures. See you!
how to run storage:link in shared hosting
Tags: php, laravel
Published: 2020-12-02 16:40:54

In shared hosting, if you don't have ssh access there is one way to run the artisan command is using `Artisan` Facade but wait `Artisan::call('storage:link')` throws an error

We are going to solve this issue,  add this code to web.php within a route or to any controller
```
use Illuminate\Support\Facades\File;

File::link(storage_path('app/public'), public_path('storage'));
```
FlowState. A new fitness, health and wellbeing Forem
Tags: forem, showdev, wellbeing, fitness
Published: 2020-12-02 16:20:09

Hey there!

Just wanted to give you a heads up on a new Forem for fitness, health and wellbeing - feel free to join and share.

FlowState is a community of amazing health, fitness and wellbeing enthusiasts that love to enter their FlowState and share it with others.

Branding aside, this was set up within 2 hours. Forem is shaping up to be a game-changer 🚀

👇🏼
## **[flowstate.to](https://www.flowstate.to)**
The Value of Attention
Published: 2020-12-02 16:00:57

---
title: The Value of Attention
published: true
description: Philosophy of attention as currency
tags: 
cover_image: https://images.unsplash.com/photo-1598561222812-63429c3eee2f
---

# You Won the Lottery!

Each day we win the attention lottery. We're each gifted with 24 glorious hours to spend our attention how we choose. This conscious attention, I would argue, is the most valuable currency in the known universe. What an amazing gift!

Unfortunately, many lottery winners throw their winnings at boats, cars, and other frivolous endeavors only to end up where they started a few short years later. Likewise, we tend to squander our attention away without careful consideration. Our minds are like a river taking the cognitively easiest path at all times. This easy path has been carved out by years of training on social media, stress and push on productivity that makes us feel like we need to always be multi-tasking, and by our own lack of awareness of the game we're playing.

Some of the greatest minds of our time and billions of dollars backing some of most powerful technology the world has seen is all laser focus on you with the sole purpose of capturing your attention. You're fighting a losing battle right out the gate.

## Spending Wisely

The good news is that we are developing more and more ways of combating this direction and regaining our wealth of attention. A wise lottery winner will do things like invest in a diverse portfolio, keep a portion for savings, and give generously to friends and family. 

The same is true for our attention. Mindfulness and quiet contemplation to face ourselves is investing in the quality of our time in the future. Giving time to family and friends instead of social media forms healthy relationships.

## Use Tech for Good

You may be getting the idea that I'm anti-technology, let me assure you, I'm not. I've invested most of my life in technology and making the internet a better place. We have extremely powerful tools that can be used for good. Connecting to ourselves, family, and friends must be augmented with technology.

Find creative ways to avoid getting pulled into recommendation engines, ad tracking, etc. I use Brave browser and ad block extensions. I have several youtube accounts to gain control over my recommendations - one of which I've turned saving history off which essentially turns off recommendations. I've stopped using facebook all together and have designated times to check twitter, news, and email.

Like nutrition, take all things in moderation. Treat social media like a rich chocolate cake!
Connecting to BigQuery From Excel and Python
Tags: bigquery, excel, python, odbcdriver
Published: 2020-12-02 16:00:48

This tutorial will show you how to connect to BigQuery from Excel and Python using [ODBC Driver](https://www.devart.com/odbc/bigquery/) for BigQuery. Also, if you’re completely new to ODBC, read [this](https://www.connectionstrings.com/how-to-access-oracle-from-bi-tools-tableau-power-bi-dbxtra/) tutorial to learn how to set up a DSN for the driver. 

**Connecting to BigQuery from Excel**

There are several ways to connect to BigQuery from Excel through ODBC, including the Data Connection Wizard in older versions of Excel. This tutorial provides the instructions for connecting to the data source with **Get & Transform** (Power Query) in Excel 2016, 2019.

1. Click the **Data tab** in Excel.
2. Expand the **Get Data** dropdown and click **From Other Sources** > **From ODBC**.
3. In the **From ODBC** dialog window, select the previously configured dialog box and click **OK**.
4. In the window that appears, click **Default or Custom**, then **Connect**.
5. In the next window, select the table to retrieve data from and click **Load**.
6. The data from the table will be displayed in an Excel spreadsheet. 

**Connecting to BigQuery from Python**

This guide assumes that you have already set up a Python development environment and installed the **pyodbc** module with the *pip install pyodbc* command.
You can type the code directly in the Python Shell or add the code to a *.py* file and then run the file. Below is a simple script to connect to BigQuery, insert records and query the dataset.
   
1. Import the **pyodbc** module and create a connection to BigQuery.

    `import pyodbc 
    cnxn = pyodbc.connect('DRIVER={Devart ODBC Driver for Google BigQuery};Project ID=myprojectid;DataSet Id=mydatasetid;Refresh Token=myrefreshtoken')`
2. Insert a new record to the table_name

     `cursor = cnxn.cursor()
    cursor.execute("INSERT INTO table_name (column1, column2, column3) VALUES (value1, value2, 'value3')")`
3. Retrieve and print the data

    `cursor = cnxn.cursor()	
    cursor.execute("SELECT * FROM table") 
    row = cursor.fetchone() 
    while row:
    	print (row) 
    	row = cursor.fetchone()`

To view the list of tools that can work with BigQuery through ODBC, visit the [compatibility](https://www.devart.com/odbc/third-party-tools.html) page.
Advent of Code 2020 Solution Megathread - Day 2: Password Philosophy
Tags: adventofcode, challenge
Published: 2020-12-02 15:51:39

---
title: Advent of Code 2020 Solution Megathread - Day 2: Password Philosophy
published: true
description: Day 2 involves some password policies likely not recommended by security experts.
series: Advent of Code 2020
tags: adventofcode, challenge
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/07nk3b8o33t67aowv7va.png
---

With Day 1 in the books, hopefully you’re starting to get into the swing of things. I know that I definitely didn’t spend a few hours fiddling with my AoC tooling yesterday. That would be obsessive and overkill. 😐

## The Puzzle

[Today’s puzzle](https://adventofcode.com/2020/day/2) involves passwords and security policies. Each listing has a password alongside the security policy in place for it, but some passwords aren’t compliant! It’s our job to analyze the passwords and sort things out.

## The Leaderboards

As always, this is the spot where I’ll plug any leaderboard codes shared from the community.

```
Ryan's Leaderboard: 224198-25048a19
```

If you want to generate your own leaderboard and signal boost it a little bit, send it to me either in a DEV message or in a comment on one of these posts and I'll add it to the list above.

## Yesterday’s Languages

Updated 03:05PM 12/12/2020 PST.

| Language   | Count |
|------------|-------|
| Python     |     5 |
| C          |     2 |
| Rust       |     2 |
| JavaScript |     2 |
| C#         |     1 |
| Raku       |     1 |
| PHP        |     1 |
| Scratch    |     1 |
| Elixir     |     1 |
| Haskell    |     1 |
| COBOL      |     1 |
| Ruby       |     1 |

Merry Coding!