teleren/devto huggingface dataset:
Join the Global AI October sessions!
Tags: machinelearning, event, community
Published: 2020-09-22 14:10:41

**The Global AI Community is proud to present the October sessions. A series of 4 events in the month October focusing on the different fields of Artificial Intelligence (AI).**

From how to get started in the field from AI to a deep dive into Computer Vision and Natural Language Processing.
Every show is 3 hours long and filled with technical demos and panels presented by industry experts from companies like OpenCV, Google and Microsoft. There is also plenty of opportunity ask your questions!

You can now register at: https://globalai.live/register
*If you are quick you might even receive some pre-event swag!*

# Episodes:

### Getting started - 8 October 2020
In this episode of the Global AI October sessions we focus on how to get started in the field of AI.
> https://globalai.live/october-sessions-getting-started
> https://www.meetup.com/Global-AI-Channel/events/273427398

### Computer vision - 15 October 2020
In this episode of the Global AI October sessions we focus on what computer vision is, the technical challenge and how to create models. 
> https://globalai.live/october-sessions-computer-vision
> https://www.meetup.com/Global-AI-Channel/events/273427259/

### Natural Language Processing - 22 October 2020
In this episode of the Global AI October sessions we focus on Natural Language Processing with industry experts from around the world.
> https://globalai.live/october-sessions-natural-language-processing
> https://www.meetup.com/Global-AI-Channel/events/273427182/

### Advanced AI - 29 October 2020
In this episode of the Global AI October sessions we dive very deep into the world of advanced AI systems.
> https://globalai.live/october-sessions-advanced-ai
> https://www.meetup.com/Global-AI-Channel/events/273427085/

Hope to see you there!
Day 8 - Learn How To Use Grid Template Areas In 2 Minutes
Tags: codenewbie, beginners, css
Published: 2020-09-22 13:53:30

