teleren/devto huggingface dataset:
React Native Calculate View Dimensions dynamically on Button click
Tags: reactnative, android, ios, javascript
Published: 2019-05-29 03:44:40

---
title: React Native Calculate View Dimensions dynamically on Button click
published: true
description: React Native Calculate View Dimensions dynamically on Button click
tags: #reactnative #android #ios #js
---

Source : <a href="https://www.skptricks.com/2019/05/react-native-calculate-view-dimensions-dynamically-on-button-click.html" >React Native Calculate View Dimensions dynamically on Button click </a>

This tutorial explains how can we calculate view dimensions dynamically on button click in react native. This is sometime very important in order to make the user interface responsive with respect to different size of screen. In this example we are using ref attribute in order to get the dimension. Parent view is consist of ref props named as containerView and child view is consist of ref props named as innerView. we are going to calculate the dimensions ( X, Y, Width, Height ) of child view with respect to parent view's dimensions dynamically on button click with the help of measureLayout function.

<a href="https://www.skptricks.com/2019/05/react-native-calculate-view-dimensions-dynamically-on-button-click.html" >React Native Calculate View Dimensions dynamically on Button click </a>


<img src="https://1.bp.blogspot.com/-e0_QAJAIt78/XOu-1Z9X5mI/AAAAAAAAC3k/F3q8kHe1JXsyuBhcUc7aIArjj1cqHS2iACLcBGAs/s400/react-native-calculate-view-dimensions-dynamically-on-button-click.jpg"/>

<a href="https://www.skptricks.com/2019/05/react-native-calculate-view-dimensions-dynamically-on-button-click.html" >Click here to read more...</a>
Review of my first JavaScript code? 
Tags: javascript, beginners
Published: 2019-05-29 03:59:05

Hello to all the devs out there! This is my first post. I saw that there are a lot of awesome devs up here so I was wondering.. could you look over my first JavaScript code? It's hardly anything, just something super basic I made with the things I learned. If there is any way that I could improve my code please let me know. And if there is an easier way to do what I did, I am open and willing to learn. Thank you! 

https://codepen.io/Nova/pen/XwPXOq
React Native convert RGB Color Code to Hexadecimal Code
Tags: reactnative, android, ios, javascript
Published: 2019-05-29 03:46:37

---
title: React Native convert RGB Color Code to Hexadecimal Code
published: true
description: React Native convert RGB Color Code to Hexadecimal Code
tags: #reactnative #android #ios #js
---

Source : <a href="https://www.skptricks.com/2019/05/react-native-convert-rgb-color-code-to-hexadecimal-code.html" >React Native convert RGB Color Code to Hexadecimal Code </a>

This tutorial explains how to convert RGB color code to Hexadecimal code in react native application. Here we are going to provide you complete guide step by step that helps to generate hexadecimal code from RGB color code.

<a href="https://www.skptricks.com/2019/05/react-native-convert-rgb-color-code-to-hexadecimal-code.html" >React Native convert RGB Color Code to Hexadecimal Code </a>

<img src="https://1.bp.blogspot.com/-y3U1Arw_rHo/XOyzxAixW8I/AAAAAAAAC34/_M85_nR1pRQjFQ2uIVu4LfOblELF73ncQCLcBGAs/s400/react-native-convert-rgb-color-code-to-hexadecimal-code.jpg" />

<a href="https://www.skptricks.com/2019/05/react-native-convert-rgb-color-code-to-hexadecimal-code.html" >Click here to read more...</a>
Font size detective
Tags: bookmarklet, javascript, css, fonts
Published: 2019-05-29 01:16:59

---
title: Font size detective
published: true
description: JavaScript bookmarklet to detect the number of font sizes used on a website.
tags: bookmarklet, javascript, css, fonts
cover_image: https://thepracticaldev.s3.amazonaws.com/i/d4gwz0vadxju6x927rj5.png
---

It is easy to use too many font sizes on a website.
Especially when using <code>em</code> font sizes as these are relative to their parent.

I wanted an easy way to see the number of font sizes used on a website.
I created this JavaScript bookmarklet.

