teleren/devto huggingface dataset:
Javascript: 5 cool things you can do with console that aren't console.log
Tags: javascript, beginners
Published: 2020-06-29 18:52:08

Ah... Javascript. I'd like to say that Javascript and I have a love/hate relationship, but realistically I love it and it just doesn't love me.

Something that made me fall in love with this language is `console.log`, the amazing print method that I use as a debugger and pretty much nothing else. When IDEs try to advertise their incredible debugging tools, I'm like... nah. I've got my `console.log`. I don't need you.

But sometimes we forget that `console.log` actually MEANS something. So, what is `console`? And what else can we do with it?

Console is Javascript's debugging tool, but we can do a lot more than log. There are over 20 console methods, and we're going to talk about 5 of those today.

##1. console.table()

This method is great; it makes things SO MUCH MORE READABLE than `console.log()`. It logs things... as a table.

My favourite usage for this guy is json data. Have you ever been debugging by using `console.log` on your json, trying to actually interpret what it's saying? Well, fear no more - `console.table()` is here to save you!

![what console.table() looks like in console](https://dev-to-uploads.s3.amazonaws.com/i/g828pne2agjueedkno68.jpg)

So good. So readable. Incredible.

##2. console.count()

It does what it says on the tin - it counts how many times this particular `console.count` has been called. 

This is really useful for me when playing with async methods, recursion, or loops. Sometimes when something goes wrong it's as simple as it's being called one too many times, or maybe not enough. Of course you could use something like `j++; console.log(j)` but where's the fun in that?  


##3. console.error()

So, I can't lie to you. `console.error()` is the exact same thing as `console.log()` except... IT LOOKS LIKE AN ERROR! So you can scroll through all of your other console loggings, counts, and tables to find the real error. It looks like this:

![what console.table() looks like in the console](https://dev-to-uploads.s3.amazonaws.com/i/pamu72qh9auvsyx67c5q.png)

##4. console.group() 

This method lets you group things inside the console. You can group logs and errors together - maybe you want to see all of the errors outside of a for loop separately from everything within that loop. 

This `console.group()` method becomes a lot more useful when you're developing a more complex application. 

##5. console.time() and console.timeEnd() 

Again, another method that does exactly what it says on the tin. `console.time()` starts a timer and `console.timeEnd()` ends that timer, and logs how long it was running for. 

If you want to figure out why your Javascript is taking some time to load, you can run `console.time()` and `console.timeEnd()` in a few different places in your code. This will tell you which functions are taking a long time, and you can fix your performance issues!


There are plenty more `console` methods available, but these are my favourite and ones that I use regularly within my own coding. Make sure to commend if you use any other ones!
Using fetch to do a file upload
Tags: javascript, node
Published: 2020-06-29 18:40:11

---
title: Using fetch to do a file upload
published: true
description: In this video we are using fetch to do a file upload. File uploads could be hard if you haven't done it before, fetch is a new api that can simplify the process.
tags: JavaScript, node
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/y4v5ijf96cxbpzj3a7hg.jpg
---

{% youtube jooOa8ur07g %}

In this video we are using fetch to do a file upload. File uploads could be hard if you haven't done it before, fetch is a new api that can simplify the process.
Review and setup of the kuat class for kayak rack attachments
Published: 2020-06-29 18:39:44

You get this main mounting element and then these two attachments that mount onto the bottom of the rack. There's actually two different styles of attachments. These are what I'm gonna use today for the setup. But they've also got flush mount option and this guy you can screw into the bottom of the rack and depending on the type of rack you have you'll see on my Audi. For example if I pull off this little clip this is just the factory rack. It's got the rubber piece in the middle. You could pull that up and then these guys will slide in and you get a flush installation on this rack.

Pretty cool option but since I'm putting it on the Tacoma and the Yakima rack does not have that flush mount option available. I'm gonna go with these clamps and these clamps would also work on the Audi rack. They just mount around the outside of that. It's a pretty good setup.

One thing that you'll notice is that they do have locking mechanism included and the [kayak truck rack](https://www.gopvalentine.com/best-truck-rack/) comes standard would lock cores. I've got a lock core on just one of the elements. You don't need to have them on both. Then I've got one on the front and back. 

They give you set of keys with a bottle opener. We can lock the rack to the vehicle. That's a good thing because this thing does run you to 29. You don't want somebody to steal the rack off of the top of your vehicle. Setup is really simple to mount the rack. We're gonna take this bolt with a washer and a locking nut. You got one hole on the back here one on the front then pop that guy through and then you'll see this hole on the bottom just gonna take that and we're gonna screw it on. One screw on the back one screw on the front. Really simple setup. We'll get those installed and then also have three straps that are included. This is the main strap. You've got two sets of these. 

This is the main strap that you're going to use to attach your boat to this element. You'll see that it's got a little slot here for that to pull through and then we've got another two slots here. You basically strap it through there and then those two openings there and secure to the vehicle. I'll show you that more thoroughly. Once we get the boat back on and then these two little straps you can use if you want to tie down the front and back of the boat to the vehicle. That's not incredibly necessary.
Procurement Construction System 🛠
Tags: node, express, react, mongodb
Published: 2020-06-29 18:33:51

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tzhzysz1ydiyupdwwu1z.gif)

This is my individual part of the Case Study implementation of 3rd Year 2nd Semester - Case Studies in Software Engineering(CSSE) module. Here we try to solve the difficulties faced in the procurement procedures in the construction industry. As a solution we have created a Web application and a mobile application, whereas this is a part of the Web application, implemented with ReactJS, NodeJS, Express and MongoDB.

* procurement_frontend : Developed with ReactJS
* procurement_backend : Developed with NodeJS and Express with the connection to MongoDB local database.

###Technology

* NodeJS
* Express
* ReactJS
* MongoDB

###Configurations

####step 1
Open terminal in VS Code in Backend Directory.

####step 2
Run `node index.js` to start backend server.

####step 3
Now open terminal in VS Code in Frontend Directory.

####step 4
Run `npm install`

####step 5
Run `npm start` to run the app in development mode.

####step 6
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

GitHub Repo 📌 {% github Sewvandiii/procurement-construction-system %}
Visual Studio, Windows Form App, Form Designer
Published: 2020-06-29 18:32:27

I am working through "C# Programming in easy steps by Mike McGrath" and if I accidentally double click one of the wrong buttons in the Form Designer to generate code for it and I try to delete the code everything in the window will disappear. Upon further inspection it seems that it's not just disappearing but it is actually removing everything. When I compile and run the code the resulting application is also blank. I'm obviously missing something here and would appreciate it if someone could give me some advice. I'm assuming I should use the undo option rather then straight out deleting the code, but I would still like to know what&#39;s going on.

I am trying this out for the first time, I stopped using StackOverflow because I get about 30-40 downvotes in less then 30 seconds upon asking a simple question like this. I am hoping this community is better then that.
Introducing: HeadlessCommerce.org
Tags: community, commerce, commercejs, headless
Published: 2020-06-29 18:30:15

We're excited to introduce the launch of [HeadlessCommerce.org](https://headlesscommerce.org/), a community-curated list of best-in-class headless tools, technologies, and resources for website builders and businesses owners. 

If your business is fast-moving, complex, or just ambitious, a headless commerce strategy will help you serve your customers faster, approach businesses problems creatively, and stay resource lean.


###Why we built HeadlessCommerce.org

As an industry, “eCommerce” has become highly stratified, not to mention the “e” is a bit irrelevant now, so we built HeadlessCommerce.org for businesses and developers who want to explore and discover modern commerce technologies, and their complementary services. 

At [Chec and Commerce.js](https://commercejs.com/), we’re helping businesses navigate this shift to a headless stack. We believe that businesses, big and small, built on top of monolithic platforms will be left behind by modular, decoupled, API-driven businesses who can be anywhere and move quickly. So to accelerate this shift, we’re set on helping others in the community to discover and asses suitable tools for projects.

We want [HeadlessCommerce](https://headlesscommerce.org/) to be the hub people go to when looking to decouple their business or starting a new headless project. 


###How you can use it

We’ve made it easy to browse the list with Categories and Filters. You can also bookmark resources to save for later reference. 

If you think there are resources that play nice in the headless ecosystem and that we have missed, please feel free to add a recommendation.


###What’s next

We’ve got plenty of ideas of how we can make [HeadlessCommerce.org](https://headlesscommerce.org/) more valuable for developers and decision-makers. If you’ve got an idea you’d like to share or just want to give feedback, email us at [hello@headlesscommerce.org](hello@headlesscommerce.org).

You can read more about Chec/Commerce.js over on our [blog](https://commercejs.com/blog).
Creating a feature tour like that of hey.com
Tags: nuxt, help
Published: 2020-06-29 18:16:13

I'm trying to recreate a simple version of the Hey.com feature tour using Nuxt.js (or Vue.js), as you can see [here](https://hey.com/features).

I'm sure there are examples (perhaps even repos) of this out there in either nuxt.js or vue. If you have a tip on how to do this, please leave a comment below!
Easy Method to Split Large VCF File Successfully
Published: 2020-06-29 17:56:04

KNKTOOLS VCF SPLIT SOFTWARE is an advanced solution designed to split vcard into multiple vcards of any size which can be created in any version. It has user friendly interface which offers you an enhanced experience to sort all the contacts within the required folder. With the help of this tool you can easily split vcf contacts of your multiple vCard file individually in a short span of time. After splitting it also uphold all your contact information.

SILENT FEATURES

Very efficient and easy to operate service

Splits Large or multiple vCard files into single VCF file

Evaluate and keep all the contacts info systematically

Supportable in all versions of vCard file formats

Shows a preview before splitting and reduces the chances of blunder

Provides you an accurate results in least time

THE DEMO VERSION CAN SPLIT LARGE VCF FILES TO EXPORT 10 SINGLE CONTACTS ONLY

https://www.knktools.com/vcard/merge-split-software.html
O profissional "quase" perfeito
Tags: javascript, csharp, java
Published: 2020-06-29 17:43:17

`A saga da pessoa sem experiência.`

Esse texto trata-se de uma crítica não direcionada. Aqui falo do mercado de trabalho onde as chances de pessoas sem experiência são quase 0.

Para dar sentido a esse texto, falarei sobre o mercado de tecnologia, ao qual faço parte.

Podemos observar uma quantidade absurda de oportunidades de empregos, se falarmos de propostas/contatos que chegam pelo Linkedin, olha, nunca me senti tão valorizado.

Se filtrarmos essa imensidão de propostas, não chegaremos em 15% de  oportunidades para profissionais sem experiência, ou mesmo em nível "JR", não quero falar de níveis de cargos aqui, pois trata-se de um assunto polêmico.

Quando paro e leio descrições de vagas, sempre me questiono, fico olhando para toda aquela sopa de letrinhas e penso, não estão procurando um profissional de tecnologia, querem na verdade um semi-Deus, e muita vezes, o profissional não usará 75% do que estão pedindo nos requisitos.

Um dia desses vi um comentário muito sarcástico, porém inteligente em uma vaga postada no Linkedin, no caso, a oportunidade pedia que o candidato tivesse conhecimentos em muitas siglas, muitas mesmo, e que na minha opinião não fazia o menor sentido, se misturavam entre Desenvolvimento de Sistemas e Marketing. O comentário que fizeram no post foi:

`A vaga é para uma pessoa ou para uma equipe?`

Em minha experiência tive a grande oportunidade de realizar processos seletivos do outro lado da mesa, no lado contratante, e nesses casos tive a liberdade, e, em comum acordo com gestores, abrirmos oportunidades para pessoas com pouco conhecimento, a ideia era a inclusão destes profissionais no mercado de trabalho, e claro, ajudá-los no seu desenvolvimento tanto profissional como pessoal. Não só abrimos oportunidades para pessoas com pouco conhecimento como também não fazíamos filtro por idade, sexo, raça e outros esteriótipos que sejam impostos pela sociedade.

Essa sem dúvidas foi uma das melhores experiências da minha vida no mundo corporativo. Quando pessoas sem conhecimento querem aprender, conseguimos enxergar o brilho nos olhos delas. Me recordo de um estagiário que trabalhou no mesmo time no qual eu estava, uma pessoa excelente, tecnicamente tinha muito para aprender, muito sonhador, e isso o motivará bastante para seu crescimento profissional, hoje, quando conversamos aprendo mais do que pude contribuir para ele no passado.

Muitas pessoas estão migrando de área e tentando vir para o mundo da tecnologia, isso é incrível. 

Qualquer pessoa pode ser inserida no mercado de Tecnologia, basta empenho, estudo e empresas com oportunidades para ensiná-los e formá-los. Qual o problema ter no seu time um programador de 40/50 anos? Nenhum.

Aqui vai um pedido: Vamos oferecer oportunidades para quem está afim de trabalhar, aprender e crescer. Vocês não vão se arrepender.

Muito obrigado pela sua leitura, nos falamos em breve!
MAC OS Terminal para Programadores
Tags: tutorial, codenewbie, javascript, vscode
Published: 2020-06-29 17:42:23

Frecuentemente uso la consola (Terminal) para git, CLI, entre otros; viendo una forma de mejorar la visualización de opciones para el desarrollo y manejo de Git he instalado iTerm2 en conjunto con Fish.

#1. Instalación de Iterm
[Descargar iTerm2](https://www.iterm2.com/)
iTerm2 es una terminal alternativa a la que por defecto tenemos en MacOS, esta terminal tiene algunos features adicionales.
* Split de Paneles en la misma ventana.
* Con una tecla se puede poner transparente el terminal.
* Autocompletar con interfaz.
* History para los "Command + V" (pegados) previos.
* Multilenguaje.
* Triggers.
* Imagenes en Líneas.
* Timestamps.
* Password Manager.
* Adicionar Anotaciones.

#2. Instalacion de Fuentes.
Mediante HomeBrew recomiendo instalar dos fuentes:
```
brew tap homebrew/cask-fonts
brew cask install font-hack-nerd-font
brew cask install font-fira-code
```
Fira lo uso mas que todo en VisualStudio Code.  Pero tambien puede ser util en iTerm2.  Para el caso en particular usaremos un Theme en Fish que aprovecha la fuente Hack Nerd.

#3. Instalación de Fish.
Fish es una Shell de linea de comandos para Mac el cual permite funcionalidades de acceso rápido a búsqueda de archivos, el prompt de permite ver si esta la carpeta en un repositor, en que branch del mismo, si esta actualizado, guarda comandos comunes con alias de facil acceso, búsqueda de archivos facilmente a traves de linea de comandos, entre otras cosas.
```
brew install fish
curl -L https://get.oh-my.fish | fish
omf theme agnoster
set theme_color_scheme solarized-dark
omf install bass
omf install https://github.com/FabioAntunes/fish-nvm
omf install pj
omf install z
omf install https://github.com/jhillyerd/plugin-git
omf install https://github.com/jethrokuan/fzf
```
Aun falta un paso para que los iconos se presenten; pero por ahora esta es una breve descripción de lo que podemos hacer con los plugins instalados:
* pj: Permite guardar y acceder a directorios comúnmente empleados.
* z: Es muy similar al anterior, pero este se basa en los directorios que mas frecuentamos; no hay que setearlo como el anterior.
* fzf: Cuando empiezas a digitar un comando que previamente has usado te lo autocompleta.

#4. Configuración de Fuente.
Debemos entrar en iTerm2, en preferencias, Profile, Text, y seleccionar la fuente Hack Nerd para que en este caso podamos ver los iconos correctamente; en caso contrario solo podrá ver signos de interrogación.

Espero esta corta guía pueda servir de ayuda a los que usamos frecuentemente la consola.

#BONUS
En mi caso tuve problemas al hacer funcionar Fira Code en VSCode, pese a poner la fuente en Settings no me hacia los Ligatures (esto de escribir -> y que te lo convierta en una flecha real).  Esto es lo que se necesita editar en settings.json para que funcione:
```
  "editor.fontSize": 12,
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true
```

No olvides compartir, dejar tu comentario, y seguirme.
Olá Mundo!
Published: 2020-06-29 17:40:52

Espero que esta seja o primeiro artigo de muitos que farei aqui.

Meu objetivo aqui será publicar materiais relacionados ao mundo do desenvolvimento, seja sobre back-end, banco de dados, DevOps, Cloud, front-end, ou qualquer outra tecnologia.
Sempre que eu me deparar com um desafio, ou tiver encontrado a solução para algum problema durante o trabalho do dia-a-dia, irei registrar aqui, para que possa servir de ajuda para outros que venham a ter os mesmos problemas.

E em como todo início de aprendizado de uma linguagem de programação, não poderia faltar um "Hello World" para começar (nesse caso, em C# 9, e sim, esse código funciona!).

```chsarp
using System;
Console.WriteLine("Hello World!");
```
Day 4 of #30DaysOfCode | pointers and maps in Go (golang)
Tags: go, codenewbie, motivation, challenge
Published: 2020-06-29 17:35:16

Today is Day 4 of my #30DaysOfCode challenge. I started my day with learning maps in Go and then moved to play with pointers a little. So, let's talk about them one by one.

What are Maps?
Maps are a data structure in Go which stores collections of data in key-value pair. If you have worked with programming languages like Python or Swift then you are very familiar with maps. Python and Swift have a data structure called Dictionary which is just like Maps. They are essentially just the same thing but with a different name. They store data in a key-value pair. We will talk more about Maps in the next post, follow me for that.

![Pointer example](https://dev-to-uploads.s3.amazonaws.com/i/f58fdfwdt1yph4d3wc0v.png)

Now, as promised in the last post, here I am with a simple little example of pointers in #golang. So, let's take a look at the example of a pointer. We use & and * to work with pointers. The & gives us the address of the value in the memory location and * gives us the value of the address that is passed in. Take a look at the example in the image to get a higher-level understanding of pointers and if you have any question then feel free to ask me in the comments below.

BTW, I am sorry for this cryptic explanation but this is how it's work and I don't expect anyone to understand pointers the first time they see it. It's a very confusing topic and it takes lots of practice to get a hang of it. But I promise that I will try to make it simpler next time.
One thing that is interesting to know is that pointer is not a feature that is very specific to Go but it also has its place in programming languages like C and C++.

Alright! that's all for today and I'll see you in the next post.

Connect With Me:
Youtube: <a href="https://www.youtube.com/c/ShubhamSauravYT" target="_blank" rel="noopener noreferrer">ShubhamSauravYT</a>.
Twitter: <a href="https://www.twitter.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Instagram: <a href="https://www.instagram.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Facebook: <a href="https://facebook.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Supercharging your JavaScript debugging with console methods
Tags: testing
Published: 2020-07-09 18:10:43

---
title: Supercharging your JavaScript debugging with console methods
published: true
date: 2020-06-29 17:35:00 UTC
tags: Testing
canonical_url: 
---

 ![Supercharging your JavaScript debugging with console methods](https://blog.kentonvizdos.com/content/images/2020/06/carbon-2.png)

As we all know, the **only** way to debug JavaScript code is with console.log(), but do you know how you can supercharge your debug game with other console methods? Let’s take a look at all of the console logging methods!

## General console.log()

In the most basic form, console.log() will simply output a string of text to the JavaScript debug console which is present in most browsers.

## Warn and error logging

To add extra zest to your logging, you can use console.warn() and console.error() to change the output color of your message (it works in most browsers to show a red or yellow background!)

## Timing functions!

Ever wanted to see how fast or slow a function evaluates in? Well, you could use some hacky things where you create some date variables at the beginning and end of a function, but there are NEW ways of doing things.

Introducing..... console.time() and console.timeEnd()! Using these two functions, you can evaluate and output the duration of a method automatically.

Also, if you want to add extra/multiple time functions inside of one method, you can use console.time(label) and console.timeEnd(label) which will let you nest timings as long as the labels are unique.

## Asserting with console.assert()

`console.assert(<expected true value>, <error message here>)`

Asserting with the console is one of the coolest things you can do. If you normally write outputs of variables to see if they evaluate to something, “console.log(x == 1)”, you can refactor that into a really nice output using assertions. With assertions, instead of printing when the value is true, it’ll only return if it is false, and you can even return a fancy output!

`console.assert(true == false, “True does not equal false!”)` will output “True does not equal false!” but if you change it to `console.assert(true == true, “True does not equal true!”)` will return nothing as the statement is true.

## Console grouping

Grouping can be useful in some situations. If you want to keep track of a ton of different functions, you can use console groupings instead of function pretends (e.g. you don’t need to say “functionName: <output>”). You can even collapse certain groups to clean up your output :)

`console.group(name)` creates a group, and `console.groupEnd(name)` finalizes and outputs the group. Pretty neat stuff!

Supercharging console.log() is a crucial step in creating beautiful outputs of logs, so I hope you learned something helpful in this article. If you learned something, please let me know by tweeting me, @kvizdos!