teleren/devto huggingface dataset:
Worth the 5 Minutes 
Tags: career, beginners, productivity, junior
Published: 2019-02-28 18:33:28

---
title: Worth the 5 Minutes 
published: true
description: 
tags: #career #beginners #productivity #junior
cover_image: https://thepracticaldev.s3.amazonaws.com/i/qgxwhn5kz3yn505je4p2.jpg
---

I have been coding for a few years now and there was a time when I struggled with a issue. Let me explain. 
 
It was hard for me to start writing code, I dint know where to start or I would start only to stop in the middle somewhere because I was anxious and just dove right in, this was not because I dint know how to code. It could be the fear of coding, just the lack of understanding or experience . No matter what it was I needed to get over it 

*This post is for the ones like me.*

On one occasion one of my dear friend taught me this small ritual. You might probably find it silly but I do assure you on its benefits. Whenever a task came my way the first thing I do is, open my notepad(editor) and write it down. That's it, it was a simple advise. 

What did I write down: 
* Top of the page: **write down my inputs.**
* Bottom of the page: **write down the desired outputs.**
* In the space in between: **steps needed to get to the output.**
You can go as detailed as what objects you want to create, or the next functions you want to write, that’s totally up to you.*

You might tell ***“hey! this is a flow diagram/flow chart”.*** Oh well, it is if you say so, minus all the rules and symbols.
  
Many of you might be reluctant like I was BUT, let me tell you its benefits.

* A better understanding on the data *(i.e. inputs & outputs)*, half the battle is won right here, I say so because knowing the data's behavior gives us a fair outline on what needs to be done to achieve the output and make us aware of the possible risks.

* Also, this decreases the coding time, since it helps filter out the noise from the signal and make us aware of the important details that we need to handle, it deceases chances of surprise issues.

* It’s a guide telling us the next step that needs to be done, could be the next function that need to be written or the next manipulation to be performed on the data.

Hence,

* Trust me when I say this, it cuts the shabby work and makes the code neat and tidy *(one of the most common complain on a beginner is untidy coding ummmmm)*. 


* It makes you mindful about all the alternative routes you can take and helps simplify the complex tasks.

Even if you don't struggle with this issue, this approach gives you a very good understanding on the task, helps you answer the questions you had when you first read the task or maybe raise questions that need answers. 

***I am not saying this is more important than writing actual code but from being a beginner, it definitely helps examine the task at hand even better and get to the point faster without over looking the important details. Totally worth the five minutes.***


*photo by : [Rini Simon](https://www.instagram.com/rinikaruna/)*
Facing a bad time to decide what to do next?
Published: 2019-02-28 18:05:58

---
title: Facing a bad time to decide what to do next?
published: true
description: Hello developer, I'm facing a bad time right now. I'm feeling like I'm stuck in time zone. I am doing coding since 2017 and did few client projects. I'm not feeling like I'm an experienced developer. 2 days ago I decided to do a job so that I can get experience but I don't know what I should do now. I need an experienced developer suggestion so that I can get my first front-end developer job. Your suggestions are important and life-changing for me so please help me.
tags: 
---
LeetCode in Ruby: 102. Binary Tree Level Order Traversal
Tags: leetcode, ruby, binarytree
Published: 2019-02-28 05:08:23

---
title: LeetCode in Ruby: 102. Binary Tree Level Order Traversal
published: true
description: Solution + explanation for Problem 102
tags: #leetcode, #ruby, #binarytree
series: LeetCode in Ruby
---

# Iterative

```ruby
def level_order(root)
  result = []
  return result if root.nil?

  queue = []
  queue << root

  until queue.empty?
    level_size = queue.length
    level = []
    level_size.times do
      node = queue.shift
      level << node.val
      queue << node.left unless node.left.nil?
      queue << node.right unless node.right.nil?
    end
    result << level
  end

  result
end
```

In general, this approach is to go through each level of a given binary tree and add the `val` of each node to `result`. For each iteration, we first create an empty `level` array used to store the values of the nodes at the same level. Then we add the `val` of each node to the `level` array and push the nodes at the next level to `queue` if any. At the end of each iteration, we push the `level` array to `result`.

_Time complexity_: `O(n)`

_Extra memory_: `O(n)`

# Recursive

```ruby
def level_order(root, result = [], level = 0)
  return result unless root

  result << [] if result.length == level
  result[level] << root.val
  level_order(root.left, result, level + 1)
  level_order(root.right, result, level + 1)
end
```

This is similar to the previous approach, except that this one is implemented using recursion. Interestingly, unlike the iterative approach, the recursive approach does not need a `queue` to temporarily store the nodes at the next level.

_Time complexity_: `O(n)`

_Extra memory_: `O(1)`
CSS Animation: Growing SVG Arrow
Tags: css, svg, webdev, showdev
Published: 2019-02-28 17:00:01

I have been doing CSS animations with SVG arrows, I thought they're pretty unique but aren't sure if other people think the same. So I'm wondering if there are people who find these interesting and want to know (if haven't already) how to make cute and unique animations like these:

