teleren/devto huggingface dataset:
Is JavaScript's .shift() Method a Performance Boost?
Tags: discuss, javascript, algorithms
Published: 2020-06-13 16:45:35

It's one thing to understand the concept of time/space complexity. It's another to apply the knowledge when solving algorithm puzzles. After reading the well-illustrated, beginner-friendly [Grokking Algorithm](https://www.manning.com/books/grokking-algorithms), I thought I was fully prepared to tackle algorithm challenges using the big O notation.

I was wrong. This is what I often encounter during my HackerRank practices:
![hackerrank timeout screenshot](https://dev-to-uploads.s3.amazonaws.com/i/4bw7gogqtvwwevo7xjd9.png)

It is still challenging for me to come up with scalable solutions on the first try. Naturally, I would look up alternative solutions and try to emulate the solver's thought process.

Oftentimes my initial reaction would be "Wow, that's brilliant. Why didn't I think of that?" 

But in this particular code challenge, I found a solution that looks similar to mine and is able to pass all test cases.

And that led me to learning runtime complexity of JavaScript array methods.

So, here's the challenge. It's a simple left rotation of an array:
```
Given an array (arr) and number of left rotations (d), 
returns the updated array.
```
For example:
```js
rotateLeft([1, 2, 3, 4, 5], 4)
// elements in the array rotate 4 times:
// [2, 3, 4, 5, 1] -> [3, 4, 5, 1, 2] -> [4, 5, 1, 2, 3] -> [5, 1, 2, 3, 4] 
// returns [5, 1, 2, 3, 4]
```

Here's my initial solution, which passed 8 of the 10 test cases:
```js
function rotateLeft(arr, d) {
    for (let i = 0; i < d; i++) {
    // 1. create a copy of arr starting at index 1, save to a variable (tempArr)
    // 2. push arr[0] to tempArr
    // 3. Now, tempArr has the updated order, so we reassign arr to tempArr
        let tempArr = arr.slice(1)
        tempArr.push(arr[0])
        arr = tempArr
    }
    return arr
}
```

And here's the solution I found that passed all test cases:
```js
function rotateLeft(arr, d) {
    let tempArr = arr.slice()
    for (let i = 0; i < d; i++) {
        let firstItem = tempArr.shift()
        tempArr.push(firstItem)
    }
    return tempArr
}
```

In my solution, I created a new array via `.slice()` method in each iteration, while the other solution code only did it once outside the for loop. 

I also found [an explanation on Stack Overflow](https://stackoverflow.com/questions/22614237/javascript-runtime-complexity-of-array-functions/22615787) that compares runtime complexity of some array methods.

An engineer friend further explained that adding arrays together is an O(n + m) complexity: Arrays are fixed in size under the surface, so when you add them together, you are actually creating a new array big enough to hold them. And doing it for each iteration results in an O(n + m)^2 complexity.

Despite the two resources above, I am still baffled by the reason behind using `.shift()` that leads to an optimized solution.

Would anyone like to take a stab at explaining it?
Do I NEED a personal website/portfolio?
Tags: discuss, career, webdev, beginners
Published: 2020-06-13 16:23:36

As a student, I am always looking present myself as unique and creative to recruiters. One thing I have thought about doing was creating a personal website/portfolio. 

A little background about me is that I am considering a career path in UX/UI research or possibly design (not too sure yet, but I am open to a variety of careers). 

Here are some questions that I have:

1. Is it necessary?
2. If so, what should I include?
3. How would you recommend creating the website?

Also I would love to see other peoples personal website, so feel free to link them!
Laravel & Translations - Automatically Discover The Users Preferred Language
Published: 2020-06-13 16:20:14

I've just uploaded this video, this will teach you how to setup and handle translations with laravel 7(however it will work fine for atleast laravel 5+). You will also learn how to automatically set the users preferred language dynamically:

{% youtube vYwcG6eyDfg %}

What subject do you want me to tackle next?
Why new docker users should stop using the 'latest' tag on Docker.
Tags: docker, beginners
Published: 2020-06-13 16:12:57

The tag is some of the core features of the docker that many people don't use correctly. Through the tags, we can select what the version we want to download and to use in our project. So if you aren't worried about it probably someday you can have some problems.

I confess that my machine has a lot of images with the 'latest' tags yet. Sometimes we don't want to specify what the version we need, right? A few weeks ago I cloned a small project that I worked in the past and I was using the latest version of Postgres. But that day the version wasn't the same I have used when I have created the project, then I had to guess what version I have used.

**Not specifying the version that you want isn't a good habit.**

The 'latest' version is never the same. It is only a generic term that isn't so useful in the practice¹. Probably you will never say to someone that your project needs the latest version of some software (in a formal conversation). You should say to him that you have used the **X** version of the **Z** software.

It is normal for a beginner developer don't care about the versions of the resource that the software he is coding depends. But if you already are an experienced developer, you need to start to care about it now.

¹ Raphael Habereder give us a good example of a context that it is very useful. Check his comment below.
10 Useful GCC Flags That I Use Regularly
Tags: c, gcc, tricks
Published: 2020-06-13 16:11:02

C++ was my first programming language. I have been learning and using it for a little less than 2 years now. I have been of the idealogy (which is silly) that if something can be done in c++, do it in c++. Yes, I am slowly moving towards other feasible solutions for certain use cases.
Here are my frequently used gcc flags.

## 1. -o
```bash
gcc example.c -o outfile
```
The default executable name is `a.exe` or `a.out` or something similar depending on the host machine. You can easily set the executable name to, for example, `outfile` in this case. Other file names are also affected, like object files, assembler files.

## 2. -Wall, -Wextra

Wall and Wextra turn on certain warning flags, that are almost certainly errors in my experience.

## 3. -O2

gcc optimizes code for compilation speeds by default. You can enable this flag and optimize the code for runtime. The compiler optimization step is crazy and can optimize the code to extents one cannot imagine! I have read somewhere the compiler optimized a for loop which was adding some element each iteration to a single multiplication statement!

# 4. -g

Produces debugging information. Helpful when debugging with `gdb` as variable names, function names are listed which otherwise are not.

## 5. -S

Your C source code is compiled down to assembly first. The assembly output is stored in a file with the help of the `-S` flag.

## 6. -E

Do preprocessing only, and output the entire source code. You include a lot of headers inside your code, all that does is copying the content of the header into the source. This outputs the preprocessed source code.

## 7. -Wfloat-equal

Directly comparing floats is a bad idea. If you execute:
```C
float a=0.2f, b=0.2f;
if(a + b != 0.4)
printf("Not equal");
```
You will get the output `Not equal`. This is because of precision issues. This can be caught by the compiler by using `-Wfloat-equal` flag. I will soon write a post explaining this behavior, and how to tackle it. For now, just understand it is bad.

## 8. -std=XXX

Set a language standard. Very useful when you strictly want features from a particular standard. For example,
```C
-std=c++14
-std=c++17
-std=c99
```

## 9. -I

```bash
gcc -Iexample_dir_name example.c
```
By default, gcc looks in the current working directory. You can also include multiple other directory locations with `-I` flag.

## 10. -D

```bash
gcc -Dmacro_name=definition
```

Define a macro with a value. This is helpful when you want to run the same code in multiple ways such that the code depends on that macro, or maybe for debugging.

For a (very long) list of other such flags, refer to the manpage of gcc (`man gcc`).
Mention your top gcc flags down in the comments section!

| Cover Pic by Taras Shypka on Unsplash
Algorithms Problem Solving: Maximum 69 Number
Tags: algorithms, python, computerscience, interview
Published: 2020-06-13 16:01:00

---
title: Algorithms Problem Solving: Maximum 69 Number
published: true
description: Solving algorithms problems with TK
tags: algorithms, python, computerscience, interview
cover_image: https://raw.githubusercontent.com/leandrotk/tk/master/series/algorithms-problem-solving/assets/dices.jpg
canonical_url: https://leandrotk.github.io/tk/series/algorithms-problem-solving/maximum-69-number.html
series: Algorithms Problem Solving Series
---

This post is part of the [Algorithms Problem Solving](https://leandrotk.github.io/tk/series/algorithms-problem-solving/index.html) series.

## Problem description

This is the [Maximum 69 Number](https://leetcode.com/problems/maximum-69-number) problem. The description looks like this:

Given a positive integer `num` consisting only of digits 6 and 9.

Return the maximum number you can get by changing **at most** one digit (6 becomes 9, and 9 becomes 6).

## Examples

```python
Input: num = 9669
Output: 9969

Input: num = 9996
Output: 9999

Input: num = 9999
Output: 9999
```

## Solution

The idea is to find the first `6` number index in the whole number. And then replace it with `9`. That way you get the maximum number.

```python
def maximum_69_number(num):
    six_index = 0
    str_num = str(num)

    for index in range(len(str_num)):
        if str_num[index] == '6':
            six_index = index
            break
            
    return int(
        str_num[:six_index] +
        '9' +
        str_num[six_index + 1:]
    )
```

You can also use the `replace` string method to replace the first `6` number with `9`.

```python
'6996'.replace('6', '9', 1)
'9996'

'9696'.replace('6', '9', 1)
'9996'
```

## Resources

- [Learning Python: From Zero to Hero](https://leandrotk.github.io/tk/2017/09/learning-python-from-zero-to-hero/index.html)
- [Algorithms Problem Solving Series](https://leandrotk.github.io/tk/series/algorithms-problem-solving/index.html)
- [Stack Data Structure](https://leandrotk.github.io/tk/2020/01/stack-data-structure/index.html)
- [Queue Data Structure](https://leandrotk.github.io/tk/2020/01/queue-data-structure/index.html)
- [Linked List](https://leandrotk.github.io/tk/2020/02/linked-list/index.html)
- [Tree Data Structure](https://leandrotk.github.io/tk/2020/02/tree-data-structure/index.html)
React Learning Path in 2020
Tags: react, javascript, redux
Published: 2020-06-13 15:40:24

Hey everyone. Even though we are half way through the year, I thought a lot of us would be starting out on learning React. Also, if you are done with React, you might be wondering what to learn next in the React ecosystem. The video below is my take on learning React in 2020 and hopefully it will serve as a guideline for anyone who is on a React learning path.

{% youtube Q9Qx2Xef0do %}
Create a login Page with Flutter
Tags: flutter
Published: 2020-06-13 15:35:16

---
title: Create a login Page with Flutter
published: true
description: 
tags: #Flutter
cover_image: https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSCnEjHz6Js6gZqGvD37NJVvRY_5wiCeM1EIZN5f-kCWEvLqZaO&usqp=CAU
---

Create a LoginPage in Flutter is Very simple.
Check the github project. 

Widget:
- Padding
- Column
- TextField
- FlatButton

Repo : https://github.com/tonux/login-page-flutter
Free tutorials on React, Gatsby, Svelte, HTML, CSS and Javascript
Tags: webdev, developer, coding, javascript
Published: 2020-06-13 15:24:42

---
title: Free tutorials on React, Gatsby, Svelte, HTML, CSS and Javascript
published: true
description: Get free content on Front End dev.
tags: #webdev #developer #coding #javascript
//cover_image: https://direct_url_to_image.jpg
---

Hey.

I'm Thomas from Sweden. 🇸🇪

I'm a developer and Course/Tutorial creator on modern Front End stuff.I have created a lot of premium courses but decided I want to publish free tutorials on my own Youtube channel. I put out weekly free videos and my goal is to keep it fun, down to earth, and easy to understand. People really seem to like my teaching style so the channel is starting to do great.

I love React so there's a lot of React stuff. But also Vanilla JS, CSS, HTML, Gatsby, and Svelte. I also do some occasional backend stuff.

So ... just wanted to drop a friendly post to come join my channel if you want to learn modern development for free. 😃

https://www.youtube.com/user/Weibenfalk

![Weiben](https://dev-to-uploads.s3.amazonaws.com/i/mka0vn9qk902u3uc9k3f.jpg)

If you want to check out my premium courses also you can go to www.weibenfalk.com ... I've actually discounted them with 90 percent now in the Corona times.

Thomas
[Tutorial Git] git fetch: Verificando commits remotos
Tags: fetch, merge, git, braziliandevs
Published: 2020-06-13 15:23:40

Precisamos entender que, após criarmos um conta no **GitHub** e subirmos nosso código (upload), temos dois repositórios: o local e o remoto.

O repositório remoto é como um espelho do nosso repositório local a cada vez que usamos o comando **git push**.

Sendo assim, quando estamos trabalhando em um projeto com mais de uma pessoa, teremos que verificar os **commits** que foram feitos por outras pessoas da nossa equipe e que foram enviados ao repositório remoto.

![repo local e remoto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dvtufz3xgcudlzbu9xn.png)

Fazemos isso através do comando:

```
$ git fetch
```

- **$** indica que você deve usar o **usuário comum** para fazer essa operação.

Esse comando captura do repositório remoto todos os **branches** e **tags** novos sem fazer **merge** (sem unir ao seu código local) dessas alterações em seu repositório local.

Caso você queira puxar as mudanças, mas sem que elas afetem seu branch principal:

```
$ git fetch origin <nome_do_branch>
```

- escreva o nome do branch desejado sem os sinais de **< e >**.

> caso não lembre como criar branches, [clique aqui](https://dev.to/womakerscode/tutorial-git-o-que-sao-branches-ramos-no-git-57pn).

Para verificar as diferenças entre os códigos dos repositórios, digite:

```
$ git diff origin/main
```

Caso queira ter a versão remota no seu **working directory**, será preciso fazer o **merge** destes **commits**.

```
$ git merge origin/main
```

Ao usar o **git fetch** você consegue saber se existem novas mudanças e como elas afetam as suas mudanças locais antes de unir tudo.
#011 building our Image Part 2
Tags: docker, devops, tutorial
Published: 2020-06-13 15:21:40

# Introduction

this is part 11(ctd of part #10:1) from the journey it's a long journey(360 day) so go please check previous parts , and if you need to walk in the journey with me please make sure to follow because I may post more than once in 1 Day but surely I will post daily at least one 😍.

And I will cover lot of tools as we move on.
***

# run 
now time to action , we have an image ready to run , without any problems!

```bash
docker run app_009_1:1.0
```
![success](https://dev-to-uploads.s3.amazonaws.com/i/yqsni59bf0y85vjy4m47.png)

and that's it! we have a small and simple application.

# remove the tag

now we need to remove the 1.0 tag
```bash
docker image rm app_009_1:1.0
```
this will untagg the image with 1.0 tag
![untagged](https://dev-to-uploads.s3.amazonaws.com/i/qev72q3m3dfg4mt3plxw.png)

```bash
docker image ls
```
![ls_image](https://dev-to-uploads.s3.amazonaws.com/i/tc4xmv7h2ucun6jw2g5t.png)

as wee see the image got removed
Ultimate Guide Locators in Selenium WebDriver.
Tags: testing, tutorial, webdev, beginners
Published: 2020-06-13 15:19:24

✅ Join us - https://sendfox.com/thetestingacademy

In this video, We are discussing about Locators in Selenium WebDriver : Ultimate Guide.

✅ What are Locators in Selenium?
 A locator enables testers to select an HTML DOM element to act on
 Using Locators Selenium Finds elements in HTML Page and return that web element or elements.
 WebDriver represents the browser.
 WebElement represents a particular DOM node.

[![Locators in Selenium](https://i.imgur.com/TRzrv4V.png)](https://youtu.be/1Iux_cx4GHs "Locators in Selenium") 


✅ Different locators in Selenium
  By CSS ID
  By CSS class name
  By link text
  By partial link text
  By xPath or DOM structure 
  By name attribute
  By HTML tag name

✅ What is a CSS Selector?
 CSS Selector combines an element selector and a selector value that can identify particular elements on a web page
  ID,CLASS,TagName

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
Librería Hybrids
Published: 2020-06-13 15:14:08

Tutorial sobre la librería hybrids para desarrollar componentes web o web components.

También pueden encontrar el video en youtube https://youtu.be/CUQNJi4cB58 y si les gusta el contenido se pueden suscribir que vamos a estar subiendo mas contenido de este tipo.

Pueden leer el artículo también https://dev.to/corteshvictor/introduccion-sobre-la-libreria-hybridsjs-ld2
IntelliJ features: ExplainShell
Tags: productivity, bash, tips
Published: 2020-06-13 15:13:18

**Introduction**

The longer a developer works with a certain IDE, the more comfortable and familiar it will feel, and productivity will rise very quickly in the first few weeks of working with it, and, if you're like me, it will approach a flat curve where, it basically stops rising to become more of a constant. 
You end up falling back on the same old, simpler commands, and yet, for very specific actions, you find yourself more often than not, taking the long route, having to look up shortcuts or googling around StackOverflow.

However, you should know that current, modern IDEs are extremely powerful and versatile, and, if you are using it for your company job, chances are you have access to an Ultimate version, so, we can improve our workflow by leveraging some tricks besides the simpler ones.

**Handy feature: Shell support**

I'm a Java developer, so, I use IntelliJ to write Java, 99% of the time. However, there can be times where some tweaking with Python is necessary, or writing shell scripts to provide support for Integration Tests, for example. 
Precisely, while working with shell scripts, I discovered a handy feature, that can actually accelerate my learning of the tools I'm working it, all while staying inside IntelliJ: it's called ExplainShell.

Let's say, I have a simple bash script where I reference a variable but it's not assigned. IntelliJ will detect it and show me this:

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

So it knows that we did something wrong there, and, honestly, unlike Java, there's not a lot for helping us out here... or is it?

It turns out, there is! When we click "More Actions", we get a new prompt, showing us this:

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

And what we are interested, is the "Explain Shell" selected above. When we click it, we get yet another dialog:

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

And, if we choose to see the explanation for the command, IntelliJ redirects us to a website called "ExplainShell":

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8t9epf1o7pb7suy7rycq.png)

where we have the selected command with a handy explanation of how it works! Pretty awesome right? :D

Available on IntelliJ Ultimate Edition 2020.

What are some cool "hidden gems" of your IDE?
#010 building our Image Part 1
Tags: docker, devops, tutorial
Published: 2020-06-13 15:11:19

# Introduction

this is part 10:1 from the journey it's a long journey(360 day) so go please check previous parts , and if you need to walk in the journey with me please make sure to follow because I may post more than once in 1 Day but surely I will post daily at least one 😍.

And I will cover lot of tools as we move on.
***

# Docker image

![image_help](https://dev-to-uploads.s3.amazonaws.com/i/dlxsiuln6beaxgbhfdzs.png)

Docker came with a built-in help command .
type docker --help you will get all the commands , from them we need the image command so we type docker image --help

we need the build command to build our image
if you are not in the folder already,
```bash
cd DevOpsJourney/app_009
``` 
then let's start the action!

```bash
docker image build -t app_009_1 .
```
let's break it ,
-t mean the tag we didn't put app_009_1:version so the version will be latest tag

the . it's mean the Dockerfile is inside the folder that we are in 

press enter , and let's take a look

![image_build](https://dev-to-uploads.s3.amazonaws.com/i/v6r9r2qkym2qwnjar76z.png)

as we see the docker start to pull the python-alpine image from the internet .

![done](https://dev-to-uploads.s3.amazonaws.com/i/9p280rb7xggz6bnawi1c.png)

as we see he start to run it line by line , as we notice he give it tagged app_009_1:latest

let's try to build it again ...

![cached](https://dev-to-uploads.s3.amazonaws.com/i/4vksy1jmuqs4bz5zv0jq.png)

We notice that he didn't get any thing from the hub this time! it's all cached . (as a challenge try and change the maintainer name and build it on your own again )

![inspect](https://dev-to-uploads.s3.amazonaws.com/i/13s6m99en71y30uufdq9.png)

we ged some info about the build in JSON form , we notice in RepoTags we get the tag.

![taged_again](https://dev-to-uploads.s3.amazonaws.com/i/1k3wmcx5mk33hoalr62l.png)

```bash
docker image build -t app_009_1:1.0 .
```

we give it now the tag 1.0

![tag1.0](https://dev-to-uploads.s3.amazonaws.com/i/e57ubaztfm6qab69y2hn.png)

we inspect again and we notice now we have 2 tags in the repo latest and 1.0

if we list the image using

```bash
docker image ls
```

we can see we have 3 images , app_009_1 with 1.0 and another with  latest tag.

python 3.9-rc-alpine

all are now local if we need to build again it's all cached.

with simple math 83.3 - 77.7 = 5.6 MB
our app and alpine image is just 5.6 MB !

# End 
I will split it into 2 parts to make it easier to read
Recommend an image hosting service for my dev.to api wrapper
Tags: help, projectbenatar, discuss, rstats
Published: 2020-06-13 15:07:15

I am writing a wrapper in R for the dev.to API. One of the goals is to allow images that are generated from an .Rmd to be visible in the post. 

# Idea 1 - googledrive

I thought I might be able to use the `googledrive` package to put images into my gdrive, but I haven't been able to find a way to get a link that shows up in dev.to

# Idea 2 - imgur

Imgur _used_ to support anonymous uploads and have an API wrapper to R, but the package in question has been [looking for a new maintainer](https://github.com/cloudyr/imguR/issues/11). Also, in a really quick test the current codebase appears broken. 

# Idea 3 - S3 bucket

I could setup my own s3 bucket, and link the images from there, however that requires a lot of setup for other users, I wanted to keep this as 'low barrier' as possible.

# Idea 4 - Rpubs

RPubs allows uploads of documents from Rstudio IDE really easily, though AFAIK you can't then pull an actual link out of the image that will display in the article, for instance [this old plot I made for an SO question](https://rpubs.com/DaveRGP/SOLabelLogHeatMap)

# Goals

* Needs to be easy to setup
* Needs to be effectively free
* Needs to be accessible programmatically (API etc)
* Would be great if there was _no_ authorisation required
* Would be great if there was _already_ an interface with R

Ideas?