teleren/devto huggingface dataset:
The newly announced future of .NET - unifying all the things
Tags: discuss, dotnet, csharp
Published: 2019-05-07 01:08:01

---
title: The newly announced future of .NET - unifying all the things
published: true
description: Microsoft announces .NET 5
tags: discuss, dotnet, csharp
cover_image: https://thepracticaldev.s3.amazonaws.com/i/aqaavmlxxpkhfag628yw.png
---

Microsoft has [just announced](https://devblogs.microsoft.com/dotnet/introducing-net-5/) what the future of .NET will be after .NET Core 3. While won't be seen until late 2020, it does sound like a big step forward in the world of .NET.

You're not alone in wondering why the jump from 3 to 5 but their blog post has you covered:
> We’re skipping the version 4 because it would confuse users that are familiar with the .NET Framework, which has been using the 4.x series for a long time. Additionally, we wanted to clearly communicate that .NET 5 is the future for the .NET platform.

What do they mean by unification? From the post:
> - Produce a single .NET runtime and framework that can be used everywhere and that has uniform runtime behaviors and developer experiences.
- Expand the capabilities of .NET by taking the best of .NET Core, .NET Framework, Xamarin and Mono.
- Build that product out of a single code-base that developers (Microsoft and the community) can work on and expand together and that improves all scenarios.

Additionally...
> - You will have more choice on runtime experiences (more on that below).
- Java interoperability will be available on all platforms.
- Objective-C and Swift interoperability will be supported on multiple operating
- CoreFX will be extended to support static compilation of .NET (ahead-of-time – AOT), smaller footprints and support for more operating systems.

My biggest question so far with the announcement is what will happen to [.NET Standard](https://docs.microsoft.com/en-us/dotnet/standard/net-standard) as this _seems_ to supersede it in terms of standardising interaction with .NET.

What are your thoughts about this announcement? Any concerns? Anything that you find especially exciting?

Make sure to read [Microsoft's full post](https://devblogs.microsoft.com/dotnet/introducing-net-5/) to know all the details.
Tip #1 : Centering elements without flexbox and automatic margins
Tags: showdev, css, webdev, beginners
Published: 2019-05-07 01:07:31

---
title: Tip #1 : Centering elements without flexbox and automatic margins
published: true
description: This neat little trick allows you to center elements anyway you want in almost any situation.
tags: showdev, css, webdev, beginners
series: Frontend Tips and tricks
---
*This series is about all the neat little HTML/CSS/JS tricks I found and keep finding. Most of these are things that initially took me quite a long time to find or figure out and some are just useful tricks that I use in my day to day.*


This neat little trick allows you to center elements anyway you want in almost any situation. I found this trick when I was trying to vertically center a relative element in its container. I found out that you can use this trick to also horizontally center elements. Useful when `margin: 0 auto;` or flexbox doesn't work. Anyway here's the code :

**Note only use this method as a last resort, if you can use to automatic margins or flexbox, use those methods instead**

{% codepen https://codepen.io/glaroche/pen/axgvJe default-tab=css %}
I initially found this trick [here](http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/)

##The code bit by bit :

###Horizontal centering

```css
.container {
  position: relative;
}

.center__horizontal {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
```

###Vertical centering
```css
.container {
  position: relative;
}

.center__vertical {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
```

###Vertical &amp; Horizontal centering
```css
.container {
  position: relative;
}

.center__both {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

###Center a relative Element to its container
```css
.container {
  width: 550px;
  height: 150px;
  background: #eaeaea;
}

.center__relative {
  position: relative;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```
Microsoft will be shipping a Linux kernel with Windows
Tags: wsl, discuss, windows, linux
Published: 2019-05-07 00:37:35

Recently Microsoft has announced WSL 2. If you don't know what WSL is, you can read a blog post I wrote about it [here](https://dev.to/vnbrs/the-state-of-developing-on-windows-2019-impressive-4in4). On WSL 1, the performance is a known issue, but it seems Microsoft has been making up lost ground.

On their official blog post, plenty of changes have been announced, such as: up to 20x performance improvement, full Linux kernel call compatibility (as the Linux kernel will be shipped with Windows), and so on.

> WSL 2 will be a much more powerful platform for you to run your Linux apps on, and will empower you to do more with a Linux environment on Windows.

{% twitter 1125480449155915777 %}

What do you think about it?
The Perfect First Project for Exploring Any JS Framework
Tags: beginners, javascript, frameworks, resume
Published: 2019-05-07 00:27:21

---
title: The Perfect First Project for Exploring Any JS Framework
published: true
description: Do you ever feel stumped on what project to create in a new framework after you finish your first tutorial? This one is simple and also a productive use of your time.
tags: beginner, javascript, frameworks, resume
cover_image: https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Fyouvegotthis.jpg?alt=media&token=1261fcc4-889a-45c3-a7f3-30e7771a44b8
---

The worst part of finishing a tutorial is not knowing what to do next. You *could* go look up some app ideas online, but aren't you tired of making to-do lists and calculators you probably won't use? It probably feels like there's nothing left to make.

![Jack Tripper saying, "Well, as a matter of fact, there is something"](https://media.giphy.com/media/FeiQbJ2BjZLoHdD5oB/giphy.gif)

What about a resume? I spent today coding mine up using Gatsby (I really needed to use the typography and icon plugins), then I did a swift little `ctrl-p` > "Save to PDF". It was much easier for me to do it this way than to make something in LibreOffice Draw. The program always seems to distort colors and such anyways.

So... what makes a resume the *perfect* project?

- It's only one page&mdash;that's not too much work.
- You can practice laying things out with CSS if you do what I did and use two columns.
- There's all types of elements you can practice with: headers, paragraphs, links, and lists.
- Again, if you use two columns, you can practice placing your elements in the correct order for accessibility.
- You can use get some extra practice with tools like [Lighthouse](https://developers.google.com/web/tools/lighthouse/) that test accessibility, performance, and best practices.
- After it's done, you can add it to your personal/portfolio site(s) and have something great-looking to brag about. 😉

Still feeling a little uninspired about design? Take a look at these sites for some resume examples:
- [Piktochart](https://piktochart.com/blog/well-designed-resume-examples-inspiration/)
- [Dribbble](https://dribbble.com/search?q=resume)
- [Awwwards](https://www.awwwards.com/inspiration/search?text=resume)

If you have any other ideas, or would like to share your work, please do leave it in the comments below or [send me a tweet](https://twitter.com/ashleemboyer)! I love seeing what other people create. 😊

---

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to [https://ashleemboyer.com/newsletter](https://ashleemboyer.com/newsletter).

---

*[Image](https://unsplash.com/photos/O_CLjxjzN3M) by [Emma Matthews](https://unsplash.com/@emmamatthews) on [Unsplash](https://unsplash.com).*
Block malicious login attempts, but preventing account lock-outs.
Tags: security, authentication, discuss
Published: 2019-05-07 00:07:11

---
title: Block malicious login attempts, but preventing account lock-outs.
published: true
description: 
tags: security, authentication, discuss
---

## How would you prevent malicious login attempts?

I'm curious how the DEV developers(those interested in security) here would prevent malicious login attempts.

### My solution.

If a IP(e.g: `127.0.0.1`) had failed to authenticate 3 or more times within a 12 hour period, block any further login attempts for 24 hours. This is global, this IP may not attempt to login to any accounts, not just that one account.

If 3 or more IPs have exceeded the 3 failed attempts on a specific account, **all** IPs are required to supply the federated account, on that *specific* account.

During those 24 hours of "blocked" login attempts, they are required to supply the account's federated account, such as an email(e.g: `you@mail.com`).

If they supply the correct federated account, email in this case, the server will send a special randomly generated link to `you@mail.com` that email that temporarily lets you bypass the blocked login attempts.

That link is valid for a short amount of time, e.g: 5-15 minutes.

You provide your credentials and you're logged in. However if the credentials are invalid twice, set a cool-down time of 60 minutes before another link may be sent.

If the attacker has access to your email, then you have a lot more problems. But this thwarts brute-force attacks directly against your credentials, while still being able to gain access to your account.

---

**Remember, the goal is to prevent malicious third-parties from attempting to gain access to the account, while not blocking access for the actual people.**
SOLID, interfaces and final
Tags: podcast, programming
Published: 2019-05-27 13:14:06

---
title: SOLID, interfaces and final
published: true
tags: podcast, programming
canonical_url: https://stitcher.io/blog/solid-interfaces-and-final-rant-with-brent
---

I'm giving podcasting a try. In this episode I talk about why I think final helps you write better maintainable code: [https://stitcher.io/blog/solid-interfaces-and-final-rant-with-brent](https://stitcher.io/blog/solid-interfaces-and-final-rant-with-brent)
Z-Index: Geometry, Not Magic
Tags: css, zindex
Published: 2019-05-21 00:54:01

---
title: Z-Index: Geometry, Not Magic
published: true
tags: css, z-index
canonical_url: https://stephencharlesweiss.com//2019-05-07/z-index-geometry-not-magic/
---

It was one of those light bulb moments when things finally clicked. My colleague was describing how to ensure that my elements weren’t bleeding through with a Z-index and suddenly, I realized that the index was referring to a _third-dimension_.

Organizing elements on the DOM has always been confusing to me - how different elements get pushed aside, stretched, sent to the next line, etc. And, each problem has multiple different strategies - so there’s no _one_ way to get the effect you’re looking for.

In my case, I was working on a menu, that when clicked, would create a popup. [![menu and stepper](https://stephencharlesweiss.com/static/245d70af9cf09782dd53bf58a4c0abb9/1e685/menu-and-stepper.png)](/static/245d70af9cf09782dd53bf58a4c0abb9/1e685/menu-and-stepper.png)

The problem was that the elements _behind_ (or what I assumed would be behind) the menu were bleeding through (see the blue dots? Yeah, you’re not supposed to see them).

[![open menu bleed through](https://stephencharlesweiss.com/static/4fbb0475c0d4061ef34608b7f7606650/fb8a0/open-menu-bleed-through.png)](/static/4fbb0475c0d4061ef34608b7f7606650/af0fb/open-menu-bleed-through.png)

The issue, it turns out was that the popup menu was positioned absolutely within the window (so that it wouldn’t move other things around when it was present), but it was the same Z-index (or lower) than the SVGs that constituted the blue dots. This meant that as far as the browser was concerned, it should show them!

Cue the lightbulb moment.

All we’re talking about is stacking different elements in a _predictable_ way. Since at least one of them is positioned absolutely, they will not interact and push each other around. Which means that they’re like pieces of paper and can be stacked. If they have the same Z-index, which is on top is unpredictable.

This is because the Z-index refers to a Z axis!

[![z index visualization](https://stephencharlesweiss.com/static/b5a581e57778e0eb29f306e8743eeee4/fb8a0/z-index-visualization.png)](/static/b5a581e57778e0eb29f306e8743eeee4/4d314/z-index-visualization.png)

I’d looked at a lot of different pages on Z-index, but for whatever reason, these two concepts never came together to click.

1. Position absolute the element is not affected by (and won’t affect the position of) other elements
2. Z-Index refers to the “height” of the element. The higher the index, the “closer” to the screen (aka the window through which we look at the DOM)

Once I saw Z-index as an axis in a three-dimensional coordinate system, visualizing the placement of the elements became much more intuitive.

Suddenly, the Z-index wasn’t magic. It was geometry. Demystifying it made it a tool I could use with confidence.

# Resources

[z-index - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)
How to limit the vertical space that the user can drag an element in, using react-native-gesture-handler?
Tags: help, reactnative, react, javascript
Published: 2019-05-06 22:08:57

---
title: How to limit the vertical space that the user can drag an element in, using react-native-gesture-handler?
published: true
description: 
tags: #help, #react-native, #reactjs, #javascript
---

I'm trying to build a sliding menu from the bottom of the screen. The main problem I'm facing is setting a limit to how far up the user can drag the menu.

I've looked through examples on the react-native-gesture-handler github. Tried to fiddle around with [the bouncing example](https://snack.expo.io/SkjAjkkhE). But still couldn't figure out exactly what I need to do to set a limit.

[Current Setup. (Snack Link)](https://snack.expo.io/r1gH1VCjN)

which gives this result:

![Collapsed menu](https://i.imgur.com/S3qZo2k.png)

when i swipe up i get:

![Expanded menu, but out of bounds](https://i.imgur.com/t0M8ruJ.png)

and when i swipe all the way down, the menu goes out of view:

![Collapsed menu, but out of bounds](https://i.imgur.com/ewHkeVt.png)


My goal is to make the menu to pop up to It's full size once swiped up and then shrink back down to just the title when swiped down.

![Swiping up should end up like this: Expected result when swiping up](https://i.imgur.com/ldKZpgC.png)

![Swiping down should end up like this: Expected result when swiping down](https://i.imgur.com/S3qZo2k.png)

Thank you in advance for any help you might provide, it'll be really appreciated.
📟 The New Windows Terminal
Tags: windowsterminal, windows, microsoft
Published: 2019-05-06 22:09:04

---
title:  📟 The New Windows Terminal
published: true
tags: Windows Terminal, Windows, Microsoft
canonical_url: https://ahmadawais.com/windows-terminal/
cover_image: https://ahmadawais.com/wp-content/uploads/2019/05/windows-terminal.png
---

<span class="published-at updated-at">
                Originally published at <a href="https://ahmadawais.com/windows-terminal/" style="color:#1395b8">AhmadAwais.com: Windows Terminal</a>            </span>

<br />

"Developers, developers, developers" is all that Microsoft cares about in 2019. Which is a welcomed change — Microsoft has unveiled **Windows Terminal**, a new command line app for Windows. 

<br />
![Windows Terminal](https://ahmadawais.com/wp-content/uploads/2019/05/windows-terminal.png)

<br />

Windows Terminal
----------------

You heard that right. It's like Windows forgot to update the terminal app for about two decades and only now realized that the old grandpa terminal gotta go. Microsoft is launching a new command line app for Windows, called the new Windows Terminal. 
<br />
{%youtube 8gw0rXPMMPE %}
<br />

### Features: (new) Windows Terminal

*   ✅ **Cross Env**: The new Windows Terminal is designed to be an access point for all sorts of different command-line environments since it works with Cmd, PowerShell, and the Windows Subsystem for Linux (WSL).
*   📑 **Multi-tab Support**: Yes, multi-tabs is now a reality which is a welcomed feature in any terminal app. Gotta have that.
*   **📟 GPU accelerated DirectWrite/DirectX-based** text rendering including CJK ideograms, powerline symbols, icons, programming ligatures, etc. Boy this is awesome.
*   👌 **Emoji Support**: Woohoo! Super happy about this.
*   🎨 **Themes & Customizations**: The video showcased clearly represents the fact that this new Windows Terminal will be themeable as well as customizable — both fundamentally important features for developers. I look forward to creating a 🦄 [Shades of Purple](https://ahmadawais.com/1-million-developers-using-shades-of-purple-theme/) theme for this one.

For more info checkout the [Windows Terminal](https://github.com/Microsoft/Terminal) repo or read the [announcement post](https://devblogs.microsoft.com/commandline/introducing-windows-terminal/#) by Kayla, PM for Windows Console. Here are some images of this terminal app for windows.


<br />

Over to you!
------------

Microsoft is constantly improving its products for developers. This new windows terminal is supposed to be released in mid-June. A bit late to the party there, folks — but we're all happy for you.

Peace! ✌️
Query Github GraphQL
Tags: git, github, graphql, query
Published: 2019-05-06 21:58:49

---
title: Query Github GraphQL
published: true
description: How to Query Github with its GraphQL API
cover_image: https://cdn-images-1.medium.com/max/800/1*pK_w6wynjEjd3VqIAA8Eow.png
tags: #git #github #graphql #query
---

Searching for a package on Github can be a daunting task, because the returns can be overwhelming, and it can be extremely time consuming to wade through them one by one.

Over the years, my Github searching experiences can be summarized in one word — “frustrating”, because not a single searching strategy is fully working, due to the overwhelming hits that I’m getting. The problem for me is all about how to order them:

<!--more-->

- If you don’t specify any order, then by default it’s Github’s best match ordering. However, I’ve seen many times that some projects that haven’t been updated for years showed up on top, because, once-up-a-time, it was popular before.
- If you order by number of stars, then still, you can’t avoid those been-popular-once projects, and only when clicking open it, you realized, from the over-a-hundred open issues, that it has now been abandoned.
- Then you can’t help but wondering, where the crowd have moved to? There must be a new project that is better than the abandoned one, but which one it is? So you order them by creation day to have newer created ones listed first.
- However, if you have ever done so, you will regret it right away, because all the hits that come on the top are those being recently created by all sorts of people just for trying things out. You’d been gone through several pages of returns without seeing a single meaningful, serious project.
- At this time, when you try to see if there are any more meaningful search orders left, you will notice that the options are rather limited. What has left make even less sense than you’ve tried so far.
- So wouldn’t it be great if I can arrange the hits with my own order? Which takes into the consideration not only the number of stars, and not only when it was created, but everything else as well, such as, how many opening issues, how many issues in total, how many releases has been made, how many people forked it, how many Pull Requests so far, etc, etc, wouldn’t it be great?

Yes, but it wouldn’t be possible, unless using the Github GraphQL query. Long story short, this is the GraphQL query that I use...

Please continue to
https://medium.com/@suntong001/query-github-graphql-9a4547d33bad
where GraphQL code and may examples are given, which is hard to port over here. 

But I'm dicthing medium.com and moving my blog to dev.to, from now on.
Slow and steady
Tags: beginners, career
Published: 2019-05-06 21:21:05

---
title: Slow and steady
published: true
description: Because it's worth saying again and again
cover_image: https://thepracticaldev.s3.amazonaws.com/i/gvfn25a01di9aeiiu9vt.jpg
tags: beginners,career
series: Career and other thoughts on working in the IT industry
---

Today's post can be summarized in one word:⠀
PATIENCE 
⠀
Often I see people obsessing too much over trends, what's current, what's new, what's "hot"...⠀
I see them being way too eager to jump on them, often without laying the proper foundation, or even research. Whether it's a new CSS3 feature, a JS framework, a static site generator...⠀
⠀
I prefer to wait & make sure I have the prerequisites and understand them at least to some degree.⠀
Also, the early versions usually end up getting revised and reworked, sometimes drastically, so I think it's smarter to wait for a more stable & reliable version.⠀
Not to mention that some of them end up being fads that go away after a couple months.⠀
⠀
For example, I've been learning front-end for a while now, and even managed to get an internship with it, yet I've still not used a JS framework. Moreover, even if I wanted to learn one, I feel there are still things about ES6 that I should learn more about first.⠀
⠀
That's it for today, happy Monday, have a great week! 👋⠀
Personal site/portfolio
Tags: portfolio, react, review, javascript
Published: 2019-05-06 20:33:31

---
title: Personal site/portfolio
published: true
description: I finally got myself a personal site :)
tags: portfolio, react, review, javascript
---

I delayed the thought of making a personal site or portfolio for a long time. The main reason was that I didn't think that I had enough experience or projects to show off. On top of that, I needed a *professional* domain. So when .dev domains came out I got one basically forcing myself to build a personal site.

I gathered most of my projects, some of which I found scattered throughout different folders and uploaded them on GitHub (The ones that weren't already there). Then I started thinking of the design 🤔. I am not an *artistic person* but I was sure that with my personal site I wanted to show a part of me so I decided to include things that I like in general, not just development oriented. I used Adobe XD for designing as I am on Windows and I find it a pretty good replacement for Sketch. I finally settled for what I would call a minimalistic site. My main inspiration was Ali Spittel's article [Building a Kickass Portfolio](https://zen-of-programming.com/kickass-portfolio/). Thank you @aspittel.

Then I probably made my first mistake. I didn't even think about what I was going to use to make it. I just used ReactJS even though it is so minimalistic that it can be created very easy without it. I also built a backend using Express.js for handling the form submission. I used an npm package called nodemailer to mail myself the form data. On top of that, I also added a Matomo script for tracking, optimized for a SPA and an opt-out option. The final step was building and deploying it on my RaspberryPi 3 B+ (which I love so much), getting a free SSL certificate, figuring out how to make NGINX serve content on two different domains, setting up Cloudflare (🍰) and automatically updating the IP inside Cloudflare because I have a dynamic IP. Really, apart from setting up Cloudflare, the backend part was way more challenging than the frontend. But, after all of that, I am proud of what I got.

Now, it is your turn. I ask you to check out my site and tell me: what do you like, what you don't like, what you would do differently, and overall, what are your thoughts on my site and my projects. 🤗

Here is the site: https://david-sima.dev/

Thank you for your time! 😄