teleren/devto huggingface dataset:
Pushing Left, Like a Boss — Part 5.13 — HTTPS only
Tags: programming, appsec, beginners, security
Published: 2019-09-16 18:57:04

---
title: Pushing Left, Like a Boss — Part 5.13 — HTTPS only
published: true
description: The 5th section of this series details various examples of secure coding.
series: Pushing Left Like a Boss
tags: programming, appsec, beginners, security
---
###This series, and my blog, have moved! [Check it out](https://wehackpurple.com/g8tg)!
---
##HTTPS only — for every app, everyone, always.

![Temple in South Korea, 2019, Photo Credit: Bryan Hughes](https://thepracticaldev.s3.amazonaws.com/i/cu0g8hqvd94uvmdyukh0.jpeg)
#####Temple in South Korea, 2019, Photo Credit: [Bryan Hughes](https://twitter.com/nebrius)

Now that encryption is [fast](https://www.troyhunt.com/i-wanna-go-fast-https-massive-speed-advantage/), and [free](https://letsencrypt.org), and [we know the risks of not using it](https://www.troyhunt.com/heres-why-your-static-website-needs-https/), there is literally no excuse not to use HTTPS only for every application on the Internet. Literally every application, **even for static pages** that contain no sensitive information. 
###[Read the rest on my NEW blog!](https://wehackpurple.com/5jh7)!
How I Hacked Big Data Using Only Google Chrome (and a little bit of Postman)
Tags: challenge, javascript, security
Published: 2019-09-16 18:34:37

Ok, so, a little while ago I was looking over a website my friend works at. She's a Junior Developer and so clearly thinks I am magic and can hack anything. Of course I wanted her to think that, so I started poking around on the site she works on.

After a few failed, very obvious opening moves, (nmap seemed to show lots of open ports, but it was just a cluster) I noticed something odd. There were a bunch of requests -- a huge volume actually, with a particular signiture, let's call it 'cp5' to keep this anonymous. This struck me as odd so I looked through the network requests to see what was being sent. I noticed something even odder.

Nothing about the request seemed to include any proper validation information. It was clearly a big data collector that wanted to report everything I was doing on the website back to the owner. So I did what any normal person would do and crafted a packet telling it that I'd done something I hadn't.

200 OK.

Well then! Surely, I thought, if I send it thousands upon thousands of packets, all telling it I did things I didn't really do it would reject these as false.

Nope.

It accepts them and tells me everything is fine. There is nothing in the code-base that filters requests after that, unless they are badly crafted, which my fake data was not -- it was crafted to look like something it wasn't.

So I can tell a multi-million pound florist that vastly more people are navigating their website who aren't (not that I would; my data would have seemed like a blip, nothing more, and done no real damage to their business) and it just accepts my word as gospel.

So that's how I hacked big data with just Postman and Chrome. I'm not going to tell you all the details of which program it is, or how the owners of that program tell me it can't be fixed, even though they charge around $2000 a month for it, because then everyone would do what I did.

But... what is the thing you use to clear snow away?

Hhhhmmmm. I've said too much.
How to parse CSV with double quote (") character in Crystal
Tags: crystal, ruby
Published: 2019-09-16 18:19:17

We use microservice written in Crystal to parse large CSV files (about 1.5Gb). Some rows in these files may contain no closed " characters:

```csv
,Y,FEDERAL NATIONAL MORTGAGE ASSOCIATION "F,,
```

With Crystal default CSV parse settings this row and everything after it won't be parsed correctly because `DEFAULT_QUOTE_CHAR` constant is equal to `"`. Of course you can override `quote_char` param in `CSV` constructor with something that cannot be found in your document.

From my point of view the best is to use zero byte which is `'\u0000'` in Crystal.


```ruby
csv = CSV.new(file, headers: true, strip: true, quote_char: '\u0000')
while csv.next
  # ... 
end
```

Hack!
Check Dictionary has key in D
Tags: dlang, tutorial
Published: 2019-09-16 18:02:33

I'll just take the example from adding to a Dictionary. 

```dlang
string[int][string] data;
if("hello"!in data)
    data["hello"] = [95: "value"];
```

The `in` operator is not made available to arrays. It is expected to have a time complexity of O(1) which is possible with dictionary but not a list.
Real World REST API with Kotlin (Hexagon)
Tags: kotlin
Published: 2019-09-16 17:51:28

To showcase the toolkit usage, I developed a Real World example (https://github.com/gothinkster/realworld) implemented with Hexagon (https://hexagonkt.com). You can check it in the following repository: https://github.com/hexagonkt/real_world

This example covers JWT auth, CORS implementation, Simple DB store and integration testing.

I will be using this example to test new Hexagon features.

Please, share your feedback :)
フロントエンジニアのリーダブルコード #3 コメントの書き方
Tags: javascript, jquery, readablecode
Published: 2019-09-16 17:44:22

「フロントエンジニアのリーダブルコード」の最後は、コメントの書き方です。この記事は、コードを書く開発者全員に役に立ちます。コメントは、多様性があり、言葉の捉え方は人それぞれなので、コードを書くより難しいです。

#### #3　コメントの書き方
「優れているコードを書くには、優れていないコードを書かないこと。」これがリーダブルコードの考えです。この記事でも、書くべきコメントより、**書くべきではないコメント**に注目したいと思います。

コードから抽出できることをコメントに書くべきではありません。学習目的ならば良いかもしれませんが、開発現場では必要ないでしょう。またコードを補正するようなコメントもやめましょう。

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/5u5eikdyp1eraumyqpqz.png)

補正コメントを書く必要があるならば、そのコードを修正して下さい。例では、背景色を変更することをコメントで伝えていますが、関数名に(backgroundの)"bg"を付け加えるべきです。

定数にコメントをつける。名前が明確なのでコメントが必要ない定数もある。だけど、コメントをつけて改善できる定数は多いです。定数の値を決めた背景や、説明を記録することで一段と理解しやすいでしょう。

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zdcsorp1dzw7orbunpzk.png)

身内用のコメントだと思うかもしれないが、他の開発者はこのような背景が解りやすいコメントを求めています。

開発者はベストを尽くしているが、コードに欠陥が出てしまう場合がある。欠陥は、コメントに残しておくと良いだろう。参考書籍「[リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック](https://www.oreilly.co.jp/books/9784873115658/)」には、以下のようにすると良いとされています。

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sqsprnw1orwtdd6dshbj.png)

チーム内で記法を決めます。コメントの先頭に記述をすることで、他の開発者がどこを修正すれば良いかすぐに判断出来ます。

次は、読み手の立場になって考えることです。他の開発者は、あなたのように熟知していません。しかし、無意識に、わかっていること前提のコメントを書いてしまいます。

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/bfk36y2ycql91041bjpp.png)
※良い例ではありません。
上記のコードを見て、他の開発者は「あれ、要素をひとつひとつ処理するならmapでも良いのでは？」と思うかも知れません。しかし、このコードには背景があります。user_numの値を使って、外部の要素に何かしらの変化を加えているのです。コードが、他の処理と連動していることを知らずに、変更してしまうとトラブルの原因になってしまいます。トラブルを防ぐために、ハマりそうな罠をコメントに追記しておきましょう。

