teleren/devto huggingface dataset:
How to internationalize dates in Angular
Tags: i18n, angular
Published: 2020-03-14 12:45:04

---
title: How to internationalize dates in Angular
published: true
description: How to internationalize dates in Angular
tags: i18n, angular
---

### Depends on your use case:
- from typescript code using `formatDate` helper function
- from HTML templates using `DatePipe`
  
Let's explore this 2 use cases:

### Internationalize dates from code:

Angular helps us by providing `formatDate` helper function from `@angular/common` package.

How to use `formatDate` ?

`formatDate` receives 4 parameters: 

| Parameter        | Type           | Meaning  |
|:-------------:|:-------------:|:-----:|
| value    | `string, number, Date` | date as string, number or a javascript Date object |
| format      | `string`      |   should look like [DateTime pipe formats](https://angular.io/api/common/DatePipe#pre-defined-format-options) |
| locale | `string`      |   use `@Inject(LOCALE_ID)` to get current user locale |
| timezone | `string`      |   timezone abbreviation, defaults to local system timezone  |

Example: 
```ts
import { Component } from "@angular/core";
import { LOCALE_ID, Inject } from "@angular/core";
import { formatDate } from "@angular/common";

import { of } from "rxjs";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  currentDate = new Date();
  dateFormat = "dd MMM yyyy";
  currentDate$ = of(formatDate(this.currentDate, this.dateFormat, this.locale));
  constructor(@Inject(LOCALE_ID) public locale: string) {}
}
```

The above Angular code should show current date as  `14 Mar 2020`.


### Internationalize dates from HTML:


DatePipe and `formatDate` parameters are pretty similar with each other:

| Parameter        | Type           | Meaning  |
|:-------------:|:-------------:|:-----:|
| value    | `string, number, Date` | date as string, number or a javascript Date object |
| format      | `string`      |   should look like [DateTime pipe formats](https://angular.io/api/common/DatePipe#pre-defined-format-options) |
| timezone | `string`      |   timezone abbreviation, defaults to local system timezone  |
| locale | `string`      |   use `@Inject(LOCALE_ID)` to get current user locale |


In HTML we could use `date` pipe: 

```html
  {{ (currentDate) | date:dateFormat:'GMT':locale }}
```
The above Angular code should show current date as  `14 Mar 2020`.

### Difference in parameters positioning:

`formatDate` timezone it's at the end and `date` pipe timezone it's the third one.
So, there is a switch between the last two parameters in terms of positioning.

### When to use `formatDate` function or `date` pipe ?
- `formatDate` mostly for times when you need to compose big strings from code
- `date` pipe for times when you need to format a single date on HTML



[Article first posted here](https://danielpdev.io/translate-dates-angular/)


[Follow me on twitter](https://twitter.com/danielpdev)
XState Series: Introduction
Tags: xstate, state
Published: 2020-03-14 12:30:42

So I am going to start tracking my learning and attempts at implementing XState and the finite state machine paradigm in general. If you are interested in State Machines this might be a good introduction into since I am just starting to slightly grok(understand) this stuff myself. XState is an amazing library that will help us to implement these [State Machines written by David Khourshid](https://xstate.js.org/docs/)

A few things I have coded so far (contrived):
https://github.com/JacobMGEvans/finite-state-machine

Current Resources Consumed: 
- [Learn with Jason](https://www.youtube.com/watch?v=czi24DqUfSA) also a great resource for other topics with frequent subject matter expert guests.
- [Live Code with Kent C. Dodds](https://www.youtube.com/watch?v=NrIeWzCUsnE) There is also a [Podcast Kent does and he talks with David about this topic as well.](https://kentcdodds.com/chats-with-kent-podcast/seasons/01/episodes/make-your-apps-resilient-finite-state-machines-with-david-khourshid) 
- Another great podcast I have listened to on this was [React Podcast](https://reactpodcast.com/83)
Design Your Own T Shirts Online India at King Doodle:
Tags: customtees, tshirts
Published: 2020-03-14 12:30:17

Buy Custom Design T-Shirts Online India:

T shirts are the most fashionable clothing or apparel that everybody wants to wear it. Everybody has a dream to create the unique designs that they want to wear on their T shirts. Custom T shirts are the most widely recognized attire that one will discover in their clothing collections. King Doodle serves as the best place to buy Custom T-shirts online India. King Doodle offers various latest collection of premium custom made T-shirts online at an affordable and reasonable cost. Nowadays, the best t shirts printing online have become an easy way to create your own t-shirts as per your expectation. Buying unique customized t shirts online has become most popular and which carries out a fashion statement in recent days.

Most Attractive Genres of T-Shirts offered by King Doodle:
Gym T Shirts
Gaming T Shirts
Photography T Shirts
Gaming T Shirts
Music T Shirts
Pet T Shirts
Foodie T Shirts
Doodle T Shirts

Upgrade your wardrobe with the latest collection of custom designed t shits online India designed by yourself at an affordable cost. Everybody has a dream of customizing their own t shirts, we make your dream fulfil by offering the best customizing tool. Enjoy free shipping on all your orders!!

Click to Design: https://kingdoodle.com/buy-custom-t-shirts-online/
Contact us @ +91 9567626424.
I'm joining Mixer 📺
Tags: career
Published: 2020-03-14 12:29:39

Hi! I’m Ben Greenier — I’m currently an engineer at Microsoft working to create awesome open source projects with our partners. We get to [create software](https://github.com/microsoft) to help solve really tricky problems, and [share our stories](https://www.microsoft.com/developerblog) as we go. This means that as part of my current job I get to play with lots of new technologies, learn how to use them, and help other folks do the same.

However, lately I've been feeling like my aspirations aren't quite aligned with my career - the things that I'm passionate about aren't things I focus on in my day-to-day role. I like being able to create Open Source Software (OSS) but not when I don't have the time to focus on building those OSS projects over time. I'm also finding that specific applications of technology are more exciting to me than others - and while working with customers on lots of different problems can be a great learning experience, It can also be super limiting. I already spend much of my time thinking about [Streaming](https://mixer.com/bengreenier), and how I can help to create tools and [platforms](https://overlayed.app) to enable broadcasters to be more successful, so...

I'm making some changes - Starting in April I'll be joining [Mixer](https://mixer.com) full-time, to work on their video platform team - contributing to things like [FTL](https://github.com/mixer/ftl-sdk) and the broader ingress and egress services that help make broadcasting quick, easy, and reliable on the platform. This also means I'll be moving from London to Seattle (more on that in a different post, perhaps). I'll be able to keep working at Microsoft - A company I really respect and enjoy working for - but focus on problems and technology that are much more my style. I'm super excited to get started!🎉

Thanks for reading - If you'd like to further support me and see similar content, follow me on [Mixer](https://mixer.com/bengreenier) and/or [Twitter](https://twitter.com/bengreenier). Curious to learn more about what a role at Mixer entails? Leave a comment below and I'll be sure to do my best to explain or connect you with the right folks.

💙🌈
-Ben
Day 3 [D&D Character Sheets]
Tags: 100daysofcode
Published: 2020-03-14 03:56:30

# Report
Today I worked on finishing the database connection. I'm still thinking about how my app will interface with the database. 

One way to bring my mongoose models into the app is to import the db module into the main file and attach the module to the global scope or to the request's context. I could also require the module in each route. The weekend should be a good time to evaluate the pro and cons and review the docs.

# Project
{% github ApproachingApathy/100days-dnd-character-sheets %}

The First project will be an app to keep D&D character sheets.

## Stack

I'll be using Node.js and building a full-stack Express app with MongoDB.
### Requirements
#### Minimum Viable 
- [ ] Present a D&D Character Sheet
    - [ ] The sheet should display all the same info as the first page of the 5e Official sheet.
- [ ] Users should be able to log in and create player-characters.
- [ ] Users should be able to edit character sheets.
- [ ] Users should be able to organize character sheets into groups (parties/tables)
- [ ] Sheets should auto calculate basic stats like ability modifiers.
    - [ ] Support Proficiency Bonuses 

### Cake
- [ ] Extend character creation to allow the user to use any of the three common stat gen methods.
    - [ ] Point Buy
    - [ ] Standard Array
    - [ ] Roll
- [ ] Extend the character sheet to all the info in the 5e official sheet.
- [ ] Allow for image uploads for character portraits.
- [ ] Allow for extended descriptions/backstories.
    - [ ] Characters should have nice full page backstories.
    - [ ] Preferably use a markdown editor.
Creating Interfaces From Joi Schemas In TypeScript
Tags: joi, typescript, dry, validation
Published: 2020-05-08 13:49:05

---
title: Creating Interfaces From Joi Schemas In TypeScript
published: true
date: 2020-03-14 11:43:00 UTC
tags: joi, typescript, dry, validation
canonical_url: https://rubensbits.co/posts/creating-interfaces-from-joi-schemas-in-typescript
---

* * *
 ![Thumbs Up Image](https://rubensbits.co/media/thumb.webp)
# Problem

### Summary

Using [joi](https://hapi.dev/module/joi/) inside a Typescript project means you need to create two validation schemas, one for Joi at runtime and one for Typescript at compile time.

This causes you issues with maintainability, consistency, and violates the DRY principle.

### Code Example

```
import * as joi from '@hapi/joi';

// Ignore the technical arguments of these schemas - purely for example purposes
interface UserAddress = {
  // etc..
  postCode: string;
  startDate: string;
  endDate: string;
}

interface User = {
  name: string;
  phoneNumber?: number;
  addresses: UserAddress[]
}

const userAddress = joi.object({
  // etc...
  postCode: joi.string().required()
  startDate: joi.date().required(),
  endDate: joi.date().required()
})

const user = joi.object(({
  name: joi.string().required(),
  phoneNumber: joi.number().optional(),
  addresses: joi.array().items(userAddress).required(),
}))
```

* * *

# Solution

### Summary

Use [joi-extract-type.](https://www.npmjs.com/package/joi-extract-type)

An NPM package that is surprisingly underused (currently only 4,300 downloads per week on NPM) give it’s support for complex joi schemas.

There are two issues that should be noted as of writing this; one technical, one aesthetic

1. It has trouble managing the `.unknown` joi method at the object level ([which declares that unknown keys are allowed on an object](https://github.com/hapijs/joi/blob/v8.0.3/API.md#objectunknownallow)). Looking through the joi-extract-type code, it appears the method isn’t catered for.
2. You lose the pretty TypeScript interface look and feel - with a lot of your code now rendered in the standard JavaScript object colouring (theme dependant of course).

### Code Example

```
import * as joi from '@hapi/joi';
import 'joi-extract-type'

const userAddress = joi.object({
  // etc...
  postCode: joi.string().required()
  startDate: joi.date().required(),
  endDate: joi.date().required()
})

const user = joi.object(({
  name: joi.string().required(),
  phoneNumber: joi.number().optional(),
  addresses: joi.array().items(userAddress).required(),
}))

export type User = joi.extractType<typeof user>;
export type UserAddress = joi.extractType<typeof userAddress>;
```

User & UserAddress will work equivalent to traditionally declared User & UserAddress interfaces.

You’ll also need to make sure the version of `joi-extract-type` that’s being used is aligned with the correct version of `joi`.

`@hapi/joi@17` & `joi-extract-type@15.0.2` seem to work fine together.

* * *

# Problem Solved

If you have any questions you’d like to ask me about this post, feel free to reach me on [Twitter](https://twitter.com/rubengmurray) or [Github](https://github.com/rubengmurray).
Corona virus: positive effects?
Published: 2020-03-14 11:34:25

I had a thought today: could there be positive effects of this pandemic? For example, I wouldn't be surprised if people who are self-isolating (or just reducing social contact) would be participating more in open source projects.

It would be interesting to look at data and see if such a correlation can be found. However, I wouldn't even know where to get started on getting my hands on such data.

Thoughts? Ideas? Opinions?
License to restrict too many forks 
Tags: help, discuss, webdev, opensource
Published: 2020-03-14 10:58:04

Hi everyone,

I want to create a project that can be used free but **do not** want to fall in the rabbit hole of excessive forking.

I would like to allow forking only too people that want to contribute to the project.

Also, I want to make sure that people will not be tricked by others to pay for something that is free.

So I was thinking of creating a requirement for all the projects that use it to have a powered in the footer.

What license can make this happen or do you have any suggestions regarding this?

Thanks
A fair and ethical alternative to established web analytics tools is missing. Therefore we develop one.
Tags: webanalytics, privacy, opensource, webdev
Published: 2020-03-14 11:32:49

Offen is a new web analytics software that allows a **respectful relationship between operators and users.** Not only operators of web sites or web applications are able to use the analytics tools and review usage data, but also the users themselves are granted access to their data at last.

Offen collects data only after the user opted in. All data is encrypted end-to-end and can be deleted by users. Offen is **open source and self hosted.** Operators don't have to share data with third parties and thereby can comply with GDPR guidelines.

Offen is developed by a small team based in Berlin. We are applying for funds to sustain our work. Our open source code can be fully audited by the community. It will always be available for free. Seriously. **Interested in the details? Want to get your hands dirty? Get in touch.**

[github.com/offen](https://github.com/offen)
[www.offen.dev](https://www.offen.dev/)
Improve webpage performance by using SVG images 
Tags: webpage, pagespeed, html, svg
Published: 2020-03-14 11:19:07

If you are getting annoyed with the slow performance of your webpage then it is better for you to start using the SVGs (Standard Vector Graphics) for improving the performance of your website. It will give you a very smooth and elegant look as the user experiences the page through your website. SVGs will also improve the search engine rankings of your site. If you are trying to improve the performance of your website then you should try out the improvement in your HTML and CSS code to produce the proper HTML for your site. Then, you should use the correct font face, color, alignment and so on.

SVG images reduced the server request from the browser, which enhance the loading speed. Every request to a static image also sends cookies with it. These cookies are unnecessary network traffic. So we can also reduce network traffic by using SVG images.
Compile Podcast Ep 8: Anxiety -- How to deal with it?
Tags: podcast, developer, stress, anxiety
Published: 2020-03-14 10:59:09

---
title: Compile Podcast Ep 8: Anxiety -- How to deal with it?
published: true
description: "Jasper and I talk about our experiences with anxiety, and tips about dealing with it mentally and practically!"
tags: podcast, developer, stress, anxiety
---

*This is reposted from [my personal site](https://nickwu007.github.io/).*

In this week's episode Jasper and I talk about our experiences with anxiety, and tips about dealing with it mentally and practically!

{% youtube pq3-9RlAz4U %}

### Breakpoints

 - 00:25 Chill zone
 - 07:20 Mindset towards stress and anxiety
    - 08:55 "Everyone has it"
    - 11:35 Acknowledge your anxiety
	- 14:44 Find out the root of stress 
	- 21:30 "It's not the end of the world"
    - 23:00 "Don't suffer twice"
    - 24:25 "You will not remember what you were worried about last week"
 - 28:40 Practical tips to deal with anxiety
    - 28:58 Breathing exercise
    - 33:40 Find distraction and keep busy
    - 38:05 Talk about your anxiety
    - 41:15 Don't be afraid to seek help
    - 42:25 "Running away is shameful, but useful" (use with caution)
 - 45:45 "Compile" time
 - 46:34 Personal favourite

### Links in this episode:

 - "The art of breathing" by Dr Danny Penman: [amazon](https://www.amazon.co.uk/Art-Breathing-Dr-Danny-Penman/dp/0008206619)
 - ["The Internship" movie](https://www.imdb.com/title/tt2234155/)
 - Hungarian proverb: ["Running away is shameful, but useful"](https://en.wikipedia.org/wiki/Nigeru_wa_Haji_da_ga_Yaku_ni_Tatsu)

### Reach out to us!

Subscribe and stay tuned! Also send in any comment or request for new topics and we will try our best to make them happen!

My Twitter: https://twitter.com/WujunaoNick

This Podcast is also on:
 - [Google Play Music](https://play.google.com/music/listen#/ps/Ifd5mlxhgc5cmlsytadsglqfd4y)
 - [iTunes](https://podcasts.apple.com/gb/podcast/the-compile-podcast/id1436437367)
 - [Spotify](https://open.spotify.com/show/2UH9hK7VlS7ytjYdM8Vd78)
THE WORD
Tags: wallstmusic, pcxwallst, pcxpression
Published: 2020-03-14 10:54:29

THE WORD is a blog post I’ve decided to create so that I’ll be able to track my learning with a timeline.  Although I am new to actual Web Design & Development.  I’m also new to blogging as well so this should be a fun filled project.  It’ll be dropping post twice a week on Monday and Friday, Wednesday will be add if necessary to stay updated with the most current up to date content, enjoy and thanks for joining me.
Hiring vue.js developers! [REMOTE]
Tags: vue
Published: 2020-03-14 10:39:49

Hi Vue lovers, 

I’m Marina. Me and my team are working on a couple of exciting internet projects (more about that later) for which we’re looking for skilled vue.js developers. 

We already have some traction (one service has over 1m users – now targeting 10m –, another software we provide has over 250k websites using it) and we want YOU to hop on board and join our road to success!

We’re looking for developers who:  
 
 - Are highly efficient
 - Enjoy challenges
 - Have decent English skills and are very responsive (communication is key)
 - Are available long-term (we'll only invest in you if you're willing to stay with us for a while)
 - Charge fairly

Your benefits: 
 
 - Work directly with the founders
 - You'll learn A LOT (about internet businesses, but also beyond that)
 - You can work from home
 - Be flexible in terms of working hours
 - Grow with the projects; if they go really big (and they will) then you'll benefit from it hugely as well (also financially)

If interested, please reach out to marina@follow.it, and state how you meet the criteria above. 

Looking forward to your application!

Kind regards, 

Marina
Why are developers so obsessed with full stack title?
Published: 2020-03-14 09:53:25

Recruiter: Now it says here you have experience with HTML, CSS, JQuery, JavaScript, SQL, C#, and NodeJS and that you are familiar with setup and administration of Linux and Windows servers.

Me: Yes that's correct.

Recruiter: Hmm okay, I’m just trying to determine if this role would work for you. It's for a Full Stack position, are you familiar with Full Stack work?

Me: …yes

Recruiter: Oh okay perfect, it's not on your resume so I wasn't sure. Can you add it? Now they are looking for someone that can do CSS but you only have CSS3, are you familiar with CSS too?

Me: …

This is why we strive for any sort of role that becomes the new buzzword of the business community. Soon it will be AI Afficionado just so the HR manager looking at the resume gets a little bit of excitement thinking they found the one instead of the 30yr developer in the pile next to them that contributed to Linux and has been programming since 8bit computers.
Add Bootstrap 4 to your Ruby on Rails 6 application
Tags: ruby, rails, webdev
Published: 2020-03-14 09:49:32

### Step 1:  Using Yarn:
`yarn add bootstrap@4.3.1 jquery popper.js` 

#### package.json file should look like this
```
"dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "4.3.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },
```
### Step 2: Head to config/webpack/environment.js file and add these lines 
```
const { environment } = require('@rails/webpacker')

const { environment } = require('@rails/webpacker')

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({

$: 'jquery',

jQuery: 'jquery',

Popper: ['popper.js', 'default']

}))

module.exports = environment
```
### Step 3 :  Head to app/assets/stylesheets/application.css and add these lines 

```
*= require bootstrap

*= require_tree .

*= require_self
```
#### Congratulation! You have successfully installed Bootstrap 4 😀
Bootstrap Login Form With Background Image
Tags: todayilearned, webdev, wecoded, css
Published: 2020-03-14 08:26:21

We love to share our code with users ‘s/Noobs and we love to do something new and creative. So here we designed responsive Bootstrap Login Form With Background fixed Image with some cool CSS properties.

We have som many login forms with a different type of user-interface. So here we designed a simple login form using bootstrap 4 classes and css3 basic properties. here we also modified bootstrap class and for making our from right we used bootstrap grid class. Also, we used the image for this element from Unsplash and we used box-shadow CSS properties to make our form transparent and beautiful.

 
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

[Download Sourecode](https://w3hubs.com/bootstrap-login-form-with-background-image/)