teleren/devto huggingface dataset:
How to use jest-emotion and Enzyme to test Emotion Component Styling
Tags: react, testing, jest, enzyme
Published: 2020-08-11 06:24:10

[Emotion](https://emotion.sh/docs/introduction) is a powerful CSS-in-JS library. In this article, we will see how to start testing components' style when using emotion with React.

> Note: 
> Using Emotion 10, React > 16.3., Enzyme v3.x


## Adding Enzyme to Project
```
yarn add enzyme enzyme-adapter-react-16
```
Alternatively, you may use npm:
```
npm install enzyme enzyme-adapter-react-16
```

As of Enzyme 3, you will need to install Enzyme along with an Adapter corresponding to the version of React we are using. (Here we use the adapter for React 16)

The adapter will also need to be configured before testing case. 

**src/example.test.js**
```
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });
```

## Adding jest-emotion
Jest-emotion is a Jest testing utilities for emotion. It allows us to add specific matchers to our test case.
```
yarn add install jest-emotion
```
## Testing Functional Component
**src/example.js**
```javascript
import React from 'react'
import {css} from 'emotion'

function Example(props){
    const {type} = props
    let color;
     switch (type) {
        case 'csv':
            color = '#ffc307';
            break;
        case 'json':
            color = '#00adef';
            break;
    }
    
    return <div style={{backgroundColor:`${color}`}}>{type}</div> 
}

export default Example
```

In this case, we want to check the background-color style based on props.

## Writing test cases
Here we need `toHaveStyleRule` matcher from jest-emotion to find the style rule of components.

**src/example.test.js**
```javascript
import React from 'react'
import { configure, shallow } from 'enzyme'
import { matchers } from 'jest-emotion'
import Adapter from 'enzyme-adapter-react-16'
import Example from './Example'

configure({adapter: new Adapter()})
expect.extend(matchers)

describe('test Example component',()=>{
    it('background color is #ffc307 and text is csv when props type is csv',()=>{
        const formatType = 'csv'
        const wrapper = shallow(<Example type={formatType}/>)
        expect(wrapper.text()).toEqual('csv')
        expect(wrapper).toHaveStyleRule('background-color','#ffc307')
    })
    
     it('background color is #00adef and text is json when format type is json',()=>{
        const formatType = 'json'
        const wrapper = shallow(<Example type={formatType}/>)
        expect(wrapper.text()).toEqual('json')
        expect(wrapper).toHaveStyleRule('background-color','#00adef')
    })
})
```
7 Libros para programadores
Tags: books, productivity, developer
Published: 2020-08-11 06:20:59

A continuación te presento un artículo con los libros que creo todo programador debe leer. 

[7 libros de programación que debes leer](https://webdeveloperhints.com/posts/7-libros-de-programacion-que-debes-leer/)

{% twitter 1293069037463797760 %}
AI should help early in digitization of public health (e.g. ICD-10)
Tags: health, ai, nlp, opencv
Published: 2020-08-11 06:16:39

I am thinking of what health statisticians would do with ICD10 and related health data. I have seen many talks on [Speech Recognition](https://pypi.org/project/SpeechRecognition/), and digitization of patient's health documents; but I think we can go much further than that.

This is partly that I have heard about [OpenAI's GPT-3](https://lacker.io/ai/2020/07/06/giving-gpt-3-a-turing-test.html).

## Current system is not ideal

Currently, in Thailand, as a physician in a **small** hospital, I am using [HosXP](https://hosxp.net/joomla25/), and there are several problems

- Diagnoses with ICD-10 in outpatients are not accurate and sometimes misleading
  - Not sure if it is always possible to differentiate between new and old patients. -- It is quite accurate in some diseases (e.g. MI, stroke), but not all (e.g. TB (which part of [SIR model](https://en.wikipedia.org/wiki/Compartmental_models_in_epidemiology)?)).
- Health care workers (HCW) might need both attention and training to use the program accurately, but can't that be easily fixed with AI?
- Not to mention that HosXP is usually detached from several others, e.g. Synapse (X-ray) or INFINITT (X-ray)
- What about the possibility of [Patient Health Record](https://en.wikipedia.org/wiki/Personal_health_record) syncing, from private hospitals (including paper files)?

## AI can help in more data collection, and beyond ICD-10

- Not all data has to be keyed in. Some data may come from analysis. **This should be done early on**, as if the input data is not accurate or enough, it can be corrected. (**Garbage-in, Garbage-out.**)
- Also, data cleaning is not fun.

## Warning systems and computer-guided recommendations can only be made if computer can make sense of the data

- For scanned documents, this can be fixed with [Optical character recognition (OCR)](https://en.wikipedia.org/wiki/Optical_character_recognition), [natural language processing (NLP)](https://en.wikipedia.org/wiki/Natural_language_processing), and [computer vision](https://en.wikipedia.org/wiki/Computer_vision).
- For talked advice, and perhaps speech recognition conveniences (e.g. Siri), this can be digitized with [Speech recognition](https://en.wikipedia.org/wiki/Speech_recognition). Some notifications should be done if error was made.

## Caution

- I don't think handwriting recognition reliable enough, it should always be proved with human (the writer himself); or avoid it in the first place (type-in, rather than write).
- **Hand-drawings shouldn't be sacrificed**. Instead, they should be scanned, and made sense with computer vision.

## Conclusion

First and foremost, I am talking about **accuracy of data, and early warning**. I don't meant to [infringe on anyone's privacy](https://en.wikipedia.org/wiki/Data_sharing). Of course, that should be carefully thought about, including opt-in / opt-out.
How to Use “BITAND Function” in Excel 365? – { with Examples }
Tags: bitandfunctioninexce, excelfunctions
Published: 2020-08-13 04:12:17

---
title: How to Use “BITAND Function” in Excel 365? – { with Examples }
published: true
date: 2020-08-11 06:13:50 UTC
tags: BITANDFunctioninExce,ExcelFunctions
canonical_url: https://geekexcel.com/how-to-use-bitand-function-in-excel-365-with-examples/
---

## BITAND Function in Excel:

In this article, we have illustrated the usage of **BINAND function** in Excel 365 with its syntax, description, and examples. Let’s get into this article!!


## BITAND – Function Definition:

- This function is used to find **Bitwise AND** of two numbers. Returns the output as a decimal value.
- Bitwise AND is a special kind of operator. It will not work like a normal AND operator. It will find the **logical**  **relationship** between the individual bits.

## Syntax:

**=BITAND(number 1, number 2)**

### Syntax Explanation:

**Number 1 and Number 2** – Both the parameters are should be represented in the decimal form that is equal to or greater than 0.

### **Note:**

- If any argument you have given is less than 0, it will return **#NUM!** Error value.
- If you give any of the arguments as non-numeric value ( **Letters and Special characters** ), it will return **#VALUE!** Error.

## Examples:

Let’s see some examples of the BITAND function and know how it works.

### Example 1: Bitwise AND of two numbers

- Refer to the below example.
- Here, we have calculated the Bitwise AND of two decimal numbers ( **C2 AND C3** ) and get the result in the active cell **C4**.

![Example 1](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/08/1-15.png)<figcaption id="caption-attachment-11535">Example 1</figcaption>

- If any argument you have given is less than 0, it will return **#NUM!** Error value.

![](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/08/2-13.png)

- If you give any of the arguments as non-numeric value, it will return **#VALUE!** Error.

![](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/08/3-12.png)

## Wrap-Up:

In this article, you can understand the usage of the **BITAND function in Excel** 365 with its syntax, explanation, and examples. Drop your **feedback** in the comment section. Thanks for visiting **[Geek Excel.](https://geekexcel.com/)** Keep Learning!!

### Read Also:

- [How to Use BIN2DEC Function in Excel 365? (With Examples)](https://geekexcel.com/how-to-use-bin2dec-function-in-excel-365-with-examples/)
- [How to use FIND Function in Microsoft Excel 365?](https://geekexcel.com/how-to-use-find-function-in-microsoft-excel-365/)
Children's Book Illustrator Portfolio
Tags: illustration, books
Published: 2020-08-11 05:52:03

All illustrations work is not the same as doing illustrations for children’s books. You might be good at making advertisement illustrations but it does not necessarily mean that you will do well in making illustrations for children’s books as well. To <a href="https://www.childbookillustrations.com/illustration-portfolio/">illustrate a children’s book</a>, you don’t just need to make a beautiful artwork but also narrate the story through it and make expressive and sequential illustrations. Once you have decided to become a children’s book illustrator, the next most important step if creating your children’s book illustration portfolio
We will give you some tips here on how to create your online illustration portfolio.

<strong>What to put in your children’s book illustration portfolio?</strong>

• Having a variety of children book illustration styles in your portfolio is very important as it gives the authors/publishers to look at the range of skill set you have and showcases your ability to work on various genres of children book stories. 
• Your portfolio should have illustrations from real books, or if you are new have illustrations done for creating imaginary characters and setups. 
• Don’t worry about the tends, if digital is more popular or traditional. Go ahead and make the illustrations as per your skill set, make the ones you are best at. 
• Your portfolio should never have an illustration with which you are not completely satisfied. Follow the old saying: your portfolio is only as good as the worst piece in it! Put your best children’s book illustrations in your portfolio. Always prefer quality over quantity.
• It’s a good idea to not just have a variety of styles but also a variety of objects/scenarios in your book. Like if you have done some books on dog, it will not be good to put more and more dog images in your portfolio rather, put illustrations done on other subjects. Some common categories for children’s books are: Fantasy, Animals, Kids, Multi-cultural, Family, Abuse, Loss-Grief, Seasons, Nature, Earth, Underwater, Moon, farm and many more
• Children’s books are also about expressions. Since expressions are the life if children’s book illustrations, show a variety of expressions of the same characters you did. 
• Adding some text along with your illustrations do add the narration to the illustration and the author is able to understand your skill and creativity better.
• Make sure you organize your portfolio in pages or folders for the ease if viewing. 
• Also, to give a complete idea to the authors/ publishers, add variety of sizes of illustrations like half page with text- full page illustrations, spread illustrations or small spot/ vignette illustrations.
• Keep updating your portfolio and make sure you remove the old ones because adding more and more number can become very difficult for your audience to browse. Also, your style will keep on evolving with your experience, so its best to keep the latest and the best ones.
CSS Telephone Booth
Tags: codepen, css
Published: 2020-08-11 05:43:11

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

<p>This drawing in particular really opened my eyes to how much I use basic shapes in CSS art. When I say <i>basic shapes</i>, I'm talkin squares, rectangles, circles, ovals, triangles, lines. Utilizing your tool belt of shapes allows for some really cool CSS art! If you practice using these shapes with `box-shadow`, `linear-gradient` and some other cool tricks, you can recreate any picture on the web using CSS and a bit of markup!</p> 

## Creating CSS art takes time
Remember creating these illustrations <b>takes time</b>. Some of the basic drawings might only require a couple hours of work, but as you move into more complex replications and drawings, it can take many hours if not days to perfect. I didn't say it would happen overnight.

But the feeling of accomplishment after finishing a CSS drawing is unrivaled.

## Where to look for images
<p>When I'm looking for a new css art idea, I start by searching for images online. Usually by typing in the keyword (ie telephone booth) and saving 3-5 images that I wanted to <i>stare</i> at for a few minutes each before deciding which made the most sense in my head to start making.</p>

<p>I also look for things to make with CSS over on <a href="https://dribbble.com">dribbble</a>. I found the <a href="https://dribbble.com/shots/11454238-Telephone-London">red telephone booth</a> which is the topic of this post on dribbble.</p>

{% codepen https://codepen.io/tannerdolby/pen/JjXYPQL %}

## Want to learn more?
CSS art has turned into a hobby of mine and I can attribute essentially all of the skills I've learned from this article: <a href="https://hacks.mozilla.org/2014/09/single-div-drawings-with-css/">Single Div Drawings</a> by <a href="https://twitter.com/lynnandtonic">Lynn Fisher</a>.
JavaScript Event Delegation
Tags: javascript
Published: 2020-08-11 05:41:43

Event delegation is a simple and powerful pattern for event handling. Consider the following situation. You have an image gallery with  `n`  number of images in it, something like this:

```xml
<div id="gallery-container">
   <img src="https://source.unsplash.com/100x100/?person" alt="Person" />
   <img src="https://source.unsplash.com/100x100/?woman" alt="Woman" />
   <img src="https://source.unsplash.com/100x100/?man" alt="Man" />
   <img src="https://source.unsplash.com/100x100/?camera" alt="Camera" />
   <img src="https://source.unsplash.com/100x100/?television" alt="TV" />
</div>
<div id="image-description"></div>
```

You have a simple task – show an image description (the value of the  `alt`  attribute) every time a user clicks on one of the images. Inject the correct image description to the  `div`  with the  `image-description`  id.

Now, there are a few ways you could attach event listeners to your images. You could wait for DOM load and then,  `forEach`  on your images. But what happens if you load more images to your gallery container? Will you  `foreEach`  again!?

Event delegation is all about finding a common ancestor, a kind of stable point of reference. In our example, all the images are contained inside the gallery container. So, we can attach an event handler on the container and dispatch the correct functionality relative to our  `event.target`. This is how I would solve the gallery situation with event delegation:

```javascript
// DOM Elements
const $galleryContainer = document.getElementById("gallery-container");
const $imageDescription = document.getElementById("image-description");

// Functions
const showImageDescription = () => {
  // Check if image has alt attribute
  if (event.target.hasAttribute("alt")) {
    //  Check if alt attribute is not empty
    const imageDescription = event.target.getAttribute("alt");
    if (imageDescription) {
      $imageDescription.innerText = imageDescription;
    } else {
      $imageDescription.innerText = "No Description Found!";
    }
  }
};

// Event Listeners
$galleryContainer.addEventListener("click", showImageDescription);
```
✍ This post was originally published on my blog, for more js posts:
[https://yossiabramov.com/](https://yossiabramov.com/)
New Journey
Tags: writing, webdev
Published: 2020-08-11 05:21:59

Hello, my name is Miguel T Rivera. I’m a self-taught developer going through the freeCodeCamp program. This will be my first foray into blogging. Some of the material that will makeup my posts:

* React Native: I plan to create a mobile app for my mom. I’m still not sure this is the best solution, but I want to see it through.

* Python / Go: I want to learn another language for back-end development. I still plan to build with Node.js, but would like to have another option. Both have pros/cons but will focus on one near the end of the month.

* freeCodeCamp: I’m going through the curriculum, currently at the *Quality Assurance Projects* section.

* Much more

My goal is to reinforce my learning and show my voice to prospective employers. I plan to post every Monday but may post at other times as needed. I hope you can take away something from my posts as I start this new journey.

*Photo by Simon Matzinger from Pexels*
How to use FontAwesome Icons in React App without using npm/yarn package?
Tags: react, javascript, fontawesomeicons, icons
Published: 2020-08-11 05:19:47

{% youtube 5ceGGY-oFJ0 %}

In case you are looking to include the font awesome library without having to do module imports and npm installs then put the SDK in `public html` head section like this :

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <script
    src="https://kit.fontawesome.com/fc31dedf63.js"
    crossorigin="anonymous"
  ></script>
```


And use fontawesome class as you do without react but instead of `class = "fa fa-home"`, write `className = "fa fa-home"`
Example: 
```
<div className = "sidebar__menus">
<a className = " fa fa-home"  href = "#">
{view && view.menuheadings.fields.home}</a>
</div>
```

##### For more clarity watch the video
Stack overflow link: https://stackoverflow.com/questions/23116591/how-to-include-a-font-awesome-icon-in-reacts-render
How to Use BIN2OCT Function in Microsoft Excel 365? – With Examples
Tags: bin2octfunctioninexc, excelfunctions
Published: 2020-08-11 06:04:48

---
title: How to Use BIN2OCT Function in Microsoft Excel 365? – With Examples
published: true
date: 2020-08-11 05:11:14 UTC
tags: BIN2OCTFunctioninExc,ExcelFunctions
canonical_url: https://geekexcel.com/how-to-use-bin2oct-function-in-microsoft-excel-365-with-examples/
---

## BIN2OCT Function in Excel:

In this article, you will learn the usage of **BIN2OCT function in Excel** 365. This function is used to convert the binary values into octal values. Let’s see the syntax and its description with examples.

## BIN2OCT – Function Description:

- This function will **convert the binary numbers to Octal numbers**.
- If the binary number contains more than 10 characters, it will return **#NUM!** Error Value.
- If you give the invalid binary number, it will show the **#NUM!** Error.

## Basic Syntax:

**=BIN2OCT(number, [places])**

### Argument Explanation:

- **Number** – The binary number that you want to convert into octal number.
- **Places** – It is optional. If the places are not given, it will return the exact octal equivalent of the input number. It is used for padding the leading zeros to the returning value.

### Note:

- If places is not an integer, it will return **#VALUE!** Error.
- If you give any non-numeric numbers in the places argument, it will return **#VALUE!** Error.
- In case, if you give a negative value to places, it will return **#NUM!** Error value.

## Examples:

Here we come up with some examples to make it clear.

### Example 1: Binary to Octal Conversion

- Refer to the below example image.
- We have given binary values in **Column A**. The result is placed in **Column B**. we can see the formula of the active cell in the formula bar like below.

![Binary to Octal Conversion](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/08/1-14.png)<figcaption id="caption-attachment-11522">Binary to Octal Conversion</figcaption>

- If you give any negative number in the places argument, it will show #NUM! Error value as below.

![](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/08/2-12.png)

- If you give any non-numeric numbers ( **letters and special characters** ) in the places argument, it will return **#VALUE!** Error.

![](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/08/3-11.png)

## Bottom-Line:

In the above article, you can clearly understand the usage of **BIN2OCT function in Excel** 365 with the clear-cut examples. Share your **queries/suggestions** in the comment section. Thanks for visiting **[Geek Excel.](https://geekexcel.com/)** Keep Learning!!

### Read Also:

- [Use N Function in Microsoft Excel 365 -Simple methods!](https://geekexcel.com/use-n-function-in-microsoft-excel-365-simple-methods/)
- [How to Use PHONETIC Function in Microsoft Excel 365?](https://geekexcel.com/how-to-use-phonetic-function-in-microsoft-excel-365/)
- [How to Use BAHTTEXT Function in Microsoft Excel 365?](https://geekexcel.com/how-to-use-bahttext-function-in-microsoft-excel-365/)
Website Editor ✏
Tags: webdev, javascript, beginners, tutorial
Published: 2020-08-11 05:07:15

There are 2 basic ways of making an editor 📝
1. contentEditable property 
2. designMode property 

Both of the properties enabled editing the content on the page as if it was an editor. So open your dev console of the browser and type **document.designMode="on"** this will convert your webpage document into a rich text editor. The best part is the `JavaScript` on the page will still be executed.

## contentEditable vs designMode 📓

<img src="https://i.imgur.com/esRTJQT.png" width="70%" />

When you set a page into `designMode`, you can edit the content of the page directly inside the browser page, which is very handy to test some prototype or check out how a new headline would look, for example.

**How to enable designMode and contentEditable ❓🤔**

```js
document.designMode = 'on'
```

The same result can be triggered by enabling **contentEditable** on the body element, like this:

```js
document.body.contentEditable = true
```

You can edit or delete the content and also drag images around to reposition them.

You can turn off the `designMode` by using

```js
document.designMode = 'off'
```

<img src="https://i.imgur.com/vJapwT8.png" width="70%" />

## Reference 🧐

- <a href='https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content'> Content Editable </a>

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> Suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>