teleren/devto huggingface dataset:
Getting Physical Units With Styled Components
Tags: react, css, styledcomponents, units
Published: 2019-05-23 16:33:34

---
title: Getting Physical Units With Styled Components
published: true
description: 
tags: React, CSS, styledcomponents, units
---

Today I came across an interesting problem. I had to draw a React component in the browser and it had to be a specific width and height in centimeters.

So I naively thought that this would be as simple as setting the width and the height in css using the _cm_ unit. I quite quickly found out that this would not work. I found [this answer](https://stackoverflow.com/questions/18483955/web-and-physical-units) on stack overflow, so follow the link if you are interested in finding out why it doesn't work.

### My Initial Code

Lets start out by looking at my initial attempt:

```javascript
const SomeComponent = styled.div`
  background-color: black;
  width: 8.4cm;
  height: 2.2cm;
`;

function App() {
  return <SomeComponent />;
}
```

As previously stated this doesn't work. So let's try to fix it!

### Some Prerequisites

I found a solution that worked for me. It is not perfect but it got the job done. If anyone have a better solution I would love to hear about it!

I will assume that you are familiar with [styled-components](https://www.styled-components.com); if not, you should probably read up a bit and come back later!

A prerequisite for my solution is the fact that I knew what device the code will run on. I started out by measuring the actual screen I had. In this example I will be using a 13.3" MacBook; I was actually able to find the measurements online so no ruler was needed (11.25" x 7").

### The Solution

The first step I took was to define a variable that maps between _vw_ and centimeters. I decided to define it in a [styled-components](https://www.styled-components.com) theme since this will allow me to easily access it from anywhere in the component tree:

```javascript
function App() {
  return (
    <ThemeProvider theme={{ oneCmInVw: 100 / 28.575 }}>
      <SomeComponent />
    </ThemeProvider>
  );
}
```

So my screen is 28.575cm (11.25") wide. If I divide 100 by 28.575 I get how many _vw_ goes into one centimeter (given that the page is full screen on my 13.3" MacBook). I can now access this variable and set the actual width and height for _SomeComponent_ in centimeters.

```javascript
const SomeComponent = styled.div`
  background-color: black;
  width: ${props => props.theme.oneCmInVw * 8.4}vw;
  height: ${props => props.theme.oneCmInVw * 2.2}vw;
`;

function App() {
  return (
    <ThemeProvider theme={{ oneCmInVw: 100 / 28.575 }}>
      <SomeComponent />
    </ThemeProvider>
  );
}
```

The end result is a black box that is 84 x 22 millimeters.
Angular 2+ with Typescript - Essential Training
Tags: courses, javascript, angular
Published: 2019-05-23 15:43:41

---
title:  Angular 2+ with Typescript - Essential Training
published: true
tags: Courses, javascript , angularjs
canonical_url: https://udemyhunt.com/course/angular-2-training/
cover_image: https://i.udemycdn.com/course/750x422/866460_eb8b_4.jpg
---

Learn Angular 2 (or 4) from the ground up | This course combines a Project, Slides and Quizzes | Perfect for beginners.

<center>[Enroll](https://udemyhunt.com/course/angular-2-training/)<center>
Introducing my blog
Tags: beginners
Published: 2019-05-23 15:44:39

To be honest, I don't know where to start. Probably, it would be correct to say that I am involved in the development of this blog https://newline.tech/blog/

Here we usually write about everything what IT specialists are interested in.
I'll be glad to hear from you recommendations about what else I can write in this blog. Perhaps you have specific recommendations on topics and sensitive issues.

I will be very grateful for your feedback ;)
My Favorite Data Visualization and Dataset Resources
Tags: data, datavisualization, dataviz, datasets
Published: 2019-05-23 15:25:37

I wanted to put together a quick list of my favorite datasets and visualization resources! When I'm looking for a sample project, I use these for inspiration. I also use them for teaching! Thought they could be helpful for someone else too.

## Visualizations

- [FiveThirtyEight](https://fivethirtyeight.com/)
- [Flowing Data](https://flowingdata.com/)
- [The Upshot](https://www.nytimes.com/section/upshot)
- [Information is Beautiful Awards](https://www.informationisbeautifulawards.com/showcase?award=2018&pcategory=winner&type=awards)
- [/r/dataisbeautiful](https://www.reddit.com/r/dataisbeautiful/top/?t=all)
- [The Pudding](https://pudding.cool/)

## Data Sets

- [Google's Dataset Search](https://toolbox.google.com/datasetsearch)
- [List of Public APIs](https://github.com/toddmotto/public-apis)
- [BuzzFeed News Data](https://github.com/BuzzFeedNews)
- [FiveThirtyEight Data](https://data.fivethirtyeight.com/)
- [Government Data](https://www.data.gov/)
- [Data is Plural](https://tinyletter.com/data-is-plural)
- [/r/datasets](https://www.reddit.com/r/datasets/top/?sort=top&t=all)
- [ProPublica Political data sets](https://www.propublica.org/datastore/datasets/politics)
- [Awesome Public Datasets](https://github.com/awesomedata/awesome-public-datasets)
- [Kaggle](https://www.kaggle.com/datasets)
- [The Pudding](https://github.com/the-pudding/data)

I asked about new ones on twitter a while ago, and got some of these from there! I linked the Tweet if you're interested in seeing more!

{% tweet 1108340394490761216 %}
How To Improve Your Newsletter Subscription Flow (A Little Bit)
Tags: gatsby, idea, opensource, newsletter
Published: 2019-05-23 14:53:52

I like the idea of 1% regular improvements. In this post I will add describe how I've made a small improvement to my subscription experience in a Gatsby blog (with an open source plugin for you to use).

This post is part of [10x Better Gatsby](https://blog.swingpulse.com/10x-better-gatsby) Series. Go check it out!

### The Idea

Let people know that somebody is already trusts you. Lets show our credibility and authority by displaying current number of our newsletter subscribers.

This is an example of what I am talking about:

![](https://blog.swingpulse.com/static/eb0a81c955983a1991357329dabaf662/96300/example.png)

Even a small community of readers is a community.

### Open Source

I've open sourced a really small plugin [@rogovdm/gatsby-source-mailchimp](https://github.com/rg4real/gatsby-source-mailchimp) you can use to automate this task in a Gatsby blog. Usage is pretty straightforward (and is described in README).

Like I said, it's a subtle change but those changes add up with time.
Why you should read on topics that you might not need right now?
Tags: reading, tip, growth, career
Published: 2019-05-23 14:34:38

---
title: Why you should read on topics that you might not need right now?
published: true
canonical_url: https://mazeez.dev/posts/why-you-should-read-on-topics-that-you-might-not-need-right-now
description: Sometimes you stumble upon articles or books that seem interesting, but are not directly related to your professional need. Reading these articles insures that you have a lead when you do need these topics.
tags: reading, tip, growth, career
---

I was browsing web once when I stumbled upon an article about [SkiaSharp](https://github.com/mono/SkiaSharp). It's a C# wrapper around Google's fast 2D rending engine. I was developing desktop apps in WPF at the time and didn't feel the need to learn a low level library like that.

A few weeks later, I found myself in a project that required building a fast layout designer. First, I tried to write it purely in WPF, and I did. It was super slow, on a decently fast computer, it took a few seconds to load a layout.

Then I remembered SkiaSharp. I headed over to its documentation and it seemed easy enough for me to use it. I rewrote the layout engine in SkiaSharp and It was blazing fast. You could have loaded a layout many times in one second and you still wouldn't feel any delay.

So when you see an article about something interesting, even if it's not directly related to what you work on right now, read it. At least skim it. That way when you do need it, you'll at least have a name to google.

I feel like software engineering is not about memorizing every algorithm and data structure out there, but it's about knowing about the right tools for the right problems.
I Just Didn't Get Redux!
Tags: redux, backtobasics, webdev
Published: 2019-05-23 14:30:20

---
title: I Just Didn't Get Redux!
published: true
description: How I finally learned Redux (without any other libraries)
tags: #Redux #BackToBasics #webdev 
---
On my journey of learning React, I was moving along nicely. It made sense to me. But after a while I kept running into a problem while I was following along, watching others write code in videos: <strong>Redux</strong>.

I tried. Really, I did. I did tutorials on YouTube. I did courses on Udemy. I tried to make sense out of what others were posting in forums and blogs... But I just didn't get Redux. I had a decent concept of <em>what</em> it did but I couldn't figure out <em>how</em> it did it.

Finally, I found FreeCodeCamp. I did the JavaScript algorithm stuff first, then went back and did the Responsive Web curriculum. When I got to Front End Libraries, I was breezing through it as well (I have been doing this for a while, don't feel bad if this wasn't the case for you) until I hit <a href="https://learn.freecodecamp.org/front-end-libraries/redux" target="_blank">the Redux portion</a>.

I was actually reading <strong>everything</strong>. Word. For. Word.

And then, lo and behold, the lights came on. I could see it. I had everything laid out before me in a single file and I could actually follow the logic of what all the pieces did and how they interacted. (I still don't know why I didn't think of that before...)

Let me stop for a minute and say, for the record, that I love the videos I watched and the courses I took. The majority of the instructors are super knowledgeable in these topics. But the problem I had was they were splitting the Redux code up into different files (which is proper to do) in a way that made it nigh impossible to put it together in my mind.

Why were they like that? The instructors were teaching <em>React-Redux</em>. They taught me how to use <code>connect()</code> to "wire-up" my React component to a Redux store. Which was awesome. But still left me confused.

I honestly don't think I ever even took into consideration that Redux was a thing on its own.

So, I created <a href="https://codepen.io/edlinkiii/pen/oRGdqd" target="_blank">this <em>Simple Redux Example</em> on CodePen</a> for anyone wanting to tinker with Redux as a stand-alone library.

<strong>Update:</strong>
<a href="https://dev.to/edlinkiii/simplified-redux-w-a-dash-of-vanilla-4klb">Follow-up post available here.</a>
How I published my first pip package
Tags: python, pip, pypi, github
Published: 2019-05-23 14:13:00

---
title: How I published my first pip package
published: true
description: An article on how I published my first package to PyPi and how you can do the same
tags: python, pip, pypi, github
cover_image: https://cdn-images-1.medium.com/max/1600/1*_Wkc-WkNu6GJAAQ26jXZOg.png
---

This is my first article on [DEV](https://dev.to) and first article related to programming.
I am a programming student and I am full of joy today as I published my first [package](https://github.com/prashantsengar/RedPy) on [Pypi](https://pypi.org/project/RedPy). 
This article will contain the things that I did to complete the feat.

## 1. Writing the code:
My package is a Python wrapper to download images from Reddit. It consists of a class that consists of a method that takes the input - an user-agent, subreddit name, and other inputs. 
To write the code to be uploaded as a package, you need to modularize it well. Each line of code should be inside a function or a class.
Writing objective of the program first will help in the process. Drawing flowcharts and/or for writing an algorithm will help as well. 
Follow the [PEP-8](https://www.python.org/dev/peps/pep-0008/) guidelines in your code. 

## 2. Testing the code: 
After you have written the code, a dry run should be the first step to figure out if there is a bug in your code. 

If you do not find any bug in the dry run, then test your code. 
Write a small script that imports your module and uses all the functions in it. 

If you do not find any bug in the test, voila, move on to the next step. 
If you find a bug, track it down and remove it. 

## 3. Code review *(optional)*: 
Although this step is optional, it is the most important one. Getting your code reviewed by other programmers is the best thing you can do. Other people can find bugs or bad programming practices in your code better than you can do. 
Hence, it is highly recommended to do this step. 
I learned a lot in this process and you will too. 

**Places where you can get your code reviewed-**
- [codereview.stackexchange.com](https://codereview.stackexchange.com)
- [r/python](https://reddit.com/r/python)
- [r/learnpython](https://reddit.com/r/learnpython)

## 4. Setting up the package for uploading and uploading the package
Writing a good Readme and uploading the code to Github should be the first step before uploading
There's a whole [documentation](https://packaging.python.org/tutorials/packaging-projects) of getting your package ready for uploading on PyPi but it misses a lot of details. 
I would recommend reading [this article](https://medium.com/@joel.barmettler/how-to-upload-your-python-package-to-pypi-65edc5fe9c56) by [joelbarmettlerUZH](https://medium.com/@joel.barmettler). 

Your package is finally uploaded to PyPi and it is available for users to use. Spread the word!	

Here is the link to the Github repo of my package - [https://github.com/prashantsengar/RedPy](https://github.com/prashantsengar/RedPy)
Create a CLI for R with npm
Tags: rstats, node, cli
Published: 2019-05-24 20:12:08

---
title: Create a CLI for R with npm
published: true
tags: rstats, nodejs, cli
canonical_url: https://colinfay.me/create-r-cli-npm/
---

How to build a CLI for R, with npm.

## Background

This blog post was triggered by a discussion on Twitter with [MartinSkarzynski](https://twitter.com/_ColinFay/status/1131205018068160515), who was looking for a way to build a CLI that launches an RScript.Here’s a way to do this using `npm`.

Please note that this blog post won’t teach you how to build the commandline tool, it will quickly go over the way to create a system-widecommand line interface, using npm.

If you want to learn more about building the utility, see this[fantastic series of blogposts](https://blog.sellorm.com/2017/12/18/learn-to-write-command-line-utilities-in-r/) by Mark Sellor.

Now, the idea is to have a CLI, i.e. a way to launch your utility with:

```
$ mytool

```

And that, system-wide.

## What you’ll need

- An R script (script.R) with in it, for example:
<!-- end list -->

```
#!/usr/bin/env Rscript --vanilla
cli::cat_rule("yeay")
cli::cat_bullet(Sys.time())

```

- `npm`, which you can get from [there](https://nodejs.org/en/download/).

## Let’s go

Create a new folder, and go inside it.

```
mkdir cli && cd cli

```

Create the R Script there.

```
echo '#!/usr/bin/env Rscript --vanilla' > script.R
echo 'cli::cat_rule("yeay")' >> script.R
echo 'cli::cat_bullet(Sys.time())' >> script.R

```

Try your script to see if it works:

```
Rscript script.R

```

Now launch an npm project:

```
npm init -y

```

(You can also run it without the `-y` to interactively add informationto the `package.json`.)

Now the important part: add a `"bin"` value in the `package.json`, withthe name of the bin you want to create, and the path to the script,relatively to the package file. Here is an example of a `package.json`(I removed some elements).

```
{
  "name": "cli",
  "version": "1.0.0",
  "description": "CLI example with npm",
  "bin" : {
    "clir" : "./script.R"
  },
  "author": "Colin Fay",
  "license": "MIT"
}

```

Install it globally (need sudo rights):

```
sudo npm link

```

And, voilà! Open your terminal, and you’re done!

```
clir


## ── yeay ────────────────────────────────────────────────
## ● 2019-05-22 22:36:29

```

## Other way to go

- See the [{littler}](https://github.com/eddelbuettel/littler) implementation
What do you wear to work?
Tags: discuss, career, question, computerscience
Published: 2019-05-23 13:23:56

The company I worked for before starting university have a casual/smart casual dress code; shorts, jeans, hoodies, and t-shirts. that sort of thing. which was good as that summer we were hit by a heatwave and the office had no air con. but when I went for the interview I did feel awkward as I was wearing a suit. 
I was just wanted to ask the DEV community about there experiences with different companies dress codes.
GitHub announces "GitHub Sponsors"
Tags: news, github
Published: 2019-05-23 13:13:46

---
title: GitHub announces "GitHub Sponsors" 
published: true
description: Discussing the news of GitHub sponsors.
tags: news, github
---

GitHub announced **[GitHub Sponsors](https://help.github.com/en/articles/about-github-sponsors)**, a new way to sponsor OSS maintainers.

{% twitter 1131477029730308096 %}

From the [website](https://help.github.com/en/articles/about-github-sponsors):
> Anyone with a GitHub account can sponsor anyone with a sponsored developer profile through a recurring monthly payment. You can choose from multiple sponsorship tiers, with monthly payment amounts and benefits that are set by the sponsored developer.

What are your reactions?
Terraform 0.12 General Release
Tags: terraform, cloud
Published: 2019-05-23 13:07:56

---
title: Terraform 0.12 General Release
published: true
description: Back in July of last year Hashicorp announced the preview of Terraform 0.12. As of yesterday (May 22nd) 0.12 is now in generally availability
tags: terraform, cloud
cover_image: https://blog.davidjeddy.com/wp-content/uploads/2018/07/hashicorp_terraform.png
---

<!-- wp:paragraph -->
<p>Back in July of last year Hashicorp announced the preview of Terraform 0.12. As of yesterday (May 22nd) 0.12 is now in generally availability.  Some of the highlights I am looking forward to are (but not limited to):  </p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>Incompatibilities and Notes</strong><ul><li><code>-var</code> and <code>-var-file</code>  correspond to declared variables, generating errors or warnings if not.</li></ul></li><li><strong>New Features</strong><ul><li>First-class expressions:  ami ="${var.foo}"  ->  ami = var.ami </li><li>The <code><a href="https://www.terraform.io/docs/configuration/expressions.html#for-expressions">for</a></code> express</li><li>Generalized "splat" operator </li><li>Nullable argument values </li><li>Revamped error messages</li><li>Generalized Type System</li><li>Structural Rendering of Plans</li></ul></li><li><strong>Other Improvements</strong><ul><li><a href="https://www.terraform.io/docs/configuration/functions/formatdate.html">formatedate</a> function ( ... still waiting for Unix timestamp support. #Hashicorp ...)</li><li>A new <code>pg</code> state storage backend allows storing state in a PostgreSQL database. </li></ul></li><li><strong>Bug Fixes</strong><ul><li>...a lot of fixes.</li></ul></li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":1650,"width":583,"height":387} -->
<div class="wp-block-image"><figure class="aligncenter is-resized"><img src="https://blog.davidjeddy.com/wp-content/uploads/2019/05/TheCloud_Box.jpg" alt="the cloud" class="wp-image-1650" width="583" height="387"/><figcaption>Is this how you computer?</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>All in all it looks like 0.12 shaped up to be a nice point release. I am looking forward to seeing how these improvements will help me bend "the cloud" the my will</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Stay tuned for a follow up when I explore how hard the migration from 0.11.x to 0.12.0 ends up being for a couple of current projects.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Additional Reading</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><a href="https://blog.davidjeddy.com/2018/07/11/terraform-0-12-preview-from-hashicorp">https://blog.davidjeddy.com/2018/07/11/terraform-0-12-preview-from-hashicorp</a></li><li> <a href="https://www.hashicorp.com/blog/announcing-terraform-0-12">https://www.hashicorp.com/blog/announcing-terraform-0-12</a> </li><li><a href="https://github.com/hashicorp/terraform/blob/v0.12.0/CHANGELOG.md">https://github.com/hashicorp/terraform/blob/v0.12.0/CHANGELOG.md</a> </li></ul>
<!-- /wp:list -->
Task Management
Tags: productivity
Published: 2019-05-23 13:04:10

---
title: Task Management
published: true
description: How I handle task management - a combination of software with pen and paper depending on the context.
tags: productivity
cover_image: https://thepracticaldev.s3.amazonaws.com/i/r7uuwnkkp2sh383lop92.jpg
canonical_url: https://tj.ie/task-management/
---

This was originally posted [on my blog](https://tj.ie/task-management/).

Ask 10 people how they approach task management, and you might get 10 different answers. Not so much philosophically, but rather physically: how do you store or keep track of them?

Over the years I thought that software would solve my problems with the sheer convenience of it all:

I can sync tasks between my phone and laptop
Less context-switching when I’m working
Quick to tap/type out new tasks
Categorisation of tasks
Reminders
Not trying to be dramatic or anything, but many of these advantages became problems when I applied it to my work.

When I was starting out as a developer, I was hungry to learn and prove myself as a capable worker. Not bad things at all. But, when the day is done, it’s hard to switch off when anytime you pick up your phone you can see tasks waiting for you. I was thinking about the tasks waiting for me tomorrow, and going over what I worked on that day.

This went on for a few years, and it got exhausting. It’s my own doing; no-one asked me to bring my work home with me (usually), and sometimes it’s necessary. As time went on I started working smarter and setting realistic expectations. This gave me some breathing room to think about task management, and I decided to switch up my approach.

For my personal life, I still use software. I moved between Wunderlist and Todoist before settling on TickTick. They all do much the same thing. This works great for the features listed above, mostly for portability and access on the go. I keep track of shopping lists, article ideas, housework etc…

For work, I use a physical journal. I use it to break the “conveniences” - everything stays in the journal, nothing leaks out. It’s like a quarantine of sorts. I appreciate that it makes me stop and think about what I’m doing, and I enjoy writing as well. Keeping up legible cursive writing is something I enjoy, especially when I write out a nice “f” - that can make my day.

It also gives me a routine. I start every day away from the computer going over what waits for me. Once I check my emails and talk to people I’ll append new tasks to the list. At the end of the day, I’ll do up my tasks for tomorrow and carry over anything that didn’t get done. Closing the journal signals to my brain that work is done.

I have a few journals filled up now, and it’s fun every now and then to look over them and see what I was up to this day 3 years ago. I can laugh at some notes I’ve written, or wince in pain at the tasks of a nightmare project. It reminds me how far I’ve come.