teleren/devto huggingface dataset:
Music Players Buid With CSS
Tags: css, webdev, html
Published: 2020-04-13 10:41:11

Collection of free HTML and CSS music player code examples.
01. 3D cube media player CSS
<iframe height="265" style="width: 100%;" scrolling="no" title="3D Cube Media Player CSS only - Chrome" src="https://codepen.io/jcoulterdesign/embed/EvQRRo?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
  See the Pen <a href='https://codepen.io/jcoulterdesign/pen/EvQRRo'>3D Cube Media Player CSS only - Chrome</a> by Jamie Coulter
  (<a href='https://codepen.io/jcoulterdesign'>@jcoulterdesign</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>


More examples on <a href="https://templatefor.net/css-music-players/">templatefor.net</a> Thanks
What I learned from the co-founder of StackOverflow and founder of Discourse, Jeff Atwood
Tags: career, productivity, motivation, leadership
Published: 2020-04-13 10:39:51

For the latest episode of the Distinguished Devs podcast, I had the pleasure of interviewing Jeff Atwood.

Jeff Atwood is the co-founder of Stack Overflow and Stack Exchange, the founder of Discourse, and the author of one of the most popular software blogs,  CodingHorror.

Without Jeff, Stack Overflow and Stack Exchange simply would not exist. In addition to being an experienced programmer, Jeff has a lot of insight about the software community, how programmers interact, and how we learn. 

In this interview we talk about how StackOverflow started, his experiences with blogging, his observations of online communities and motivation & learning.

You can listen to the Distinguished Devs podcast here, as well as on iTunes, Soundcloud (embedded at the bottom) or the podcast platform of your choice, but I'll summarise/paraphrase some of my favourite parts below.
{% spotify spotify:episode:135HGr2EUn2h0xfuYEM53S %}
Some of my favourite parts of the interview:
## On blogging
Jeff believes in converting yourself to the philosophy of "public by default". Every time you learn or observe something, why not share it? The act of writing and blogging is like exercise, and if you do it regularly (more than once a week), over time you will accumulate a following. [Jeff's blog](https://blog.codinghorror.com/), one of the most popular software blogs on the internet, receives millions of views, and was the starting point for his idea of Stack Overflow.

## On Stack Overflow
Stack Overflow was originally launched to help experienced programmers find answers to targeted questions efficiently. As it grew, it came under pressure to serve beginner programmers better and to teach people how to code. In the interview Jeff discusses the tradeoffs and design decisions to appeal to the largest user base possible, whilst keeping its high quality content - even if perhaps at the expense of "friendliness".

## On progressing through your career
Jeff says that sometimes, to progress with your software career, you have to stop writing code. It's hard for many programmers - as soon as you get really good at something you have to stop doing it. But Jeff explains it by simply saying: the next level of abstraction is natural language - communicating with other humans.

I personally enjoyed chatting to Jeff tremendously and would genuinely recommend listening to the full episode.

The Distinguished Devs podcast is available on iTunes, Spotify etc.
I hope you enjoy this episode, please let me know what you think!

Don't forget to hit follow if you're interested in more of the series!
{% soundcloud https://soundcloud.com/distinguished-devs/jeff-atwood %}
We are launching the Remote Tech Week — let’s meet soon!
Tags: development, product, eventsinyourcity, futureofwork
Published: 2020-04-13 10:15:26

That’s right — we are organising the [**Future.Works Remote Tech Week**](https://future.works/techconference/future-works-remote-tech-week-2020/?utm_source=dev-to&utm_medium=referral-ext&utm_term=100116&utm_content=dev-to-announcement&utm_campaign=remote-tech-week) from 27th April until 1st May (included).

The current health situation has created unclear circumstances for the near future. Nonetheless, Landing.Jobs is focused on **delivering the best possible events that you can attend while quarantined at home**.

**What’s the [Remote Tech Week](https://future.works/techconference/future-works-remote-tech-week-2020/?utm_source=dev-to&utm_medium=referral-ext&utm_term=100116&utm_content=dev-to-announcement&utm_campaign=remote-tech-week)?**
It’s 5 days full of remote and tech content so save the date on your calendar and get ready to participate in a whole week of talks **fully remote** and **totally free**.

The [event will occur every day](https://www.eventbrite.co.uk/e/futureworks-remote-tech-week-tickets-101522506550?aff=devtoannouncement) from 4pm to 7pm WEST with **one main topic per day** so you can choose what day/days interest you the most although we are hoping to see you there every day!

**What is the main topic per day?**
* Monday — 27/04: **Remote Working**
* Tuesday — 28/04: **Remote Recruiting**
* Wednesday — 29/04: **Development**
* Thursday — 30/04: **Product**
* Friday — 01/05: **Future of Work**

**Can you name some of the speakers that will participate?**
* **Marcus Wermuth** — Engineering Manager @ *Buffer*
* **Catarina Ferreira** — Technical Recruiter @ *GitLab Inc.*
* **Scott Chacon** — CEO @ *Chatterbug* & Previously Co-founder of *GitHub*
* **Shir Zalzberg** — Senior UI/UX designer @ *Salesforce*
* **Marc Abraham** — Head of Product — Engagement @ *ASOS.com*
* **Pedro Torres** — Director of Software Engineering @ *Salsify*

Looking forward to seeing you there and share this experience with us.
[**Save your spot here!**](https://www.eventbrite.co.uk/e/futureworks-remote-tech-week-tickets-101522506550?aff=devtoannouncement)

Your [Remote Tech Week](https://future.works/techconference/future-works-remote-tech-week-2020/?utm_source=dev-to&utm_medium=referral-ext&utm_term=100116&utm_content=dev-to-announcement&utm_campaign=remote-tech-week) team from [Landing.Jobs](https://landing.jobs/?utm_source=dev-to&utm_medium=referral-ext&utm_term=100117&utm_content=dev-to-announcement&utm_campaign=remote-tech-week)
Why Google beat Yahoo in the war for the Internet? (Insights about most popular websites)
Published: 2020-04-13 10:11:29

---
title: Why Google beat Yahoo in the war for the Internet? (Insights about most popular websites)
published: true
description: 
tags: 
---

It is January 2001 - Yahoo receives ~627 million visits per month & Google is no where in the landscape. 
![Image from https://youtu.be/2Uj1A9AguFs](https://dev-to-uploads.s3.amazonaws.com/i/zeirzu8gu38byh61g1ap.png)

Fast forward to June 2005 - Google & Yahoo at 6 billion monthly visits.
![Image from https://youtu.be/2Uj1A9AguFs](https://dev-to-uploads.s3.amazonaws.com/i/piranfjh6o4r3zpigwoe.png)


---
### Why/How Google beat Yahoo?
I think the reason is Far sightedness. Basis points:
1. Google takes over in June, 2005. "Google built a broad platform that extends across the entire web by focusing on simplicity and flexibility, while the complexity of Yahoo’s infrastructure may be the reason it ends up as a small part of another business." - https://techcrunch.com/2016/05/22/why-google-beat-yahoo-in-the-war-for-the-internet/. - Because of this google took over in June 2005.
2. Yahoo took over again in Sep, 2008. But till then google had already bought youtube & android. Google finally takes over in July 2010, with launch of nexus devices.

---
### Other interesting metrics:
1. Youtube was created in Feb 2005, it took only 1 year to land up on 10 most visited sites(357M). Google bought it in Nov 2006(600M) for $1.6B.
2. Google bought Android - July 2005(3B)for $50M, launched in 2008. Nexus is launched Jan, 2010.
3. Facebook took over Myspace in Jan, 2008(1B)
4. eBay was over Amazon in Oct, 1999 (70M), Amazon over eBay in Feb, 2008(900M)


---
### In order of appearances:
Yahoo: 1996
Amazon: Jan, 1998(8M)
Ebay: March, 1999(25M)
Google: Jan, 2001 (60M)
Wikipedia: Feb, 2004(233M)
Myspace: Oct, 2004(286M)
Youtube: March, 2006 (350M)
Facebook: Jun, 2007 (500M)
Live.com: Jan, 2011(1B)
Twitter: Jan, 2012 (1.2B)
Instagram: Oct, 2013 (1.6B)

---
### Oct 2019 Standings:
Google: 77B
Youtube: 27B
Facebook: 23B
Wiki: 5B
Twitter: 4B
Instagram: 4B
Yahoo: 3B


Image & Data source: https://youtu.be/2Uj1A9AguFs
Learn to contribute to Open Source Software
Tags: opensource, webdev, career
Published: 2020-04-13 10:09:56

---
title: Learn to contribute to Open Source Software 
published: true
description: If you have been curious about open-sourced software but a little scared to make a start or not even know how to start, this session will cover everything you need to get started. Live stream!
tags: opensource, webdev, career
cover_image: https://i.imgur.com/pZQmIrW.png
---
I usually do MeetUps in *Dublin* live every month, but for obvious reasons, this can't be in person right now so I have decided to stream my 2-hour workshop on YouTube. 

If you have been curious about open-sourced software but a little scared to make a start or not even know how to start, this session will cover everything you need to get started.

Learn how to contribute and hopefully make your first contributions to an open-source software project.

In this hands-on session, we will talk about what Open Sourced Software is and the usual workflow on getting started and making your first contributions.

We will go over:
- Basic git commands
- Forking repositories
- Opening issues
- Opening Pull Requests
- Reviewing Pull Requests
- Useful resources
- Reviewing PR's live to our own sample project
- Tshirt giveaway 👕

Hopefully will be useful to all levels, beginners are welcome 💜

The stream will be on 14th April at 6 PM Irish Time! (GMT+1)

Link [here](https://youtu.be/NLB9V22JkLg).

And for all future events join the [MeetUp](https://www.meetup.com/codu-community/events/269813547/) (I'll be streaming them live too from now on).

---

[Follow me on Twitter](https://twitter.com/nialljoemaher)

Subscribe on [Codú Community](https://www.youtube.com/c/Cod%C3%BACommunity)
You can learn this? 🤔
Tags: watercooler, discuss, learning
Published: 2020-04-13 10:20:53

---
title: You can learn this? 🤔
published: true
date: 2020-04-13 10:00:00 UTC
tags: watercooler,discuss,learning
canonical_url: https://stereobooster.com/posts/you-can-learn-this/
---

Obviously, any skill is learnable, nobody borns with skillset. But there are some skills which seem to be natural, some skills that are never taught in school and university, some skills which you never thought can be learned.

For example, positive thinking, joking, etc. Would you think that this something teachable or learnable?

When I say teachable, I mean some effective, systematic approach. And not random poking around for 10000 hours (Malcolm Gladwell style).

**Do you know any skills that are commonly not considered as learnable, yet there are courses or books to learn them?**

For example can learn this:

- [The Science of Well-Being](https://www.coursera.org/learn/the-science-of-well-being/home/welcome)
- How to joke. I guess you can learn it from the book: “What Are You Laughing At?: A Comprehensive Guide to the Comedic Event”
StackOverflow FTW
Published: 2020-04-13 09:42:50

It's funny how boomers don't understand Stackoverflow-driven development.

We get the most benefit by going against common sense and popular opinions and being right in the end.

Instead, StackOverflow shows a consensus on various things.

Copying from there, you will not be able to make something outstanding, you will not be able to jump above the market. What you will show is an excellent average performance.

But you don't need to do unusual things all the time.

On the other hand, Stackoverflow allows you to spend less time on garbage and more on real things.

The real things, most likely, do not lie in the field of programming or your day job for the current employer, no matter how good it is.

Therefore, going against the system - it is what you do on your own in your garage. And on the primary job, it makes perfect sense to do what JIRA ticket asks you to do!

Therefore, for a software developer, copy-pasting from SO is the most rational option.
HR Management Software
Tags: hrsoftware, humanresource
Published: 2020-04-13 09:41:58

Open HRMS is an open source HR Management software that envisions building a happier workforce. Open HRMS takes care of all your HR processes while you take care of your employees. From onboarding and attendance management to time tracking and appraisals, Open HRMS has got it all covered. 

The most advanced Open Source HR Management software works well for both small and large sized enterprises. With Open HRMS, you can pick exactly what your business needs and leave behind the rest. Our modules are self-sufficient in managing and solving every major hurdle in HR management path.

Website: https://www.openhrms.com/
Empting Arrays: .splice() & array.lenght = 0
Tags: javascript, beginners
Published: 2020-04-13 09:36:46

---
title: Empting Arrays: .splice() & array.lenght = 0
published: true
description: Empting Arrays & deleting Array elements
tags: javascript, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/gvol2qmh8ihlkk1sr5my.jpg
---
.splice(<strong>index to start</strong>,<strong>Number of element to delete</strong>)

The easiest way to empty an array is by setting its <mark>length to 0</mark>
``` const apples = ['red apple', 'green apple', 'yellow apple', 'Mac']
    apples.length = 0``` // <mark>return apples = []</mark>

We may also use
```const apples = ['red apple', 'green apple', 'yellow apple', 'Mac']
   apples.splice(0)``` // <mark>return apples = empty array[]</mark>

If we want delete the first apple
```const apples = ['red apple', 'green apple', 'yellow apple', 'Mac']
   apples.splice(0,1)``` // <mark>return apples = [ 'green apple', 'yellow apple', 'Mac' ]</mark>

If we want delete the second apple
```const apples = ['red apple', 'green apple', 'yellow apple', 'Mac']
   apples.splice(1,1)``` // <mark>return apples = [ 'red apple', 'yellow apple', 'Mac' ]</mark>

If we want delete the second and third apples
```const apples = ['red apple', 'green apple', 'yellow apple', 'Mac']
   apples.splice(1,2)``` // <mark>return apples = [ 'red apple', 'Mac' ]</mark>

[More about .splice() MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)
Analyze and optimize your webpack build with webpack-report
Tags: javascript, webpack, webdev, showdev
Published: 2020-04-13 09:34:30

---
title: Analyze and optimize your webpack build with webpack-report
published: true
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/43hxue8zjskndgjexyah.png
description: Webpack build analysis plugin
tags: javascript, webpack, webdev, showdev
---

Introducing [webpack-report](https://github.com/deeppatel234/webpack-report).Webpack build analysis tool. it gives a detailed report for assets, modules and chunks so you can easily optimize your webpack build.

### Features

- describe your project information like dependency, dev-dependency etc.
- show webpack build information like warnings, error, build time etc.
- detailed Assets, Modules and chunks information with interactive graphs.

***Dashboard***

![Dashboard](https://dev-to-uploads.s3.amazonaws.com/i/5aqfkr3yx50le445h8w2.png)

***Assets***

![Assets](https://dev-to-uploads.s3.amazonaws.com/i/uohn4usdjzu6elmh7s22.png)

***Modules***

![Modules](https://dev-to-uploads.s3.amazonaws.com/i/pwgazoioxvqkp4149v4c.png)

***Chunks***

![Chunks](https://dev-to-uploads.s3.amazonaws.com/i/lyl8ec0djmecgyaqrlm5.png)

## Installation

- Download and install npm package

```sh
#NPM
npm install webpack-report

#YARN
yarn add webpack-report
```

## Usage

```js
const WebpackReport = require('webpack-report');

module.exports = {
  plugins: [
    new WebpackReport()
  ]
}
```


Webpack Report is an open-source project. you can also contribute to this project. [Github Link](https://github.com/deeppatel234/webpack-report)
Free Computer Science Courses and Certifications in time of COVID-19
Tags: codenewbie, beginners
Published: 2020-04-13 08:51:14

The pandemic has everyone stuck at home and it seems like we have a little more time on our hands.

Lots of companies have come forward offering free courses and certifications during this time and I have been making a list.

https://www.notion.so/07d80644a8d8485f97cf893bfcd25638

Hope it can be of help :) Happy Learning.
Getting into iOS development? Please, don't start with SwiftUI
Tags: beginners, swift, ios
Published: 2020-04-13 08:46:21

Nowadays learning iOS development is kind of complicated since Apple announced brand new way of building user interfaces at WWDC 2019 called SwiftUI. This is totally different from how iOS UIs been traditionally built by UIKit and when starting it may be difficult to decide what to learn.

_I fully understand the desire to start with shiny new SwiftUI and leave UIKit to history but I think it is a mistake, especially for folks just starting building apps. Let me tell you why._

**SwiftUI is super new and is constantly evolving**. I suspect that once WWDC 2020 (in on-line form) rolls over, much of the framework will be different. Old tutorials and resources will not show you working stuff. It is possible that SwiftUI will take more than three years to sufficiently mature.

Also due to the nature of SwiftUI which allows pretty slick UI building it also hides a lot behind the scenes and it is pretty common for **error messages to point you in a wrong direction**. You may be accustomed that IDE (Xcode in this case) will tell you what is wrong, but in SwiftUI it may tell you something is wrong when actually the issues lies elsewhere in your UI code. This is just frustrating and I think even more so for beginners.

**It is harder to get help with SwiftUI**. At this point Stack Overflow has over [600 000 questions](https://stackoverflow.com/questions/tagged/ios) tagged `iOS` - because prior SwiftUI it did not make sense to use `UIKit` tag since really there was no other option. In contrast it has a bit over [6 000 questions](https://stackoverflow.com/questions/tagged/swiftui) tagged `SwiftUI` and around 14 000 which contain "SwiftUI".

When learning UIKit you have much **much better chance of quickly finding answer to your problem**. There are also resources on how to best structure your app from architecture standpoint, something that will take years to settle for SwiftUI.

Most professional developers did not yet learn SwiftUI because they still need UIKit and will need it in the next few years for sure. Nobody will re-build existing app from scratch just to use cool new thing called SwiftUI. **So the pool of people who can potentially help you with SwiftUI is much smaller** than people who will help you with UIKit.

If you plan to look for iOS job in the next years, you will almost certainly need to know UIKit.

I think as of right now SwiftUI might be great for Apple Watch and potentially for hobby macOS apps. For iOS, assuming you don't want to just play around, stick to UIKit. It is proven workhorse with tons of resources available. There will be plenty of time for SwiftUI later on.

_Why the appeal for beginners to don't start with SwiftUI in the title? Because I see lot of quetions on forums, Slack channels and elsewhere where folks are struggling with iOS development and often it is because of the problems mentioned above and unnecessary frustration is really frustrating.._
Extending SimpleNamespace for Nested Dictionaries
Tags: python, tutorial
Published: 2020-04-13 08:35:33

I'm a huge fan of Python3's `types.SimpleNamespace`. Basically, it allows us to take a dict, like so:

```python
my_dict = {
  "a": 1,
  "b": 2,
  "c": 3,
}

my_dict["a"] # 1
my_dict["b"] # 2, etc
```

and manage it like this:

```python
from types import SimpleNamespace
my_namespace = SimpleNamespace(a=1, b=2, c=3)

my_namespace.a # 1
my_namespace.b # 2
my_namespace.c # 3
```

Alternatively, we could also do something like:

```python
from types import SimpleNamespace

my_dict = {
  "a": 1,
  "b": 2,
  "c": 3,
}

my_namespace = SimpleNamespace(**my_dict)
my_namespace.a # 1
my_namespace.b # 2
my_namespace.c # 3
```

But - what happens if our `my_dict` is nested? Like so:

```python
my_dict = {
  "a": {
    "d": 4,
  },
  "b": 2,
  "c": 3,
  "e": [5,6,7,{
    "f": 8,
  }]
}

my_namespace = SimpleNamespace(**my_dict)
my_namespace.a # {"d": 4} /womp womp 😭
my_namespace.a.d # raises Exception! 😭😭
```

In short, `SimpleNamespace` simply does not support this use case. But that's ok! We can extend `SimpleNamespace` and build this functionality for ourselves.

## Defining `RecursiveNamespace` 

```python

from types import SimpleNamespace

# this is how SimpleNamespace looks when output
SimpleNamespace(**my_dict)
# namespace(a={'d': 4}, b=2, c=3, e=[5, 6, 7, {'f': 8}])

class RecursiveNamespace(SimpleNamespace):

  @staticmethod
  def map_entry(entry):
    if isinstance(entry, dict):
      return RecursiveNamespace(**entry)
    
    return entry
  
  def __init__(self, **kwargs):
    super().__init__(**kwargs)
    for key, val in kwargs.items():
      if type(val) == dict:
        setattr(self, key, RecursiveNamespace(**val))
      elif type(val) == list:
        setattr(self, key, list(map(self.map_entry, val)))

# this is how RecursiveNamespace looks when output
RecursiveNamespace(**my_dict)
# RecursiveNamespace(
#    a=RecursiveNamespace(d=4), 
#    b=2, 
#    c=3, 
#    e=[5, 6, 7, RecursiveNamespace(f=8)])
```

So, what's happening here? We establish a new class, `RecursiveNamespace` that extends `SimpleNamespace`. In the `__init__` constructor method, we call `SimpleNamespace`'s constructor. Then, we just walk through our dictionary and for value that is _also_ a dictionary or list, we instantiate that with `RecursiveNamespace`. Ta da.

## P.S.

Technically, we don't even really need `types.SimpleNamespace` here - we can implement this class without by just adding two lines of code:

```python
class RecursiveNamespace2: # without extending SimpleNamespace!

  @staticmethod
  def map_entry(entry):
    if isinstance(entry, dict):
      return RecursiveNamespace(**entry)
    
    return entry
  
  def __init__(self, **kwargs):
    for key, val in kwargs.items():
      if type(val) == dict:
        setattr(self, key, RecursiveNamespace(**val))
      elif type(val) == list:
        setattr(self, key, list(map(self.map_entry, val)))
      else: # this is the only addition
        setattr(self, key, val)

```