teleren/devto huggingface dataset:
Day 113
Tags: 100daysofcode, programming
Published: 2021-06-16 15:01:23

Day 113/200 of #200DaysOfCode #100DaysOfCode #100daysofcodechallenge 

- Solved two problems on Codewars.

1 - Linux history and `!` command. Series#2 The `!n` command (6 kyu)
2 - Correct the time-string (7 kyu)
How to test your UI without resizing browser
Tags: css, responsiveness, webdev
Published: 2021-06-16 15:00:01

## The Problem
When working on UI layouts, for testing responsiveness - you may be used to either:
1. DevTools with custom viewport sizes
2. Or some extension e.g. Window Resizer
3. Or resize the browser window itself

The problem with above approaches is you would be testing with fixed window sizes.

## The solution

Enter css property `resize`

The property accepts 4 different values:
* *both* - resized both *horizontally* and *vertically*
* *horizontal* - resize it in the *horizontal* direction
* *vertical - resize it in the *vertical* direction
* *none* - **no** user-controllable method for resizing it.

> The rules to use `resize`:
> 1. NO inline elements
> 2. `overflow` is NOT `visible`

Say you have code that has items wrapped in a flex container:

```html
  <ul class="items">
    <li> item </li>
    <li> lorem ipsum dorem </li>
    <li> Lorem ipsum dolor sit amet </li>
    <li> consectetur adipiscing elit, sed do eiusmod tempor incididun </li>
  </ul>
```

```css
.items {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}

li {
  border: 1px solid;
  padding: 10px;
}
```

To use `resize`, you'll wrap the `ul` with style as:
```css
.container {
  display: block;
  overflow: auto;
  resize: both;
}
```
```html
<div class="container">
  <li> item </li>
    <li> lorem ipsum dorem </li>
    <li> Lorem ipsum dolor sit amet </li>
    <li> consectetur adipiscing elit, sed do eiusmod tempor incididun </li>
</ul>
```

With this, you can test the responsiveness easily:

![Responsive test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/du8qruc0s9mj6gtev17a.gif)

