teleren/devto huggingface dataset:
DevAnalytics at DOHackathon: Even more stats available for you
Tags: dohackathon, typescript, angular, devanalytics
Published: 2021-01-02 21:19:06

Yesterday, [I added the top5 most viewed/reacted/commented articles](https://dev.to/sandordargo/more-statistics-added-58ok), today I did something similar for tags.

From each tag statistics card, you can get the top 5 tags in terms of the inspected attribute:
- Top 5 most viewed tags
- Top 5 most reacted tags
- Top 5 most commented tags
- Top 5 tags with most views per article
- Top 5 tags with most reactions per article
- Top 5 tags with most comments per article

You also get for each of these, how many articles you posted with a given tag.

![Your best tags](https://dev-to-uploads.s3.amazonaws.com/i/amf8faseg6zj5dcu88yv.png)

I also made the UI a bit more consistent. I realized today that for the articles analytics, I always followed the views-reactions-comments order in the grid layout, while for the tag analytics the opposite.

Now they both follow the same.

I almost forgot that today I also added a progress bar. Based on the READMEs I picked [@ngx-loading-bar/core](https://www.npmjs.com/package/@ngx-loading-bar/core) and it was [super simple](https://github.com/sandordargo/dev-analytics-frontend/commit/c0db3542a0ee19f9b2eecb4fec6051a4f707e187) to add it to my project;

[Feel free to try](https://dev-analytics-frontend-tudwb.ondigitalocean.app/) and leave any suggestions you might have.
Managing Software Projects
Tags: projectmanagement, management
Published: 2021-01-02 21:04:46

---
title: Managing Software Projects
published: true
description: My thoughts on how to successfully keep shipping software projects
tags: projectmanagement, management
canonical_url: https://joshhornby.com/blog/managing-software-projects
cover_image: https://joshhornby.co.uk/assets/images/managing_software_projects.jpg
---
During my time working on software projects, I’ve began to spot trends in what makes a successful project. The most common trait I've observed in successful projects is great communication between teams, seemingly the software methodology used has little to do with if a project is a success.
This post outlines some methods I've used in the past to successfully manage projects.

## Kick off meeting

In order for a successful project all stakeholders need to be aligned on the expected outcomes. I find the easiest way to achieve this is by bringing everyone involved on the project together for a kick off meeting. 

The purpose of this meeting is to ensure everyone understands **why** this project is being worked on, the **goals** (eg. what does success look like?) and **how** it’ll be approached. If during this meeting you have to field lots of questions, I find it’s worth cycling back round and not starting the project until the team are all in agreement.

Continue to read on https://joshhornby.com/blog/managing-software-projects
Data visualization as a service on the Digital Ocean app platform - Roadblock
Tags: dohackathon, puppeteer, node, digitalocean
Published: 2021-01-02 21:00:03

![Puppeteer failing](https://dev-to-uploads.s3.amazonaws.com/i/8dy5202u1z388obx8g3o.png)
As part of my proposed solution to the Digital Ocean App Platform hackathon solution, I require Puppeteer for rendering graphs via API and downloading the graph as an image. It works seamlessly on my local machine and hopefully, it should work on the app platform. 

However, from the image above, puppeteer fails to launch with the errors above. I tried to look for a way to install the required dependencies all to no avail. I did some quick Google searches to find a solution to it without success. Finally, I found this link with information on the situation in the Digital Ocean community support platform here: https://www.digitalocean.com/community/questions/how-to-setup-puppeteer-in-nodejs-app

Luckily, the problem is being worked on by the Digital Ocean engineering team as stated in the comment found in the link above.

Nonetheless, in order to make sure that the API service is functional by the submission date for the hackathon, I've decided to extract and create the Puppeteer rendering service via an external HTTP service and return the rendered graph image to my App Platform service to store on the DB. 

In addition to this, I have updated the home page of my app to enable people to access and try the app functionality without having to go through the process of signing up and verifying their email. You can take a look here: https://vaasapp.co/

Also, I'm happy about the Digital Ocean App Platform insights page which gives insights into CPU and memory usage as well as bandwidth consumption which are necessary data for optimizing your app and checking its health status. 

![Insights page](https://dev-to-uploads.s3.amazonaws.com/i/hxyhi5vp20gnwfhmo1sn.png)

Hopefully, I would be able to bootstrap the puppeteer rendering service soon and be ready to showcase the API by the submission date.
Do you know what happened when paypal use nodejs?
Published: 2021-01-02 20:55:53

### When PayPal use nodejs to rebuild some codes with it instead of Java/Spring , They noticed that :

***

> Built twice as fast with fewer people.
> 33% fewer lines of code.
> 40% fewer files.
> 2X request / sec.
> 35% faster response time.

#### see you in another Do you know ! :)
How to use TinyMCE In Your Custom Voyager View
Tags: laravel, voyager, custom, tinymce
Published: 2021-01-02 20:55:38

TinyMCE is an online rich-text editor released as open-source software, its website describe it as the most advanced WYSIWYG HTML editor designed to simplify website content creation. It has the ability to convert HTML textarea fields or other HTML elements to editor instances. It is the default textarea fields editor used in Voyager (The Missing Laravel Admin).

Here are the steps in including TinyMCE in your custom voyager view:

1. Create textarea field add the class **richTextBox** to the textarea. i.e

```html
<textarea  class="form-control richTextBox" name="body" required>
{!!  old('body') !!}
 </textarea> 
``` 

Here is an  [example commit to voyager source code](https://github.com/the-control-group/voyager/blob/20f6b68b6bcf96d83a6cb2413e8f12704e617712/resources/views/formfields/rich_text_box.blade.php) where TinyMCE was implemented and you can draw some ideas from it.

2. Customize the minimum height of TinyMCE: The default minimum height of TinyMCE in Voyager is 600 in height, and it is represented with the min_height variable. 

```JavaScript
var additionalConfig = {
      min_height: 100,
}

$.extend(additionalConfig, {!! json_encode($options->tinymceOptions ?? '{}') !!})

tinymce.init(window.voyagerTinyMCE.getConfig(additionalConfig));
``` 


Source:

 [List of possible key and value](https://github.com/the-control-group/voyager/blob/d0d9f2818e2cf1bff146f7fcb4ccb522f3d4ba90/resources/assets/js/voyager_tinymce_config.js)
Git On Linux
Tags: linux, github, git
Published: 2021-01-02 20:40:33

Git, that one thing that is like GitHub but in the terminal. Well, have you wondered how to install git on Linux? Well in 3 easy steps you can

### Steps
**#1.** Open up the terminal
**#2.** Run this command: `sudo apt install git`
**#3.** Verify it by running this command: `git --version`

You need linux to do this, run  the command `git` for a list of commands you can do with git
The img loading Attribute Won’t Lazy Load Unless JavaScript is Enabled
Tags: lazyloading, images
Published: 2021-01-02 20:00:19

---
title: The img loading Attribute Won’t Lazy Load Unless JavaScript is Enabled
published: true
date: 2021-01-02 19:59:30 UTC
tags: [lazyLoading,images]
canonical_url: https://codelab.farai.xyz/til/img-loading-tracking/
---

_[The img loading Attribute Won’t Lazy Load Unless JavaScript is Enabled](https://codelab.farai.xyz/til/img-loading-tracking/) was originally published on [Farai's Codelab](https://codelab.farai.xyz/)._
* * *

The [`loading` attribute](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading) let’s you control how images and iframes are loaded. Turns out this will only work is JavaScript is enabled.

From the [WHATWG HTML loading attribute spec](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes):

> If scripting is disabled for element, then return false…This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user’s approximate scroll position throughout a session, by strategically placing images in a page’s markup such that a server can track how many images are requested and when.

Rather inconvenient but it’s not the end of the world. People are used to evey image loading whether you scroll to it or not so losing this feature may be worth intentionally disabling JavaScript given [all the ways JavaScript can target you](https://coveryourtracks.eff.org/).

* * *

Thanks for reading. If you liked this post, [support my work](/support/) by sharing this post, refering me for a job, sponsoring me on [Patreon](https://patreon.com/faraixyz), sending me money on [Ko-fi](https://ko-fi/faraixyz), [Paypal](https://paypal.me/fgandiya) or [Buy Me A Coffee](https://www.buymeacoffee.com/faraixyz). You could also use my affiliate links to buy something on [Amazon](https://amazon.com?tag=faraixyz03-20) or [Namecheap](https://shareasale.com/r.cfm?b=467188&u=2110247&m=46483&urllink=namecheap%2Ecom&afftrack=farai%2Exyz). Note that I may earn a commisions through those links.

Got feedback? Email me at [gandiyafarai + feedback at gmail dot com](mailto:gandiyafarai@gmail.com?body%3dWow%252C%2bthat%2bwas%2ba%2bgreat%2bpost.%2bThanks%2bfor%2bwriting%2bit%2521%2bThese%2bare%2bmy%2bgenuine%2bthoughts%2band%2btotally%2baren%2527t%2bfrom%2bthe%2bprepopulated%2btext.%26subject%3dFeedback%2bon%2bThe%2bimg%2bloading%2bAttribute%2bWon%25E2%2580%2599t%2bLazy%2bLoad%2bUnless%2bJavaScript%2bis%2bEnabled).
Grupo de estudos para programadores brasileiros
Tags: braziliandevs, ptbr
Published: 2021-01-02 19:43:47

Então, pessoal, eu estou começando um grupo de estudos de programação com uns amigos no discord

Se alguém tiver interesse em participar, este é o link de acesso > 

https://discord.gg/uhvbUtuxgG
Is using Jekyll for your portfolio cheating?
Tags: portfolio, webdev, jekyll, discuss
Published: 2021-01-02 19:34:19


Jekyll is highly regarded amongst the developer community for creating sleeky, minimalist and easy to navigate websites. It's widely used in conjunction with Github pages and most of the basic themes are included as an option when you create a repository. 

I've previously set up a minimal portfolio website using Jekyll before. Part of me feels as though the portfolio should show your talents and creating it purely from HTML/CSS or even using a React of Django framework speaks to this more than using Jekyll. In the midst of changing up my portfolio and blog, I would like to ask the question - Is using Jekyll to create your online developer website "cheating" so to speak?
Or is it just as good of a medium for showcasing your skills and projects? 

I guess this question also needs to take into question the purpose of the portfolio/blog. For instance, is the same level of development needed for someone showcasing their talents as a DevOps Engineer vs a Frontend or Full stack developer?
Creating a database from scratch with Node.js - Days 8-9
Tags: database, node, javascript
Published: 2021-01-02 19:20:35

Hello folks!

Here I am talking about my database project again!

I've been working a lot on this project lately 

First of all, I've written a better readme file for the project, so it's not necessary to read the code if anyone wants to just test its functionality

{% github ciochetta/learndb no-readme %} 

---

### New features

#### Driver

The project now kinda works as a driver for itself

To create the lql parser, I had to come up with a pattern for how I would receive the objects it parses

With that done, I just told the project to export the function that reads and executes these objects  

There is already documentation on how to use it on the read.me file

I've also created a repository that shows how to use it by example

{% github ciochetta/testing-luisdb no-readme %}

#### Query improvements

LQL (and the database, by extension) now support the WHERE keyword:

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

Also supports WHERE AND:

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

And I'm not gonna lie, I loved creating the function that builds the where behavior, made me feel like a functional developer, ahahaha

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

---

And that's all folks

I will probably start working on the UPDATE and DELETE keywords tomorrow
Module 2 - HTML and CSS basics
Tags: html, css, tutorial, scrimba
Published: 2021-01-02 19:20:23

Because this module was all about basics I wanted to make a bit more interesting and made my own little review and description on **[Scrimba](https://scrimba.com/scrim/c6a8NbS3)**.
_If you are confused just click **"Run"** or **"Preview"**_


Feel free to write a comment or give me an advice (I'm bad at web design).
Goals and More in 2021
Tags: 52postproject, devjournal, motivation
Published: 2021-01-02 19:00:27

A goal I’ve had for a long while was to write one post every week. It didn’t have to be long or something profound, just something. Anything. 

### The Challenge 
The #challenge I have for myself, write one thing a week, about anything, published every Friday(or Saturday, Sunday, or any day that ends in _y_. Just get it out!).


### My _Ideal_ Outcomes
The big mental hurdle I’ve had with this is what do I write about? _Anything._ I’ve had a few years of mishaps and broken code that I’ve fixed and maybe someone else could learn from my mistakes? No pressure honestly, I’m not perfect, no one is. Half the time, like when I’m onboarding new coworkers, I wince at my old work and mutter “Do as I say, not as I do.” (Small secret, I make a note to go fix whatever I did wrong and loop it into my next PR.)

![Adventure Time - Sucking at something is the first step to being good at something](https://dev-to-uploads.s3.amazonaws.com/i/ywh60d0a9652wibj63oc.gif)
<figcaption>This is me now and forever.</figcaption>

Hey, that’s not a _bad_ idea actually. My next post can be about how I handle pull requests, from both myself and from coworkers. It will mostly be an ode to smaller PRs and my awkward OCD.
  
If anyone wants to follow along, or get started yourself, I'm tagging all these posts with the hashtag **#52postproject** for easy tracking. And on that note, I’ll end it here (I did mention these might be short didn’t I?). 

What are you plans for the New Year? Big or small, what would you like to check off your list of things?
#Day 18 and 19: Web Dev Progress
Tags: 100daysofcode, codepen, html, css
Published: 2021-01-02 18:44:33

I apologize for not being consistent here for past few days. Now, I have decided to make it a point to post my daily activity every single day no matter what the issue is.

In my Web Dev journey so far, I've made a simple fanpage kind of thing to learn Html and CSS well. I'm attaching it here. This is made with the help of video lectures by "Apna College" YouTube channel.

{% codepen https://codepen.io/_mahimasingh_/pen/OJRzrOo %}

Today, I learnt about types of selectors,colors,fonts, background and formatting in CSS. These are my today's practice work:

{% codepen https://codepen.io/_mahimasingh_/pen/PoGRGLa %}
{% codepen https://codepen.io/_mahimasingh_/pen/bGwvBNz %}


HAPPY NEW YEAR!!!
Changing caps lock key to Escape when pressed alone and Control when pressed with another
Published: 2024-03-28 16:18:36

---
title: Changing caps lock key to Escape when pressed alone and Control when pressed with another
published: true
date: 2021-01-02 18:43:28 UTC
tags: 
canonical_url: https://jinyuz.dev/posts/changing-caps-lock-key-to-escape-when-pressed-alone-and-control-when-pressed-with-another/
---

Like you before, I pretty much didn’t give a damn about remmaping my mapping keyboard because I was worried about what if I’m using someone elses keyboard? I’d be too dependent about my current setup.

But let me ask you. When was the last time you used someone elses keyboard?

After some time living inside the terminal, I noticed that it’s quite hard to press the `control` key especially when you are using a Mac keyboard layout.

It was kinda annoying to reach the `control` key when I want to stop a running program via `<Control C>` or clearing the screen with `<Control L>`.

It was when I was browsing through reddit and found a post where people using `Vim` were suggesting to remap `Caps Lock` to `Escape`and some were also suggesting to remap `Caps Lock` to `Control`. My current configuration in `Vim` already mapped `jk` to `Escape`so I took the route of mapping `Caps Lock` to `Contol`. Also, I don’t use caps lock much often.

After a few weeks of getting used to my new `Control`, everything felt easier! I almost even questioned why the `Caps Lock` key was positioned in that beautiful spot and we don’t even use it that often.

So, you might be asking what happened to my `Caps Lock` key? I found a tool called `Karabiner Elements` and it basically lets me create key combinations to execute another key. I trigger my `Caps Lock` key by pressing `Right Command + Right Shift` key together.

Thanks to karabiner, I also converted my `Caps Lock` key to be `Escape` when pressed alone and `Control` when pressed with another key.

Here’s how to configure it via `Karabiner Elements`:

1. Download and install it first here: [https://karabiner-elements.pqrs.org/docs/getting-started/installation/](https://karabiner-elements.pqrs.org/docs/getting-started/installation/)
2. Next, open Karabiner Elements and click `Complex Modifications`, then click on `Add Rule`.[![alt text](https://jinyuz.dev/static/4dd2aea28ece2f60f480d0c30cc43f6f/d9199/1.png "alt text")](/static/4dd2aea28ece2f60f480d0c30cc43f6f/cb425/1.png)
3. Click `Import rules from the Internet (open a web browser)`
4. Search for `caps lock` and then look for `Change caps_lock key (rev 4)` then click on `Import`.[![Change caps_lock key](https://jinyuz.dev/static/6699f57f49c4e3b1dafd0d0d062275f2/d9199/2.png "Change caps\_lock key")](/static/6699f57f49c4e3b1dafd0d0d062275f2/fe83d/2.png)
5. Something similar to this should appear and you should click `Enable`:[![Enable](https://jinyuz.dev/static/76bf275bf15ca1488fe3ebb674dea08f/d9199/3.png "Enable")](/static/76bf275bf15ca1488fe3ebb674dea08f/e3729/3.png)

And we’re done!
Object-fit: o que é, pra que serve, como usar
Tags: css
Published: 2021-01-02 18:25:13

_Créditos da imagem de capa: Just about Photography_ 

Você já ouviu falar da propriedade object-fit do CSS3? Se não, vale a pena ler este artigo, pois ela é bem interessante de se conhecer. 

O object-fit é uma propriedade que permite que faça ajustes no redimensionamento da imagem dentro de um container, o que significa que você pode escalar imagens, ocupar todo o container e resolver aquele famoso problema daquelas imagens bastante desproporcionais e que você precisa redimensiona-las dentro de um quadrado ou círculo, por exemplo.

Os principais valores dessa propriedade são: 

- fill
- cover 
- none 
- scale-down
- contain

O **fill** é o padrão. Ele dimensiona o conteúdo dentro do container ocupando todo o espaço e não necessariamente irá deixar a imagem proporcional. Para isso é necessário utilizar o valor **cover** (que é o mais utilizado). Ele irá dimensionar o conteúdo proporcionalmente no container, porém o mesmo acaba "cortando" alguns trechos da imagem. Se você quer manter a imagem proporcional, mas dentro do elemento sem mantê-lo esticado ou cortando algum pedaço dela o **contain** é a melhor solução, mas vale ressaltar que ele não irá ocupar todo o espaço como é o cover. O **scale-down** é bem parecido com o contain, porém diminui a escala. Por fim temos o **none** que não redimensiona a imagem. 

O exemplo abaixo mostra bem o que foi escrito acima:  

{% codepen https://codepen.io/bezzocoaline/pen/MWjQzWv %} 

Para saber mais (incluindo compatibilidade com os navegadores) vocês podem acessar o [Mozilla em português](https://developer.mozilla.org/pt-BR/docs/Web/CSS/object-fit)  para mais informações. 

Até a próxima!
Named vs. Default Exports in ES6 Modules
Tags: javascript, webdev
Published: 2021-01-02 18:08:54

JavaScript Modules using ES6 syntax have two different types of exports: **named** and **default**.

There are differences in how they are declared as well as how they are imported.

## Named Exports

Named exports can be used to export several variables from a module. The `export` keyword can be used for each variable that you want to export. When importing, you use [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to assign the exported variables. The imported variables must use the same name as the exports.

```js
// foo.js

export const foo = () => {
  console.log("foo");
}

export const bar = 123;
```

`foo.js` has two named exports, `foo` and `bar`, which can be imported from any other JavaScript file like:

```js
// anotherComponent.js

// import the foo and bar named exports from foo.js
import { foo, bar } from "./foo";

// both variables can now be used
foo(); // logs 'foo' to the console
console.log(bar); // logs the number 123 to the console
```

- Named exports can be used to export and import several variables from a module.
- **When using named exports, the imported variables must use the same name as the exported variables.**
- If you want to rename imported variables, you can use the `as` keyword:

  ```js
  import { foo as myVariable, bar } from "./foo";

  myVariable(); // logs 'foo' to the console
  ```

## Default Exports

You can only have one default export in a module. You use the `default` keyword to specify which variable is the default export. When importing default exports, any name can be used for variable assignment.

```js
// baz.js

const baz = () => {
  console.log("baz");
}

export default baz;
```

Now that `baz.js` has defined its default export, any other JavaScript file can import and use the `baz` variable by importing as so:

```js
// anotherComponent.js

// import the default export from baz.js
import bazDefault from "./baz";

// the imported variable can now be used
bazDefault(); // logs 'baz' to the console
```

We've successfully imported `baz` into a variable called `bazDefault`.

- **Each module can only have one default export**.
- You define the default export using the `default` keyword.
- When using default exports, we can choose any name for the variable we import into. I chose `bazDefault`, but could have just as easily called it `baz`, `someVariable`, or `apples` and it would have been perfectly valid.

## Summary

So that's it, the differences between named and default exports in ES6 and how they are used.

Key points:
- Modules can have several named exports, but only one default export.
- When importing, named exports must use the same name, while default exports can be imported to any name.
Santa's Regex to Town
Published: 2021-01-02 18:06:40

To the bewilderment of my friends and co-workers, regex (or regular expression)is one of my favorite things in the world. Not only is writing them fun (think ciphers!), but they can be extremely useful as well! Today we're going to see how we can use it to help out our pal Santa Clause. 

Here is a brief rundown on regular expressions before we get started:  
 -- What is it?: [a sequence of characters that define a search pattern](https://en.wikipedia.org/wiki/Regular_expression).