teleren/devto huggingface dataset:
Spaceduck For vscode - An intergalactic space theme
Tags: vscode, showdev, code, spaceduck
Published: 2021-07-11 18:18:40

I am very exited to share the vscode theme I have been working on for a while - _Spaceduck for VScode_ 🎉 ! if you want to feel like you are in space when starring at a computer then this is the theme for you ! if you are interested in using this theme, you can find it in the [vscode marketplace](https://marketplace.visualstudio.com/items?itemName=YoussefBouzekri.spaceduck).

## Screenshots
![HTML screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcnpyda8vggt6scj9t17.png)![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyncyd1qc82t92dbk0o7.png)![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iiueb1riyg7wthwvo78s.png)
 
## Want to use spaceduck elsewhere ?
- [Vim](https://github.com/pineapplegiant/spaceduck) (Maintained by Guillermo Rodriguez)
- [Atom](https://github.com/bigpick/spaceduck-atom-ui) (Maintained by George Pickering)
Lessons When Scaling From 0 - 130 Devs w/ Kirby Frugia of MURAL
Tags: scaling, leadership, opensource, growth
Published: 2021-07-11 18:18:26

MURAL has gone through **enormous** growth in the past two years and Kirby Frugia, VP of Engineering, joins the [Dev Interrupted](https://devinterrupted.com/podcast/lessons-when-scaling-from-0-130-devs/) podcast to discuss the ins and outs of rapidly scaling engineering organizations. We go through the entire 0 to 100+ developer scale-up journey, dig into how he keeps the flow of information stable across teams, as well as the open source methods he uses to help onboard new employees.

#**Listen to the full episode**
{% spotify spotify:episode:7tOPSSva5QsFrHqXTj34zC %}

#**Episode Highlights include:**
* How an engineering organization changes after its first funding round
* What it means to go from 0 to 130 devs and how to lead this change successfully
* The open source methods Kirby uses at MURAL to onboard new team members
* Pitfalls to avoid when scaling up an engineering organization
* How to think about visibility and metrics as you scale

{% youtube gZgqxTQkrBM %}

#**Join the Dev Interrupted Discord Server**
With over 1200 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.gg/tpkmwM6c3g)
![Join the Dev Interrupted Discord Community!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19j3dzgz4r4kzav3w6z8.png)
OpenGPG Proof
Published: 2021-07-11 18:16:32

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/a026fdecc21824ceca4cda3cea31443fd7528043) to [this dev.to account](https://dev.to/peterlewis). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:a026fdecc21824ceca4cda3cea31443fd7528043]
What Should Dev Teams Measure First? w/ Luca Rossi
Tags: leadership, management, culture, devteam
Published: 2021-07-11 17:46:15

Why do we measure dev team metrics?

It's even more important to understand this question because most engineers don't like to be measured. So why measure at all?

Luca Rossi, Head of Engineering at Translated, helps answer these questions on the [Dev Interrupted podcast](https://devinterrupted.com/podcast/what-should-dev-teams-measure-first/). We also discuss which metrics are worthy and how managers should interpret those metrics.

#**Listen to the full episode**
{% spotify spotify:episode:3Rz970JfT6lYdAVNRZvRMz %}

#**Episode Highlights include:**
* What should you measure for?
* Measuring as a tool for good and bad
* What should not be measured
* Can you make progress if you aren't measuring?
* How measuring demonstrates what you care about

#**Join the Dev Interrupted Discord Server**
With over 1200 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.gg/devinterrupted)
![Join the Dev Interrupted Discord Community!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19j3dzgz4r4kzav3w6z8.png)
Higher order Functions
Tags: javascript, react, reactnative
Published: 2021-07-11 17:17:49

So I was going through lot of YouTube videos on this topic...wich made me eventually find wtf is this concept ...is ..
In javascript a function is nothing but an value, 

    Consider 
  ```
    Function Myrollno(value){
       return  value
            }

   let outputvalue = Myrollno(21)
  
    So if we 
   console.log(outputvalue)

    Output :
       21
  ```
  Hmm...so what happens we pass function instead of a value to the function ....that's what Higher order functions are...
  
   Still not clear .. consider 
   the example below 
  ```
    var filtered = [12,5,8,130] ;

    functionisAboveMyRange(value){
        return value >= 25;
     }
      
   filtered.filter(isAboveMyRange);

```

So 'filter' Function is called as an Higher order function ,the function we pass as Argument is called an callback function...

Still having Doubts comment it
Snr React Native Permanent Role
Published: 2021-07-11 17:03:02

Hello, 

Looking for a senior (minimum 5 years experience) React Native developer to be the primary developer to build a new social mobile concept that will launch this summer. 

This is a permanent and long term position as you will be responsible for building and constantly evolving the product. 

You should have significant experience with the technologies and demonstrate by showing apps that you have developed personally showing strong design and growth. 

Open to contract position as well. 
Location: Flexible as long as we get the right candidate

Regards
What, according to you, is the ideal flow of a Full-Stack Project?
Tags: fullstack, webdev, project, discuss
Published: 2021-07-11 16:50:23

Ummmm.... I don't know where to start :cry:

I have an idea in mind to develop a full stack application and as usual I started working on it without any prior plan. So here I am, stucked, thinking that I should have planned it before, decided if I would be working on Frontend first or the backend or whether I should have designed the layout, decided the theme/colors for my project.

TBH I haven't thought this before writing this post and now I'm frustrated. And hence..., I'm here asking my fav community **How do they plan their fullstack projects** beforehand to ensure the smooth flow of the project development.

### Tech Stack to be used

#### - Frontend: 
    1. HTML/CSS/JS
    2. Bootstrap

#### - Backend:  
    1. Python (To scrape data)
    2. Django and Django Rest Framework (To create API)
 
<hr>
And once again thanks to this ever helping community of developers who are always ready to help and encourage everyone. :heart:
What is wrong with vimawesome.com?
Tags: webdev, linux, javascript, python
Published: 2021-07-11 16:27:29

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96b8o4017o6f51olumtu.jpg)

Hi, recently it is impossible to access vimawesome.com. This is a great resource for finding extensions of vim editor. 

Is there any one know what happened to this website?
Block vs inline vs inline-block
Tags: inlineblock, block, css, inline
Published: 2021-07-11 15:40:52

---
title: Block vs inline vs inline-block
published: true
date: 2021-07-11 15:39:48 UTC
tags: inlineblock,block,CSS,inline
description: The differences between block, inline, and inline-blog aren't always universally understood. Today we explore what they are.
canonical_url: https://blog.jws.app/2020/block-vs-inline-vs-inline-block/
---

I’m not sure that this concept is universally understood.  I figured that it is time to take a swing at it.

According to [w3schools](https://www.w3schools.com/htmL/html_blocks.asp), a block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

{% codepen https://codepen.io/steinbring/pen/jOqqGgo %}

In the above example, there are 4 inner divs contained within 1 outer div.

So, what about inline?  According to [w3schools](https://www.w3schools.com/htmL/html_blocks.asp), an inline element does not start on a new line and it only takes up as much width as necessary.

{% codepen https://codepen.io/steinbring/pen/vYGGWEd %}

In the above example, there are still 4 inner divs contained within 1 outer div but you’ll notice that it no longer fills 100% of the width.  Instead, it just uses the space that it needs for the content.

So, what about inline-block?  According to [w3schools](https://www.w3schools.com/Css/css_inline-block.asp), compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.  Also, compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

{% codepen https://codepen.io/steinbring/pen/Rwaajay %}

In the above example, the 4 inner divs still only fill the space that they need to fill but now you can see more of the outer div’s border and there is a right margin to the inner divs.

 

So, let’s try adding padding and margins to the three examples.

 

Block:

{% codepen https://codepen.io/steinbring/pen/WNwwXXe %}

Inline:

{% codepen https://codepen.io/steinbring/pen/VwaarMx %}

Inline-block:

{% codepen https://codepen.io/steinbring/pen/ExKKbwm %}


So, to recap a bit …

 

Block elements:

- Force a line break after the element
- Is 100% width if it isn’t defined otherwise

Inline elements:

- Allows elements to sit to their right and left
- Does not respect widths and heights
- Does respect right and left margins and padding but not top and bottom

Inline-block elements:

- Allows elements to sit to their right and left
- Does respect widths and heights
- Does respect top and bottom margins and padding

 

Have a question, comment, etc?  Feel free to drop a comment, below.
Learning how to learn new things 🤔
Published: 2021-07-11 15:30:51

Often we start learning new technology and find ourself in a place where we think we are not moving ahead. This is a short and simple guide to how I learned things quickly and effectively.

Now before saying anything else, I would like to put forward that this is just my point of view on the learning methodology and this is what I do. For you these techniques may or may not work but I am sure they would surely bring some difference in the way you learn.

Getting all that aside, let me tell you what principles I follow to learn new things. Now, I don't have a fancy name or abbreviation for the technique but here are the steps I follow:

## Start with the history 

Often we forget why did we start learning a thing and why do we need to learn a particular technology. For some it might be professional requirements and for others it can be just for fun. In any case I would suggest you to define your motive and go a little bit on the history of the technology to understand why it came into existence.

## Dive into the basics 

Once you know what to do and why to do it, you can dive into the technology itself. Learn the basics through the official documentation of the technology and try to understand how stuff works. You can always go for the video tutorials but I feel for the basics, the youtube videos are a waste of time.

## Do a small hands on 

Code out whatever you have learn and try to imitate whatever you have learned though the documentation or the tutorials.

## Do a verbal or written knowledge test 

Now once you are done with the basics, try to test out yourselves by creating a short trivia for yourself. You can always try building any short application out of the language or the tech you have learned. Don't go for a big application right now, rather make small modular applications.

## Fix the issues 

Try to understand your language gaps and then work on them.

## Build something 

It's now time to bring an application that required solid understanding of the technology. Suppose you are learning React, then after all the above mentioned steps, just try to build an application such as E-commerce website.

## Ask someone to review or do knowledge transfer

It is very important to ask from someone to review your project and give you suggestions or hints on how you could improve. You can also demonstrate your projects on linkedIn and ask people to use your app and critique it.

Now, you must repeat step 5-7 as much as you can and this is how you can learn a new tech effectively. Let me know if you liked my method and share it with more people so that they could also have a look at it.

Happy coding!!!
Understanding Kubernetes in a visual way (in 🎥 video): part 19 – Useful tools
Tags: kubernetes, devops, docker, beginners
Published: 2021-07-11 15:08:05

---
title: Understanding Kubernetes in a visual way (in 🎥 video): part 19 – Useful tools
published: true
description: Serie of videos about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in a visual way - (in video) in video
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rfnfmo6c784nxoz3mlg.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes, then I've auto-published a book and since now I've started a new serie of video! :-)

I imagined a serie of short videos with a mix of sketchnotes and speech.

I think it could be a good way, more visual, with audio & video to explain Kubernetes (and others technologies).

In this special episode, let's discover several useful tools in the Kubernetes ecosystem.

{% youtube wVbMYRSX3OY %}

The video is in French BUT I done the subtitles in english (and french too).

If you liked the video and are interested to watch another ones, please give me some feedbacks (and you can also subscribe to [my Youtube channel](https://www.youtube.com/channel/UCrRk0kOP58lBMl9B8ZS8Vlg), if you want to ❤️).

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 165 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

If you like theses sketchnotes, you can follow me, I will publish others sketchs shortly :-).
Download Browser Page as PDF using JavaScript
Tags: javascript, beginners, webdev, html
Published: 2021-07-11 14:54:13

Hello folks, today we will cover how to save our browser page as pdf. We will generate pdf using Vanilla JavaScript. This functionality can be used to generate invoices or receipts for users. <a name="top"></a>
![download](https://media.giphy.com/media/F4hprt3JvS1S8/giphy.gif)

---
## Prerequisite
🎯 JavaScript
🎯 HTML
🎯 html2pdf.js CDN

---

## Table Of Contents
* [HTML code](#HTML-1)
* [JavaScript code](#JS-1)
* [Conclusion](#Conclusion)

♣️ I decide to write the whole code in `index.html`, feel free to refactor it to your convenience. The invoice template is gotten from [Bootsnip](https://bootsnipp.com/snippets/9gjD) written by <mark>heidilux</mark>. I made a little tweaking to the template to tailor it to this project.

🎯 First of all, add the `html2pdf CDN` script to the head of your `HTML` boilerplate.
![carbon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33q2td6oe3oou8490a8w.png)
 
🎯 Also, add this to the head
```HTML
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
```

🎯 Next, Let's flesh out our `div container` in `index.html` that holds all the data contained in the invoice.
📝 Ensure you wrap the content to display in the `div`.

![carbon (1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zv0smt8hh46mwf9ahji0.png)
 
🎯 We write our button `onclick` event
```HTML
    <button onclick="generatePDF()">Generate Invoice</button>
```

🎯 Lastly, we write our `JavaScript` function.
<a name="JS-1"></a>
```JavaScript
<script>
    function generatePDF() {
        const element = document.getElementById('invoice');
        html2pdf()
            .from(element)
            .save();

    }
</script>

```
---
Click on the `Generate Invoice` button to test.
<a name="HTML-1">{% codepen https://codepen.io/drsimplegraffiti/pen/gOWwZyw %}</a>

## Conclusion <a name="Conclusion"></a>
I hope this post has been helpful and thought you how to generate pdf. Leave a comment below if you have better ways to generate pdf using `JavaScript`.

---

 
## Resources
🍄[Video Reference](https://www.youtube.com/watch?v=rZr23bMwHsU) by Code with Voran

### Learn how to send mail📬 using Web Socket 👇
[![Send mail using NodeJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tj9psw3y1v1f1pc2kao0.png)](https://dev.to/drsimplegraffiti/chat-app-using-socket-io-1hp0)

[Back to top](#top)

{% github drsimplegraffiti/drsimplegraffiti no-readme %}
Rate limiting your goroutines
Tags: go, programming, goroutines, concurrency
Published: 2021-07-11 14:12:22

---
title: Rate limiting your goroutines
published: true
description: 
tags: go,programming,goroutines,concurrency
cover_image: http://www.resau.com.au/wp-content/uploads/2021/02/traffic-control-course.jpg
---
Hey mates!
Just a quick one I like to talk about! Rate limiting goroutines. 

This is about controlling the actual amount of concurrent task executions. 

Sometimes, we have to process and execute a stream of long-running tasks and we don't know at runtime how many of them are coming out from the task channel. So here, the main concern is not firing all the goroutines together, at the time tasks are ingested. Otherwise, firing many of them concurrently uncontrolled could lead to unpredicted behaviors or memory overflow.

Therefore, a `limiter` (AKA semaphore) empty struct buffered channel has been added into the mix, capped with the `count` of tasks to run concurrently. 

1. For the first n-`count` iteration an empty struct will be pushed onto the `limiter` channel, 
2. A goroutine is fired up to run the incoming task.
3. At the n-`count + 1` iteration, the `limiter` channel will be full, hence the current `main` goroutine will be blocked.
4. Once any of the currently running tasks finish its execution, it will readout of the `limiter` channel, to make some room for another task to be run. This will unblock the `main` goroutine.
5. After the `main` goroutine takes the control back, it will push an empty struct onto the `limiter` channel and start over the cycle by running a new goroutine for the incoming task.

And so on until the time out is reached, so the for loop brakes and no more tasks are run.

{% gist https://gist.github.com/godoylucase/55dbc93655a13511f4ba5bb8c1c9955d %}

To sum up, this is how we can limit goroutines to come up all together by controlling how many of them could be up and running concurrently by using a `limiter` buffered channel for it.  Avoiding causing a memory overflow and unpredicted behavior.
Override Default Date Format in Rails Admin
Tags: rails
Published: 2021-07-11 14:02:35

Rails Admin is a Rails engine that provides an easy-to-use interface for managing your data. It's perfect for the cases where we want admin dashboard quickly for CRUD (Create, Read, Update and Delete) operations.

When using engines, it can be difficult to override its default behavior. It was the same case for overriding the default date format. It was tricky as I didn't know exactly where to look at.

After some research, I found out that Rails Admin uses **long** date and time format from the locale. We can check the related code in <a href="https://github.com/sferik/rails_admin/blob/555f7783f2255ddc736141c410c5bdaee074887a/lib/rails_admin/config/fields/types/datetime.rb#L33" target="_blank" rel="noopener">official gem repository</a>.

Line for the exact code may change in the future, if it has, you can search for the code below:

```
  register_instance_option :date_format do
    :long
  end
```

## Override default date format

To override the default format of the date and display the format we want in our UI, we will need to add the required format in our locale files so the values inside the engine are overridden.

Add the following to `config/locale/en.yml`

     ```
       en:
         date:
           formats:
             long: "%Y-%m-%d"
         time:
           formats:
             long: "%Y-%m-%d %H:%M:%S"
     ```

Please change format of the date and time as required for your application.

If you have other locales that your Rails app supports, you can update the date formats as required in related locale file by copying this exact code and updating content inside key "long"

_NOTE_: date is for datatype **date** and time is for data type **datetime**

## Conclusion

If you restart the rails server and reload the UI, you should be able to see the date format you added.

Thanks for reading. Happy coding!

## Image Credits

- Cover Image by <a href="https://unsplash.com/@esteejanssens?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank" rel="noopener">Estée Janssens</a> on <a href="https://unsplash.com/s/photos/calendar?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank" rel="noopener">Unsplash</a>