teleren/devto huggingface dataset:
Calling a REST API with Angular 8
Tags: mock, rest, api, angular
Published: 2020-02-11 14:20:42

The Angular team is releasing new versions of their framework at a high pace. New features are presented with every release and I'm currently waiting for version 9 where the Ivy renderer will be included in new projects by default. In the meantime I want to write my first post here on DEV covering one of the most basic but fundamental things in programming. Making a REST call.

We will use a completely fresh Angular 8 install. You can either follow the instructions below or clone the [repository](https://github.com/lennart-johansson/angular-8-rest-api-example) with the end result. 

First we install the Angular cli
`sudo npm install -g @angular/cli`

Then we make a new clean Angular app. You will be asked about routing and preferred styling. You can select no and css for the tutorial.
`ng new angular-rest`

`ng new` creates a standard Angular app with all the default configurations. We should now be able to see the example page by serving the app. Hopefully it looks like the screenshot below.

`cd angular-rest`
`ng serve --open`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6tu5gbmdbpcrv1zh4szk.png)


We now need an API to call. For this tutorial I will be using [Mocki](https://mocki.io) to create a mock api. It's free and provides an easy way to quickly create a hosted mock api. Mocki gives you an url where there by default already is a Hello World response at the root. My url was
`https://api.mocki.io/v1/ae70b3bc`

Remember your URL for upcomming steps.

To make http calls with Angular we need to import the HttpClient in our app module `angular-rest\src\app\app.module.ts`. After adding it the file should look like this.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kooyfwe803bsftqdidwm.png)


We can now inject the HttpClient in our future services. Services in Angular are used to call different parts of our REST API. We will create a service called HelloWorldService. Use the following angular cli command to create a service. The command will automatically create a services folder for us.

`ng g s services/hello-world`

The new service should look like this.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dltp7v63ep6391dky1vk.png)

We will now modify it a bit by including the HttpClient and also adding our mock url from [Mocki](https://mocki.io). It should look like this.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/clblqsl6u43sxbvuappq.png)


Finally we will modify our `angular-rest\src\app\app.component.ts` to use our service. We will use the service to make a `getHelloWorld`call and log it to the console. Lets implement the changes and see if it works!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/puidpv5srjcgonvfhb19.png)


