teleren/devto huggingface dataset:
Operadores de Javascript con AutoHotKey
Tags: spanish, javascript, typescript, teclado
Published: 2021-06-25 22:52:04

Idiomas: [🇺🇸] [English](https://dev.to/equiman/javascript-operators-with-autohotkey-37kn) - [🇪🇸] [Español](https://dev.to/equimancho/operadores-de-javascript-con-autohotkey-3o74)

---

Si trabajas en desarrollo de software y la mayor parte del tiempo la pasas escribiendo código en JavaScript (o TypeScript) este artículo te puede ser de utilidad.

Con AutoHotKey puedes re-mapear el comportamiento de algunas teclas para escribir de forma fácil y rápida todos esos operadores que usamos en el día a día.

---

Debes tener instalado [AutoHotKey](https://www.autohotkey.com/) y crear un archivo llamado `js-remapkeys.ahk` con este script.

```cpp
#NoEnv ; Recommended for performance and compatibility with future AutoHotkey releases.
; #Warn  ; Enable warnings to assist with detecting common errors.
SendMode Input ; Recommended for new scripts due to its superior speed and reliability.
SetWorkingDir %A_ScriptDir% ; Ensures a consistent starting directory.

!7::Send {&}{&}                             ; Alt+7         &&          Logical AND
!+7::Send {&}{&}{=}                         ; Shift+Alt+7   &&=         AND Assignment
!8::Send {*}{*}                             ; Alt+8         **          Math Power
!9::Send {=}{>}                             ; Alt+9         =>          Arrow
!+9:: Send {(}{)}{space}{=}{>}              ; Shift+Alt+9   () =>       Arrow Function, implicit return
!^9:: Send {(}{)}{space}{=}{>}{space}{{}{}} ; Ctrl+Alt+9    () => {}    Arrow Function, explicit return
!\::Send {|}{|}                             ; Alt+\         ||          Logical OR
!+\::Send {|}{|}{=}                         ; Shift+Alt+\   ||=         OR Assignment
!=:: Send {=}{=}{=}                         ; Alt+=         ===         Strict Equality
!+=:: Send {!}{=}{=}                        ; Shift+Alt+=   !==         Strict Inequality
!,:: Send {<}{/}{>}{left 1}                 ; Alt+,         </>         HTML Close Tag
!^,:: Send {<}{/}{>}{left 2}                ; Ctrl+Alt+,    </>         React Component Tag
!.:: Send {?}{.}                            ; Alt+.         ?.          Optional Chaining
!+,:: Send {<}{=}                           ; Shift+Alt+,   <=          Less than or equal to
!+.:: Send {>}{=}                           ; Shift+Alt+.   >=          Greater than or equal to
!+;:: Send {?}{:}{left 1}                   ; Shift+Alt+;   ?:          Ternary Operator
!/:: Send {?}{?}                            ; Alt+/         ??          Nullish Coalescing
!+/:: Send {?}{?}{=}                        ; Shift+Alt+/   ??=         Nullish Coalescing Assignment
```

Guarde el archivo y ábralo con AutoHotkey. 

Así de fácil, puedes tener un teclado vitaminado para escribir código JS/TS a toda velocidad.

![js-keys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzyt2k5w8om04tr0huvl.gif)

---

**That’s All Folks!**
**Happy Coding** 🖖

[![cerveza](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4zle20oa7anpfjvap8n.png)](https://github.com/sponsors/deinsoftware)
Day 396 : What Happens Next
Tags: hiphop, code, coding, lifelongdev
Published: 2021-06-25 21:32:28

_liner notes_:
- Professional : Pretty chill day. Just tightened up some stuff so that I can hit the ground running on Monday.

- Personal : Last night, I was able to get the video chat working and able to start and stop the host and guest videos. Also, added broadcasting and archiving functionality to the project. So I will be able to broadcast to YouTube in addition to my own player on the site. When the broadcast is over, on the backend, I pull the archive and upload to my Vimeo account.

![View of a mountain range in North Cascades, WA, USA with tall pine trees in the forefront and the mountains in the back under clear blue skies.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvvuadpj47rhxxaq5ey7.jpg)

So, I got the side project to be able to live stream video. What happens next is that I need to set up the break session page with a video player for the live stream, a chat and questions section, the timer and a way for the user to create a highlight clip. Then I'll need to create a page that will be used during the livestream. We'll see. Going to be some late nights coming up. haha. At least I can relax after Sunday.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube wcfj8rH2YPo %}
Hidden gems of the Chrome DevTools, Part 2: CSS tools
Tags: chrome, devtools, css, webdev
Published: 2021-06-25 21:29:48

In the [last article on the series]() we looked into some features of the Chrome Console API. This time we'll see some of the tools Chrome has to offer when working with CSS and layouts. 

## Inspect layout

Chrome developer tools include handy tools for inspecting and debugging grid and flexbox layouts. When we open Chrome developer tools on the `Elements` tab, you'll find a `Layout` tab right next to `Styles` and `Computed`. Under `Layout` we will see a listing of all the grids and all the flexbox layouts on the current page.


![Layout tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8vj9p7utpgz83czsmx8.png)

Clicking on one of the will enable a visual inspector for that layout as a overlay on the page. Here, I've enabled the inspector for the grid on the root of my site [juhanajauhiainen.com](https://juhanajauhiainen.com).

![Grid inspect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ky60bo0cdkvcf5ubqwy1.png)

By default the overlay displays line numbers, track sizes, and area names of the grid. The track size is displayed in the middle of the track (`minmax(0px, 1fr) 378.33px`), the line numbers are displayd at the left and top sides starting from 1. We can customize what is displayed, using the `Overlay display settings`.

![Overlay display settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xx0l2xinfax9zlj9gxc.png)


## Force element state

Under **Elements -> Styles** there's a cool feature which is easy to miss. While a DOM element is selected, you can force a state for it without actually triggering it. State here refers to interaction state such as, hover, focus, visited etc.

![Force element state](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3luvkgicn73asb99dpa8.png)

This helpful for example when we're testing different styles for a button or a link.

## Cycle color systems

When you're inspecting CSS for a element, the colors are displayed with the color system they were defined with (hex, rgb, hsl). If you want to see how the color would be defined in another system, you can click the color indicator square while holding **Ctrl+Cmd** or **Ctrl+Win** to cycle through the different color systems.

![Cycle through color systems](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yp7t4v5djqfp5k4ldyw4.png)

## Further reading

Checkout the official Chrome developer tools documentation for further reading
[Inspecting CSS grids](https://developer.chrome.com/docs/devtools/css/grid/)
[CSS tools reference](https://developer.chrome.com/docs/devtools/css/reference/)

Photo by <a href="https://unsplash.com/@bamin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Pierre Bamin</a> on <a href="https://unsplash.com/s/photos/artist-tools?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Maths for Coders : Chapter 1
Tags: codenewbie, java, tutorial, career
Published: 2021-06-25 21:00:34

Starting a thread where I will be adding some common math problems expected from developers in interview rounds or aptitude tests.

These will always come in handy - so I have added the cleanest version of some common functions
* find all prime factors
* check if a Number is odd-even
* find LCM of n elements
* find HCF of n elements

{% gist https://gist.github.com/saurabhpro/87ee84a107135bb7df4131d7744a9154 %}
Vue Js Toast Notification Example From Scratch
Tags: vue, toast
Published: 2021-06-25 20:56:01

Vue Notification Tutorial is the today’s main topic. In this example, I have used Vue Toasted One of the Best Toast plugin available for VueJS. It is responsive, touch compatible, easy to use, attractive and feature rich with icons, actions, etc. In this demo, when we save any data in the database, we will display a notification saying that item has successfully saved or if we show any error then we can show it. For the backend, we use Laravel PHP Framework.

[Vue Js Toast Notification Example From Scratch](https://www.codecheef.org/article/vue-js-toast-notification-example-from-scratch)
[Cybersecurity & Linux Tools] How to install Metasploit?
Tags: security, linux, tooling
Published: 2021-06-25 20:49:08

Many people have been using this tool Metasploit. You came across on it on many tutorials and wondered how do you actually install this?
Well I will guide your through!

## What is the purpose of Metasploit? What do people even use it for?

The Metasploit framework is a very powerful tool which can be used by cybercriminals as well as ethical hackers to probe systematic vulnerabilities on networks and servers. Because it’s an open-source framework, it can be easily customized and used with most operating systems.

With Metasploit, the pen testing team can use ready-made or custom code and introduce it into a network to probe for weak spots. As another flavour of threat hunting, once flaws are identified and documented, the information can be used to address systemic weaknesses and prioritize solutions.

## Who uses Metasploit?

Due to its wide range of applications and open-source availability, Metasploit is used by everyone from the evolving field of DevSecOps pros to hackers. It’s helpful to anyone who needs an easy to install, reliable tool that gets the job done regardless of which platform or language is used. The software is popular with hackers and widely available, which reinforces the need for security professionals to become familiar with the framework even if they don’t use it.

Metasploit now includes more than 1677 exploits organized over 25 platforms, including Android, PHP, Python, Java, Cisco, and more. The framework also carries nearly 500 payloads, some of which include:

* Command shell payloads that enable users to run scripts or random commands against a host

* Dynamic payloads that allow testers to generate unique payloads to evade antivirus software

* Meterpreter payloads that allow users to commandeer device monitors using VMC and to take over sessions or upload and download files

* Static payloads that enable port forwarding and communications between networks

## How to install Metasploit?
Now we have read the background information. You are ready to install!

```bash
sudo apt update
sudo apt dist-upgrade
sudo apt autoremove
 
 
cd /tmp
 
curl https://raw.githubusercontent.com/rapid7/metasploit-omnibus/master/config/templates/metasploit-framework-wrappers/msfupdate.erb > msfinstall
 
chmod +x msfinstall
sudo ./msfinstall
 
msfdb init
 
msfconsole
 
sudo msfupdate
```

## Credits 
{% github https://github.com/Yuma-Tsushima07/Yuma-Tsushima07 %}

### Follow me!
* Github: https://github.com/Yuma-Tsushima07
* Medium: https://0xv37r1x3r.medium.com/
* SoundCloud: https://soundcloud.com/0c7av3h4ck5

### Discord Servers!!
**Bounty Hunters**: An amazing bug hunting community full of developers and exploiters!!!
* Link: https://discord.gg/J5PsgKqdWq

**CyberArtByte**: My server full of bling and joy!!
* Link: https://discord.com/invite/mNAWykv67W

### New Soundcloud Track!!

{% soundcloud https://soundcloud.com/0c7av3h4ck5/hack-with-your-heart-0c7av3h4ck5 %}
Real life GTA cheat code. Fixing broken firmware on bose soundlink mini II
Tags: sideprojects
Published: 2021-06-25 20:41:16

So I got myself a bose mini soundlink II speaker a while back. It's a great little speaker with some impressive dynamic range and power in such a small box.

All was good until one day, I let it discharge too much and somehow, the firmware on the device got corrupted. The speaker would no longer charge, instead showing a red flashing light.

I went online, read forum posts and even contacted bose support. Everyone told me to put it in shipping mode and back... but to no avail. 
Bose ended up telling me to ship it to them and they would fix it, but since it was no longer un guarantee, I would pay for shipping and the repair. This would cost way more than just buying the speaker second hand on ebay, so I opted to not fix it.

Fast forward to multiple months later, and I stumble upon a [youtube video](https://www.youtube.com/watch?v=GSx7GgYrE7Q), with music in the right ear and explanations in the left, telling me there is actually a way of fixing this. All you do, is download the firmware update software from [bose's website](btu.bose.com) and flash new firmware on it.

I unfortunately already tried this, but since my bose is already on the latest version, the tool won't even attempt to update it. But this is when I am transmitted the ancient knowledge, a cheat code not even bose support know's about:

A, D, V, Up, Down

And just like that, the firmware update software is now in dev mode and will allow flashing of old and current firmware (you enter this code on the web-interface of the firmware update tool).

I flash my speaker with the current firmware. It gets stuck at about 80% but this time, it is actually charging. I allow it to charge for a few hours, then flashed it a second time. And this time it works.

I wonder what other cheat codes exists out there... and why bose creates tools that are never used.
How to open a PDF in flutter [2021] No Errors!
Published: 2021-06-25 20:33:39

Hey Devs,
Today we are gonna open a PDF in our flutter project, I m creating this post cause I was struggling to add PDF in my project. Let's Get Started.

So you can create a file named pdf_page.dart or any file you want. 
```  syncfusion_flutter_pdfviewer: ^19.1.69-beta``` Add this in your pubspec.yaml I m using this version nd will recommed you to use the same. 
I won't be wasting your time in making this in four steps, I hope you will understand code by yourself...
```
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';
import 'package:flutter/material.dart';

class PdfPath extends StatefulWidget {
  @override
  _PdfPathState createState() => _PdfPathState();
}

class _PdfPathState extends State<PdfPath> {
  final GlobalKey<SfPdfViewerState> _pdfViewerKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Books'),
            backgroundColor: Colors.redAccent[400]),
        body: Padding(
          padding: const EdgeInsets.only(),
          child: Center(
            child: SingleChildScrollView(
              child: Center(
                child: Column(children: [
                  SfPdfViewer.network(
                    'http://www.africau.edu/images/default/sample.pdf',
                    key: _pdfViewerKey,
                  ),
                ]),
              ),
            ),
          ),
        ));
  }
}
```
Hope It worked, If didn't please drop the error in comment section I will try my best to resolve your error :)
See you all in the other one
Best Youtube Channels to learn Flutter [2021]
Tags: flutter, fluttter2021, bestyoutubechannel, learning
Published: 2021-06-25 20:16:00

Hey What's Up?
In this article we are gonna talk about best Youtube Channels to learn Flutter. Obviously We would be starting from flutter's official youtube channel, 

1. FLUTTER 
2. RetroPortal Studio
3. MTECH Viral
4. TVAC Studio
5. Flutter Explained

I know I missed many out, So please share in the comments, But Personally these are the only channels I learn nd implement flutter from...

Bye See you in the other one!
Why is learning Kubernetes so Intimidating?
Tags: kubernetes, devops, tutorial
Published: 2021-06-25 20:14:37

---
canonical_url: https://austin-king.medium.com/why-is-learning-kubernetes-so-intimidating-8ff9c60293fe
---

During customer interviews, while I was building OpsDrill, I was shocked by something. Very talented DevOps folks were having a hard time learning Kubernetes.

“I’ve been dragging my feet on learning”

“I’ve started and given up 3 times”

“I don’t know where to start, afraid it will mess up my laptop”

“It’s overwhelming”

I was relieved to hear this as I also found it intimidating.

There is a lot of great free tutorials out there, but some of it feels like jumping straight into “Kubernetes 301: PhD in Containerology”.

([Kubernetes the Hard Way](https://github.com/kelseyhightower/kubernetes-the-hard-way) I’m looking at you. An amazing resource, but a very steep on-ramp for busy DevOps folks.)

In the past I’ve built games for learning as well as spaced repetition apps for helping to memorize materials. Would you be interested in

* An adventure game
* Played 15 minutes a day
* Using real Kubernetes commands
* **To really, finally, learn Kubernetes?**

![Pirates of the Kubernetes mockup of a game played with real kubernetes commands](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0catm5ugb65qfo85iic.jpg)

### Pirates of the Kubernetes waitlist for early access

Join at https://piratesofthekubernetes.com
Metric visualization and analysis
Published: 2021-06-25 20:09:47

The pictures in this blogpost will depict two charts each - they differ only in the gray vertical lines. In the upper chart the gray lines represent ground truth, in the lower chart the result of the algorithm. 
Blue line represent values of algorithm's metric on frames, orange - threshold.


My first observation is that the threshold is often too high. It can illustrated in this picture:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0ilnr3o957jsced5ogf.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgzcl3kbz2dqzf8d1kj8.png)


The second observation is that parameters (min interval and max interval) are often bad for the algorithm (especially the max parameter):
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yiyeco04v7s5ufj9ogu.png)
You can see that algorithm marked exactly 500th frame as scene change although there are frames before it with higher metric.


The third observation is that often the algorithm does not work well because of the threshold, but because of the metric:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1u1r6qynth0nomjf9g5j.png)


The fourth observation - the threshold in general does not behave optimally, it does not take into account the following values of metrics, because of this a lot of consecutive frames can be marked as scene changes:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vftu2rxzo9br1rc9bd64.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c381dgagx3cnwqptx8uo.png)
You can see that around 2000th frame the metric consistently grows, followed by a delayed growth of the threshold. Because of this, about 100 consecutive frames are marked as scene changes. Here is closer look on it:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ny9b1bt67z83v510vr64.png)



Summary:
* Threshold often is way too high for single spikes of metric values
* Max interval parameter can be improved, it better to mark previous frames with higher metric values
* Threshold does not take into account the following values of metrics
* Metric can be wrong (usually either the metric works well on the whole video or poorly on the whole video)
Web Performance Optimisation Tips #1
Tags: jsperformance
Published: 2021-06-25 19:45:34

Hey devs, I have started a new series for web performance optimisation. Seeing the tip may looks small but it will makes huge impact in your website.

Whenever you want to toggle visible state of a dom always use visibility property, try to avoid display property.

Let's take an example, in google search input you can see a clear icon on the right. Initially the clear icon dom will be in display none state. Once user started to type, the clear icon will be shown on the right of the search bar. To make the icon visible the display none state will be changed as display block. 

Instead of using display property we can use visibility: hidden and visibility: visible.

Why we should use visibility property instead of display property. Display property add and remove the dom in document tree. But visibility property just hide and show the dom in document tree. 

We will discuss this more briefly in next post.

See the paint flashing on toggling the visible state of the dom using display property.

![Example gif1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irts3iopndys3vz3u3fi.gif)

And this is using visibility property.

![Example gif2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/al16wuzjmlayqdd9o9hj.gif)

Makes sense right!😀😀
How tedious can job Search as a frontend developer be?
Tags: css, javascript, react, html
Published: 2021-06-25 19:16:12

  At one point in our coding career we all feel the need to work on something else other than dummy projects from youtube and todo-apps

  that feeling also comes with the idea to start searching for a frontend developer job with some cool pay

  truth be told the journey of job search is really tedious

  i started of my job search as an 18 year old last two months i had no idea of what i needed in order to land my first job,but honestly speaking i've gat the skills man

  i started out building some basic projects so as to fill up my github repo.
  i built few projects like a todo-app ,weather-app,chat-app, and also a movie-search-app , i also exploited several api's
 after this few things i started applying for jobs and in two weeks no response from any job which i applied for
    offcourse i became frustrated,then i decided to go farther , in previous searches i didnt have a resume neither did i have a portfolio to show my works, so i started working on my portfolio it was not much of a deal thou --> https://hillaryvictor.netlify.app

after that i developed a quite cool resume and also decided to have an online presence and i chose Dev.to 
  well my job Search continued , a week passed two weeks passed and after few more weeks i began recieving calls from companies, usually your skills will be tested and few times you may be rejected but whats it all about?

   keep striving a single||multiple rejection does not mean you arent worth it

at the time 
of writing this i am currently undergoing a technical interview

   Keep it cool out there guys||girls and keep codding!!
Turn Swagger Theme to the Dark Mode
Tags: css, tutorial, swagger, aspnetcore
Published: 2021-06-25 19:07:47

---
title: Turn Swagger Theme to the Dark Mode
published: true
date: 2021-06-25 18:43:46 UTC
tags: CSS,tutorial,swagger,aspnetcore
canonical_url: https://amoenus.dev/swagger-dark-theme
---

So you have Swagger integrated into your .NET Core Web API application. Maybe even using my [previous guide](https://amoenus.dev/swagger-for-dotnet-core-webapi). And now you want to customize it a bit.

I prefer my UI’s dark. So, when I am presented with a predominantly white screen from the Swagger default theme, I immediately want to change it. Luckily SwaggerUI supports CSS injection.

Here are the tweaks that we need to make:

## Changes for `Startup.cs`

### Enable support for static files in a `Configure()` method

```
app.UseStaticFiles();

```

### Add folder structure with custom CSS

```
wwwroot/
   └──swagger-ui/
      └── SwaggerDark.css

```

![Folder structure and location of SwaggerDark.css](https://cdn.hashnode.com/res/hashnode/image/upload/v1598982216244/9OHU5YoJd.png)

### Inject custom CSS

Now we can inject the custom CSS with `InjectStylesheet()`

```
app.UseSwaggerUI(c =>
{
    c.SwaggerEndpoint("/swagger/v1/swagger.json", "MyAPI");
    c.InjectStylesheet("/swagger-ui/SwaggerDark.css");
});

```

You’ve read till the end, so as a thank you here’s the link to the dark theme I just mentioned. It even comes with a dark scroll bar and custom drop-down arrows. https://github.com/Amoenus/SwaggerDark/

Thank you for reading. Consider subscribing and leaving a comment.