teleren/devto huggingface dataset:
Put element into fullscreen in JS
Tags: javascript, css, webdev
Published: 2021-07-04 07:08:50

Hi there!

Today I studied How can I put an element into fullscreen mode and I want to share with you How do it ☺️

Primarily, you should know that It works only in events, so you should use request into fullscreen mode in the event function.

So that put container into fullscreen mode use it

```javascript
const d = document.querySelector("#d")

d.requestFullscreen(options)
    .then(() => {})
    .catch((error) => {})
```

You see that it is not guaranteed that the element will be put into fullscreen mode.

So, `element.requestFullscreen()` returned `Promise` of `undefined`.

In options you can change `navigationUI` param on "hide" | "show" or "auto" (default value).

First, I create a function for get fullscreen method, because fullscreen in some browsers works with prefixes only.

```javascript
function goIntoFullscreen(element) {
    if (element.requestFullscreen) {
        return element.requestFullscreen()
    } else if (element.mozRequestFullScreen) {
        return element.mozRequestFullScreen()
    } else if (element.webkitRequestFullscreen) {
        return element.webkitRequestFullscreen()
    } else if (element.msRequestFullscreen) {
        return element.msRequestFullscreen();
    }
}
```

Next, You should exit out of fullscreen mode.

For exit out of fullscreen mode used by `document.exitFullscreen`. I created a function for it with some browser prefixes too.

```javascript
function outOfFullscreen() {
    if(document.exitFullscreen) {
        document.exitFullscreen()
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
    }
}
```

After put into fullscreen will be available `document.fullscreenElement`. You can check it for the button event of something else. I wrote a simple check function for it

```javascript
function isFullScreenMode() {
    return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
}
```

