teleren/devto huggingface dataset:
How to collect date information using HTML Input!
Tags: webdev, javascript, html, beginners
Published: 2020-12-28 11:44:14

---
title: How to collect date information using HTML Input!
published: true
description: 
tags: webdev, javascript, html, beginners
series: Web Dev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/aqlv8cxjvwj8ld3uahrq.png
canonical_url: https://jordanfinners.dev/blogs/how-to-collect-date-information-using-html-input
---

# Contents 
1. [Intro](#intro)
2. [Input](#input)
4. [Example](#example)
5. [Summary](#summary)

# Intro <a name="intro"></a>

You are more than likely going to have to ask your users for dates at some point.
Enter Date Inputs.

They've had mixed browser support, mainly because of Safari. However, it's recently entered Technical Preview on Safari, you can see full browser support [here](https://caniuse.com/input-datetime).
So, we can soon use it across all browsers!

![Finally](https://media.giphy.com/media/wXDsUTPWatTTq/giphy.gif)

# Input <a name="input"></a>

As it is an input all that is needed is `type="date"` attribute.
The value is always formatted `yyyy-mm-dd`.

Things to watch out for `min`, `max` and `step` attributes on the input have mixed support. Either keep it simple or use a polyfill.

My personal preference is to keep it simple and ensure we're validating on server side when receiving the input. Which we should be doing anyway!

There is also datetime e.g. `type="datetime-local"` to capture a date and time, however this has worse browser support.

If you are using this input in a form, check out my previous blog post for tips on [submitting the form](https://dev.to/jordanfinners/how-to-easily-convert-html-form-to-json-3pea).

# Example <a name="example"></a>

Shut up and show me the code.
```html
<input type="date" value="2017-06-01">
```

If you'd like to see a more styled version, you can see a nicely styled input on the [Examples](https://dev.to/jordanfinners/how-to-easily-convert-html-form-to-json-3pea#examples) on my previous blog post.

# Summary <a name="summary"></a>

In summary, you can use what browsers give you to collect dates!
As with all native HTML elements, it means less bytes shipped to the client.
It also means accessibility will be handled by the browsers which is normally best.

Soon it will be available across browsers once Safari releases the feature, which will be amazing!
We can then remove plenty of JavaScript from the front end as it will be natively supported.

Element reference can be found [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date).

Happy building!
A memory leak in Doctrine
Tags: memoryleak, doctrine, php
Published: 2020-12-28 11:28:35

---
title: A memory leak in Doctrine
published: true
description: Discovering memory leak in PHP application
tags: memoryleak, doctrine, php
cover_image: https://cdn.pixabay.com/photo/2015/08/08/22/40/water-pipe-880975_1280.jpg
---

When building a new PHP application with Doctrine (doctrine/orm 2.7.4), our team discovered that in some long-running commands memory usage was building up. 
We went through the basic checklist:
* Application is running in production mode - our experience has shown, when is not, then Doctrine SQL logger could eat up memory - checked.
* Doctrine clear is called regularly - when it's not, then objects persist in Doctrine internal in-memory cache - checked.
* No other code in our application was not obviously [building its own memory cache](https://dev.to/alphpkeemik/write-clean-good-code-correct-caching-in-php-26k5) - checked.

Due to the amount of data generated by the long-running process, we weren't able to use obvious choices as [Blackfire](https://blackfire.io).
After a little googling we decided to use [php-memprof](https://github.com/arnaud-lb/php-memory-profiler) as a tool to collect data. Sadly there was no expert to take to read KCacheGrind so we dumped data as an array using `memprof_dump_array` and find by [analysing output](https://github.com/alphpkeemik/php-memory-profiler-array-analyser) that memory is building up somewhere in Doctrine.

After good old-fashioned "comment out some code to see if the error disappears" we discovered that the memory was building up due to usage of `Doctrine\ORM:Query::getOneOrNullResult` in [our shared library](https://github.com/alphpkeemik/queue-command/commit/d29069293d9608e375f7e20e4e880c7bf9206b01). 
The memory leak was tough so subtle, that it increased only ~20MB on every thousand calls. 

After [changing getOneOrNullResult to execute](https://github.com/alphpkeemik/queue-command/commit/d29069293d9608e375f7e20e4e880c7bf9206b01) memory leak disappeared.

Our application is now working smoothly but the problem in Doctrine still needs to be tracked down.
Rendering a DWG file
Tags: programming, csharp, productivity, tutorial
Published: 2020-12-28 11:17:33

GroupDocs.Viewer for .NET is a back-end [API](https://products.groupdocs.com/viewer/net) that allows you to render an AutoCAD file to HTML, Image or PDF file formats. 
Let's see how to render a DWG file to HTML in few code lines:
```csharp
string outputDirectory = "output directory";
string pageFilePathFormat = Path.Combine(outputDirectory, "page_{0}.html");
using (Viewer viewer = new Viewer("sample CAD file"))
{                
	HtmlViewOptions options = 
	HtmlViewOptions.ForEmbeddedResources(pageFilePathFormat);    
	viewer.View(options);
}
```
Same file could be rendered to PDF as follows:
```csharp
using (Viewer viewer = new Viewer("sample CAD file"))
{
    PdfViewOptions options = new PdfViewOptions(outputFilePath);
    viewer.View(options);
}
```
Explore the API [documentation](https://docs.groupdocs.com/viewer/net/basic-usage/) to learn more. In case of any issue, post it on free support [forum](http://forum.groupdocs.com/).
Building a mental health crisis app, Day 3: Login Page part 2
Tags: dohackathon, mentalhealth, codenewbie, digitalocean
Published: 2020-12-28 11:10:37

The app is called “Help Me” and is designed primarily as an “SOS” (distress signal) to a selected circle of trusted people when someone is going through a mental health crisis. The user can send a message with their location to one person or everyone in their community. The goal is to build a trusted community around the user with private conversations and a system to show their emotions. This will help the trusted people to be aware of the user's range of emotions.

#Day 3 of Development
At the end of Day 2, I had several issues that I couldn't figure out regarding styling, making components, and using icons. Today's focus is on learning and solving those issues. 

#### End of Day 2 Issue: Icon inside the Input field
At the end of Day 2 I did a stand-up (Agile concept that prioritizes a daily team meeting) with my project's partner, Miguel Hernandez. One of my issues was having an icon inside the input field of the Log-in screen. He sent me a sample component as a solution from [tailwindcomponents] (https://tailwindcomponents.com/). Let's just say that it didn't work right out of the box. But it did give me a framework to start with and showed me that it could be done. This was my results:
![Screenshot of Log-in screen with fixed input fields](https://dev-to-uploads.s3.amazonaws.com/i/u7zuq3qwycadl8xwqzj1.PNG) 
<hr>

#### Finding the perfect Icons
Afterward, I needed to install and use the incredible Fontawesome icons into the app. You can find this resource at [Fontawesome]( https://www.npmjs.com/package/@fortawesome/angular-fontawesome). 
<hr>

#### End of Day 2 Issue: Making the Input fields reusable
Another issue from Day 2 was the wireframe's design called for the same styled input field to be used in multiple screens. While my input fields looked correct, they weren't reusable as components. I decided to make a new component based on my initial input field. I was able to use the new input component to create the Registration screen. 
![Screenshot of Registration screen](https://dev-to-uploads.s3.amazonaws.com/i/9p29eio42qgr7yn0k9gf.PNG)

This is the wireframe that I hope I am coming close to building.
![wireframe design](https://dev-to-uploads.s3.amazonaws.com/i/6rcbr0eyc24bp6mmyhwg.png) 
<hr>

#### End of Day 2 Issue: Adding a font family class to Angular
The wireframe's design call for using a non-standard font family Nunito for the page title. The fixed involved updating the font family object in the theme inside the tailwind.config.js file. 
<hr>

#What's Next
* Tomorrow goal is to build out the user account setup screens and learn about Angular routing. 

###Stay on the lookout for a Day 4 breakdown blog post!!!
Moby
Tags: admintemplate, adminthemes, bootstrap4
Published: 2020-12-28 11:01:32

Moby is a Bootstrap admin dashboard template that comes with flexible options to help you create a custom dashboard that your project demands.  It comes with a horde of powerful features packed with a number of ready-to-go inner page components;
1. Powerful & Customized React-Bootstrap Admin Theme
2. 5+ Unique Ready-to-use & Multipurpose Demos
3. Fully Featured and Flexible UI Kit
4. Quick updates and 24/7 support
https://mobythemes.com/
Why won't Eclipse run my program? (Possibly the unresolved error from before).
Tags: java, gamedev, help, watercooler
Published: 2020-12-28 10:52:30

Whenever I try to run a test of RuntDeale (a basic program that creates a `JFrame`, with a black background, that is not resizable), in the standard form that I make my programs in:
```
MainClass:
  constructor() {/* set up key components to initialize a program instance */}
  program-entry() {/* make an instance of the main class (program), and run it with its "run" method */}
  run() {/* program logic */}
```


Here, it raises `java.lang.ClassNotFoundException`:
```
Error: Could not find or load main class RuntDeale.code.Main
Caused by: java.lang.ClassNotFoundException: RuntDeale.code.Main
```
With the recurring problem (in the "Problems" tab) with "`The project was not built due to "Failed to init ct.sym for C:\Users\Administrator\AppData\Local\Temp\eoiDF83.tmp\plugins\org.eclipse.justj.openjdk.hotspot.jre.minimal.stripped.win32.x86_64_15.0.1.v20201027-0507\jre\lib\jrt-fs.jar". Fix the problem, then try refreshing this project and building it since it may be inconsistent`" (I don't know if this is related to the problem, but I thought I'd include it just in case it was).


![Image of Eclipse IDE raising an error (ClassNotFoundException).](https://dev-to-uploads.s3.amazonaws.com/i/k7u9ulyvjtw3tzwo5c7x.png)

Could someone please explain why it won't run?

<div alt="Thanks! Cheers!">
##<b><center><b>Thanks!<br/>Cheers!</b></center></b>
</div>
Importing libraries in TypeScript
Tags: typescript, beginners, javascript
Published: 2020-12-28 10:45:38

If You're switching to **TypeScript**, like it happenned to me, you might don't know how to **import properly** libraries, so I hope this post would be useful 😃.

Let's start, first of all we have to install the library that we want to use, in this case I'll be installing [chalk](https://www.npmjs.com/package/chalk). I'll do it with npm, so in the directory that we're gonna use it, we have to run this command on our **terminal**:

`terminal`:
```
npm i chalk
```
Now that we have installed our library, let's see how **import** it on our `TypeScript file` (`main.ts` in my case).

There are many options to import a library in Ts, but I'll show you the most useful and simple ones in my opinion:

* Import a **single export**:

`main.ts`:
```ts
import { blue } from 'chalk';

console.log(blue('Text')); // We use the function blue();
```
In this case, we're **just importing** the function `blue` (used to color terminal text to blue). You can also give it the name you want:

* Import a **single export and giving it a name**:

`main.ts`:
```ts
import { blue as colorBlue } from 'chalk';

console.log(colorBlue('Text'));
```
You can also import **more than one export** at once, just like that:

`main.ts`:
```ts
import { blue, yellow } from 'chalk';

console.log(blue('Text'), yellow('More text'));
```
And also **name them**:

`main.ts`:
```ts
import { blue as colorBlue, yellow as colorYellow } from 'chalk';

console.log(colorBlue('Text'), colorYellow('More text'));
```
Now I'm going to explain the **most useful import method** in my opinion, which consists in import all the exports at once, and then you can use all of them that you want.

Also, in this case, it's compulsory to give it a name.

* Import **all exports at once**:

`main.ts`:
```ts
import * as ch from 'chalk'; // You can give it the name that you want

console.log(ch.green('Text'), ch.purple('More text'));
```

And that was all! I hope that this post were useful to you, if it was, give me a ❤, please! 😊
Using apt tool infographics Linux basic tool series part 1
Tags: linux, ubuntu, infographics
Published: 2020-12-28 10:38:19

hi everyone, today we going to share an infographic we created from the series Linux Basic tool, a short video series on our social media channels. In this, we would talk about using the apt tool in Linux. So, let’s start

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/02eypah6kadcwvka6fhp.png)

##Using Apt tool Linux Infographics

###What is the Apt tool?

The apt tool is short for Advanced Package Tool. Apt is a free software user interface that works with core libraries to handle the installation and removal of software on Debian, Ubuntu, and related Linux distributions. You can use apt to install any application, update, or remove.

###Why we use the Apt tool?

We use the Apt tool for many things like :

1. Installing a package in Linux
2. Updating a package in Linux
3. Checking for system updates
4. Removing packages in Linux

###Common Commands for using Apt tool

####1. Apt Update

to check for updates run the following command
```sudo apt update```

####2. Apt Upgrade

for installing any updates available, run the following command

```sudo apt upgrade```

####3. Apt Install <PackageName>

To install any package, enter the following command

```
sudo apt install <packageName>
sudo apt install vlc
```

####4. Apt Remove <PackageName>

For removing any package, enter the command followed by package name

```
sudo apt remove <PackageName>
sudo apt remove vlc
```

> Also, read | Top Linux Distros you need to know

####5. Apt AutoRemove

Same as remove, but to remove packages which are not required now, enter the command

```sudo apt autoremove```

####6. Apt clean

to clean the update cache( list of packages to be downloaded) run the following command

```sudo apt clean```

####7. Apt-get

same as apt, but a little faster than apt, use apt-get in place of apt in previous commands.

```
sudo apt-get update
sudo apt-get clean
sudo apt-get upgrade
sudo apt-get install <packageName>
sudo apt-get remove <packageName>
```

####8. Apt help command

For getting any help or commands usage, other than our listed commands(complex ones, not used regularly) enter the below command.

```sudo apt -h```

> Note: sudo is required to run command in escalated mode ( as admin with more permissions)
Also, read | The Right way to code and syntax you need to follow.

#### Final words

So, I hope this content will help you learn something. Please share your views about infographics shared and content. Keep visiting back for more updates. Thanks for reading.

> Originally published at https://tekraze.com/2020/12/using-apt-tool-linux-infographics/
Effectively using Pre-commit hooks in Git for Javascript Developers.
Tags: javascript, cleancode, precommit, hooks
Published: 2020-12-28 10:32:42

One of the pain points of being Javascript developers is not catching a few basic errors before it comes back to haunt you.

Even with the most increasing usage of Typescript, year after year, still not all existing code bases are going to be migrated soon.

The assumption here is that will all the code linters set up, Eslint or Tslint, if you need help with that, please read my blog [here](https://dev.to/rajivkr/using-linting-prettier-in-javascript-1eic), this is an attempt to propose an effective solution using a couple of famous packages,  [Husky](https://github.com/typicode/husky) and  [Lint staged](https://github.com/okonet/lint-staged).

### Pre-requisite
You have eslint set up, you can read more on that in my linting blog [here](https://dev.to/rajivkr/using-linting-prettier-in-javascript-1eic).
You will need to be using `node version > 10` for activating husky.

### Pre-commit hooks

When you have made all the code changes are ready to push your code(hoping to save the world at that time!), you will use `git commit` command to push the files that you have made changes to.  Pre-commit hooks will be running before that commit could potentially destroy the world.

### Setup
We need to install the packages as dev dependencies first.


```
npm install husky lint-staged --dev
``` 


Going with our assumption that all the linting rules are already set up, we will add this to our `package.json`


``` 
 "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

``` 

For the lint-staged, feel free to add the checks that you wish to be passed before accepting the commit.

```
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "npm test",
    ],
    "*.css" : [
    "stylelint 'src/**/*.css'"
   ]
  },
``` 

### Seeing this in Action

When you are committing, you will see the hook getting run and throw an error. Here we have tried to reassign the value of const variable, that was caught by our linter.

![Linting-error](https://dev-to-uploads.s3.amazonaws.com/i/z038i1gqs4rt4nypjkpm.png)

You can have runners set up to track code coverage on each commit by running test to only the staged files. There are many perks for using this and setting up can be done in no time.
Write clean & good code - correct caching in PHP
Tags: php, caching, cleancode, goodcode
Published: 2020-12-28 10:31:42

---
title: Write clean & good code - correct caching in PHP
published: true
description: One extra thing in wring good and clean code
tags: php, caching, cleancode, goodcode
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--0DV2TsR3--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/5fj9ydr23xw0073c6u0m.png
---
Another caching article you think and feel ![alt text](https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Facepalm_jeez.jpg/128px-Facepalm_jeez.jpg ":facepalm:"). And [who writes PHP these days](https://medium.com/vimeo-engineering-blog/its-not-legacy-code-it-s-php-1f0ee0462580). But wait, it's not only about caching and PHP, these are only used as examples here.

When writing on another topic a need arose to point out one extra thing in writing a [clean](http://blog.cleancoder.com/uncle-bob/2020/10/18/Solid-Relevance.html) and [good](https://codinginfinite.com/ten-best-programming-practices-tips-tricks) code: **don't invite the wheel**.

Consider example

``` php
class Foo
{
    private $cache = [];
    private $bar;

    public function __construct(Bar $bar)
    {
        $this->bar = $bar;
    }

    public function getBar(string $someValue): mixed
    {
        if (!key_exists($someValue, $this->cache)) {
            $this->cache[$someValue]= 
                $this->bar->getBySomeValue($someValue);
        }

        return $this->cache[$someValue];
    }
}
```
It seems very easy to code and test. So let's write it. But what about cache invalidation and memory usage?
So let's add them... by using library. For PHP is Monolog the standard, so
`composer install monolog/monolog`
and change `Foo` to
``` php
class Foo
{
    private $cacheItemPool;
    private $bar;

    public function __construct(
        CacheItemPoolInterface $cacheItemPool,
        Bar $bar
    ) {
        $this->cacheItemPool = $cacheItemPool;
        $this->bar = $bar;
    }

    public function resolve(string $someValue): mixed
    {
        $cacheKey = urlencode("bar/$someValue");
        $cacheItem = $this->cacheItemPool->getItem($cacheKey);
        if (!$cacheItem->isHit()) {
            $cacheItem->set($this->bar->getBySomeValue($someValue));
            $cacheItem->expiresAfter(new DateInterval('P1D'));
            $this->cacheItemPool->save($cacheItem);
        }

        return $cacheItem->get();
    }
}

```
Applying shadow to transparent images
Tags: css, html
Published: 2020-12-28 10:21:57

box-shadow doesn't work well with transparent images. The image will show up wrapped in a rectangle. 

<img src="https://dev-to-uploads.s3.amazonaws.com/i/e89mntavbnlk9k8mgmc7.png" />

So in order to tackle this situation, we can use the filter CSS property.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/dkr4hqlq8goz6cj0enjo.png" />
test
Published: 2020-12-28 10:20:21

my first post.
```
the editor sucks. it is not wysiwyg.
```
`try another markup`
* item1
* item2
** item2-1

# item
# item
## item--
+----------------------------------+---------+------------------------+----------------+
|               Col1               |  Col2   |          Col3          | Numeric Column |
+----------------------------------+---------+------------------------+----------------+
| Value 1                          | Value 2 | 123                    |           10.0 |
| Separate                         | cols    | with a tab or 4 spaces |       -2,027.1 |
| This is a row with only one cell |         |                        |                |
+----------------------------------+---------+------------------------+----------------+
Git Cloning with SSH 
Tags: github, git
Published: 2020-12-28 10:15:02

**Adding SSH Keys into Github**

Fedup always using HTTPS links for cloning?  
Are you gettting warned by Git for going for non password based authentication?

Try SSH.

### Step 1 - Generate SSH Keys
a. on Windows use (Git bash) and other machines use terminal to run following commands
	$ ssh-keygen -t rsa -C "<YOUR_EMAIL_ADDRESS_FOR_GITHUB>" 
	you may use passphrase or just enter for defaults.
	the command generates 2 files HOME directory : id_rsa (private), id_rsa.pub (public)
b. Copy the entire content of id_rsa.pub into Clipboard

### Step 2 - Configure Github 
a. Login to Github portal. Naviagte to "Settings"
b. Under "SSH Keys", click on "New SSH Keys" 
c. In the Textbox, enter the content of id_rsa.pub file and click "Add SSH Key" (Step 1.b)


###  Step 3 - Validate and use 
a. execute following command to ensure SSH works
 $ ssh -T git@github.com
Authentication success message will appear
b. grab SSH URL for cloning repository from Github
c. on local machine, run following command
	$ git clone <SSH_URL>
d. you may have to give passphrase for authentication, if given
e. you can do further git operations without having to authenticate everytime
Subtle cross when hovering on a grid's item corners (no JS)
Tags: codepen, css
Published: 2020-12-28 10:06:43

<p>Inspired from a Windows 10 Fluent Design effect on the Calculator App, where hovering over an item shows a subtle cross at the corner closest to the cursor. </p><p>(<a href="https://www.gsarigiannidis.gr/windows-fluent-design-css-cross-hover-corner/" target="_blank">Read the details</a>)</p>

{% codepen https://codepen.io/gsarig/pen/gOwXpRa %}