teleren/devto huggingface dataset:
#100daysofcode [day - 04]
Tags: html, javascript, tailwindcss, github
Published: 2021-08-25 21:26:21

Today is the fourth day of my 100 days coding challenge and today i tried to make an to do app .
Here is the Code link : https://lnkd.in/gbNK9yUw
Here is the live site :https://lnkd.in/gXNq8Exw
Simplify Typescript import
Tags: path, import, config, typescript
Published: 2021-09-15 13:34:19

---
title: Simplify Typescript import
published: true
date: 2021-08-25 21:03:02 UTC
tags: path,import,config,typescript
canonical_url: https://medium.com/@redin.gaetan/angular-for-everyone-simplify-typescript-import-e81fa0bcfda7
---

### Simplify TypeScript import

#### How to save your time using imports?

![](https://cdn-images-1.medium.com/max/1024/1*dSbp3x6dNKlhA0XWZUUxqw.jpeg)

Hey, I’m sure you have already done something like:

```
import { MyService } from '../../../../../core/services/my-service.service';
```

Um, not sexy right?

But there is an easy solution to solve this.

Just open your tsconfig.app.json, and add paths option like this in the compilerOptions:

```
{
    ...
    "compilerOptions": {
        ...
        "paths": {
            "@core/*": ["src/app/core/*"],
            "@environments/*": ["src/environments/*"],
            "@feature1/*": ["src/app/feature1/*"],
            "@feature2/*": ["src/app/feature2/*"],
            ...
        }
    }
}
```

You can write as many as you want and the result will be:

```
import { MyService } from '@core/services/my-service.service';
```

No matter where you import it now, you will have this to write.

Thanks for reading.

### Learn More.

[Angular for everyone: All about it](https://link.medium.com/SXPQgRn7xjb)
Simple Deno HTTP server running in Nanos unikernel
Tags: deno, ops, nanos, typescript
Published: 2021-08-25 21:11:15

---
title: Simple Deno HTTP server running in Nanos unikernel
published: true
description: 
tags: deno, ops, nanos, typescript
---

This short post shows how to get a [self-executable](https://deno.land/manual@v1.13.2/tools/compiler) Deno HTTP server to run in [Nanos](https://nanos.org/) using [Ops](https://nanovms.gitbook.io/ops/basic_usage#build-and-deploy-nanos-unikernel).

## The server

```typescript
const port = Number(Deno.env.get('PORT'));
const listener = Deno.listen({ port: port });

console.log(`http://localhost:${port}`);

for await (const conn of listener) {
  (async () => {
    const requests = Deno.serveHttp(conn);
    for await (const { respondWith } of requests) {
      respondWith(new Response("Hello world"));
    }
  })();
}
```

## Compilation and local deployment

```sh
deno compile --allow-env --allow-net hello.ts
ops run -e HOME=/ -e PORT=8000 -p 8000 hello
```

The trick is to set the HOME variable. It can have any value, but `/` feels right.

## Summary

In this post, we have seen a minimal Deno HTTP server working in a Nanos unikernel.
Listen to S6E3 of DevDiscuss: "Ethical Design" with Sarah Fossheim & Aubrey Blanche!
Tags: discuss, podcast
Published: 2021-08-25 21:10:18

---
title: Listen to S6E3 of DevDiscuss: "Ethical Design" with Sarah Fossheim & Aubrey Blanche!
published: true
description: Listen to S6E3 of DevDiscuss!
tags: discuss, podcast 
series: DevDiscuss Season 6
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oq0cqbrknt30aq1bcox1.png
---

## Listen to DevDiscuss S6E3 right here on DEV:

{% podcast https://dev.to/devdiscuss/s6-e3-what-makes-ethical-design-in-your-product-and-your-company %}

_DevDiscuss is the first original podcast from DEV all about the burning topics that impact all our lives as developers._

**This week, we talk about the components of ethical design and how to view your product or company through this necessary lens and approach to creating software.** 

### Host:
- @ben — Creator of DEV & Co-Founder of Forem
  
### Guests: 
- [Sarah Fossheim](http://twitter.com/liatrisbian), Creator of the Ethical Design Guide
- [Aubrey Blanche](twitter.com/adblanche) — Director of Equitable Design at Culture Amp.

We hope you enjoy DevDiscuss this week! Please let us know your thoughts about the episode in the comments below — or on Twitter ([@thepracticaldev](https://twitter.com/thepracticaldev) ).

![Animation of megaphone](https://media.giphy.com/media/l0WfNv3Rlb7NDZtPRT/giphy.gif?cid=ecf05e471f1lf1cbem8y6rgsabrfe0r6clzj2oygd2vq26s3&rid=giphy.gif&ct=g)

---

_You can [follow DevDiscuss](dev.to/devdiscuss) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## Quick Listening Links
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s6-e3-what-makes-ethical-design-in-your-product-and/id1513053883?i=1000533071821)
- [Spotify](https://open.spotify.com/episode/5sgt1daQOBfNnCMCXIhN1E)
- [Google](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5kZXZwb2RzLmRldi9kZXZkaXNjdXNzX3BvZGNhc3QueG1s/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZkaXNjdXNzLzQ0?sa=X&ved=0CAQQkfYCahcKEwiArsj6ic3yAhUAAAAAHQAAAAAQCg)
- [Listen Notes](https://www.listennotes.com/podcasts/devdiscuss/s6e3-what-makes-ethical-w5mCBaK6lxZ/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevDiscuss-p1324596/?topicId=165347555)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [DEV Pods Site](http://devpods.herokuapp.com/podcasts/devdiscuss/episodes/183)

---
_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- _Our season six sponsors: [CockroachDB](cockroachlabs.com/devdiscuss) & [Scout APM](https://www.scoutapm.com/devdiscuss)!_
Welcome Thread - v139
Tags: welcome
Published: 2021-08-25 21:04:07

---
title: Welcome Thread - v139
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Happy Pokémon](https://media.giphy.com/media/8UGGp7rQvfhe63HrFq/giphy.gif?cid=ecf05e4706pyve6wjcdjzye8s29u2tq6zxp2t9318mcbeb44&rid=giphy.gif&ct=g)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Haciendo deploy de una app en angular a GitHub Pages
Tags: angular, github, npm, gedgonz
Published: 2021-08-25 21:02:37



Muchos de nosotros cuando terminamos un proyecto y este es más frontend que backend queremos compartirlo con nuestros amigos o simplemente queremos mostrarlo en nuestro portafolio, es por ello que acá te muestro una pequeña guía en donde te muestro paso a paso a hacer un deploy a un host gratuito, está vez lo haremos con GithubPages. 

### Paso 1
Vas a necesitar crear un repositorio en tu github

![Creación del repositorio](https://res.cloudinary.com/gedgonz/image/upload/v1627790386/1_eznxk7.png)

### Paso 2
Vas a necesitar un proyecto angular, ejecuta el siguiente comando para crear tu proyecto

```js
ng new app-name
```
### Paso 3
Instale Angular CLI gh-pages (https://www.npmjs.com/package/angular-cli-ghpages)

Hay una herramienta a su disposición que puede utilizar para implementar fácilmente su aplicación angular en gh-pages, la herramienta angular-cli-pages.
La herramienta angular-cli-pages se usa como un comando en la CLI angular con el propósito de la implementación. 

Para instalarlo, ejecutemos este comando en nuestra terminal

```js
npm i angular-cli-ghpages
ng add angular-cli-ghpages
```
#### Nota: 
Este comando instalará angular-cli-ghpages globalmente en su sistema operativo. No es necesario que lo instale de nuevo en caso de que necesite usarlo en el futuro, no es necesario ejecutar nuevamente el primer comando una vez este instalado globalmente.

### Paso 4
Implementar en gh-pages

Después de crear la aplicación, ahora puede implementarla en Github Pages usando la herramienta angular-cli-ghpages

Ejecute el siguiente comando en su terminal para implementar la aplicación, asegurese de escribir correctamente el nombre de su proyecto y que se encuentre dentro de las diagonales //

```js
ng deploy --base-href=/RickAndMorty/
```

### Paso 5
Una vez que desplegué su aplicación angular diríjase a su repositorio y en la sesscion de settings 

![Configuración del repositorio](https://res.cloudinary.com/gedgonz/image/upload/v1627791146/2_alpsoj.png)

de clic en la siguiente sección para obtener la url de la pagina

![Configuración del repositorio](https://res.cloudinary.com/gedgonz/image/upload/v1627791146/3_p96uj6.png)

le mostrara la url y ya podrá acceder a ella para ver su app

![Configuración del repositorio](https://res.cloudinary.com/gedgonz/image/upload/v1627791146/4_labnit.png)

![web](https://repository-images.githubusercontent.com/381210182/c9263997-0b9e-4fab-ab46-61432263b5d1)

### Nota
GitHubPages dura al rededor de 30 segundos en aplicar los cambios y mostra la app, siga los pasaos a como se inidcan para que no resiva el 404 de github

te dejo el link del proyecto del ejemplo: [Rick&MortyApp] (https://github.com/GedGonz/AppRickAndMorty) 

Espero esto te ayude en tus implementaciones y pruebas. Saludos!!
Applying for jobs before finishing bootcamp? [VIDEO]
Tags: resume, linkedin, bootcamp, codenewbie
Published: 2021-08-25 20:38:32

Have you been considering applying for coding jobs before graduating from your bootcamp? Almost everyone will tell you that waiting to apply until after graduation is a better option, and technically, they would be correct. 

But what if you're strapped for time and really need to get your coding career started fast? 

What is the earliest you can start preparing your LinkedIn and resume, and when should you realistically begin applying for coding jobs? 

What if you don't have a portfolio or any real world experience? 

You might think it's impossible but anyone that's worked in the bootcamp industry for a while will tell you they've seen it happen.

In the video below, Jason Humphrey, a seasoned bootcamp mentor, senior engineer, and hiring manager, will explain how it's done. 


{% youtube jOgZ20R2atk %}


Still considering applying for coding jobs before you finish bootcamp? Please read on, and find out what you are in for. 

If you’re wondering about what you need to do to get hired, then you’re in the right place. Jason has spent the last 7 years successfully mentoring and coaching thousands of students at Thinkful and other bootcamps. He knows exactly what employers are looking for in junior engineers. 


**READ MORE: [Applying To Coding Jobs Before Finishing Bootcamp? What You Need To Know
](https://codingcareerfastlane.com/ready-to-apply-for-coding-jobs/)**
Explore Animation in SwiftUI & Flutter - Introduction
Tags: ios, swift, flutter, dart
Published: 2021-08-25 20:36:29

In this series, we will learn the many techniques and ways of translating your ideas for animation from the ground up. Animations are what really set apps apart from the crowd, because they are interactive, and make the app come alive. So first, let's answer some questions.

## What is Animation?
- Animation is the change of an object's state from one state to another over time.

## Why do we need Animation?
- We need it because it makes our app more lively and provides a better user experience too, we humans tend to interact better with a dynamic environment.

## When do we use animation?
- When we want to direct the user's eye to an important element on the screen.
- We want to provide feedback that the action is in progress or that the operation was successfully performed.

## 🚫 DO NOT !!
- Don't try to use too many animations, or else you risk turning them into a nuisance, So, choose them wisely.

Now we know why we need animations in our app. Tomorrow we'll start getting our hands dirty by making some animations and explaining some important stuff.
UI Dev Newsletter #71
Tags: webdev, html, css, javascript
Published: 2021-08-25 20:09:06

## Links


[How to find the cause of horizontal scrollbars](https://bit.ly/3kiWSyf)
Kilian Valkhof explains what causes horizontal scrollbars and shows some techniques for finding horizontal scrolling issues.


[Star Rating: An SVG Solution](https://bit.ly/3msQbMS)
Ahmad Shadeed goes through the SVG solution for star rating systems and how it works for different scenarios.


[What I learned from Software Engineering at Google](https://bit.ly/3jeKKiR)
Swizec Teller shares a recap of lessons after reading the “Software Engineering at Google” book.


[Does shadow DOM improve style performance?](https://bit.ly/385CeMI)
Nolan Lawson tries to answer this question by showing how shadow DOM works and by benchmarking the selectors.


[HTML Video Sources Should Be Responsive](https://bit.ly/2XEC64A)
Scott Jehl proposes a solution for responsibly-sized, responsive, contextually-sized videos.


[NProgress.js](https://bit.ly/3865Ycc)
Rico Sta. Cruz shares a nanoscopic progress bar featuring realistic trickle animations to convince your users that something is happening!


[View Source](https://bit.ly/3sDVTww)
Neatnik shares a tool to view the source of any web page on the internet that could be very handy, especially on mobile devices.


[The joy of sharing an open source project on Reddit](https://bit.ly/3kjADZ0)
Per Harald Borgen shares a tweet with a negative comment from Reddit that sums up the everyday experience of using Reddit.


## Just for fun

[The Hitchhiker's Guide To The Galaxy - Infocom interactive fiction](https://bbc.in/3gkXTVu)
Play a 1984 interactive fiction game written by Douglas Adams and Steve Meretzky and published by Infocom.

## Self-promotion

[Nightmare DX (Developer Experience): Shopify](https://bit.ly/3jfDpj3)
I published an article about Shopify and its (un)friendliness for developers.


**Happy coding!**

[Subscribe to the newsletter here!](https://buttondown.email/starbist)
Making MCQ quiz in JavaScript
Published: 2021-08-25 20:02:41

## Hey there, Javascript developers 👩‍💻
In this article, we are going to see how to make a simple quiz (MCQ) in javascript !!

### Problem Statement
Prepare a Quiz and enable the user to play the quiz and calculate scores based on the answers chosen by the user.

## Tech Stack Used
Html, CSS, and Javascript. This is beginner friendly application that any newbie can try to make the concept more clear and for good coding practice.

okay, this sounds interesting but the question is where to start?

I prefer to build the HTML part at first so that we can get an idea about the app which we are going to develop.

then develop a javascript file to form logic around the application and to make sure that wiring between HTML file and javascript file is good for that you can do a dry run by using console log.

and last I prefer to do css part because I am not good at css but you can do it simultaneously. so let's start coding with the first HTML file.
```
  <form id="quiz-form">
      <div>
          <h2 >Triangle Quiz</h2>
          <p>1. What is the third angle for the triangle where angle1 = 45° and angle2 = 
           45°?</p>
      </div>
  </form>

```
Here I am using the form element to make a quiz because in javascript form element is used as a documenting section for submitting information. nowhere inside the form element, ideal practice is making separate div element for every new question. you will see ahead why I am saying this.

now as this is MCQ quiz we need 4 options. to give options we are using input element but in input, we are using type as "radio".

`why type="radio"`
because radio represents the collection of radio buttons describing related options.

`Note 1:` radio buttons of all options should share the same name.

`Note 2:` The value attribute defines the unique value associated with each radio button. The value is not shown to the user but is the value that is sent to the server on "submit" to identify which radio button was selected.

`Note 3:` Always add the tag for best accessibility practices!
```
<form id="quiz-form" >
        <div>
            <h2 >Triangle Quiz</h2>
            <p>1. What is the third angle for the triangle where angle1 = 45° and angle2 = 45°?</p>
            <label><input type="radio" name="question1" value="45°"/>45°</label>
            <label><input type="radio" name="question1" value="60°"/>60°</label>
            <label><input type="radio" name="question1" value="90°"/>90°</label>
        </div>

    </form>
```
now we have the question format ready we can make quiz of any number of questions. 
`Tip:` remember to change the name tag inside the input tag for every question so that it toggles for only that question.

now let's create a button to submit our test.
```
<button id="submit-btn" >Submit Answers</button>
```

Remember write button element outside the form because if we click on button page gets refreshed. so to make it simple let's write a button element outside the form element.

and last we are going to make another div for our final result.
Filtering Protractor end-to-end tests with Angular CLI
Tags: angular, testing, protractor
Published: 2021-08-25 20:01:40

---
title: Filtering Protractor end-to-end tests with Angular CLI
published: true
description: Demonstrating the "grep" and "invertGrep" test filtering options of Angular CLI's Protractor builder.
tags: angular,testing,protractor
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ua9j3jksmrs185uss5h.jpg
---

*Cover photo by [Michael Burrows](https://www.pexels.com/photo/faceless-barista-pouring-water-in-dripper-7125769/) on Pexels.*

End-to-end tests are relatively slow and with a large test suite, it is very valuable to be able to run only certain tests at a time.

Angular CLI 9.1 added support for the `--grep` and `--invert-grep` parameters to the Protractor builder. These are both end-to-end test filtering options that are passed to Protractor.

```powershell
ng e2e my-app --grep "logged out"
```

The previous command demonstrates an example test filter. The `grep` option is parsed as a regular expression, so every test that has the string `"logged out"` in its description will be run. This includes the description passed to the `describe` and `it` test wrapper functions.

We can set the `--invert-grep` parameter flag to invert the filter as seen in the following listing.

```powershell
ng e2e my-app --grep "logged out" --invert-grep
```

The `grep` parameter accepts a regular expression and searches full test descriptions with all their parts joined, for example in a freshly generated Angular CLI workspace, something like the following end-to-end test case is generated.

```ts
import { AppPage } from './app.po';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getTitleText()).toEqual('my-app app is running!');
  });
});
```

The description of the test case will be `"workspace-project App should display welcome message"`. We can filter in this test by passing `"^workspace"` or `"message$"` as the `grep` option or even a combination as seen in the following command which filters in tests with descriptions that start with `"workspace"` or end with `"message"`.

```powershell
ng e2e my-app --grep "^workspace|message$"
```

The `grep` and `invertGrep` options have been supported by the Protractor CLI for years, but support in the official Angular CLI builder for Protractor was first introduced in Angular CLI 9.1.
How to Choose a Proven Academic Writing Agency
Tags: career, skill, academicwriting
Published: 2021-08-25 19:56:34

There is no doubt that writing academic papers is not that easy. Many students find the essay [writing](https://www.theodysseyonline.com/tips-for-writers-block-2637831689)  process hectic and tedious. Furthermore, you have to learn how to balance school assignments, studies, and other activities. 

However, you do not have to worry anymore. You can hire an academic writing agency to help you reduce your school workload. To assist you, here are some things you should do while choosing a writing service.

## Read Reviews

You can start by visiting different writing agencies' websites and read customer's feedback. You are most likely to get both positive and negative feedback from previous customers. If an agency has more negative feedback, then you should avoid it. There are also websites where owners review different writing agencies and give their opinions based on their services. Information from such sites is honest and reliable.

## Do a Thorough Research

When searching for a legit writing agency to assist you, make the internet your friend. Take your time and research different internet sources. For example, you can use words like [is EduBirdie legit](https://edubirdie.org/edubirdie-legit/) to find as much information as you can. You can get information on their pricing, how the agency works, why it is legitimate, and so on. 

## Read Samples

Before you decide to hire a specific writing agency, check out the samples they provide. Reading these samples can help you determine the quality of papers they offer. When you hire experts in an essay writing agency with high-quality examples, you will most likely get quality papers. 

## Consider Writers Available

A legitimate academic writing company should have qualified writers. You can know if the agency has qualified writers through reviews of those who have used their services before. Besides, the only way to get quality papers is by working with experienced and qualified writers in academic papers.

## Consider Their Charges

As a student, most likely, you are on a tight budget. Therefore, you may be tempted to go for a writing agency offering the cheapest services. This can be convenient for you, but you need to remember that your education is at risk. 

Avoid choosing cheap writing services claiming to offer high-quality papers. Writing quality papers is not cheap and so be ready to dig a bit deeper into your pockets. Your main aim for hiring academic experts is to help you improve your grades and manage your workload. Therefore, do not settle for anything less instead, be realistic and hire a company offering top-notch content at an affordable price.

### Conclusion

If you need help with [essay](https://www.thoughtco.com/write-a-five-paragraph-essay-1856993) writing, these tips will help you locate the agency that will offer you the support you need. There are a lot of writing companies in the market, so be wise
Angluar datepicker translation
Published: 2021-08-25 19:39:33

I am not sure if this is the correct forum for this question, but here goes...  I have a task to translate a page.  It includes an angular datepicker that has a buttonbar at the bottom with buttons for Today, Clear, and Done.  I saw where the angular-locale has a translation for the days of the week at the top of the table of the calendar but I do not find where the text (noted above) is.  Inspecting the element seems to point to the text being interpolated to a string of Today,Clear, or Done on the generated button using template/datepicker/popup.html based on the attribute of showbuttonbar.  How can I translate this text?  the app is using i8n via the translate pipe.
How To Improve Public Speaking For Developers
Published: 2021-08-25 19:29:47

Cal Evans, Developer Evangelist at [Gun.io](https://bit.ly/3zhEso9), and Josh Holmes, Principal Dev Lead at Microsoft share their 20+ years of public speaking experience in the technology space. This conversation is a masterclass in how to improve your public speaking skills as a software developer, level-up your career, and make an impact in the technology industry.

We've shared the full version for you, but you can find the key takeaways for the best public speaking practices and resources that have worked for Cal and Josh [here](https://bit.ly/38aqjgs).