teleren/devto huggingface dataset:
VIDEO: Understanding this with call, apply and bind
Tags: javascript, beginners, tutorial, video
Published: 2018-06-24 22:33:45

---
title: VIDEO: Understanding this with call, apply and bind
published: true
description: Get a better understanding of how this works using call, apply and bind
tags: javascript, beginner, tutorial, video 
---

Hi everyone! My name is **Gissur**. I'm an Icelandic web developer living in the Scottish borders. I've just launched a new javascript/coding youtube channel, and wanted to share it with the dev.to community.

This is my first endeavour at put any content like this out, so I would love to get some suggestions/feedback on how I can make this better, and what you would like to see in the future.

The first video discusses the often mysterious **this** keyword in javascript. Also helps explain the **call**, **apply** and **bind** functions, functions that often look scarier than they actually are.

I thought that explaining the this keyword would be fitting since the channel is named after it =) I will be trying to do a good mix of core javascript concepts, along with more advanced concepts. Also probably do full episodes on working with the command line, git, vscode, npm etc.

**Video**

[![this.CODE Episode 1](https://img.youtube.com/vi/rmsHtcz2GBg/0.jpg)](https://www.youtube.com/watch?v=rmsHtcz2GBg)

Here is the **code**, so you can follow along: [github.com/gissisim/callapplybind](https://github.com/gissisim/callapplybind)

After getting feedback that one viewer had a hard time reading the text. I've also released a [zoomed in version](https://www.youtube.com/watch?v=YfOt8S2H2B8). Please let me know which one works better. Small issue with the zoom at the start.
Solve the Cretan maze
Tags: challenge, restapi, maze, code
Published: 2018-06-24 20:33:03

---
title: Solve the Cretan maze
published: true
description: I created my first coding challenge, the Cretan maze and you can solve it by writing a program that gets out of the maze
tags: challenge, restapi, maze, code
cover_image: https://thepracticaldev.s3.amazonaws.com/i/8fugvxvagjlgbylsuxm9.PNG
---

UPDATE:
06.26. I added a winners section! :)
07.01. You can now specify the level of your maze (BEGINNER - 7, ADVANCED - 15, EXPERT - 31)

Last week I had an idea and today it became reality.
It is a "game" in which you are in a maze and you have to get out of it. I know it sounds simple, so to be able to see the exit, first, you have to collect 3 golden coins. Is it still easy? You control the game through a REST API. 

So your job is to write a program that gets out of the maze. Simple, huh? :)

I was so excited that today I had time to make some progress, and I guess it is in a really good shape now. There are a lot of missing features I dreamt of for the first time, but I think it's time to go live. 

Expect some bugs... but I hope you will still find it interesting and fun! :)

Here you can find the details: [cretan maze](https://coding-challanges.herokuapp.com/)
You can check the code here: [git repository](https://github.com/floppylab/coding-challanges)

Planned features:
+ winners
+ levels
- moving walls 

I used Spring Boot and Thymeleaf and I published on Heroku so I use PostgreSQL.

Please feel free to contact me! :)
One more thing: I would love to hear your thoughts about it! :)
BxJS Weekly Ep. 16 - javascript news podcast
Tags: javascript, node, podcast, news
Published: 2018-06-24 20:30:46

---
title: BxJS Weekly Ep. 16 - javascript news podcast
published: true
description: Listen to the best javascript news of the week in a podcast form
tags: javascript, node, podcast, news
---

Hey dev.to community!

