teleren/devto huggingface dataset:
Creating Dynamic Rows & Columns with CSS-Grid
Tags: css, webdev, design, javascript
Published: 2020-03-18 05:25:31

In this blog post, I would like to share on __how to create dynamic rows and columns with CSS-Grid__.

I have created the __Scheduler UI__ template markup to demonstrate further.

## IDEA
Only learning doesn’t serve any purpose instead building an application will.

This app comprises Scheduler option input and based on the input will create a container with grid-cell for showing the day but dynamically.

## Dynamic CSS-Grid Columns & Rows

I cover the bare essential piece from the below code.

```html
<div class="container">  
  <ul class="scheduler-options">
    <li><a href="javascript:void(0)" class="optn">daily</a></li>
    <li><a href="javascript:void(0)" class="optn">weekly</a></li>
    <li><a href="javascript:void(0)" class="optn">monthly</a></li>
  </ul>
  <div class="month-name"></div>
  <section class="slots">
    <div class="scheduler-grid daily"></div>
    <div class="scheduler-grid weekly"></div>
    <div class="scheduler-grid monthly"></div>
  </section>
</div>
```

`javascript:void(0)` will restrict redirecting URL.

`.scheduler-grid` element acts as a _CSS-Grid_ container and based on the _scheduler-options_ input each grid container will be filled with grid cells.

```css
.scheduler-grid {
  height: 100%;
  margin: 50px 25px;
  padding: 5px 100px;
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: 100px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
```

`grid-auto-rows` `grid-template-columns` `repeat` `minmax` and `auto-fill` are the CSS-Grid configuration for dynamic creation of grid-cells.

The CSS `repeat` function will create the grid-cells based on the given min and max width of each cell using `minmax` function.

The **important point** we should get it here is that, if we use both `grid-template-rows` and `grid-template-columns` for dynamic creation then rows will get cut at the end of the viewport.

