teleren/devto huggingface dataset:
Pointer-based Arrays
Tags: javascript
Published: 2020-08-27 15:56:32

During my foray into data structures and algorithms, I've been learning about different structures and efficiency.

There are pros and cons to using various data structures, and I'll be going over some of them regarding arrays.

<h2>Arrays</h2>

Arrays can hold items of the same size in sequential order. Arrays require a block of uninterrupted space in memory.

An advantage to the array data structure is that it has a fast lookup time of O(1). This is because there is a direct connection between the index and its corresponding value. Instead of having to go through the entire array to find a value, which would be O(n) lookup time, we can use the index to lookup the value directly. 

Arrays in low-level languages such as Java and C need to be declared with the array size. In JavaScript, arrays are dynamic arrays, which typically double in capacity when they reach capacity.


<h2>Pointer-based Arrays</h2>

Pointer-based arrays are just what they sound like, they use pointers to refer to the location of the array items in memory. Using a pointer-based array offers us some advantages over a regular array. 
 
A pro to using pointer based arrays is that large blocks of uninterrupted space in memory are no longer need to store the entire array. This is because each pointer is referencing the location in memory of the element. In essence, this allows the items in the array to be stored in different locations, and they no longer have to be sequential. Another advantage is that since pointers are being used to reference each item in the array, the items no longer have to be the same exact size. 

There are tradeoffs, of course. A notable one being that since all of the items in the pointer-based array are not sequential, the array is not cache friendly. When a request for a particular item in the array is made, the nearby addresses will be cached for future lookup. This is one of the main reasons that lookup time for arrays is O(1). However, with pointer based arrays, the lookup time is still O(1), but it's technically slower because caching no longer works. To keep it simple, we say the amortized time or average lookup time for pointer-based arrays is O(1). 

As I learn more about data structures, the tradeoffs and costs become more apparent. It's important to draw comparisons between data structures and use those relationships to understand when and why to use the ideal one for a situation.
7 HTML attributes that you may not be using
Tags: html, webdev
Published: 2020-08-27 15:50:31

As a web designer probably there a lot of attributes that you are familiar with and you use them frequently but here are 7 attributes that you may not be using.

### Contenteditable
It's a global attribute that specifies whether the content of an element is editable or not.

```
<p contenteditable="true">Text</p>
```

### Download
It's belong to anchor element in which it specifies that the target will be downloaded when a user clicks on the hyperlink.

```
<a href="document.pdf" download> Download</a>
```

### Hidden
Hidden belong to global attribute and as the name suggested it hide or specifies that an element is not yet, or is no longer relevant.

```
<p hidden>This text is hidden </p>
```

### Multiple
It allows user to enter more than one value. it belong to input and select element.

```
<!-- allows you to upload multiple files -->
<input type="file" multiple>

<!-- allows you to select more than one option -->
<select multiple> 
   <option value="#">Value 1</option>
   <option value="#">Value 2</option>
   <option value="#">Value 3</option>
</select>
```

### Poster
Belong to video element in which it specifies an image to be shown while the video is downloading or hasn't started playing.

```
<video controls poster="image.jpg"> ... </video>
```

### Spellcheck
It specifies whether the element is to have its spelling and grammar checked or not.

```
<input type="text" spellcheck="true">
<!-- don't use it on password -->
```

### Accept
This attribute specifies what files are supported to be uploaded.

```
<!-- This allows only pdf file -->
<input type="file" accept="application/pdf">

<!--This allows only images -->
<input type="file" accept="image/*">

<!-- accept="image/jpeg" allows only jpeg/jpg -->
<!-- accept="image/png" allows only png  -->
```

## What attribute that you are not using?, please comment it below.
Buildah, Dive, Skopeo: 3 Container Tools for building images on Kubernetes Cluster, with Gitlab CI
Tags: buildah, dive, skopeo, kubernetes
Published: 2020-08-27 15:48:02

---
title: Buildah, Dive, Skopeo: 3 Container Tools for building images on Kubernetes Cluster, with Gitlab CI
published: true
description: Building images on Kubernetes Cluster, with Gitlab CI
tags: buildah, dive, skopeo, kubernetes
cover_image: https://assets.mkdev.me/posts/covers/000/000/012/original/mkdev_article.png
---
You don't need Docker host or Docker-in-Docker to build container images, especially if you are using Kubernetes. There are more lightweight and secure alternatives.

In this video, Kirill Shirinkin is going to show 3 relatively new container image tools: We will build an image with Buildah, analyse it with Dive and promote it between container registries (AWS ECR in this case) with Skopeo. 

{% youtube aViKsSEGwOc %}

