teleren/devto huggingface dataset:
Quick tip: How to show the literal quotes " or ' in a string in javascript
Tags: 1minjs, beginners, javascript, string
Published: 2019-05-08 02:54:57

---
title: Quick tip: How to show the literal quotes " or ' in a string in javascript
published: true
description: Usage of escape characters in javascript to place ' or " inside a string
tags: #1minjs,#beginners,#javascript,#string
---

Generally we declare a string in javascript as follows

```javascript
var str1 = "Hello there!";
//or
var str2 = 'Hello there!';
```

There can be use cases when you need to include a double quote or a single quote inside the string.

To achieve this, we can use the escape character '\' as shown below

```javascript
var str1 = "\"Hello there!\"- Obi Wan Kenobi";
// "Hello there" - Obi Wan Kenobi
var str2 = '\'Urr Arrgghh Urr\' - Chewbacca' 
// 'Urr Arrgghh Urr'- Chewbacca
```
### Bonus Content

How to display '\' in string since '\' is considered as escape sequence?  Even in this case, the escape sequence can be used to display '\'
```javascript
var str3 = "1\\2 is perfectly balanced";
/* 1\2 is perfectly balanced */
```


For more details on string and escape characters refer: [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)

Hope you find it useful!
CodeRoad, make it easier to read code
Tags: coderoad, javascript, dependency, react
Published: 2019-05-07 14:14:06

---
title: CodeRoad, make it easier to read code
published: true
description: A way to view codebase based on dependence analysis
tags: CodeRoad,JavaScript,Dependency,React
---
When I was going to read the source code of vuejs. It made me frustrated because of the complicated dependence relationship. Thus I want to make a tool to solve this, making it easier to read the code, both the structure and the detail.