![Growing arrow animation 1](https://thepracticaldev.s3.amazonaws.com/i/efpgqatippnm08eojgly.gif)
![Growing arrow animation 2](https://thepracticaldev.s3.amazonaws.com/i/ug5iikbkg3u0lwaceajh.gif)

Please leave a comment below to let me know what do you think! (interested, not really interested or already know how and it's too easy) ❤️
Changelog: V2 Editor Autosave!
Tags: meta, changelog
Published: 2019-02-28 16:59:26

---
title: Changelog: V2 Editor Autosave! 
published: true
description: The v2 version of the DEV editor now autosaves if you move off of the page
tags: meta, changelog 
---
Have you ever inadvertently hit the backspace button, moved to a new site, or refreshed accidentally when writing a DEV post? Because, I totally have.

We implemented autosave for the v2 editor so that if any of those things happen, your post will still be there when you come back!

It uses localstorage, so nothing is saved permanently to the server until you actually press the `save` or `publish` button.

Here it is in action (the blip is me refreshing the page) 🎉

![autosave editor](https://thepracticaldev.s3.amazonaws.com/i/1uqyeal1zwfj5ddex349.gif)

If you're using the `v1` markdown editor with frontmatter, you can switch over to the fancy new `v2` editor in the `misc` section of your settings!

![the v1/v2 editor toggle](https://thepracticaldev.s3.amazonaws.com/i/ncergh0x58cqlcitkcxv.png)
My first ebook will be about creating your first ebook
Tags: ebook, sale, preorder, learn
Published: 2019-02-28 16:53:35

---
title: My first ebook will be about creating your first ebook
published: true
description: 
tags: ebook,sale,preorder,learn
---

You heard right, the first ebook I will be creating will about how to write your first ebook. I’ve been thinking about how I would love to create an ebook, but I didn’t know what to write about. Researching how to create an ebook leads to people explaining you should use Canva, Google Docs or something completely different, but they don’t explain how or why.

Canva is an incredible design tool, but why would I use it for information? How would I add a table of contents to my Canva ebook? Google Docs is obviously an amazing document tool. However, the same questions can be asked here. You have to piece together each question to find the correct answers in order to get a definitive answer.

I thought I would save everyone the hassle of this and use the knowledge I gain to help others in creating their ebook(s). The ebook will cover getting started, from planning to the creation and then selling and marketing. Each chapter will be a complete step by step guide. By the end, you will have created your very own ebook to market and sell.

You can preorder the ebook below and use the discount code “EARLYBIRD” for £4 off. The discount code is only available to preorders.

[https://gumroad.com/l/kYoQ/EARLYBIRD](https://gumroad.com/l/kYoQ/EARLYBIRD)
Engineering Bookclub – The Pragmatic Programmer
Tags: bookclub, learning, selfdevelopment
Published: 2019-02-28 16:31:00

---
title: Engineering Bookclub – The Pragmatic Programmer
published: true
tags: bookclub,learning, self-development
canonical_url: https://christine-seeman.com/2019/02/engineering-bookclub-the-pragmatic-programmer/
---

![](https://media.giphy.com/media/AbuQeC846WKOs/giphy.gif)

I’m leading a book club at my workplace, [Flywheel](https://getflywheel.com/) . We are working through “The Pragmatic Programmer From Journeyman to Master” by Andrew Hunt and David Thomas. Published in 1999 this books walks through techniques and tips to level up your development. Even being published more than 20 years ago (😱) there are plenty of parts that are relevant and useful today. Certainly we have also ran into items that aren’t quite as useful now (I’m looking at you suggested Source Control Systems for ClearCase and Visual SourceSafe).

![](https://christine-seeman.com/wp-content/uploads/2019/02/vss.gif) 
Nobody liked using Visual SourceSafe 👎

This was also a book that [Dev Empathy Book Club](https://devempathybook.club/) ran through not too long ago. If you are looking for an online book club specifically for developers, I highly suggest checking it out. [Ariel Caplan](https://amcaplan.ninja/) lead the group, and provided thoughtful discussion questions. With my own book club, I used these questions (with permission from Ariel of course!) as a starting place for our discussions too.

Each week, we meet over lunch and discuss the current chapter. So fare the cadence has been one chapter per week. One thing I have struggled a bit with is keeping the group engaged. Attendance has dropped, and not everyone has read the chapter. Any suggestions for drumming up more excitement? Anyone else have experience with trying to run a technical book club?
Easily Finding Your AWS S3 Canonical ID
Published: 2023-04-29 22:26:40

---
title: Easily Finding Your AWS S3 Canonical ID
published: true
date: 2019-02-28 15:54:19 UTC
tags: 
canonical_url: https://mikestaszel.com/2019/02/28/easily-finding-your.html
---

Another quick post — found this in the AWS Console UI. If you ever need to share your AWS Canonical ID with someone, e.g. to share S3 buckets.

You can find your AWS Canonical ID by using various APIs — but I was also able to find it using the AWS Console UI.

By opening up the S3 console and selecting a bucket you own, you can view the Canonical ID by viewing the Access Control List in the Permissions tab.

![AWS S3 Console Canonical ID](https://mikestaszel.com/img/aws_s3_canonical_id.png)

Nice and easy, no API documentation needed!
📖TIL: Terminal Command with an Editor
Tags: bash, zsh, terminal, editor
Published: 2019-02-28 17:45:56

---
title: 📖TIL: Terminal Command with an Editor
published: true
tags: [bash, zsh, terminal, editor]
canonical_url: https://scottw.com/s7t
---

via @bphogan’s excellent Small, Sharp, Software Tools: type `⌃x ⌃e` and it will open the current command in your favorite editor.

Once you save your changes the command will execute. 💣
What's on your home screen?
Published: 2019-02-28 15:46:45

---
title: What's on your home screen?
published: true
description: Comment down below.
tags: 
---

Hey Devs,

I just love minimal wallpapers, So here is my home screen wallpaper.

![My Wall](https://thepracticaldev.s3.amazonaws.com/i/en2yui5fa8z3nyzkywmm.png)

Post your wallpaper in the comment section, let me know if you have better then this one.
Custom Checkbox checks slowly in edge browser with ngFor Angular 5
Tags: angular
Published: 2019-02-28 14:59:05

---
title: Custom Checkbox checks slowly in edge browser with ngFor Angular 5
published: true
description: 
tags: #angular
---
I'm binding elements using *ngFor in the UI. The element contains the custom checkbox that checks the value based on the condition from the data example, <b>item.isSelected= true</b> in the sense. If I click the checkbox I'm changing only the selected checkbox data to <b>item.isSelected= true</b> inside the modifier array. If anything I'm changing in the array It will automatically reflect in UI too. because data is bonded to ngFor it again try to rebind data to UI. But it will take long too bind values and check the checkbox in UI(Only in edge browser others like chrome, firefox doing well). Please give me some suggestion to resolve this one.

<b>And also post this question in StackOverflow I didn't get any solution so far. someone, please suggest any solution.</b>

stackoverflow link :

https://stackoverflow.com/questions/54766100/custom-check-box-click-slow-in-edge-browser-with-ngfor-angular-5
Is it safe to host many droplets in one digital ocean account?
Tags: digitalocean, droplet, security, help
Published: 2019-02-28 14:44:07

---
title: Is it safe to host many droplets in one digital ocean account?
published: true
description: 
tags: digital ocean, droplet, security, help
---

Is it safe to host 100 droplets in one digital ocean account? I know you can do 2-factor authentication. I’m just wondering about the security because if someone simply breaks into your account or gets the password they can basically delete all your droplets in one session.
Web Component Course Brainstorming
Tags: webcomponents, javascript, course, discuss
Published: 2019-02-28 14:41:11

---
title: Web Component Course Brainstorming
published: true
description: 
tags: Web Components,JavaScript,Course, discuss
---

![Course Brainstorm](https://thepracticaldev.s3.amazonaws.com/i/d5p6ad7sko6w13632t4l.png)

It has begun.
react-circular-input — React components for easily composing a circular range input
Tags: react, typescript, component, javascript
Published: 2019-02-28 14:34:22

---
title: react-circular-input — React components for easily composing a circular range input
published: true
description: React components for easily composing a circular range input
tags: react, typescript, component, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/7950o2lnbccgcszvxjxe.gif
---
I needed a very flexible React circular range input so I built one with Typescript and Hooks.

You can find quite a few examples at: https://react-circular-input.now.sh/examples. 

You can easily animate it, style it and add your own custom components.

Let me know what you think!
7 Reasons For Adopting DevOps Culture
Tags: devops, devopsculture, cloudcomputing
Published: 2019-02-28 14:02:45

---
title: 7 Reasons For Adopting DevOps Culture
published: true
description: 
tags: DevOps, DevOps Culture, Cloud Computing
---

[read more](https://www.hiredevops.org/why-should-you-adopt-a-devops-culture-in-2019/)
How To Become DevOps Engineer
Tags: devops, guide, cloudcomputing, cicd
Published: 2019-02-28 13:57:41

---
title: How To Become DevOps Engineer
published: true
description: 
tags: DevOps, Guide, Cloud Computing, CI/CD
---

[read more](https://www.hiredevops.org/how-to-become-devops-engineer/)
What Should The 12 Factor App Be?
Tags: devops, microservices, saas, 12factorapp
Published: 2019-02-28 13:50:58

---
title: What Should The 12 Factor App Be?
published: true
description: 
tags: DevOps, microservices, SaaS, 12-Factor App
---

[read more](https://www.hiredevops.org/the-twelve-factor-app-successful-microservices-guideline/)
Then After forEach
Tags: discuss, javascript
Published: 2019-02-28 13:06:26

Hi. I need a function to make sure forEach is completed in JavaScript.

Simply I created this function;

```js
Object.defineProperty(Array.prototype, "asyncForEach", {
    enumerable: false,
    value: function(task){
        return new Promise((resolve, reject) => {
			this.forEach(function(item, index, array){
				task(item, index, array);
				if(Object.is(array.length - 1, index)){
					resolve({ status: 'finished', count: array.length })
				}
			});		   
		})
    }
});
```

I use this function like below;

```js

homePage.disabled = true

orders.asyncForEach(function (order) {
    api.sendOrder(order)
}).then(function (data) {
    homePage.disabled = false
})
```

This function works as I expect.

So friends, do you know any other ways? Is this an optimized way to catch async operations are completed?
Build dynamic filter controls in Laravel
Tags: laravel, php, dev, tutorial
Published: 2019-02-28 12:35:45

Hi All, this is [Adi](https://twitter.com/skadimoolam).
I wanted to share with you my simple solution for searching, filtering & sorting data in Laravel.

![The final widget](https://i.imgur.com/ihlzgZD.png)Here's an image of what we are going to build. The first input is for searching, the second input is to select the column to order by, third is to select how to sort and last we have a dropdown to choose how many items we want in a page.

> This was a widget I built for my side project - [LaravelCollections.com](https://laravelcollections.com/?utm_campaign=laravel-filter-bar-article)

You can find all the code for this tutorial at [this Github Gist](https://gist.github.com/skadimoolam/30cded089e45094f04e58a5954a7493a).

### TLDR;
My solution is quite simple, both the UI part and the controlling logic. The UI part is a horizontal form with `GET` method to the same page, this way when the Filter button is clicked, the form is redirected to the current page with each input fields as query parameters.

The logic in the controller is also quite simple. We check for these query parameters and use them to filter data from the model accordingly.

This is the gist of my solution. I go into much more detail with code examples below.

### The Controller
Let's start with the controller. The logic here is pretty simple.
![Controller Logic](https://i.imgur.com/Urx4iY2.png)
As you notice we initialize 4 variables with default data. Then we check if the request has any parameters if so we then set the parameters as the variables' data.

Once we are done checking and setting the parameter, we search, sort and paginate the User model (in this case, it can be any model). Then we send the filtered data to the `View` along with other variables.

I'll cover the search method of the User model in the next section.

### The Model
Our search logic is also quite simple. The search method goes inside your User model class.
![Model's search method](https://i.imgur.com/g2Y8XiI.png)
You can learn more about Laravel `Model` scopes [here](https://laravel.com/docs/5.8/eloquent#query-scopes).

### The View
Like the other parts, the view that makes all this work is also pretty simple.
![View markup](https://i.imgur.com/YwxTQFb.png)

We have a form with 5 elements, 1st input get the search query, 2nd selects the column to sort by, 3rd selects the order in which to sort by, 4th selects the records per page and last we have the Filter button to fire off the form request.

### Conclusion
I hope you understood this not so lengthy tutorial. This is simple solutions I cooked up in minutes for a simple need I had. Hope you make use of it in your projects. If you have improvements to this code, do let me know, I would love to learn them.

Since you're a Laravel developer, I have something to show you.
[LaravelCollections.com](https://laravelcollections.com/?utm_campaign=laravel-filter-bar-article) is a site where I curate great resources for Laravel Developers, if you are interested, check it out.
Let's Connect!
Tags: discuss, beginners, connect, twitter
Published: 2019-02-28 12:32:00

Dev.To is _great_ for learning from other developers through medium-to-long-form blog posts. I think I've learned more being a member of Dev over the past four or five months than over any other comparable period in my life. And it's a great community! People are welcoming and eager to help and share their experiences.

But it's not my go-to website for job searches. That would be __LinkedIn__, or **Indeed**, or (because I'm in Ireland) IrishJobs.ie. The format of these websites makes it easier to host a CV/resume-like page online and scout for relevant jobs based on location, salary, and tech stack filters.

And it's not my go-to website for having real-time conversations about current events. That's still __Twitter__ (and I think that's the same for most people).

Unless you're [WeChat](https://www.dragonsocial.net/blog/social-media-in-china/#WeChat), no product should try to be a Jack-of-all-trades. Do one thing and do it well. Dev.To does tech blogging really well, and may be able to expand into a developer-focused social network, but for now, it's got its limitations.

On that note, I'd love to connect with some more developers on Twitter (for fun) and LinkedIn (for business). If we're not already, connect with me and post your info below so I can follow you back! Bonus points if you want to talk about Java. Or dogs.

my Twitter: [@_awwsmm](https://twitter.com/_awwsmm)
my LinkedIn: [in/awwsmm](https://www.linkedin.com/in/awwsmm/)
3 Mistakes to avoid when creating paper prototypes
Tags: ux, webdev, ui, prototyping
Published: 2019-02-28 11:54:02

---
title: 3 Mistakes to avoid when creating paper prototypes
published: true
description: 
tags: #ux #webdev #ui #prototyping
cover_image: https://thepracticaldev.s3.amazonaws.com/i/qch74g6y7d1ee7czmmkp.png
---

Paper prototypes are lo-fi prototypes that can be made in short period of time and that’s why they’re helpful: they’re easy and fast to made so we can include the user again in our process with a usability test(eliminate some usability problems as early as possible). Also, it’s easy for us to come up with multiple ideas of how the prototype should look like.

## Taking much time

![Painting paper prototypes](https://cdn-images-1.medium.com/max/800/0*gN0b0OELwqazChGB)

I’ve seen paper prototypes with a really good drawing and I think this is a mistake because it takes so much time. We shouldn’t be focusing on the aesthetics here, we want a lo-fi prototype that is good enough to be tested.


![Simulating loading in a paper prototypef](https://cdn-images-1.medium.com/max/800/1*AwZZizBh1itmkGoVwv6MYg.gif)

## Making fancy stuff

I’ve seen people making fancy loading screen with animation made with hands and paper. And that’s another mistake, because the user was so impressed with the trick than the product and he said:”Niiiice!”.

We shouldn’t make the user excited because he’s using a paper prototype, and even that most probably he will be, we should make sure we neutralize this excitement by at least not making fancy moves like the loading in the GIF above.

## Not preparing reactions to user choices

![Not preparing reactions to user choices](https://cdn-images-1.medium.com/max/800/0*4vbTkeB4zQLNy7Gs)

When the user clicks on something, you have to make sure you know what to give him. Prepare the scenarios so well that you won’t confuse him by giving a wrong piece of paper or getting stuck and hesitant what to give him.