これまでのコメント書き方は、書籍「[リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック](https://www.oreilly.co.jp/books/9784873115658/)」の第5章「コメントすべきことを知る」を参考にしました。第6章「コメントは正確で簡潔に」も開発現場ではとても役に立ちます。ぜひ拝見して見てください。参考コードはフロントエンジニア向けにしましたが、コメントは全ての開発者に役に立ちます。
Simple concepts of Modern JavaScript
Tags: javascript, beginners
Published: 2019-09-16 17:21:07

Before I start, please note that this post is me trying to explain these concepts to myself so make sure I fully understood them and have these notes when I needed. There is much more to these concepts, but my notes will be summarized as very basic explanations. 

The concepts are: 
*Arrow functions,
*Template literals,
*Var, Let and Const,
*Ternary (conditional) operator,
*Shorthand object assignment and
*Spread operator.

**Arrow Functions**
Simply put, Arrow Functions are function wrote in a shorter form. They have this name because they use an arrow sign **=>** instead of the word function. 
```javascript
//regular function
function hello() {
  console.log('Hello');
}

//arrow function
const hello = () => {console.log('Hello')}
```

**Template Literals**
I have been using those for a while and had no idea what they are named. It is a new way of creating a string. I honestly am not quite sure how to explain it, so I will show:

```javascript
const name = 'Ana';
const age = 32;
//regular string
console.log(name + " is " + age + " years "+ "old");

//template literal
console.log(`${name} is ${age} years old`);
```
The result is the same, but writing as template literal is easier, I don't have to worry about spaces and the code looks neat.


**Var, Let and Const**
Always use **const** unless you are certain you will want to reassign a value, them **use** let. Basically, var is dead x.x

**Ternary (or conditional) Operators**
Those are pretty cool, as most of the other concepts here. It is the only operator that uses 3 operands and it is often used to replace if/them.
Here is how

```javascript
//Using if
var todayIsFriday = false;
if(todayIsFriday){
  console.log('It is Fri-yay')
} else{
  console.log('Not quite there yet')
}

// using Ternary Operator
var todayIsMonday = true;
console.log(todayIsMonday ? 'Yey, another week' : 'Yey, it is not Monday')
```

**Shorthand Object Assignment**
If you want to define an object whose keys have the same name as the variables passed as properties, you can use the shorthand and simply pass the key name:

```javascript
//regular
const abc = {
  a:a,
  b:b,
  c:c,
};

//shorthand
const efg = { e, f, g};
```
 
**Spread Operator**
Last but not least, the Spread operator... Another one that is a bit tricky to explain. Basically, it takes an array or object and expands it. Tne Spread Operator syntax is **...** 

```javascript
const obj1 = {a: 'a', b: 'b'};
const obj2 = {c: 'c', ...obj1};
console.log(obj2);

//The console will log: Object {  a: "a",  b: "b",  c: "c"}

```

That is all I have for today.
Maybe my little notes can help someone navigating JavaScript like myself.
I have all those pieces of code on my codepen if you would like to try practicing yourself
: https://codepen.io/collection/DLMWOM/

Happy Monday folks!
The release of Darklang (in private beta)
Tags: darklang, dark, programming
Published: 2019-09-16 17:00:10

The team around Ellen Chisa and Paul Biggar have just released new info about their complete programming environment called Darklang. It is according to their statements programming language, IDE, toolchain, infrastructure, database, ... and will make programming much much simpler, by the factor of 100!

They have also released two new videos that can be found on the original post on medium (see below):

1) Ellen shows what you can do with Darklang in 10 minutes

