teleren/devto huggingface dataset:
What type of chair do you sit on when coding?
Tags: webdev, discuss, watercooler, productivity
Published: 2020-08-05 20:30:58

I have a leather one with arm rests. The chair is gas lifted and it can go up and down. Unfortunately it is not that adjustable and it can't recline it can only spin around. Plus it is disintegrating because of the leather 🤣 In terms of comfort and ergonomics its not that great I have been debating getting a gamer chair or something that can at least recline for better comfort. Because when you sit for hours in front of a screen its not great for you health especially when the chair is not the most ideal. What about those of you out there with standing desks what are they like to use for extended periods of time do you get fatigue?
Opinion Needed !
Tags: java, kotlin, android, help
Published: 2020-08-05 20:25:24

## With Google really pushing Kotlin with free courses and all, is Android App development really taking a new route from Java to Kotlin ?

As an novice-Android App dev , should  i  switch to Kotlin or stick with Java ?

Lets carry on this discussion .
Post your views and opinions in the discussions panel below.
Thank You in advance !
Off-canvas menu usando el modal de Bootstrap
Tags: spanish, bootstrap, css, beginners
Published: 2020-08-05 20:21:35

Vamos a ver cómo utilizar la estructura de un modal estándar de Bootstrap para construir un menú "Off-canvas" o lo que viene a ser lo mismo un menú desplegable lateral.

