teleren/devto huggingface dataset:
Swapping Array Elements In Place, Destructuring, and Automatic Semicolon Insertion
Tags: javascript, syntax
Published: 2019-10-09 19:42:32

---
title: Swapping Array Elements In Place, Destructuring, and Automatic Semicolon Insertion
published: true
tags: javascript, syntax
canonical_url: https://stephencharlesweiss.com//2019-10-04/array-swap-destructing-asi/
---

About a year ago, I learned about [bitwise operators and using them to swap elements of a list](../../2018-10-21/swapping-and-bitwise-operators/) in place.

With Array Destructuring, Javascript now allows you to do this without relying on bitwise operators.

For example to swap the first and fourth element, you might do the following:

```javascript
const arr = [1, 2, 3, 4, 5]

[(arr[0], arr[3])] = [arr[3], arr[0]]
```

Did you catch the error?

…

There’s no `;` to end the definition of the array. This is _not_ a case where Javascript’s Automatic Semicolon Insertion (ASI) will add one either. <sup>[1](#fn1)</sup><a id="sup1"></a>  Instead, if you tried to run this code, you’d get an error similar to:

> ```shell
> ~/Users/Stephen/Desktop/scratch.js:15~
>   [arr[0], arr[3]] = [arr[3], arr[0]];
>    ^
>
> ReferenceError: arr is not defined
>     at anon (~/Users/Stephen/Desktop/scratch.js:15:4~)
>     at Object.<anonymous> (~/Users/Stephen/Desktop/scratch.js:18:1~)
>     at Module._compile (internal/modules/cjs/loader.js:685:14)
>     at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
>     at Module.load (internal/modules/cjs/loader.js:598:32)
>     at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
>     at Function.Module._load (internal/modules/cjs/loader.js:529:3)
>     at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)
>     at startup (internal/bootstrap/node.js:285:19)
>     at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)
> ```

We can fix it with a well-placed `;`: 
```javascript
const arr = [1, 2, 3, 4, 5];

[(arr[0], arr[3])] = [arr[3], arr[0]]

console.log(arr) // [4, 2, 3, 1, 5]
```

Tracking down the error was a fun reminder about the costs of being clever. Sometimes using a simple swap function really is just the right way to go:

```javascript
function swap(list, x, y) {
  const tmp = list[x]
  list[x] = list[y]
  list[y] = tmp
  return list
}
```

## Footnotes

-  <sup>[1](#sup1)</sup><a id="fn1"></a> [ASI | EcmaScript](https://www.ecma-international.org/ecma-262/10.0/index.html#sec-rules-of-automatic-semicolon-insertion) The EcmaScript official spec as it relates to ASI.
What is your biggest flop at work & what did you learn from it?
Tags: discuss, watercooler, career
Published: 2019-10-03 23:33:41

Hi there :wave:

I was once asked in an interview "What have you done at work and what did you learn from it". I was amazed at the question, I proceeded to answering it as honestly as I could.

I would love to hear your stories and the lessons you learnt from it.
Getting Started with TypeScript in 5 Minutes
Tags: javascript, typescript, node
Published: 2019-10-03 22:02:04

---
title: Getting Started with TypeScript in 5 Minutes
published: true
description: Simple compiled steps to start a TypeScript project
tags: javascript, typescript, node
---

Most programming languages are like products. They either die because not enough users adopt them or they get used (and pounded at a lot).

Most of the time, it is the friction that is high for people to adopt, or the value proposition isn't 10x better or just not worth closing the learning gap.


### TypeScript's value proposition

I spent 50% less time reading and understanding the code and 90% less time fixing runtime errors compared to JavaScript, and 100% of those errors came from my deliberately coercing a type to `any` type to fit into my lazy JS mind. Sure, it may not sound like a 10x improvement, but hear the next one out...

### It's FREE and easy to switch

Since anyone can comprehend the FREE part, I'm going to give you the minimal step to switch/get started that's so easy anyone can do in less than 5 minutes.

- Build a node project with `npm init`
- Intall TypeScript with `npm install -D typescript`
- Create a file name `tsconfig.json` and copy the following and paste in it:


```json

{
    "compileOnSave": true,
    "compilerOptions": {
        "outDir": "./build",
        "allowJs": true,
        "checkJs": true,
        "target": "es6",
        "moduleResolution": "node",
        "module": "commonjs",
        "esModuleInterop": true,
        "sourceMap": true
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "node_modules"
    ],
  "lib": ["es2015"]
}

```

- Create a `src/index.ts` in the project root directory and write your first TypeScript code in it:


```typescript

import foo from 'bar'; // Now you can use new import syntax.


interface Greeter {
  name: string;
  greet: (string) => void;
}


class BasicGreeter {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  greet(who: string) {
    console.log(`Hello, ${who}. My name is ${this.name}`);
  }
}

function getGreeterName(greeter: Greeter): string {
  // You can be sure a Greeter always has a name.
  return greeter.name;
}

```

- Compile the Typescript with `./node_modules/.bin/tsc`. You can find the compiled JavaScript in `./build/src/index.js`.

There you go, you have just built a new TypeScript project in less than 5 minutes.
Finally...it's alive!
Tags: frontend, webdeveloper, portfolio
Published: 2019-10-03 21:51:06

---
title: Finally...it's alive!
published: true
description: After months of impostor syndrome, iterations & life in general, my corner of the internet is finally ready.
tags: frontend, webdeveloper, portfolio
---

I finally launched my website & blog! Here's my first post that you can also read and subscribe over there: https://andiegonzalez.codes/blog/its-alive

Hey stranger! Welcome to my little corner of the internet.

Since I started transitioning from coding as a hobby to actually considering it a career, I've wanted to make something where I could not only show others what I could do, but that I could also teach and inspire others to do the same. As it is common in this industry, impostor syndrome is a real thing that kept me from finally finishing and sharing it with the world. I'm now confident that I have a lot to offer and I'm ready to share with others my journey and my abilities. Even though this site is not perfect yet, my first blog posts are not going to be as good as I would like, I'm ready to start learning in public and hopefully I'll help others as well.

So in the spirit of learning in public, here are some of my goals starting today that I want to hold myself accountable to and I hope that you, dear reader, will enjoy following along.

- Start writing a blog post at least once a week.

  I'd love to write about technical topics around Vue, React & CSS, as well as about what it's like working in the tech industry, my journey, & what I've been learning.

- Grow my community and network on Twitter.

  Twitter, even though it could be a shit show sometimes, has been an incredible tool to get to know other professionals, learn, & get to know other perspectives. I'd love to become a source of knowledge and valuable member of the tech community in a way that inspires and motivates others.

- Eventually, become a speaker at events & conferences, give workshops & courses around the world.

  This maybe might be that hardest goal to achieve out of all of the previous ones, but being able to share and communicate in person in real time the knowledge and content that I'll be generating online is one of my main goals. Not only because it may involve traveling, work opportunities, etc., but because the human aspect of sharing content is unique in its own way that won't be the same as sharing it in a tweet.

So what's next? If my journey sounds exciting and/or interesting to you, please consider following me on social media! I'm on [Twitter](https://twitter.com/_andiegonzalez), [LinkedIn](https://www.linkedin.com/in/andiegonzalez/) & [DEV](https://dev.to/_andiegonzalez).
You Should Know 'This'
Tags: react, javascript
Published: 2019-10-03 20:48:01

# What is 'This'?
---

First of all, as the MDN docs will tell you

> `this` keyword behaves a little differently in JavaScript compared to other languages


`this` allows you to bind a property to the the object that you are writing your code in. So if you are assigning the value of `Hello World` to `this.helloWorld`, you give yourself the ability to reference that property from the name of the object with the dot operator. If you assign a value to a property with `this` to the window (for web) or for the global (for node js) objects you can access them with the `window.OBJECT` or `global.OBJECT`.

In React we constantly use `this` to assign properties on a class to the scope so the object will be available to all functions and properties in the class.

`this` also allows you to use similar naming conventions when declaring variables within an object. The following is an example.

```
function scope(first, last) {
  this.first = first;
  this.last = last;

  console.log(this.first + " " + this.last);
}

scope("Marco", "Chavez");
```

result of the example

```
Marco Chavez
```

in the console.

## Why do you use 'this' with React?
---

By default, we cannot access properties, state and methods within the components from the event handlers used in our render methods. I will use methods for example (since this is what I have to bind more often then anything else). In order to use a method within your component for an event handler in your JSX you have to bind the method in either your constructor, or the event handler itself.
It would look something like below.

```
<input onChange={this.METHOD.bind(this)} />
```

or you could bind it in the constructor (which is much easier to remember)

```
constructor(props) {
    super(props);

    this.METHOD = this.METHOD.bind(this);
}

render() {
    return <input onChange={this.METHOD} />
}
```

I typically bind it in the constructor so I don't have to remember later in the render method to bind it to `this`. Either way, binding allows you to use component methods in your event handlers because the event handler has its contents bound to the component's instance. I know that last sentence was sort of confusing, but what you should take out of it is that the property becomes a part of the component you are using when you bind it.

### Here is some of my info

- [My Website](http://marcochavez.info)
- [GitHub](https://github.com/mxrcochxvez)
- [CodePen](https://codepen.io/mxrcochxvez)

I want to thank you for taking the time to read this article. I am also very happy that you are taking the time to become a better developer yourself. I highly encourage that you join this platform and start writing yourself, since there is no better way to completely understand something until you are able to teach it. This is my first article, and I want to prepare you for a whole lot of React and Express articles, since that's what I work with the most. This was MarCode, have a great day!


The image in the header was created by [Value Coders](https://www.valuecoders.com/)
Testing something cool!
Published: 2019-10-03 20:43:54

I really enjoy the process of creating interesting projects, deeply understanding what goes into making them work, and developing the ability to explain them to anyone interested! If you'd like to keep up to date with my projects, be sure to follow me here or anywhere I've linked below. 

I'm also getting ready to start back development on my open-source content aggregation platform where voting power is earned by competency, and competency is determined by answering fact-based community-moderated questions about the content that you're voting on. I'm also baking up a really cool cryptocurrency element into the project where one can choose to burn their voting power for a fungible cryptocurrency, kind of like a crypto kitty. 

Anyway, I've already blabbed on long enough. If you're interested in that project, check out the repo [here](https://github.com/technoplato/knophy) and send me a message anywhere! I think I could talk about this stuff all day!

[YouTube](https://www.youtube.com/c/michaellustig?sub_confirmation=1 )   |   [dev.to](https://dev.to/technoplato)   |   [Twitter](https://twitter.com/technoplato/)   |   [Github](https://github.com/technoplato)   |    [Medium](https://medium.com/@michaellustig)   |   [Reddit](https://www.reddit.com/user/halfjew22)
I was today() years old when I found out...
Tags: webdev, javascript, console
Published: 2019-10-03 19:07:33

---
title: I was today() years old when I found out...
published: true
description: Sometimes you find out things that make you feel victorious and incredibly stupid at the same time. This is one of those times for me.
tags: #webdev, #javascript, #console
---

The other day I was debugging a page in Chrome: I was staring at a really complex object that had just been logged to the console, looking for a field with a specific name. If only they'd stringified it before logging, I could then copy it into an editor.

So I just lazily right-clicked the object and...

![Store as global variable](https://i.ibb.co/B3fSVzf/store.png)

How had I missed this before?

![...and we've got the object as `temp1`!](https://i.ibb.co/5R3MKcP/image.png)

I could now call `JSON.stringify(temp1)` and the field is mine!

Of course I checked in Firefox two minutes later and found out they'd implemented not just this feature but "Copy object" too, which would reveal the JSON in a single step.

But I'll still treasure "Store as global variable" because it also allows you to manipulate said object or call functions.

Ignorance is like a very loud jackhammer, it feels great to take a step away from it.
Thank you so much, for all the #Hacktoberfest contributions so far 🎃🎉
Tags: hacktoberfest, contributorswanted, opensource
Published: 2019-10-03 20:42:22

Hi,

**I wanted to thank you all from the bottom of my hearth for all the contributions during the first few days of #Hacktoberfest and even a few days before for contributing to [SirixDB](https://github.com/sirixdb/sirix), the just started [web frontend](https://github.com/sirixdb/sirix-web-frontend) and the [website](https://sirix.io) and for giving it a try  😄**

It's simply unbelievable and amazing as I worked on the project the last couple of years alone since finishing my studies in 2012. Last year I really got reassured that the project has a lot of value and that it's in so many cases useful to retain a compact version history of the resources you store in the database 😄

**The whole project uses so a diverse tech stack and you're of course invited to contribute if you want to practice your skills in: #Java, #Kotlin, #Vert.x, #Keycloak, #vuejs, #d3js, #TypeScript...**

Here's more: [Working on a Versioned, Temporal NoSQL Document Store During Hacktoberfest 👩‍💻👨‍💻](https://dev.to/johanneslichtenberger/working-on-a-versioned-temporal-nosql-document-store-during-hacktoberfest-pp4)

Thank you so much again
Johannes
Weekly Links #8
Tags: weekly, sre, testing, serverless
Published: 2019-10-03 20:39:35

* [On Eliminating Error in Distributed Software Systems](https://blog.colinbreck.com/on-eliminating-error-in-distributed-software-systems/) by Colin Breck
* [Observations on Observability](https://blog.colinbreck.com/observations-on-observability/) by Colin Breck
* [Stupid Baboons, Stubborn Elephants: A Product Engineer’s Guide to Working with Platform Engineers](https://medium.com/@rinaarts/stupid-baboons-stubborn-elephants-c33412541bb1) by Rina Artstain
* [Testing in Production: the hard parts](https://medium.com/@copyconstruct/testing-in-production-the-hard-parts-3f06cefaf592) by Cindy Sridharan
* [A developer goes to a DevOps conference](https://www.darkcoding.net/software/a-developer-goes-to-a-devops-conference/) by Graham King
* [Inca — Message Tracing and Loss Detection For Streaming Data @Netflix](https://medium.com/@NetflixTechBlog/inca-message-tracing-and-loss-detection-for-streaming-data-netflix-de4836fc38c9) by Allen Wang
* [Building Audit Logs with Change Data Capture and Stream Processing](https://debezium.io/blog/2019/10/01/audit-logs-with-change-data-capture-and-stream-processing/) by Gunnar Morling
* [All you need to know about caching for serverless applications](https://theburningmonk.com/2019/10/all-you-need-to-know-about-caching-for-serverless-applications/) by Yan Cui
* [The craft of software development and why it matters](https://blog.jakubholy.net/craft/) by Jakub Holý
* [Tweet: The corporate IT world is barely working](https://twitter.com/mjpt777/status/1179483447464792065) by Martin Thompson
* [Comparing Database Types: How Database Types Evolved to Meet Different Needs](https://www.prisma.io/blog/comparison-of-database-models-1iz9u29nwn37) by Justin Ellingwood
* [Goodbye Microservices: From 100s of problem children to 1 superstar](https://segment.com/blog/goodbye-microservices/) by Alexandra Noonan
* [Why Google Stores Billions of Lines of Code in a Single Repository](https://ai.google/research/pubs/pub45424) by Rachel Potvin and Josh Levenberg
* [You Are Not Google](https://blog.bradfieldcs.com/you-are-not-google-84912cf44afb) by Oz Nova
* [Java agent to detect blocking calls from non-blocking threads.](https://github.com/reactor/BlockHound) by Project Reactor
* [The Good Parts of AWS](https://gumroad.com/l/aws-good-parts) by Daniel Vassallo and Josh Pschorr
* [OWASP Api Security Top 10, 2019 Edition](https://github.com/OWASP/API-Security/blob/develop/2019/en/dist/owasp-api-security-top-10.pdf)
* [A curated collection of awesome resources for the zero-trust security model](https://github.com/pomerium/awesome-zero-trust) by Bobby DeSimone
* [Open Source at AWS](https://www.youtube.com/playlist?list=PLhr1KZpdzukf5X37qTqb4mvqmwqnMiFhG)
5 pro tips to make a ROCKIN' developer portfolio (with bonus)
Tags: jobs, career, portfolio, beginners
Published: 2019-10-03 20:35:52

---
title: 5 pro tips to make a ROCKIN' developer portfolio (with bonus)
published: true
description: Today I'm sharing 5 pro tips on how to create a high-quality portfolio that employers care about. 
tags: jobs, career, portfolio, beginners,
---

##If you're having a hard time figuring out what to do with this portfolio thing, you don't want to miss this video. 

Today I'm sharing 5 pro tips on how to create a high-quality portfolio that employers care about. 

If you're like me, odds are that you've seen some pretty amazing  software developer projects. Perhaps also like me, you've felt overwhelmed or maybe even not adequate as a dev, leading to "developer paralysis." 

No doubt, it can be overwhelming and throw us into a very inconvenient mental space! Fortunately, I have 5 actionable tips so you can get out of your rut and start compiling great projects that employers want to see. 

More importantly, these are going to be projects that automatically show your potential employer that you know how to solve problems. And that's _exactly_ what most employers are secretly looking for. 

Software developer portfolios are a key component when it comes to getting a job in the industry. Make sure yours is up to snuff so you can start getting called in for interviews and ultimately snag that dev job!

I encourage you to check out my course _How to Get a Job in Web Development_ if you need more guidance on portfolios or any other aspect of employment as a software dev.  Use my $9.99 coupon! https://bit.ly/2SGlQsi

Also available on paperback & Kindle: https://amzn.to/2Xh6Ac4
The tough choice: Ruby or Javascript
Tags: codingstudent, books, javascript
Published: 2019-10-03 20:26:46

JavaScript versus Ruby. 
Which one do I like more and which one is better for me?
When I first got interested in coding, I sought out to teach myself the basics without any help.
I spent a long time deciding on which language I should start off with. And I went ahead with a language called Javascript and here’s why:

JavaScript has a huge community: The JavaScript community continue to grow the language supports and library creations with every passing year. With that comes a huge pool of working professionals that you can work with. 
JavaScript can easily be setup: simply from launching google chrome and accessing the developer mode. A couple of clicks and you are ready to code away and build!

JavaScript with the addition of Node: makes it a full stack platform to build pretty much any program you’d like, especially with how scalable the JavaScript language is in itself.  

And for that and many other reasons, I set my path of self teaching geared at focusing on JavaScript and utilizing the online resources I could. Till I realized that without proper instruction/mentorship, I wouldn’t truly be maximizing my learning potential and even more with how sophisticated JavaScript can get at time. So I went on to compare languages till I realized that ruby might be a language that might be a better choice for me at the same that I am, a beginner. And no matter how much I do enjoy JavaScript..

Ruby in my opinion is a better choice for a beginner and this is due:

To the simplicity of the syntax, and how easily variables can be declared and having to not worry about curly braces and semi colons unlike with JavaScript.

Also Because it truly lives us to the philosophy it was built on, “The Principle of Least astonishment”, its creator Mats, believed that computers are the slaves and we are the masters not the other way around. We should be in control! 
So he set out to make ruby as easily as possible, to ensure that with every build you are least surprised by your code because of user friendly and simple the language is. 
And lasty, we all know that with languages, your first new language that you try to pick up is the hardest on you. But as soon as you get familiar with one language, you realize that there’s always similarities between vocabularies and word roots but it’s the grammar and the structure that’s difficult, same goes with ruby and JavaScript, yes the syntax is different and yes JavaScript might seem more cool and popular but as a beginner I opened up to the idea of taking it slow and deciding to learn to code rather than coding in the language I love, that can always be done later on in life.
The Convenience of Faker
Tags: beginners, ruby
Published: 2019-10-03 20:10:01

When working on a new project, everyone needs to populate their databases with some data. This can be a daunting task, especially for beginners to programming. In Ruby however, there is a "Faker" gem, which, upon installing, can make that task a whole lot easier. There is pretty much no need to hardcode any fake data when you need a lot of data!

What Faker does is generates fake data for your database. Before you use Faker, three things need to be done. First, you have to install the gem with "gem install faker." Second, you must set up made a migration for your tables and have your schema ready. This can be done through Active Record. Lastly, you need to require Faker on your gemfile. Now, you are all set to use Faker to generate this fake data! 

Faker is such a convenient tool, and although I won't get into the specifics of how to actually incorporate it into the code, everyone who works with Ruby on their personal projects should utilize it.
I need advise for my website 
Tags: python, django, webdev, css
Published: 2019-10-03 20:06:37

Hey everyone , 

I have recently develop with a forum for developers (Django framework)to share that you want, questions, thinkings and so on.

Take a look and feel free to say me that you think (bad or good) about my website.

url : http://dani75i.pythonanywhere.com/