teleren/devto huggingface dataset:
Deploy React app to Azure App Service as a SPA
Tags: react, azure, spa, deploy
Published: 2019-04-15 12:38:50

---
title: Deploy React app to Azure App Service as a SPA
published: true
description: How to deploy React app to Azure app service as a Single Page Application
tags: react, azure, spa, deploy
---

Hello everyone,
I've some issue during deploiment of my React application to Azure App Service.
I've created the "build" by running npm run build, and then i've uploaded the content of build folder to "/site/wwwroot". At least step I've created the web.config file for manage the routing of React App.
But it seems not working the routing. Because when I try to reach others path I see this error: "Not Found The requested URL /implicit/callback was not found on this server."

Many thanks
Best regards
Fabio
Poor Man's Dark Mode Using CSS Filter
Tags: css, webdev, html
Published: 2019-04-15 12:15:15

---
title: Poor Man's Dark Mode Using CSS Filter
published: true
description: Building a quick dark/night mode for your website with CSS filter
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2ibacgyekcbbg4oqguhz.jpg
tags: css, webdev, html
---

Tap the "dark mode" checkbox in the top right corner.

{% codepen https://codepen.io/rikschennink/pen/GLMLjr default-tab=result %}

The checkbox only toggles the `dark-mode` class on the `<html>` element.

What does the `dark-mode` class do?

```css
html.dark-mode {
    filter: invert(100%);
}

html.dark-mode img {
    filter: invert(100%);
}
```

The `filter` property set to `invert(100%)` will invert all colours on the page. Because it's been assigned to `img` as well (and all images will be in the subtree of the `<html>` element) it will invert the colours again on each `<img>` element preventing the images from looking like photo negatives.

Voila! 🚀
[C++ CODE] Judge Robot Circle
Tags: thetealpickle, algorithms, coding, challenge
Published: 2019-04-15 11:27:53

---
title: [C++ CODE] Judge Robot Circle
published: true
description: Determine whether the robot moved in a circle 
tags: #thetealpickle #algorithms #coding #challenge
cover_image: https://thepracticaldev.s3.amazonaws.com/i/etkgnxlrwf7oznvuuxz1.png
---

THE TEAL PICKLE CODING CHALLENGE!! Determine whether the robot moved in a circle. I solved this problem with bae (C++). TRY IT 👀

<img src="https://thepracticaldev.s3.amazonaws.com/i/bmgbvflt5ekp43e7ihd1.png" />


Check out my solution and share yours!! ~ 💻 💻 

<img src="https://thepracticaldev.s3.amazonaws.com/i/9imb9vig8o5c548of9fz.png" />
GitHub - realtho/PartyLoud
Tags: linux, opensource, git, security
Published: 2019-04-15 11:03:06

---
title: GitHub - realtho/PartyLoud
published: true
description: A simple tool to do several HTTP / HTTPS requests and simulate navigation
tags: linux, opensource, git, security 
---

https://github.com/realtho/PartyLoud

Hi guys,
This is my new project. It's a bash script to simulate real network traffic in order to hide you real traffic from hackers or IPS.
I hope you enjoy :)
8 Ferramentas SEO Gratuitas
Tags: tech, checker, keywords, seo
Published: 2019-07-31 03:41:16

---
title: 8 Ferramentas SEO Gratuitas
published: true
tags: Tech,checker,keywords,seo
canonical_url: https://marquesfernandes.com/2019/04/15/8-ferramentas-seo-gratuitas/
---

## [Google Keyword Planner](https://ads.google.com/home/tools/keyword-planner/), [Analytics](https://analytics.google.com/analytics/web/) e [Search Console](https://search.google.com/search-console/about)