***

*You can always hire [our mentors](https://mkdev.me/en/specializations) and learn directly from them!*
Golang Learning Resources
Tags: go, beginners, codenewbie, discuss
Published: 2020-08-27 15:39:08

Hey everyone, I have started learning Golang recently and in this article, I am going to list a few useful resources for beginners getting started with Golang.

### :label: Online Resources
- [The Go Programming Language Tour](https://tour.golang.org/welcome/1)
- [Go Essentials Training](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjp6P3B0bvrAhVg4nMBHX2mADYQFjACegQIAxAB&url=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fgo-essential-training&usg=AOvVaw1qGOsULZK_GUT5mIaDtJGi) by  Miki Tebeka on LinkedIn Learning
- [Effective Go](https://golang.org/doc/effective_go.html)
- [How to Write Go Code ](https://golang.org/doc/code.html)
- [Go Programming Language](https://www.geeksforgeeks.org/golang/) by GeeksForGeeks

### :label: Books
- [The Go Programming Language](http://www.gopl.io/) by Alan A. A. Donovan and Brian W. Kernighan
- [Go Bootcamp](http://www.golangbootcamp.com/) by Matt Aimonetti

### :label: Videos and Podcasts
- [Go in 5 Minitues](https://gifm.dev/)
- [Gophercises](https://gophercises.com/) by Jon Calhoun

### :label: Editors and IDEs
- [GoLand](https://www.jetbrains.com/go/) by Jetbrains

### :label: Community Resources
- [Go Community Wiki](https://github.com/golang/go/wiki)
- [Go Forum](https://forum.golangbridge.org/)
- [The Go Blog](https://blog.golang.org/)

These are some of my recommendations, feel free to add more resources in the comments. Happy Learning! :rocket:
Glidejs Append content dynamic with Json
Tags: help, javascript, json, glidejs
Published: 2020-08-27 15:34:58

Hi,

I'm trying to append content dynamically from a Json file but I cannot find a work around to make it work.
```
import Glide from '@glidejs/glide';

function slider() {
  let ul = document.querySelector('.glide__slides');
  let card = '';
  var glide = new Glide('.glide').destroy();

  const photo = import('../metadata/photos.json').then((module) => {
    const data = module.default;
    data.forEach((photo) => {
      console.log(photo);
      card += `<li class="glide__slide"><img src="${photo.thumbnailUrl}" alt="${photo.title}">${photo.id}</li>`;
    });
    ul.innerHTML = card;
  });

  glide.mount();
}

slider();
```

Thanks in advance for your time.

------------------
#Back in the Future

I could solve it with the following code:

```
import Glide from '@glidejs/glide';

let ul = document.querySelector('.glide_mobile_slides');
let desktopCarrousel = document.querySelector('.glide_desktop_carrousel');
let msg = document.querySelector('#msgDefault');
let arrows = document.querySelector('.glide__arrows');

let card = '';

var init = {
  method: 'GET',
  headers: { 'Content-Type': 'application/json' },
  mode: 'cors',
  cache: 'default',
};
const url = new Request('../metadata/@YOUR-FILE@.json', init);

const fetchData = fetch(url).then((data) => {
  return data.json();
});

statesSelect.addEventListener('change', (e) => {
  statesSelectValue = e.target.value;
  card = '';

  fetchData.then((datas) => {
    datas[statesSelectValue].forEach((data) => {
        card += `
          <li class="glide__slide">
            <div class="max-w-xs rounded overflow-hidden">
              <div class="p-2 mb-1 text-center bg-blue-700 font-bold text-white">
                ${data.title}
              </div>
              <div>
          </li>
    `;
      }
    });
    if (card != '') {
      ul.innerHTML = card;
      desktopCarrousel.innerHTML = card;
      arrows.classList.add('block'), arrows.classList.remove('hidden');
      msg.innerHTML = '';
    } else {
      ul.innerHTML = '';
      desktopCarrousel.innerHTML = '';
      msg.innerHTML = `
      <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 text-center" role="alert">
        <p class="font-bold">Error msg</p>
      </div>
      `;
    }
    new Glide('.glide_mobile', {
      type: 'slider',
      startAt: 0,
      focusAt: 'center',
      perView: 2,
      hoverpause: true,
      keyboard: true,
      bound: true,
      gap: 10,
    }).mount();
    new Glide('.glide_desktop', {
      type: 'carrousel',
      perView: 4,
      startAt: 0,
      hoverpause: true,
      keyboard: true,
      autoplay: 4000,
      breakpoints: {
        1024: {
          perView: 3,
        },
        800: {
          perView: 2,
        },
      },
    }).mount();
  });
});

```
#055 Kubernetes - Secretes
Tags: devops, tutorial, kubernetes
Published: 2020-08-27 15:31:38

#Secretes
ATCD is the database where master save data about nodes , so the secret will be created in ATCD encrypted , and he didn't put it in any Node until a pod need to use it. There is a resource to read it and it is a must to read before continue this article this is the link to the design of secretes read it and came back -> [here](https://github.com/kubernetes/community/blob/master/contributors/design-proposals/auth/secrets.md)

# Files
the files also can be found in the DevOpsRepo in my github , if you already have it just pull it.

```yaml
#app_055-cf.yml
apiVersion: v1
kind: ConfigMap
metadata:
        name: configs
data:
        LANGUAGE: Polish
```
```yaml
#app_055-sec.yml
apiVersion: v1
kind: Secret 
metadata:
        name: configs-sec
data:
        API_KEY: MzMzLTQ0NC01NTUK 
```
```yaml
#app_055.yml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: envtest
spec:
  selector:
    matchLabels:
      name: envtest
  replicas: 1
  template:
    metadata:
      labels:
        name: envtest
    spec:
      containers:
      - name: envtest
        image: praqma/secrets-demo
        imagePullPolicy: Always
        ports:
        - containerPort: 3000
        env:
        - name: LANGUAGE
          valueFrom:
            configMapKeyRef:
              name: configs
              key: LANGUAGE
        - name: API_KEY
          valueFrom:
            secretKeyRef:
              name: configs-sec
              key: API_KEY
```
# Lab
Will the ApiKey is a secret in fact , so we should put it in secret configs.
to convert our keys to an encryption we use this command on Linux

```bash
echo "333-444-555" | base64
//output : MzMzLTQ0NC01NTUK
```

![create](https://dev-to-uploads.s3.amazonaws.com/i/uoh0ehs622uz3zcu2i5t.png)
```bash
kubectl create -f app_055-sec.yml 
kubectl create -f app_055-cf.yml 
kubectl apply -f app_055.yml 
```
then port-forward to 3000
```bash
kubectl port-forward envtest-767745d7b4-s6ld7 3000
```
![working](https://dev-to-uploads.s3.amazonaws.com/i/nctvtu2pwu9fm651zymy.png)
Can you recommend me some pomodoro timer?
Tags: beginners, career, productivity
Published: 2020-08-27 15:20:57

I'm thinking of using the **pomodoro technique** to increase my codding productivity.

I choose between the iPhone stopwatch or one of the timers that are on Google... **can someone recommend one?**

___
**I edit with a summary of the suggested pomodoro timers**:

* [Pomofocus (web)](https://pomofocus.io/)
* [Forest (iOS)](https://www.forestapp.cc/)
* [Goodtime (Android)](https://github.com/adrcotfas/Goodtime/)
* [Tomato-timer (web)](https://tomato-timer.com/)
* [Marinaratimer (web)](https://www.marinaratimer.com/)
* [PomoDone (iOS/Android/Desktop/web)]
(https://my.pomodoneapp.com/) - It's my discovery and my winner :)
3 ways to find if a number is Odd/Even in Python
Tags: python, devops, coding, beginners
Published: 2020-08-27 15:16:58

### Solution #1
```
def find(num):
    # code logic here
    if num%2 == 0:
        numtype="even"
    else:
        numtype = "odd"
    return numtype

num = int(input('Enter the number: '))  # 1. take your input
numtype = find(num)                     # 2. call the find function
print('Given number is',numtype).       # 3. print if the number is even or odd
```

#### Output:
```
coder# python challenge07.py 
Enter the number: 5
Given number is odd
coder# python challenge07.py 
Enter the number: 8
Given number is even
```

#### Explanation:-

1. input() function is used to take user input
2. find() function is called to to check if a number is off/even. This function returns numtype as odd/even
3. At last, print if the given number is odd/even

### Solution #2
Avoid usage of else block by assigning a default value (odd) to numtype
```
def find(num):
    # code logic here
    numtype = "odd"
    if num%2 == 0:
        numtype="even"
    return numtype

num = int(input('Enter the number: '))      # take your input
numtype = find(num)                         # call the find function
print('Given number is',numtype)            # print if the number is even or odd
```

#### Output:
```
coder# python challenge07.py 
Enter the number: 5
Given number is odd
coder# python challenge07.py 
Enter the number: 8
Given number is even
```
### Solution #3
directly return numtype
```
def find(num):
    # code logic here
    if num%2 == 0:
        return "even"
    return "odd"

num = int(input('Enter the number: '))      # take your input
numtype = find(num)                         # call the find function
print('Given number is',numtype)            # print if the number is even or odd
```
#### Output:
```
coder# python challenge07.py 
Enter the number: 5
Given number is odd
coder# python challenge07.py 
Enter the number: 8
Given number is even
```
### Bonus 

`numtype = num%2 == 0 and "even" or "odd"`

Find the video explanation also


{% youtube LC6zEHq4Pnw %}
Window illustration - CSS
Tags: codepen, css
Published: 2020-08-27 15:16:55

<p>An interactive css art window that displays two backgrounds, day and night. Based on this dribble shot: <a href="https://dribbble.com/shots/11283947-Taking-it-slow" target="_blank">https://dribbble.com/shots/11283947-Taking-it-slow</a></p>

{% codepen https://codepen.io/tannerdolby/pen/ZEWKEvR %}
pip commands You Should Know!!!
Tags: pip, python
Published: 2020-08-27 15:15:13

<span>Photo by <a href="https://unsplash.com/@hiteshchoudhary?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Hitesh Choudhary</a> on <a href="https://unsplash.com/s/photos/python?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

#### If you don't use python's virtual env on your machine, you will need to use `pip3` for python3 instead of `pip`.

### List installed packages 
```zsh
$ pip list
Package            Version
------------------ ---------
appnope            0.1.0
argon2-cffi        20.1.0
attrs              19.3.0
backcall           0.2.0
bleach             3.1.5
certifi            2020.6.20
cffi               1.14.1
chardet            3.0.4
decorator          4.4.2

# Of course, you can use grep with |

$ pip list | grep six
six                1.15.0
```

### Output installed packages in requirements format
When you publish your python project to `GitHub`, publishing `requirements.txt` could be good since others can try your project without having module errors.
```zsh
$ pip freeze
$ pip freeze > requirements.txt
```

### Show details of a package
```zsh
$ pip show package_name

$ pip show six
Name: six
Version: 1.15.0
Summary: Python 2 and 3 compatibility utilities
Home-page: https://github.com/benjaminp/six
Author: Benjamin Peterson
Author-email: benjamin@python.org
License: MIT
Location: /usr/local/lib/python3.8/site-packages
Requires:
Required-by: traitlets, python-dateutil, pyrsistent, packaging, jsonschema, bleach, argon2-cffi
```

### Install a package
```zsh
$ pip install package_name
```

### Install a specific version 
```zsh
$ pip install tensorflow==1.14.0
```

### Update a package 
```zsh
$ pip install -U package_name
```

### Uninstall a package
```zsh
$ pip uninstall -y package_name
```

### Install multiple packages
```zsh
$ pip install package_name1 package_name2
```

### Install packages by requirements.txt
```zsh
$ pip install -r requirements.txt
```

### Uninstall multiple packages
```zsh
$ pip uninstall -y package_name1 package_name2
```

### Check packages dependencies
```zsh
$ pip check
No broken requirements found.

# If your env has any dependency issues, you will see something here
```
#CodepenChallenge 3D Rotating Store Icon No Javascript
Tags: codepen, html, css, showdev
Published: 2020-08-27 15:00:40

Using the 3 colors that was on the challenge, I made this 3D store icon, without using any Javascript codes.

Though I used other colors to make the icon somehow colorful, I used the 3 main colors as the main. The others are just the background color, or some extra objects.

I also lighten, and darken the color, to make the 3d shading effect.

I made a 3D box generator by using Pug, and Sass mixins. This is to make the creations of objects easier, and also it makes the source code shorter (Uncompiled).

The trick in icon movement is just a simple invisible hover(able) div element, and select the icon sibling to do the rotation.

{% codepen https://codepen.io/takaneichinose/pen/gOrmMMr %}
What Are You Doing Wrong?
Tags: impact, webdev, productivity, change
Published: 2020-08-27 14:55:00

"You don't know how to write. Go back to what you're good at." That's the PG version of what someone replied and told me last week. I wanted to be angry and offended, but then I realized that they were right about one thing: I definitely had room for improvement in my writing.

In your job, in your business, in your relationships, your hobbies, in your emotional health, you're doing something wrong. Do you know what it is? If not, it's time to figure it out and get better at it.

This is the process known as deliberate practice. It's looking in-depth at what you're doing, finding out what's wrong, and then trying again, implementing the changes you need to make.

You can look at any mistake, any failure, any imperfection as one of two things: proof of your inadequacies, or as a place to improve. Your mistakes can hold you back, or give you a hill to climb, with a great view every step of the way.

But if you are looking at your faults as something to improve, then it is critical that you are actually doing what is necessary to find the deficiencies in your performance and fix them.

![image](https://cdn-images-1.medium.com/max/800/0*x1JmTTnphwkWn7tP?)

Photos by [Derek Howard](https://is-tracking-link-api-prod.appspot.com/api/v1/click/4902805682257920/~Tokens.Link~)

Deliberate practice is not just saying "I'm not perfect, oh well". Deliberate practice is a matter of finding problems and improving them.

That means really examining what you're doing, and holding nothing sacred. Asking friends, seeking out experts, reading books, and making a real effort to improve.

You can apply this to programming, business, friendships, romantic relationships, or your own emotional health. No matter what it is, you can use deliberate practice to improve it.

There's an old saying in programming that's a great variation of a different old saying: "If you're not embarrassed at the code you wrote 6 months ago, then you're not improving enough."

What are you doing wrong? Are you willing to put in the work?

Happy coding!

Signup for my newsletter [here](https://thinkster.io/?previewmodal=signup?utm_source=devto&utm_medium=blog&utm_term=whatareyoudoingwrong&utm_content=&utm_campaign=blog).

Visit Us: [thinkster.io](https://thinkster.io?utm_source=devto&utm_medium=blog&utm_term=whatareyoudoingwrong&utm_content=&utm_campaign=blog) | Facebook: @gothinkster | Twitter: @GoThinkster
Specify a file as the url in your cpanfile
Tags: perl, cpanfile
Published: 2020-08-27 14:54:40

---
title: Specify a file as the url in your cpanfile
published: true
description: 
tags: perl, cpanfile
//cover_image: https://direct_url_to_image.jpg
---

Whilst it is not explicitly stated in the [docs](https://metacpan.org/pod/Carton#Specifying-a-CPAN-distribution), you can specify a file path as the `url` for the dependency in a `cpanfile`:

```perl
requires "Module::Name",
  url => "file:///path/to/Module-Name-${VERSION}.tar.gz";
```

This can prove useful if _(for example)_ you want to test local versions of your own modules and don't have or want a local CPAN mirror.
The web is eating itself through web components, an example
Tags: webcomponents, midi, opensource
Published: 2020-08-27 14:46:06

The web is eating itself and this short video demonstrates why HAX has political implications for the web and democratizing creativity. This is demonstrated via a simple sheet music playing music player

{% youtube UFOsm508ZHQ %}

## What's in the video
- I found this tweet about an awesome VanillaJS web component that leverages a library called Magenta.js https://twitter.com/cifkao/status/1298593112449744896
- I made a music-player tag that sits on top of this element
- I wired that tag up to HAX so that ANYONE can drag and drop and visualize a midi / sheet music file

## Links
- Demo of the html-midi-player tag https://codepen.io/cifkao/pen/WNwpLzL
- https://github.com/cifkao/html-midi-player
- NPM - https://www.npmjs.com/package/@lrnwebcomponents/music-player
- Source of music-player: https://github.com/elmsln/lrnwebcomponents/blob/master/elements/music-player/src/music-player.js
Catering Point of Sale (POS) for catering purposes, with tablemanagement in Python, PyQt5 and PosgreSQL. 
Published: 2020-08-27 14:35:23

# Catering

Python, PyQt5 and database PostgreSQL.

The target of the project is a point of sale (POS)  for catering purposes as a open source project, including tablemanagement for 100 seats, 20 tables with 2 places and 15 tables with 4 places. Splitting and combining of tables and seats. Programmable buttons for 10 maingroups of producttypes and 5 subgroups with 18 choices, so 900 products in total.

Project link: https://github.com/DirkJanJansen/Catering

*****

Features:

Logon with barcode

Switching between clients by barcodescan for fast switching.

Employee switching for take over by absent or ending worktime.

Product selection by scanning and buttonselect.

Buttons programmable (also colors) in mainscreen by clicking the productbuttons as admin.

Stock management included.

Adding new products possible by generating barcodes in reserved range, or scanning commercial products.

*****

Link to Documentation: https://raw.githubusercontent.com/DirkJanJansen/Catering/master/Documentation_Catering_POS.pdf

Link to Installation : https://github.com/DirkJanJansen/Catering/tree/master/installation/install.txt

Link to Linux installation: https://github.com/DirkJanJansen/Catering/tree/master/installation/LINUX_install.txt

# Mainscreen
![Catering Mainscreen](https://raw.githubusercontent.com/DirkJanJansen/Catering/master/mainScreen.png)

# Table management
![Catering Table_reservationscreen](https://raw.githubusercontent.com/DirkJanJansen/Catering/master/table_management.png)