Funnily I created an example so that you can [try live demo](https://vladimirschneider.github.io/dev-to-fullscreen/index.html).

You can style your fullscreen into fullscreen mode and elements in use by `:fullscreen` and `::backdrop`.

Finally, you can be listening fullscreen with `fullscreenchange` and `fullscreenerror` events.
Don't be a rock star
Tags: career, teamwork
Published: 2021-07-07 08:27:13

---
title: Don't be a rock star
published: true
date: 2021-07-04 00:00:00 UTC
tags: career,teamwork
canonical_url: https://jhall.io/archive/2021/07/04/dont-be-a-rock-star/
---

“Rock star” engineers thrive in the spot light. We know they’re good at their job, because they are the ones who jump into action in an emergency. They’re always the ones who know the arcane secrets. A rock star probably wrote at least half the project you’re working on right now. Management goes to the rock stars for help when something goes wrong. Juniors want to be rock stars. Recruiters and hiring managers sometimes [look for rock star engineers by name](https://www.linkedin.com/jobs/search/?keywords=rock%20star).

So you should strive for this, right?

Wrong. Don’t be like this.

“Rock star” engineering is a terrible anti-pattern. Here are some reasons why:

1. A “rock star” is usually a single point of failure. This is one of the main sub-plots of [_The Phoenix Project_](https://amzn.to/3AoBmzB) (a must-read for anyone interested in DevOps).
2. A “rock star” is egocentric. Good engineering practices don’t care about ego (or blame, for that matter).
3. The existence of a “rock star” is a strong indicator of organizational dysfunction. Environments that encourage stardom generally discourage teamwork (often despite lipservice to the contrary), and tend to undermine any attempts at blame-free failure resolutions.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
백준 10773 제로
Tags: cpp, stack, baekjoon
Published: 2021-07-04 14:54:32

### 1. What I learned
#### &nbsp;&nbsp;&nbsp;&nbsp;a. 입출력 속도 증가
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'ios_base::sync_with_stdio(false)'를 통해 C와 C++의 입출력 동기화를 막고, 'cin.tie(NULL)'을 통해 stream buffer가 자동으로 비워지는 것을 막아서 입출력의 속도를 높인다. 
#### &nbsp;&nbsp;&nbsp;&nbsp;b. accumulate()
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;배열 원소들의 합을 구하기 위해서 사용할 수 있는 함수이다. 이 함수는 'numberic' 헤더 파일 안에 존재하며 매개변수로 (배열의 시작, 배열의 끝,초기값)를 전달해야 한다.   

### 2. Code
```cpp
#include <iostream>
#include <numeric>

using namespace std;

int main(void) {
    ios_base::sync_with_stdio(false);
    cin.tie(NULL);

    int stack[100000] = {0};
    int num_of_line, temp;
    int top = 0, sum = 0;

    cin >> num_of_line;
    for (int i=0 ; i<num_of_line ; i++) {
         cin >> temp;
        if (temp==0 && top>0) {
            stack[top--] = 0;
        }
        else { stack[top++] = temp; }
    }

    sum = accumulate(stack, stack+top, sum);
    cout << sum << '\n';
    return 0;
}
```

### 3. Result
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Runtime : 4 ms, Memory usage : 2288 KB  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Runtime can be different by a system even if it is a same code.)

#### Check out the [my GitHub repo][hyuk-gh] for more info on the code. If you have questions, you can leave a reply on this post.
[hyuk-gh]: https://github.com/dlgur1994/StudyAlgorithms
More efficient ASTC decoding
Tags: opengl, astc, android, optimization
Published: 2021-07-04 16:38:34

This will be a really short but still useful article, explaining a couple lines of code which improve performance on compatible devices.

[ASTC](https://www.khronos.org/opengl/wiki/ASTC_Texture_Compression) is a very efficient texture compression format - it combines decent image quality with high compression. It helps saving a lot of memory bandwidth on modern mobile GPUs.
But can we crank it to 11 and make it run even faster? It appears we can (in certain scenarios and on supported hardware).

ARM Mali GPUs support the extension [GL_EXT_texture_compression_astc_decode_mode](https://www.khronos.org/registry/OpenGL/extensions/EXT/EXT_texture_compression_astc_decode_mode.txt). According to ASTC specifications, even LDR textures are decoded into 16-bit floating point values. This extension provides a possibility to switch the hardware ASTC decoder into faster mode, decoding textures into lower precision normalized 8-bit unsigned integers. This is good enough for most real-life applications, since source textures are usually 24-bit RGB or 32-bit RGBA bitmaps.
Using extension is as simple as adding 1 line of code:

```
GLES30.glTexParameteri(GLES30.GL_TEXTURE_2D, TEXTURE_ASTC_DECODE_PRECISION_EXT, GLES30.GL_RGBA8);
```

Visually there was no image quality degradation, and performance was at the same steady 60 fps. However, looking at certain metrics in the GPU profiler, we can see reduced load on the compressed texture decoder and improved texture cache access.
Here are measurements from ARM Streamline profiler for our [3D Buddha Live Wallpaper](https://play.google.com/store/apps/details?id=org.androidworks.livewallpaperbuddha), taken on mid-range Galaxy A21s phone:

![Performance improvement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhd7zi7faqfre584r1xh.png)

As you can see, this simple trick have noticeably improved texture lookups. As a result, it reduced memory bandwidth usage and device power consumption. So don’t be lazy and if this extension is detected, use it — it’s a minor change to code which gives virtually free performance boost on Mali GPUs.

This optimization was suggested in 3-part ARM webcast “[Optimizing Android Graphics](https://www.brighttalk.com/webcast/17792/475587)” — I highly recommend watching them.
“+” adds as well as concatenates in Python | WHY ?
Tags: python, programming, datascience, codenewbie
Published: 2021-07-04 17:07:36

When “+” is used between two integers, the integers get added and when the same operator is used between two strings, the strings get concatenated as depicted:

![python addition and concatenation via + operator, code snippet no 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3i2ef14piumqfbj95gy.png)

Now what makes these two operations different is the question to answer here. A general answer to the question is that in case of addition the operands are of integer type while in the matter of concatenation both operands are of string type so this is why the same operator behaves differently. 

This is all right but to technically justify and complete the answer one needs to know about the following; **magic methods** and the concept of **syntatic** sugar in programming.

Briefly put, magic methods are special built-in methods of the built-in classes in python. Magic methods start and end with double underscores and these methods aren’t invoked directly by the programmer rather upon a certain action done by programmer these are invoked respectively, for instance _____add_____ method from int class in python. Syntatic sugar refers to making the syntax simplified to use for application programmers.

Both these two concepts combined answer our question. Following snippets will elaborate the difference between earlier showed code snippets:

![python magic method, code snippet no 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3t86te3ru4l9m929gba.png)

![python magic method, code snippet no 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82jpcjm59lj5ugsf8qxq.png)

![code snippet no 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cjvbf7x4h7t1eryqsjs.jpg)

![code snippet no 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mus99kd75i60fjplwsmj.jpg)

![code snippet no 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/is6iaobwoeeeku2omlqi.jpg)


![code snippet no 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cd198zorb9ydnmxocv7g.jpg)

As shown, to illustrate the concept, we’re directly invoking the _____add_____ method from int class for operands addition and _____add_____ method from str class from str class for operands concatenation and it outputs the same result. Hence technically it is showed that when the operands are integers, the + operator will invoke int._____add_____ and when the operands are strings, then str._____add_____ will be invoked by putting + operator which is nothing but the synthetic sugar in play invoking two different methods based on a certain condition.
Creating "Your Camera Gear" with React
Tags: react, javascript
Published: 2021-07-04 20:45:09

It is the end of Module 2/5 on my SWE bootcamp at Flatiron School and it is time to build our own apps with React. The time has come to chose a topic and start building something from scratch.

**Excited and terrified**

Up until this point all the exercises I had worked on came with the basic design already built in and it was just a matter on knowing how to pass props from one component to another, or how to update the State. Once I was asked to build everything from scratch I felt completely lost.

With no time to loose I decided to build and app related to something I'm passionate about, something I enjoy doing on my own. Is then when it hit me. Camera Equipment!! Huge surprise...

I have a lot of camera equipment that I some times buy and sell in order to buy other camera related things. Why not building something that could help me keep track of my purchases?

Once I decided the topic it was time to start building it, but first, I wanted to plan out the entire app on a piece of paper. No surprises this time. No more _build-as-you-go._

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx3dfgikbs8dl4fmxqvd.jpg)


**From ideation to execution**

Ok. I had the idea and I knew what the app would do. I also had a roadmap of how it should look like (kinda...), now I only had to figure out **how to make it work.**
Sure, I had been learning react for the past weeks and I was feeling more and more confident about it, but I had no clue about how to put these concepts into a real life application. 
Having those drawings from the beginning really forced me to push myself to learn how to code it, instead of letting me code something I was already confident about how to build.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4vtxohx304zh7sc6br6.jpg)

**The incredible power of React**

At this point I have been working on _Your Camera Gear_ for two weeks and I am still polishing code and fixing some bugs here and there, but the bulk of the application was made really really quickly. I'd say I was able to put together a semi good looking website within the first two days of working on it. It was already fetching info from my database and displaying it nicely on my homepage, and it had several components built in into the home page and there were a couple of events triggering when clicking in my items.

Not only that, some of the components I had built were very easy to recycle and create new components off of the existing code. It is just a matter of which props they are receiving. Simply amazing.

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


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwg65q5h0fssh8yy2ehq.gif)
Seemingly Subtle Differences: Padding vs. Margin
Tags: css, padding, margin, beginners
Published: 2021-07-05 03:39:55

*TLDR: Margin is outside of border around the content/element; Padding is within border the content/element.*

-----------

If you're like me, your initial foray into development/programming is/was into HTML and CSS. Even now, as I do a lot of JavaScript-based development, the principles I learned then are extremely relevant. (Sure, a lot of this can be attributed to the general importance/power of CSS and JSX being so seemingly similar to HTML, but bear with me.)

Anyway, since I use CSS *literally* all the time, I wanted to take a second to clarify a seemingly subtle (but useful and important) difference that took me a little bit to get back when I was first learning CSS, and that is **the difference between the margin and padding properties**.

Now, this is not terribly complex, but the big thing that you need to remember is that the difference lies in the relation to the content.

If we think about the border around the content as being able to push in or out, the **margin** property has to do with the amount of space would be pushing *out*. You can potentially see the margin property given generally or you can see it broken down into `margin-top`, `margin-right`, `margin-bottom`, `margin-left`. If it is given by itself, and you see a single value listed:
```
margin: 5px;
```
That means that the `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` values are all 5px. If you instead see it with two values:
```
margin: 5px 3px;
```
We read it based on a clockwise motion. So in this case, we would have `margin-top` and `margin-bottom` at 5px and `margin-right` and `margin-left` at 3px. If you see three values:
```
margin: 5px 3px 2px;
```
We still read it based on a clockwise motion and, in this case, we would have `margin-top` at 5px, `margin-right` *and* `margin-left` at 3px, and `margin-bottom` at 2px. If you do see four values though, this is one for each and we *still* read in a clockwise motion:
```
margin: 5px 3px 2px 1px;
```
(`margin-top` at 5px, `margin-right` at 3px, `margin-bottom` at 2px, and `margin-left` at 1px).

----

Now for the **padding** property. If we go back to the pushing in or out idea, the **padding** property has to do with the amount of space would be pushing *in*. **Padding** is the amount of space between the content and its border aka **within the element itself**.

Like with margin, padding can take up to four values and is read in the exact same way (clockwise). But one more difference that is worth mentioning is that, while margin *can* take negative values, padding *cannot* take negative values.

All in all, these are two very important properties to master, as they are super helpful for working out your layout and figuring out spacing on the page. And while the differences may seem subtle, keep them straight and you'll be on your way to some beautiful design work!
Export Multiple Components in Index File
Tags: es6, module, javascript, react
Published: 2021-07-05 06:30:11

## Export Multiple Components

When I structure a React app, I'd like to put the components which are in the same category but with different styles in the same folder. Something like this:

```bash
/- components
	/- Card
		/- CardLeftMedia.js
		/- CardRightMedia.js
		/- CardTopMedia.js
```

So, I need to import & export them in a `index.js` file. Here's the simple solution:

```javascript
// components/Card/index.js

export { default as CardLeftMedia } from "./CardLeftMedia";
export { default as CardRightMedia } from "./CardRightMedia";
export { default as CardTopMedia } from "./CardTopMedia";
```

They're _named exports_, and I import them with curly braces:

```javascript
// pages/Home.js

import { CardLeftMedia } from "../components/Card";
```

## Export One Component as Default

There's another scenario like this:

```bash
/- components
	/- Card
		/- Card.js
		/- Card.module.css
```

To export `Card.js`, I also add an index file:

```javascript
// components/Card/index.js

export { default } import "./Card";
```

It's a default export and I could import it directly:

```javascript
// pages/Home.js

import Card from "../components/Card";
```

---

More information about ES6 modules: [ECMAScript 6 modules: the final syntax](https://2ality.com/2014/09/es6-modules-final.html).
The Temporal Date API
Tags: javascript, news
Published: 2021-07-06 03:25:29

Have you heard of [Temporal](https://github.com/tc39/proposal-temporal)? It's an ECMAScript proposal currently at stage 3. It **'brings a modern date/time API to the ECMAScript language'**:

> `Date` has been a long-standing pain point in `ECMAScript`. This proposes `Temporal`, a global `Object` that acts as a top-level namespace (like `Math`), that brings a modern date/time API to the `ECMAScript` language. For a detailed breakdown of motivations, see: [Fixing JavaScript Date](https://maggiepint.com/2017/04/09/fixing-javascript-date-getting-started/)
>
> Temporal fixes these problems by:
> - Providing easy-to-use APIs for date and time computations
> - First-class support for all time zones, including DST-safe arithmetic
> - Dealing only with objects representing fixed dates and times
> - Parsing a strictly specified string format
> - Supporting non-Gregorian calendars

The whole documentation is [here](https://tc39.es/proposal-temporal/docs/). It seems like a very interesting proposal and this might make libraries like Moment irrelevant.
What is better: in-house mobile app development or outsourcing app development?
Tags: outsourcingappdevelopment
Published: 2021-07-06 05:50:42

The realm of mobile app development has increased by leaps and bounds over the past decade. One of the main reasons behind the proliferation of mobile apps is their flexible nature and their usability. That is why in the present-day business world, it becomes tough to sustain a business without having a mobile app.
https://www.thirdrocktechkno.com/blog/what-is-better-in-house-mobile-app-development-or-outsourcing-app-development/
Fix "Unexpected field" Error From Multer
Tags: node, webdev, programming, beginners
Published: 2021-07-06 16:52:22

Learn how to decypher & fix this cryptic error message from multer, and finally implement working file uploads in Node.js 🎉

🔗 Links from video
Request Parsing in Node.js Guide - https://maximorlov.com/request-parsing-nodejs-guide/

📚 Prefer reading?
Article version - https://maximorlov.com/fix-unexpected-field-error-multer/

👉🏼 Watch more videos like this one on my [YouTube channel 🎥](https://www.youtube.com/maximization)

## Having a hard time implementing file uploads in Node.js? 

Become an expert at handling file uploads with this [FREE reference guide](https://maximorlov.com/request-parsing-nodejs-guide/). Code examples, concise explanations and best practices are waiting for you.
How to Game Dev Metrics w/ Ray Elenteny
Tags: devops, agile, leadership, culture
Published: 2021-07-09 14:52:28

What leads teams to game metrics within their organization?

On this week’s episode of [Dev Interrupted](https://devinterrupted.com/podcast/how-to-game-dev-metrics/), we speak with agile expert Ray Elenteny, Principal Owner at Solutech Consulting, about how people game dev metrics and the underlying issues in culture & leadership that lead to it.

So whether you're trying to game your own metrics (don't do it!) or solve culture issues that have led to this issue at your organization, give this episode a listen.

#**Listen to the full episode**
{% spotify spotify:episode:2AJVkiMHT3Zd4vb3pzLEbs %}

#**Episode Highlights include:**
* Which metrics are easiest to game
* The long-term implications of gaming metrics
* How poor culture and leadership lead engineering teams to game dev metrics

#**Join the Dev Interrupted Discord Server**
With over 1200 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.gg/tpkmwM6c3g)
![Join the Dev Interrupted Discord Community!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19j3dzgz4r4kzav3w6z8.png)
HTML tags | time
Tags: html, tags, time
Published: 2021-07-07 05:32:41

It is used to **define a specific time and date**. It has a `datetime` attribute in which that time and date is indicated as a [valid time string](https://www.w3.org/TR/html51/infrastructure.html#dates-and-times), so that it can be used by browsers to add it to a calendar or by search engines to offer better results.

- Type: *inline*
- Self-closing: *No*
- Semantic value: *Yes*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) | [Support](https://caniuse.com/mdn-html_elements_time)