![BrokeRow](https://srinivasankk.com/wp-content/uploads/2020/02/image-1.png)

Hence, **to avoid this** we should set the row height for the dynamically creating rows with the help of **grid-auto-rows** property.

After all this, we would end up with the below expected result.

![Scheduler_UI](https://srinivasankk.com/wp-content/uploads/2020/02/image-6.png)
One of the most evil things: let the user type for 15 minutes and blank out his textbox
Tags: webdev, bug, devto
Published: 2020-03-18 05:12:58

That's one of the most evil thing a webpage can do to a user.

Let the user type for 15 minutes for the blog, and then when somethings is wrong: maybe a JavaScript error, or server error, then simply blank the whole textbox out, and let the user re-type the whole content.

Have you had that experience here or in other website?

Funny thing, sometimes I mentioned that in an interview, and the interviewer sounded like they don't care at all.

And this kind of things are still happening, including dev.to

I think it happened to me because of some server error, or somebody pushed the wrong JS to the site causing a temporary bug.

Tell us if you have similar experiences, or what you consider one of the most evil things a webpage can do to you.
What does (a == null) mean in JavaScript
Tags: javascript
Published: 2020-03-18 05:12:16

When we see some code from a company, such as from Google or from the ECMA committee: `a == null`, what does it mean?

It may seem it is for checking whether the variable refers to the primitive `null`, but in fact, it means:

```js
a === null || a === undefined
```

In fact, we can see that [`a == null` is identical to using `(a === null || a === undefined)`](https://dorey.github.io/JavaScript-Equality-Table/), not more, not less. They are exactly the same.

This is used by the ECMA TC39 (Ecma International, Technical Committee 39), when they defined optional chaining:

```js
a?.b
```

which they used

```js
(a == null) ? undefined : a.b
```

the part `a == null` is exactly: when `a` is `null` or `undefined`, then simply return `undefined`.  This usage may be a little bit hard to understand, and is used by people more familiar with JavaScript, to "test for nullish values" — either `null` or `undefined`.  While we may not use it if other people reading our code may get confused, it is good when we read `a == null` and know what it means.

The term "nullish" is also being used in the JavaScript community, as in [nullish coalescing. We can read more about it on MDN.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)

### Often this is all we need to know, but if we get into one technical detail: 

The only exception to the rule above is `document.all`:

```js
document.all == null  // true
```

by the rule above, it may appear then

```js
document.all === null || document.all === undefined
```

returns `true`.  But it returns `false`. This is the only known exception, but `document.all` returns an object, while `!!document.all` returns `false`, so `document.all` has very special behavior inside of JavaScript.

Reference [on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#Loose_equality_using).
MJSQ 101: Feature detection, feature inference, UA string
Tags: codenewbie, javascript
Published: 2020-03-18 04:24:51

## More JavaScript Questions 101(MJSQ 101): 
Continuing from my original [blog post]("https://dev.to/danvyle/more-javascript-fundamentals-101-4d5d"), I give you more javascript 101 questions answered!:

Question this week:
## What's the difference between feature detection, feature inference, and using the UA string?

###Feature Detection

*Feature detection* is discovering if a browser supports a certain block of code by running tests and running different code depending on if it does or does not. This allows for the browser to always provide a working experience instead of crashing or rendering errors giving a bad user experience. 


```js 
if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    // show the location on a map, perhaps using the Google Maps API
  });
} else {
  // Give the user a choice of static maps instead perhaps
}
```

Modernizr is a great library to handle feature detection.

### Feature Inference

*Feature inference* is similar to feature detection, but instead uses another function because it assumes it will also exist:

```js
if (document.getElementsByTagName) {
  element = document.getElementById(id);
}
This is not really recommended. Feature detection is more foolproof.
```

### UA String

This is a browser-reported string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. It can be accessed via navigator.userAgent. However, the string is tricky to parse and can be spoofed. For example, Chrome reports both as Chrome and Safari. So to detect Safari you have to check for the Safari string and the absence of the Chrome string. Avoid this method.

Checking the UA string is an old practice and should not be used anymore. You keep changing the UA checks and never benefit from newly implemented features, e.g.:

```js
if (navigator.userAgent.indexOf("MSIE 7") > -1){
    //do something
}
```


That's all for today, please leave any comments/questions/corrections in the comments. Thanks!


###### Sources:
Huge huge thanks to github user: yangshun for aggregating the most popular JS, CSS and HTML questions and giving us his answers to it. My weekly blog posts are to go over several questions at a time to reinforce my knowledge of fundamental javascript as I grow my expertise in it. Many of my blog will be paraphrasing if not direct quotes from his github. Find his tech interview handbook [here]("https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md#whats-the-difference-between-call-and-apply") and please support him!

And an additional thank you to Flatiron alum: Marissa O. who is a badass developer at Forbes magazine for directing me to his blog!
how I've demonstrated growth mindset recently.
Published: 2020-03-18 03:42:20

In this post, I would like to show how I have demonstrated a growth mindset recently. We all know that a person who is normal has to grow big every day in all aspects, I mean physically and mentally. Recently I had a challenge in Andela where I had to do something in HTML, CSS, and JavaScript I was a beginner in all those languages but I managed to study them and try to do required tasks on them. I will continue to add on this post. the way you react to change also can define how your mindset is, for example, if we are in the current situation of having this disease disaster of COVID-19 and one maybe he likes to drink beer in the bar. And when he/she continue to put himself/herself in danger by continuing to go to drink beer in the bar it means that he/she can't react well to the change, it makes him/her having the low mindset, in fact for me I like to play soccer recently I stopped playing it because of COVID-19 because I thought that soccer even if I like it I can't die because I don't play it, so that's what growth mindset person should do.
Also, growth mindset is all about how you can learn different aspects quickly and apply it in something necessary as any other one who had already done it, for example, I am trying to do software development while in high school I had studied Mathematics, Physics, and Geography, so I react to change quickly and apply new aspects in software development successfully. also, the growth mindset is all about how you resolve conflicts with colleagues. Growth mindset person is one who knows that there may be conflict(s)because of that everyone wants to reach something, but also to understand each perspective of another so that one may not cross the border of another because I believe that the only way to show the other one to respect your boundary is to show him/her that he/she had crossed it but not by declaring war but the conversation for resolving that issue, I think that show growth mindset also. Another fact that shows that I have a growth mindset is that I don't consider myself like one who knows all, it gives me courage every day of trying to study new things and let other show me how to do things when it is necessary. Growth mindset I believe that it is a key for reaching lifetime achievements because when you don't have one you don't grow at all in all aspects I mean, such as mentally, financially and physically. Other things that prove that I have a growth mindset are that I always try new things so that I can have a good experience life gives and be better because of that.
JavaScript as Prototype-based language
Tags: javascript, 100daysofcode, beginners, tutorial
Published: 2020-03-18 03:39:56

- JavaScript does not contain "classes" that defines a blueprint for the object, such as is found in C++ or Java
- JavaScript uses functions as "classes"
- Everything is an object in JavaScript
- In JavaScript, objects define their own structure
- This structure can be inherited by other objects at runtime

## What is a prototype?
- It is a link to another object
- In JavaScript, objects are chained together by prototype chain

```
Joe -> Person -> Object -> null

```

- JavaScript objects inherit properties and methods from a prototype

### Example of Prototype
- Prototype property allows you to add properties and methods to any object dynamically

```

function Animal(name) {
  this.name = name
}

Animal.prototype.age = 10

```


- When object `Cat` is inherited from object `Animal`
	- Then `Animal` is the prototype object or the constructor of the `Cat`

```

var cat = new Animal('cat')
console.log(cat) // constructor: "Animal"
console.log(cat.name) // cat
console.log(cat.age) // 10

```

---

I love jotting down my thoughts on my blog [Ninja Academy](http://ngninja.com/). And, if you are looking to level up your Web Development chops, do check out my [Ultimate Web Development Bootcamp](https://cutt.ly/web-development-bootcamp).
Multi or single-tenancy?
Tags: architecture, software, scale, question
Published: 2020-03-18 03:20:13

I have an idea I'm excited about for a Human Resources (HRIS/HRM) SaaS project. I'm doing some light planning and prepping.

The question I can't quite answer is how should I manage the tenants. I'm leaning single-tenancy. In my mind here's how it would go...

When someone signs up, it would automate creating a server instance and install/configure/deploy the application. They are isolated from other tenants in every sense, given a server geographically beneficial to them, [insert other benefits of being single tenant]. They get their own subdomain (also possible with multi-tenancy) or could point their own domain to that server (branding to an extent is also possible with multi-tenancy).

There would be a central server to manage the subscriptions/accounts, but it could also be managed from their own server talking to the said "central" server.

Does anyone have anecdotes of doing single vs multi-tenancy? Is this too much work? A silly idea? Too ambitious?
DevTools Tips #1 Preserve Log - Como reter o log de suas requisições ao mudar de página
Tags: womakerscode, devtools, tips, dicas
Published: 2020-03-18 02:53:05

Você como pessoa desenvolvedora em algum momento certamente já precisou de uma mãozinha das ferramentas de desenvolvedor do seu navegador para analisar algum problema fosse ele de front-end ou back-end. 

Este é o primeiro artigo de uma série que trará para você, pessoa desenvolvedora, dicas resumidas de como tirar melhor proveito desse conjunto de ferramentas disponíveis a apenas uma tecla (F12) de distância.

###### Para os exemplos deste tutorial eu usei o Microsoft Edge Dev, que tem como base o Chromium, então provavelmente você encontrará algo similar no Chrome, porém outros navegadores como o Firefox tem opções parecidas ou mesmo iguais.

___

Você já ouviu falar da opção “Preserve Log/Preservar Log” na aba Network/Rede? 

Sabe quando você carrega uma página e precisa analisar uma sequência de requisições que estão sendo executadas em um processo, porém durante o procedimento você precisa realizar alguma ação que vai te redirecionar para outra página e então você perde todo o log daquela primeira página? A opção “Preserve Log” evita que o seu log de requisições seja perdido ao navegar entre páginas. 

### Onde e como utilizar essa opção?

Abra as ferramentas de desenvolvedor do seu navegador, também conhecido como F12 ou dev tools, clicando na tecla F12. Outra opção seria acessando os três pontinhos perto de sua barra de endereços do navegador, então vá em "Mais ferramentas" e então selecione a opção "Ferramentas de desenvolvedor", ou ainda apenas utilizando o atalho Ctrl + Shift + i.

Vá na aba Rede/Network e selecione “Preserve Log”:

![Preserve Log selecionado](https://dev-to-uploads.s3.amazonaws.com/i/z0ggx0tktqy5xf3cs8en.PNG)

Sem “Preserve Log” marcado: 

![Exemplo de carregamento de página sem Preserve Log selecionado](https://dev-to-uploads.s3.amazonaws.com/i/pzpn9eknd28pgvzvhfbg.gif)

Com “Preserve Log” marcado:

![Exemplo de carregamento de página sem Preserve Log selecionado](https://dev-to-uploads.s3.amazonaws.com/i/w7c3ss0wgknge1kq80aa.gif)

E é isso, espero-os na próxima dica!
Send an HTTP GET Request using Java 11 HttpClient
Tags: java
Published: 2020-03-18 02:13:33

---
title: Send an HTTP GET Request using Java 11 HttpClient
published: true
description: In this tutorial, you will learn how to make an HTTP request in Java using the HttpClient class from Java 11. 
tags: java
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/yfma1hgz3ixqnaw9g7mw.png
---

In this tutorial, you will learn how to make an HTTP request in Java using the HttpClient class from Java 11. This class makes it really easy to send a request and in this demo, you will learn how to call a REST API. The REST API is going to return a JSON array and you will then learn how to convert each item in the array into a Java Object using Jackson. 

{% youtube 5MmlRZZxTqk %}

When you have completed this tutorial you should understand: 
  ✅ What is the HttpClient class and why would you need it
  ✅ Use Java HttpClient to send an HTTP GET Request
  ✅ Call a REST Client in Java
  ✅ Use Jackson Databind to parse JSON into Java Objects
  ✅ Use a reference method to print out each Java Object
#Day5 and #Day6 of "100daysofcode" Challenge
Tags: 100daysofcode, mongodb
Published: 2020-03-18 01:46:23

Hi, I hope everyone's doing great.

Another small update on the "100daysofcode" challenge.

This is about Day 5 and 6.

Finally completed the whole structure for files and folders. Started writing queries with all validations. I got a strong knowledge of statics and methods on mongoose Also, with express-validators (which is a lifesaver).

I will update the code and the explanations with my next post.

Also, I've decided to add these two things on my challenge

1 - I should at least network with one developer per day. As I don't have that many contacts.

2 - I found out code wars to be interesting. If I feel bored I should at least complete one problem and post the solution with an explanation on social networks.
How to stop being stressed by perfectionism, but keep the good parts
Published: 2020-03-18 01:45:02


_I'm definitely not telling here how to get rid of perfectionism, just how to balance it and stop being stressed by it. Keep the ability of seeing perfection and striving for it, but drop the stress._

## How bad it is

You hear a lot these days that perfectionism is bad. The main reason it was bad for me, was because it was stressful. When I thought about releasing my side project, I cringed. I thought how people would think it's ugly and not polished, and they'd hate it and say bad things about it. I even thought of changing the architecture (would be lots of work) to make it closer to being perfect.

## How good can it be

But I no longer think in that way. Now I think that if my side project solves an important problem, people would be forgiving of its issues. I am forgiving of its issues myself, because I have the same attitude. That doesn't prevent me from seeing that's it's not perfect and trying to make it better.

**I went from "it's ugly and not polished" to "it's not perfect, but it solves a problem, so it's fine".**

## How to get there
How did I get there? There are two parts to it:

1. Getting into mindset of solving problems by looking for problems in everyday life.
2. Getting into a habit of solving problems every day.

Thinking of solving problems balances perfectionism, by offering something else of value (beside perfectionism) to you and others! Even if the solution isn't perfect, but it still solves the problem, it's not all bad. If the only value you see (as I saw it) is to make a perfect product, you're going to be stressed.

My routine for solving problems:

1. Whenever I think of a problem, I write it down in [Drafts](https://getdrafts.com/). If you're not on Mac/iOS, you might use [Evernote](https://evernote.com/).
2. Every day, for one [pomodoro](https://en.wikipedia.org/wiki/Pomodoro_Technique), I go through the stuff I recorded in [Drafts](https://getdrafts.com/) and resolve it. For example, I chatted with a friend about an alternative to tea, and he suggested rose hip as (non-caffeine). I wrote it down in Drafts, and I'm going to investigate buying it.

    
I suffered from perfectionism a lot (being stressed and anxious), and I want to help you stop suffering from it, while keeping its good sides still. Good sides of perfectionism are the ability to see perfection and striving to improve your work.
 
I'd be keen to hear how did it work (or didn't) for you.
Crafting Commits
Tags: softwaredevelopment, learninpublic, collaboration
Published: 2020-03-18 01:26:02

The products we build as software developers are always evolving.

We have a codebase in motion.

The additions and deletions in the form of commits are what put our codebase in motion. The commits that a team is writing show where the codebase is headed. Past commits provide insight and evidence into how we got where we are.

As we craft commits, we ought to always have this dual objective in mind.

First, the commits we write need to communicate our intentions, the what and why of the changes. Pull requests made up of commits that do this well will make code reviews much more pleasant and [help mitigate all kinds of conversations](https://dev.to/jbranchaud/conversation-mitigators-2ioa).

Second, the commits that we and the rest of the team have written tell a story about how the code got here. They provide a bread crumb trail that can be followed. The way we prepare our commits affects how we are later able to do code investigations and approach challenging debugging tasks.

To do this, we have to build atomic commits by squashing our [cleanup commits](https://dev.to/jbranchaud/cleanup-commits-139i) and [writing good commit messages](https://dev.to/jbranchaud/good-commit-messages-4e9o) that tell the _why_ and link to supplemental content like the feature or bug ticket.

Craft your commits with both code reviews and code investigations in mind.
Running a cron job 3 times (1 pm, 2 pm and 3 pm) in Laravel
Tags: laravel, cron, linux
Published: 2020-03-18 01:23:32


Open cronjob config with vim & add script bellow

# m h dom mon dow command
* 13,14,15 * * * php /var/www/project/artisan schedule:run >> /dev/null 2>&1
Should you use sticky headers?
Tags: css, seo
Published: 2020-03-18 00:35:20

When building websites, you should always use sticky headers when possible. Sticky headers stay at the top of the screen and allow users to easily access navigation and contact buttons.

## Sticky Headers improve CTR & SEO

In my experience of building websites, and doing SEO Optimisations for [Insane Marketing](https://insanemarketing.com.au), adding sticky headers to client websites has always increased CTR (click-through-rate) by about 1% which can amount to a higher number of conversions

Some tips:
- Ensure the header is not large (and doesn't take up a lot of space on mobile screens)
- If the header is large, make it compacted when the user scrolls down, but don't remove functionality
- Add a shadow to the header (especially if your header is white, on white background)


### Pros
- Time-saving
- Good navigation
- Better branding

### Cons
- Takes up space
- Can be distracting

## Examples
### [Patrick Clare - Renovations Adelaide](https://renovationsadelaide.com.au)
[![Kitchens Adelaide](https://dev-to-uploads.s3.amazonaws.com/i/b159nb2iyka4vjhjbvq0.png)](https://renovationsadelaide.com.au)
[![Kitchen Adelaide](https://dev-to-uploads.s3.amazonaws.com/i/ktitgc4viednc1rxa55g.png)](https://renovationsadelaide.com.au)

[Patrick Clare Renovations Adelaide](https://renovationsadelaide.com.au) had massive improvements in traffic and user engagement which improved SEO after implementing a sticky header

- Improved CTR by 2%
- Improved Branding Awareness

### [Promatia](https://promatia.com)

Promatia saw massive user engagement increases and citizen signups on their government website, this helped them sign up more citizens and increased branding of the organization.

[View Promatia's Sticky Header](https://promatia.com)