teleren/devto huggingface dataset:
Developers, fill in the blanks!
Tags: webdev, discuss
Published: 2020-01-21 13:22:59

---
title: Developers, fill in the blanks!
published: true
description: 
tags: webdev, discuss
---
Fill in most appropriate tech in each category, based on your own experience. 
Languages, frameworks, libraries, extensions, etc, are all welcome.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/bzvblt050rgkijq0mtv0.png)
React Hooks with Typescript : UseCallback, UseMemo, UseContext And UseRef
Tags: react
Published: 2020-01-21 13:22:40

Lets, check react advanced hooks, i.e. UseCallback, UseMemo, UseRef, and UseContext. All these come under React 16.8 version and help the user create an optimized react application.
Let’s create a react application environment for our project by using either of the following commands:   

<I> 1.yarn create react-app advanced-hooks-tutorial --template typescript # or 
2.npx create-react-app advanced-hooks-tutorial --template typescript </I>

The above command will create a Project with the name “advanced-hooks-tutorial”. Once it’s done go to the directory and start the project either by <I>“npm start”</I> or<I> “yarn start”.</I>

We will be using yarn throughout this tutorial to maintain consistency.
Let’s now integrate the project with antd which is a design library by the name of antd design, that helps us to create some standard UI components. Additionally, you can use other design libraries as well if you want.

<a href="https://codersera.com/blog/react-hooks-with-typescript-usecallback-usememo/">React Hooks with Typescript : UseCallback, UseMemo, UseContext And UseRef</a>
My Shiny Gallery | An image gallery in HTML and CSS
Tags: codepen, html, css, gallery
Published: 2020-01-21 13:16:39

<p>Just a little proof of concept for a project I'm planning, using CSS Grid to lay out a photo/image gallery with some simple transition animations on the hover and nice use of media queries to scale the images.</p>