I found a little of solutions about dependence analysis like madge. However, many of them just produce a graph of the dependence. And the graph will become quite messy when the project is huge. I need an interactive way to optimize this. Then I made this cli tool "coderoad". A preview is below. And there is a [live demo](https://coderoad.waningflow.com/) here (which is the codebase of the project itself).

I describes it as "A way to view codebase based on dependence analysis". It supports JavaScript, TypeScript, ES6, CommonJS, AMD. It analyzes the dependence relationship with "dependency-cruiser", and draws the graph with "d3". The front-end is built with "react". It now support several basic functions, for example to adjust the depth of the dependency graph and toggle to show the dependencies or dependents. You can try it in the demo.

I'll make further efforts to make it better. Greatly appreciate to the feedbacks. 

Find more in the [repo](https://github.com/waningflow/CodeRoad)

<img src="https://thepracticaldev.s3.amazonaws.com/i/f1ypdkiz0pya3znm02v8.gif">
Removing VS Code Remote Extensions
Tags: vscode, wsl
Published: 2019-05-08 01:48:14

---
title: Removing VS Code Remote Extensions
published: true
tags: vscode, wsl
canonical_url: https://www.aaron-powell.com/posts/2019-05-08-removing-vscode-remote-extensions/
---

If you missed the announcement last week the VS Code team have released some [remote development extensions](https://code.visualstudio.com/docs/remote/remote-overview?WT.mc_id=devto-blog-aapowell) which allow you to run VS Code against a remote environment, whether that’s WSL, SSH or running in a container. This is a **fantastic** extension and I’m totally in love with it, but there’s always the possibility of something going wrong (that’s what happens when you’re living on the edge).

Today I went to start writing a blog post (not this one!) and in doing so I installed [Spell Right](https://marketplace.visualstudio.com/items?itemName=ban.spellright&WT.mc_id=devto-blog-aapowell), the extension I use for spell checking. As soon as VS Code reloaded things went wrong, it wouldn’t connect to WSL anymore, and it turns out [there’s a bug in Spell Right](https://github.com/bartosz-antosik/vscode-spellright/issues/279) that causes VS Code Remote Extensions to hang.

This isn’t really a problem with Spell Right, I am using a preview version of VS Code and a preview extension pack, I’m just surprised I hadn’t hit a problem sooner! 🤣

Anyway, we have a problem now and I need to remove that extension from the remote host, but here’s the catch, you use VS Code to manage remotely installed extensions and if it can’t connect to the remote host then you can’t manage the extensions!

## Deleting Remote Extensions without VS Code

I started reading through the docs to work out how to remove the extension, with no luck. My next step was to try and unpack the extension and hope I could find something in there, but that wasn’t sounding like a fun idea… Thankfully I work with a really knowledgable team and my colleague [Bruno Borges](https://twitter.com/brunoborges) came to my rescue.

It turns out that extensions are installed on the remote host at `~/.vscode-remote/extensions`, so I fired up WSL, went there and removed the offending extension. And if you need to completely remove the extensions you can `rm` all folders within there.

Thanks Bruno!

Also, if you poke around in the `~/.vscode-remote` folder you’ll find a bunch of interesting things in there like the user profile for your remote environment and such. I wouldn’t advise editing them, but they can be a good place to look if you want to try and diagnose issues.

So with that extension removed I can write this post about how to remove remote extensions, then get back to the post I _actually_ came here to write! 😜
Table to json with jq and awk
Tags: bash, json, jq, awk
Published: 2019-10-28 09:53:53

---
title: Table to json with jq and awk
published: true
date: 2019-05-08 00:00:00 UTC
tags: bash,json,jq,awk
canonical_url: https://foursixnine.io/blog/2019/05/08/Table-to-json.html
---

## The problem

Say you have a table that looks like this:

```
AGGREGATE_NEEDED 1
ARCH x86_64
BASE_TEST_ISSUES NUMBER
BUILD :NUMBER:PACKAGE
DISTRI DISTRIBUTION
FLAVOR Server-DVD-Incidents-Install
INCIDENT_ID 99999
```

It’s just that it contains about 78 or more entries. Of course for a very skilled engineer or a person with a lot of tricks under the hood, this might be a very trivial task in vim or something like this, I guess that with a couple of replaces here and there, you’d get somewhere; but I’m not skilled, other than at eating.

## The Solution

So I took my Key Value table saved it to a file and after googling a bit, now I’m more versed into awk :D:

```
cat FILE.txt | \ 
    awk 'BEGIN { print "{" } \ 
        { printf "\"%s\":\"%s\",", $1,$2} \ 
        END { print "\"MANUALLY_GENERATED_ISO_POST\":1 }" }'
        | jq > x86_64-ready.json'"}'
```

I guess this could have been done easier and prettier, but fits my need and might save you too at some point. Just make sure you have `jq` installed ok?
Optional Chaining in JavaScript
Tags: es6, javascript
Published: 2019-12-11 18:35:23

---
title: Optional Chaining in JavaScript
published: true
date: 2019-05-08 00:00:00 UTC
tags: es6,javascript
canonical_url: https://viralpatel.blog/blog/optional-chaining-in-javascript
---

Optional chaining enables capabilities for Javascript developers to perform a nil check on the objects before trying to access any object properties.

As an example:

```
this.props?.user?.email
```

Optional Chaining behaves similarly to Ruby’s pretzel(&) operator.

Check out the official babel documentation. [Babel - Optional Chaining](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining)
Use Vim as a PHP IDE
Tags: php, vim, spacevim
Published: 2019-06-24 12:23:42

---
title: Use Vim as a PHP IDE
published: true
tags: ["PHP","Vim","spacevim"]
canonical_url: https://spacevim.org/use-vim-as-a-php-ide/
---

# Use Vim as a PHP IDE

This is a general guide for using SpaceVim as a PHP IDE, including layer configuration and usage. Each of the following sections will be covered:

<!-- vim-markdown-toc GFM -->
- Enable language layer
- Code completion
- Syntax linting
- Jump to test file
- running code
- Code formatting
- REPL support
<!-- vim-markdown-toc -->
### Enable language layer

To add PHP language support in SpaceVim, you need to enable the `lang#php` layer. Press `SPC f v d` to openSpaceVim configuration file, and add the following snippet:

```
[[layers]]
  name = "lang#php"

```

For more info, you can read the [lang#php](https://spacevim.org/layers/lang/php/) layer documentation.

### Code completion

`lang#php` layer will load the PHP plugin automatically, unless it’s overriden in your `init.toml`.The completion menu will be opened as you type.

![phpide](https://user-images.githubusercontent.com/13142418/57497567-c6948480-730a-11e9-95ec-e44bf6e79984.png)

### Syntax linting

The checkers layer is enabled by default. This layer provides asynchronous syntax linting via [neomake](https://github.com/neomake/neomake).It will run [psalm](https://github.com/vimeo/psalm) asynchronously.

To install psalm, you may need to run:

```
composer require --dev vimeo/psalm

```

### Jump to test file

To manage the alternate file for a project, you may need to create a `.project_alt.json` file in the root of yourproject.

for exmaple, add following content into the `.project_alt.json` file:

```
{
  "src/*.php": {"alternate": "test/{}.php"},
  "test/*.php": {"alternate": "src/{}.php"}
}

```

with this configuration, you can jump between the source code and test file via command `:A`

### running code

To run current script, you can press `SPC l r`, and a split windowwill be openen, the output of the script will be shown in this window.It is running asynchronously, and will not block your Vim.

![phpcoderunner](https://user-images.githubusercontent.com/13142418/57496602-79aeaf00-7306-11e9-8c18-32f00bd28307.gif)

### Code formatting

The format layer is also enabled by default. With this layer you can use key binding `SPC b f` to format current buffer.Before using this feature, please install php\_beautifier:

```
pear install PHP_Beautifier

```

### REPL support

Start a `php -a` inferior REPL process with `SPC l s i`. After the REPL process being started, you cansend code to inferior process. All key bindings prefix with `SPC l s`, including sending line, sending selection or evensend whole buffer.

![phprepl](https://user-images.githubusercontent.com/13142418/57497156-0ce8e400-7309-11e9-8628-da42d6f8432e.gif)
Toggle NOT NULL constraint with Rails migration
Tags: database, mysql, rails, migrations
Published: 2019-12-11 18:36:17

---
title: Toggle NOT NULL constraint with Rails migration
published: true
date: 2019-05-08 00:00:00 UTC
tags: database,mysql,rails,migrations
canonical_url: https://viralpatel.blog/blog/toggle-not-null-constraint-with-rails-migration
---

Take advantage of `change_column_null` to add or remove **NOT NULL** constraint on a column. The `null` flag indicates whether the value can be **NULL**.

To add the constraint (says column cannot be NULL):

```
change_column_null :users, :name, false
```

To remove the constraint (allows the column to be NULL):

```
change_column_null :users, :name, true
```

The method accepts an optional fourth argument to replace existing +NULL+s with some other value. Use that one when enabling the constraint if needed, since otherwise, those rows would not be valid.

> Note: Please note the fourth argument does not set a column’s default.
Tania Tomyn    
Tags: taniatomyn, aaronwesley
Published: 2019-05-07 23:38:34

---
title: Tania Tomyn    
published: true
description: About Tania Tomyn    
tags: taniatomyn, aaronwesley  
---

Tania Tomyn is the CEO of RetroLock Corporation which is based in Orange, CA.



Under the leadership of Tania Tomyn the company has experienced quick and substantial growth with an additional location operating in Concord, CA.



Tania Tomyn is passionate about her business and about rights for Women. Tania Tomyn is an advocate for victims of abuse for Women, Men and Children but has had a special place in her heart for St. Croix in the US Virgin Islands, where her parents had a second home growing up.



Tania is a past Board Member and Funding Chair, of the St. Croix Women’s Coalition (WCSC).
ReasonConf 2019
Tags: reason, react, functional, javascript
Published: 2019-05-07 23:18:24

Hey everyone!

Check out the latest news and the nicest talks about <a href="https://reasonml.github.io/">ReasonML</a> on the  <a href="https://www.youtube.com/channel/UCtFP_Hn5nIbZY4Xi47qfHhw/videos">ReasonConf Youtube channel.</a>

ReasonML is an emerging functional language for the web. It is awesome!!
Build a 980-byte Docker Image -- Scratch Images Episode II
Tags: tutorial, docker, devops
Published: 2019-05-07 22:17:17

---
title: Build a 980-byte Docker Image -- Scratch Images Episode II
published: true
description: Building the smallest and simplest Docker images using Scratch. A hello world in ASM.  multi stage docker images.
tags: tutorial,docker,devops
---

📓[The gist](https://gist.github.com/tonymet/a80595400b8481e8a0274d63c290ceec)

Why stop at [100kB](https://dev.to/tonymet/build-100kb-docker-images-from-scratch-4ll5)?  What's the smallest possible, runnable docker image we can make?


## hello.asm

`hello.asm`
```
; Define variables in the data section
SECTION .DATA
	hello:     db 'Hello world!',10
	helloLen:  equ $-hello

; Code goes in the text section
SECTION .TEXT
	GLOBAL _start 

_start:
	mov eax,4            ; 'write' system call = 4
	mov ebx,1            ; file descriptor 1 = STDOUT
	mov ecx,hello        ; string to write
	mov edx,helloLen     ; length of string to write
	int 80h              ; call the kernel

	; Terminate program
	mov eax,1            ; 'exit' system call
	mov ebx,0            ; exit with error code 0
	int 80h              ; call the kernel

```

`Makefile`

```

hello.o: hello.asm
	nasm -f elf64 $< -o $@

hello: hello.o
	ld $< -o $@
```


## The Dockerfile

```
FROM alpine:latest as builder
WORKDIR /build
RUN apk update && \
    apk add nasm make binutils
COPY .  ./
RUN make hello

FROM scratch
WORKDIR /
COPY --from=builder /build/hello .
CMD ["/hello"]
```

Basically the same as before, just new `apk` deps for `nasm`. 


## Only 980 Bytes! 

```
docker images |grep tiny-hello|awk '{print $8}'
952B

```


## What's Next? 

We'll build a more workable REST API that guts 99% out of a typical docker image. 
This was a shorter example, since it's principally the same as [the last](https://dev.to/tonymet/build-100kb-docker-images-from-scratch-4ll5) .

➡️ Until then, can you beat 980-bytes?

Many thanks to my friend and devops expert Philippe and this [hello world assembler](https://www.devdungeon.com/content/hello-world-nasm-assembler) for encouraging me to go smaller.
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2019-05-07 20:56:47

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

Answering **[What do you do when you don't feel productive?](https://dev.to/sxldvd/what-do-you-do-when-you-don-t-feel-productive-1bi5)**, @vuild provides a great list of todos for those moments when you feel like you just don't want to do anything:
{% devcomment aga7 %}

@jadebeer adds on to the **[10 Things Every Software Developer Should Know](https://dev.to/javinpaul/10-things-every-software-developer-should-know-39pe)** list with an oftentimes overlooked aspect of being effective on teams:
{% devcomment ahn6 %}

@lucagrandicelli plucks out a choice quote from @erikaheidi's wonderful article **[The Art of Programming](https://dev.to/erikaheidi/the-art-of-programming-21gg)**:
{% devcomment agaj %}

In **[Docker For Frontend Developers](https://dev.to/akanksha_9560/docker-for-frontend-developers-1dk5)**, @derek follows up with a quick note about size and security:
{% devcomment agep %}

@mortoray joins the conversation in **[Javascript Array.push is 945x faster than Array.concat 🤯🤔](https://dev.to/uilicious/javascript-array-push-is-945x-faster-than-array-concat-1oki)** to provide further analysis and context about the complexity of what's going on:
{% devcomment agaa %}

See you next week for more great comments ✌
How to start with Git if you hate it and love TFS
Tags: git
Published: 2019-05-07 19:54:32

---
title: How to start with Git if you hate it and love TFS
published: true
description: How to start with Git
tags: git
---

I have worked with tfs for around 7 years, and when I change my job my new boss told me: here we don't use tfs, we use git with devops.
I thought ok that won't be difficult, but oh surprise it was so so so difficult, at the beginning I wanted to compare tfs with git ant tried to do the same things in the same way, that was my mistake because when we have worked with one technology for a long time your world is that technology, maybe it is not difficult to learn the new one but you don't want to leave the old one. who likes the ugly black console? that was my first impression, but I didn't have chose so I started to find some tutorials in god google.

I don't want to write a lot so I'll tell you my experience and what worked to me

- first forget the details for the old technology in my case tfs.
- Keep your mind open, don't be scared for change.
- Go step by step, don't want to learn all in one day, sometimes because we know a lot of things in the old technology we want to know the same things in the new one, in this way you won't feel frustrated.
- Follow simple tutorials, learn the basic things and then learn how to do the things that you have to do in your job, personal projects etc.

I hope you enjoy this small post and it will be useful for you. If you are interested here you go some resources that I used to start with git, I'm not an expert yet but helped me a lot.

url: https://medium.freecodecamp.org/learn-the-basics-of-git-in-under-10-minutes-da548267cc91

url: https://learngitbranching.js.org/?locale=en_US
Help out a junior dev, rate my CV?
Tags: career, discuss, help
Published: 2019-05-07 19:17:34

---
title: Help out a junior dev, rate my CV?
published: true
description: 
tags: career, discuss, help
---

Just recently started looking for new work, and this is my first time writing a CV since getting industry experience. I've got something that I don't hate so far, but I'd really appreciate it if any of you had any tips.

https://drive.google.com/open?id=1S7EZ0ZDURVB5b2aVtoLItc_P5JPC9qPw

Thanks 😄
Create a Text File from Linux Command Line
Tags: linux
Published: 2019-05-07 19:04:24

---
title: Create a Text File from Linux Command Line
published: true
description: 
tags: linux
---
Here are some ways I can create a text file from the Linux command line.

<h2>cat</h2>

Command <code>cat</code> with no source file specified reads from <code>stdin</code>.  So I can type this (ending with <code>Ctrl-D</code>):


```sh
$ cat > t.txt
Foo
Bar
Baz
```

<h2>echo</h2>

Command <code>echo</code> has option <code>-e</code>, which enables interpretation of backslash escapes.  So I can type this:

```sh
$ echo -e "Foo\nBar\nBaz\n" > t.txt
```

<h2>touch</h2>

And finally, if I don't need content in the file, I can just type:

```sh
touch t.txt
```
My Extension Just Broke 1K Users!
Tags: showdev, discuss
Published: 2019-05-07 18:50:53

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

I'm beyond stoked right now! My Material Color Palette extension just broke _a thousand users_. It's so wild to me that something I've made is actually being used and abused out in the real world. I literally threw this thing together because of my own laziness and I'm so proud of the fact that my laziness has inspired ~~laziness~~ **efficiency** in so many others.

Chrome says I have 1,015 users and Firefox says I have 63, although Chrome does "Weekly Users" and Firefox does "Daily Users" so I'm sure that's where the balance difference comes from. 

Check it out if you feel so inclined and let me know what you think (Maybe drop me a ⭐⭐⭐⭐⭐ in your preferred Webstore?): [MaterialColor.xyz](https://materialcolor.xyz)
Build a React Application using RxJS
Tags: react, javascript, rxjs, tailwindcss
Published: 2019-05-07 18:10:08

---
title: Build a React Application using RxJS
published: true
description: Build an authenticated React application using RxJS and the CSS framework, Tailwind.
tags: #reactjs #javascript #rxjs #tailwind
canonical_url: https://auth0.com/blog/build-a-react-application-using-rxjs/
---

In this post, we are going to cover the basics of RxJS and how it integrates with React applications to manage state. We’ll build a demo app that presents GitHub user information. The app will be styled with TailwindCSS and secured with Auth0.

[Read on ⚛️](https://auth0.com/blog/build-a-react-application-using-rxjs/?utm_source=dev&utm_medium=sc&utm_campaign=reactapp_rxjs)

![Build a React Application using RxJS](https://thepracticaldev.s3.amazonaws.com/i/o50dj1gf2grox7xhns13.png)
My first app for Android - day traders will love it. 
Tags: android, java, app
Published: 2019-05-07 18:09:52

---
title: My first app for Android - day traders will love it. 
published: true
description: 
tags: android,java,app
---
[Beta version]
(https://play.google.com/store/apps/details?id=com.elliottwaves.android)

##Help me to improve it!
What is your output target for publishing NPM modules?
Tags: discuss, npm, build
Published: 2019-05-07 17:22:15

---
title: What is your output target for publishing NPM modules?
published: true
description: 
tags: discuss, npm, build
---

When using Webpack with `babel-loader`, imported NPM Modules are not babeled. This is due to a common `exclude` rule.

```javascript
/*
 * webpack.config.js
 */
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$|\.jsx$/,
        use: "babel-loader",
        exclude: /node_modules/,
      }
    ]
  }
};
```

So the imported module must already be in a mostly-compatible state. This can mean different things based on your web application.

For example, if your web application requires support for IE11, the published module must also support IE11.

You could ensure your module supports IE11, but what if a web app requires supporting further environments?

Supporting environments back to the dawn of civilization will also bloat your NPM Module, making it slower for all non-IE11 apps.

The other option is to have the user of your module also Babel it, if they need additional support.

I had to do this for `strict-uri-encode`:

```
  exclude: /node_modules\/(?!(strict-uri-encode)\/).*/
```

This also doesn't seem to be practical. Especially if an NPM Module depends on your NPM Module, that module would have to decide to either Babel your module to match it's output target or to also bubble this decision up to the user of their NPM Module.

You could also make a "best effort" approach. Which would be to Babel your code to a reasonably supported target, and then let the user know if they want more, that's on them.

```javascript
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "8.10"
        }
      }
    ]
  ]
}
```

in `README.md`

```markdown
# Module Target

This module targets ES6 and specifically node 8.10. If you need to target other environments, you are responsible for Babeling this module.
```

I have also seen [@pika/pack](https://github.com/pikapkg/pack), which I haven't played with yet, but it's worth a mention.

I have also seen `esnext`, along with `main` added to `package.json`. Still researching this.

Worth a read: [Delivering untranspiled source code via npm ](http://2ality.com/2017/06/pkg-esnext.html) - 2ality

I'm currently going with this "best effort" approach. 

What do you do in your published NPM projects?