[![Google Keyword Planner](https://marquesfernandes.com/wp-content/uploads/2019/04/image-2-1024x521.png)](https://ads.google.com/home/tools/keyword-planner/)

[![Google Analytics](https://marquesfernandes.com/wp-content/uploads/2019/04/image-1-1024x521.png)](https://analytics.google.com/analytics/web/)

[![Google Search Console](https://marquesfernandes.com/wp-content/uploads/2019/04/image-1024x521.png)](https://search.google.com/search-console/about)

## [SEO Web Page Analyzer](http://www.seowebpageanalyzer.com/)

[![SEO Web Page Analyzer﻿](https://marquesfernandes.com/wp-content/uploads/2019/04/image-10-1024x525.png)](http://www.seowebpageanalyzer.com/)<figcaption><br></figcaption>

## [Sitechecker](https://sitechecker.pro/)

[![Sitechecker﻿](https://marquesfernandes.com/wp-content/uploads/2019/04/image-4-1024x525.png)](https://sitechecker.pro/)

## [GTMetrix](https://gtmetrix.com/)

[![GTMetrix](https://marquesfernandes.com/wp-content/uploads/2019/04/image-5-1024x525.png)](https://gtmetrix.com/)

## [Site Analyzer](https://www.site-analyzer.com/en/dashboard)

[![Site Analyzer﻿](https://marquesfernandes.com/wp-content/uploads/2019/04/image-6-1024x525.png)](https://www.site-analyzer.com/en/dashboard)

## [SEO Hero](http://www.seo-hero.tech/)

[![SEO Hero﻿](https://marquesfernandes.com/wp-content/uploads/2019/04/image-9-1024x525.png)](http://www.seo-hero.tech/)

## [Tools Pingdom](https://tools.pingdom.com)

[![Tools Pingdom﻿](https://marquesfernandes.com/wp-content/uploads/2019/04/image-7-1024x525.png)](https://tools.pingdom.com/)

## [Yoast SEO](https://yoast.com/)

[![Yoast SEO﻿](https://marquesfernandes.com/wp-content/uploads/2019/04/image-8-1024x441.png)](https://yoast.com/)

O post [8 Ferramentas SEO Gratuitas](https://marquesfernandes.com/2019/04/15/8-ferramentas-seo-gratuitas/) apareceu primeiro em [Henrique Marques Fernandes](https://marquesfernandes.com).
Passphrases and Key Files
Tags: security, authentication, discuss
Published: 2019-04-15 01:17:06

---
title: Passphrases and Key Files
published: true
description: Use files as a method of authentication.
tags: security, authentication, discuss
---

**WARNING: Complex and vast subject.**

You can use key files for both [VeraCrypt volumes](https://veracrypt.fr/) and [KeePass databases](https://keepassxc.org/) to cryptographically secure encryption keys.

The user would upload a file or a few as key file(s), along side their passphrase.

Put aside the target audience, average Joe probably wouldn't want to upload key file(s) every time they logged in along side their passphrase.

I see this in one case where it helps.

The database gets breached and the attacker only has the hashes, but doesn't know if they used key files or not to use as a pepper for their passphrase. And if hashes were appended/prepended to the passphrase it would make it more secure, right?

For each file that the user uploads, we will hash their contents and append them to the passphrase when it gets hashed.

There is many ways we could go about it.

```
passphrase = passphraseHash(passphrase + key_file_hashes)
```

Note: If there is more than one key file, the order that the key files would go in matters!

From the way I am seeing it, it is a proper "pepper" since it's user provided, etc.

There is many possibilities. The key file could be obfuscated in a folder with 1000s of files.

Where else could this help? Where would this bring pitfalls?

Thoughts? Please share them!
Vue Form Components v2.0.0 is out
Tags: vue, githunt, opensource
Published: 2019-04-15 10:29:16

---
title: Vue Form Components v2.0.0 is out
published: true
description: Vue Form Components v2.0.0 is out
tags: vue, githunt, opensource
---

In version 2 added Form Builder component - a schema-based builder to generate form with components and validation  🎉

Changelog:
**Breaking**
 - Drop async validation

**Features**
 - VeeValidate for form validation
 - Form Builder

{% github antonreshetov/vue-form-components %}
How to render different components based on the selected option?
Tags: javascript, react, discuss
Published: 2019-04-15 10:13:26

---
title: How to render different components based on the selected option?
published: true
description: 
tags: javascript, react, discuss
---

I want to create a page where I have more than 30 different select options. Whenever I select one of the options based on the currently selected option, a different set of React components renders below.

As I have said, there are more than 30 different select options. Well, it is not necessary that for each option the combination of components will be different. There can be a one-to-many relationship between a component and the option under which the component is rendered.

There are many ways to do this, but I wanted to gather some ideas before I implement one. What approach should I take to create this kind of a page?
Adding Twitter Cards to Hakyll Posts
Tags: hakyll
Published: 2019-04-15 10:11:37

---
title: Adding Twitter Cards to Hakyll Posts
published: true
description: Make your Hakyll posts look better in Twitter
tags: hakyll
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2xpgsqzvnqilzrurcpnz.jpg
canonical_url: https://odone.io/posts/2019-04-15-adding-twitter-cards-to-hakyll-posts.html
---

You can keep reading here or [jump to my blog](https://odone.io/posts/2019-04-15-adding-twitter-cards-to-hakyll-posts.html) to get the full experience, including the wonderful pink, blue and white palette.

---

## Intro

By default Hakyll does not add the proper meta tags for Twitter Cards. For that reason, if we try to tweet a link to a Hakyll post, no card will be rendered. We can confirm that by using [Twitter's Card Validator](https://cards-dev.twitter.com/validator):

<img class="content-image" src="https://thepracticaldev.s3.amazonaws.com/i/2h3o17n7mkv1088l6p6z.png" />

That can be fixed with a few lines of code:

<img class="content-image" src="https://thepracticaldev.s3.amazonaws.com/i/ldzg7jeom0ph10thfejq.png" />

## The Few Lines of Code

As explained in the [docs](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards), it's enough to add to the `head` of the HTML document the following stuff:

```html
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />
<meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
<meta property="og:title" content="A Twitter for My Sister" />
<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
<meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />
```

In Hakyll we can add the meta tags to `templates/default.html`. We just need to make sure to have them only in the post pages. To make that happen, we just check if the `description` key is present in the context:

```html
$if(description)$
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="MY_TWITTER_HANDLE" />
  <meta name="twitter:creator" content="MY_TWITTER_HANDLE" />
  <meta property="og:url" content="$url$" />
  <meta property="og:title" content="$title$" />
  <meta property="og:description" content="$description$" />
  <meta property="og:image" content="$cover_image$" />
$else$
$endif$
```

And then in each post metadata we need to add `description` and `cover_image`:

```markdown
---
...
description: Some description of my post
cover_image: https://example.com/cover_image
---
```

---

Get the latest content via email from me personally. Reply with your thoughts. Let's learn from each other. Subscribe to my [PinkLetter](https://odone.io#newsletter)!
Day 13 - Automatic file organizer - 100 days 100 python scripts
Tags: python, productivity, beginners, career
Published: 2019-04-15 10:01:21

---
title: Day 13 - Automatic file organizer - 100 days 100 python scripts
published: true
description: Day 13 - Automatic file organizer
tags: python, productivity, beginners, career
cover_image: https://cdn-images-1.medium.com/max/1600/0*GEsDQGQ1BucUNW1g
series: 100 days 100 python scripts
---

##Day 13: file_organizer 

have you ever annoyed with a lot of unorganized files in your download folder? if yes, this extension will help you with automatically organize the files based on its type. Schedule it as a cron job, you never have to worry about organizing a folder manually.   feel free to add more types if you need.

```python
import os,shutil
import constants

DIR_TYPE={
    'Documents':['pdf','docx','doc','csv','txt','xls','xlsx','log'],
    'Archives':['zip','tar'],
    'Pictures':['jpg','jpeg','png','gif'],
    'Code':['py','css','js','html'],
    'Audio':['mp3'],
    "Video":['mp4','srt','mkv','3gp'],
    "Package":["deb",'xip'],
    "Torrent":["torrent"]
}

PATH=constants.DOWNLOAD_PATH

def movefile(file_name,dir_type):
    dir_location=os.path.join(PATH,dir_type)
    if not os.path.exists(dir_location):
        os.mkdir(dir_location)
    shutil.move(file_name,dir_location)

def organize():
    file_types={ file_type:dir_name
        for dir_name,file_types in DIR_TYPE.items() for file_type in file_types
    } # constrcuts a list of filetype:dir_type

    onlyfiles = [f for f in os.listdir(PATH) if os.path.isfile(os.path.join(PATH, f))] #get all the files

    for file_name in onlyfiles:
        splited_text=file_name.split('.')
        if len(splited_text)>1:
            ext=splited_text[-1].lower()
            if ext in file_types:
                movefile(os.path.join(PATH,file_name),file_types[ext])
            else:
                print("Unknown File format found -",splited_text[-1])
organize()
```

Please Visit my Git Repo to check out all the previous day challenges.

[https://github.com/ganeshraja10/automated-python-scripts](https://github.com/ganeshraja10/automated-python-scripts)
Want Opinion on my Portfolio prototype 
Tags: webdev, design, portfolio, career
Published: 2019-04-15 08:56:59

I had designed a prototype of my portfolio, is it looking professional? Do provide your opinion https://xd.adobe.com/view/a12251e0-a544-41e9-5ccf-a1d3fbbc2d17-d713/

Redesigned final portfolio : http://deftdesigner.com
Laravel Queues Step By Step Guide
Tags: laravel, laravelqueues, laraveljobs
Published: 2019-04-15 08:17:22

---
title: Laravel Queues Step By Step Guide
published: true    
description: Laravel Queues allow you to delay a time-consuming task until a later time. By delaying the time-consuming task, you can improve the performance of the Laravel application significantly.
tags: laravel, laravel queues, laravel jobs
---

In this post, we will discuss Laravel Queues which is one of the best features of the Laravel framework. So let’s dive in.

## Laravel Queues

Laravel Queues provide integration of a variety of different queue backends like Beanstalkd, Amazon SQS, Redis, synchronous (sync) and database. You can find the queue configurations in the config/queue.php file. In this file, we will define the connection’s configurations for each queue drivers. You can check the official documentation for more details.

You can read this full article at [Laravel Queues](https://www.larashout.com/laravel-queues-step-by-step-guide)
The Insane Beast
Tags: dailywriting
Published: 2019-04-16 16:16:10

---
title: The Insane Beast
published: true
tags: daily-writing
canonical_url: https://marcusblankenship.com/the-insane-beast/
---

The Beast roamed the office hallways; always seeing, always watching, always devouring.

My first encounter with the Beast took place a few months after I joined the company. I didn’t recognize it immediately, due to my youth and inexperience. This was, after all, my first job as a programmer.

One Tuesday I needed to leave work early, so I came in at 6 am. My boss was in his office, hunched over a stack of papers. I still remember the twitchy way he stirred his coffee, and the pile of used stir-sticks scattered under his monitor that morning.

Surprised, I said “Oh, hey. You’re here early.”

He raised his eyes wearily, “Been here all night working on last-minute budget changes. Could you shut the door for me? Have a good one.”

What I didn’t see was the Beast in the corner.

A few months later I encountered the Beast again, this time in the office of the VP of IS. It sat in the corner, silently watching. Waiting.

Him: “We need this feature in two weeks.”

Me: “Right, but the estimate is nine weeks…”

“I know, but we have to get it done. You’re not going to let us down, are you?”

“No, but are we being – “

He cut me off, “Are we being realistic? Yes and no. Maybe not according to your schedule, but according to what I need.”

Nodding, I understood.

The Beast had an insatiable appetite. _“More, more, more! Faster, faster, faster!”_ it cried.

I grew used to the demands of the beast – and like an inmate who brags about surviving a particularly brutal prison, I bragged to outsiders about my experiences.

I even came to love the Beast. If others criticized the Beast, I made excuses for it using words like ‘drive’, ‘motivation’, and ‘passion.’

I knew the Beast was hungry, but what I didn’t realize was that it was insane.

**And, that I was losing my sanity as well.**

Triple-booked meetings.

Ridiculous delivery schedules.

Regular all-nighters.

Crazy, last-minute feature demands.

I didn’t see the Beast’s insanity until I left the company, much like a child doesn’t recognize a dysfunctional family until they go out into the world.

Maybe the Beast’s insanity was necessary to satisfy its appetite. It allowed it to demand whatever measures necessary to feed its never-ending appetite.

Ironically, insanity also meant the Beast would never, ever be satisfied.

I had lost my sanity and was now serving the beast.  I couldn’t see all of this until it was too late.

I hope your not in the same boat.

Does this Beast live where you work?

Best,  
Marcus

[[SPONSOR] GitPrime battles the Beast by grounding your conversations in data. Have you checked it out yet? ](https://www.gitprime.com/managers?utm_source=marcus-blankenship-newsletter&utm_medium=email&utm_campaign=feb-march-2019)

The post [The Insane Beast](https://marcusblankenship.com/the-insane-beast/) appeared first on [Marcus Blankenship](https://marcusblankenship.com).
Pasting multiple cells into Excel from PowerShell
Tags: general, powershell, excel
Published: 2019-09-06 15:36:43

---
title: Pasting multiple cells into Excel from PowerShell
published: true
tags: General,PowerShell,Excel
canonical_url: https://blog.jermdavis.dev/posts/2019/pasting-multiple-cells-into-excel-from-powershell
---

Sometimes the learning point from working on a misbehaving Sitecore server isn’t related to the CMS. Recently I learned something useful about Excel while I was addressing some other issues. Not sure if this is “so trivially simple I’m just the last one to realise” or whether it’s a really useful bit of trivia – but just because someone else might benefit:

I was monitoring an issue with a Sitecore server recently, and to keep track of what had been going on, I’d knocked up a graph in Excel. Every so often I was looking at a certain data value on the server, and then copy/pasting that into the spreadsheet along with the date/time of when the measurement was taken.

Having done that a few times I was struck by the urge to make my life simpler. For… [reasons](https://media.giphy.com/media/9rAqbQNmPnQm9BRwsw/giphy.gif)… it wasn’t practical to have PowerShell writing out a CSV file to import into Excel in one go – so could I get PowerShell to give me the date and the value on my clipboard, so I’d just have to paste it into my spreadsheet?

Yes of course:

First up, getting the current date/time is handled by the “[`Get-Date`](https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/get-date?view=powershell-6)” commandlet. It happened that the server I was using was configured for a US locale, and being a Brit that meant I wanted my date formatted differently to the default output. Not a problem – you just need to tell PowerShell how you’d like your date using standard .Net format string data:

```powershell
$timeStamp = Get-Date -Format "dd/MM/yyyy hh:mm"
```

Grabbing the actual measurement isn’t relevant here, but I squirrelled that data away in a variable too:

```powershell
$value = /\* someMagicToMeasureAValue \*/
```

And you can send stuff to the clipboard automatically with the “[`Set-Clipboard`](https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.management/set-clipboard?view=powershell-5.1)” commandlet.

But my spreadsheet was formatted with a column for the timestamp and a column for the value, so I could plot a graph from the data. So how do you get the data onto the clipboard in the right format so that pasting into Excel will make sure it goes into two cells?

Well after some fun with Google, it turns out this is kind of obvious in retrospect: You just tab-separate your data. In PowerShell “&#96;t” (back-tick, followed by “t”) is a tab character. And that means I can send my two columns of data to the clipboard with:

```powershell
"$timestamp `t $value" | Set-Clipboard
```

And if I hit paste into Excel, I get:

[![](https://jermdavis.files.wordpress.com/2019/03/pastetwocells.png?w=800&h=545)](https://jermdavis.files.wordpress.com/2019/03/pastetwocells.png)

And you can put multiple tabs in if you want to paste more than one column…
The coverage report is a lie
Tags: codecoverage
Published: 2019-06-27 07:40:44

---
title: The coverage report is a lie
published: true
tags: Code coverage
canonical_url: http://crossplatform.io/the-coverage-report-is-a-lie/
---

Having had to work without code coverage tools made me think they created beautiful code. When the opportunity finally came I was overjoyed, but let’s just say plot twists were about to unfold *very* soon after I got to work 😅

**What is a coverage report anyway?**

A test coverage report is a collection of stats on our production code generated each time the test suite runs.   
The stats show the number of production code lines executed by tests. The higher this number is, the more source code is insured by tests. Uncovered lines have a higher risk of change, therefore are good candidates to test next.

**Sounds great! How could anyone misuse it?**

Glad you asked!

The easiest trap to fall in, of which I have first hand experience, is trying to game the test-driven flow to get a high coverage percent. When focus shifts from modelling and code design, it’s likely to end up with full coverage but junky code. 

Another concern is some management sees it as proportional to the trust one can have in production code. Over-reliance on the coverage percentage gives a sense of false security. Misinterpreting coverage reports can hurt the trust in the engineering team.

**Oh no! How do I fix it?**

Focus on test quality rather than the quantity. Just because we have tests does not mean they are the right tests. A good unit test can tell if a change in the codebase breaks requirements.

Correct analysis of reports can guide next coverage efforts, considering the limitations and supplementing with other metrics. 

Multidimensional quality metrics are fantastic to break dependency on coverage reports. The more sources of metrics, the better informed our decisions are. 

Additional metrics can include cyclomatic complexity, tracking the number of errors relative to the number of tests and code visualisation tools – and the good news is they come in other automated tools and services, relatively easy to set up and integrate in the normal workflow.