teleren/devto huggingface dataset:
CSS in React - A simple Homepage
Tags: css, react, beginners, codenewbie
Published: 2020-05-06 21:00:20

Of all the things we do to build an app and utilize our creativity, I think styling the CSS is my personal favorite. I love the instant gratification of changing the visual aspect of the page with only a few keystrokes.

Here is a BASIC style guide to create the page above:

1) Add a background image

Be sure to choose a high definition image that is large enough to fill the screen without blurring. You want to maintain the sharpness of the image on your page. I typically look for images that are at least 1600 x 900. 

Save the image to your "public" folder within your React app with a simple name that describes it, like "glacierbackground.jpg"

In the component where you want the background image to render, create a div with a class name that you can refer to for CSS styling.

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

In your App.css file, refer to that class name for all of the styling details related to that background.

I used the following code in my app to set and style the background image. I made sure that it was the only image on the page and would be centered and fixed so that the page would not scroll.

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

2) Add a Nav Bar

Create a component for your Nav Bar so that you can utilize it throughout your app. A Nav Bar can be as simple as a list of links.

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

Now you can style the Nav Bar in App.css:

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

3) Add a "Welcome Sign"

This is a simple design for a home page, but feel free to get creative here! You may have noticed this line in the ExampleComponent above. This is how I simply render the words "Hello World" onto the page:

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

Lastly, style the words in App.css to make them big, bold and centered:

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

This was a simple tutorial for a basic home page and nav bar. For more information and detailed CSS tutorials, visit w3schools.com/css
How to install DotNet Core in Manjaro Linux
Tags: dotnet, linux, manjaro, tutorial
Published: 2020-05-06 20:53:28

I recently started picking up .NET Core again. I was a bit worried because I'm on a linux operating system, and [state of .NET](https://www.reddit.com/r/archlinux/comments/cx64r5/the_state_of_net_core_on_arch/) is not exactly stable. (Also the obligatory "btw I use arch" meme). The process was pretty much straightforward but I still decided to do some troubleshooting. And here is the result.

# Installation process

Install `dotnet-sdk` and `dotnet-runtime` from the Manjaro package manager GUI or you can use the following terminal command. I assume this will work on vanilla Arch as well using the `pacaur` command instead of `pacman`.

```
pacman -S dotnet-sdk dotnet-runtime
```

You can check if dotnet is installed by running the version command. And it will also be important to check where dotnet is running for reasons we'll get into later.

```
$ dotnet --version
3.1.103
$ whereis dotnet
dotnet: /usr/bin/dotnet /usr/share/dotnet
```