![Off-canvas menu usando el modal de Bootstrap](https://dev-to-uploads.s3.amazonaws.com/i/55b2m8ieav3l72s5ai3k.png)

El icono que he utilizado para desplegar es un icono animado por CSS, puedes descargar la librería desde [aquí](https://jonsuh.com/hamburgers/). Se le puede añadir diferentes clases que realizan diferentes animaciones. Este botón llama al modal a través de los atributos data: `data-toggle="modal" data-target="#menuModal"`

#### Estructura HTML del icono

![Hamburger icono animado por CSS](https://dev-to-uploads.s3.amazonaws.com/i/9dkswnev4g4khtbpk8wf.png)

#### Javascript para cambiar los estados del icono 

![Javascript para mostrar u ocultar el menú lateral](https://dev-to-uploads.s3.amazonaws.com/i/obdleccuo7crr929ubbu.png)

*Al hacer clic añade una clase al icono para iniciar la animación y al cerrarse el modal le quita esta clase para volver al estado inicial*

El modal tiene un atributo `data-backdrop=""` para quitar el fondo con transparencia que suele aparecer, de esta manera se podrá hacer clic en el botón de cerrar menú.

#### Estructura del modal

![Off-canvas menu usando el modal de Bootstrap](https://dev-to-uploads.s3.amazonaws.com/i/kctic76f0pbn7s6q415w.png)

He omitido el contenido del modal ya que se puede ver con más detalle desde [codepen.io](https://codepen.io/badiali/pen/NWNWaqP)

La parte más importante de CSS es donde le decimos al modal la posición de inicio y la posición final al desplegarse. El CSS está realizado con SCSS.

![Off-canvas menu usando el modal de Bootstrap](https://dev-to-uploads.s3.amazonaws.com/i/d3dnl1s5miysne6sydnl.png)

Puedes probar, modificar o descargar el código desde [codepen.io](https://codepen.io/badiali/pen/NWNWaqP) dejo incrustado el código para que puedas verlo.

Cualquier duda o comentario será bienvenido. ¡Un saludo!

#### Resultado final

{% codepen https://codepen.io/badiali/pen/NWNWaqP %}
DOM Element Id as global variable
Tags: javascript, webdev, tutorial, productivity
Published: 2020-08-05 19:49:20

Hey Developers,
> I have created a detailed explanation video about how global variables are created when the dom elements are having id attribute.

### Introduction
   * Javascript is a client and server side programming language which basically makes the webpages as dynamic.
   * In Javascript, HTML DOM elements can be accessed by an object called document.
   * Javascript variables will be created to access the dom elements by their id, tagname, classname, css selectors by using the respective methods inside the document object, which is accessible in Javascript.
   * Instead of creating the variables, the html element can also be accessed if it has id attribute.

### Explanation
   * The value of the id attribute for all elements are made available as properties of the global window object. Since window is the global object in the browser, it is accessible as a global variable.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x83pc6pvsk5hthvkczjg.png)
   * Website I refered - https://www.tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/

### Final thoughts
   * The **advantage** of this technique is If you are having more number of dom elements, then you need to create as much as variables. But, you can directly access the dom elements by without creating any external variables.
   * The convention for accessing dom elements is only by creating variables. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/agytaoz05ai5g27ga5j2.png)
   * One more factor is you can rename the variable and create any number of variable for the single dom element with the different variable name.

* Thank You.

### Support Me
* [Youtube - Vuelancer](https://www.youtube.com/channel/UC0hmXRqXYVO0mocVt5D3GkQ)

* [Github - Vuelancer](https://github.com/vuelancer)

* [Scrimba](https://scrimba.com/@selvakumardhivakar)

* [Vuelancer - Patreon](https://patreon.com/vuelancer)
Value in javascript
Tags: javascript
Published: 2020-08-05 19:40:07

Values
Imagine a sea of bits—an ocean of them. A typical modern computer has more than 30 billion bits in its volatile data storage (working memory). Nonvolatile storage (the hard disk or equivalent) tends to have yet a few orders of magnitude more.

To be able to work with such quantities of bits without getting lost, we must separate them into chunks that represent pieces of information. In a JavaScript environment, those chunks are called values. Though all values are made of bits, they play different roles. Every value has a type that determines its role. Some values are numbers, some values are pieces of text, some values are functions, and so on.

To create a value, you must merely invoke its name. This is convenient. You don’t have to gather building material for your values or pay for them. You just call for one, and whoosh, you have it. They are not really created from thin air, of course. Every value has to be stored somewhere, and if you want to use a gigantic amount of them at the same time, you might run out of memory. Fortunately, this is a problem only if you need them all simultaneously. As soon as you no longer use a value, it will dissipate, leaving behind its bits to be recycled as building material for the next generation of values.

This chapter introduces the atomic elements of JavaScript programs, that is, the simple value types and the operators that can act on such values.
TIL: Python Recursion Limit When Accessing Elements in Recursive List
Tags: python, todayilearned
Published: 2020-08-05 19:21:51

Earlier today I found this post by Ryan Westlund:
{% post yujiri8/self-containing-lists-5066%}

It reminded me that in Python you add a reference to a list to itself, like this:
```python
>>> my_list = [1]
>>> my_list.append(my_list)
>>> my_list
[1, [...]]
>>> my_list[1]
[1,[...]]
>>> my_list[1][1][1]
[1, [...]]
```
Sidenote: this is one of the cases where reference counting breaks down and why Python needs a garbage collector (GC). It is the GCs job is to clean up circular references like these. Now, back to the story!

Here we have recursion and in Python, we have a maximum recursion limit. If you have ever forgotten the base case in a recursive function you probably have seen this error:
```
RecursionError: maximum recursion depth exceeded during compilation
```
which is triggered when the limit is reached.

How does accessing the elements work? You can give your own classes the []-operator by implementing `__getitem__(self, key)`. So we can probably think about doing this `my_list[1][1]` as recursive calls to `__getitem__`:
```python
list.__getitem__(
    list.__getitem__(my_list, 1),
    1
)
```
It, therefore, seems reasonable that this would trigger the max recursion error if repeated enough times. What is the default maximum recursion limits?
```python
>>> import sys
>>> sys.getrecursionlimit()
1000
```
Wow, that is more than the times I am willing to write [1] to test my hypothesis. Luckily for us, or at least for me, we can change the recursion limit to let's say 5 using `sys.setrecursionlimit`. 
```python
>>> sys.setrecursionlimit(5)
>>> my_list[1][1][1][1][1]
[1, [...]]
```
It must be an off by one error, let's do 6 access instead.
```python
>>> my_list[1][1][1][1][1][1]
[1, [...]]
```
What!?!?
```python
>>> my_list[1][1][1][1][1][1][1][1][1][1][1][1][1][1]
RecursionError: maximum recursion depth exceeded during compilation
```
Success!!! So, I found 14 access is what is needed for the maximum recursion error to trigger. Interestingly, I only needed 8 when using _exec_:
```python
>>> exec("my_list" + "[1]"*8)
RecursionError: maximum recursion depth exceeded during compilation
```


I'm actually still not sure what causes this behavior. It is demonstrably true that accessing the elements can cause a _RecursionError_, however, I do not understand why it took 14 access with a recursion limit of 5. Might it be some sort of optimization going on here? Even more interesting is that using exec takes 8 accesses, more than the limit but less than the other method. If you have any idea on what might be causing the behavior, please leave a comment below. It would be really interesting to hear your thoughts on this one!
Job Search Week 24
Tags: makers
Published: 2020-08-05 19:19:15

This week I continued to work through my portfolio making it take shape adding thinks like a navbar and more sections. 

Day 1

At the start of the week, I added the hobbies component and the hobbies card component. I wanted to add things like hobbies and experience to make it look more like an interactive CV than just a website. I also added a snapshot test for the app component. 

Day 2

Tuesday I started working on the Navbar component making sure it was tested properly and that everything was rendering correctly. I also added the snapshot test for the Navbar and added the other components to the main container and tested that it was rendering them correctly.  

Day 3

I started integrating more components into the main container component on Wednesday. I added tests and made sure they were rendering correctly too.

Day 4

Thursday I refactored some of the main containers tests to be more relevant. I was also working on the profile component adding a bootstrap container div and adding more text to it to make a better opening paragraph.

Day 5

On Friday I was having some issues with the linking sections locally because of the Navbar. Which I manage to solve I also spent some time styling the Navbar and profile component.

Summary

This week went rather well since I started off spiking something I went back and made sure everything was well tested which it is now. Ultimately a good week since I've got those tests done.
[DevSecOps] #2 まず見える化する
Tags: devops, security
Published: 2020-08-05 19:17:38

## 1.まず見える化する

- 概要
開発と運用のサイロ化(サイロ化とは、企業のある部門が、他の部門と情報共有や連携などをせずに独自に業務を遂行し、孤立した状態を表す語)を生む原因として、そもそもやりたくない作業（障害復旧とかメンテナンス作業とか）を押し付けあうことが原因となるので、それを少なくしたい。そんな発想が生まれる。見える部分に関しては問題であると認識できるが、見えない部分に関しては言うまでもなく。なので、稼働しているシステムがどのように動作しているかを逐一把握していく必要がある。そうなった時にモニタリング環境を整備する必要がある。

- 具体的に満たしたい条件

・コストがかからないこと
・応答が早い事
・設定、メンテナンス作業が楽なこと
・機能が豊富なこと
・デザインが美しいこと（これ大事）

上記を踏まえて技術選定を行った
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q8nxgz0zp7uhv622hfmp.png)

上記を踏まえるとSoundCloud社がリリースしているPrometheusと言う監視サービスを採択する事に決めた。

やはり一番のメリットとしては、コストがOSSで無料であることとServiceDiscovery機能によって同一アカウントに紐づくEC2などを自動で検知してくれるスケーラビリティが優れている事として使用を決めた。

---
[Prometheusの概要]（以下抜粋）
Prometheus は、サーバのリソース状況やソフトウェアの統計情報といった各種メトリックスを収集して監視を行うモニタリングシステムです。ロギングやトレーシングを行うといった多用途のものではなくメトリックス収集に特化しているモニタリングシステムで、人気が高まりつつあるモニタリングシステムです。

もともと SoundCloud 社によって開発されたツールで、現在では、Cloud Native Computing Foundation によってメンテナンスされており、クラウドや Kubernetes 環境で利用されるケースが多いのも特徴です。

[メリット引用](https://www.sraoss.co.jp/tech-blog/prometheus/prometheus-introduction/)
---
次は構築について記載致します。
Do you like Super Mario? I made it with HTML and a little bit CSS...
Tags: html, css, github, tutorial
Published: 2020-08-05 19:08:58

Hi Dev Friend! 🙋‍♂️

This is what i need when i passed too much time to study for Back-End: 👨‍💻
I take my time, open code editor, and i create a new page HTML with CSS for bring to my eyes a lot of color!
🤩

If you want to visit my code, this is my open GitHub repository:
#####https://github.com/Ljnce/Super-Mario-HTML-CSS 
######Give it a ⭐ if you like it.

This is the result of 651 **HTML** 📝 lines (with inline-css), and 21 of **CSS** 🖼:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tmja5zgjhsom3uydoxgu.png)
UTF-8
Tags: cheatsheet, webdev, basics
Published: 2020-08-05 18:59:43

> UTF-8 is a _multi-byte_ _variable-width_ **character encoding scheme** for saving **Unicode codepoints** - which allow displaying almost all characters from  international languages.
> UTF-8 uses 1-byte to store codepoints 0-127. So English text looks exactly the same as they look in ASCII.  


# ASCII 
represents every character using a number between 32 and 127. Space was 32, the letter “A” was 65, etc. This could conveniently be stored in 7 bits.

Using 7 bits gives 128 possible values from 0000000 to 1111111, so ASCII has enough room for all lower case and upper case Latin letters, along with each numerical digit, common punctuation marks, spaces, tabs and other control characters.


# ANSI
below 128, same as ASCII, but there were lots of different ways to handle the characters from 128 and up, depending on where you lived. These different systems were called *code pages*. For example in Israel, DOS used a code page called 862, while Greek users used 737.

# Unicode
a single character set that included every reasonable writing system on the planet.

Characters are represented as CodePoints

Every platonic letter in every alphabet is assigned a magic number by the Unicode consortium which is written like: U+0639. 
This magic number is called a code point. 
The U+ means “Unicode” and the numbers are hexadecimal.


#UTF-8 
##(8-bit Unicode Transformation Format)
UTF-8 is a system for storing strings of Unicode code points, those magic U+ numbers, in memory using 8 bit bytes. 

In UTF-8, every code point from 0-127 is stored in a single byte. This has the neat side effect that English text looks exactly the same in UTF-8 as it did in ASCII.

Code points 128 and above are stored using 2, 3, in fact, up to 6 bytes.

UTF-8 is therefore a multi-byte variable-width encoding. Multi-byte because a single character like Я takes more than one byte to specify it. 
Variable-width because some characters like H take only 1 byte and some up to 4.

UTF-8 is universal and covers Latin characters as well as Cyrillic, Arabic, Japanese...


References used:
1. [https://www.joelonsoftware.com/2003/10/08/the-absolute-minimum-every-software-developer-absolutely-positively-must-know-about-unicode-and-character-sets-no-excuses/](https://www.joelonsoftware.com/2003/10/08/the-absolute-minimum-every-software-developer-absolutely-positively-must-know-about-unicode-and-character-sets-no-excuses/)

2. [https://www.smashingmagazine.com/2012/06/all-about-unicode-utf8-character-sets/](https://www.smashingmagazine.com/2012/06/all-about-unicode-utf8-character-sets/)
Another Meme On The Books!
Tags: memes
Published: 2020-08-05 18:43:04

<img src=https://i.imgur.com/oYglMIm.jpg>

We've been moving at light speed through JavaScript, and every time we nail a concept, our teacher (Brian Rice) hands us a new concept/syntax rule that makes me feel like the second and last panel. Follow up questions follow :)

New format, new Vue.js skills, same vibe !
Effective enqueuing of background jobs
Tags: rails, programming
Published: 2020-08-10 19:11:23

---
title: Effective enqueuing of background jobs
published: true
date: 2020-08-05 18:39:50 UTC
tags: rails,programming
canonical_url: https://prathamesh.tech/2020/08/06/effective-enqueuing-of-background-jobs/
---

#### TLDR;

Lot of times we can avoid enqueuing the jobs to the background queue if they are going to be discarded immediately upon execution.

<!--kg-card-begin: hr-->
* * *
<!--kg-card-end: hr-->

Let's say we have a background job to send a webhook notification to Slack.

<!--kg-card-begin: code-->
```
# app/services/events_service.rb

class EventsService
  def process
    @event = create_event
    SlackJob.perform_later(@org, @event)
  end
end

# app/jobs/slack_job.rb

class SlackJob < ApplicationJob
  def perform(org, payload)
    if org.slack_enabled?
      SendSlackNotification.new(org, payload).process
    end
  end
end
```
<!--kg-card-end: code-->

The job is enqueued for sending the notification and then inside the job we are checking if the organization has enabled slack or not. Only if slack is enabled then the job will be executed. But it still gets enqueued in the queue and the worker process has to pick it up and start executing. Only then it realizes that the job does not satisfy required conditions and discards it.

**_This means that each time the SlackJob gets enqueued and gets picked up for execution by the worker process._**

A better approach will be to enqueue only the jobs that are going to be actually **_executed_**. This will avoid unnecessarily enqueuing jobs which are going to be discarded immediately.

<!--kg-card-begin: code-->
```
# app/services/events_service.rb

class EventsService
  def process
    @event = create_event
    if @org.slack_enabled?
      SlackJob.perform_later(@org, @event)
    end
  end
end

# app/jobs/slack_job.rb

class SlackJob < ApplicationJob
  def perform(org, payload)  
    SendSlackNotification.new(org, payload).process
  end
end
```
<!--kg-card-end: code-->

This pattern should be used in cases where the decision of whether to execute the job or not too complex and does not depend on too many entities. If the job has to take decision based on complex logic then it can he handled in the job itself instead of doing it before enqueuing the job. But for simple conditionals, we can check them beforehand to avoid enqueuing of the job and immediately discarding.  

<!--kg-card-begin: hr-->
* * *
<!--kg-card-end: hr-->

Interested in knowing more about my thoughts on web programming using Ruby on Rails? Subscribe [here](https://prathamesh.tech/mailing-list) or follow me on [Twitter](https://twitter.com/_cha1tanya).
[DevSecOps] #1 ビジネスを加速する文化的処方箋
Tags: devops, security
Published: 2020-08-05 18:37:35

## DevSecOPSとは

### 1.概念

「development」(開発)と「operations」(運用)、その言葉が明確に分けられ、役割の違いを表しているように。組織内の構造が分かれている事を伴って、必要のない摩擦や作業(組織の大小に関係なく、分かれていることが原因で責任の所在が不明瞭になる事)を生んでいるパターンがしばしば見受けられる。その分断≒細胞壁を破り、ビジネスの方向性によって柔軟に形を変えられる有機体を目指すために、この言葉が生まれたと理解している。また、このような名前付を行う事によって文化となり、ToDoを明確化し、エンジニアリングの価値を実現するスピードを早める考え方であると捉えている。この活動を通して、

・チーム内の透明性が増し、チーム内に信頼が生まれる。

・実際にダメージの大きいミスをする前に、それを防ぐ方法をチームメンバに伝えられる。

・新しい問題の解決に使える時間が増え、より本質的な活動に時間を多く割ける。

・そもそも、新しいプロダクトを設計するにあたって長期的に発生するであろう技術的な負債を回避できる。

上記のような満足があるという認識。

一般的に知られているのは、何か作業を自動化するであったりとか、新しいツールを導入するということが表に出てくることが多いが実際の根本的な課題は、分断されていた状態であったためお互いに理解しあう為のスタンスを持つまでに少しリハビリが必要な事だったりするんじゃないかと思ってる。そしてそのような構造が時間と共に大きくなっていけばいくほど変えづらい物になるので本当に初期に取り組むべき活動だと考えている。

### 2.具体例

実際に上記の文化がない状態だったとしたらどんな現状が起こるのかを書いてみる

- 運用面 : 
  - 緊急で入る運用業務に時間が取られ定時過ぎてから「自分の案件」に着手する...
  - 肥大化したリソースの管理を手動で行うため、運用ミスで重大な毀損の事故を起こす
    - secondary繋げ忘れて参照できない問い合わせが来る
    - primaryが容量が100%でDBがdown
    - slow queryによって、その他のプロセスがつまる
    - 多数のサーバーの脆弱性対応で一日中工数が奪われる
  - そもそもセキュリティ領域の作業などが属人化しているので開発側が分からない
- 開発面 : 
  - 複数の案件が同時に走るため、マージ後のテストのし忘れによる事故発生
  - 密結合なサービスに機能追加したので、全てに影響が出てしまいテストケース増
  - 新規案件の影響範囲や工数を適切に見積もることができる人材がいない
  - UnitTestがなくて手動による確認を行う。結果考慮漏れがあり事故

その結果どうなるのか
- 企画が提案する案件は、非常に工数が意識されたその場しのぎの案件が走る
- そもそも既存のソースコードが汚いので。。という妥協
- 運用が属人化して、新規参入者が活躍しずらい組織に
- 問い合わせやバグなどの発見が非常に困難

上記の事例をあげるだけでも枚挙に暇がない。

## 3.上記の文化を実現するために
実際にアクションを起こした内容について**[DevSecOps]**のタグと共に具体的に行ってきた事の詳細を発信しようと思う。
Sharing pitfalls
Tags: discuss
Published: 2020-08-05 18:36:23

---
title: Sharing pitfalls
published: true
description: 
tags: discuss
//cover_image: https://direct_url_to_image.jpg
---

Do you have some standard way to document your own failures, so others won't do the same thing when they encounter something similar? Like documenting when you waste a considerable time building something in a architecture that ended up being rebuild from the ground, or doing some fix that resulted in another bug being created, this kind of things.
100 days of code for me
Tags: swift, javascript, css, csharp
Published: 2020-08-05 18:22:16

Can see finding content to post for 100 days will be more difficult than coding for 100 days 🤣. ⁣
⁣
So I’m pretty strapped for time most days but I’m still able to get at least an hour, it’s not much but it’s something. ⁣
⁣
Once I’m back up to speed I plan to spend longer hours at the weekend. ⁣
⁣
Still just using courses and will be for at least a couple weeks to get comfy again, then I’m going to do some mini projects of my own, nothing fancy just feelers 😅
Intro to AnimateSharedLayout from framer-motion v2.2
Tags: react, frontend, javascript, beginners
Published: 2020-08-05 18:19:25

---
title: Intro to AnimateSharedLayout from framer-motion v2.2
published: true
description: A simple guide to get started with the new APIs introduced in framer-motion v2.2
tags: react,frontend,javascript,beginners
cover_image: https://i.imgur.com/HYYsJJs.png
canonical_url: https://blog.workofutkarsh.com/intro-to-framer-motion-v22-ckd9y7ood001koks14zapgipo
---

You might have seen a lot of layout transition examples now like this one here.

![example.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1596123704879/rO-TqKHiL.gif)

Layout animations like these have been common in native apps for years now, but it was way harder to implement these in web apps because one has to cater to multiple screen sizes.
The transitional motion was first promoted by Google to help developers build more intuitive user flows in their apps.  [material.io](https://material.io/design/motion/understanding-motion.html) is a great resource to learn about their design principles in mobile applications.

Recently Framer came out with [framer-motion v2](https://www.framer.com/motion/) which includes `AnimateSharedLayout` which I believe, is the easiest way out there to build a transitional layout animation. Here is my guide on how to achieve that.

Firstly, You can start with creating the layouts as they are supposed to look using HTML and CSS or any styling library of your preference.

Then, Add `motion.` to the tag of the element that you want to animate, e.g. `div` becomes `motion.div`, `h1` to `motion.h1` and so on, `motion` supports all the HTML tags. 
Then, add an attribute `layoutId`. Make sure these layoutIds are unique in both of the pages.

![Adding LayoutIds to DOM elements](https://cdn.hashnode.com/res/hashnode/image/upload/v1596129208464/44a5EAZBQ.png)

Once you are done with that, wrap the Routes on which you want to implement the layout transition with `AnimateSharedLayout`.

![Wrappung Routes with AnimateSharedLayout ](https://cdn.hashnode.com/res/hashnode/image/upload/v1596129506648/1iDb5Y0eH.png)

And It's as easy as that. Your app with killer layout animation is done 🎉

![giphy.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1596135408633/CNIuRb9Xz.gif)

You can refer to this awesome example in the Codesandbox below that has been given by the `framer-motion` team.



{% codesandbox framer-motion-animatesharedlayout-app-store-demo-i1kct %}


I have started using it in my projects as well. 

{% twitter 1287745546665385985 %}

Do check out this API and share it with me on Twitter.