![](https://thepracticaldev.s3.amazonaws.com/i/1jhr3t48vq66vg1b9klj.jpg)

To use:
1. Add a new bookmark in your browser
2. Paste the below code into the URL
3. Go to a website and click the bookmark link

{% gist https://gist.github.com/n8kowald/c653da7ecc927b7fd42f62dd6053bc63 %}
DEV3L on Complex Adaptive Systems by Dave Snowden
Tags: complex, agile, cynefin
Published: 2019-05-29 01:13:20

---
title: DEV3L on Complex Adaptive Systems by Dave Snowden
published: true
description: Elegant metaphors help us understand the common misunderstanding of the word 'complex' (cynefin) in reference to a system.
tags: complex, agile, cynefin
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9enf8hamd1vn5oa0e2zx.png
---

Dave tries to help his audience understand how to operate with a new perspective when interacting with systems that are not ordered, cannot be ordered. Software development is an example of a Complex Adaptive System. Elegant metaphors help us understand the common misunderstanding of the word `complex` (cynefin) in reference to a system.

He provides some thoughts on how to navigate to more desirable outcomes: Enabling new perspectives and thinking, first mover exaptation, shifting to adjacent possibilities, ubiquitous language, design for failure + serendipity + unarticulated needs, an appreciation for chef, procrastination, and luck.

{% youtube l4-vpegxYPg %}

---

Active Listening Notes

```
Complex Adaptive Systems 

New Ways of Thinking
- Thoughts on language

Methods elevated to the religion
- There are no recipes

Recipe book user versus Chef
- more chefs

We do not see, what we do not intend to see
Survivor of the luckiest - not fittest
Exaptation moments of radical repurposing
- first mover advantage by repurposing existing technology for novel purpose

Design for serendipity
Design for unarticulated needs

The nature of a complex system is that it always fails
- design for early failure
- only through early failure can you discover what is possible

Complexity - most misused word

Ordered / Chaotic / Complex
- ordered, not natural (linear causality)
- chaotic, without constraint
- complex, enabling constraints (no causality)

Dispositionality - science of inherent uncertainty
- try to project manage a children's party

Change ritual to engage in different cognitive activation pattern
= Radiologist missing Harambe (gorilla) in lung scans

No timesheet at IBM for 7 years : wow
Alcohol coffee cycle critical for software development
Socratic method, leads to hemlock

Small safe to fail experiments on coherent arguments/ideas
Analyze a complex system by interacting with it, not through modeling or analysis

Cynefin
- obvious
- complicated
- chaos
 - *starvation, pressure perspective* -- **innovation**
- complex

People respond to novelty
Last responsible moment


Art is critical to human invention
We learned to paint, before we learned to speak (as a species)
Art comes before language in human evolution

Distribute cognitive functions in complex systems
Shifting to an adjacent possible
```
Higher Order Components In Javascript / Typescript
Tags: javascript, typescript, hoc
Published: 2019-06-01 23:33:05

---
title: Higher Order Components In Javascript / Typescript
published: true
tags: javascript, typescript, hoc,
canonical_url: https://stephencharlesweiss.com/2019-05-29/higher-order-component-in-typescript/
---

Imagine you have a prop that you want to be passed all the way through to the DOM. If you try and pass through a prop that isn’t semantically correct (i.e. doesn’t use “kebab-case”), React will yell at you.

One way to handle that is to use a Higher Order Component (HOC). HOCs are components that return a component. Another way to think about them are as “wrappers” - so that’s what I’m going to call mine here.

Let’s look at an example where we use an HOC, `Wrapper`, to look at the props being passed in and determine what to do.

```
import React from 'react';
import PropTypes from 'prop-types';

export type WrapperProps = { special-prop?: string; specialProp?: string };
const Wrapper = <P extends WrapperProps>(WrappedComponent: React.ComponentType<P>): React.FunctionComponent<P> => {
    const Wrapper = (props: P) => {
        return <WrappedComponent data-special-prop={props['special-prop'] || props.specialProp} {...props} />;
    };
};

export default Wrapper;
```

The nice part about this is that if neither `’special-prop'` nor `specialProp` exists, `data-special-prop` is not passed through.

Sometimes it’s not about props but a different behavior contingent on the presence of a particular prop (or set of props).

Let’s take a case where if we have a `specialProp` we want to make the background pink.

```
import React from 'react';

export type ConditionalWrapperProps = { specialProp?: string };
const Wrapper = <P extends WrapperProps>(WrappedComponent: React.ComponentType<P>): React.FunctionComponent<P> => {
    const Wrapper = (props: P) => {
        return (
          specialProp ? (
            <div style={{background: 'pink'}}>
              <WrappedComponent {...props.style} {...props} />
            </div> )
          : <WrappedComponent {...props.style} {...props} />
    };
};

export default Wrapper;
```

# Using The HOC

Now that we’ve defined HOCs, we have to use them.

In our case, we’ve saved the HOC to a file in the same directory, `higher-order-components.tsx`.

We can import that module and use it as a wrapper around another component, so that whenever we call `MyComponent`, we pass it through the `Wrapper` (notice the last line).

```
import React from 'react'
import Wrapper from './higher-order-components'

const MyComponent = () => {
  ;<React.Fragment>...</React.Fragment>
}
export default Wrapper(MyComponent)
```
Lets Talk About Logs
Tags: discuss
Published: 2019-05-28 22:56:31

Here are few things you could share and or discuss.

What kind of logs do you spit out (INFO , ERROR only)? 

Are all your logs worth consuming and if so, why?

What are some success stories you have about logging? 

*Example: An app was spitting out 5gb of worthless logs, you code it in a way that it only produced what is really important.*

What are some cool things you can do with logs you get from xyz resource? 

*Example: Your logs are some metrics, and you created an outlier where if threshold hits 10% than from previous hour?*
ARM – Part 3: Hook up the Pipes
Tags: devops, arm, armtemplates, azure
Published: 2020-01-28 20:49:39

---
title: ARM – Part 3: Hook up the Pipes
published: true
date: 2019-05-28 22:30:31 UTC
tags: DevOps,arm,arm templates,azure
canonical_url: https://chrislayers.com/2019/05/28/arm-part-3-hook-up-the-pipes/
---

I’ve got a template straight from Microsoft. I want this wired into a CI/CD pipeline to I can play around and get quick feedback. I’m going to use Azure DevOps to help make all this possible. Let’s get those templates into a repo to get started. New repo, initialize it, add new files.

![](https://chrislayers.files.wordpress.com/2019/05/repoimport.png?w=936)

Next, I’m going to create a new resource group to play around with my web app resources.

![](https://chrislayers.files.wordpress.com/2019/05/newresourcegroup-3.png?w=936)

Now we need to make sure DevOps has permission to create and update resources in Azure. This can be done in a few different ways as described here: [https://docs.microsoft.com/en-us/azure/devops/pipelines/library/connect-to-azure?view=azure-devops](https://docs.microsoft.com/en-us/azure/devops/pipelines/library/connect-to-azure?view=azure-devops)

I’m going to setup a service connection from DevOps to Azure. In Azure Devops, I’m going to go to my project settings:

![](https://chrislayers.files.wordpress.com/2019/05/projectsettings.png?w=1024)

And go to Service Connections:

![](https://chrislayers.files.wordpress.com/2019/05/serviceconnections.png?w=1024)

We’ll create a new Azure Resource Manager service connection.

![](https://chrislayers.files.wordpress.com/2019/05/serviceconnectionarm.png?w=1024)

We just need to pick the right Subscription, Sign in, and point it at our resource group. There are more complex setups, and we’ll get into those in the future, but for now we’ll just point it at that resource group I created earlier. Now for this to work properly, you have to be able to grant rights to the connector.

![](https://chrislayers.files.wordpress.com/2019/05/serviceconnectionarm2-4.png?w=1024)

Now we’ve got a connector to deploy to Azure. We’ll finish this up next time.
Why wouldn't you use a graphical/visual programming language for backend services?
Tags: discuss, visual, programming, language
Published: 2019-05-28 22:10:08

---
title: Why wouldn't you use a graphical/visual programming language for backend services?
published: true
description: This post is about starting a discussion around why developers wouldn't use a graphical/visual programming language, especially for backend services.
tags: Discussion, Visual, Programming, Language
---
This post is about starting a discussion around why developers wouldn't use a graphical/visual programming language, especially for backend services. By graphical programming, it is meant to use blocks of code recipes (ready to use configurable components) to compose a service (business logic unit). Example: [input parsing] -> [input validation] -> [Third party api];
So, why wouldn't you? Let's hear them.
Is there a science to software development?
Tags: discuss, career, productivity, video
Published: 2019-05-28 21:32:07

---
title: Is there a science to software development?
published: true
description:
tags: discuss,career,productivity,video
---

Is there any science to software development?

What's the root of elitism in the software industry?

In this video I discuss how I'd answer these questions, prompted by this comment and article.

{% devcomment b5nf %}


{% link https://dev.to/badrecordlength/the-elitist-developer-debacle-10hh %}
Staying motivated...😕😲
Tags: discuss, programming, javascript
Published: 2019-05-28 21:19:05

---
title: Staying motivated...😕😲
published: true
tags: discuss, programming, javascript
---

How does one stay motivated when working on a project or when learning a given programming concept?

I'm open to hearing your thoughts on how to improve one's resilience through this learning process😁🤔
What makes a good hackathon?
Tags: discuss, hackathon
Published: 2019-05-28 21:05:03

---
title: What makes a good hackathon?
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9k031jam5s0b1s3k2vem.jpg
published: true
description: 
tags: #discuss #hackathon
---

When you go to a hackathon what things make or break the experience for you?
Document is editable in RealTime using CSS 
Tags: css, webdev
Published: 2019-05-28 20:45:53

---
title: Document is editable in RealTime using CSS 
published: true
description: Document is editable in RealTime using CSS 
tags: css, webdev
cover_url: https://thepracticaldev.s3.amazonaws.com/i/vgsbeuv35g6xecs32ixi.gif
---

The other day reading my twitter timeline I found a trick by an authentic CSS wizard that left me impressed.

The tweet is in Spanish but I have to admit that he deserves a retweet for us and he will surely be a great professional to follow (although he writes in Spanish).

I leave an animation of what he can teach us modifying a simple property of CSS:


![](https://thepracticaldev.s3.amazonaws.com/i/vgsbeuv35g6xecs32ixi.gif)

> document.designMode controls whether the entire document is editable. Valid values are "on" and "off". According to the specification, this property is meant to default to "off". Firefox follows this standard. The earlier versions of Chrome and IE default to "inherit". Starting in Chrome 43, the default is "off" and "inherit" is no longer supported. In IE6-10, the value is capitalized. - MDN (https://developer.mozilla.org/en-US/docs/Web/API/Document/designMode)


Thanks to [@midudev](https://twitter.com/midudev).

*Originally published at https://twitter.com/midudev/status/1132918283332706304.*
Handling Authentication in React with Context and Hooks
Tags: react, javascript, hooks, authentication
Published: 2019-05-28 20:28:48

---
title: Handling Authentication in React with Context and Hooks
published: true
description: Learn how to handle identity management in React by creating a global state for your authentication details with Context and update these details with Hooks.
tags: #reactjs #javascript #hooks #authentication
canonical_url: https://auth0.com/blog/handling-authentication-in-react-with-context-and-hooks/
---

Identity management in React can be quite confusing because there are multiple ways you can handle the user sessions in your application. This tutorial will show how you can handle identity management in React by creating a global state for your authentication details with Context and update these details with Hooks.

[Read on ⚛️](https://auth0.com/blog/handling-authentication-in-react-with-context-and-hooks/?utm_source=dev&utm_medium=sc&utm_campaign=auth_reactcontexthooks)

![Handling Authentication in React with Context and Hooks](https://cdn.auth0.com/blog/illustrations/react.png)
Micropost: Encrypted messages to my future self
Tags: javascript
Published: 2019-05-28 20:09:40

---
title: Micropost: Encrypted messages to my future self
published: true
description: I wrote a letter to my future self 2 years ago, containing encrypted messages.
tags: javascript
---

Two years ago, when I was still in school, I wrote a letter to my future self (it was a school project). It contained a few encrypted messages, so that my present me could do a fun exercise now.

The message was encrypted using [Caesar Cipher](https://en.wikipedia.org/wiki/Caesar_cipher), which just increases every letter by a specified number, producing unreadable text (I mean, you could also decrypt this in your head by just looking at the the text for some time, but this way it's more fun).

Turns out out it was a really fun 10 min coding challenge. I should do more of them as I often tend to forget *how much fun* programming actually is and always was.

Maybe this was the most important message to my future self: **Never stop enjoy coding.**

Here is the code needed to decrypt a Caesar encrypted message using brute force.
{% gist https://gist.github.com/scriptify/29a0de5a0b4a73b6b9708a2fcbcf857b %}
Getting started with PHP for web development
Tags: php, beginners
Published: 2019-05-28 19:41:33

PHP is a serverside scripting language, it is a very powerful language for making dynamic and interactive web pages. Php is free, robust and easy to learn for a beginner and it is supported most of the web servers. it is an efficient alternative to competitors like Microsoft's ASP.net and others. 
 To get started with PHP, it is expected you understand how the web works and the way the web page is structured and designed ( knowledge of Html & CSS). then to start using PHP, you can either find a web host on the web with PHP and MySQL support and start coding online or you can install a web server locally on your pc and then install PHP and MySQL on it. the later is easier to set-up as the whole package is bundled as Wamp  for windows OS or Xamp which is available on all Operating system (cross-platform)
What is your favorite headphones to use while coding? 
Tags: discuss, productivity
Published: 2019-05-28 18:32:33

---
title: What is your favorite headphones to use while coding? 
published: true
tags: discuss, productivity
---

We often work in open work environment, so headphones are a necessity. Even if you work remotely from home, headphones still helps a lot. 

So what is the favorite ones that you use? Did you do some research?
Chrome DevTools: Detecting Element Changes
Tags: googlechrome, devtools, chromedevtools, debugging
Published: 2019-05-28 18:31:26

---
title: Chrome DevTools: Detecting Element Changes
published: true
description: Using Chrome Dev tools to detect element changes in the DOM while debugging UI change side-effects.
tags: Google Chrome, Dev Tools, Chrome Devtools, Debugging
---

Google chrome comes with a lot of handy tools to assist web developers in building a better experience for users/customers. And it has added numerous features over the last few years, forcing other browsers to follow the same path.

This article will talk about how one can detect changes on elements in the DOM during runtime, primarily for debugging. This is the first in a series of posts covering useful tools of Chrome Dev tools.

# Elements Panel

Elements panel, as you know, is the place where you can see the elements that are currently available in the DOM (Document Object Modal).

Chrome allows to listen to three specific events that occur to an element in the DOM tree.

- Add/Update of an attribute value
- Change in the element's children (subtree)
- Removal of node (child elements)

## How to add listeners?

Open the Dev Tools and select the Elements tab. In the list of DOM nodes, select the node on which you need to add listener.

Once the node is selected, a three-dot menu will appear on the left of the node. Clicking on the dots will open a context menu with a bunch of options.

![](https://thepracticaldev.s3.amazonaws.com/i/s6rcq8803jaj2n7l5j69.png)

Now, for adding the listener, Select the "Break on" option and then the type of event. Once selected, chrome will listen to changes to that particular element and stop JS execution at the line of code which modifies the selected node.

Once the breakpoint is hit, you will get to see all the contextual information and memory snapshot, which can be used in identifying the issue source.


_Preview (breaking on subtree modification):_
{% youtube WfWj3qzwJ1Y %}


If you want to try it out yourself, head over to the repo below. It has the file that is shown in the Video. Clone the repo and play around :)

{% github apvarun/learndevtools %}

**Direct Link:** [Lessons: Detecting Element Updates](https://learndevtools.now.sh/docs/guides/elements/2.-detecting-element-updates/)
Face Detection with Python
Tags: python, facedetection
Published: 2019-05-28 18:27:03

---
title: Face Detection with Python
published: true
description: python, face detection
tags: python, face detection
---
<img src="https://pythonbasics.org/wp-content/uploads/2019/03/face.png" alt="face detection">

You can detect faces using Python. These faces can be in a still image, video or web cam feed.

All of this can be done with only a few lines of code!

The method used here uses Machine Learning. Machine Learning is a part of Artificial Intelligence, that uses data to make new predictions.

In this case you want to predict if there's a face in the image.

## Getting started

You will need Python 3.x and OpenCV 2 installed. You'll also need a cascade file, which OpenCV uses to detect faces.

OpenCV can be installed with the Python package manager:

    pip3 install opencv-python

You'll also need the runtime opencv package.

Face detection uses the machine learning approach: given statistical examples, predict if there is a face in the image.

Read more: <a href="https://pythonbasics.org/face-detection/">https://pythonbasics.org/face-detection/</a>
The Tech Lead
Tags: management
Published: 2019-05-28 18:25:06

https://www.codementor.io/npostolovski/8-tips-for-being-a-good-tech-lead-ke35g7em8#2-dont-code-full-time-but-dont-stop-coding-completely

People often become tech leads because they are a productive member of the team, able to churn out good quality code exceptionally quickly. The tendency is to operate in the same manner in the role of tech lead, not realizing that you may be maximizing your individual productivity at the expense of your team’s productivity.

![](https://thepracticaldev.s3.amazonaws.com/i/nmkivrm1usex532sgkyn.PNG)