teleren/devto huggingface dataset:
ES6 Code in an Angular Project
Tags: angular, javascript, es6
Published: 2019-05-29 22:52:21

---
title: ES6 Code in an Angular Project
published: true
tags: [angular, javascript, es6]
canonical_url: https://www.prestonlamb.com/blog/es6-code-in-an-angular-project
---

I was recently working on an Angular project where I was loading a JavaScript file into the application in the .angular-cli.json file (the same would happen if your file is the angular.json file). The file was pretty simple, only about 40 lines at most. But it was using ES6 syntax (like `const`) and a `for(const - of -)` loop. I've been writing JavaScript like that for a long time, in my Node.js applications and in TypeScript in Angular projects. It's just second nature now, and I didn't think anything of it.

The issue came a few days ago when I attempted to do a production build when we were going to deploy the application. I ran the `ng build --prod` command, and about halfway through I got an error:

![Output of an error during an Angular build process.](https://www.prestonlamb.com/static/images/blogPosts/es6CodeInAngular/error-output.png)

Sometimes I'd get this error, and sometimes it was different but similar. The error was something about "unexpected token const". It wasn't real specific though, and I had no idea what file to even look in to figure out what the issue was. So I just started googling the issue, and was lucky enough to come across [this GitHub issue](https://github.com/angular/angular-cli/issues/7725) that pointed me in the right direction. Specifically, I found this comment:

![GitHub issue comment that gave me the idea to look for JavaScript code written in ES6.](https://www.prestonlamb.com/static/images/blogPosts/es6CodeInAngular/github-issue.png)

At that point I was able to go back into my codebase and figure out what the issue was. Because the file was small enough, I was able to manually change it back to ES5 syntax. After doing that, the build succeeded and I could move on.

This issue may not come up that often, because you may not write ES6 code that you include through the .angular-cli.json file like I did. But if you need to, don't forget to either write valid ES5 to begin with, or run the code through Babel or another JavaScript compiler and include that file in the project.
What is YOUR ultimate goal that you want to achieve as a developer?
Tags: discuss, goals, life
Published: 2018-08-15 04:09:52

---
title: What is YOUR ultimate goal that you want to achieve as a developer?
published: true
description: Aka your purpose as a developer
tags: discuss, goals, life
---
We all know that the journey of a developer is one that requires constant learning, no matter how long you have been on the road. However, what is that one thing that you want to achieve, and when you do achieve it, you can sit back and say, "Ahhh.. I have finally fulfilled my purpose as a developer!" 

(It can be directly or indirectly related to being a developer)
Automatic CopyRight
Tags: javascript, html, css
Published: 2018-07-17 11:40:24

---
title: Automatic CopyRight
published: true
description: "Automatically update CopyRight data"
tags: javascript, HTML, CSS
---

## File Structure

If someone has doubts about the file structure used, it follows the output of the "tree" command, applied to the computer terminal.

![Terminal](https://thepracticaldev.s3.amazonaws.com/i/fr138x1bdk8jnb1sn84h.png)


## HTML code

To display the copyright, I created a file called "index.html" in the root folder (examples-myBlog) and just below the "body" tag, created the "footer" tag and inserted the id = "copy", so let's be able to use the id in our javascript code. 
To call our javascript file, we create the "script" tag and insert the src = "js / copy.js".

```
<html>
  <body>

    <footer id="copy"></footer>

    <script src="js/copy.js"><script>
  </body>
</html>
```

## JS Code

The first thing to do in the javascript code is to create a new "Date ()" object and store it in the "date" variable. We did this because "Date ()" returns us a very complete information, something like this: "Mon Oct 09 2017 15:27:03 GMT-0300 (-03)". Since we want to display only the year in our copyright, we will create the variable "year" to get only the year of our object, passing "date.getFullYear ()". Now let's just do the basics, we'll get the element with id = "copy" and then use "innerHTML" to display the year on our sample page.

```
let date = new Date();
let year = date.getFullYear();

let copyRight = document.getElementById('copy');
copyRight.innerHTML = 'Copyright ©'+ year;
```


This post was first on my blog when I wrote my articles in Portuguese, you can access this [link](https://mariorodeghiero.com/). If you want to follow me on social networks this is my [Twitter](https://twitter.com/rodeghiero_).

Thanks!!
How Promotions work in Large Corporations
Tags: career
Published: 2019-07-05 03:34:57

---
title: How Promotions work in Large Corporations
published: true
tags: career
canonical_url: https://pybit.es/guest-promotions-large-corporations.html
---

A collaboration with Bob and Julian from [PyBites](https://pybit.es) on soft skills.

### Introduction

I'm going on year 16 of my professional engineering career. Most of it spent in large and mid-size corporations. In this time, I was exposed to a number of interesting situations and processes related to performance reviews and promotions. And while I was at Pycon 2018, the topic came up in some hallway conversations. Specifically, what does one needs to do to get promoted?

Anthony Shaw actually covered the basics in his Can we talk about tech salaries article about negotiating better pay. But the hallway discussion left me thinking that there's a few more things I can add to the list. Perhaps some that might help explain the process better for folks that have never been through it. Especially how it works in larger corporations.

When the guys from Pybites suggested collaborating on a new post on soft-skills, I thought this would be a good topic to cover. So here we are.

[Read on ...](https://pybit.es/guest-promotions-large-corporations.html)
my first octolapse
Tags: 3dprinting, fdm, octolapse, octopi
Published: 2018-08-15 01:18:55

---
title: my first octolapse
published: true
description: getting started using octolapse
tags: 3dprinting,fdm,octolapse,octopi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/bjz4gzcilwhjd1j1y556.jpg
---

{% youtube FBltPLZQpF4 %}

Check out octolapse on your octopi!!
{% github FormerLurker/Octolapse %}

Here's an excellent [tutorial](https://hackaday.com/2018/07/02/coolest-way-to-watch-3d-printing-lights-camera-octolapse/). 

<sup>_cover photo credit: [Ines Álvarez Fdez](https://unsplash.com/@powwpic?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge)_</sup>
PHP project scaffolding (kickstarting) tool
Tags: showdev, php, productivity, automation
Published: 2018-08-15 00:50:33

---
title: PHP project scaffolding (kickstarting) tool
published: true
description: Initialize and kickstart a new project/library in a jiffy- the way you want.
tags: #showdev, #php, #productivity, #automation
---

Introducing my ambitious project **phint**. Already can do tons of things but more contributions would make it perfect. And new features are underway to please any prolific developer.

{% github adhocore/phint %}

Phint is a productivity tool for console that Interactively scaffolds and initializes new PHP project with sane defaults using twig templates in no time. Flexible, extensible, customizable and many options to choose from.

Saves you plenty of time and effort doing mundane repetitive tasks.


Features:
- generate dot files the likes of `.gitignore, .travis.yml, . editorconfig` etc
- generate license, readme.md, composer.json with all deps
- generate changelog stub, contributing guide, issue and PR template
- generate binaries if any
- git init
- interactively ask and install all the dev and prod deps
- generate `phpunit.xml`, test `bootstrap.php` 
- generate test stubs for all classes/methods corresponding to `src` (`phint test`)
- generate docs (.md) from docblocks :) (`phint docs`)
- update its own self (`phint update`)
- support custom templates from a path user chooses :)

Thanks for reading. Please try it out and leave feedbacks. 😊
「世界最悪のログイン処理コード」ではない可能性は無いのか？
Tags: security
Published: 2018-08-15 00:26:10

---
title: 「世界最悪のログイン処理コード」ではない可能性は無いのか？
published: true
description: 
tags: security
canonical_url: https://crieit.net/posts/3007e75a4752e022ab2ad08cd46004de
---

先日「世界最悪のログイン処理コード」が話題になった。

https://twitter.com/hassy_nz/status/1027890455940198400


ただ、開発者がその脆弱性を理解した上で、ちゃんと対処を行っており問題ない状態である可能性はないかを考えてみた。

## 一番の問題

今回のコードで一番問題になっているのはやはりここだろう。

```javascript
var accounts = apiService.sql(
  "SELECT * FROM users"
);
```

生のSQLをサーバーに送って実行した結果をクライアント側で取得できるようにしていることで、第三者があらゆる情報を取得できてしまう脆弱性と、クライアント側にて大量のメモリ使用を強制させて負荷を与えるという問題をたった三行で想像させてしまう恐ろしいコードだ。

でも、ちょっと考え方を変えるとそうではない可能性もあるということが分かる。

### SQL文をフィルタリングしている

もしサーバー側で送られてきたSQLをフィルタリングして、許可していないSQLを弾いている場合はデータベースのあらゆる情報をとれてしまうということはない。

### そもそもSQLをそのまま実行しているわけではない

`SELECT * FROM users`というSQL文を引数として渡しているが、これを必ずしもサーバー側でそのまま実行しているとは限らない。そもそも`apiService.sql`というメソッドが引数だけを使って処理をしているとは限らない。

色々総合すると下記の様な感じになっている可能性もある。

JavaScript側

```javascript
class ApiService {
  sql(query) {
    const response = $.ajax({
      url: "/api/sql",
      type: "get",
      async: false,
      data: {
        username: $("#username").val(),
        password: $("#password").val(),
        sql: query
      }
    });
    return response.result;
  }
}
```

サーバー側

```php
$methods = [
  "SELECT * FROM users" => "getLoginUser",
  :
];
$this->{$methods[$request["sql"]]}($request);
```

`getLoginUser`の中で`SELECT id, nickname FROM users WHERE username = '$username' AND password = '$password'`みたいなのを実行して結果を返す感じ。

こんな感じであればセキュリティ的にもメモリ的にも全く問題はない。

ただしもちろんAPIのURLを別にすればいいだけでSQL文でフィルタリングする必要性も全く無いし、誰がどう見てもSQLを直接動かしているようにしか見えないので実装的にはとんでもない話ではあると思う。

## 生パスワードを使ってる問題

次に問題となるのは入力されたパスワードをそのまま使っている、つまりデータベースにも生のパスワードが保存されているのではないか疑惑。これに関しては先程のようにサーバー側で単なるSQLを直接実行しているわけではないという前提であれば疑惑を回避できる。

ただ、`account.password === password`という処理があるせいで、やはり生パスワードを使っていないとおかしいのでは、という話になってしまう。

ただここは一応`$("#password").val()`は必ずしも#passwordが入力欄とは限らないので、例えば#password_inputに入力されたものを随時サーバーに送って、ハッシュ化したものを#passwordというhiddenに入れておく、という可能性があり、それであれば特にその部分の問題はなくなる。

もちろんこのコードにするためにわざわざ通信して変換しているという処理は理解し難い。

## まとめ

一応「世界最悪のログイン処理コード」であることを回避することができるような考え方は不可能ではなさそうだが、そのかわり今度は人としての優しさを失ったコードになってしまいそう。
tzconv - convert time between timezones
Published: 2018-11-18 13:50:42

---
title: tzconv - convert time between timezones
published: true
tags: 
canonical_url: https://alex.dzyoba.com/blog/tzconv/
---

I made a nice little thing called `tzconv` – [https://github.com/alexdzyoba/tzconv](https://github.com/alexdzyoba/tzconv). It’s a CLI tool that converts time between timezones and it’s useful (at least for me) when you investigate done incident and need to match times.

Imagine, you had an incident that happened at 11:45 your local time but your logs in ELK or Splunk are in UTC. So, what time was 11:45 in UTC?

```
$ tzconv utc 11:45
08:45
```

Boom! You got it!

You can add the third parameter to convert time from specific timezone, not from your local. For instance, your alert system sent you an email with a central European time and your server log timestamps are in Eastern time.

```
$ tzconv neyork 20:20 cet
14:20

```

Note, that I’ve mistyped New York and it still worked. That’s because locations are not matched exactly but fuzzy searched!

You can find more examples in the [project README](https://github.com/alexdzyoba/tzconv/blob/master/README.md#examples). Feel free to contribute, I’ve got a couple of things I would like to see implemented – check the [issues page](https://github.com/alexdzyoba/tzconv/issues). The tool itself is written in Go and quite simple yet useful.

That’s it for now, till the next time!
Windows, I never missed you.
Tags: windows, windows10
Published: 2018-08-14 23:35:39

---
title: Windows, I never missed you.
published: true
description: Trying to make a windows10 usb from Mac
tags: windows, windows10
cover_image: https://thepracticaldev.s3.amazonaws.com/i/aimbhuy7lqwya5ut089s.jpg
---
Thank you to [Josh Beam](https://www.joshbeam.com/2017/11/23/making-a-bootable-windows-10-usb-drive-on-macos-high-sierra/) for a very easy to do method of making a Windows10 bootable usb drive.

It'd been almost a decade since I've used Windows in any real way (aside from a steam gaming PC, which is still windows 7). I was asked recently to fix a HP Stream pc, that'd been completely demolished with malware. I had to wipe the whole thing, and start over. I downloaded a new windows10 image, and found I couldn't write it to a usb drive. I didn't have any DVDr anymore, because... WHY?! .. Apple says "use bootcamp assistant to create an image" only.. On High Sierra Bootcamp assistant will only write to the local hard drive. I couldn't get my Kali vm to image the ISO file either.

Turns out it's ridiculously simple, format the usb drive as something horrifically windows, then literally copy the files with /bin/cp to the drive. *BOOM* usb bootable drive. 

Thank you Josh.

<sub>_cover photo by [Ines Álvarez Fdez](https://unsplash.com/photos/Bb_X4JgSqIM) on Unsplash_</sub>
Making my portfolio better
Tags: discuss, webdev, javascript
Published: 2018-08-14 13:50:02

---
title: Making my portfolio better
published: true
description: 
tags: discuss, webdev, javaScript
---

![preview of portfolio](https://thepracticaldev.s3.amazonaws.com/i/82ou6tbqm5rsij73cz8v.PNG)
It was like a season of portfolios a while back and everyone was making a new one. This was the time for me to redesign my own portfolio which was hanging there from forever, with the bare minimum design you can think of.

## Thinking of redesign.

Before redesigning I need to think about a design that can look good. I looked at @alispitel's portfolio It helped a little, actually It is a great design but I wasn't getting any way to make a personalized version of that design. I also saw @benharper's portfolio It's unique on its own. The thing to notice after looking at a lot of portfolios was most of the portfolios have at least 4 sections [About, contact, projects, social]. **They were using GIFS, Animations, Canvas too.**

## Getting an Inspiring design.

After that, I looked at the landing pages of the website which are good at designing. They were heavily using illustrations and I liked them too. **Soft colours, catchy headline fonts and having good illustration/image were the takes from them.** I now have a blurred picture in mind of that is gonna to be but a lot was still unclear.

## Coding & finding what really works.

At this time I clone my repo and started trying out new designs to find out what works. After making it in different ways and but I wasn't getting a catchy design. I have made the 4 sections in HTML and design was still ugly.Finally I came to [https://cssgrid.io](https://cssgrid.io). If you don't know about it, It's a landing page for free CSS GRID course made by fabulous @wesbos. I took the idea of using SVG + colour for the hero. I even used the polygon for that image.

I used [Hero patterns](http://www.heropatterns.com/) to find the right SVG and [clippy](https://bennettfeely.com/clippy/) for the polygon.

## Tweaking and making it better.

I have made the design now and it just needed small tweaks and some animations. I used an animation on my name and used a custom font from google fonts.
I used font awesome for social icons. Then I used custom list-style-type (😫 only firefox supports it.) rest get a good old numbered list.

![firefox vs other on list](https://thepracticaldev.s3.amazonaws.com/i/nvm7w1h07522s73xgner.PNG)

## Testing it on Mobile and different browsers

Finishing all that stuff I now need to get out of my primary browser and run the page on different hosts and browsers to see how it works across platforms. I tried it on chrome Android, Edge, Firefox and It seemed to work fine except to the polygon not supported in Edge. I reduced padding for smartphones.

Now its done and I wrote a commit message and pushed it. see it [https://itsjzt.github.io/](https://itsjzt.github.io/)
React Component Lifecycle Explained
Tags: react, javascript, webdev, video
Published: 2018-08-14 22:48:57

---
title: React Component Lifecycle Explained
published: true
description: React components have several lifecycle methods that you can override to run your code at a particular time in the process. In this video, we will explore all the React Component Lifecycle methods.
tags: react,javascript,webdev,video
---

React components have several lifecycle methods that you can override to run your code at a particular time in the process. In this video, we will explore all the React Component Lifecycle methods. 

[Link to Video on YouTube](https://youtu.be/7iHepe36m0c)

---

#### If this video was helpful, ❤️ it and [subscribe to my YouTube channel](https://www.youtube.com/channel/UClCm-WAOgN6XLwCpefSVezg?sub_confirmation=1).


{% link https://dev.to/theoutlander/build-your-own-react-boilerplate-4b8l %}

---
Jelly Fin: Serverless framework versus Claudia.js
Tags: serverless, jellyfin, claudiajs, byefelicia
Published: 2018-08-14 22:29:15

---
title: Jelly Fin: Serverless framework versus Claudia.js
published: true
description: A slight course correction
tags: serverless, jellyfin, claudiajs, byefelicia
---

I like the idea of using Dev.to as a way to journal my project.  Keeps me honest.  Those of you who are following along get to see an app come together and cheer me on, too.

Thanks to AT&T Uverse, we've been without internet since Sunday.  It's the second time we've had an outage and we've _just_ had them for a little over a month. #ByeFelicia  

So, we're switching over to Spectrum #fingerscrossed.

So, the more I've been reading into Claudia.js the more I'm realizing that Serverless framework might be too much for me at the moment.  I need to scale back and think on simpler terms.

The fact that I have no internet limits my ability to continue at the moment, but I can always research until we get installed this weekend.  

Follow along with me on [#jellyfin](https://dev.to/t/jellyfin).
Your opinion about an idea of a platform for mentors and junior developers
Tags: discuss, beginners, opensource, career
Published: 2018-08-14 20:03:16

---
title: Your opinion about an idea of a platform for mentors and junior developers
published: true
description: 
tags: discuss, beginners, opensource, career
---

Hello, folks!
I am a professional software developer that has a dream of building his own project, that will bring value to people. Some time ago my friend and I got a idea of a project, that connects junior developers, mentors, and people who may have an idea of an awesome non-profit project, but don't have any resources to implement it.

Following the best traditions of "startup from engineers" we immediately started to write the code, without any market research. At the moment we have a kind of prototype, that is available in opensource. And finally I decided to ask people, what do they think about the concept of our project?

What do we offer people:

For junior developers, we offer code reviews, an experience of team collaboration and work on real-world projects.

For mentors we offer an experience in mentoring, leading the team and product, ability to grow and hire the best performing teammates for your company.

For anyone with an idea of a valuable project we offer development teams staffed with junior developers and mentors, that can implement your idea for free.

The only limitation is that all projects should be open-sourced, until the author gets some money and is ready to give some donation to the platform. Those donations will cover our project's full-time team members salaries and will be also spread between mentors, as an additional encourage.

I'm really interested what do you think about such idea? Would you like to join this project in any role?
Java 10 features - What is new in Java 10?
Tags: java, programming, webdev, code
Published: 2018-08-14 18:04:48

---
title: Java 10 features - What is new in Java 10?
published: true
description: Java 10 features - What is new in Java 10?
tags: #java #programming #webdev #code
---

Post Link : https://www.skptricks.com/2018/08/Java-10-features.html 

While we all are talking about Java 9 and some people have yet to adopt Java 8 in their projects, here comes the new release of Java, the JDK 10. It's available to download now on Oracle's website. This is the first release in the new release schedule, where you have a new Java release every six months. I know it's quite early, but that's a reality now.
Apart from the six-month releases, every three years, there will be an LTS release, which is sort of a major Java release. The next LTS release is Java 11, which should be out in September. So you can aim for that. Then you can update three years after that to the next LTS release.

<a href="https://www.skptricks.com/2018/08/Java-10-features.html" >Java 10 features </a> - What is new in Java 10?

<img src="https://1.bp.blogspot.com/-EFD3uzKqBF0/W3JjEIBC8gI/AAAAAAAABzU/6RCO-tKBn_4RdwzQiwzMl1rQXlWeeCuIACLcBGAs/s320/j10.jpg" />


What's new in Java 10?
Released in March 2018, Java 10 comes just six months after its predecessor, Java 9 and brings an enhanced Local Variable Type Inference, garbage collection and compilation.

The three-year wait for Java 9 frustrated most Java developers, but it meant that we half expected that this release would be delayed too.

But that was not the case! And now, Oracle has committed to releasing a new version every six months.

However, this move towards such regular updates has sparked debate among Java users. Some preferring less frequent releases with more significant changes, while others like the stable nature of more regular updates to the development environment.

Java Top 10 features
Local-Variable Type Inference
Consolidate the JDK Forest into a Single Repository
Garbage-Collector Interface
Parallel Full GC for G1
Application Class-Data Sharing
Thread-Local Handshakes
Remove the Native-Header Generation Tool (javah)
Additional Unicode Language-Tag Extensions
Heap Allocation on Alternative Memory Devices
Experimental Java-Based JIT Compiler
Root Certificates
Time-Based Release Versioning