{% codepen https://codepen.io/abeeken/pen/JjowYwQ %}
Missing Pieces in My Learning for 2020
Tags: dotnet, tutorial, beginners
Published: 2020-01-21 13:07:49

If you read my posts here, it can be seen that my main technology used is Microsoft's .Net with C#.
My main apps are WPF, with Dapper ORM/SQL, and a small module in Asp.Net core Razor pages. But I still feel I have many missing parts in my learning process. I am finding the following tutorials really interesting to pursue, and cover these areas. I started them, but didn't go through them in detail. I am glad I found these, and this is the plan for me during the first half of 2020.

**A. Identity Framework for Asp.Net Core.**
I did some small tutorials this far on this topic, and lately I found this one. Code Maze is the best at C# tutorials, and this is my next one on Identity:
https://code-maze.com/identity-asp-net-core-project/
I feel there are missing pieces for me in this framework, and please let me have new materials if you find some.

**B. Entity Framework Core**
I used EF Core in my Asp.Net web project, but I still think that there are things to be learnt here. I found Tim's newest tutorial on this, quickly checked it but didn't have time to go deeply... Another one to check more in detail.
https://www.youtube.com/watch?v=qkJ9keBmQWo

**C. Asynchronous C# with Async/Await**
I started using this in my Asp and WPF project, and indeed it added some responsiveness to my apps. Need to study this deeper. Any ideas on this are welcome!

**D. Logging in Asp.Net Core.**
I never used this in my apps, but I plan to. The greatest source for this will be my newly purchased course on Asp.Net core 3: https://code-maze.com/ultimate-aspnet-core-3-web-api/
![Code Maze Logo](https://thepracticaldev.s3.amazonaws.com/i/rqamk98pzs6f2f266yc6.png)

E. Check out **Blazor**, especially server side, later on, this year.

F. Some more **Javascript on the front-end**, and then my framework of choice, Angular. I am very behind in my learning with Angular, partly because I have to work on my projects. Currently I use some JQuery tools on my Asp.net project, like datatables.js, pivotjs, chart.js, and I really like what I discovered. Any new ideas are welcome.
Daily Developer Jokes - Tuesday, Jan 21, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-01-21 13:00:01

---
title: "Daily Developer Jokes - Tuesday, Jan 21, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Tuesday%2C%20Jan%2021%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258b4d7b44.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why doesn't Hollywood make more Big Data movies?

___A:___ NoSQL.
 -->
Absolute imports in Create React App
Tags: react, tutorial, todayisearched
Published: 2020-01-21 12:56:16

One of the things that held me back from Create React App was the lack of absolute imports. I loved them so much in my custom webpack config that I couldn't live without it. After a time I found that they can be configured in CRA too! Let's see how to do it.

## Why do you need absolute imports?
During the development of the React app, you may encounter a situation like on the code below. Multiple, relative, nested imports. It's so hard to manage! And things are even worse when it comes to moving your code around a file structure.

```javascript
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';

import Icon from './../../components/icon';
import AuthorAvatar from './../../components/author-avatar';
import Date from './../../components/date';
import Image from './../../components/image';
import HtmlLink from './../../components/html-link';
import { SOURCES } from './../../config/defaultConfig';

import * as styles from './index.scss';
```

## Absolute imports to the rescue!
Absolute imports can help you make that code a lot cleaner, more readable and manageable. We want to be able to transform our paths from this:
```javascript
import useApi from './../../hooks/use-api';
import Date from './../../components/date';
import Image from './../../components/image';
import transfromUserData from './../../helpers/transform-user-data';
// etc...
```
to that:
```javascript
import useApi from 'hooks/use-api';
import Date from 'components/date';
import Image from 'components/image';
import transfromUserData from 'helpers/transform-user-data';
```

Let's assume you have `src` with multiple directories where your code lives. We want to make `src` your base path for the imports.

![Example structure of your src](https://thepracticaldev.s3.amazonaws.com/i/bvcaltqxrppy44qnjs8k.png)

The first step is to create `jsconfig.json` file (if it doesn't exist already) in root directory of your CRA app (`tsconfig.json` in case you used TypeScript template). Then add `baseUrl` configuration to it:

```json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
```

That few simple lines will tell CRA config to use your `src` directory as a base for your imports so you can import your components with absolute paths. After that you can change imports in your code as presented below:

```javascript
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import replace from 'lodash/replace';

import Icon from 'components/icon';
import AuthorAvatar from 'components/author-avatar';
import Date from 'components/date-representation';
import Image from 'components/image';
import HtmlLink from 'components/html-link';
import { SOURCES } from 'config';

import * as styles from './index.scss';
```

A lot cleaner and without `./../` mess. I hope you found it right on time! :)

Docs reference: https://create-react-app.dev/docs/importing-a-component#absolute-imports
How do I rename a SharePoint Online site using PowerShell?
Tags: sharepoint, powershell
Published: 2020-01-21 12:48:18

A SharePoint Online administrator can change the SharePoint Online [site address](https://docs.microsoft.com/en-us/sharepoint/change-site-address). The interesting part of this feature is that in many situations Microsoft already considered how to limit the impact of such a change. Nevertheless, you should have a look into the [effects of changing a site address](https://docs.microsoft.com/en-us/sharepoint/change-site-address) before performing any operation. 

I created a sample script that shows you how to use PowerShell to perform a site change.

```
## Install the SharePoint Online Management Module if required
## Install-Module -Name Microsoft.Online.SharePoint.PowerShell 
## More info under https://www.nubo.eu/Connect-to-SharePoint-Online-using-PowerShell/

## parameters start
$tenant = "yourTenantName"
$sourceAlias = "aliasOfYourSource"
$targetAlias = "aliasOfYourTarget"
## parameters end

# Connect to SPO and perform the site rename
Connect-SPOService "https://$tenant-admin.sharepoint.com"
$oldUrl = "https://$tenant.sharepoint.com/sites/$sourceAlias"
$newUrl = "https://$tenant.sharepoint.com/sites/$targetAlias"

# Perform the site rename
Start-SPOSiteRename -Identity $oldUrl -NewSiteUrl $newUrl

# The process might take a while depending the size of the site. You can check the status using this command
Get-SPOSiteRenameState -Identity $oldUrl

# By using the standard parameters of Start-SPOSiteRename, a successful site rename will provision  After a successfull site rename a new site with the template 'RedirectSite#0' is created

$site = Get-SPOSite $oldUrl
$site.Template
```

From the script, you can see that the operations are triggered by using the [Start-SPOSiteRename](https://docs.microsoft.com/en-us/powershell/module/sharepoint-online/start-spositerename?view=sharepoint-ps) command. This will queue a rename job that will be executed in the background. The command [Get-SPOSiteRenameState](https://docs.microsoft.com/en-us/powershell/module/sharepoint-online/Get-SPOSiteRenameState?view=sharepoint-ps) will return you the current status of the job. Once the job is marked as completed, you will have two sites in your tenant. You will have the site with the new URL and contents and a new site using the Template **Redirect#0**. This site will ensure that all requests pointing to the old URL will be redirected to the new URL. This site also ensures that nobody is able to request a new site with the old URL. 

In case you want to free up the old name, delete the site collection that has been created for redirection.
How to improve yourself ? By doing these things -
Tags: career, productivity, motivation, programming
Published: 2020-01-21 12:46:05

We pass more and more time on Internet everyday, this is why we have to spend it carefully by choosing right content to consume.

*I hope you can improve yourself after reading this post.*

1. Replace reading random people comments on Facebook by reading helpful questions/answers on Quora.🤳 --> 📃

2. Replace watching a YouTube video you have seen many times Or watching funny videos by watching Programming related video, there are lots of good YouTube channel for programming.🎦 --> 💻

3. Replace reading useless information on Facebook by reading an article on Dev.to Or Medium.😄

4. Replace watching Netflix for hours by taking an online course to learn new things.📺 -- > 📚

5. Replace listening music when being outside by listening to an audio podcast.🎧.--> 🎙️


Is this my post useful for you ? Tell me in comments.
Engaging Open Source developers at the Future Developer Summit
Tags: devrel, opensource, devops, eventsinyourcity
Published: 2020-01-21 12:28:09

More than 20 years after Eric S. Raymond published The Cathedral and the Bazaar, open-source software (OSS) is a mainstream approach to building developer communities. Kubernetes, React, Wordpress and Linux are used by developer communities in the millions. But where is the art and where is the science in engaging OSS communities?

A few months back, during our September Future Developer Summit, Willie Tejada (VP and GM of Developer Relations and a Chief Developer Advocate at IBM) kicked off the Summit with a keynote on open enterprises and how companies can benefit from using open-source software. 

This keynote was all that was needed to inspire us to focus the highest-rated event in developer marketing and relations (NPS 94.0) on tackling the challenges of open-source and more specifically, how to engage open-source developers. 

The **Future Developer Summit: Engaging Open Source Developers** will come to Menlo Park, CA for 1.5 days on April 7-8.  

The list of presenting speakers will keep growing as the event approaches, but here is the first lineup:
1. Mike Milinkovich, Executive Director, Eclipse Foundation
2. Nithya Ruff, Executive Director, OSPO Comcast
3. Todd Moore, VP Open Technology and Developer Advocacy, IBM
4. Stormy Peters, Director of Open Source Programs Office, Microsoft
5. Duane O’ Brien, Head of Open Source, Indeed
6. Jono Bacon, Community and Collaboration Strategy Consultant and Author, Jono Bacon Consulting   
7. +More TBA

Want a taste of what happens at the Future Developer Summit?
You can watch our [short video] (https://youtu.be/sUUBfdHgTd0).
Or [get involved] (https://www.futuredeveloper.io/). 
Or read out blog post “[What happens at a Future Developer Summit] (https://www.slashdata.co/blog/futuredevelopersummit2019?)”.
Or scroll through Max Katz’s [blog post] (https://maxkatz.org/2019/10/03/future-developer-summit-in-10-pictures/) featuring an inside look and photos.

[Early-bird tickets] (https://www.futuredeveloper.io/) will be available until February 10. Make sure you grab yours soon. 


*The Future Developer Summit is an exclusive, invite-only event where thought leaders in developer relations, marketing and platforms to debate on open source developer challenges, business models, community standards, transitioning teams to open source and best practices for releasing OSS code and share experience on how to:*

*Design developer personas*
*Engage open-source developers*
*Create world-class documentation*
*Build live streaming communities and*
*Put together a world-class a dev relations team*
Happened in Tech
Tags: career, javascript, webdev, sideprojects
Published: 2020-01-21 12:21:18

I've been coding since 2007 when there were no fancy tools as we have today. I believe this is a great community that thrives to help each other on every chance they get.

I've decided to great a simple website, started with a **Joined** section, so developers can share how they ended up in the amazing tech world.

![](https://img.onl/9BKVH)

> [https://happened.tech](https://happened.tech)

My idea is to expand the website into list resources, tutorials from great folks from the community. At first, I might focus more on ReactJS, GraphQL, etc;

Would love for people to contribute when the time comes, for now, if you want and feel like contributing you can share your story on how you ended up in the tech world.

---

You can find the source code [here](https://github.com/telmogoncalves/happened.tech) and open a pull request if you feel like it.

Thanks for ready, follow me on [Twitter](https://twitter.com/telmo)
Percent/URI Encoding - Step by Step example
Tags: tutorial
Published: 2020-01-21 12:10:22

Percent encoding is used to encode some reserved characters in the URI. See [Wikipedia](https://en.wikipedia.org/wiki/Percent-encoding) for more details. 

As part of adding URL encoder in [DevRider](https://github.com/namuan/dev-rider), I put together some notes which may be useful for others so publishing it here.

![DevRider URL Encoder](https://thepracticaldev.s3.amazonaws.com/i/uj3y0942ebldp864k6dl.png)

Here we'll take a single character `:` and convert it to `%3A` which is the equivalent encoded character. This is a very simple example and don't cover unicode characters but it is similar in principle.

We start with finding the ASCII value of `:` which is `58`. 
See [ASCII table](https://theasciicode.com.ar/ascii-printable-characters/colon-ascii-code-58.html) for the mapping table.

Convert `58` to binary using Short division by Two with Reminder. 
i.e. Divide the answer by `2` and keeping the reminder aside which will become the binary form.

```
58/2 = 29 => Reminder 0
29/2 = 14 => Reminder 1
14/2 = 7  => Reminder 0
7/2  = 3  => Reminder 1
3/2  = 1  => Reminder 1
1/2  = na => Reminder 1
```

So the binary form is `111010` if we line up all the reminders.
Padding the output will make it `00111010`.

Next, we split the binary into two parts of 4 bits each.

`0011` `1010`

Then using the following Hex table conversion, we map `0011` => 3 and `1010` to A which becomes `3A`. 

| Decimal | Binary | Hex |
|---------|--------|-----|
| 1       | 0001   | 1   |
| 2       | 0010   | 2   |
| 3       | 0011   | 3   |
| 4       | 0100   | 4   |
| 5       | 0101   | 5   |
| 6       | 0110   | 6   |
| 7       | 0111   | 7   |
| 8       | 1000   | 8   |
| 9       | 1001   | 9   |
| 10      | 1010   | A   |
| 11      | 1011   | B   |
| 12      | 1100   | C   |
| 13      | 1101   | D   |
| 14      | 1110   | E   |
| 15      | 1111   | F   |

The final part is to prefix it with `%` (which is the escape character) making it `%3A` which is the output we are expecting. 🎉
how to check your vectone mobile data usage (EU & UK only ?)
Tags: mobile, 3g, 4g, broadband
Published: 2020-01-21 12:01:36

did you sign up for the vectone mobile 30G for £10 deal last week ? 

did you notice that their website was down for the last 48 hours ? was it down because it isnt load balanced ? and MKTG was just too successful at selling this package :)
[ note to all devops/sysadmins send in your CV TODAY ! ]

have customer support on 322 been immediately hanging up
[ note to all telcoops send in your CV TODAY ! ]

have you had no answer to your tweeted complaints ?

are you sticking with vectone because 30G for £10 is too good to miss ?

then dont forget to check your mobile usage regularly by dialing "*1260#"
Proximity Marketing: How it Works and Why You Need It
Tags: mobilebeacons, proximitymarketingdevices
Published: 2020-01-21 11:57:44

![Proximity Marketing](http://perfectial.com/wp-content/uploads/2020/01/Proximity-Marketing-1024x421.jpg)

The evolving technological development often means more opportunities for businesses. This is the case with proximity marketing. This is a technology that takes the advertisement campaigns to a whole new level. Recently, the proximity marketing devices called beacons became a revelation for the retail stores and small start-ups. So, let’s take a look at what proximity marketing is and how it works.

**The Concept of Proximity Marketing**

Imagine you have opened a clothing store with the stock of great Scandinavian fashion. However, you do not have a base of loyal clients as your enterprise has just been born, and there are plenty of H&M’s in the district. How can you attract new clients and cope with the competition? The answer could be mobile proximity marketing.
The concept is straightforward. When the potential customer approaches your business asset, they automatically get the notification on their phone. It can be anything: new offers or an invitation to find out more about your business. What is great about this technology is that it sends the message at the right time, increasing the probability of customers actually becoming interested in the deal.
As in the modern era, people are inseparable from their mobile devices, this technology proves to be a useful addition to the firm’s advertising campaigns. According to JiWire, more than 53% of customers would not mind sharing their current location and in return receive advertising that is relevant to them at the moment.

View blog and read more about [Proximity Marketing](https://perfectial.com/blog/proximity-marketing-devices/). The post appeared first on [Outsource Web Development Company Perfectial](https://perfectial.com/).
Handle keyboard event with React Hooks
Tags: react, hooks, javascript, beginners
Published: 2020-01-21 11:48:07

---
title: Handle keyboard event with React Hooks
published: true
description: How to handle global keyboard events.
tags: React, Hooks, javascript, beginner
---

Sometimes you want to implement keyboard shortcuts. This is a sample for React Hooks.

```typescript
useEffect(() => {
  // handler object
  const handleEvent = (ev: KeyboardEvent) => {
    console.log(`your key is ${ev.code}!`);
  };

  // register handler
  // do not use lambda here because to unsubscribe later
  window.addEventListener('keyup', handleEvent);

  // unregister handler
  return () => {
    window.removeEventListener('keyup', handleEvent);
  };
}, [/* any deps */]);
```

Then, `handleEvent` handles your keyevent.
PROGRESSIVE WEB APPS: EVERYTHING YOU NEED TO KNOW
Published: 2020-01-21 11:47:40

Are you curious to know about PWA and how they can be useful for your business? PWA or Progressive Web Apps is a great technology that is revolutionizing the mobile app industry. In our blog, you will get complete information about progressive web apps. You can know what a PWA is, what features they provide to users, what components they are built from, technologies that are utilized for developing PWAs and much other useful information. Go through the blog to get a deep insight into PWA. If you want to know more, you can <a href="https://www.csschopper.com/blog/progressive-web-apps-everything-you-need-to-know/"> click here to know </a>.