By checking the console in Chrome I can verify that we got a Hello World message! This was a super basic example of how to create a service in Angular 8 and use it to make a rest api call. If you want to read more about the HttpClient I recommend [Angulars documentation](https://angular.io/guide/http). Please feel free to leave a comment if you have any questions.
The :focus-within CSS pseudo-class
Tags: css, javascript, code
Published: 2020-02-11 14:01:25

---
title: The :focus-within CSS pseudo-class
published: true
description: Learn what the `focus-within` pseudo-class is
tags: css, javascript, code
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/npy6bwrt0kx8yjid5uxa.png
---

Recently, while writing an article for CSS Tricks on using skip links I found myself needing to transition a `div` into view when an element inside the `div` has focus (when a keyboard user tabs onto it).

Take this [Codepen](https://codepen.io/PaulRyan17/pen/OJVVdrd) that has a `div` which is hidden that contains an `a` element.  We want to transition this `div` into view when the `a` gets focus.  

Initially, I was going to write JavaScript to do this, but then I found out about the `focus-within` pseudo-class.

So, to transition our `div` into view all we need to do is write the following:
```
.hidden:focus-within {
  transform: translateY(0%);
}
```

That will now give us the following when tabbing our `a` into focus.
![Tab Example](https://i.gyazo.com/b430eda38bd0aa1ee9c2a76389bb3b6c.gif)

And voila! We have now achieved our goal.  

I hope you learned something and it helps you out!

[Complete pen.](https://codepen.io/PaulRyan17/pen/GRJJzaw)

EDIT

Sebastián Veggiani was kind enough to point out that this isn't fully supported [across all browsers](caniuse.com/#feat=css-focus-within).

A polyfill can be [found here](https://github.com/matteobad/focus-within-polyfill).

--- 

Make sure to follow me on [Instagram](https://www.instagram.com/paulryantipp/) where I share tips, tricks and current stuff I am working on.
Crawling Through the Seemingly Muddy Waters of Rails
Tags: rails, beginners
Published: 2020-02-11 13:29:26

I am a student of Flatiron School and I am now completing the ruby on rails section of the course. Starting learn rails seemed to be a exciting new endeavor that I was more than up for. That excitement quickly turned to confusion and a discouragement for me. I was enamored by the 'rails magic' and thought it was going to be the greatest thing ever. Then rails forms happened. I understood the over all point of forms however, it just didn't stick and I couldn't understand the routing of it all. What should have taken a week or two took about 3 for me to fully understand. From there learning rails routing became the equivalent to looking at an electrical fuse book. There were cables everywhere and I didn't know where to start. Not only didn't I know where to start, I was so intimidated I almost gave up. For me the strange part; I have never been afraid of challenges and always welcomed them. After so long of being confused and re-reading everything, searching for videos, and headaches, I came to myself and just went after it like a deranged man. That meant that everyday I was rails code and going through lessons(most times a single lesson) for hours until I could figure out what was going on. Admittedly, not the most effective way to learn, but it works for me because I learn best the hard way. Along the way I picked up some extras the course didn't teach. Like how to render a partial from a different class/controller onto a view. In addition, gems are the best! These simple additions to your projects add a enormous amount of simplicity and reduces time spent implementing features. At the end of this chapter I have learned a lot about the importance of understanding the tools you have and your code base. This Section has reaffirmed of the importance of having grit and being intentional with reading and your time.
Introducing Lumberjack: an Automated Accessibility Scanner
Tags: a11y, webdev, javascript, showdev
Published: 2020-02-11 13:28:25

{% github JakePartusch/lumberjack %}

Accessibility testing is hard. And for the most part, accessibility testing is also _manual_. Testers interact with their websites with not only their keyboards, but also with multiple screen readers and browsers. Luckily, with static html analysis and pin-pointed JavaScript execution, we can detect a subset of accessibility issues with automated tools 🎉.

We can automatically find issues like:

- Poor color contrast
- Heading levels out of order
- Buttons and links without accessible text
- Inputs without labels

Using automation, we can quickly find accessibility issues and prevent future regressions!

## Axe

[Axe](https://github.com/dequelabs/axe-core) is an accessibility tool that has gained a lot of traction over the past few years. And it even has a [Chrome extension](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)!

Axe is great, but can only be run on a single page at a time. So, let's extend the power of axe to level-up our accessibility game!

## Lumberjack

Lumberjack uses the power and rulesets of axe, but orchestrates the scanning of many pages simultaneously.

Lumberjack can scan 100 individual pages in under two minutes!

Here is how Lumberjack works:
- You give lumberjack a url (eg. https://google.com)
- Lumberjack reads your website's sitemap
- It spawns multiple browser instances and starts scanning with axe
- It aggregates results and reports back

![Screenshot of lumberjack in action. Print the individual accessibility issues found in an example](https://dev-to-uploads.s3.amazonaws.com/i/4ktrbctg49ccw4hoc3df.png)

Even better, this can all be triggered with a single command

```
npx @jakepartusch/lumberjack --url https://google.com
```

## Lumberjack CI

Finally, we can integrate Lumberjack into our continuous integration pipeline to ensure that we aren't introducing any new accessibility issues into our websites.

An Example with GitHub Actions (eg. ".github/workflows/accessibility.yml")
```
name: Accessibility Audits

on: [push]

jobs:
  build:
    runs-on: ubuntu-18.04

    steps:
      - uses: actions/checkout@v1
      - name: Install required Linux packages
        run: |
          sudo apt-get update
          sudo apt-get install libgbm-dev
          sudo apt-get install xvfb
      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: Install npm packages
        run: |
          npm ci
      - name: Build
        run: |
          npm run build
      - name: Accessibility Audits
        run: |
          npm install -g @jakepartusch/lumberjack
          xvfb-run --auto-servernum lumberjack --url https://google.com
```

As a community let's build accessibility tooling as often and with as much fervor as we build IDE themes :). Together, we can make the web a better place ♥️.

For more info, and documentation, visit https://github.com/JakePartusch/lumberjack
How to obfuscate cordova plugin java code
Tags: ionic, java, cordova, android
Published: 2020-02-11 13:20:54

I have been working on ionic 3 mobile applications. I obfuscate typescript codes using ionic-voricles-obfuscate plugin (https://www.npmjs.com/package/ionic-voricles-obfuscate)

While reverse-engineering the APK using Apktool , Android library classes in cordova plugins are not obfuscated. The Application security team asking to Obfuscate the Java / Android packages using proguard in order to prevent the application from run time code manipulation , due to this my application is rejected by Appsec team. I have referred lots of articles , all are very brief introduction about proguard tool , I am very confused whether I am approaching the right method for obfuscating my Ionic mobile application. I am new to Mobile application development and don't have hands of experience in code obfuscation. Kind help needed from dev community for a quick fix. I appreciate your quick response , Thanks a ton in advance :)
python zip function
Tags: python, beginners
Published: 2020-02-11 13:13:23

In <a href="https://python.org">Python</a> you can aggregate <a href="https://pythonbasics.org/iterable/">iteratables</a> (<a href="https://pythonbasics.org/list/">lists</a>, <a href="https://pythonspot.com/python-tuples/">tuples</a>). You can do that with the zip() function, which has nothing to do with the package format zip.

Before playing with the zip function, you should know the <a href="https://pythonbasics.org">basics of Python</a>.

The zip() function takes iterables, aggregates them in a tuple, and then return it. As argument define the iteratables: *zip(iterator1, iterator2, iterator3 ...)*

You can create two lists:

```python
>>> a = [1,2,3]
>>> b = [4,5,6]
```

Then use the zip function and you'll see it aggregated both lists:

```python
>>> result = zip(a,b)
>>> result = list(result)
>>> print(result)
[(1, 4), (2, 5), (3, 6)]
>>> 
```

This also works for tuples as input

```python
>>> a = ("Alfa","Bravo","Charlie")
>>> b = ("Delta","Echo","Foxtrot")
>>> result = zip(a,b)
>>> print(list(result))
[('Alfa', 'Delta'), ('Bravo', 'Echo'), ('Charlie', 'Foxtrot')]
>>> 
```

You can imagine you can do this for coordinates:

```python
>>> x = [1,2,3,4,5]
>>> y=  [10,20,30,40,50]
>>> coordinates = zip(x,y)
>>> print(list(coordinates))
[(1, 10), (2, 20), (3, 30), (4, 40), (5, 50)]
>>> 
```

## Unzip value using zip

You can zip and unzip with the zip() function. The example below shows both zipping and unzipping.

```python
>>> a = ("Alfa","Bravo","Charlie")
>>> b = ("Delta","Echo","Foxtrot")
>>> result = list(zip(a,b))
>>> result
[('Alfa', 'Delta'), ('Bravo', 'Echo'), ('Charlie', 'Foxtrot')]
```

Now unzip:

```python
>>> x,y = zip(*result)
>>> x
('Alfa', 'Bravo', 'Charlie')
>>> y
('Delta', 'Echo', 'Foxtrot')
>>> 
```

## Zip on other types

You can zip a <a href="https://pythonspot.com/python-strings/">string</a> and a list:

```python
>>> x = [1,2,3,4]
>>> y = "ABCD"
>>> result = list(zip(x,y))
>>> print(result)
[(1, 'A'), (2, 'B'), (3, 'C'), (4, 'D')]
```

You can zip two strings, which combines the letters as pairs:

```python
>>> x = "hello"
>>> y = "world"
>>> result = list(zip(x,y))
>>> print(result)
[('h', 'w'), ('e', 'o'), ('l', 'r'), ('l', 'l'), ('o', 'd')]
>>> 
```

Quickly generating test data?

```python
>>> x = range(10)
>>> y = range(2,20,2)
>>> print(list(zip(x,y)))
[(0, 2), (1, 4), (2, 6), (3, 8), (4, 10), (5, 12), (6, 14), (7, 16), (8, 18)]
>>> 
```

**Related links:**
* <a href="https://docs.python.org/2/library/functions.html#zip">Zip in Python docs</a>
* <a href="https://pythonbasics.org">Learn Python</a>
Save screen real estate with react-headroom
Tags: webdev, showdev, gatsby, todayilearned
Published: 2020-02-11 13:03:21

---
title: Save screen real estate with react-headroom
published: true
date: 2020-02-11 01:37:00 UTC
tags: 
canonical_url: https://waylonwalker.com/blog/react-headroom/
cover_image: https://waylonwalker.com/react-headroom.png
tags: webdev, showdev, gatsby, todayilearned
series: waylonwalker-redesign-2020
---

It was so easy to get a professional looking navbar with just 3 lines of code. This package seriously is so usable on mobile it is rediculous. I found this package from [day 4](https://www.gatsbyjs.org/blog/100days/react-component/?utm_campaign=100%20Days%20of%20Gatsby&utm_source=hs_email&utm_medium=email&utm_content=82376619&_hsenc=p2ANqtz-_DBh1A1A-GEy2TujddXq_H1de5wGZ_X6jIqB2wv_PE7QgUk40pfi64jbSVHv-S3bfzKZOQywtoTuup2aeO0o_KpeiF8w&_hsmi=82376619) of the 100 days of gatsby challenge. It is by the wonderful man who brought us gatsbyjs Kyle Mathews, so you know its gotta be good.

## install react-headroom

installation is easy

``` bash
npm i react-headroom
```

## Import Headroom

There was no instructions for es6 style imports that are common with gatsbyjs sites like mine, but it was intuitive to figure out.

``` js
import Headroom from 'react-headroom'
```

## Using Headroom

Simply wrap your existing content, Nav in my case, with the `<Headroom />` component and your off to the races. The content will pop back into view when you scroll past then back up.

``` jsx
<Headroom>
   <-- Your content goes here -->
</Headroom>
```

## See it in action

I think this simple package completely changes the ux of your site on mobile. You can get that sticky nav out of the way, but its still right there with just a little bit of a scroll up.

![showing it in action on waylonwalker.com](https://www.waylonwalker.com/react-headroom-b.gif)

> Here it is on [waylonwalker.com](waylonwalker.com)

## Configurable

`react-headroom` is configurable, but I did not find it necessary. I really like the simplicity that it brought by just adding the `<Headroom\>` component.

![react-headroom docs](https://www.waylonwalker.com/react-headroom-docs.png)

## Links

Check out the relavant links for more details.

**GitHub** : [https://github.com/KyleAMathews/react-headroom](https://github.com/KyleAMathews/react-headroom) **Demo Site** : [https://kyleamathews.github.io/react-headroom/](https://kyleamathews.github.io/react-headroom/) **Docs** : [https://kyleamathews.github.io/react-headroom/](https://kyleamathews.github.io/react-headroom/)
CII & OSS-Fuzz Fuzz Testing
Tags: cii, fuzz, testing, qa
Published: 2020-02-11 13:01:27


The Core Infrastructure Initiative is *taking a collaborative, pre-emptive approach for strengthening cyber security*

You can use the OSS-Fuzz service for your open source project but note *to be accepted to OSS-Fuzz, an open-source project must have a significant user base and/or be critical to the global IT infrastructure.*

* https://www.coreinfrastructure.org/
* https://google.github.io/oss-fuzz/
* https://google.github.io/oss-fuzz/faq
* https://github.com/google/oss-fuzz
Daily Developer Jokes - Tuesday, Feb 11, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-02-11 13:00:24

---
title: "Daily Developer Jokes - Tuesday, Feb 11, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Tuesday%2C%20Feb%2011%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259033bf63.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ How many developers does it take to change a light bulb?

___A:___ None. It's a hardware issue
 -->
Have you used "preact"? react's 3kb alternative
Tags: discuss, react, preact, todayifound
Published: 2020-02-11 12:47:22

I just stumbled across **preact** _"Fast 3kB alternative to React with the same modern API."_

Taking a quick look at it, it seems quite robust and it seems it does everything you would want it to, it's also continuously maintained and developed.  

I can't see where I would use it though, maybe some personal projects or in machines that don't have that many resources.


If you **have used it**:
* Why and in which context did you use it?
* What do you think about it? 
* Would you use it again?

If you **have not used it**:
* Would you consider using it? 
* In what context would you use it and why?


Happy Thursday and happy hacking!
80+ Application Ideas for Developers
Tags: opensource, codenewbie, git, productivity
Published: 2020-02-11 12:43:47

---
title: 80+ Application Ideas for Developers
published: true
description: Collection of app ideas for your next project
tags: opensource, codenewbie, git, productivity
---

Have you ever wanted to build something but you had no idea what to build? Just as authors sometimes have "writers block" it's also true for developers.

I had this issue a lot in the past so I decided to do something about it and I created the [app-ideas repository](https://github.com/florinpop17/app-ideas). Here you can find a list of over 80 application/project ideas that you can use for your next project.

Not only that, but each project has a list of:
- user stories
- bonus features
- example projects

Everything you need in order to follow along easily. 👍

I also created a video explaining the repository. You can check it out below:

{% youtube TNzCfgwIDCY %}

Enjoy! 😃
What's the funniest error message you've seen
Tags: watercooler
Published: 2020-02-11 10:44:26

I just recently tried to discard a file in a new repo in VSCode and got this error (which I found funny for some reason - insert awkward laugh)
![Error message](http://pasteall.org/pic/show.php?id=51e7965e6e64a3f411b17c836923103e)


Which got me thinking. What are your favorite/funniest error messages?
Quick Palette tool
Tags: web, color, palette, design
Published: 2020-02-11 12:35:02

---
title: Quick Palette tool
published: true
description: Create Colors Palette with colorswall tool Quick Palette
tags: web, color, palette, design
---
1. Visit [Colors Wall](http://colorswall.com/colors/wall) page.
2. Press "Quick Palette" button 
![Quick Palette toggle button](https://colorswall.com/images/help/quick-palette/quick-palette.png)

3. Click on any color to add in Quick Palette.
![Quick Palette add color](https://colorswall.com/images/help/quick-palette/step-1.png)

4. Adjust palette colors.
Drag and drop or remove color.
![Quick Palette drag](https://colorswall.com/images/help/quick-palette/drag.png)

5. Customize on advanced editor and add name for palette.
6. Save your palette.

Video version
{% youtube 1nVWL-Srbhs %}
Advice for hiring managers
Tags: hiring, career
Published: 2020-02-11 12:34:22

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eq5rhc7n408c0ri6ywwv.PNG)

This is possibly the best hiring advice for the current market!

With UK employment rates at an all time high, there are fewer people actively looking for new opportunites, meaning greater competition for a smaller talent pool.

Companies need to be mindful of this and as considerate as possible throughout the hiring process - provide feedback as quickly as possible and streamline the interview process where you can.
A Tool to Write Simple Notes
Tags: beginners, tutorial, productivity, linux
Published: 2020-02-11 12:33:47

---
title: "A Tool to Write Simple Notes"
description: "A Tool to Write Simple Notes"
published: true
tags: ["Beginners", "Tutorial", "Productivity", "Linux"]
series: Shorties
---

## Problem

I read/listen/watch stuff and want to write down notes.

I have to:
- create a new file or open an old one
- start my editor
- wait for my editor to load
- manage all files, because I have a lot of them

This is annoying.

---

## Solution (Linux)

I need a simple tool to write down notes quickly.

Without the hassle of thinking about a new file, a name for it, the place where to store it, the editor loading times etc.

1. Open my hidden shell configuration file. I use Zsh, so I use `~/.zshrc`. If you use Bash, you can use `~/.bashrc`. 

2. Add `alias n='function _note(){echo "$(date +%Y-%m-%d_%H:%M: )" "$1" >> notes.txt;}; _note'`

3. Type the note in the shell: `n "my very important note"`

4. See the result

![simple notes](https://dev-to-uploads.s3.amazonaws.com/i/262525tz6umhtrmjloxt.png)

---

## Explanation

`alias n`: the command I want to use, in this case `n`. You can use whatever you want as a command, e.g. `alias note`.

`'function _note(){...}; _note'`: setup a function named `_note` and run it.

`echo "$(date +%Y-%m-%d_%H:%M: )" "$1" >> notes.txt;`: take the current date in my desired format, add the  first input after the alias and append it to the file `notes.txt`

`"$(date +%Y-%m-%d_%H:%M: )"`: the current date in my desired format
`"$1"`: the first input after the alias (e.g. `my very important note`)
`>>`: append
`notes.txt`: where I want to save my note


---

### Further Reading

- [Wikipedia: Alias](https://en.wikipedia.org/wiki/Alias_(command))
imagej gui and imagemagick cli image tools
Tags: images, graphics
Published: 2020-02-11 12:32:17

what are your favorite image manipulation tools ?

i keep coming back to imagej gui and imagemagick cli 

* [imagej gui](https://imagej.net/Welcome) 
* [imagemagick cli](https://imagemagick.org/index.php)
* [graphicsmagick](http://www.graphicsmagick.org/)

i love their ease of use for example to convert a SVG to PNG with imagemagick it is

```
$ convert image.svg image.png
```