Codepen for a demo is available [here](https://codepen.io/pritam-patil/pen/poeGRva)


...


Follow me on [twitter](https://twitter.com/TheDoucheP) or [Github](https://github.com/pritam-patil).
WHAT IS MY IP ADDRESS
Tags: ipaddress, productivity, tooling
Published: 2021-06-16 14:39:13

My IP Address Tool is used to Find Your IP, City, Region, Country, Country Code, ISP, Latitude and Longitude. This IP Locator Tool is a useful IP tool that allows you to retrieve the IP location information of an IP address instantly.

An IP Address (Internet Protocol address) is a digital identifier assigned to each device connected to a computer network that uses the Internet Protocol for communication. An IP address performs mainly two main functions: identifying the host or network interface and addressing the location.

IP addresses are written and displayed in human readable notations. Due to the growth of the Internet and the depletion of available IPv4 addresses, a new version of IP (IPv6). There are two versions of IP Addresses available: IPv4 and IPv6. 

- IPv4 (Internet Protocol version 4) defines an IP address as a 32-bit number. Example - 172.16.254.1

- IPv6 (Internet Protocol version 6) defines an IP address as a 128-bit number, which was standardized in 1998 and available since the mid-2000s. Example - db8: 0: 1234: 0: 567: 8: 1

Want to check your IP Address, check here -

**[https://www.sarojmeher.com/seotools/my-ip-address](https://www.sarojmeher.com/seotools/my-ip-address)**
React Forms focus next field on enter
Tags: react
Published: 2021-06-16 14:36:50

---
title: React Forms focus next field on enter
published: true
description: 
tags: reactjs
cover_image: https://miro.medium.com/max/3840/1*yjH3SiDaVWtpBX0g_2q68g.png
---
Hi everyone, 
This is my first post on dev.to
I started to learn react few months ago and i'm starting to get comfortable with it.

On my project I had an idea to use enter key to go to the next field in the form that is focusable (mimic tab functionality). I didn't want to use useRef on each field and manually adjust focus because it would be cumbersome.

Hook is called "useFocusOnEnter".

```javascript
const useFocusOnEnter = (formRef) => {
	const onEnterKey = (event) => {

		if (event && event.keyCode && event.keyCode === 13 && event.target && event.target.form) {
			const form = event.target.form;
			const index = Array.prototype.indexOf.call(form, event.target);
			for (let i = index + 1; i < formRef.current.length; i++) {
				if (formRef.current[i].tabIndex === -1) {
					continue
				}
				formRef.current[i].focus();
				if (document.activeElement === formRef.current[i]) {
					break;
				}
			}
		}
	}

	return {onEnterKey};
}

export default useFocusOnEnter;

```


And to see it in action:

```javascript
const FormComponent = ({stavka}) => {

	const form = useRef();
	const {onEnterKey} = useFocusOnEnter(form);

	const handleSubmit = (e) => {
		//handle submit
	}

	return (
		<form ref={form} onKeyUp={event => onEnterKey(event)}>
			<input autoFocus/>
			<input />
			<input />
			<input />
			<input />
			<button type="button" onClick={handleSubmit}>Save</button>
		</form>
	);
}
export default FormComponent;
```

Thank you for reading
Learning CSS3: A Challenge?
Tags: beginners, webdev, css, codenewbie
Published: 2021-06-16 14:34:35

So, I have started learning CSS for a while now. I have taken the Introduction to CSS3 course by University of Michigan. I love the instructor, she seems like a great professor. 

I also refer to MDN Docs and man, those are FOR REAL, AMAZING. I find all my queries answered through those and I am really liking web development(front-end), maybe, because it's easy? 😂 

One thing, I have noticed while learning CSS is that, there are a lot of properties and there's a very high chance you will forget them, so I would suggest that when you learn about a new property, play with it, see what it does, what changes it brings!

Also, make small websites, like a website that lists top 10 Rock songs or something you like. Add styling to it. It's very simple but you will learn a lot through this process. So, go on. Have fun!

Also, if have already learnt web development, do share you tips in the comments. 😊

Happy Coding!
Introducing DataStation, the open-source data IDE for developers
Tags: sql, python, javascript, visualization
Published: 2021-06-16 14:21:01

_Originally published at https://datastation.multiprocess.io/blog/2021-06-12-introducing-datastation-the-data-ide-for-developers.html._

Real-world data analysis as a developer means combing through customer data in SQL, historic (activity) logs in ElasticSearch, exports from Salesforce, issues in JIRA, random additional Excel files from product and sales, and myriad other systems. Switching between tools to transform, join, group, filter, search and visualize is a pain. SQL IDE for SQL, Kibana for Elastic logs, Excel for visualizing, and Python when all else is too cumbersome.
I want to have access to all data sources in a single place and be able to share and script seamlessly between them. I want to end up with a visualization, a recurring report, or a CSV I can send along to someone else.

I am building [DataStation](https://datastation.multiprocess.io/) to tackle this problem of data exploration.

The easiest way to play with the concept today is through the [entirely in-memory online environment](https://app.datastation.multiprocess.io/). Or you can watch a [short demo](https://www.youtube.com/watch?v=_7LEV3ZeQWU) to see a simple example in action. Since it runs with no server component, the online environment has a few natural restrictions: it cannot connect to SQL databases and it cannot make HTTP requests that don’t set CORS headers. In the next few weeks we’ll release the (also open-source) desktop edition that does not have these restrictions. Feel free to [subscribe](https://forms.gle/wH5fdxrxXwZHoNxk8) to hear about this availability and other upcoming features.

{% youtube _7LEV3ZeQWU %}

The core of DataStation will always be open-source. In the future if it makes sense we may offer a commercial licensed version with features needed for enterprise use.

Due to the offline-first design, DataStation will always be a tool you can bring into your work environment and use just like any other text editor. Don’t worrying about corporate security since it is not (today) a SaaS. We don’t store your data and use minimal analytics to inform product direction.

You can help out by using DataStation, reporting bugs (of which there will surely be many), checking out the [source code](https://github.com/multiprocessio/datastation), joining the [community on Discord](https://discord.gg/f2wQBc4bXX), and getting in touch about potential use cases.

I’m looking forward to hearing from you!
Episode 7: Brain Scans and Networking
Tags: datascience, python, career, ux
Published: 2021-06-16 14:13:06

Joshua Jacobs has come by the café to teach the unicorn all about wood turning. While Marta tries to get rid of 37 hoof-turned paper towel holders, Joshua chats with Jason and Bojan about...brain scans?

Learn about the wild and crazy bugs that can creep into scientific data processing, find out why medical user interfaces are never pretty, and discover how to grow your professional network.

Turns out that lurking in cafés is a great way to make new connections, both synaptic and personal. Come lurk in ours!

{% podcast https://dev.to/bughunters/episode-7-brain-scans-and-networking %}

---

[Joshua Jacob's LinkedIn](https://www.linkedin.com/in/joshuajacobsphd)

["We Are Legion (We Are Bob)" by Dennis E. Taylor](https://bookshop.org/books/we-are-legion-we-are-bob/9781680680584)

["The End of Error" by John Gustafson](https://bookshop.org/books/the-end-of-error-unum-computing/9781138402195)

[Unum (number format)](https://en.wikipedia.org/wiki/Unum_(number_format))

[Gerald Weinberg's Non-Fiction Books](http://geraldmweinberg.com/Site/Non-Fiction.html)

["The Happiness Hypothesis" by Jonathan Haidt](https://bookshop.org/books/the-happiness-hypothesis-finding-modern-truth-in-ancient-wisdom/9780465028023)

["The Righteous Mind" by Jonathan Haidt](https://bookshop.org/books/the-righteous-mind-why-good-people-are-divided-by-politics-and-religion-9798200560622/9780307455772)

Music by: [https://audionautix.com](https://audionautix.com)

Sponsored by Softerrific: [https://www.softerrific.com/](https://www.softerrific.com/)

Cover Image from [Dr. Leon Kaufman. University Of California, San Francisco (Public Domain)](https://visualsonline.cancer.gov/details.cfm?imageid=2416)
6/10 TIL: AWS solutions architect cert S3 Part 1
Published: 2021-06-11 10:59:11

- Basics of S3
    - S3 is a universal namespace; bucket names must be unique globally
    - When you upload a file to S3, you will receive a HTTP 200 code if the upload was successful
    - S3 is object based—i.e. allows you to upload files
        - Consists of:
            - Key (name)
            - Value (data)
            - Version ID
            - Metadata
            - Subresources (Access Control Lists, Torrent)
    - Files can be from 0 bytes to 5TB; there is unlimited storage
    - Files are stored in Buckets (equivalent to folders)
- Data consistency in S3
    - **Read after Write consistency** for PUTS of new objects (you are able to read the file right after writing to it; http PUTS)
    - **Eventual Consistency** for overwrite PUTS and DELETES (latest version will always be used)
- S3 guarantees:
    - 99.99% availability for the S3 platform
    - Amazon Guarantee 99.9% availability
    - 99.999999999% durability for S3 information (11 x 9s)
- S3 features:
    - Tiered Storage available
    - Lifecycle Management
    - Versioning
    - Encryption
    - **MFA Delete**
- S3 Storage Classes (Tiers)
    1. S3 Standard
        - 99.99% availability, 99.999999999% durability, stored redundantly across multiple devices in multiple facilities, designed to sustain the loss of 2 facilities concurrently
    2. S3 - IA (Infrequently Accessed)
        - For data that is accessed infrequently, but requires rapid access when needed
    3. S3 One Zone - IA
        - When you want a lower cost option for IA data, but not require the multiple AZ data resilience
    4. S3 - Intelligent Tiering
        - Automatically moving data to the most cost-effective access tier using ML
    5. S3 Glacier
        - Secure, durable, and low-cost storage for data archiving; retrieval times configurable from minutes to hours
    6. S3 Glacier Deep Archive
        - Lowest-cost storage class where a retrieval time of 12 hours is acceptable
- S3 charged based on:
    - Storage
    - Requests
    - Storage Management Pricing (different tiers)
    - Data Transfer Pricing
    - Transfer Acceleration
        - Enables fast, easy, and secure transfer of files over long distances between your end users and an S3 bucket. It takes advantage of Amazon CloudFront's globally distributed edge locations. As the data arrives at an edge location, data is routed to Amazon S3 over an optimized network path
        - If users want to upload a large file to a bucket in London, they can upload it to an edge location and those edge locations will use amazon backbone networks to bring it into London
    - Cross Region Replication
        - Automatically replicates objects in a bucket across different regions
Is Indentation Important ?
Tags: webdev, programming, html, codenewbie
Published: 2021-06-16 13:54:17

Some times when we write code we forget to indent our code. Indent simply means to space out the lines and nest the tags and curly braces correctly to show the parent child relationship between the 
individuals respectively.

So to answer the question yes! Indentation is important. Some people may not be able to explain why but they'll tell you that it's important though.

I'll attempt to explain why Indentation is very important while writing code and I'll suggest possible solution that can help you indent your code easily.

So one reason I learnt that makes Indentation important is because it improves the readability of your code. If you have worked with a framework like Bootstrap, you'll notice how fast your code grows and if you don't indent your code, it could get a little messy and difficult to debug.

There may also be a case where you put in some code in an inappropriate container. For example, you may paste in the bootstrap template of a component into a div container you created for something else. I personally have had an issue in my bootstrap grid system because of Indentation. It really frustrated me and I spent a lot of time to figure that out. So you see Indentation can also help you eliminate bugs.

One more reason you might want to indent your code is because it helps you write more clean code and improves your collaboration with a team as your colleagues will find it easy to read your code. This is an advantage as it will add value to you as a developer.

A quick solution if you are using Microsoft's Visual Studio Code is to activate the auto indent feature. This indents your code automatically at least to a decent point.

Also try to indent your code as you write them, don't wait till you finish or you may get lazy once the code works.

Okay that's what I have to share and I am grateful for the Grace to share this with you all.

Thank you for reading, please drop a comment about your opinion on this. Don't forget to write more code 😉.
Help out a mid-level dev, rate my CV?
Published: 2021-06-16 13:46:25

Hello fellow devs,

I've been recently looking for a new job and updated my CV. I would really appreciate it if you guys can take a look at my CV, Github and website and share what you think can improve my chances. 

Github: https://github.com/sakydev
Website: http://www.sakytalks.com/
Resume: https://drive.google.com/file/d/1HiT6Ef_WTZPY0f4-bXzx0lCZ7aJJ72yS/view?usp=sharing

Thank you
Customize Angular Webpack config
Tags: angular, webpack
Published: 2021-06-16 13:32:25

---
title: Customize Angular Webpack config
published: true
description: Steps to customize Webpack config in Angular

tags: Angular, Webpack
---
1. add `customWebpackConfig` to *angular.json*
	```json
	{
		"projects": {
			"architect": {
				"build": {
					"options": {
					  "customWebpackConfig": {
              "path": "./custom-webpack.config.js",
              "replaceDuplicatePlugins": true
            },
					}
				}
			}
		}
	}
	```

2. add the extra webpack plugin config in the *custom-webpack.config.js*
	```javascript
	module.exports = {
		module: {
			rules: [
				{
					test: /\.js$/,
					loader: 'babel-loader',
					query: {
						presets: ['@babel/preset-env'
						]
					}
				}
			]
		}
	}

	```
Easily test Safari browser on Windows with Comparium
Tags: browser, testing
Published: 2021-06-16 13:27:26

When the process of testing web products is carried out, it is very useful, if not extremely necessary, to use a variety of virtual machines and specialized [virtual Safari browser](https://comparium.app/blog/safari-emulator/test-safari-on-windows/) emulators, with the help of which the testing process is greatly simplified. But let's talk about one of the best tools for cross-browser testing Comparium.

Comparium is a web tool that allows you to test your websites effectively to ensure that they function across different browsers and operating systems as you intended. It is also a service that offers real-time testing that helps in checking the responsiveness and functionality of the site
...here it is
Tags: barcode, scanner, arduino, edge
Published: 2021-06-16 13:20:31


scanning a bar code on a cardboard box 
This is for a ongoing edge computing project.
The scanner send the code through an arduino over WiFi to a local Edge server
https://youtu.be/bPrwIpH_2C4
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/andevm79tbr52n7lj426.jpg)
Hmm, that was weird - part 1
Tags: qa, softwaretesting, troubleshooting, tutorial
Published: 2021-06-16 12:25:56

Whenever one of family members asks me what I do, my simple response is "Eh, I check if things work". Most of the time, it's a good enough TL;DR of my role in QA world. I would also replace `things` with different words based on the individuals understanding of software.

But when they ask for more details, well ... that's where they lose interest.

![But why gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ow5cv6pahk885b3q0etv.gif)

So, it only made sense for me present my thoughts and actions in a diagram! 

This will be a 3-part series containing a set of inputs, outputs, decisions and options to progress, with the end goal being to successfully diagnose the root cause of an issue I encounter. 

App: A common web app, let's call it dev.to
Test case: Successfully update user details

![tester flowchart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6xxtog0wljg1nc5mjwz.png)

Part 2 coming soon.
Laravel Livewire Fullcalendar Integration  Tutorial
Tags: laravel, livewire
Published: 2021-06-16 13:18:43

Hi Friend,

In this example, I will learn you how to use fullcalendar with livewire example. We will explain step-by-step laravel livewire fullcalendar integration. you can easily make livewire fullcalendar integration in laravel. we will describe laravel livewire fullcalendar integration.

Here, I will give you full example for simply livewire fullcalendar integration in laravel native as bellow.

More..
https://www.mywebtuts.com/blog/laravel-livewire-fullcalendar-integration-example
Dicas de Grails #2 - acessando o contexto do Spring
Tags: braziliandevs, grails, sql, ptbr
Published: 2021-06-16 13:08:16

---
title: Dicas de Grails #2 - acessando o contexto do Spring
published: true
description: Dicas de Grails #2 - acessando o contexto do Spring

tags: braziliandevs, grails, SQL, ptbr
cover_image: https://3.bp.blogspot.com/-aW8oYKOJnR8/Wg6pw5EzDvI/AAAAAAAAG4Y/fh5beB_YLEorGHsAwsCtxFmbUTVMfAdFQCLcBGAs/s1600/grails.jpg
---
Todo projeto Grails&nbsp;na realidade é uma aplicação Spring MVC (mais precisamente, <a href="http://projects.spring.io/spring-boot">Spring Boot</a> a partir do Grails 3.0). Há momentos nos quais é interessante obter acesso ao contexto do Spring (também conhecido como <em>Application Context</em>)&nbsp;para poder obter os beans que compõem nossa aplicação.

Mas quais seriam estes beans? Essencialmente seus controladores, classes de serviço, bibliotecas de tag ou mesmo aqueles que você possa vir a declarar no arquivo <em>grails-app/conf/spring/resources.groovy&nbsp;</em>(isto fica para uma próxima dica).

Em qualquer classe de domínio, controlador, serviço ou biblioteca de tags, para obter o contexto execute o código abaixo em seus métodos:
```grails
grailsApplication.mainContext
```

Sim, é só isto: o objeto&nbsp;<em><a href="http://docs.grails.org/latest/api/grails/core/GrailsApplication.html">grailsApplication</a></em> é injetado em todos os artefatos acima mencionados e representa, como o próprio nome já diz, sua aplicação Grails em execução. A partir deste objeto é possível obter diversas informações sobre seu projeto, tais como a lista de classes de domínio, controladores, serviços, etc.
<h3>Aplicação rápida da dica</h3>
Um dos principais usos do contexto do Spring é validação de código de serviços através do Grails Console (o Grails também injeta um objeto grailsApplication nele!). O exemplo abaixo obtém um serviço e, na sequência, executa um método neste para validar seu funcionamento:
```grails
def servicoArquivos = grailsApplication.mainContext.getBean(ServicoArquivos.class)
servicoArquivos.executeMetodo()
```
<h3>Conhece o Grails Console?</h3>
Se não conhece o Grails Console, segue uma dica brinde: executando o comando "grails console" em seu projeto. Será iniciada uma aplicação desktop na qual você pode executar código Groovy que tem acesso a todas as suas classes de domínio, serviço, controladores, etc.

&nbsp;

&nbsp;
شغل پر درآمد
Published: 2021-06-16 13:07:18

قیمت های تعمیرات تلفن همراه را دریافت کنید 
آیا نیاز به تعمیر تلفن همراه خود دارید؟ از MyFixers استفاده کنید تا قیمت تلفن های موبایل را فوراً از تعمیرگاه های تلفن همراه نزدیک خود دریافت کنید. سپس هنگامی که کتاب آنلاین با بهترین قیمت را پیدا کردید. تمامی امکانات این نرم افزار در دوره <a href="https://fanamoozan.com/course/mobile-repair-training/">آموزش تعمیرات موبایل<a/>  یاد داده می شود.

 هزاران دستگاه برای مشتریان خوشحال ما تعمیر شده است.

تعمیرات تلفن همراه بدون دردسر
در اینجا در MyFixers می توانید قیمت تعمیرات تلفن های هوشمند ارائه شده توسط فروشگاه های تلفن نزدیک خود را مقایسه کنید. فیکس کننده های ما تعمیرات و جایگزینی قطعات را برای طیف گسترده ای از مارک ها مانند اپل و سامسونگ ارائه می دهند ، بنابراین شما می توانید برای آخرین آیفون یا سامسونگ کهکشان پیشنهاد پیدا کنید. ما همچنین قیمت را در طیف وسیعی از مسائل ، از تعمیرات درگاه ها و دوربین های معیوب گرفته تا جایگزینی باتری های خراب و صفحه های خرد شده ، مقایسه می کنیم. حتی اگر فقط با برخی از دکمه های کنار تلفن خود مشکل دارید ، یک رفع کننده وجود دارد که آماده ارائه قیمت پیشنهادی با قیمت رقابتی است. شما همچنین می توانید چندین مورد را که تلفن شما با آنها مشکل دارد انتخاب کنید و یا در صورت تمایل فقط به رزرو در مورد آنها بپردازید
when you're running a machine learning model for 4 straight days
Tags: regression, analysis, machinelearning
Published: 2021-06-16 13:02:40

when you're running a machine learning model for 4 straight days at max CPU capacity, and R2 results at the end look like this !!!!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvzymup6lu1bw5ave2fd.jpg)
How to design LRU cache?
Tags: datastructures, computerscience, interviewquestions, coding
Published: 2021-06-16 12:57:28

---
title: How to design LRU cache?
published: true
description: Full walkthrough on designing your own LRU cache in effective way
tags: datastructures, computerscience, interviewquestions, coding
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbmg0pvmf86d9xfg13rv.jpeg
---

This is, by the way, not a random question, but a popular coding interview challenge and an interesting problem by itself which made me write a whole blog post:

https://www.romaglushko.com/blog/design-lru-cache/ ⬅️

TLDR: you need to design a kind of custom data structure in order to make the cache storage to work in constant time which actually makes it practically useful. So be sure to check out the whole walkthrough above.