BxJS Weekly Episode 16 is now out! 🚀
Listen to the best javascript news of the week in a podcast form right here.
You can find all the mentioned links [here on github](https://github.com/BuildingXwithJS/bxjs-weekly/blob/master/episodes/Episode-16-2018-06-23.md).

You can also watch [this episode on youtube](https://youtu.be/z5WpercHH4o).

Any feedback is appreciated 😁

Additional stuff:
- [Twitch channel](https://www.twitch.tv/yamalight)
- [Discord server](https://discord.gg/hnKCXqQ)
- [BxJS Weekly github repo](https://github.com/BuildingXwithJS/bxjs-weekly)
The joy of streams
Tags: java, streams, coding, programming
Published: 2018-06-24 19:49:41

---
title: The joy of streams
published: true
description: Using Java 8 streams for easy collection processing
tags: java, streams, coding, programming
---

Recently, I have written a class that looked roughly like this:
``` java
public class Requirement { ...
	public Requirement(...) { ...
	}
	public When getWhen() { ...
	}
	public Event getEvent() {...
	}
	public SystemReaction getSystemReaction() {...
	}
}
```
I had a list of `Requirement` instances. Now, I needed the set of `Event` instances that was referenced by at least one `Requirement`. An `Event` instance could also be `null`.

In Java before Java 8, I would have done the following:
a) Create an empty `HashSet`
b) Iterate over the list of `Requirement` instances
c) For each `Requirement` instance, check if `getEvent()` returns `null`
d) If it does not return `null`, add the event to the `HashSet`

Starting with Java 8, you can use streams to accomplish this task in a one-liner:
``` java
Set<Event> events = requirements.stream().map(req -> req.getEvent())
  .filter(event -> event != null).collect(Collectors.toSet());
``` 

To find out more about streams, check out [this tutorial](http://www.baeldung.com/java-8-streams).
Organizing React
Tags: discuss, react, preact
Published: 2018-06-24 17:37:15

---
title: Organizing React
published: true
description: How do you organize your React Components
tags: #discuss #react #preact
---

So, I have been dabbling around in React for a while now and I have been looking around for a standard way of organizing React components now. But I didn't couldn't find a standard way for this.


How do you guys structure your React Components ? 
And can you explain its pros and cons ?
Expertise and context-based answer rating system for Q&A websites.
Tags: discuss, programming, stackoverflow, bigdata
Published: 2018-06-24 15:10:05

---
title: Expertise and context-based answer rating system for Q&A websites.
published: true
description: 
tags: discussion, programming, StackOverflow, bigdata
---

First of all, let me give you a bit of context. I am into the final year of my undergraduate studies and as part of the final year, I have the opportunity to do a research project. So this is merely a concept I cooked up inside my head and I wanted to hear what the fellow devs think before I pitch this to my supervisor. Any feedback is welcome.

Let's take StackOverflow as an example, because why not? Currently, any type of feedback you give, doesn't matter who you are and how much reputation you have, you can have a 10k reputation or you can have 10 reputations, it's all taken the same. 
What I basically want to do is change this and make these feedback a user gives, weigh according to their expertise and the context of the question.
For Example, let's imagine there is a FORTRAN question, 

User A - Very experienced in FORTRAN.
User B - Very experienced in Java. 

In this scenario, User A's feedback will have more weight than User B's feedback.

This can be used in upvoting/downvoting questions or answers, ranking the order of answers displayed.  

How to come up with the expertise? 

For that, I'm thinking of profiling the users based on their StackOverflow stats and maybe use their GitHub stats as well.

I hope you understood what I'm trying to say. Look at this concept as a pure research project.

Any feedback, good or bad is welcome, or if there are any improvements to be made.
How to get a job?
Tags: help, career
Published: 2018-06-24 11:00:10

---
title: How to get a job?
published: true
description: ???
tags: help,career
---

I'm looking for a work right now. I'm a student, so I don't have a degree if it matters. I don't have a lot of projects, mostly I contribute to the IDE I use. I don't think I'd count myself as a senior, nor I'm a junior, because I know much more than writing code. Should I consider remote work if I haven't ever worked before? Is it a good idea to look for a job in my local area first? Unfortunately, the salary in my local area is not what I expect for a mid/senior software engineer/web developer, but since this is going to be my first job anyway, maybe I should not worry that much about my salary and just get some experience?
Thanks in advice :)

(P.S.: if you're an employer looking for a person who knows Go, Ruby, Python, JS (TypeScript and frameworks: Vue, React), I'd be happy to send my resume to you)
Quick Tip: Faking Dates in PHP with Carbon
Tags: tips, php, testing, phpunit
Published: 2018-06-24 09:40:38

---
title: "Quick Tip: Faking Dates in PHP with Carbon"
published: true
description: "You don't need to be the Doctor to travel time in PHP."
tags: "tips, php, testing, phpunit"
cover_image: "https://thepracticaldev.s3.amazonaws.com/i/g6nul6t3e7s0271sp4i1.jpg"
---

Often there are scenarios where our code depends on the current time. Most programming languages handle datetime parsing pretty eloquently but a demand for simpler more humane date libraries have arisen. One of the best date libraries I've used is [Carbon](https://carbon.nesbot.com/) by **Brian Nesbitt** which could be briefly described as PHP's `DateTime` for humans. It's a must-to-have tool if you're developing anything complex with Laravel.

Suppose your project includes a routine that needs to save a new row to database _but_ only on specified working days (no weekends, no public holidays). It's trivial to implement date validation by calling, for example, `Carbon::today()` which returns a new object representing the current day.

For asserting that your logic works as intended you would write unit tests as usual. However, you might end up in a situation where your unit tests would fail if the current day is a non-working day. Next, imagine you're practicing continous delivery – like you probably should – and you can't deploy a critical fix to production until tomorrow because of a failing pipeline. How would you explain this to the client? You would probably just mark this test as incomplete so the entire pipeline could pass even if a single unit test would fail.

Fortunately, Carbon offers a simple solution for faking dates in unit tests. You only need to mock the current date to a given Carbon instance with [`setTestNow()`](https://carbon.nesbot.com/docs/#api-testing) method like so:

```php
// Set test date to 12:00 on 18th June, 2018
$testDate = Carbon::create(2018, 6, 18, 12);
Carbon::setTestNow($testDate);

// Execute the logic
BusinessClass::doStuff();

// Check the results
$this->assertDatabaseHas('stuff', [
    // The data you need...
]);

// IMPORTANT: Reset the date to not affect the next test!
Carbon::setTestNow();
```

As you can see, faking dates in tests is very easy. Just don't forget to reset the date or you might experience more failing tests.
Would you hire a mentor?
Tags: question, mentorship
Published: 2018-06-24 09:22:27

---
title: Would you hire a mentor?
published: true
description: 
tags: question, mentorship
---

dev.to, help me out with opinions :) If there would be a service to hire a programming mentor on weekly basis (payments per week/month), and this mentor would help you define your career goals (learn new tech, learn programming from scratch, develop pet project), tell you how to get there, answer all your questions, review all your code etc. etc. - would you pay for that? What would you expect from such a mentor?

Note: not to be confused with short voice consultations. 


![](https://thepracticaldev.s3.amazonaws.com/i/nw4goa9ld9mkcd20l6bq.png)
UX/UX Good Practices and Design Guidelines
Tags: uxux, designguidelines, showdev, frontend
Published: 2018-06-24 08:37:46

---
title: "UX/UX Good Practices and Design Guidelines"
published: true
description: 
tags: UX-UX, Design-Guidelines, showdev, front-end
---
If you are a full stack developer or a front-end developer, here is a curated list of Design guidelines, principles and good practices that can help you polish your User interface as well as user Experience.
This is also good for an indiehacker too if you are working on a personal project but don't have enough finances to hire a designer.


1. https://www.indiehackers.com/forum/resources-to-help-you-improve-your-ui-design-134dbd3367
2. https://www.indiehackers.com/forum/how-do-you-make-apps-look-polished-with-no-design-background-cc1183aad2?utm_source=Indie+Hackers+Newsletter&utm_campaign=indie-hackers-newsletter-20180314&utm_medium=email
3. https://www.julian.com/learn/growth/intro
4. https://www.thinkwithgoogle.com/marketing-resources/experience-design/speed-is-key-optimize-your-mobile-experience/
5. https://developers.google.com/web/fundamentals/design-and-ux/principles/
6. https://lawsofux.com/
7. https://twitter.com/i/moments/880688233641848832
8. http://nelucebotari.webflow.io/#contact
9. https://codeburst.io/5-javascript-style-guides-including-airbnb-github-google-88cbc6b2b7aa
10. https://medium.freecodecamp.org/google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b
11. https://uxplanet.org/7-inexcusable-yet-common-ux-gaffes-that-make-you-look-like-a-total-amateur-cb504a74b917
12. https://uxplanet.org/
13. https://www.indiehackers.com/@pedrocortes/the-anatomy-of-a-great-landing-page-694e691963
14. https://dev.to/oninross/the-art-of-minimalism-with-ux-4ppd
15. http://www.centerline.net/blog/user-experience-design-process-infographic/ ( https://i.pinimg.com/736x/c6/9b/89/c69b89d2a5c5000bf9ff30a515a4e58e--app-design-design-websites.jpg )
16. https://dequeuniversity.com/rules/axe/2.2/color-contras
17. https://dev.to/assaultoustudios/a-ux-review-framework-anyone-can-use-bhn
18. https://developers.google.com/web/fundamentals/design-and-ux/principles/

here is a gist you can fork to add more resources... 
{% gist https://gist.github.com/McKabue/e0ed350fbbbf9f9b10a3308935f02b1a %}
Useful commands to check directories and files size
Tags: unix, linux, linuxcommands, maccommands
Published: 2018-06-24 07:25:03

---
title: Useful commands to check directories and files size
published: true
description: Commands to check directory and file size
tags: unix, linux, linux commands, mac commands
cover_image: https://thepracticaldev.s3.amazonaws.com/i/4ehb74z4tc829zy0hhou.png
---

Often times, there is a need to check the size of directories or files in a project, or to evaluate the space a directory occupies in a live/development server, or just at our local machine.

Here is a list of useful commands that you can leverage to make sure the available disk space of your machine is normal and that the huge `node_modules` directory size of your project hasn't gone crazy :D 

###We will use the [du command](https://www.tecmint.com/check-linux-disk-usage-of-files-and-directories/), which is explained below:

```
du (disc usage) command estimates file_path space usage

The options -sh are (from man du):

  -s, --summarize
         display only a total for each argument

  -h, --human-readable
         print sizes in human readable format (e.g., 1K 234M 2G)
```

To check more than one directory and see the total, use du -sch:
```
  -c, --total
         produce a grand total
```

###So, let's see the basic commands:


Shows you the size of the directory in readable format:
```
$ du -sh directory/
```

Shows you a list with all the directories along with their sizes, ordered by size:

```
$ du -sh * | sort -h
```

Example in my example flutter project:
```
paul@paul-Inspiron-N5110:~/projects/flutter_test$ du -sh * | sort -h
4,0K	android.iml
4,0K	flutter_test_android.iml
4,0K	flutter_test.iml
4,0K	pubspec.yaml
4,0K	README.md
8,0K	test
12K	lib
200K	android
212K	ios

```
Also, if you want to include hidden files and directories, you can run:

```
$ du -sch .[^.]* * |sort -h
```

###Bonus:

Outputs the total and available size of your system's paritions
```
$ df -h
```

Outputs the [inodes](https://en.wikipedia.org/wiki/Inode) usage in your system:
```
$ df -i
```

If you have more useful commands to share, leave them in the comments below!
Sell me your stack!
Tags: discuss, languages, stack
Published: 2018-06-24 07:15:09

---
title: Sell me your stack!
published: true
description: 
tags: discuss, languages, stack
---

![](https://blog.hypem.com/wp-content/uploads/2014/06/stack1.png)

Hello ~~fellas~~ HOMO SAPIENS THAT MANIPULATE BITS ON THEIR COMPUTERS!

It's been almost a year since I asked the good people of `r/webdev` to [Sell me their current stack](https://www.reddit.com/r/webdev/comments/6wj570/hello_devs_of_rwebdev_would_you_please_sell_me/?utm_content=title&utm_medium=front&utm_source=reddit&utm_name=webdev). A personal favourite of mine is where `u/CaptainIncredible` sells me his [.NET](https://www.reddit.com/r/webdev/comments/6wj570/hello_devs_of_rwebdev_would_you_please_sell_me/dm91mhn/) stack. It's an awesome experience, and actually the reason I picked up PHP and Laravel! Surely, a lot of people will find the experience of their peers valuable in picking their next development stack - whether it's for work, a side project, or just the thrill of learning something new!

Here's the original text:

> _I'm going through a phase that I knew most of us went through at one point in our career. You know, the "I don't know what tech/language to focus on" phase. Now, I already know the solution: choose what I'm comfortable with, right? The thing is, I feel like I got the feel and basics of most languages (that are relevant to webdev), to the point that I really need to focus on ONE stack and be proficient with it. Or else, I'd just spread myself too thin and be an advanced beginner on all of those languages._

> _So would you kindly state your current stack (client+sever if possible) and what are the selling points that made you pick that stack? Or what parts of it do you hate? And any recommendations that you'd like to share?_

So people of dev.to, sell me your current stack :D
How do you keep up with all of your favorite blogs?
Tags: discuss
Published: 2018-06-24 05:48:18

---
title: How do you keep up with all of your favorite blogs?
published: true
description: Share your strategy!
tags: discuss
---
Do you sign up for every mailing list you can? Use a RSS feed? Bookmark each blog and just visit them all? I'm curious to see everyone's strategy!
Enable tab completion for Markdown Snippets in VS Code
Tags: vscode, markdown, snippets
Published: 2018-06-25 14:09:28

---
title: Enable tab completion for Markdown Snippets in VS Code
published: true
tags: ["vs code", "markdown", "vscode", "snippets"]
canonical_url: https://www.chaseadams.io/2018/markdown-tab-complete-vs-code/
---

While working on a frontmatter markdown snippet in VS Code I couldn't understand why tab completion wasn't working. It turns out that [some extensions (including Markdown) don't have snippet tab completion enabled by default](https://github.com/Microsoft/vscode/issues/1617) (you can however type `ctrl+Space` to show available snippets with what you've typed).

# Enable snippet tab completion for all extensions

To enable tab completion in VS Code, open your **User Settings** (`⌘+,` in MacOS, `ctrl+,` in Windows) and add the following JSON:

```
"editor.tabCompletion": true,
```

Save your **User Setttings** configuration and your on your way to more efficient snippet usage for Markdown (and other languages)!

 ![](https://www.chaseadams.io/img/markdown-expand.gif "Markdown Snippet Tab Completion")
SVG and the `all` property
Tags: css, svg, frontend, help
Published: 2018-06-07 19:33:50

---
title: SVG and the `all` property
published: true
description: How does the `all` CSS property apply to SVG elements, and how do different browsers treat inheritance with SVG?
tags: css, svg, frontend, help
---
Is this a bug, or a feature? I want all elements in a div to be reset with the `all` property, but I'm getting different results in Chrome and Firefox. Chrome seems to think that the `cx`, `cy`, `d`, `r`, `stroke`, and `fill` (and probably other properties) are CSS-controllable. Firefox seems to apply the `fill` properly, and doesn't touch the other attributes.

{% codepen https://codepen.io/radium-v/pen/gKLONY %}

Firefox gives me what I'd more or less expect. It's not perfect, but I'm not really sure what to expect:
![green circle next to a green triangle on a pink square](https://thepracticaldev.s3.amazonaws.com/i/eao0r114d5zm2izqw0rg.png)

Safari only shows the triangle:
![green triangle on a pink square](https://thepracticaldev.s3.amazonaws.com/i/cm8beqdiysh3x3isbm0h.png)

Chrome takes `all` very, very seriously:
![pink square](https://thepracticaldev.s3.amazonaws.com/i/3k9mile4tz0kit7o4p6u.png)

wat do? 🤷🏻‍♂️

# Update

I checked out the W3C spec and found [this section](https://drafts.csswg.org/css-cascade-3/#preshint). I think it pertains to this issue but I really have no idea how to decipher it.
Ascii Wall-E for Your Terminal
Tags: showdev, fish, art
Published: 2018-06-23 18:22:07

---
title: Ascii Wall-E for Your Terminal
published: true
description: I had a very productive day.  I made Wall-E in my terminal!
tags: showdev, fish, art
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3972tzvzu9sisxp4mh4a.jpg
canonical_url: https://assertnotmagic.com/2018/06/23/ascii-wall-e/
---

Two things.  1. I'm trying out the [fish shell](https://fishshell.com/).  So far I like it!  2. I made Wall-E!

![Wall-E in my terminal](https://assertnotmagic.com/img/wall-e.jpg)

On their website, the fish shell has a neat ascii picture of a fish.  I saw examples of people putting that in their initial greeting when the terminal opens up.  I thought that was neat, but I wanted something more my style.  So I spent a few *cough* <small>hours</small> *cough* making Wall-E, and now he says hello to me whenever I open up my terminal!

In case you're curious, I put the code [into a gist](https://gist.github.com/rpalo/cd77a94616b0a30d1c2a2f18d6bc7581).

Challenge!  Make your own ASCII art and share it.

Happy Saturday!

<hr>

*Originally posted on [`assert_not magic?`](https://assertnotmagic.com/2018/06/23/ascii-wall-e/)*
Is it possible to have a responsive image in a flexbox item?
Tags: help, flexbox, css, html
Published: 2018-06-23 16:18:03

---
title: "Is it possible to have a responsive image in a flexbox item?"
published: true
description: 
tags: help,flexbox, css, html
---
I asked a question on stack-overflow on adding a responsive image in a flex box item and haven't received a good answer yet. 

If the image is one of the flex-box item, it works well - ([Jsfiddle](http://jsfiddle.net/ohLc5xyw/10/))

##When the image is inside a flex item, it starts to misbehave.

Scenario 1: Image stretches distorting the aspect ratio ([Jsfiddle](http://jsfiddle.net/ohLc5xyw/17/))

Scenario 2: Image leaves empty space ([Jsfiddle](http://jsfiddle.net/ohLc5xyw/22/))

Scenario 3: The layout is good until the input receives focus, then everything breaks: [Jsfiddle](http://jsfiddle.net/ohLc5xyw/74/)

This happens in IE 11, Chrome (Version 67.0.3396.87 (Official Build) (64-bit)), but haven't tested in Firefox and Edge.

Is there something i haven't studied about Flex-box, or is it a bug?

https://stackoverflow.com/q/51001326/3563013