teleren/devto huggingface dataset:
SDKMan, adicionando versões não listadas
Tags: sdkman, java
Published: 2021-10-17 01:41:14

---
title: SDKMan, adicionando versões não listadas
published: true
description: 
tags: sdkman, java
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s33ypif2r1hiwijx7bps.png
---
Que o [SDKMan](https://sdkman.io) é uma ferramenta fantástica creio que ninguém tem dúvidas. Desde que instalei ele minhas preocupações com versões do [Gradle](https://gradle.org/), [Java](https://www.java.com), [Kotlin](https://kotlinlang.org/), dentre outras **SDKs** terminaram... Como desenvolvedor **JVM** só de não precisar ajustar os famigerados **JAVA_HOME**, **M2_HOME** e outros, já transformaram meus dias em dias mais felizes.

Algo, no entanto, me deu uma certa dor de cabeça que gostaria de compartilhar com vocês:

Recentemente comecei a implementar um projeto com **Java 12**. De início, pensei, basta instalar essa versão com o **SDKMan**, porém, eu estava enganado... a versão não aparecia em nenhum dos vendors quando eu executava `sdk list java`.

![sdk list java](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qf6aue571gdigtgwrh6.png)

Ainda não entendi o porquê dessa lacuna, mas comecei a pensar em alternativas... eu poderia instalar a versão **16** e me fazer valer da retrocompatibilidade do **Java**, porém, isso começou a parecer uma belíssima de uma gambiarra.

Até pensei em instalar da maneira pré-**SDKMan**, porém, estava me perguntando como seria a gerência da versão do **Java** em dois pontos distintos no meu sistema operacional, além de possíveis alterações em meu POM para evitar [erros de versão de compilação](https://stackoverflow.com/questions/9170832/list-of-java-class-file-format-major-version-numbers). Foi então que um [post no StackOverflow](https://stackoverflow.com/questions/55809928/sdkman-is-missing-a-specific-java-version) trouxe uma solução que julguei mais elegante:

> It seems that downloading the missing version, then unpacking to: `~/.sdkman/candidates/java/` then renaming the extracted directory solves the problem.

Com isso, continuei utilizando apenas 1 gerenciador de versões do **Java**, aproveitando as facilidades do **SDKMan**! **SDKMan** é vida!!!
How to Install Homebrew (MacOS)
Tags: homebrew, macos
Published: 2021-10-17 01:41:08

Since it's very important for us to make our mac perfect to be developer tools we need command to make it easy to install tool. here are the steps:

> If you are Apple Silicon or M1 user please install rosetta 2 before continue and set terminal opened by rosetta 2 this link will guide you. [Apple Rosetta2](https://support.apple.com/en-us/HT211861)

## XCode Command Line Tools

If you don't have XCode installed, it's best to first install the command line tools to install homebrew

```sh
$ xcode-select --install
```

Then main of title, install homebrew:

## Homebrew Installation

```sh
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

Well it's take a little bit long, just make a glass of coffee when it's done.
To make it sure your homebrew ready type this code

```sh
$ brew --version
Homebrew 3.2.16
Homebrew/homebrew-core (git revision d0506b30624; last commit 2021-10-17)
```

```sh
$ brew doctor
```

Oke, you'r ready to brew 🍺
Create a Custom React.js Hook to Get Subdomains
Tags: react, javascript, tutorial, webdev
Published: 2021-10-17 01:30:02

Often times it's extremely useful to be able to easily parse the hostname or domain parts of your website. The use cases are many but we'll just look at how to make a react hook to help us get subdomain info for use in our application.

We'll use the Web API window.location.hostname. It'll return the string representation of the current host.
https://developer.mozilla.org/en-US/docs/Web/API/Location/hostname

```jsx
import * as React from 'react';

export default function useSubdomain(position = 0) {

  const [subdomain] = React.useState(() => {
    try {
      return window?.
        location?.
        hostname?.
        split('.')[position];
    } catch (err) {
      console.error(err.message);
    }
  });

  return subdomain;
}
```
You can see we just create an array from the hostname parts based on the `.` as a delimiter, and access the array index you pass in as the argument for the call to the hook.

We could take it a step further and create a function to run this logic at any time, but for now let's just assume that we only want this to run once as we call it, so we would use it like this:

```jsx
export default function MyComponent() {

  const subdomain = useSubdomain(0);

  return (
    <h1>
      The website subdomain is {subdomain}
    </h1>
  );
}
```

You could add checks in to make sure you're actually on a subdomain as well, and also guards for www.
A Short Number.isNaN() and isNaN() Tutorial
Tags: javascript, beginners, programming, tutorial
Published: 2021-10-17 00:49:21

Today, we'll talk about the Javascript method `Number.isNaN` and the global Javascript function `isNaN()`.

&nbsp;
#`Number.isNaN()` and `isNaN()`
Both `Number.isNaN()` and `isNaN()` return a `boolean`, depending on the value that has been passed.

```javascript
console.log(isNaN(5)); // false
console.log(Number.isNaN(5)); //false
```
&nbsp;

#`isNaN()`
Determines whether or not a value is `NaN (not a number)` and returns a `boolean` (`true` or `false`).

```javascript
console.log(isNaN(8)); // prints false, as 8 is a number
console.log(isNaN('100F')); // prints true, 100F is not a number  
```

`isNaN()` however, behaves strangely when passed non-numeric arguments at times, and it is considered unreliable compared to `Number.isNaN()`. 

This is because `isNaN()` tries to convert any non-numeric argument passed into it to a `Number`, and tests the resulting value of that instead.  

```javascript
// these equate to true, despite them clearly not being numbers
console.log(isNaN('NaN')); 
console.log(isNaN(undefined));
console.log(isNaN({}));
console.log(isNaN('blah')); 
```
&nbsp;

#`Number.isNaN()`
`Number.isNaN()` determines whether a value passed is `NaN` (Not a Number), using the type `Number`. 

```javascript
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(6));   // false
```
Generally, we prefer to use `Number.isNaN()` as a default, as it is more robust than `isNaN`, its original.

Below is a look at the `function typeOfNaN(value)`, which takes in a `value` and uses `if` statements to determine which type of `NaN` was passed into it, we use `console.log` afterwards to print out which type of `NaN` was detected.

```javascript
function typeOfNaN(value) { // tests which type of Not a Number was passed in as 'value'
  if (Number.isNaN(value)) { // if this is true
    return value + ' is not a number evaluated with Number.isNaN()';
  }
  if (isNaN(value)) { // tests if this is true
    return value + ' is not a number evaluated with isNaN()';
  }
}

console.log(typeOfNaN('100F'));
// output: "100F is not a number evaluated with isNaN()"

console.log(typeOfNaN(NaN));
// output: "NaN is not a number evaluated with Number.isNaN()"

```
We can also check if this `value` is `false` i.e. a `Number`, simply by using `== false`.

```javascript
if(Number.isNaN(5)==false) {
  console.log('This is a number!');
}
```
My top resources for interviewing
Tags: career, javascript, programming, productivity
Published: 2021-10-17 00:01:25

This week I finally got my shid together and sat down to compile a list of things I thought were valuable when interviewing.

Resources and some mindset stuff...like how to get yo'self unstuck in an interview, should you apply to engineer or developer roles, etc etc

So, my gift to you...

[>>> LINK HERE](https://engjobresources.carrd.co/)

Talk soon

Scott
Should we use Kubernetes for our MVP?
Tags: kubernetes, devops, startup, vmp
Published: 2021-10-25 18:23:36

---
title: Should we use Kubernetes for our MVP?
published: true
date: 2021-10-17 00:00:00 UTC
tags: kubernetes,devops,startup,vmp
canonical_url: https://jhall.io/archive/2021/10/17/should-we-use-kubernetes-for-our-mvp/
---

I was recently posed an interesting question, which I think is worth answering here:

> Should we use Kubernetes for our SaaS MVP?

Right off the bat, if we’re using Eric Ries' definition of MVP (which I’ve [talked about before](https://jhall.io/archive/2021/06/13/the-misunderstood-mvp/)), the answer is almost certainly a big fat **NO**. The only reasons I can imagine to use Kubernetes for a Ries-style MVP are:

1. You already have Kubernetes configured and your engineers are already familiar with it, so Kubernetes is literally the quickest way to test your idea’s viability.
2. Your product is intimitely related to Kubernetes.

Even if you meet both of those criteria, it’s likely that your MVP should not use Kubernetes, since an MVP could just be a landing page with a CTA button. But I digress.

Let’s suppose what you really mean is “Should we use Kubernetes for a beta version of our application?”

Now things are a lot less black-and-white. So here’s my check list to consider when deciding whether to use Kubernetes. If you answer “no” any of these questions, strongly consider alternatives for the time being. If you architect your system well, switching to Kubernetes later won’t be difficult.

1. Have you already done an Eric Ries style MVP to validate your business concept, or do you have other solid proof that your business concept is viable? (If not, read [_The Lean Startup_](https://amzn.to/3FPTs01) right now!)
2. Do you have engineers who are already comfortable working with Kubernetes?
3. Is your service built (or will it be built) primarily of stateless services?
4. Are your developers comfortable building software that conforms to most of the concepts in the [twelve-factor app](https://jhall.io/archive/2021/04/17/the-twelve-factor-app/)?
5. Can you afford the cloud or hardware bill for the extra resources required for a minimal Kubernetes cluster? (Consider that a minimal useful Kubernetes cluster requires 3 servers or VMs)
6. Can you articulate your reasons for wanting to use Kubernetes? (There [are many](https://jhall.io/posts/kubernetes-small-team/), but they don’t all apply to everyone. If you can’t articulate _your_ reasons, you aren’t ready for Kuberentes.)

This is by no means an exhaustive check list, but should help get you thinking critically about the decision whether to use Kubernetes or not.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Gatsby + Netlify CMS + TailwindCSS Starter
Tags: react, gatsby, jamstack, tailwindcss
Published: 2021-10-29 08:27:39

---
title: Gatsby + Netlify CMS + TailwindCSS Starter
description: With the number of websites generated with the same tools, I tend to mutualize as much as we can the effort to maintain the technical stack. Following this principle, I just created a new starter coming from some of my website development and powered with Gatsby.
published: true
date: 2021-10-17 00:00:00 UTC
tags:
  - react
  - gatsby
  - jamstack
  - tailwindcss
canonical_url: https://www.emmanuelgautier.com/blog/gatsby-starter-netlify-tailwind
---

With the number of websites generated with the same tools, I tend to mutualize as much as we can the effort to maintain the common technical stack. Following this principle, I just created a new starter coming from some of my website development and powered with Gatsby.

You can find this starter on this [Github Repository](https://github.com/emmanuelgautier/gatsby-starter-netlify-tailwind). This repo contains an example business website that is built with:

- [Gatsby](https://www.gatsbyjs.org/)
- [Netlify CMS](https://www.netlifycms.org)
- [TailwindCSS](https://tailwindcss.com/)

It follows the [JAMstack principles](https://jamstack.org) with Git as a single source of truth for pages and blog posts, deployed and delivered thanks to the solution [Netlify](https://www.netlify.com).

This starter is not strongly linked with Netlify so you can choose the hosting provider you want but, since this starter is using the Netlify CMS solution, the integration is simpler with Netlify.

## What are the main features?

This starter brings the following set of features:

- Pages and Blog posts content model
- Performance optimized with good Web Vitals scores
- SEO optimized
- Twitter Cards and Open Graph support
- RSS Feed
- Sitemap

Since this starter comes from my other websites developments, this list should bring most of the features you will need to build a website. If your think some features are missing or can be improved, feel free to contribute by making a PR or create an issue to ask about new features.

To see how it looks, please go to the deployed **[Demo Page](https://gatsby-starter-netlify-tailwind.netlify.app/)**.
OpenCart 500 Internal Server Errors.. Sigh.
Tags: opencart, php, errors, ecommerce
Published: 2021-10-16 23:52:23

This would be a short one.

I had been struggling with an opencart website. I had been developing recently for a client; the website would throw a 500 error but there was no way to know what was actually wrong!

I always expected the cpanel error.log to show the error details but couldn't find anything there. I stumbled upon an article which made me realize opencart has a separate error.log file in the admin folder. Phew! This is a horrible design implementation.

Examining that file made me see the error... an extension was trying to create tables but it didn't have the DB permission to do that. 

Surely, the extension could have thrown a relevant error message or check to see if it could create a table. I updated the MySQL user permissions and the error disappeared!

I hope this helps someone as frustrated as I was!
How to integrate tailwind and webpack
Tags: tailwindcss, webpack
Published: 2021-10-16 23:41:45

This is a basic foundation setup, for using tailwind in webpack. It will be used when using react.

```
.
├── package.json
├── postcss.config.js
├── src
│   ├── index.css
│   └── index.js
├── tailwind.config.js
└── webpack.config.js
```

Clone our previous postcss repo: https://github.com/ynwd/postcss


Install tailwindss
```
npm i tailwindcss -D
```

Create tailwind config
```
npx tailwindcss init
```

This will create a minimal `tailwind.config.js` file at the root of your project:

```js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

```

Update tailwind config to remove any unused classes for the smallest file size
```js
module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.js',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

Update postcss config to use tailwind
```js
module.exports = {
    plugins: [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
        require('cssnano')({
            preset: 'default',
        }),
    ],
};
```

Include Tailwind in your CSS
```css
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Update entry point:
```js
/* src/index.js */
import "./index.css"

```

Compile
```
npx webpack
```

You can get the final source code here: https://github.com/ynwd/postcss/tree/tailwind
How to automatically add dark mode to your site in 3 lines
Tags: css, darkmode, quicktips
Published: 2021-10-16 23:32:59

---
title: How to automatically add dark mode to your site in 3 lines
published: true
description: A super quick and easy way of instantly adding a dark mode to your website.
tags: css, darkmode, quicktips
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6eept7iqk9wcsm5dm7ku.png
canonical_url: https://flipsphere.net/2021/10/17/how-to-automatically-add-dark-mode-to-your-site-in-3-lines.html
---

``` css
@media (prefers-color-scheme: dark) {
    * {filter:invert(1);}
}
```

The result won't be perfect (in fact, it'll probably look downright awful), but it gives you a great starting point to then pull out individual colours and rebuild the CSS how you want!

The `@media (prefers-color-scheme:dark){ ... }` is all you need to automatically trigger dark mode styling on your site if the user has set their browser to dark mode.

This is how I created the new dark mode on my blog. Started with the `filter:invert(1);` trick, picked out the colours manually in the inspector that worked, and slowly tweaked the rest. You can see the final result here: [https://flipsphere.net/](https://flipsphere.net/)
Python com Celery
Tags: python, rabbitmq, celery, flower
Published: 2021-10-16 23:21:31

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

Olá caro leitor, no video que vou deixar a baixo eu explico sobre o uso do celery o que é e o que eu posso fazer com ele.
Ainda dou um pequeno exemplo:


[Link video](https://www.youtube.com/watch?v=G6dIr3tGpG8)
Just setting up my Hugo - Get the Hugo Inceptor theme
Tags: hugo, staticgen, showdev
Published: 2021-10-18 18:35:07

---
title: Just setting up my Hugo - Get the Hugo Inceptor theme
published: true
date: 2021-10-16 22:18:10 UTC
tags: ["hugo", "staticgen", "showdev"]
canonical_url: https://tarikdahic.com/posts/just-setting-up-my-hugo/
---

Hello world! This is my first post published via Hugo on my first blog. A lot of firsts there :)

My name is Tarik and I am a software engineer from Tuzla, Bosnia and Herzegovina. I work as an iOS developer at Bicom Systems where my main focus is working with VoIP and instant messaging. Before that I worked as a part-time web developer and in my free time I am also playing with Go.

I will try to post weekly about my software engineering practices, findings and snippets where the topics will mostly cover iOS development since it is my primary interest.

## Inceptor

I am using this opportunity to announce that I open sourced the theme I am using for my blog. It is called **Inceptor** (latin word for beginner) and it is available on [GitHub](https://github.com/daholino/inceptor). It served me to learn more about Hugo, how it works and how it is composed.

Inceptor is a simple, fast and responsive Hugo theme for blogging. It is SEO friendly, it has Disqus and Google Analytics support and almost everything that you can see is customizable. I plan to add more features as time goes by and I learn more!

More information about installation and configuration can be found in the repository README of Inceptor.
How To Prevent Theme Colour From Flickering in Svelte Or SvelteKit
Tags: webdev, svelte, css
Published: 2021-10-16 21:55:36

---
title: How To Prevent Theme Colour From Flickering in Svelte Or SvelteKit
description: Learn how to prevent your theme colours from flickering when your page loads in your Svelte or SvelteKit website
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fl8b5olfspj1j5mhdr5u.jpg
tags: webdev, svelte, css
canonical_url: https://www.kudadam.com/blog/prevent-theme-colour-flickering-svelte
---

My theme colour used to flicker after the page had finished loading. Eventually, I found a way to fix it.

## The problem

Initially, I used to change the theme colour of my website within the `onMount` function. However, the theme colour was always flickering. The cause of this was that the body loads before the `onMount` function sets the theme colour.

![How the screen was flickering before I found a solution](https://ik.imagekit.io/kudadam/blog/prevent-theme-colour-flickering-svelte/flickering.gif)
A gif showing the bug  

So as you can see, when the page is reloaded, the light theme is first shown, and then after the document has finished loading, the `onMount` function sets the theme colour.

## Solution

The only likely option is to set the theme colour before the body loads. We do this by inserting a script tag into the head element, and this code is executed before the body is loaded. That is the most effective approach to prevent colour flickering.

## The Code

Okay, so you can write this code in the component which you use to toggle between the themes.

```svelte
<svelte:head>
	<script>
		if (document) {
			let mode = localStorage.theme || 'light';
			if (mode === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
				document.documentElement.classList.add('dark');
				localStorage.theme = 'dark';
			} else {
				document.documentElement.classList.remove('dark');
				localStorage.theme = 'light';
			}
		}
	</script>
</svelte:head>
```

To access the head element, we used the `<svelte:head>` component. Next, we created the script tag just as we would on our normal HTML pages. In the following lines, we attempt to retrieve the theme from `localStorage`. If it’s not set, it defaults to the “light” theme. The next steps involve adding classes and setting the theme in `localStorage`. Finally, observe how the page loads without flickering.


![Now the page loads without flickering](https://ik.imagekit.io/kudadam/blog/prevent-theme-colour-flickering-svelte/non-flickering.gif)
12 VS Code Shortcuts To Code Faster!
Tags: codenewbie, beginners, programming, productivity
Published: 2021-10-16 21:50:38

Some of these tips I took from VS Code documentation. I recommend you to take a look. [📃VS Code docs.](https://code.visualstudio.com/docs/getstarted/tips-and-tricks)

### 1. Quick file open: `Ctrl + P`
![QuickFileOpenPIC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfzbx8ovn6m3qeav15b4.gif)
### 2. Show terminal: `Ctrl + backtick`
![ShowTerminalPIC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxh7t1gp210hqudnbubk.png)
### 3. Zen mode: `Ctrl + K, then Z`
![ZenMondePIC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vsw29uf09ubedaqfohgz.gif)
### 4. Open new editor: `Ctrl + \`
![SplitEditorPIC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z36bcwrvpm02zup6qh3e.gif)
### 5. Switch between editors: `Ctrl + 1, Ctrl + 2...`
![NavigateEditorPIC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zivyzlb097qz42tbx6e.gif)
### 6. Multi cursor selection: `Alt + Click` or `Ctrl + Alt + Up/Down`
![MultiCursorPIC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjqvww648f1lohqpvr2t.gif)
### 7. You can also add additional cursors to all occurrences of the current selection: `Ctrl + Shift + L`
![AllOcurPIC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01r2ma37aw67lbfg984v.gif)
### 8. Or if you want to select only the next occurrence: `Ctrl + D`
![OneByOnePIC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1owbm92ngpbpjjfhovpt.gif)
### 9. Copy line up / down: `Shift + Alt + Up/Down`
![CopyLinePIC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88q15n4gm13fuxpwqlig.gif)
### 10. Move line up and down: `Alt + Up/Down`
![MoveLinePIC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8widg4jh7twym1wcr333.gif)
### 11. Code formatting: `Shift + Alt + F` (whole document)
![FormatPIC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frsg2yorcx7y17ur2u8h.gif)
### 12. Rename: `F2`
![RenamePIC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cuxxm9wm9jmrkw7n7fv5.gif)
----
😎 You might also like:
[Python Typing](https://dev.to/mrslima/python-typing-kl4)

📫 Where to find me:
[All my links](http://taplink.cc/limaa.ds)