teleren/devto huggingface dataset:
Getting Started with Angular
Tags: angular, newbie, typescript
Published: 2020-03-22 04:25:51

---
title: Getting Started with Angular
published: true
description: This tutorial is about getting started in Angular. If you are a newbie scratching your head around various Angular Tutorials around the web, this is a great place for you.
tags: angular, newbie, typescript
---

First of All, what is Angular?

Angular is a open source typescript based framework used to develop Single Page Applications(SPA).

Okay, now what the heck is SPA?

This was the question, i stumbled upon when i first started learning Angular. So  Single Page Application(SPA) is a advanced approach where the data is not rendered statically from HTML pages but through JavaScript(in our case , typescript).

Now, How do we get started with Angular?

To get started with Angular you need to install [Angular CLI] (https://cli.angular.io/). 

First, you need to install Angular CLI from using the following command:

```
npm install -g @angular/cli
```

The -g flag tells command line to install Angular globally. The latest version of Angular is v9.1.0.

You can follow the documentation at the [Angular CLI](https://cli.angular.io/) on how to setup a new project. 

After, you have setup a new project then you have to open the project inside you favorite Editor. I am using Visual Studio Editor, you can use any other editor as per your needs. 

Let's create a application which displays a table of famous NBA players.

For reference, we will be display result as follows ![](https://dev-to-uploads.s3.amazonaws.com/i/qzvmiuq6adkzqcsbz74v.PNG).

Now, we need to generate a new angular using the command:

```
ng new example-project
```

And after that we need to add bootstrap to our angular project by including the following CDN link in our index.html:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

After that we need to go to [Bootstrap Docs](https://getbootstrap.com/docs/) and go to tables section. 


Now we are gonna type the code in our project. After we have type the code in our project, our application will look something like this.

![](https://dev-to-uploads.s3.amazonaws.com/i/9smy6ggdj2uma9oaql9f.PNG).

You can see the result by running the following command in your terminal:

```
ng serve -o
```

This will compile your project and open it in your favorite Browser. 

That's all for this article. In the next article we will try and replace the static data with Real-time data.

Here is the link to the [Gitlab Project](https://gitlab.com/manish169/example-project) if anyone is interested.
Hack the crisis to fight the Corona virus - how I got to tackle the epidemic as a developer
Tags: startup, community, webdev
Published: 2020-03-22 01:23:25

The world is fighting with the Corona Virus. On 13-15 March, Accelerate Estonia and Garage48 organized an online hackathon called "Hack The Crisis" to find solutions to the problems caused by the virus. In less than 90 minutes, over 650 participants signed up. After the event, many similar initiatives started to pop up all around the world.

The video below is about my experience of participating as a developer in an event that was truly one of a kind.

{%youtube 3YcdHaOJTXw %}

In the end, more than 1000 people contributed and some really remarkable solutions were created.

For example:
- Ventit Breathing apparatus
- Share Force One - workforce sharing platform that connects B2B sides for temporary workforce exchange 
- Corona-tracker by Velmio
- ...and many others (find more information from here http://garage48.org/blog/fighting-the-covid-19-pandemic-with-the-power-of-community)

My team's project:
https://www.kriisiabikeskus.ee

Read more about the event and the virus
- [http://garage48.org/blog/fighting-the-covid-19-pandemic-with-the-power-of-community](Garage48 blog)
- [https://www.forbes.com/sites/robertwolcott/2020/03/15/hack-the-crisis-6-lessons-from-estonias-coronavirus-crisis-response/#712d4f6e4fca](Forbes on Hack the Crisis)
- [https://www.worldometers.info/coronavirus/](Worldometers info about Corona)
NPM Start Problems
Tags: react, javascript, npm
Published: 2020-03-21 22:48:45

Lately there's been a lot of weird things going on when I go to create a new React App using create-react-app <app name>. This is either done through npm start not activating, yarn not being initiated with *Yarn Start* or whatever else the problems list may give me. 

I would do everything the terminal said like "delete package-lock.json" "delete NPM folder" and whatever else might be going on. 

One solution I found for this is inside your NPM folder in your main computer directory is to delete the webpack folder. It's not the most ideal solution, but it seems to work for me. Until today. 

Today was a whole whirlwind of issues. Not only did those issues continue to come up, but deleting my webpacks folder as I mentioned from NPM didn't help either. Now as far as I know, deleting NPM extensions from the root of your computer isn't going to hurt anything as it'll be rewritten when you run yarn or npm i or npm install.  Good thing huh?

Anyways something I learned to fix this problem was to give the computer a good ol' restart. Shocker huh? Then follow along the steps it gives you again and it should work. 

Another work around can be to run *yarn install* then *yarn update*. That can give your project a new life. I'm not sure why this is a solution as it should update at times for you, but giving it a kick in the butt seems to help too.
Adeus, rewire
Tags: typescript, testing, contributorswanted
Published: 2020-03-22 00:38:31

Acabei de criar uma [issue](https://github.com/microsoft/TypeScript/issues/37513) no projeto da linguagem `Typescript` sugerindo a adição de uma opção que permite expor todos os membros de módulos e classes. Já criei uma [implementação inicial](https://github.com/FilipeBeck/TypeScript) que, até o momento, está funcionando como esperado (tanto a emissão dos arquivos quanto a inferência).

Qualquer contribuição será muito bem vinda 😀
New Series: Blogging - Quick Tips
Tags: writing, blogging, productivity
Published: 2020-03-22 00:12:01

---
title: "New Series: Blogging - Quick Tips"
published: true
description: Bite-sized lessons to help you write a better blog post. The First Lesson - Keep a Daily Journal.
tags: writing, blogging, productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/gqxg0xkmaeaqdlyl9zde.jpg
series: "Blogging - Quick Tips"
---

I published an article on February 22 titled [3 Tips to Develop a Blogging Habit](https://dev.to/rachel_cheuk/3-tips-for-developing-a-blogging-habit-3acc). It was the first post in a new series titled "Become a Better Blogger". 

To complement it, I'll also be starting a separate and parallel series: Blogging - Quick Tips. This series provides bite-sized lessons to help you write a better blog post. Each post in this series will focus on one item at a time.

If you're interested, make sure to follow me [here](https://dev.to/rachel_cheuk) and on [Twitter](https://www.twitter.com/rachel_cheuk).

To begin, here's the first entry: [Effective Journaling](https://dev.to/rachel_cheuk/blogging-quick-tip-journaling-5ci8)!
This is the best blog post ever
Tags: automation, development, devops, wat
Published: 2020-09-11 19:14:35

---
title: This is the best blog post ever
published: true
date: 2020-03-22 00:00:00 UTC
tags: [automation, development, devops, wat]
canonical_url: https://mrpowerscripts.com/best-blog-post-ever/
---

Do you disagree? Okay, I know you haven’t read it yet, but you probably had some preconceived idea that it wasn’t - didn’t you? A small bit of bias? None? You didn’t even weigh the possibility a bit? Well, if you don’t think it is - Why not? What doesn’t it have?

See, here’s the thing about this blog post. It isn’t afraid of change. It’s a living document. It [lives here in GitHub](https://github.com/MrPowerScripts/MrPowerScripts.com/blob/master/_posts/2020-03-22-best-blog-post-ever.md), where it is committed to being the best blog post ever. So if it isn’t, tell me why. You can do it here on [Discord](http://bit.ly/mrps-discord), [GitHub](https://github.com/MrPowerScripts/MrPowerScripts.com/issues), [Twitter](https://twitter.com/MrPowerScripts), or even by [e-mail](mailto:playingwithpowershell@gmail.com). This blog post can take on the challenge. This blog post isn’t afraid to be the best. This blog post IS the best.

Thanks for reading!
Code like a Fullstack girl updates #2
Tags: codenewbie, codequality, node, javasc
Published: 2020-03-21 23:58:45

Hi, everyone!

It's good to write in a daily basis and I really want to adapt my routine so I can do this more frequently. I'm trying to be more healthy, eating better, doing some daily exercising (I used to do it only thrice a week), trying to drink 2 litres of water a day (at the moment I wrote this on the Portuguese blog, I had drunk 1l, but as I translate this post, I've already reached 2!) and this kind of things I only think about when I'm - theoretically - bored. I had reached my limit when I tried to drink lemon and cucumber water in the morning. I am not a fan of it neither want to try it again.

These days, as I've already told you, have been wonderful for my studies and my main hobby: to read and to watch things. I also told in the last post I've finished Anne With An E, and I started Itaewon Class today. I still haven't watched it all (until now), but I think the storyline is really interesting and I'm hoping I will be able to get along with it.

This (should be) the second post about the [Code Like a Fullstack Girl Bootcamp](https://web.digitalinnovation.one/track/code-fullstack-girl), from Digital Innovation One. As I had mentioned before, I did 14 exercises in the total but still think about it the same way: I should be able to search more if I'm looking for a complete formation. Classes are good and explanatory, but are way too theoretical and the challenges are just video callings with broken audio.

I hope to complete it today, but I'll only post my final impressions tomorrow. It's not as heavy as I thought it would be, but I am not sad about it. I couldn't expect that much of an online course. They gave me essential topics and I should study, exercise and learn them more deeply if I really want to do it.

With quarantine, I had enjoyed each one of the 24 hours of a day studying or doing something else (like sleeping? That is important, don't forget), and making this Bootcamp available was a great idea. I think about paying more attention to this platform these days to see if they make something else (but related) available, since most courses of them are closed, and the open ones are not of my interest.

Beyond studying, I have been thinking about my academic and professional future. I had signed up for many other classes, including UFRGS-Lumina's Deconstructing Racism Practically. I like the didatics of their courses. There is one, for example, about Greek poetry, in which the professor sings Sappho's (and many others') poetry, and talks about the poets' lives. At the ending, it has a small quiz and that's it.

What have you done these days?
What hacky dev workarounds have you done before?
Tags: watercooler
Published: 2020-03-21 23:23:22

---
title: What hacky dev workarounds have you done before?
published: true
description: After seeing a big company site reusing an offer component as a warning, this question came to my mind: What hacky dev workarounds have you done before?
tags: watercooler
---

<abbr title="Too long; didn't read">TL;DR</abbr> version: **What are some examples of _hacky_ dev workarounds that you have used to speed up a feature release?** Do you prepare your website/app for unexpected features and how?

------

<small>Long version:</small>

Like many people around the world, we are quarantined at home and we were looking at pick-up options from different stores. While visiting [Target's website](https://www.target.com/), we noticed that many of the products had a warning label "Due to high demand, item may be unavailable or delayed":

![Screen capture from a price tag on Target.com with the message "Due to high demand, item may be unavailable or delayed Offer details"](https://dev-to-uploads.s3.amazonaws.com/i/dvr00znzphrldh6tgmkm.png)

That label seemed suspiciously similar to the promotion/sales label that they normally have. The message even says "Offer details" and when clicked opens a panel with the "offer" information:

![Screen capture of the panel that opens when activating the "Offer details" link. The text says: "Offer details: Due to high demand, item may be unavailable or delayed. Expires Apr 30](https://dev-to-uploads.s3.amazonaws.com/i/tddlf7i70cgmzlyea8ns.png)
<figcaption>Target sees the end of coronavirus by April 30th... or maybe they'll extend the offer :)</figcaption>

So out of curiosity, we checked the HTML code and found that that was actually what was going on! The warning message is implemented by marking the product as a promotion:

![Screen capture of the HTML code for the "Offer details" link showing class names like PromotionWrapper or offer-details](https://dev-to-uploads.s3.amazonaws.com/i/ykq2e96tr501dhn35t34.png)
<figcaption>As a side note: the Target.com site has a bad case of <a href="https://dev.to/alvaromontoro/divitis-and-other-itis-3k9l">divitis</a></figcaption>

This seems like an interesting curiosity –and one that doesn't surprise me, to be honest. I can see myself in a meeting discussing the situation with the team: "_When will this warning message be ready?_", "_In one to two days of development_", "_Add one more day for testing_", "_And one more for a11y testing!_", "_Don't forget the deployment and release times_", "_****! That's too much! We need it now!_"... "_Hey, how about if we use the offer message instead?_"

I can remember reusing components (especially banners) in a hacky way to make them available asap for implementation. The result was not ideal, but they did the trick. Kind of like this Target thing.

**When building a website or app (especially e-commerce), do you have something in place for situations like this one? What are some examples of _hacky_ dev workarounds that you have used to speed up a "feature" release?**
Using Python3's ‘venv’ with tox
Tags: python, virtualenv, testing
Published: 2020-03-21 22:27:28

> *Using the built-in Python module in favor of `virtualenv` to create your testing or project automation environments.*

`tox` is a generic virtualenv management and test command line tool, especially useful for multi-environment testing. It has a plugin architecture, with plenty of both built-in and 3rd party extensions. 

This post assumes you are already familiar with `tox` and have a working configuration for it. If not, check out [its documentation](https://tox.readthedocs.io/).

In order to make `tox` use the built-in virtual environment `venv` of Python 3.3+, there is a plugin named [tox-venv](https://pypi.org/project/tox-venv/) that switches from using `virtualenv` to `venv` whenever it is available.

{% github tox-dev/tox-venv no-readme %}

Typically, `venv` is more robust when faced with ever-changing runtime environments and versions of related tooling (`pip`, `setuptools`, …).

To enable that plugin, add this to your `tox.ini`:

```ini
[tox]
requires = tox-venv
```

That merely triggers `tox` to check (on startup) that the plugin is installed. You still have to add it to your `dev-requirements.txt` or a similar file, so it gets installed together with `tox`. You can also install `tox` globally using `dephell jail install tox tox-venv` – see the first post in this series for details.

The end result is this (call `tox -v` to see those messages):

```ini
py38 create: …/.tox/py38
  …/.tox$ /usr/bin/python3.8 -m venv py38 >…/log/py38-0.log
```

And there you have it, no more virtualenv package needed. 🎉 🎊
Recreating Facebook's Content PlaceHolder
Tags: react, animation, loader, dailyanimation
Published: 2020-03-21 22:02:51

---
title: Recreating Facebook's Content PlaceHolder
published: true
description: How to recreate a content placeholder animation 
tags: React, animation, loader, daily animation
---


Every day I challenge myself to do some kind of animation with CSS and sometimes I write about how I made it.

## Today's Animation

Facebook is updating the look of their website and today I will be trying to replicate their new content loader.

Here's what it looks like. 

{% codesandbox facebookloader-mckbi %} 

I really like Facebook's version of a content loader since it just animates through the background color. This means it's hard to notice if the browser blocks and interrupts the animation. Not a big deal.  Just a nice touch.

Normally you don't see the animation for long anyway since it disappears as soon as the content loads.  

Here's the JSX

```javascript
function FaceBookLoader() {
  return (
    <div className="FaceBookLoader">
      <Loader />
    </div>
  );
}

function Loader() {
  return (
    <div className="LoaderWrapper">
      <div className="Circle" />
      <div className="LineWrapper">
        <div className="LineTop" />
        <div className="LineBottom" />
      </div>
    </div>
  );
}
```

The CSS

```css
:root {
  --color: #3e4042;
  --animation: colorChange 2s linear both infinite;
}

@keyframes colorChange {
      0% {
        background-color:#3e4042;
      }
      50% {
        background-color: #262729;
    }
    100% {
      background-color:#3e4042;
    }
}

.Circle {
  /*...*/
  background: var(--color);
  animation: var(--animation);
  /*...*/
}

.LineTop,
.LineBottom {
  /*...*/
  animation: var(--animation);
  background: var(--color);
  animation-delay: .2s;
  /*...*/
}
```
The main takeaway should be the animation of the background color.  It's pretty simple.  Just animate between the main color and a darker one.  Also, I've added an animation delay on the two lines.  That way, it flows a little better.

I hope you found it interesting! Thanks for reading!
How much do you care about the office space you work in?
Tags: discuss
Published: 2020-03-21 20:12:46

---
title: How much do you care about the office space you work in?
published: true
description: Is a nice office space something important?
tags: discuss
---
Now, that most of us are working from home, I've started thinking about the different office spaces I've had the opportunity to work in. I've already experienced a couple of different setups, including: 
- low-budget hacker-oriented office without a proper social space;
- fancy 4-6 people rooms with nice equipment and cool social space;
- huge, noisy open-space with people from different departments, doing different things;
- my own room, while working 100% remotely;

A couple of weeks ago, one of my managers said: '_why care about the office, it's just another sad place, like every other workplace_'. It struck me. I don't agree with that sentence at all. For me, working in different spaces resulted in much different energy and motivation levels, while also directly affecting my ability to stay focused.

And you? How much do you care about a nice office space?
We started a new open source project: markdown2document
Tags: opensource, library, project, java
Published: 2020-03-21 21:55:39

---
title: We started a new open source project: markdown2document
published: true
description: You can turn markdown files to a PDF or HTML document with the help of this java library. You can also use CSS styles to format your documents.
tags: open-source, library, project, java
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/pg9yqc8aescimsyjvve6.png
---

So it was the second time when we had to turn markdown content to pdf in a project... so I simply extracted the relevant code, then I only had to put it into a shape so that it can be used in many ways.

Currently you can:
- add markdown content/files (even as a link)
- add style (css as link or text)
- generate pdf
- generate html

Please check it here:

{% github floppylab/markdown2document no-readme %}

Upcoming stuff:
- use as a command line tool
- publish in maven central

All contributions are welcome :)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pg9yqc8aescimsyjvve6.png)
I Built Coronavirus Live Monitor - stats, news, and WHO press releases on the virus all in one place
Tags: webdev, covid19, showdev
Published: 2020-03-21 21:50:31

---
title: "I Built Coronavirus Live Monitor - stats, news, and WHO press releases on the virus all in one place"
published: true
description: "Today, I am proud to release my latest web app and project: Coronavirus (COVID-19) Live Monitor, your hub for news and information on the Coronavirus outbreak. The code can be found on the GitHub repo. Go check it out!"
tags: #webdev, #covid19, #showdev
cover_image: "https://xtrp.io/api/content/static_files/i-built-coronavirus-live-monitor-stats-news-and-who-press-releases-on-the-virus-all-in-one-place/photo_dev.jpg?v=3"
---

Today, I am proud to release my latest web app and project: [Coronavirus (COVID-19) Live Monitor](https://covid19.xtrp.io/), your hub for news and information on the Coronavirus outbreak. The code can be found on [the GitHub repo](https://github.com/xtrp/Coronavirus-Live-Monitor).

Go check it out!

![Site Demo](https://raw.githubusercontent.com/xtrp/Coronavirus-Live-Monitor/master/site_demo.png)

## Three Sections: Stats, Press Releases and Health Resources, and Latest News

The site is split into three key sections, each with latest information on the virus.

The stats section includes a total case count, as well as total deaths and recoveries and their percentages within the total case count.

The WHO press releases and health resources section includes a video of the latest WHO press conference about the virus and links to latest situation reports and WHO news, as well as various links to health resources such as the NHS (U.K.) and the CDC (U.S.A.).

Finally, the latest news section includes news articles about the virus from a vast array of news sources. News on the virus is also sorted into country based the user's IP address, allowing for users to read news in their own language, localized for their area.

## How It Was Built (shortened version)

The frontend part of the site was built in plain HTML, CSS, and vanilla JavaScript (ES6) &mdash; no frameworks and almost nothing on the server-side.

I built it pretty quickly, in around 2-3 days, and I focused a lot on making it clean, effective, and easy to use. The main goal was to put all necessary information about the outbreak in one place.

If you'd like to read more about the technical details of this, I've written a more detailed post on my personal website.

## Go Check it Out!

Feel free to leave any feedback about this project in the comments, and I hope you take a look at the site if you have a chance.

The Site: [Coronavirus (COVID-19) Live Monitor](https://covid19.xtrp.io/) and if you like it, [give it a ⭐ on GitHub](https://github.com/xtrp/Coronavirus-Live-Monitor).

Thanks for scrolling. 

*&mdash; Gabriel Romualdo, March 21, 2020*