teleren/devto huggingface dataset:
Match Valid HEX/HEX+A Color String using Regular Expression
Tags: javascript, regex
Published: 2020-10-24 03:02:00

HEX color normally accept 6 input of `0` to `9` and `a` to `f` excluding the hash prefix, and they are case insensitive. I put the important part in a group just in case you want to take it using `exec()` or `match()`:

``` js
let color = /^#([a-f0-9]{6})$/i;
```

Sometimes, HEX color can be narrowed down into 3 input (e.g. from `#aabbcc` to `#abc`):

``` js
let color = /^#((?:[a-f0-9]{1,2}){3})$/i;
```

FYI, current CSS specification allow us to store alpha channel in a HEX color. So `#000000`, `#000`, `#000000ff` and `#000f` means `black`. `#00000000` and `#0000` means `transparent`:

``` js
let color = /^#((?:[a-f0-9]{1,2}){3,4})$/i;
```

Narrow down the pattern:

``` js
let color = /^#((?:[a-f\d]{1,2}){3,4})$/i;
```
I Did it!
Tags: hacktoberfest
Published: 2020-10-24 02:17:45


<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 

Hello my new world!
I call me Marcelo or Limarceu, I am so exciting in this moment for got this challenge done. I am new on dev world. Less than a year.

<!-- Are you brand new to open source? What about coding in general? Tell us about how you got here →

I'm a newbie on open source. Before this event, I was studying Python and your libraries and other class relationship to.
But, Hacktoberfest push me up to do work in open source and to see that is so good.


<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->

I learned to do git from terminal, bash and vscode, I learned to do my own source control, I passed to control all my jobs, classes, as such my pratices folders. My skills in git still is basics: status, add, commit, fetch, push, pull, checkout, branch, github(forks and clones). I know there are many funtions to learn, many possibles to better my works. But, I will learn it.


<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->

My contribs was and are in hackerrank codes, tasks and challenges. Haikus I did two haikus (but I just must count one commit). 

https://github.com/akshay-zzZ/hackerrank_solutions
https://github.com/AnuragAnalog/hackerrank
https://github.com/pefelippe/Algorithms
https://github.com/do-community/cloud_haiku
https://github.com/Kushal997-das/Hackerrank

<!-- Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
"vertical {Boolean} false" property is not working in coral radio group
Tags: help, discuss, aem, adobe
Published: 2020-10-24 01:50:31

Hey Devs,
This radio group (sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup) in aem6.5 doesn't support "vertical {Boolean} false" property. 
Can anyone help in solving this?
Using Gource to visualize activity on a git repository
Tags: git
Published: 2020-10-24 01:39:56

---
title: Using Gource to visualize activity on a git repository
published: true
tags: #git
canonical_url: https://darraghoriordan.com/2020/10/11/using-gource-to-vizualize-a-git-repo/
---

At the end of a project or when a person is leaving a team or project, it’s nice to show the impact that they had on the software visually. 

Git has some built in statistics that will show you tables listing additions and deletions, commit counts and that kind of thing. But you can use gource to create a cool time series visualization showing the changes over time.

It’s well worth checking out this tool.

<!-- end excerpt -->
## Installing gource

Gource is free! So you just need to install using a package manager. On Mac you can use this.

```
brew install gource
```

## Running a visualization

You need to change to root of the git repository and then run the command. The gource help has details on all the various options.

For showing everyone’s impact over time for a 6 month project with 10 team members I found that this command worked best for me

```
gource --highlight-users -s 1 -f --hide filenames
```

## Screenshot of result

The video is way cooler but here is a screenshot from the visualization for my blog as an example

