teleren/devto huggingface dataset:
Nevertheless, Lynn Langit Coded in 2021!
Tags: wecoded
Published: 2021-03-08 03:58:52

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

My most recent achievement was making at least one open source contribution per day (to GitHub).  I wrote about why I did it - [here](https://lynnlangit.medium.com/why-365-commits-4923e712742c)

---

Advocating for myself looks like...
-  getting paid what I am worth 
- for doing work that matters 
- with people I who enjoy working with

---

My biggest goal is to continue my work with teams...
- to build reusable genomic-scale bioinformatics cloud pipelines 
- that enable researchers 
- to improve human health

---

My advice for allies to support underrepresented folks who code is...
- to LISTEN to their ideas
- to AMPLIFY their work
- to CHALLENGE them to grow skills
Spruce up your data table ux/ui
Tags: ux, uiweekly, database
Published: 2021-03-08 03:15:34

Have you ever noticed that so many data tables out there in the world are absolutely hard to use, weird and kind of generally sad? 

I have. 

For enterprise products at least, data tables can be the foundation of the user experience. People live and die by those rows and often have to struggle, hunched over their computers, to find the data they need. (I assume they also softly weep into their keyboards as well.)

I've been tasked with designing/redesigning a cadrillion tables in my ux life (as have my team), so we compiled some comprehensive design documentation so that maybe, just maybe, tables in the world can improve. 

(For real though, one of our dev buddies redesigned his tables the same day he read our giant article and said "your article made me realize our tables suck".)

What do you think? Did we miss anything? https://pencilandpaper.io/articles/user-experience/ux-pattern-analysis-enterprise-data-tables/
CSS Selectors
Tags: css, codenewbie
Published: 2021-03-08 02:56:43

---
title: CSS Selectors
published: true
description: An overview of a few CSS selectors
tags: css, codenewbie
---
After a suggestion from my mentor on a Firefox issue I'm currently working on, I replaced 20+ lines of JavaScript code toggling a message to 3 lines of CSS. A lot of developers, myself included, can benefit from understanding just how far CSS can take a website.
## The Problem
As I mentioned already, the issue I'm working on boils down to displaying a message if the user has no addons and if the user does, hiding that message. To get a working solution I wrote a JS method to create the message and then a method that would toggle the display attribute of the message element. Upon reviewing my code, my mentor suggested using the ~ selector. I had never heard of it so I did some research. 
## CSS Selectors
I'm was familiar with selecting an element either using the name, id, or class of the element. 
```css
/* selects all the p elements */
p {
  color: blue;
}

/* selects all elements belonging to the class error */
.error {
  color: red;
}

/* selects the element with the id green-message*/
#green-message {
  color: green;
}
```

I also knew about chaining these selectors together.
```css
/* selects all button elements belonging to the warning class */
button.warning {
  background-color: yellow;
}
```

But I didn't know how many selectors there were and all the possibilities. Here are just a few examples!

```css
/* selects all img elements in the image-container class */
.image-container img {
  margin: 5px;
}

/* selects all img elements that have the image-container class as a parent element */
.image-container>img {
  margin: 9px;
}

/* selects the first img element placed after an element belonging to the image-container class */
.image-container+img {
  margin: 7px;
}

/* selects p elements when user hovers over them */ 
p:hover {
  text-decoration: overline;
}

/* Selects every h2 that comes after a p element */
p ~ h2 {
  color: pink;
}
```

There are a ton more CSS selectors and you should definitely check them out on [w3schools](https://www.w3schools.com/cssref/css_selectors.asp).

## Back to Firefox
I've been saving this for last because honestly it was just so mind blowing that I could use a style sheet to accomplish this task. Here it is:
```css
section:not(:empty) ~ #empty-addons-message {
  display: none;
}
```
Now what these selectors do in conjunction is select the element with the id **#empty-addons-message** that comes after a section element when that section element is not empty. Pretty crazy the kind of logic you can code into your style sheets! Next time you are considering adding some display logic see if you can use CSS to accomplish the task!
Improving the UI of an old mini tool
Tags: devjournal, showdev
Published: 2021-03-08 02:24:20

---
title: Improving the UI of an old mini tool
published: true
description: Old mini tool gets a modern UI
tags: #devjournal #showdev
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://reaper.im/blog/20210305-UI-Overhaul
---

> Mirrored post from [reaper.im](https://reaper.im/blog)

I'm not really good at post titles, so going to keep them short from now.

A really old project of mine started gaining a bit of attention the past few days and I thought that I've been planning on making it look good for quite a while, I should just sit and redesign it once and for all. 

So, when I woke up at 4 , unable to go back to sleep, I decided to make a design change. 

[Old Todo](https://old.todo.reaper.im) , this is what it looked like and here's the new one, [Todo](https://todo.reaper.im)

I'll add an image for everyone else to have a look at

![](https://reaper.im/assets/todo-new-image.png)

So let's go through everything that's there. 

# Features 
- the obvious one first, Dark Mode Support 
- Addition of tasks, it's a todo list (what were you expecting?)
- Filter by state, you toggle between, All, Completed, Pending
- Power menu to change theme and filter by state(**coming soon**)
- PWA, you can install it if you're using chrome on desktop and Safari (Add to Home) / Chrome (Add to Homescreen) on iOS and Android respectively
- Offline support (cause pwa), and your tasks stay in your browser, there's no sync, though you can share an encoded link to people who you'd want to share the tasks with. 
- Import tasks from shared URL into your task (**coming soon**)

And as always, it's free. Though you should try supporting the DEV!

I did end up implementing the same style on other tools as well though. 

What's one project that you think was dead but then someone at random just tells you that they are using it and like it?
About Peregrine, Being Brave, gift of learning, Flex box & React Query
Tags: react, node, webdev, programming
Published: 2021-03-08 02:23:36

Every Monday I publish my newsletter/Blog. Throughout the week I try to gather some useful links and post them in a specific format and I believe this would help my readers and the community.


This week its about Peregrine, Being Brave, gift of learning, Flex box & React Query. Read more below:

https://gokhale.me/about-peregrine-being-brave-gift-of-learning-flex-box-and-react-query
Nevertheless, Ibad laskar Coded in 2021!
Published: 2021-03-08 01:45:31

<!-- ✨This is ibad Laskar and i am an experienced web developer and graphics designer and also a software engineer.! ✨ -->

## My most recent achievement was… my developement

## Advocating for myself looks like…

## My biggest goal is…. Developer

## My advice for allies to support underrepresented folks who code is...
How to display a password in a form input using React Hooks
Published: 2021-03-08 01:37:08

---
title: How to display a password in a form input using React Hooks
published: true
description: Using this method helps to check if you type the correct password in the input box. 
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0lglm209d5p080kp8572.png
---

Have you ever wondered how to create an input field with an icon that helps you check the password when you type? In this article, we would explore the ability to recreate this task as shown on different modern websites, which you can use from now on.


## Prerequisite

A basic understanding of React and how to use hooks, useState.
 
## Goals

By the end of this article, we would have built a simple input field that accepts a password and the ability to check the password as you type. 

[Demo](https://codesandbox.io/s/password-revealer-eq42w)

## Getting started

We need to create a component folder and include a .js file that would help us write JSX template syntax inside of JavaScript.

```js
import { useState } from "react";
import { FiEye } from "react-icons/fi";
import "../styles.css";

const PasswordRevealer = () => {
  const [shown, setShown] = useState(false);

  return (
    <>
      <h1>Password Revealer</h1>
      <div className="input">
        <input type={shown ? "text" : "password"} />
        <FiEye className="reveal" onClick={() => setShown(!shown)} />
      </div>
    </>
  );
};

export default PasswordRevealer;
```

Using the hooks, useState, we were able to declare the state `shown` to false initially till the user types in a password; it doesn't show till the user clicks the icon which listens to action with an event listener `onClick`, which toggles the visibility of the password on and off and update its state with `setShown`.

After that is done, call the PasswordRevealer.js file into the home component App.js.

```js
// Main component
import "./styles.css";
import PasswordRevealer from "./components/PasswordRevealer";

export default function App() {
  return (
    <div className="App">
      <PasswordRevealer />
    </div>
  );
}
```

## Conclusion

The method above helps to give users of your website the chance to know the password they are entering, as this can be of great benefits when signing or registering on a website. So I would encourage you to give this method a try as it improves the website's experience and usability.
Mojolicious::Plugin::AutoRoute 0.23 is released - Catch up with Mojolicious 9.0
Tags: perl, mojolicious
Published: 2021-03-08 01:30:49

Mojolicious::Plugin::AutoRoute is the module to create routes automatically. If you have most static-like template files, this module is useful.

Catch up with Mojolicious 9.0.

https://metacpan.org/pod/Mojolicious::Plugin::AutoRoute


```
# Mojolicious
$self->plugin('AutoRoute');
 
# Mojolicious::Lite
plugin 'AutoRoute';
 
# With option
plugin 'AutoRoute', route => $r;
```

Template files.

```
TEMPLATES                           ROUTES
templates/auto/index.html.ep        # /
              /foo.html.ep          # /foo
              /foo/bar.html.ep      # /foo/bar
              /foo/bar/baz.html.ep  # /foo/bar/baz
```

enjoy!
The Podcast is LIVE!
Tags: devops, news, showdev, podcast
Published: 2021-03-08 00:50:58

I'm super excited to announce that the __CoderDave Podcast is finally live__ on all your favorite podcast platforms.

We talk about ___DevOps concepts___, methodologies, and best practices with the best DevOps engineers and architects in the scene!

We also go deeper into tools, talking about ___GitHub and Azure DevOps___.

Check the Podcast on:

- __Spotify__: search for "___CoderDave___" or [click here](https://open.spotify.com/show/6eXkkcPGLQuflPF4J7t8ht)
- __Apple Podcasts__: search for "___CoderDave___" or [click here](https://podcasts.apple.com/us/podcast/the-coderdaves-podcast/id1556397751)
- __Google Podcasts__: search for "___CoderDave___" or [click here](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkLnBvZGJlYW4uY29tL2NvZGVyZGF2ZS9mZWVkLnhtbA)
- __Amazon / Audible__: search for "___CoderDave___" or [click here](https://music.amazon.com/podcasts/b4d2951b-3f0c-48ec-900f-8160fa4cf0ed)
- __PodBean__: search for "___CoderDave___" or [click here](https://coderdave.podbean.com/)

Let me know in the comments section below what you think!

![Podcast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/153ifejkfjhxr0bovlys.png)
Book notes: Clean Code - Chapter 6
Tags: books
Published: 2021-03-08 00:36:25

### Chapter 6 - Objects and Data Structures

* Keeping implementation of functions private is a matter of abstraction. The user of a class does not need to know the details on how the command issued will be taken care of. 
* The worst option is to just create getters and setters, we should think about the best way to expose the data and how it will be used.

> Objects hide their data behind abstractions and expose functions that operate on that data. Data structure expose their data and have no meaningful functions.

* Hybrids between objects and data structures are bad. they make adding new data and new functions hard. In order to avoid creating such hybrids, we can create data structures and then encapsulate these data structures within objects that have functions.
* We can add commands to objects that call commands on their internal properties to avoid making chain calls.
Let me introduce you Neda
Tags: wecoded, womenintech, career, beginners
Published: 2021-03-08 00:25:30

---
title: Let me introduce you Neda
published: true
description: 
tags: shecodedally,womenintech,career, beginner
//cover_image: https://direct_url_to_image.jpg
---

Two years ago I met my colleague Neda, with whom we became code partners.
At the beginning he was only competent in UI design, then in recent years she has matured and significantly developed her skills also in UX design, CSS and HTML.

Now she knows how to design and develop web components, completely. We watch each other's backs: she checks them for details of UI design, recommending solutions and I help her in constructions and logical loops of Nunjucks or SCSS templating.

I am sincerely proud of Neda and sure that she does not want to stop but always wants to learn new tools to be competitive on the market.
Convert px to rem Using Sass - 3 methods
Tags: tutorial, webdev, css, frontend
Published: 2021-03-08 00:14:37

By now, you probably figured out <a href="https://www.sitepoint.com/understanding-and-using-rem-units-in-css/">what rem units are</a> and why you should use them. But, the tricky part is to calculate them *(at least, in your head)*. Luckily, using Sass, it's really easy to convert any value into *rem*, and we can achieve that in 3 ways or methods, using *mixins* and *functions*.
&nbsp;

##Method 1 - using a <code>@mixing</code> with predefined property##

Let's say we have a 400px wide `div`, but we want to convert that `width` value to rem. The easiest way would be by using a *mixin* with predefined *property*. We know 1rem equals to 16px, and our `div` is 400px wide, so the basic calculation is: 400 divided by 16. To calculate it with Sass, we could create a simple *mixin* like this:

```scss
@mixin width($value) {
    width: ($value / 16) + rem;
}

div {
    @include width(400);	
}
```
This method works well, but the problem is - you have to define a new mixin for every property. That could easily spun out of control. But if you only have a few mixins, it could work. After all, it's the easiest method. 
&nbsp;
##Method 2 - using a <code>@mixing</code> with 2 arguments##

To avoid creating a new mixin for every property, we could create a mixin with 2 arguments - CSS property and value. Note that a _property_ statement is not a number, so we have to convert it to _string_ by wrapping it into `#{}`.

```scss
@mixin toRem($property, $value) {
    #{$property}: ($value / 16) + rem;
}

div {
    @include toRem(width, 400);
}
```
This method is much more flexible, but for every new CSS property we have to use a new `@incude` call. Unfortunately, we can call only one set of arguments per `@incude`. That could potentially lead to a readability problem, for example:

```scss
@include toRem(width, 400);
@include toRem(height, 400);
@include toRem(font-size, 16);
@include toRem(margin, 20);
//etc
```
&nbsp;
##Method 3 - using a <code>function</code>##

Third method is by using a Sass `@function`. Unlike _mixin_, which in previous methods "generated" CSS, our function will only calculate the value. In a function, we have to use `@return` rule to indicate the value to use as the result of calling that function. We can use that function with any property.

```scss
@function toRem($value) {
    $remValue: ($value / 16) + rem;	
    @return $remValue;
}

div {
    width: toRem(400);
    height: toRem(400);
}
```
Although this method surely seems like a number one go-to method, remember that __a function only generates a value__.
&nbsp;

##Which method to use?##
Well, I'd say, try all three. They all have their advantages and limits, so check a <a href="https://codepen.io/nikolab/pen/eYBMjxY">pen</a> below with all of the examples, and experiment... It's up to you to decide which one suits your purpose the best. 

{% codepen https://codepen.io/nikolab/pen/eYBMjxY %}

If you liked this article, consider buying me a <a href="https://www.buymeacoffee.com/nikolab">coffee</a>.
Geohash Open-Source library in TSQL for SQL Server
Tags: sqlserver, tsql, geohash, location
Published: 2021-03-08 00:14:09

After searching for a SQL Server TSQL implementation of Geohash types and conversion functions, I finally just went and wrote a whole open-source library myself:

* Github: [QalGeohash-TSQL](https://github.com/qalocate/qalgeohash-tsql)

I designed it for maximum accuracy, performance, and strong conversion consistency guarantees. It enables an average IT data warehouse analyst or report writer to efficiently use, process, and leverage simple GIS spatial proximity models and queries. Given the steep learning curve of finding and adopting a full GIS style solution for data-science/big-data/data-analytics, this library can enable a temporary or good-enough solution until new requirements require investing in a more fleshed out GIS solution like Mapbox, ESRI, etc.

It provides two Geohash implementation types; [Integer (BIGINT)](https://github.com/qalocate/qalgeohash-tsql/blob/main/README.md#integer-type) and [String (VARCHAR)](https://github.com/qalocate/qalgeohash-tsql/blob/main/README.md#string-type). It also provides two coordinate types; [Longitude+Latitude](https://github.com/qalocate/qalgeohash-tsql/blob/main/README.md#longlat-types) and [DMS](https://github.com/qalocate/qalgeohash-tsql/blob/main/README.md#dms-types). And then it provides the conversions to and from these various types. It also provides [conversions to/from the SQL Server spatial geography Point](https://github.com/qalocate/qalgeohash-tsql/blob/main/README.md#geography)[ type](https://github.com/qalocate/qalgeohash-tsql/blob/main/README.md#geography).

Please see the [README.md](https://github.com/qalocate/qalgeohash-tsql/blob/main/README.md) for detailed information.
Front-End Engineer skills to get hired in 2021
Tags: webdev, javascript, beginners, career
Published: 2021-03-08 00:04:11

Below are the overall required skills that can help you to land a front-end engineer/developer job in 2021. The list includes basic and some advanced skills in front-end development. Kindly note that this is based on my personal research. 

* HTML/CSS
* CSS Preprocessors
* Responsive/Mobile Design
* JavaScript
* Typescript
* jQuery library 
* JavaScript Frameworks - (ReactJS/Angular/Vue)
* Front End Frameworks (Bootstrap/Tailwind)
* RESTful Services/APIs, GraphQL
* Basics of the server-side (Node.js, Express, SQL, Database (MongoDB, PostrgreSQL)
* Server-Side rendering framework - (NextJS/NuxtJS)
* Testing/Debugging (Unit Tests, Integration Tests, End to End Tests, Load Tests)
* Git/Version Control
* Accessibility, Cross-Browser Development
* SEO, Web Performance
* Basics of UI/UX Design
* How to build design system, Storybook
* Good understanding of AWS, Docker, Kubernetes, Jenkins, and CI/CD
* Concepts like Sofware Design, Clean Code, Observability, Manutenabilty

**Advantage skills:**
* Any one of Content Management System
* Hybrid app development using Ionic React
* Mobile development framework using React Native
* Desktop development framework using Electron
* Data visualization using D3.js

For a more comprehensive roadmap, please refer to roadmap.sh/frontend
How to check for spelling mistakes or errors in input tag natively in HTML?
Tags: html
Published: 2021-03-08 00:00:00

---
  title: How to check for spelling mistakes or errors in input tag natively in HTML?
  published: true
  tags: HTML5
  date: Mon Mar 08 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-spelling-mistakes-input-tag-html
  cover_image: https://melvingeorge.me/_next/static/images/main-2d7b0ae9e2199d66ce75187e99e846d5.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-spelling-mistakes-input-tag-html)
  
To automatically check for spelling mistakes while writing text in the input tag in HTML, you can use the `spellcheck` global attribute in the input tag and pass value `true` to enable the feature and value `false` to disable the feature.

For example, let's say you wanted to check for spelling errors in the input tag element, we can do like this,

```html
<!-- Check for spell errors in input tag element -->
<input type="text" spellcheck="true" />
```

- If the spelling for a word is wrong a red squiggly line will appear below the corresponding word. (May differ from browser to browser)
- You might think the values for `spellcheck` global attribute is of boolean type but it is not, it should be the correct values of either `true` or `false`.

See the above code live in [JSBin](https://jsbin.com/garohohoru/2/edit?html,output)

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

---
Reader responses to ORM series
Tags: database, orm, sql
Published: 2021-03-13 11:52:33

---
title: Reader responses to ORM series
published: true
date: 2021-03-08 00:00:00 UTC
tags: database, orm, sql
canonical_url: https://jhall.io/archive/2021/03/08/reader-responses-to-orm-series/
---

I’ve received _several_ reader comments in response to the last week’s emails about databases and ORMs. I love that. Keep the comments coming!

Two comments in particular, both about PostgreSQL, I thought were worth digesting and sharing:

1. PostgreSQL comes with a rich set of [JSON functions](https://www.postgresql.org/docs/12/functions-json.html), which can make it work as a quite capable JSON document store. This can be valuable if you already have PostgreSQL installed, and don’t want to complicate your infrastructure by adding MongoDB or similar.

    In truth, any relational database _can_ be treated as an unstructured document store or key-value store. A simple 2-column table does the trick. For small data sets, this is often enough. When you need more sophisticated indexes or search capabilities you may need to opt for a product designed around document storage.

2. Another reader wrote to mention that he uses PostgreSQL to generate nested JSON that he can serve directly as an API response. By using the `row_to_json` function, in a sense, PostgreSQL itself is his ORM (according to a loose definition of the term), and his application just passes the raw result through to the API client. As an example:

    ```
    SELECT
      forum_posts.*,
      row_to_json(users) AS author
    FROM forum_posts
    INNER JOIN users
      ON users.id = forum_posts.author_user_id
    WHERE forum_posts.forum_thread_id = $1
    ```

I love both of these approaches, because they’re thinking critically about the problem at hand, and finding useful, application-specific solutions, rather than blindly applying a cargo cult approach.

What other non-standard database configurations have you seen? I’d love to hear from you.