teleren/devto huggingface dataset:
Implementing tables using reactjs
Tags: react, javascript, pagination, table
Published: 2022-01-02 04:15:00

---
title: Implementing tables using reactjs
published: true
description: Examples of tables, pagination, sorting, and others
tags: reactjs, javascript, pagination, table
cover_image: https://marcosrjjunior.com/images/og/implementing-tables-using-reactjs.png
---

I basically came up with this post to show you that maybe you don't need to install any library when implementing a "simple" table.

The goal is to consume data from an API and display the information to the user **as fast as you can.**

![tables-reactjs](https://marcosrjjunior.com/_next/image?url=%2Fimages%2Fposts%2Fhow-to-implement-tables-using-reactjs%2Ftable-pagination-example.png&w=1080&q=100)

You might consider using a library because of the features it might offer, but in 95% of the cases you are going to be using only the sort function. Some of my pros and cons.


#### Cons

- Performance issues.
   - Some lib's perform unnecessary array maps in order to make easier to use and works in a dynamic way
   - Some of them don't even use tables, they calculate columns and rows and convert to "div's".
 - Wasting time to read the library documents, most of the times looking for flags to disable some unexpected behaviours or learning how to use a "table".
 - Complexity to customise layout and bad UI experience.

#### Pros

- Maybe you might want to test a different feature.
- Really I don't see much here, even for a MVP purpose, I would go without any library.

Here are some examples that I've implemented, hope one of them fit your needs or at least help at the beginning.

## Tables

- <a
    href="https://tables-react.vercel.app/simple"
    target="_blank"
    rel="noreferrer"
  >
    **Simple**
  </a>
- <a
    href="https://tables-react.vercel.app/pagination"
    target="_blank"
    rel="noreferrer"
  >
    **Pagination**
  </a>
- <a
    href="https://tables-react.vercel.app/row-selection"
    target="_blank"
    rel="noreferrer"
  >
    **Row selection**
  </a>
- <a
    href="https://tables-react.vercel.app/sorting"
    target="_blank"
    rel="noreferrer"
  >
    **Sorting**
  </a>
- <a
    href="https://tables-react.vercel.app/sticky-column"
    target="_blank"
    rel="noreferrer"
  >
    **Sticky column**
  </a>
- <a
    href="https://tables-react.vercel.app/static"
    target="_blank"
    rel="noreferrer"
  >
    **Static next.js**
  </a>

Feel free to use any of the examples and build your own component with the needs of your project.
Making forms easier with react-hook-form
Tags: javascript, beginners, tutorial, react
Published: 2022-01-02 03:55:34

In this article, we will see how we can improve our developer experience and time while working with forms by using [react-hook-form](https://react-hook-form.com/).

There are many libraries that facilitate working with forms making it easier to write and validate inputs

```
const { register, handleSubmit, watch, formState: { errors } } = useForm();

```

In order to use it, we have to call useForm hook. This will give properties that can we use in our code.

**register** will register your input element for validation and management
**handleSubmit** will handle your form submission
**watch** will constantly watch an element change
**formState** will give you the state of the form


```
<form onSubmit={handleSubmit(onSubmit)}>
```

**handleSubmit** will submit your form. Before submitting your form it will check for errors. If errors are found it will not proceed until all of the errors have been resolved.



```
<input placeholder="Jhon Doe" {...register('name')} />
```
We have defined the input element and registered it as **name** for validation.

```
<input
          placeholder="25"
          {...register('age', { required: true })}
          type="number"
        />
```
With registering we have also applied validation that this input is required.

```
<input
          type="number"
          {...register('experience', { min: 4 })}
          placeholder="4"
        />
```

input will not accept values that are under 4

```
<input
          type="number"
          {...register('experience', { max: 4 })}
          placeholder="4"
        />
```
Similarly, input will not accept values above 4

Suppose if you want to limit user for text length, you would do by
```
<textarea rows="4" cols="20" {...register('bio', {
          maxLength: 200
        })}
```
It will limit users to a maximum of 200 characters

Ok! Now we know how validation works but what is **watch**.

*watch* will constantly check for input values
Suppose if you want to monitor textarea in real-time, you might need to watch it and inform users that they have entered a certain words.

```
  let bio = watch('bio');
  console.log(bio);

  if (bio && bio.includes('ice')) {
    alert('You have written ice');
  }
```

*.includes* is a method on string. It will check if characters are involved in string

In order to inform users about the errors, we would have to refer to the errors object.

Let's recall
```
<div>
        <label htmlFor="bio">Bio</label>
        <br />
        <textarea
          rows="4"
          cols="20"
          {...register('bio', {
            maxLength: 30,
          })}
        />
        {errors.bio && <h4>Your bio have exceeded beyond 30 characters</h4>}
      </div>
```

If the maximum length of textarea exceeds 30 characters, it will give an error.

I hope you liked this article, if you have any questions/feedback feel free to ask me!

You can find the code here!
Code: https://stackblitz.com/edit/react-mpegjv?file=src/App.js
How to Center a div Horizontally and Vertically
Tags: css, webdev, beginners, tutorial
Published: 2022-01-02 03:51:57

Centering a div is a crucial skill for a web developer. So, today I’ll share 3 ways to center a div horizontally and vertically.  

Let’s get started. 

If you prefer video then check it out here:

{% youtube iaPbZ8vsWyk %}

Note: to center a div with flexbox or grid you need to add flexbox or grid to the parent of that div. 

### #1. Using Flexbox

You can center a div horizontally and vertically with Flex box, with just 4 lines of code. 

```css
div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
```

### #2. Using Grid

Centering a div with grid is much more easier than with flexbox. 

```css
div { 
  display: grid;
  place-items: center;
  height: 100vh; 
}
```

### #3. Using Position Absolute:

 You can center a div with CSS positionning too. 

```css
div {
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%);
}
```

## Conclusion

That’s it for today. 

If you enjoyed reading this article, I think you’ll also enjoy my newsletter where I share my articles and videos, and other useful resources 

### [Subscribe Now!](https://www.getrevue.co/profile/coderamrin)


Also you can connect with me on Twitter at @coderamrin
Best Practices For Writing
Automation Test Code
Tags: programming, java, python, testing
Published: 2022-01-02 03:35:00

1. Follow OOPs Concepts Wherever Possible
   - Abstraction(base classes),
   - Inheritance(multiple implementation of same things/multiple 
    inheritance),
   - Polymorphism(many forms with something different)          
   - Data Hiding(hide unnecessary/sensitive info),              
   - Encapsulation(Bind small entities into a single large entity)
 2. Follow Programming Language Guidelines (class name, Method 
    name, package name, variable names)
3. Reduce code duplicity (think before writing new code) 
   - can I use/make change in existing code?
   - Increase code reusability
   - Make your code generic wherever possible
   - Leave no hardcoded data in source code
   - Keep your static data outside the source code
   - Keep your dynamic data dynamic in test code (fetch it from 
     util files)
 4. Test your code properly, use IDE options such as call 
    hierarchy or show usage to test your changes E2E
    - Use Extensive logging- everything which is part of source  
      code should be analysed from logs without looking at the 
      source code
   - Generate and save failure proofs outside the src code-
     videos/data/screenshots/logs

5. Focus on making your code scalable and faster without 
   compromising the code quality
6. Your code should be platform and system independent
7. Use as many assertions as possible focus on automated testing 
   rather than automation
8. Leave no hardcoded data in source code
9. Always think for the future, separate out tech dependencies so 
   that migration to new tech is easy in case it is needed
10. Keep your tests independent for better results in 
    multithreading unless they are related (example publisher subscriber related tests)
11. Use Proper Documentation (Using comments wherever required)
12. Create code which is can be easily read and modified by others(Important)
Start Using JavaScript to Automate Excel
Tags: javascript, productivity, datascience
Published: 2022-01-02 02:54:58

## The Problems with VBA

Visual Basic for Applications (VBA) was created in the 90's and has practically never changed since. Aside from its absolutely out of date development environment and unique syntax, VBA also poses a huge threat to corporations as a highly effective tool for malware due to its ability to access core operating system processes.

Yes, VBA has its strengths and I personally know people who have made millions of dollars because of quality VBA code. However, there is a faster, safer, and frankly more enjoyable way to automate excel: say hello to the JavaScript Automation Development Environment (JADE) Excel add-in.

## What is JADE?

JADE gives you the power to use JavaScript to automate everything within the workbook scope of Excel without making it macro enabled.

Because the JavaScript you write is living in a browser, it does not have access to any operating system features on the host computer. This means that all of your automation code is limited to your workbook, making it extremely safe to share.

JADE offers an environment that allows the developer to write JavaScript directly in the workbook, and it can even pull in code modules from the cloud using GitHub Gists.

You can start using JADE for free by getting it from the Microsoft add-in app store.

Full JADE Tutorial: https://www.youtube.com/watch?v=FvuueNRuBCo
JADE Support page: https://support.jsvba.com/
Excel JavaScript API Overview: https://docs.microsoft.com/en-us/office/dev/add-ins/reference/overview/excel-add-ins-reference-overview
#3 - Wilson primes CodeWars Kata (8 kyu)
Tags: javascript, webdev, tutorial, 100daysofcode
Published: 2022-01-02 02:39:31

**Instructions:**
Wilson primes satisfy the following condition. Let P represent a prime number.

Then ((P-1)! + 1) / (P * P) should give a whole number.

Your task is to create a function that returns true if the given number is a Wilson prime.

**My solution:**

```javascript
function amIWilson(p) {
  const factorial = (n)=>{
    if (n < 0) return -1
    if (n === 0) return 1

    return n * factorial(n - 1)
  }

  if( ((factorial(p-1) + 1) % (p * p)) == 0) return true
  
  return false
}
```

**Explanation**
The Kata instructions say that a Wilson Prime is a number in which the result of the factorial of p-1 + 1 divided by p*p is an integer.

So first I started making a function that gets the factorial of p-1, in which I used recursive code using 2 conditionals at the beggining of the function if the passed numer is equal to zero or if it is less than zero, so it doesn't end on an infinite loop and then I recalled the same function until n equals 0.
Then I passed the formula of the Wilson Primes to a conditional with the modulus operator so it returns the reminder of the division and if the reminder is 0 it means that it is an integer and the result should be true, if the condition is false then it isn't a Wilson Prime and it'll return false

[My Github](https://github.com/Cesardlr)
[My twitter](https://twitter.com/cesar__dlr)
[Solve this Kata](https://www.codewars.com/kata/55dc4520094bbaf50e0000cb)
2022: Year of Growth and Ownership
Tags: programming, webdev, motivation, blacktech
Published: 2022-01-02 01:52:33

![Picture of landing page of personal dev website. Picture of Black woman smiling wearing a yellow shirt.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ka7ui0hjex10glknysx6.png)

Happy New Year! I hope the new year is treating everyone well. For me, I have been battling sickness for a while now, which made Holidays a lot harder since nothing was done. I was honestly depressed because end of the year is always hard for me all of my life and getting through it. It's a journey battling depression and a lot of other things, but I know I am not alone. I wanted to share with you all [my personal website](https://samanthabadeau.dev/index.html) that I am honestly so proud about having released. It's my pride and joy right now. It has a lot of work to it that will get better as I learn more and grow in my journey. Thanks to someone kind enough to donate me time to my domain in addition to pushing me to get it done,

I was like, heck I got to go for it. And I am stunned. Stunned at how it looks, what I accomplished, what I am capable of. 

My future employer does not know what's coming for them!!!! I am excited to learn anything needed to get the job done, to collaborate, to grow. My goal is to be able to get out of the state I am in, to see new sights and live a life on my own two feet. I know I will get there. I just need to be given that "yes". That chance of someone believing in a early-career like me.

No longer I am calling myself a Junior. I am a Software Engineer through and through.

**_I will break barriers. I will make a change in the tech industry that will shake tables._**

I am ready.

This is my testimony.
Three things I learned from my readers in 2021
Tags: readerresponse
Published: 2022-02-02 18:21:28

---
title: Three things I learned from my readers in 2021
published: true
date: 2022-01-02 00:00:00 UTC
tags: readerresponse
canonical_url: https://jhall.io/archive/2022/01/02/three-things-i-learned-from-my-readers-in-2021/
---

It’s traditional around this time of year for everyone and their dog to write a “look at what I did last year!” post. I’d rather not write a self-focused post, however.

And while 2021 was a busy year for me (I launched the “Tiny DevOps” brand, this daily email list, and a podcast), I don’t really want to focus on my accomplishments.

Instead, today I’m going to recap some of the feedback I got from you, my readers, over the last year. I learned a lot from you, and I hope you’ll keep challenging me throughout 2022 and beyond!

I’ve selected three reader replies to comment on here.

1. Can you debug code? Yes? Congrats. You’re a scientist! Reader Pieter-Jan Smets [wrote in](https://jhall.io/archive/2021/10/11/reader-response-to-the-science-of-software-development/) to make this point, as originally made by Brian Cantrill:

2. The honest pursuit of “agility” and DevOps tends to converge on many of the same best practices. Axel Schüssler [illustrated this](https://jhall.io/archive/2021/10/13/reader-response-how-does-qa-fit-into-devops/) from his perspective as a professional tester.

3. And finally, there are practically always exceptions to our best thought-out rules of thumb and best practices. Paul Swail [explained](https://jhall.io/archive/2021/09/08/reader-response-to-can-you-work-from-an-airplane/) how his daily work is often an exception to some common advice like: Make sure you can work offline:

Of course I’ve received many, many more responses from many of you than I can possibly summarize here. I read every one, and reply to most. Please keep it up!

Happy 2022!

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
I've Been Contributing to Ruby Documentation
Tags: ruby, rdoc, documentation
Published: 2022-01-01 23:49:03

---
title: I've Been Contributing to Ruby Documentation
published: true
description: 
tags: ruby, rdoc, documentation
---
tl;dr? -- Cut to [The Chase](#the-chase)

Having spent 40 years in the software industry -- as a documentor, developer, and test automator -- I can't see that any of the work I did, however relevant at the time, survives:  [Nothing beside remains](https://www.poetryfoundation.org/poems/46565/ozymandias).

Well, it's now almost five years since I got retired.  For the first three of those, I worked on projects of my own, blogged, posted here, and contributed some to Ruby's spec project.  As for the posts to my blog and posts here, it's amazing how quickly the search engines learn to ignore your posts and cast them into the darkness-- think [red shift](https://en.wikipedia.org/wiki/Redshift).

Then in September 2019 I came to my senses, and started doing something that will last: contributing enhanced RDoc for [the Ruby project itself](https://github.com/ruby/ruby).

### The Chase

So far, in the Ruby documentation I've:

- Added "What's Here" sections for about 20 classes and modules.
- Re-written the introductory material for about 15 classes and modules.
- Re-written entirely the methods documentation for about 15 classes.
- Added separate documents for bsearch, dig, and implicit conversion.

From time to time I'll post here, linking to some of these changes.

Happy new year!

[UPDATE:  Should have added -- could not have done without the close support of many reviewers, especially Jeremy Evans -- who prevented my worst mistakes.]
Configuring Cache Control for S3 Hosted Resources
Tags: aws, s3, http
Published: 2022-01-01 21:57:43

When doing web development, one of the most important aspects is to get a site performing well with SEO (Search Engine Optimisation). One contributing factor to this (there are many), is effective resource caching. In this article, I'm going to show how to achieve this when resources are stored within a S3 bucket.

Within Chrome, we can generate a Lighthouse report which will identify any images that are not cached correctly.

![Lighthouse Report](https://davidsalterassets.s3.eu-west-2.amazonaws.com/lighthouse.png)

In this image, we can see that the default "cache policy" applied to resources in a S3 bucket is to tell the browser to _not_ cache the resource.

To cache an resource, we need to send a `Cache-Control` HTTP header with a suitable timeout to cache.  The timeout is measured in seconds and is identified as the `max-age` of the resource.

So for example, to tell the browser to cache resources for 1 day, we would use a max age of 60s * 60m * 24h = 86400.  To tell the browser to cache for 1 week, we would use a max-age of 60s * 60m * 24h * 7d = 604800.

So, how do we configure S3 to specify a cache time ?

Within the S3 Console, we can select either an individual resource, or an entire directory and specify this value.  To do this, we select to edit the `Metadata` of the selected objects.

![Edit Metadata Report](https://davidsalterassets.s3.eu-west-2.amazonaws.com/editmetadata.png)

On the resulting screen, we select the `Add Metadata` section and add a `System Defined` piece of metadata with a key of `Cache-Control` and a `value` of `max-age=<number of seconds>`

![Add Metadata Report](https://davidsalterassets.s3.eu-west-2.amazonaws.com/addmetadata.png)

In this image, you can see that I've set the `max-age` to 7 days (60s * 60m * 24h * 7d).

That's all there is to it! Save the changes to the metadata and S3 will start hosting your resources with an effective cache control.

## Credits

Photo by [Marc-Olivier Jodoin](https://unsplash.com/@marcojodoin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/speed?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText").
Custom Angular reactive form with SVG and clickable elements
Tags: angular, typescript, tutorial, programming
Published: 2022-01-01 21:33:48

During the Corona pandemic, many companies and employees discovered home office. As a result, it became apparent that not every employee required his own workstation. Instead, companies now offer a shared desk model. This means that employees flexibly share workstations. Often, you can reserve your desired workstation in advance. This workplace booking function has attracted me for some time. I find the possibility to create a Custom Reactive Form in Angular, which also includes an office plan, particularly interesting. In the Custom Angular Reactive SVG Form there is the possibility to select a workstation from the office plan and to mark it with a color. As soon as a workstation has been chosen, the form will be validated and the desk will be bookable. In the following the implementation is explained step by step.

We need the ReactiveFormsModule for the Reactive Angular Form SVG. Then we create a FormGroup and FormControl fields. I have named the FormGroup reservationForm. It contains a field for the name, a field for the weekday and a field for the place you want to book.

`public reservationForm: FormGroup = new FormGroup({
    name: new FormControl('', [Validators.required], []),

    weekday: new FormControl('', [Validators.required], []),

    seat: new FormControl('', [Validators.required], []),
  });`

To build a custom form field, the first thing we need is a new component. Here we can directly use a tip from Unleashed Design. Angular offers the possibility to include SVG images as templateUrl. We delete the seats.component.html and replace it with our SVG office plan named seats.component.svg. In the seats.component.ts we can replace the templateUrl with the SVG file:
`selector: 'app-seats',
templateUrl: './seats.component.svg',
styleUrls: ['./seats.component.sass'],`

We can already see our office plan in the Reactive Form, but it is still without functionality. To change that a ControlValueAccessor is needed. The ControlValueAccessor serves as an interface for a custom form control that integrates with Angular forms. The ControlValueAccessor asks for these four methods:

`interface ControlValueAccessor {
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean)?: void
}`

This is the result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3wd9t0fwx3j6lb0ziss.jpg)

If it is invalid:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ctq52e1rynprtd062ft.jpg)

Source code and more details to the project are on my blog: https://nerd-corner.com/how-to-build-a-custom-angular-reactive-svg-form-with-clickable-elements/
How To Store Certificate (.pem) in Azure Keyvault using Secrets and fetch values from secrets into pem file using python
Tags: azure, python, keyvault, certificate
Published: 2022-01-01 21:33:12

### Convert .pem Certificate file into base64 using certutil


```
certutil -encode filename.cer newfilename.cer
``` 



1.  Go to azure portal

2. Select ketvault service

3. Create a new keyvault

4. Select secrets from setting on sidepanel

5. Create a new secret

6. Copy paste base 64 into secret value and save it



 ### Python code to fetch certificate value from keyvault and store into a pem file


```
from azure.identity import DefaultAzureCredential
from azure.keyvault.secrets import SecretClient
credentials = DefaultAzureCredential()
secret_client = SecretClient(vault_url=key_vault_url, credential=credentials)
cert_value =  secret_client.get_secret("Certificate").value

with open('certificate.pem','w') as fopen:
        fopen.write(base64.b64decode(cert_value).decode())
```