teleren/devto huggingface dataset:
How to be a Vue js developer
Published: 2020-01-06 15:14:56

Hey guys, my name is Bontus Mayor and i currently work as the C.T.O at Testrogen Innovation Hub. Not too long ago i started to get interested in JavaScript. It was very difficult because i was used to Xampp and HT DOCS stuffs. So the whole CLI stuffs that came with JavaScript threw me off balance. I tried learning React but my brain couldn’t just take it in. Everything got better when i heard about Vue. Understanding Vue was very easy for me as compared to react. The whole thing started making sense.


So I want to help you understand what it takes to be a Vue developer. Vue.js is an open-source Model–view–viewmodel JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members coming from various companies such as Netlify and Netguru.
Understanding Vue requires a knowledge of JavaScript because Vue was built from JavaScript. The need to know about JS syntax and basic operations, DOM manipulations, Hoisting, Event bubbling, prototyping etc. You should also have a knowledge of HTML or PUG, CSS or BOOTSTRAP.

![Vue Roadmap](https://thepracticaldev.s3.amazonaws.com/i/mqfvj1mhhflm1zpny8e5.png)

To start with Vue, you have to install it on your computer. The easiest way to do this is via the Command Line via the Vue CLI. Before you start this, you should have the recent version of NPM or YARN installed on your machine.
Now lets install Vue:

`npm install -g @vue/cli
 OR
yarn global add @vue/cli`

After installation, you will have access to the Vue binary in your command line. You can verify that it is properly installed by simply running Vue, which should present you with a help message listing all available commands.
You can check you have the right version with this command:

`vue --version`


##Now you are good to go!!!
Your Journey just began. You can learn all the things listed on the roadmap above via the links below:
the basics of how the Web works
HTML, CSS
the DOM
how browsers work
the JavaScript basics, event handling, the newest ES6–7–8 features
Git
how to use the terminal
the Vue basics
webpack
how to install packages using npm or yarn
how to run tasks using npm scripts
CSS modern tools: SASS, PostCSS
a CSS framework like Tailwind or Bootstrap or another
how to use CSS in JS using Single File Components
how to manage state using component state or vuex, and its libraries
how to check types using prop types or TypeScript
how to handle routing using vue-router
how to consume APIs using GraphQL/Apollo/REST using axios or fetch
use an utility library like lodash or moment
how to test using Jest and the Vue Test Utils
how to perform end to end testing using Cypress or Puppeteer or others
how to build a desktop Vue app using Electron
how to internationalize an app using vue-i18n
how to implement server-side rendering
The list could grow indefinitely, but those are the basics of a well-rounded Vue developer.
Is there a way to deploy Node app with Netlify?
Tags: javascript, codenewbie, explainlikeimfive, help
Published: 2020-01-06 14:54:15

---
title: Is there a way to deploy Node app with Netlify?
published: true
description: Is there a way to deploy a Node/express app
tags: #javaScript #codenewbie #explainlikeimfive #help
---

Quick question.

Is there a way to deploy a Node/express app (with public static files/folders) using Netlify? 

Please let me know.

Thanks!
Are vulnerabilities for testing dependencies a threat to my app in production? 
Tags: help
Published: 2020-01-06 14:44:22

---
title: Are vulnerabilities for testing dependencies a threat to my app in production? 
published: true
tags: help
---

**Some background**: 

I'm working on a React application my agency recently picked up. The application has existed for ~2 years. I ran `npm audit` last week and discovered the app has quite a few high-level security vulnerabilities. 

Most of them are coming from `jest`, a testing framework for React. We'll need to upgrade the package by a few major versions to resolve the vulnerabilities. 

This could be a lot of work to take on right now, but I don't know if it should be a high priority. I'm not sure if this dependency has any impact on my app's security in production.

**My question:** 

Are vulnerabilities from my testing framework a threat to my app in production?

Any advice would be appreciated! Thank you!
Height And Width CSS Property
Tags: webdev, css, tutorial, html
Published: 2020-01-06 14:38:28

Today, In this post we'll be looking at the width and height property.


<script async src="https:&#x2F;&#x2F;sdk.canva.com&#x2F;v1&#x2F;embed.js"></script>
<a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DADwI_SgveU&#x2F;view?utm_content=DADwI_SgveU&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Height &amp; Width</a> by <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;pinkylalwani881?utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Pinky Lalwani</a>
YNAB at KotlinConf 2019
Published: 2020-01-06 14:38:07

---
title: YNAB at KotlinConf 2019
published: true
description: 
tags: 
---

A few weeks ago some of the YNAB team attended [KotlinConf 2019](https://kotlinconf.com/).

We have been using Kotlin in our Android app for some time and are particularly interested in its [multiplatform  capability](https://kotlinlang.org/docs/reference/multiplatform.html) as a way to share code across Android, iOS and the Web.

After attending quite a few multiplatform focused sessions, chatting with folks at the conference, and discussing things as a team, we're planning to start experimenting with multiplatform usage across Android and iOS and then eventually on the Web.  There is significant potential here that we want to explore!


![YNAB at KotlinConf 2019](https://thepracticaldev.s3.amazonaws.com/i/bodic5e3wio5quifnb12.jpg)
_Left to Right: Kevin, Graham, Taylor, Jeff, Brady_
Back from the 💀
Published: 2020-01-06 14:28:24

---
title: Back from the 💀 
published: true
description: Been gone for a while. 
tags: 
---

👋 

It’s been a while but I just wanted to pop in and let everyone know how I’m doing. 2019 brought quite a few changes to my life. I started attending online university for Business Administration/Accounting. I also have been trying to level up my python skills in my spare time. I actually have received some interesting potential coding job opportunities at the end of 2019 and I’m actively engaged in landing a job. 2020 is looking good so far. I hope everyone is well. I’ll drop in more frequently to Dev.to this year. Have a wonderful week everyone.
Year End Review 2019
Tags: yearendreview, speakerlife
Published: 2019-12-17 02:17:35

---
title: Year End Review 2019
published: True
description: Year End Review 2019
tags: #YearEndReview, #SpeakerLife
---
**What I had done in 2019**
* Focus in Career ,joined Big 4 at February 2019 #ClosingTheGap
* Go to GYM Weekly start from July 2019
* GitHub: 199 contributions
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ax1hr8k3bw003rwudzxl.png)
* Blog (Azure Security): 34 blogs , Views: 6204
* Speaking(Meetup & Conference)[Singapore & Malaysia]: 19 Sessions
 - January 2019 - Microsoft Ignite The Tour Singapore, Azure Secure DevOps Kit, GeekCamp 2019 Singapore, Getting Started with Azure Security Center
 - February 2019 - Azure Machine Learning Workshop
 - April 2019 - Global Azure Bootcamp & Global AI Night
 - June 2019 - Insider Dev Tour (Malaysia & Singapore), Security in OSS DevOps
 - August 2019 - AI Builder with PowerApps, Securing your data with Azure SQL DB
 - September 2019 - Global AI Night
 - October 2019 - Hacktoberfest , .Net Conf,aOS Singapore and Mentorship in Imagine Cup 2020
 - December 2019 - Global AI Bootcamp
* YouTube (AI & Azure Security): 31  videos, Views: 24.6k
* Microsoft Certified Azure Security Engineer Associate in December
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/reqp6lwelk0miqkzldz5.png)

**2020 Plan**
* International Speaker, out of Asia
 - I had submit CFP but still in Pending (Azure Day Poland, Expert Live Norway & Azure Fest Netherlands)
* Learn Docker and AKS
ใน Ruby ค่า nil เป็นแค่ Object นึง
Tags: ruby
Published: 2020-01-06 14:05:37

หลายภาษา มีค่าพิเศษที่แสดงถึงค่าว่าง ๆ หรือแสดงว่าตัวแปรนั้น ๆ ยังไม่ได้ถูกกำหนดค่าอะไรให้ เช่น

- C, C++ มีค่า `NULL`
- Java มีค่า `null`
- Go มี `nil`

ซึ่งใน 4 ภาษาที่กล่าวมา ค่านี้นั้นเป็นค่าที่พิเศษกว่าค่าอื่น ๆ

แต่สำหรับ [Ruby](http://ruby-lang.org) นั้นมีค่า `nil` เช่นกัน ต่างกันตรงที่ `nil` ของ Ruby นั้นก็เป็น Object ธรรมดา ไม่ต่างจากค่าอื่น ๆ ในโลกของ Ruby เลย เพราะโลกของ Ruby นั้น ทุก ๆ ค่าเป็น Object เสมอ :D

ทุก Object ใน Ruby จะต้องระบุได้ว่าเป็น Object ของ Class อะไร เราสามารถใช้ method `.class` เพื่อเรียกดูได้ ลองเปิด irb ขึ้นมาแล้วสั่ง `nil.class` ก็จะรู้ว่า `nil` เป็น Object ของ Class อะไร

```shell
~ irb
irb(main):001:0> nil.class
=> NilClass
```

ซึ่งจริงๆแล้ว `nil` เป็น Object ของ `NilClass` นั่นเอง

เราสามารถเรียกดู methods ของ Object ได้โดยเรียก method ชื่อ `methods` เราก็เรียกดู method ของ `nil` ได้เช่นกัน แบบนี้

```shell
~ irb
irb(main):001:0> nil.methods
=> [:to_h, :&, :to_c, :inspect, :===, :to_s, :to_f, :=~, :to_i, :to_a, :to_r, :rationalize, :nil?, :|, :^, :dup, :itself, :yield_self, :then, :taint, :tainted?, :untaint, :untrust, :untrusted?, :trust, :frozen?, :methods, :singleton_methods, :protected_methods, :private_methods, :public_methods, :instance_variables, :instance_variable_get, :instance_variable_set, :instance_variable_defined?, :remove_instance_variable, :instance_of?, :kind_of?, :is_a?, :tap, :singleton_class, :clone, :display, :hash, :class, :method, :public_method, :public_send, :singleton_method, :define_singleton_method, :extend, :to_enum, :enum_for, :<=>, :!~, :eql?, :respond_to?, :freeze, :object_id, :send, :__send__, :!, :==, :__id__, :!=, :equal?, :instance_eval, :instance_exec]
```

เราลองมาใช้พวก method `to_*` เพื่อแปลงค่า `nil` เป็นค่าอื่น ๆ ได้เช่น

```shell
irb(main):003:0> nil.to_h # แปลงเป็น Hash
=> {}
irb(main):004:0> nil.to_i # แปลงเป็น Integer
=> 0
irb(main):005:0> nil.to_a # แปลงเป็น Array
=> []
irb(main):006:0> nil.to_f # แปลงเป็น Float
=> 0.0
```

สรุปว่า Ruby ออกแบบมาให้ถูกอย่างเป็น Object และแต่ละ Object ก็มี method ให้เราเรียกใช้ การใช้ค็อนเซ็ปนี้ของ Ruby นั้นเอามาใช้กับค่า `nil` ด้วยเช่นกัน ไม่ต้องแยก `nil` เป็นค่าพิเศษแบบภาษาอื่น ๆ เลย
Change Data Capture For All Of Your Databases With Debezium - Episode 114
Published: 2020-01-06 14:05:06

<p>Databases are useful for inspecting the current state of your application, but inspecting the history of that data can get messy without a way to track changes as they happen. Debezium is an open source platform for reliable change data capture that you can use to build supplemental systems for everything from maintaining audit trails to real-time updates of your data warehouse. In this episode Gunnar Morling and Randall Hauch explain why it got started, how it works, and some of the myriad ways that you can use it. If you have ever struggled with implementing your own change data capture pipeline, or understanding when it would be useful then this episode is for you.</p><p><a href='https://www.dataengineeringpodcast.com/debezium-change-data-capture-episode-114/'>Listen Now!</a></p>
Check if a number is Even or Odd
Tags: replit, typescript
Published: 2020-01-06 13:58:17

---
title: Check if a number is Even or Odd
published: true
tags: replit, typescript
---

This simply uses the and bitwise operator to check if a number is even or odd. The operator converts the number to a binary number and user the rightmost number. if the rightmost digit is one, the number is said to be odd. If the rightmost digit is Zero, the number is said to be even.

{% replit @olosundeifedayo/Is-number-even-or-odd %}?signin=true
Checking Up On Python's Role in DevOps
Published: 2020-01-06 13:52:10

<p>Python has been part of the standard toolkit for systems administrators since it was created. In recent years there has been a shift in how servers are deployed and managed, and how code gets released due to the rise of cloud computing and the accompanying DevOps movement. The increased need for automation and speed of iteration has been a perfect use case for Python, cementing its position as a powerful tool for operations. In this episode Moshe Zadka reflects on his experiences using Python in a DevOps context and the book that he wrote on the subject. He also discusses the difference in what aspects of the language are useful as an introduction for system operators and where they can continue their learning.</p><p><a href='https://www.pythonpodcast.com/devops-in-python-episode-244/'>Listen Now!</a></p>
Identify and clean up .present? calls on collections
Tags: rails, ruby, monkeypatching, performance
Published: 2020-01-06 13:49:02

---
title: Identify and clean up .present? calls on collections
published: true
description: A short hands-on post about how to find and fix slow .present calls on ActiveRecord collections where .exists? is much better
tags: Rails, Ruby, Monkeypatching, Performance
---

Over the holidays I experimented with an old question I had. "How to find the places in codebase where .present? or .any? is called on a collection?". The answer is important because calling those methods instead of .exists? forces the records in the collection to get loaded from DB into Ruby memory which, depending on the size of the collection, can be a huge performance hit.

After looking into Rails' source, I came up with a monkeypatch that only touches method definitions on ActiveRecord collections. The module that needs prepending is `ActiveRecord::Relation`.

```rb
# in config/application.rb

module CollectionQueryingSafety
  def present?
    raise_warning_about_performance_problems(__method__)
  end

  def blank?
    raise_warning_about_performance_problems(__method__)
  end

  private

    def raise_warning_about_performance_problems(method_name)
      raise(
        ".#{ method_name } called on an AR collection. "\
        "See if .exists? can be used instead."
      )
    end
end

unless Rails.env.production?
  ActiveRecord::Relation.prepend(CollectionQueryingSafety)
end
```

This snippet will raise errors in non-production environments. Given decent coverage, running your test suite should show most places where suboptimal calls occur.

For example, there could be offensive code like this:

```rb
# bad
@my_model.some_has_many_association.present?

# good
@my_model.some_has_many_association.exists?
```

Now, besides `.present?` and `.blank?` there are other array methods - `.any?`, `.none?`, and `.many?` - which in most cases should not be called on collections.
Unfortunately, since these methods accept blocks, I did not feel confident overriding them outright, but in the cases where no block is passed to `.any?`, `.exists?` is a much faster and correct alternative.
Sorting HTML elements with Flexbox and JavaScript
Tags: html, beginners, tutorial, css
Published: 2020-01-06 13:42:04

#What is flexBox

flexbox or flexible box layout is a layout scheme in CSS. which is used to align and organize HTML elements in a layout.  

let say this is our HTML layout

```
<div class="row">
  <div class="col " id="">1</div>
  <div class="col " id="">3</div>
  <div class="col " id="">5</div>
  <div class="col " id="">200</div>
  <div class="col " id="">4</div>
  <div class="col " id="">2</div>
  <div class="col " id="">400</div>
</div>

```

to use the flexbox properties we have to change the `display:` type of the parent to `flex`

```
.row {
  display: flex;
}
```

for making the elements appear in a column instead of a row we have to set the `flex-direction`. 

it can have values row, row-reverse, column, column-reverse;

so getting the column layout we add `flex-direction: column` to our css.


```
.row {
  display: flex;
  flex-direction: column
}
```


another flexbox property is`order`, as the name suggest it can be used to define where in the flex container the current element should be placed.

for more info on how CSS flex works.
[flexbox cheet-sheet](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

by using this trick we can easy make a simple list which we can sort in any way we want.


{% jsfiddle https://jsfiddle.net/nijeesh4all/on5rsax8/59 result,html,css,js %}
The #1 Book to Grow Your Programming Career in 2020
Tags: career, books, beginners
Published: 2020-01-10 16:17:36

---
title: The #1 Book to Grow Your Programming Career in 2020
published: true
date: 2020-01-06 13:40:00 UTC
tags: Career, Books, Beginners
canonical_url: https://booksoncode.com/articles/programmer-career-guide-review
---

Learning more technical skills is an obvious 2020 resolution for a software engineer. There are plenty of resources on technical topics (which I cover for front-end developers in my article, [_The Definitive Guide to Front-end Development in 2020_](https://booksoncode.com/articles/front-end-developer-handbook-2019)), but what if learning more technical skills is frankly not motivating?

What if there are other more pressing problems: you are stuck at your pay bracket with seemingly nowhere to grow, or you want to transition programming jobs, or you are simply stuck professionally, confused about the next career move?

There is a book for that, and it is specifically for programmers, hallelujah! Published in 2017, this programming career book is still relevant and unrivaled.

If you like the content in this article, you can also find my other content at my blog, _[Books on Code](http://booksoncode.com)_.

 
## Overview

[The Complete Software Developer's Career Guide](https://www.amazon.com/gp/product/B073X6GNJ1/) by John Sonmez is exactly as the title describes, with no understatement. This guide is truly “complete”: it is 798 pages and it seems to have every programming career topic under the sun. The book is written to capture a broad audience, encouraging readers to skip chapters and read what is most relevant in the phase of their career.


Here is just a handful of topics this guide covers:

- The technical skills you need to have to get started as a programmer

- The various ways you can pursue a programming education

- Types of programmers you can choose to become

- How to write a resume, interview, get an internship, and get a job

- How to switch to programming mid-career

- Soft skills you need to work well with others as a developer

- How to advance your programming career by networking and growing a reputation

The book is available on Amazon and free for Kindle Unlimited users. This was a deterrent for me since I use neither Audible nor Kindle as my main ebook retailer (speaking to all fellow Kobo readers), but this isn’t a problem for many readers.

In this review, I am going to cover three main takeaways after reading this book cover-to-cover (more about reading cover-to-cover in _Takeaway #3_).

Then, stay to the end for the _Review Snapshot_, which includes important key information — like whether this book was actually fun to read. Fun matters, even in careers books about programming.

 
[Read More](https://booksoncode.com/articles/programmer-career-guide-review)
Top 10 NodeJS Frameworks For Developers in 2020

Tags: node
Published: 2020-01-06 13:31:54

Node.js is an open-source, cross-platform runtime environment built on Chrome’s V8 javascript engine. The event-driven, non-blocking I/O model makes the NodeJS framework an extremely lightweight and efficient web application.

As a developer, one gets to smoothly use the same language for both client-side and server-side scripting and this unique facility has increased the quick adoption of NodeJS frameworks by many developers across the globe in building web applications of any size.

Since it’s been launched in 2009 as a tool for building scalable, server-side web applications it has brought about exponential growth in its usage.

In addition, Node facilitates quick prototyping in building unique projects.

Let’s check out this list of <a href="https://codersera.com/blog/top-10-nodejs-frameworks-for-developers-in-2020/">10 Top NodeJS Frameworks</a>
Ward - A client-side framework to build static websites and applications
Tags: webdev, javascript, frontend, framework
Published: 2020-01-06 13:27:22

Recently I've found myself developing a frontend router for a friend's static website.
That pushed me to go further and I've ended building a client-side framework for static websites. 

The framework is called [**"Ward"**](https://github.com/ColinEspinas/ward). The main features are routing and templating.

It is super easy to get your project running and can speed up a lot the process of building a static website.

Also I've developed a [node server module](https://github.com/ColinEspinas/ward-server) to help with serving the files, plus a [CLI tool](https://github.com/ColinEspinas/ward-cli) that helps with creating and serving projects.

Here are the links to the project and the tools around it:
* https://github.com/ColinEspinas/ward
* https://github.com/ColinEspinas/ward-server
* https://github.com/ColinEspinas/ward-cli

I also want to add that I'm kind of your everyday beginner with javascript and would really appreciate feedback or help on this project, do not hesitate to contribute or open issues.

Thanks for reading!