[![screenshot of visualisation](https://darraghoriordan.com/static/44aed44e11563c27e928610c28bd2199/1c72d/darraghcomss.jpg "screenshot of visualization")](/static/44aed44e11563c27e928610c28bd2199/856de/darraghcomss.jpg)

You can see all the command line options on the readme in the repo: [https://github.com/acaudwell/Gource](https://github.com/acaudwell/Gource)
OSD600 - Lab 5 Refactoring and Rebasing??
Published: 2020-10-24 01:39:15

This week we learned in Seneca OSD600 about refactoring and rebasing.
[Lab 5](https://github.com/Seneca-CDOT/topics-in-open-source-2020/wiki/lab-5) required us to view our [Release 0.1](https://github.com/strawberries73/OSD600-Journey-on-rocky-trails) code thoroughly.  Clean it up by removing unnecessary comments, improve proper naming and just making it better without changing the outcome. 

I thought it was more complex then it really was.  So there I was staring at my code trying to figure out what to change. My friend told me I should change all the "let" and "var" to const. He also said I should make sure I have proper naming. I had learned from some awesome professors at Seneca to use proper naming and use good coding practices to make it more readable. This was a problem!  

I didn't know what to do because I had proper naming and no global variables. Luckily I did have some minor things I could do. 

        1. Remove unused const colors = require('colors');
        2. Remove some comments // 
        3. Remove unnecessary bloat console.log(process.argv) 

As began to take my steps in the process, I had an internal thought that I was wasting my time with learning these tedious steps.  After each change, I commit with a comment.  Then I had to do the rebase.  I was worried about messing this one up.  I honestly found this experience weird. I amended the commit, [merged](https://github.com/strawberries73/OSD600-Journey-on-rocky-trails/commit/298b27e0f094f2f2550fedb3a8b8d056342f10ff) the refactoring and pushed to the master.

To my surprise, I finally understood the necessity and simplicity of not only refactoring but rebasing.  I'm glad I learned these steps and will definitely seek the opportunity to do this again.
Scramble, a puzzle game in JavaScript
Tags: games, canvas, javascript
Published: 2020-10-24 01:38:35

---
title: Scramble, a puzzle game in JavaScript
published: true
description: A small but fun game made with vanilla JavaScript
tags: games, canvas, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/lykfxl1eczn4uduc27tm.png
canonical_url: https://github.com/victorqribeiro/scramble
---

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

I've been away for quite some time, but I'm back. I couldn't sleep one of those days so I end up writing this simple yet fun game. Hope you like it.

Play it [here](https://victorribeiro.com/scramble)

Source code [here](https://github.com/victorqribeiro/scramble)
How to make your localhost accessible to the internet with ngrok
Tags: webhooks, devops, fullstack, ngrok
Published: 2020-10-24 01:26:05

Because of some popular programming memes, I thought localhost is, well, only exist in your local machine. It's true, but on top of that, you can actually make it accessible to the internet, which means available to everyone, for some amount of time (not forever or anytime).

In order to do this, it's really simple, all you need to download ngrok . Here are the list of video tutorials from Twilio:
https://www.youtube.com/watch?v=oy13mDsXC4s ,
https://www.youtube.com/watch?v=S1uExj7mMgM ,
Only a few simple things you need to do.

And some articles about it:
https://www.freecodecamp.org/news/testing-webhooks-while-using-vagrant-for-development-98b5f3bedb1d/ ( don't worry about the virtual machine, you don't need one .)
https://medium.com/@veneciacalista/how-to-use-ngrok-for-react-84bf2acc3907

Well, you might wonder, why would you ever need to expose your local host to anyone? For me, I was trying to use an online service to send a POST request to my localhost database. Obviously the online service doesn't like that, it requires an URL that can be accessed by online tools, not some http://localhost:4000 , so, ngrok helped create a valid URL that can be accessed to my localhost, and by any requests from the internet. 

It's kinda like allowing the world to see a corner of your bathroom. With you offer it and nobody really ... cares.

Perhaps you will never need to use it, but, for me, without knowing ngrok, I might take forever to figure out how to access to my current company's database which are complicated. I figured it would be hard to try it on my local machine. However it was really easy, a few reading documentations and boom it is done with ngrok.
Git Rebase
Tags: opensource, csharp, github, git
Published: 2020-10-24 00:41:17

This week, we're refactoring our [console app](https://dev.to/yuanleemidori/are-you-a-bad-link-or-a-good-link-fgb) to practice **git rebase** and **git amend**. 

After the first time publishing this console app, I found something that I can improve such as duplicate code design, bad formatting with too many spaces and newlines. Later on, my classmates and I added more features and changes to the console app and it bought more duplicate code. I kept telling myself I will definitely come back and fix them... one day.

And this is the day!

I made 3 changes for refactoring my program. Firstly, the missing file exception is thrown by all the options in my application. I made a customize exception to throw the exception message of something like "file missing..." with the input option name. Secondly, I extract the changing console output color and printing status with URL lines of code to a reusable function. I separate them into different colors. The red function is designed to bad/unavailable URL and the green function is designed to good/available URL). By passing the status name (good or available) and the URL, the output message can be customized. Lastly, I remove the extra spaces and newlines, and add the spaces after keywords to improve readability. 

After making the above three commits, I use `git rebase` to squash them into [one commit](https://github.com/yuanLeeMidori/OSD600.GoodLinkOrBadLink/commit/18ea7fb48725146059a39212cfa8af4209449dba). Then, by using `git commit --amend`, the commit message is changed to the required format. For practicing **git amend** command, I intentionally neglect one changed file in my first commit and then use `git add <neglected file>` and `git commit --amend --no-edit` to add this file.
Hello! Writing functions/mathematical models/anything that has crazy integrals, probability/you get my point from scratch!
Published: 2020-10-24 00:40:52

Hello, I don't know where it came from, but I decided I want to actually try and write myself some math-related programming(Not machine learning, not AI necessarily, not physics modeling, just experimenting with taking advanced modeling/equations/tricky stuff) from SCRATCH. like no Numpy, No TensorFlow, No fancy I'll build you a probability distribution for you. More for me and skill development- enhancing both math capabilities and programming.
What do you think about doing it with Rust?
Anyone want to make it a joint effort?
Ron from Israel(Hopefully we could make an international team :-) )
My typical routines at job as a full time software developer
Tags: job, java, todayilearned
Published: 2020-10-24 00:28:53

![Fuel](https://dev-to-uploads.s3.amazonaws.com/i/ghz245x7bkhe7ggmy4f4.jpg)

# Early morning
**Scrum daily stand-up meeting**
* Strive to talk less than 2 minutes.
* Situation reports for yesterday - what I have achieved, be it reviews, story implementation, bugs fixes, etc.
* Briefly announcing my targets for today: which JIRA tickets or 2nd level support issues that I might need to solve.
* Occasionally: asking present colleagues 1 or 2 questions on certain matters.

**Coffee**
* 1 cup of double cappuccino with 1 piece of stavia tablet.
* Brought back to my work desk.
* Read my tickets on JIRA for the current sprint.
* Wrote the today's TODO's on one Post-It, no more, no less. Stick it to the bottom panel of my main monitor.

**Firing up the machine**
* IDE
* database client application
* remote SSH client
* bash terminal

# Before lunch
**Actual works**
* Coding, or
* Part 1 of 2nd level support issues: by analyzing log entries of related processes on remote servers or database entries, before executing appropriate measures.
* Part 2 of 2nd level support issues: preparing brief reports, then write e-mail to concerned parties.
* DevOps - attending problematic CI/CD processes on Jenkins.

# After lunch
**Continuing actual works**
* Coffee (see above), then
* Back to coding, or
* Do a coding review, or
* Writing documentation on Confluence (it's like a Wikipedia): release notes, updating module's descriptions, or
* Testing
* DevOps - assisting the deployments in different environments

# Late afternoon
**Cooling down**
* Answering emails, if necessary.
* Casual reading on the Internet: tutorials, news, articles,
* Editing or writing articles in Confluence, e.g., Today I Learned
* Summing up the works of the day: writing the talking points for tomorrow's daily stand-up meeting,
* Turn off the computer, pack up, and go home.
Valor de una marca personal
Tags: beginners
Published: 2020-10-24 00:06:14

Todos tenemos algo que enseñar y ofrecer al mundo, empresas o clientes. Pero muchas veces subestimamos nuestros conocimientos, nuestras habilidades, el valor que tenemos y la importancia de tener y fortalecer una marca personal.


Actualmente vivimos en un mundo muy competitivo, y lleno de gente profesional como tú, con las cuales tienes que competir para lograr ocupar una vacante o ganar un nuevo cliente. Y es algo que la universidad no te prepara, no te da esa llave maestra para lograr obtener ese trabajo que soñaste, pero existe algo maravilloso con lo que puedes llegar a destacar entre los demás, tu marca personal.


Yo hasta hace muy poco desconocía que era una marca personal y el gran valor e importancia que tiene formar una. La marca personal es construir alrededor de nuestra persona una marca, con el objetivo de destacar sobre los demás de manera personal o profesional, con la cual generamos una presencia hacia un mercado o audiencia en específico. La marca personal nos ayuda a proyectarnos en los ojos de los demás.

Una gran ventaja de tener una marca personal es que nos da un valor agregado como profesionista al momento de buscar trabajo o clientes nuevos. Debido a que en la actualidad las personas que te buscan, cada vez están menos interesadas es tu hoja de vida, y más en lo que sabes hacer, lo que has logrado y todo aquello en lo que colaboras.

Y tú , ¿ya tienes tu marca personal? ¡Que esperas para empezar a crearla y crecer!

Espero que te sirva este pequeño artículo para orientarte un poco sobre la marca personal, y te invito a que me dejes tus comentarios.
How to lazy load images in websites the easy way?
Tags: html
Published: 2020-10-24 00:00:00

---
  title: How to lazy load images in websites the easy way?
  published: true
  tags: HTML5
  date: Sat Oct 24 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/native-image-lazy-loading-html
  cover_image: https://melvingeorge.me/_next/static/images/main-ef4dcf58b9065bc98317df2bbc670ab6.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/native-image-lazy-loading-html)
  
Lazy loading images is one of the techniques to decrease the initial page load of a website and to increase performance. Lazy loading images on websites is pretty easy these days.

To lazy load images natively in the browser, you can declare the `loading` attribute to be `lazy` in the `image` tag.

```html
<!-- Lazy Loads Images -->
<img src="https://via.placeholder.com/150" loading="lazy" />
```

Adding `loading="lazy"` will help to reduce the initial page load of a website.

If you don't want lazy loading in some images or want the images to load when the website loads, then you can use the `loading="eager"` attribute in the `image` tag or not having a `loading` attribute in the first place 🙂.

```html
<!-- Loads Images When Website Loads -->
<img src="https://via.placeholder.com/150" loading="eager" />

<!-- OR not use the loading attribute -->
<img src="https://via.placeholder.com/150" />
```

See the compatibility for various browsers on [Can I Use](https://caniuse.com/loading-lazy-attr).

See this example live in [JSBin](https://jsbin.com/gahiyewuwi/1/edit?html,output).

### Feel free to share if you found this useful 😃.

---
How to sort an array alphabetically
Tags: beginners, javascript, performance
Published: 2020-10-24 19:29:38

---
title: How to sort an array alphabetically
published: true
date: 24/10/2020
tags: beginners, javascript, performance
canonical_url: https://adamlacombe.com/blog/how-to-sort-an-array-alphabetically
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/b5kkj8qztwki7375v7p0.png
---

## String.localeCompare()
If you're working with a relatively small array, you could use [localeCompare()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).

```typescript
const arr = [
  {
    name: "Orange"
  },
  {
    name: "Banana"
  },
  {
    name: "Carrot"
  },
  {
    name: "Apple"
  }
];

// [{"name":"Apple"},{"name":"Banana"},{"name":"Carrot"},{"name":"Orange"}]
console.log(arr.sort((a, b) => a.name.localeCompare(b.name)));
```


## Intl.Collator()

If you're working with a large array, I would recommend using [Intl.Collator()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator) for performance reasons.

```typescript
const arr = [
  {
    name: "Orange"
  },
  {
    name: "Banana"
  },
  {
    name: "Carrot"
  },
  {
    name: "Apple"
  }
];
const collator = new Intl.Collator();

// [{"name":"Apple"},{"name":"Banana"},{"name":"Carrot"},{"name":"Orange"}]
console.log(arr.sort((a, b) => collator.compare(a.name, b.name)));
```


## Benchmarks

### 1,000 strings
Here is a [benchmark](https://jsben.ch/ir0YX) where we're sorting an array of 1,000 strings. As you can see, [Intl.Collator()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator) is 25% faster than [localeCompare()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).

![Benchmark 1,000 strings](https://dev-to-uploads.s3.amazonaws.com/i/tluvmehe5iinch98f8j0.png)


### 25 strings
Here is a [benchmark](https://jsben.ch/LJzX9) where we're sorting an array of only 25 strings. In this case, [localeCompare()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) is 13% faster than [Intl.Collator()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator).

![Benchmark 25 strings](https://dev-to-uploads.s3.amazonaws.com/i/8jfakhgdr7hmtlrscgk0.png)
I made a trailer for my game
Tags: video, games, html, javascript
Published: 2020-10-23 23:51:11

I made this trailer for my game [Asterogue](https://chr15m.itch.io/asterogue). Here's how I did it:

 * Added some Javascript to go full screen using `document.body.requestFullscreen()` with a special key sequence.
 * Used [OBS Studio](https://obsproject.com) to record a couple of long play sessions and capture some of the bits I really wanted in there.
 * Used [OpenShot](https://openshot.org) to edit it together and create titles.
 * Published on YouTube.

{% youtube 7efdmAJAUVY %}
Updating my website
Tags: webdev, react, ejs
Published: 2020-10-23 19:59:53

# Why
Since I've made [my website](https://manen.herokuapp.com/), I've been thinking of why I've made it that way. It's a [Node.js](https://nodejs.org/) server, running on [Heroku](heroku.com), which uses [Express](https://expressjs.com/) for serving, and runs [EJS](https://ejs.co/) to do the server-side rendering. I made it this way, because, let's be honest, that was the only one I knew how to use enough to make a very simple website like that.
Saying that I've regretted that is a large understatement. So logically, if it kinda sucks, we gotta make it better.

# How
I'm planning to use [Firebase](https://firebase.google.com/)'s [hosting solution](https://web.app/), with [React](https://reactjs.org/), using [Create React App](https://github.com/facebook/create-react-app#readme). I know, I'm dumb, because making a static site using React is not performant, and others, and yeah I really don't have an excuse here, only that I want to learn React, and I think this would be a great exercise. I'd also like to keep something like the [old site's API](https://manen.herokuapp.com/api/), which should be easy, but it does require code to be run on the server or the client, to fetch the API, and since the server is only doing hosting it'll have to run on the client, making React a pretty good fit.
Release 2.0 PR 3
Published: 2020-10-23 23:18:24

For this pr I found a pretty cool tool that squashs a bunch of json files into 1 json file. I thought it would be cool to work on since in our lab we are learning about rebasing and squashing. Now you may think, "The squash and rebase tool has nothing to do with merging json files", and you'd be 100% correct and their is no connection other then the name...

Nevertheless, the issue that I worked on was: https://github.com/Blank1611/jsonmergeutils/issues/1

I thought it was going to be a fairly good issue to work on seeing that I have previously implemented an argument parser in my link-check project. And while the code was fairly easy to implement I ran across something that was very important during this issue...

It was a linter, something that goes through your code and makes sure it has the same programming style as the owner set it as.  I've never encountered a linter previously and while it is a little annoying to see my builds fail because I have a space after a function definition, I can see that it is incredibly useful.

Another thing about this pull request is I actually got my first suggestions to fix with my pull request! This was very exciting and the owner of the repo had some incredibly ideas to implement that would clean up the code and make it a lot better. You can check out our conversation here: https://github.com/Blank1611/jsonmergeutils/pull/14

That's the beauty of open source programming, others can look at your code and ask for improvements. While some people may take this as a bad thing, the reason why they ask for better is 1. They obviously want the code to be better, and 2. It gives you the opportunity to learn even more. It was surprisingly fun to implement the suggestions that were made.
GraphQL - first steps
Tags: graphql
Published: 2021-02-19 14:34:03

---
title: GraphQL - first steps
published: true
date: 2020-10-23 22:39:43 UTC
tags: graphql
canonical_url: https://www.solarwinter.net/graphql-first-steps/
---

I was following [Flavio Copes' tutorial](https://flaviocopes.com/graphql-node-express/) on creating a basic GraphQL server in Express the other day. The tutorial was good, but I realised at the end that it didn't give you an example of a query to actually see the resolvers in action.

Luckily I've picked up enough GraphQL to be able to write a simple query; just need to get the subscriptions sorted now!

The query below will return title and author name for all posts; then title and author for only post 0.

```graphql
{
  posts {
    title
    author {
      name
    }
  },
  post(id: 0) {
    title
    author {
      name
    }
  }
}
```