If the location of dotnet is not `/usr/share/dotnet` you will have to create a new file in `/etc/profile.d/dotnet.sh` with the following content as root so remember to use `sudo`. Doing this will require you to reboot or re-login. This note was found [here](https://gist.github.com/waynebloss/55aa06b13a3f647c45b57caa31397089).

```bash
export DOTNET_ROOT=/opt/dotnet
export MSBuildSDKsPath=$DOTNET_ROOT/sdk/$(${DOTNET_ROOT}/dotnet --version)/Sdks
export PATH=${PATH}:${DOTNET_ROOT}
```

Then finally in `~/.bashrc` file add the following lines, `~/.zshrc` if you're using zsh.

```bash
# DOTNET - Required
export PATH="$PATH:/home/YOUR_USER_NAME/.dotnet/tools"
# DOTNET - Optional
export DOTNET_CLI_TELEMETRY_OPTOUT=1
export ASPNETCORE_ENVIRONMENT=Development
```

And now you should be ready to start developing .NET Core applications on your Manjaro linux machine.

## Links

- [.NET Core](https://wiki.archlinux.org/index.php/.NET_Core)
- [The state of .NET Core on Arch](https://www.reddit.com/r/archlinux/comments/cx64r5/the_state_of_net_core_on_arch/)
- [Manjaro dotnet setup](https://gist.github.com/waynebloss/55aa06b13a3f647c45b57caa31397089)
5 personal tips for landing pages
Tags: copywriting, landingpages, landingpage, html
Published: 2020-05-06 20:45:55

I’ve seen quite some landing pages come by on indiehackers.com by now and I noticed that I wanted to give/gave the same tips multiple times. So I thought it would be nice to write a small article about this. These are just tips from my point of view and things I like about a landing page personally.


### 1. Address 1 pain point your target audience has above the fold
People pay out of emotion. This is often fear or anger. Fear comes in various forms like anxiety, stress, worry. Anger can be irritation, fed up or annoyed. Try to think of a compelling header that addresses this emotion to make the first connection with your visitor.


### 2. Put a least 3 content blocks below the fold
People need to be convinced to take action. No one likes people who try to sell you something and ask for your email, phone number or credit card directly. Inform them with problems you solve. Don’t tell people your solution straight away, tell them which problem you’re going to solve for them. People want to be heard and don’t want to hear about you. There’s a difference between the following:

We help you with your Instagram branding (solution)

Are you trying to find a way to differentiate you from the competition on Instagram? (problem)


### 3. Make sure you can access some analytics

I still remember the first time I put one of my landing pages online. After I posted about it on various websites and send it to all my email contacts after 1 day no one signed up. I wasn’t very surprised but a little sad. I had on Google Analytics or something to check how many visitors I had at least. So I quickly installed Google Analytics and saw there was very few traffic so that was the reason there were no sign-ups.


### 4. Make it scannable

With most of the people having the attention span of a goldfish nowadays, your page must be scannable. Try to ask 10 people or so to look at your landing page for a maximum of 10 seconds and ask if they understand your concept. Making it scannable means that you emphasize certain phrases or headers that are important to read. **Just like this blog post uses a bold font for each tip and is prefixed with a number.** If I wouldn’t do that it’s way harder to scan the content. And you probably read the emphasized sentence above as one of the first sentences of this paragraph.


### 5. Use primary, secondary, tertiary colours

Not all buttons on your page should have the same colours. Check the homepage from dev.to:
![dev.to](https://miro.medium.com/max/1000/1*hbdEJfNvF9EB48lnqIc7JA.png)
There are two things that attract one’s attention, the ‘write a post’ and ‘share your project’. We could encourage people more to write a post if we make it vivid pink! That would make pink our primary colour, blue our secondary colour and the ‘See all posts’ in white our tertiary colour.

Stay tuned cause I’ll be sharing more tips in a couple of days!
---
My current landing page:
https://targetaudience.app/
Max Your Flex
Tags: css, html, webdev
Published: 2020-05-06 20:41:53

# Max Your Flex

Note that this is only the compilation of the flex-styles majorly used during flex development. Use this for the 5-minute recap of Flexbox before your interview days. This is not meant to be a complete documentation. Refer the following links for the complete documentation.

[Official MDN Resource for Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) & [CSS-Tricks Resource for Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

## How Flex Works
![alt text](https://css-tricks.com/wp-content/uploads/2018/11/00-basic-terminology.svg "Flex Architecture" )
Image Courtesy: css-tricks.com

## Properties For Parent (flex-container)

#### display
```css
.container {
  display: flex; /* or inline-flex */
}
```

#### flex-direction
Check out the above architecture image to get more clarity.
```css
.container {
  flex-direction: row | row-reverse | column column-reverse;
}
```

#### flex-wrap
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.
```css
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
```

#### flex-flow
This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes. The default value is row nowrap.
```css
.container {
  flex-flow: column nowrap;
}
```

#### justify-content
```css
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
```

#### align-items
You can override the align-items behavior for individual flex items by applying the align-self property to the particular item.
```css
.container {
  align-items: stretch | flex-start | flex-end | center;
}
```

#### align-content
```css
.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}
```

## Properties For Children (flex-items)

#### order
The order property controls the order in which they appear in the flex container. Flex items with higher order values set on them will appear later in the display order than items with lower order values.
```css
.item {
  order: 5; /* default is 0 */
}
```

#### flex-grow
This defines the ability for a flex item to grow if necessary.
```css
.item {
  flex-grow: 4; /* default 0 */
}
```

#### flex-shrink
This defines the ability for a flex item to shrink if necessary.
```css
.item {
  flex-shrink: 3; /* default 1 */
}
```

#### align-self
This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
```css
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
```

float, clear and vertical-align have no effect on a flex item.

## Flex With Fun?
Check out [Flexbox Defense](http://www.flexboxdefense.com/) & [Flexbox Froggy](https://flexboxfroggy.com/) games that helps you learn flex.
Spring Boot Code Review 
Tags: java, opensource, codequality, springboot
Published: 2020-05-06 20:35:04


Today I push a Spring Boot + security rest API app for resume builder on Github. It will be kind if someone examines my code and raise issues. I  want to discover more where I can update my code to make it better.  Here you can find my code on GitHub: https://github.com/Ayushnita/Resume_builder
Thanks in advance for looking out my silly mistakes.
Please Raise issues for any mistake you found, it will be helpful for me to learn more.
Thanks.
Type Switch with Functional Java 8
Tags: java8
Published: 2020-05-06 20:17:40

---
title: Type Switch with Functional Java 8
published: true
description: When you want pattern matching for instanceOf (JEP 305, JEP 375) but Java 14 is too hot to handle...
tags: java8 
---

```java
package io.github.ikysil.javaplayground.typeswitch;

import javax.swing.*;
import java.util.function.Consumer;
import java.util.function.Supplier;

public class TypeSwitchDemo {

    static class TypeSwitch<T> {

        private final T instance;

        private TypeSwitch(T instance) {
            this.instance = instance;
        }

        static <T> TypeSwitch<T> of(final T instance) {
            return new TypeSwitch<>(instance);
        }

        static <T> TypeSwitch<T> of(final Supplier<T> instanceSupplier) {
            return new TypeSwitch<>(instanceSupplier.get());
        }

        <I> TypeSwitch<T> instanceOf(final Class<I> type, final Consumer<I> consumer) {
            if (type.isInstance(instance)) {
                consumer.accept(type.cast(instance));
            }
            return this;
        }

        void noneMatches(final Consumer<Object> consumer) {
            consumer.accept(instance);
        }

    }

    public static void main(String[] args) {
        System.out.println("TypeSwitch Demo");
        TypeSwitch.of(new JLabel())
            .instanceOf(JComponent.class, o -> System.out.println("matched JComponent"));
        TypeSwitch.of(new Object())
            .instanceOf(JComponent.class, o -> System.out.println("matched JComponent"))
            .noneMatches(o -> System.out.printf("none matched: %s of %s%n", o, o.getClass()));
    }

}
```

GitHub Repository: [java-playground](https://github.com/ikysil/java-playground)
Is it possible to have dynamic pages in Gridsome? 
Tags: help, gridsome, vue
Published: 2020-05-06 20:15:02

---
title: Is it possible to have dynamic pages in Gridsome? 
published: true
description: Need to add VUE reactivity to some pages.
tags: #help,#gridsome,#vue
---

I would like to create my web site in Gridsome but I wonder if it's possible to create have pages with VUE reactivity. 

Let say I want to include simple calculator created in Vue on some page.

Is this possible?
Get started with the IBM Cloud, a four-part online series for developers
Tags: ibmcloud, cloudcomputing, cloud, hybridcloud
Published: 2020-05-06 20:13:06

---
title: Get started with the IBM Cloud, a four-part online series for developers
published: true
description: A four-part introductory on-line course on the IBM Cloud for developers
cover_image: 
tags: IBM Cloud, Cloud Computing, Cloud, Hybrid Cloud
---

IBM Developer Advocates Lennart Frantzell and Marek Sadowsky join forces to introduce developers to cloud computing in four sessions. 

The Cloud is the cornerstone of the world economy and needs more developers who understand cloud computing. Our goal is to get you started on that path as quickly as possible, focusing on one of the major clouds in the market today: the IBM Cloud. But what you learn about the IBM Cloud can easily be applied to the other major clouds in the market place. 

This workshop will help you get started using cloud computing, and point you to the resources to find additional help when you want to go deeper.

Session One: Thursday, May 14, 2020 
IBM Cloud Series — Getting Started with Serverless Computing https://www.meetup.com/IBM-Developer-SF-Bay-Area-Meetup/events/270460820/
 
Session Two: Thursday May 21, 2020
IBM Cloud Series - Getting Started with Containers
https://www.meetup.com/IBM-Developer-SF-Bay-Area-Meetup/events/270460871/

Session Three : Thursday May 28, 2020
IBM Cloud Series - Getting Started with AI
https://www.meetup.com/IBM-Developer-SF-Bay-Area-Meetup/events/270460924/

Session Four : Thursday June 4, 2020
IBM Cloud Series — Getting Started with Edge 
https://www.meetup.com/IBM-Developer-SF-Bay-Area-Meetup/events/270460963/
 
Each session lasts two hours and is on-line with screen sharing. Our goal 
is to point you in the right direction, get you writing simple cloud-hosted apps and get you ready to walk on your own.

You will learn to feel confident about working in the IBM Cloud environment, or in any other cloud environment.

So join us, or view the recorded sessions afterwords.
Django: What version do I have?
Tags: python, django, beginners, tutorial
Published: 2020-05-06 20:10:00

---
title: Django: What version do I have?
published: true
description: How to find out what version of Django you are using
tags: python, django, beginners, tutorial
---

Here's how to see what version of Django you're using:

- Make sure you're in the virtual environment for your project.
- At the terminal prompt, open the Python shell:
```zsh
$ python
```
- In the Python shell, import the Django module and check the version:
```python
>>> import django
>>> django.__version__
'2.2.9'
```

---

Edit: User @Biplov pointed out that there's an even easier way to see your Django version right from your terminal prompt:
```bash
$ django-admin --version 
```

---

Was this helpful? Did I save you some time?

## {% cta https://www.adamlombard.com/support-me %} 🫖 Buy Me A Tea! ☕️ {% endcta %}

---
Expecting the Unexpected: Javascript Throw & Catch
Tags: javascript, fetch, errors
Published: 2020-05-06 20:04:21

# Error Handling
Error's are and will always be a big part of a developers life. They are what allow us to see what mistakes we made in out code, and learn more and more about what's going on behind the scenes. Sometimes however, we expect to get back and error from the code we've written. We need a way to handle this situation. This is where Error Handling comes into play.

### Flatiron School
I am Ariel Davis, a current student at Flatiron School. I've come across error handling without going into too much detail a lot throughout my time at this school. After sitting down to really get an understanding of when to use error handling has been of great use to me and I can only hope it will be of great use to you as well. In this blog, I will go over when, why, and how, to use error handling in Javascript.

### When?
When is it a good time to use error handling? There will be many times while programming when you come across an error. You shouldn't have the mindset of, "Oh there's an error, let me use error handling". Rather you should think like, "I know there are set conditions that would make this throw an error, so let me handle it." You should only use error handling when an error is expected to happen based off of certain conditions.

### Why?
Why we should use error handling ties close to when we should use them. When your program throws an error that you are expecting, it will more than likely crash and burn. We don't want this to happen while our application is being used so we throw and catch an error.

### How?
The bread and butter of this blog. How exactly do we work with error handling? In Javascript we use what's called the try...catch syntax:
```js
try {

//Some code that may throw an error

} catch (error) {

//Some code that happens if/when an error occurs

}
```
The code in ``try{..}`` is what is initially ran in your program.
Depending on if this piece of code throws an error or not, the next block of code ``catch(error) {...}`` is ran.
For example:
```js
try {

console.log("Super cool console.log")

} catch (error) {

console.log("This console log won't run")

}
```
However:
```js
try {

console.log(undefinedVar)

} catch (error) {

console.log("This console log will now run")

}
```

Because the variable ``undefinedVar`` isn't defined, an error is thrown. Now normally this would end the program, but with the error handling in place, the program will continue and run the console.log:
``console.log("This console log will now run")``.

### The Basics
That is the basic concept of error handling, some nice resources that can be used in order to get a different explanation of the try...catch syntax can be found at these links:
[Try and Catch Article](https://javascript.info/try-catch)
[MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch)
[W3Schools](https://www.w3schools.com/js/js_errors.asp)
Beginning your Web Development Journey? Useful roadmaps that I've come across!
Tags: beginners, webdev, codenewbie
Published: 2020-05-06 19:55:46

Hey there! If you are in the situation where you have no idea how to get started on your development journey or which path you should follow for the same, then this post might be helpful for you (especially if you are a newbie).

Below are some articles/guides that gives you a clear idea about what to do, either when you are just starting out or when you have no idea what to 
do next after learning a particular thing.

**Note:** _You can choose any other paths that you like as long as it proves useful to you. I just happened to like these more_ :)

* **A month by month guide**
    This [article] covers all the basic and important skills you need to learn 
    before applying for the position of a junior developer.
    It also contain resources(mostly free) to get you started right away!

* **Get an idea visually**
    This [Github repository] gives a solid visual guide covering almost everything that you should learn and in what order (Just scroll down to the _README.md_ section). You can also check out the upcoming roadmaps on their [site].

* **Guide to the front end**
    This [guide] mainly focuses on the front end development and provides resources for the same.

That was all for now. P.S. If you've got other useful guides or roadmaps, please do share them with me :)

Thank you And Happy Coding😄!!


[article]: https://zerotomastery.io/blog/learn-to-code-in-2020-get-hired-and-have-fun-along-the-way/
[Github repository]: https://github.com/kamranahmedse/developer-roadmap
[site]: https://roadmap.sh/roadmaps
[guide]: https://www.freecodecamp.org/news/a-practical-guide-to-learning-front-end-development-for-beginners-da6516505e41/
JS visual notes: var vs let
Tags: javascript, webdev, beginners
Published: 2020-05-06 19:45:26

Hey, I decided to start a mini-series with visual notes related to the JS, react, vue, and other frontend topics. Maybe that will help somebody remember some issues better. Today var vs let, what's a difference between them?

Stay tuned for more 👀

![var vs let note](https://dev-to-uploads.s3.amazonaws.com/i/tzdx5tqcuc5imw8fpieo.jpg)
Plotting a group level comparison histogram in pandas
Published: 2020-05-06 19:44:57



Let's say I have a DataFrame like below,

```py
years = [2014, 2014, 2014, 2015, 2015, 2015, 2015]
vehicle_types = ['Truck', 'Truck', 'Car', 'Bike', 'Truck', 'Bike', 'Car']
companies = ["Mercedez",  "Tesla", "Tesla", "Yamaha", "Tesla", "BMW", "Ford"]

df = pd.DataFrame({'year': years,
                    'vehicle_type': vehicle_types,
                    'company': companies
                   })

df.head()
```

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

And I want to plot the distribution of vehicle types per year, something like this,

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

Turns out, this can easily be done in **one line** with pandas,

```py
df.groupby(['year'])['vehicle_type'].value_counts().unstack().plot.bar()
```

It's amazing how a single statement takes care of,
- Null counts
- Plotting the histogram bars side by side
- And aesthetics like labels, legends, etc.


The critical part here was the `unstack` function and how it fits well with the multi-index created by `value_counts()`.

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