2) Paul talks about the philosophy of Dark


There are currently three demo projects built with Dark:
- Altitude https://usealtitude.com/
- Tokimeko Unfollow https://tokimeki-unfollow.glitch.me/
- Birb https://www.hellobirb.com/

The full post of Ellen can be found at https://medium.com/darklang/unveiling-dark-e0be6f1e0b06

I am super excited about Dark und can't wait to get more information. Is this a revolution in programming? What do you think?
Write to Repeater Fields of Ultimate Fields with WordPress REST API
Tags: repeaterfields, restapi, ultimatefields, wordpress
Published: 2019-10-06 17:29:32

---
title: Write to Repeater Fields of Ultimate Fields with WordPress REST API
published: true
date: 2019-09-16 16:54:50 UTC
tags: Repeater Fields,REST API,Ultimate Fields,wordpress
canonical_url: https://blog.1a23.com/2019/09/17/write-to-repeater-fields-of-ultimate-fields-with-wordpress-rest-api/
---

[Ultimate Fields](https://www.ultimate-fields.com/) is a WordPress plugin that add custom fields to existing post types, both built-in and custom. It’s the only free plugin I found that can add a repeating field (field with arbitrary number of items. However, this plugin has not been updated [for almost a year](https://github.com/RadoslavGeorgiev/ultimate-fields/commit/3154c6d51b528ca3e7f3d9cfd567259832a72e7b), and there’s a bug where repeater fields cannot be written using REST API.

I was just trying to update the field with a JSON array of objects and got this error message saying `[FIELD_NAME] is not of type 'string'`. After digging through the source code, I found that the REST API adapter is checking each field class for a defined JSON schema type. When the type is not found, it fallbacks to string.

<script src="https://gist-it.appspot.com/github/RadoslavGeorgiev/ultimate-fields/blob/3154c6d51b528ca3e7f3d9cfd567259832a72e7b/core/classes/Controller/REST_API.php?slice=98:102"></script>

Surprisingly, `get_api_data_type` is not used anywhere in the code except the few lines above, while obviously repeater fields should take an array type instead.

So it’s simple to solve this issue now. All I need to do is to add the method returning `"array"` to `ultimate-fields/core/classes/Field/Repeater.php`.

```php
public function get_api_data_type() { return "array"; }
```

With that, the REST API will be happy to recognise the repeater field input properly as a list, and write to the database as expected.

The post [Write to Repeater Fields of Ultimate Fields with WordPress REST API](https://blog.1a23.com/2019/09/17/write-to-repeater-fields-of-ultimate-fields-with-wordpress-rest-api/) appeared first on [1A23 Blog](https://blog.1a23.com).
Annoyed by Chrome Bookmark Manager I Created My Own. Should I release it?
Tags: discuss, release, chrome, productivity
Published: 2019-09-16 16:51:21

I was annoyed by my overcrowded bookmarks bar on Chrome, so I decided to create my own bookmark manager.
After creating the initial version, I thought it would be fun to make it accept CLI-like commands  to filter out and open certain bookmarks.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/y5h155xzoob3it6yx4lc.gif)
For that, I created my own command form and its parser. 

Commands implemented so far are : 
ls - display all command
opn - open command

You can modify these commands with modificators: 
rgx - looks for regular expression (works on both ls and opn)
tag - looks for a particular tag in page sentiment (works on display)

Modificators accept String arguments and based on them create predicates that will modify command execution.

This is what a parsable comman looks like:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p4t2p16lznkhhxn9ot3a.png)