Yesterday, I started building a simple page that display some components with CSS grid. I followed the style guidelines and came up with [this](https://josno.github.io/four-card-feature-section-master/):

![css](https://dev-to-uploads.s3.amazonaws.com/i/y96i6h9df4raxrkoiuji.png)

## What I Learned

It was good time working on CSS grids and playing around with other layouts. I have used CSS grid before but not so much using the grid-template-areas property. If you are a visual learner like I am, I found using grid-template-areas helpful. 

First you set your grid, then columns and rows. Here I have three columns and two rows:
![set up](https://dev-to-uploads.s3.amazonaws.com/i/gj0x5e83nx6zaxvnha0t.png)

Then you place your divs (or other elements) by setting them up as placeholders in grid-template-areas using their class names like this.

![template area](https://dev-to-uploads.s3.amazonaws.com/i/y2fdath167ic5c5s8x92.png)

Note that you don't have to use the element class names for these placeholders. But it makes it easier to remember when you are setting up your elements later.

A way to understand this is looking at the entire property value as the grid itself.

![example grid](https://dev-to-uploads.s3.amazonaws.com/i/z5g1130xrv3tzn6yz8ey.png)

You're not done yet! Now you have to actually set the elements in their placeholders using the grid-area property.

![grid area](https://dev-to-uploads.s3.amazonaws.com/i/27jwzjofgg8oxegl32rh.png)

And finally you get...
![End image](https://dev-to-uploads.s3.amazonaws.com/i/gjt7o4c3tx8gaihmuiab.png)

## How This Will Help Me

One of the things I love about programming are the different ways people code up a component. I think that a person's personality can shine through in their code and seeing different solutions to get the same results shows this. What I like about CSS is that it provides a person with different options in achieving their frontend goals! 

This exercise encourages me to thoroughly look for other ways and options I might not know is available to me.

Onto the next challenge!
Robot vs Zombies Live Stream E04
Tags: react, javascript, css, womenintech
Published: 2020-09-22 13:16:23

---
description: We use a little math to fix the problem with the viewport scrolling infinitely right. Then we add a border to the game, make the walls impassable, and add doors to the buildings.
---

We use a little math to fix the problem with the viewport scrolling infinitely right. Then we add a border to the game, make the walls impassable, and add doors to the buildings.

{% youtube f9emDoVe0GQ %}
SPFx issues with the new Referrer-Policy in Chrome >= 85
Tags: typescript, security, browsers, sharepoint
Published: 2020-09-22 13:10:30

Since version 85 of Chrome, the default referrer policy has changed from `no-referrer-when-downgrade` to `strict-origin-when-cross-origin`. This change might have a significant impact on your SharePoint Framework solutions when they rely on the referrer header (or better, the referer header with a single "r"). 

## What is the referrer header?

Whenever your browser does an API call, the `referrer` header gets used to indicate the page's origin from where it was performed. 

With the previous default in Chrome (`no-referrer-when-downgrade`), this would be the full URL of the page in SharePoint. Example: `https://tenant.sharepoint.com/sites/<site>/SitePages/just-a-page.aspx`.

With the new policy, the URL provided changes from the full URL to the origin URL. Example: `https://tenant.sharepoint.com/`.

## What is the impact?

On the Google Chrome documentation page, they mention that visual impact is expected to be limited. 

When building solutions only in SharePoint, this will not generate any impact when used without a back-end. If you use a back-end and use the referrer header as a validation mechanism, this will impact your solution. As you now receive the SharePoint tenant URL, instead of the absolute page URL.

![Referrer header - origin URL](https://www.eliostruyf.com/uploads/2020/09/chrome1.png)

> **Info**: Read more about the new default referrer policy in Chrome on: [A new default Referrer-Policy for Chrome: strict-origin-when-cross-origin](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default)

## What with other browsers?

Only Chrome and Safari seem to be using the `strict-origin-when-cross-origin` referrer-policy now by default.

Microsoft Edge and Firefox are still using the `no-referrer-when-downgrade` policy, but be aware, for Microsoft Edge, they are experimenting with the `strict-origin-when-cross-origin` policy, and the Firefox team is considering to move as well.

You can follow the status of the browser implementations here: https://github.com/privacycg/proposals/issues/13

## What can you do for now?

If you rely on the `referrer` header for your API, best is to specify the `referrerPolicy` for these calls as follows:

```typescript
await ctx.httpClient.post(creatorUrl, HttpClient.configurations.v1, {
  headers: {
    "Authorization": `Bearer ${token}`,
    "content-type": "application/json",

  },
  referrerPolicy: 'no-referrer-when-downgrade', // Provide `referrerPolicy` option for falling back to the previous default
  body: JSON.stringify(msg)
});
```

The result should be that the full URL now gets provided when calling the API.

![Referrer header - full URL](https://www.eliostruyf.com/uploads/2020/09/chrome2.png)
Introduction to Composer [ the json scheme]
Tags: php, webdev, composer, packagemanager
Published: 2020-09-22 13:07:14

---
title: Introduction to Composer [ the json scheme]
published: true
description: What are the secret of composer.json? here is how you write one

tags: php, webDevelopment, composer, packageManager
cover_image: https://anastasionico.uk/img/blog/introduction-to-composer-the-json-scheme.jpg
---

I remember that in one of the first lesson of computer science I've attended the professor said that one of the best quality for a programmer is to be lazy.

He repeated the sentence several times over the years and I honestly didn't get what he meant until I started working as a web developer. 



Being lazy in programming does not mean spending the whole day on the sofa watching Nexflix, 
it means not be willing to write the same code times and times again.
on a bigger scale do not write the same feature times and times again.


over the years amazing (and lazy) programmers made packages ready for us to pull in our machine, thus avoid reinventing the wheel.


This is possible thanks to Composer.


In this article, you'll discover one of the most important parts of this package manager.
the composer.json file...


... and how to write one on your own.


[Discover the secrets of Composer.json >>>](https://anastasionico.uk/blog/introduction-to-composer-the-json-scheme)
Add .less/.scss global styles in storybook
Tags: react, storybook, reactnative, webpack
Published: 2020-09-22 12:54:41

I am trying to integrate storybook tool with my react app. My app is using `.less` styles and I've a single file in which all the styles are written (though I am not a big fan of this practice :))

> It works for v6 but I am not sure about lower versions. You guys can give it a try.

After successful installation of storybook, we have two files (`main.js` and `preview.js`) in `.storybook` folder. As we know `main.js` is the config file for storybook and `preview.js` is the config file for our stories.

The idea is here to include Webpack configuration in storybook.
Question: How can we do it? 
Ans:  Using `main.js` file

##Step1:
```
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    '@storybook/preset-scss'
  ],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      // this is for both less and scss
      test: /.*\.(?:le|c|sc)ss$/,
      loaders: [
        'style-loader',
        'css-loader',
        'less-loader', // if scss then add 'sass-loader'
      ]
    });
    config.plugins.push(new MiniCssExtractPlugin({
      filename: '[name]-[contenthash].css',
      chunkFilename: '[id]-[contenthash].css',
    }));
    return config;
  },
}
```
Here `config` is the object of existing storybook's webpack configuration. We are pushing the rules and plugins to this `config` object.

##Step2:
In `preview.js` file include the below line

for `less`:
`import '!style-loader!css-loader!less-loader!../YOUR_LESS_FILE.less';`

for `scss`:
`import '!style-loader!css-loader!sass-loader!../YOUR_LESS_FILE.scss';`

That's it. Now you can run storybook and preview the changes :)

PS: I would like to thank Bastien for this reply on github thread.
https://github.com/storybookjs/storybook/issues/6364#issuecomment-485651328

Also I would like to thank @codevolution youtube channel for his awesome tutorials on storybook.
https://www.youtube.com/playlist?list=PLC3y8-rFHvwhC-j3x3t9la8-GQJGViDQk
Going back to the simple functional web
Tags: functional, serverless, php, node
Published: 2020-09-22 12:54:25

Remember the simple times of PHP web, back in 2000s?

Each web URL was literally a #PHP file.
1 file serving 1 function. Simple, straight forward.

where prototyping was quick and fun. Sure, code quality wasn't the top priority but it allowed for rapid prototyping by literally anyone. Web was easy. 

Your API was a file under /api/books.php and to make it look decent, developers would hide the ".php" from the url using htaccess. voila. one file per end point. 

In 2020, if you're developing in NodeJS, chances are you use some library or boilerplate that has an MVC structure and everything needs to be configured before you can have your simple functionality that you wanted to test out your prototype.
even if you have a react Frontend ready,
you just can't start with a single file and with the bare minimum functionality.

but then this old simplicity of PHP is being brought back with FAAS and serverless. You can have a single file, having a single function, deploy it quickly and start prototyping. 

I wanted to get this speed agility and rapid prototyping ability to my local setup. 

So I built an experimental setup that I'm calling backwardsJS.
BackwardsJS goes back to a time where you could quickly "hack" a web tool together.

# What is BackwardsJS?
It's a koa based boiler plate for hobbyist rapid prototyping 

# What can I do with it?
You can drop a simple file in your Fns folder 
which becomes your web end point as well. 

for example, 
a function in hello.js file will be served if you call http://localhost:3433/hello

It can also do NextJs style dynamic routing by having a file structure like /api/todo/[id].js

# Why?
Cause why not? 
I wanted the simplicity of functions to serve my local web tools. 

I'm looking for feedback on this experiment from the dev.to community on whether this is something you find interesting or not

You can get and try the crude boiler plate code from my github: https://github.com/negati-ve/backwardjs-koa-function-as-a-service

Cheers! :)
What do you do with our printed technical books when they get outdated?
Tags: discuss, books
Published: 2020-09-22 12:38:54

> Hi, this is my very fist post here, and I wanted to try something different.
 
Probably we can see multiple categories like classic software engineering books that never get (very) outdated (e.g. [DDD](https://books.google.es/books?id=hHBf4YxMnWMC), XP, GOF, [POSA](https://books.google.es/books?id=rYiKY3mrrswC)), but I was also thinking in those hard-cover copies of Oracle 8 or Java SE 1.2 technical books.

These categories need different approach? ♼ Paper Recycling Bin? Any stories to share?
Weekly fail (39/2020)
Tags: fail, nuxt, vue, content
Published: 2020-09-22 12:35:56


I spent a good amount of time learning Nuxt.js which caught my attention recently. I walked through the documentation and tutorials and came across some concepts in the framework configuration that seemed unclear and contradictory to me. Also, while browsing StackOverflow, I found out, I wasn't the only one incomprehensive, confused unicorn in this topic. The whole concept of the configuration was hard to grasp for me, so once I mastered it myself, I thought it might be a good idea to share it and write an article about it, just for the sake of simplification for other fellow developers.

So I wrote a nice article with all the necessary explanations and graphics and I sent it to the framework's Developer Advocate for review and fact-checking (thank you Debbie ;)) only to find out all my findings and pieces of advice originated from the old documentation that's going to be replaced in a little time. So even before publishing, my article had been obsolete 🤦‍♂️.

After my initial consternation and checking the new docu it turned out the content fitted nicely into my article with just small necessary changes, but I could have made my life easier if I had used the latest documentation.

*Lesson learned:* **When learning new programming stuff, make sure to follow the latest documentation.**

**Clickbait:** *Are you wondering what my article was about? Check [Demystify Nuxtʼs target, mode, and ssr properties!](https://kontent.ai/blog/demystify-nuxt-target-mode-and-ssr-properties).*
Making an Online Beard-ifier
Tags: javascript, webdev, machinelearning, showdev
Published: 2020-09-22 12:30:47

Were you made for facial hair? Well there's only one way to find out: **[my online beard-ifier](https://i8sumpi.github.io/faceDetect/beard.html)**. 

For this project, my internet was too slow to download a facial recognition dataset, so I used [face-api.js](https://github.com/justadudewhohacks/face-api.js). 

face-api gives 68 reference points of the face. For example, there are points that may represent the center of the eye, or the bottom of the chin. I was able to combine these reference points into the shape of a beard, and then draw it using the HTML5 canvas. After looking at tons of pictures of beards on the internet (I now get lots of ads for beard products), I was able to design/copy my favorite 5 beard styles! 

If you are interested in making your own facial recognition project, check out my **[source code on GitHub](https://github.com/i8sumPi/beard-ifier)**.

Hope you enjoy!
Working Directory not configuring Visual Studio 2019
Tags: help, visualstudio, python, discuss
Published: 2020-09-22 12:27:00

I am creating a django site and I have created django project inside an **app folder of the root directory**.

My folder structure looks like [this](https://pasteboard.co/JsfcJKO.png)
```tree
.
├── .gitignore
├── .travis.yml
├── .vs
│   ├── PythonSettings.json
│   ├── VSWorkspaceState.json
│   ├── launch.vs.json
│   ├── recipe-app-api
│   │   └── v16
│   │       └── .suo
│   └── slnx.sqlite
├── Dockerfile
├── LICENSE
├── README.md
├── app
│   ├── app
│   │   ├── __init__.py
│   │   ├── __pycache__
│   │   │   ├── __init__.cpython-37.pyc
│   │   │   ├── calc.cpython-37.pyc
│   │   │   ├── settings.cpython-37.pyc
│   │   │   ├── tests.cpython-37.pyc
│   │   │   └── urls.cpython-37.pyc
│   │   ├── calc.py
│   │   ├── settings.py
│   │   ├── tests.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   └── manage.py
├── docker-compose.yml
└── requirements.txt
```
I have configured my `launch.vs.json` file like this
```json
{
  "version": "0.2.1",
  "defaults": {},
  "configurations": [
    {
      "type": "python",
      "interpreter": "(default)",
      "interpreterArguments": "",
      "scriptArguments": "",
      "env": {},
      "nativeDebug": false,
      "webBrowserUrl": "",
      "project": "app\\manage.py",
      "name": "manage.py",
      "workingDirectory": "app"
    }
  ]
}
```

The problem still is that *Visual Studio 2019* cannot detect that my `working directory` is the `app` folder. That's why it showing the python `import` is **unresolved**.

![Image of the error](https://cdn.hashnode.com/res/hashnode/image/upload/v1600776850514/DVS1WB1J2.png)

Am I doing something wrong in the `launch.vs.json` file? How can I solve this?

*I am using the latest version of Visual Studio 2019.*
How to Sum Bold Values or Numbers Only in Excel Office 365?
Tags: kutoolsexceltutorial, sumboldvaluesornumbe, kutools
Published: 2020-09-23 06:59:35

---
title: How to Sum Bold Values or Numbers Only in Excel Office 365?
published: true
date: 2020-09-22 12:25:11 UTC
tags: KutoolsExcelTutorial,SumBoldValuesorNumbe,Kutools
canonical_url: https://geekexcel.com/how-to-sum-bold-values-or-numbers-only-in-excel-office-365/
---

## Sum Bold Values or Numbers Only in Excel:

In this article, we are going to see the steps to **Sum Bold Values or Numbers Only in Excel**  **Office**  **365** using **Kutools**. Get an official version of **MS Excel** from the following link: [https://www.microsoft.com/en-in/microsoft-365/excel](https://www.microsoft.com/en-in/microsoft-365/excel)

**Note:** [kutools for Excel](https://geekexcel.com/get-kutools-for-ms-excel-2019-2016-2013-2010-2007-office-365/) has more than 180 features which are used to complete the difficult task with several clicks. If you want to use Kutools, you need to install it from Excel’s official website.
## **Steps to**  **Sum Bold Values or Numbers Only:**

If you want to sum bold values or numbers only from the data, follow the below steps.

- In the following example image, you can see the data range with some bold numbers.
- To get the sum of the bold values, do as follows.

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

- You have to **select an empty cell** to display the result. Then, go to the **Kutools**  **Tab** , **select** the **Kutools**  **Functions** option, **choose** the **Statistical & Math** option from the drop-down list.
- Then, you have to **select** the **SUMBYFONTBOLD** option.

![Select SUMBYFONTBOLD option](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/09/2-80.png)<figcaption id="caption-attachment-14458">Select SUMBYFONTBOLD option</figcaption>

- It will open the **Function**  **Arguments**  **dialog**  **box** , where you need to **click** the **button** in the **Reference**  **box** to select the input range.
- After selecting the range, **click** the **OK** button.

![Function Arguments dialog box](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/09/3-41.png)<figcaption id="caption-attachment-14459">Function Arguments dialog box</figcaption>

- Now, you can get the result in the selected cell as shown in the below screenshot.

![Result](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/09/4-19.png)<figcaption id="caption-attachment-14460">Result</figcaption>

## **Sum-Up:**

In the above article, you can clearly understand the steps to **Sum Bold Values or Numbers Only in Excel**  **Office**  **365** using **Kutools**. Kindly, share your **feedback** in the comment section. Thanks for visiting **[Geek Excel.](https://geekexcel.com/)** Keep Learning!!
Two important changes in Docker New Terms Of Services. November 1, 2020
Published: 2020-09-22 12:24:24


This is the blog version of this video.
To watch the YouTube video, check

[Click here to watch to Video Version](https://www.youtube.com/watch?v=qOq9QFmdQuE)

Two important changes in Docker Terms of Service, that will take effect from November 1, 2020

# 1 NEW IMAGE STORING POLICY ON DOCKER HUB

Images stored, in free Docker Hub Repositories, that have not had their manifest, pushed, or pulled in the last 6 months, will be removed!

This will be only applied to free accounts, not to paid subscription accounts, Docker verified publishers and docker official images

Docker will provide a set of tools and services, to help developers to view and manage their images

- image management dashboard
- email notification service for images that are set to expire
- restoration, for recently deleted images

Don't worry :)

#2 NEW RATE LIMIT FOR IMAGE PULLS FROM DOCKER HUB

- Anonymous free plan users: 100 pulls per 6 hours
- Authenticated Free Plan Users: 200 pulls per 6 hours
- PRO/Team Plan users: Unlimited 

This should not impact you if you use Docker Hub in a normal way, but if you have some sort of automated tools, that do a lot of pulls in short periods, you better know this :)

[Click here to watch to Video Version](https://www.youtube.com/watch?v=qOq9QFmdQuE)