teleren/devto huggingface dataset:
Test your Django Web App with Ngrok
Tags: webdev, tutorial, django, testing
Published: 2020-11-03 20:35:34

Ngrok is primarily used to test and debug webhooks.  However, it's also useful for sharing an early MVP from your local device with colleagues and friends before deployment.

Ngork is a handy tool when building with the Django Rest Framework(DRF).  DRF is a set of tools for building web applications with a variety of endpoints, known as APIs.  For example, large platforms such as Twitter and Facebook have APIs for programmers to request information and automate processes such as posting and liking by making requests to different endpoints.  When creating your own API, it's important to test such endpoints on your local development server before deployment.  Ngrok enables you to do so.

[https://www.ordinarycoders.com/blog/article/django-ngrok](https://www.ordinarycoders.com/blog/article/django-ngrok)
Top 5 code editors for web development.
Tags: web, webdev, code
Published: 2020-11-03 21:49:51

---
title: Top 5 code editors for web development.
published: true
date: 2020-11-03 20:19:45 UTC
tags: web, webdevelopment, code
canonical_url: https://blog.murtajaziad.xyz/top-5-code-editors-for-web-development/
---

In this article, I will show you the top 5 code editors for web development.

- - -

![](https://images.pexels.com/photos/3244513/pexels-photo-3244513.jpeg?auto=compress&cs=tinysrgb&dpr=2 "Photo by Andy Vu from Pexels")

- - -

### 1. Visual Studio Code
A code editor made by Microsoft in 2015, It has many nice features including support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git, and It’s open-sourced.

### 2. Sublime text 3
A text editor which has a nice GUI built using Python, It was released in 2008 and it has many nice features including quick navigation to files, symbols, or lines.

### 3. Atom
Atom has been developed by GitHub, and It’s highly customizable.  Atom enables users to install third-party packages and themes to customize the features and looks of the editor. The first version was released in 2014, and It’s built using Web technologies (HTML, CSS, JavaScript).

### 4. Webstorm
Lightweight code editor made by JetBrains for helping web developers, It supports many languages and technologies like HTML, CSS, JavaScript, React & Vue. It has an easy GUI with many nice features.

### 5. Brackets
An open-sourced project which is currently maintained on GitHub by Adobe and other open-source developers, written using HTML, CSS & JavaScript. It has many nice features including Live Preview, Inline editors & Preprocessor support.
Have you ever worked on AWS Cognito?
Tags: aws, android
Published: 2020-11-03 20:12:25

Recently, I got a chance to work on AWS Cognito in android app. It took me 2 days to get it done because there is no proper documentation available on the internet. No repository available on Github that could define the complete implementation of Cognito in an app.

But after doing a lot of research and experiments, I successfully implemented it.

If you are thinking to work on Cognito in your next android app that is something I would cover in my next article on medium. Stay connected ;)

Medium Account: [Mustufa Ansari](https://medium.com/@mustufaansari)
Dropbox Cautionary Tale
Tags: technology, dropbox, lesson, recovery
Published: 2020-11-03 19:50:19

This is my first post in a long time. You know, pandemic, elections, world falling apart distractions. Will be prepping for my next AWS cert soon. But in the meantime, I have a cautionary tale about Dropbox.

I love Dropbox. It has saved me so much time. It’s the most reliable synchronizing software I’ve used. But beware of a fatal flaw I came across last week, which was almost a disaster.

I’m a backup fanatic. I have four copies of everything locally, and three more copies of everything in cloud services.

But I did not include my Dropbox folder in that set of backups. Because, you know, Dropbox.

On my 8-year-old MacBook Air (my traveling Mac machine), I have my Dropbox folder on an external drive. The internal drive is simply too small. If I restart the system without the drive connected, I properly get a simple warning, and I temporarily disable it. But last week the machine was already booted up, and the drive was connected. While moving things around to clean the room it was in, the drive got disconnected. I was unaware that this happened, so I did not yet reconnect it.

But Dropbox considered that to mean “delete all Dropbox files.”

All my files were disappearing on all the machines where I had Dropbox installed. I mean like five different machines. I noticed this when a development project I was working on started failing. I saw it was due to files disappearing. Panicked, I scrambled to turn off the automatic start setting of Dropbox on each machine and shut it down.

Too late.

But then I remembered I have the 30 day deletion recovery feature on Dropbox, so I desperately tried restoring. Over a million files. The site could not handle it. Spinning cursor. Spinning. Spinning. Canceling, I then tried restoring subfolders piecemeal. Spinning. Spinning. Error message.

I started digging through the site looking for a number to call to ask if I could get a physical hard drive sent to me with all my deleted files. I never found such an option (still don’t know if that’s available).

More panic.

Had lunch to take a breath. Then I realized, luckily, because the drive was never reconnected all the files were still on that drive! Saved! It took me several days, but now all my files are restored.

And now my Dropbox folder is part of my regular backup process.

I hope this helps others avoid this situation. We already have enough to worry about these days. Stay safe, everyone.
button cannot appear as a descendant of button
Tags: react, html
Published: 2020-11-03 19:49:12

Let's say we're given the following mock from a designer to list files in rows.

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

Each row should be clickable. There is also a button of "other options" on each row that triggers a different event. Therefore, there are two clickable elements, one which appears to encapsulate the other.

I'm trying to be better at [semantic HTMl](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) so I initially wrote out a `<button>`, stripped it of its default styling and made it into row. Then I nested another `<button>` inside. That is when I experienced the react warning `<button> cannot appear as a descendant of <button>`.

I learned that for the HTML button [there must be no interactive content descendant](https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element). Interactive content is [content that is specifically intended for user interaction](https://html.spec.whatwg.org/multipage/dom.html#interactive-content).

We are left with two options:
1. Transform a non-semantic `<div>` into a clickable element
2. Use styling to place one `<button>` on top of another

The first is completely possible. We simply have to include a few [aria attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role) for accessibility. The div might look something like this

```jsx
<div tabindex="0" role="button">
  <div>file title</div>
  <button>other options</button>
</div>
```

The other option was a little trickier but felt better to me. I don't claim to know all the ins and outs of semantic HTML but as I mentioned I'm increasingly trying to use the right tags wherever possible.

```jsx
<div class='two-buttons'>
  <button class='row undo-button-styling'>
    <div>File 🤖 🎃</div>
  </button>
  <button class='other-options'>other options</button>
</div>
```

There are a number of styling changes that need to happen (position relative parent, position absolute child, undoing button styling) but here is the finished codepen.

https://codepen.io/devcon/pen/GRqGQxZ
Auth0’s express-OpenID-connect SDK: the Easiest Way to Do Authentication on Node.js
Tags: codequality, authentication, security
Published: 2020-11-03 19:38:36

Learn how to add OpenID Connect authentication to your Express apps, using our just released express-OpenID-connect SDK.
[Read more...](https://auth0.com/blog/auth0-s-express-openid-connect-sdk/?utm_source=content_synd&utm_medium=sc&utm_campaign=open_id_connect)
Setup Vue3 with Ant Design
Tags: vue, vue3, antdesign
Published: 2020-11-03 19:37:33

[Ant design](https://2x.antdv.com/docs/vue/introduce/) is my favorite design system and they already have a version that works with Vue3.

I'd like to share how to setup a Vue3 project with Ant Design using vue-cli.

#### Create a project with vue-cli

```bash
vue create your-app-name
```

And then select **Vue 3** option.

#### Install Vue Ant Design and some dependencies

```bash
cd create your-app-name
npm install ant-design-vue@next @ant-design/icons-vue
npm install -D less less-loader babel-plugin-import
```

#### Create a `vue.config.js` file

```javascript
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
        },
      },
    },
  },
};
```


#### Edit the `babel.config.js` file

```javascript
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true },
    ],
  ],
};
```

Now you can import ant designs components on `main.js` like the following.

```javascript
import { createApp } from 'vue'
import {
  Layout,
  Button,
  Spin,
  Result,
  Card,
  Divider,
  Col,
  Row,
  Drawer,
  Table,
  Form,
  InputNumber,
  Tag,
} from 'ant-design-vue';
import App from './App.vue'

const app = createApp(App);
app.config.productionTip = false;
app.use(Layout);
app.use(Button);
app.use(Spin);
app.use(Result);
app.use(Card);
app.use(Divider);
app.use(Col);
app.use(Row);
app.use(Drawer);
app.use(Table);
app.use(Form);
app.use(InputNumber);
app.use(Tag);
app.mount('#app');
```

Check out my repository with this configuration done: [https://github.com/alandecastros/vue3-ant-design-starter](https://github.com/alandecastros/vue3-ant-design-starter)

See all the components that Ant Design offers at [https://2x.antdv.com/docs/vue/introduce/](https://2x.antdv.com/docs/vue/introduce/).

That's it!
microservice comparison
Tags: quarkus, springboot, micronaut, java
Published: 2020-11-03 19:35:43

Hi @all I have developed a small test/benchmark system for all microservice frameworks out there, and publishing all results in github, just wanted to show and get your feedback, https://ozkanpakdil.github.io/microservicetests/2020-10-31-microservice-framework-test-11.html, if you check on top right menu you will see older tests, in jdk 11 and 15 , I am using multiple jdk to see how jdk works, and multiple framework and show their minimum jar size and minimum compile time and response times with simple controller, I used gatling for the response tests. feel free to open a PR for https://github.com/ozkanpakdil/test-microservice-frameworks which publishes the new test every time dependabot brings a newer version to the pom.
Don't use .first() without handling exceptions
Tags: kotlin, android
Published: 2020-11-03 19:29:08

When you work with kotlin is much common you need get first caracter of string. So you need function `stringVariable.first()`.

The problem occorer when you not handling execption of this methods, [like NoSuchElementException](https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.text/first.html#exceptions).

So use the try cat and not use in if like:

```kotlin
val name = "Kotlin"
if (name.first() == "K") {
...
```

if you change the name value to another has exception: NoSuchElementException or NoSuchElementException when send crash you app.
Clipping Magic and GlorifyApp - BG Remover
Tags: devops, javascript, php, vue
Published: 2020-11-03 19:29:03

This post is about image processing for web developers. Clipping Magic (https://clippingmagic.com/) is a tool we can use easily to remove the unnecessary or unwanted parts of the image. It uses AI(artificial intelligence) to remove the background of the images. To test this feature you can use GlorifyApp (https://www.glorifyapp.com/).
GlorifyApp is a site where you can get thousands of design templates for your products or you can make one for yourself. Of course, you do not have to be a professional designer to use this app. to test this functionality or you can use GlorifyApp for design purposes
Reference:
https://clippingmagic.com/
https://www.glorifyapp.com/

For Contact:
https://mudassirali.com/
Looking for UI feedback
Tags: ux, help, feedback, discuss
Published: 2020-11-03 19:23:12

---
title: Looking for UI feedback
published: true
description: Feedback on redesign of the Barbell Helper App.
tags: #ux #help #feedback #discuss
//cover_image: https://direct_url_to_image.jpg
---

I would like some feedback on a screen I redesigned, please. I have a standalone Apple Watch app, [Barbell Helper](https://barbellhelper.com/). I updated the 'reverse calculator' screen. The purpose of the screen is to sum the weight of a barbell and the plates added to it. I changed the screen to provide a graphic of a barbell on which plates can be added or removed. 

I would appreciate it if you tried the app out and let me know your thoughts. The app is available on [test flight](https://testflight.apple.com/join/s0jqslOG).

Here is a video of what the screen used to look like:

{% youtube IZDsL7OXu6o %}

Here is a video of what the screen now looks like:

{% youtube 0ILp7DWyW1w %}


I'm specifically looking for feedback on:

* the ease of tapping the buttons to add a plate to the barbell

* the ease of tapping a plate on the barbell to remove it

* the ease of understanding what plates are in use and the total weight

Other feedback is also appreciated.


Thank you!
Random thoughts of a dev noob #1
Tags: beginners, javascript
Published: 2020-11-03 19:22:05

Just one thing - I like it very much how FreeCodeCamp learning cycle is organized. I don't know if that's on purpose and maybe it's just me, but it starts very easy and you pass challenge after challenge and feel yourself quite smart and satisfied with yourself...

And then you hit a wall. Nothing works, you don't remember anything helpful from previous lessons and you start to think that you are too dumb, too old, too something else for this. You google, you look up the answer (feeling like a despicable cheater) and still you don't get it. You spend a day with no progress at all and the only thing that keeps you going is a promise to yourself that tomorrow you will definitely sort it out.
Next day it's no better, even worse - you've forgotten some ideas you had the day before. You are desperate... and then it clicks and everything is clear and your future is bright again.

One of the best feelings I've ever had. I'm such drama queen)
Eslint for Vue3 projects in VSCode
Tags: vue3, vscode, vue, eslint
Published: 2020-11-03 19:12:38

I'd like to share my VSCode and ESLint configuration that I use in my Vue3 projects.

## VsCode

Install the following extensions

* ESLint
* Vetur

Add the following in your vscode settings

```json
"eslint.validate": [
  "vue",
  "javascript",
  "javascriptreact"
],
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"vetur.validation.template": false,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.formatOnSave": false,
"files.eol": "\n"
```

## Vue3 Project

After creating your vue3 project with `vue create`.

* Remove any eslint configuration from your `package.json` file.

* Install some packages with npm

```bash
npm install -D eslint prettier babel-eslint eslint-config-airbnb-base eslint-plugin-import eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue
```

* Create a `.eslintrc.js` file at your project's root
```javascript
module.exports = {
  root: true,
  env: {
    browser: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
  },
  extends: [
    'airbnb-base',
    'plugin:vue/vue3-essential',
    'prettier/vue',
    'plugin:prettier/recommended'
  ],
  rules: {
    'comma-dangle': 'off',
    'class-methods-use-this': 'off',
    'import/no-unresolved': 'off',
    'import/extensions': 'off',
    'implicit-arrow-linebreak': 'off',
    'import/prefer-default-export': 'off',
    "vue/component-name-in-template-casing": ["error", "kebab-case", {
      "ignores": []
    }],
    'prettier/prettier': ['error', { 'singleQuote': true, 'endOfLine': 'auto' }]
  },
};
```

* Restart VsCode

Check out the repository with this configuration done: [https://github.com/alandecastros/vue3-starter](https://github.com/alandecastros/vue3-starter)

That's it!
HACKTOBER-FEST
Tags: hacktoberfest
Published: 2020-11-03 17:15:37

Participated in the HACKTOBER fest for the first time.
Hi, I am TUSHAR VERMA,new to DEV community.I joined dev when i got to know here tech knowledge is shared and developed.I was always fond of tech and wanted to go deep into it.My hacktober fest journey was awesome.In the first try i got all the 4 PR'S merged and accepted.I am now curious to see my t shirt though.
#hacktoberfest


I am new to open source but i always wanted to give it a kick.

I have completed all my PR's and heading towards recieving my reward.

### Contributions

I submitted a binary search algorithm in c and bubble sort algo and an age calculator and merge sort algo in c++

### Reflections
I have learned a lot and will definately participate next year as the size of the t-shirt of this year would not fit me next year lol.
Rendering the commit calendar in isometric view
Tags: github, showdev, javascript, node
Published: 2020-11-03 19:07:12

Recently, I found a browser extension called [isometric-contributions](https://github.com/jasonlong/isometric-contributions) which displays the GitHub commit calendar in an isometric view. It looked quite neat, but it can't be used as a standalone...

So I decided to make a similar render as part of my [metrics plugins](https://github.com/lowlighter/metrics) suite, which executes itself either as a GitHub action or as a NodeJS server. 

Below is the final render, generated with about [80 lines of code](https://github.com/lowlighter/metrics/blob/master/src/plugins/isocalendar/index.mjs) : 

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

You can test it with your own GitHub account [here](https://metrics.lecoq.io/) by checking `"Isometric commit calendar"` option !

### 🔧 Under the hood

Using [GitHub GraphQL API](https://docs.github.com/en/free-pro-team@latest/graphql), it retrieves the `contributionCalendar` from the `contributionsCollection`. 

To ensure the last row get a full week, the start date queried is always set to a monday.

Then, it iterates a first time over the contribution calendar to find the highest number of contributions in a single day, the current commits streak and the average commits per day.

Then, it iterates once again over the calendar, but this time to generate the SVG. 

Each day creates a new isometric rectangle, with its height depending on the `contributionCount` of said day scaled to the highest count found previously. 

Color is already given by GitHub API (which allows easier supports for the Haloween theme), though it adds brightness filters to simulate shadows and make render nicer.

Pretty simple, no 😁 ?
Challenges & Projects
Tags: challenge, codenewbie, womenintech, design
Published: 2020-11-03 18:55:39

I'm trying to build up my portfolio. So my days have been filled with challenges and projects. Throughout my journey, I found out that I really like frontend development and there are pretty cool challenges out there to build your skills!

Currently, I'm working on projects from [Frontend Mentor] (https://www.frontendmentor.io/). The great thing about this is that I can filter and sort the challenges to work my way from Newbie up to Advanced. 

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

Since I've started [Frontend Mentor] (https://www.frontendmentor.io/) last week, I've completed three challenges and am working on my fourth. 

**Article Preview Component**: Getting the modal just right was what was killing me. But there's a sense of accomplishment when it finally works right. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n7uo5gulkjfz1w8pc0l3.png)
See the Codepen: [here] (https://codepen.io/lynnecodes/pen/xxOzKjo)

**Single Price Grid Component**: I was really able to get a good rhythm going with flex boxes and grids with this one. I think this was the easiest to make responsive so far. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tel5qfnmejinh093rsfv.png)
See the Codepen: [here] (https://codepen.io/lynnecodes/pen/VwjdZBv)

**Fylo Data Storage Component**: I just completed this last night and it took me longer than I thought. Going into it, it looked like it was going to be a couple of grid items. Easy-peasy, then bam! Spent all day trying to get the placement right. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r1mimsqy656wmqs5iyvq.png)
See the Codepen: [here] (https://codepen.io/lynnecodes/pen/ZEORzOx)

##Other Challenges

I also want to get really good at Figma and they actually have their own [Figma Design Exercises] (https://www.figma.com/resources/learn-design/#exercises) on their website.

Then I found this awesome CSS daily challenge called [100 Days CSS Challenge] (https://100dayscss.com/). Each day has a new challenge to do which is pretty awesome. It's like a surprise everyday. 

And if I want to be a little bit more creative. There is [Codier] (https://codier.io/). Some of their challenges just have a short brief, then it's up to you to come up with the design completely on your own. 

##More Projects

If there are any other awesome challenges you are doing to up your profile, please share! I'd love to check it out!

Until next time,
&#x2665; Lynne
Daily Challenge #303 - Frequent Days in a Year
Tags: challenge
Published: 2020-11-03 18:49:10

---
title: Daily Challenge #303 - Frequent Days in a Year
published: true
series: Daily Challenge
description: Return the most frequent day(s) of the week in a given year.
tags: challenge
//cover_image: https://direct_url_to_image.jpg
---
What is your favorite day of the week? Check if it's the most frequent day of the week in the year.

You are given a year as an integer (e.g. 2001). You should return the most frequent day(s) of the week in that year.

Input: Year as an int.

Output: The list of most frequent days in the Gregorian calendar year.

###Examples:
`most_frequent_days(2427)` == `['Friday']`
`most_frequent_days(2185)` == `['Saturday']`
`most_frequent_days(2860)` == `['Thursday', 'Friday']`

###Tests:
`most_frequent_days(1770)`
`most_frequent_days(1785)`
`most_frequent_days(1984)`
`most_frequent_days(2000)`

Good luck!

***
_This [challenge](https://www.codewars.com/kata/56eb16655250549e4b0013f4) comes from suic on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_