Should I release this for public use? What features or commands would be fun to have?
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2019-09-16 16:49:09

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Monday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️


#1. Three Tips For Making Money With Side Projects

Courtland provides helpful tips for beginners looking to make some cash from a side project or business. 

{% link https://dev.to/csallen/three-tips-for-building-profitable-side-projects-3lmf %}


#2. Illustrated Intro to CSS Grid 🎨 

Mustapha offers a detailed walkthrough of the basics of CSS grid properties — illustrations included.

{% link https://dev.to/mustapha/css-grid-illustrated-introduction-52l5 %}


#3. How to Write Good Unit Tests

In this detailed step-by-step tutorial, Elena shows us how to write good unit tests. 

{% link https://dev.to/itnext/writing-good-unit-tests-a-step-by-step-tutorial-1l4f %}


#4. Job Searching for Web Devs 

Need help with your job search? Nicole's tips apply to beginners looking for a career in web dev, but should be applicable to most everyone else as well! 

{% link https://dev.to/nicolepdev/how-to-find-your-first-job-in-web-development-1blc %}


#5. What NOT to Do in React

Alex lists out some of the most common React mistakes and what to do in each situation.

{% link https://dev.to/clarity89/the-most-common-mistakes-when-using-react-45h2 %}


#6. Setting the Bar Too High

Yaser shares their recent experience of applying for a new job which had particularly unrealistic expectations of its applicants.

{% link https://dev.to/yaser/are-you-a-mediocre-developer-me-too-34ed %}


#7. The Different Methods of Pair Programming

Ever wonder about the different approaches to pair programming? Bob walks us through these patterns to reveal different perks for each and good all-around tips for pairing.

{% link https://dev.to/rfornal/pair-programming-patterns-384o %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
Accessibility challenge: ✋ handedness ✋
Tags: webdev, javascript
Published: 2019-09-16 16:43:40

I'm a righty what are you? Well chances are your one of two left or right handed. So it must be a pain when a website is geared towards the opposite hand. Sure there must be coping strategies, but what if you could detect a user's handedness.

The question might be a matter of who is responsible for this detection or storage of preferences, say chrome for example. Why can't I save a preference that a js API has exposure too? Regardless, it's probably not going to happen any time soon.

I put it to you, perhaps as a challenge? Design an algorithm for the web that uses mobile sensors or maybe touch detection to semi accurately figure out which hand you are using.

I'd love to see what you have come up with.
TypeScript: What is it & How To Install it
Tags: beginners, tutorial, javascript, typescript
Published: 2019-09-16 16:42:52

---
title: TypeScript: What is it & How To Install it
published: true
description: TypeScript: What is it & How To Install it
tags: beginners, tutorial, javascript, typescript
series: Intro to TypeScript
---

## Intro

I am creating a new series about TypeScript.

In this short article, we will learn how to install it.

---

## What is TypeScript?

- TypeScript is a typed superset of JavaScript that compiles to JavaScript, therefore existing JavaScript programs are also valid TypeScript programs
- it is developed and maintained by Microsoft
- it provides great features like static type checking and type inference

---

## How To Install it?

First, you need [NodeJS & npm](https://dev.to/miku86/what-is-nodejs-how-to-install-it-1900)

### Windows, macOS, Linux

1. Install TypeScript: `npm install -g typescript`
2. Confirm the Installation: `tsc --version`

If you get a `permission denied` error,
try so use `sudo npm install -g typescript`

---

## Next Part

We will learn the basic workflow how to write TypeScript code.

---

## Further Reading
[TypeScript Homepage](https://www.typescriptlang.org)
[TypeScript Wikipedia](https://en.wikipedia.org/wiki/TypeScript)
[TypeScript in 5 minutes](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)
[Basic Types](https://www.typescriptlang.org/docs/handbook/basic-types.html)
[Various Samples](https://www.typescriptlang.org/samples/index.html)

---

## Questions
- Do you use TypeScript?
- Why do you use it?
- Do you think it's worth it?
- Do you use it in all of your projects?
Never write for only one platform thinking you'll adapt your code later
Tags: productivity, inclusion, a11y, beginners
Published: 2019-09-16 16:36:20


Most of the times this happens in the form of "this magical service only works in Chrome as of right now" or "I'll start with the desktop version and once it's perfect I'll add mobile" and all things in between.

Just, please stop. Here's why.

### 1. Chances are you'll never actually tackle other platforms

There will always be one last bug, one last feature, one last optimisation. Once your service is running are you going to prioritize a new feature requested by a couple of paying customers or are you going to stop all development to add a second platform?

I wish I had kept note of all the services that I wish I could have used but were "temporarily concentrating on the best experience for Chrome users, with other browsers on our future roadmap". "Temporarily" as in "checked back over a year later and still nothing".

I probably haven't because the tool to collect such things didn't work on my device or browser of choice.

### 2. Even if you do, it will never be as curated as the first platform you developed for

This is just how our brains work. Product fatigue is real, production delays too.

Imagine you spend 6 weeks perfecting the desktop experience of your website, and you are obviously two weeks late on the schedule at this point, plus your PM is a pain in distress (and consider yourself lucky they are the one facing the client).

How do you think the mobile version will come out? Yeah, not pretty probably... And surely you'll never have the time or even the mental energy to fix the experience in that hybrid monster which is a vertical iPad.

### 3. Even if it is, you'll have spent twice the time than if you had started right away

Yes, developing for multiple platforms from the get go means starting out at a slower pace. But it forces you to separate logic and side effects, abstracting away the core while leaving flexibility on the implementation.

Imagine developing for desktop only, at first, and basing the entire experience on the assumption that a mouse cursor is present. Possibly embedding this assumption deep in your app core. I don't know you but I would _not_ want to have to take the whole codebase apart to make it work with taps and swipes.

And remember no. 2, at that point you are literally having code nightmares. Sleepless nights that just add to the overall stress and fatigue.

### 4. You are actively turning away 30-to-50% of possible users

And especially me, because I have a Mac, but an Android phone. And I prefer Firefox over Chrome (for no particular reason, but I'm not changing browser only because you are too lazy to code for all, I'll just go with your smarter competitor even if its product is slightly worse).

Yes this is all a personal rant.

But it's also a sort of code of conduct I vow to adhere to from now on, as I've broken these rules many times over.

These points are all valid.

Also, screen reader test your work from the very start. Seriously.

And happy coding! 🦄
How to make http request with React Hooks?
Tags: react, javascript, webdev
Published: 2019-09-16 16:31:48

This is my first post at [dev.to](dev.to). I'm going to introduce a custom React Hooks that help making http request -- [`use-request`](https://github.com/react-rekindle/use-request)

I have seen a lot of request libraries written with React Hooks but none of them I like. Most of them put the client in it which causes less flexibility. When switch to [`use-request`](https://github.com/react-rekindle/use-request), it’s up to you to use `axios` or `fetch`. Pass the function that encapsulates the client and the api request into the `useRequest` function, then you can get the state of the request and callback functions. With typescript support, the input parameters of the request callback function can also be displayed accurately according to the type definition of api function. Let's take a look at how it works!

## Feature

- 👕 Typescript support.
- 🗜️ 1.3kb after minified without gzip.
- 📤 Easy to use with different request client.

## Install

```bash
yarn add @rekindle/use-request
```

## Usage
```jsx
import useRequest from '@rekindle/use-request'
import getFooApi from '@/utils/axios'

function App() {
  const [{ loading, error, data }, fetch] = useRequest(getFooApi)

  function handleClick() {
    fetch()
  }

  useEffect(() => {
    fetch()
  }, [fetch])

  if (loading) return <div>loading...</div>
  if (error) return <div>error</div>

  return (
    <div>
      <p>{data && data.text}</p>
      <button onClick={handleClick}>refetch</button>
    </div>
  )
}
```

## Api

```ts
type useRequest = (api, initialState) => [state, memoizedRequestCallback]
```

Notice: Why momoized request callback ?

Reference: [Is it safe to omit functions from the list of dependencies?](https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies)

If you want a deep dive on useEffect and dependencies, it's here: https://overreacted.io/a-complete-guide-to-useeffect/