awesomes icon indicating copy to clipboard operation
awesomes copied to clipboard

verified publisher icon ducin
โ†’

Metadata

Awesome list of valuable resources and people to follow, curated by me โ„ข

Awesomes

My personal list of valuable resources and people to follow:

  • people
  • videos
  • tools/apps
  • snippets

people

๐Ÿ‘ท๐Ÿผโ€โ™‚๏ธ๐Ÿ‘ท๐Ÿพโ€โ™€๏ธ

architecture

and last but not least, faces in things

Videos

๐Ÿ“น๐Ÿค”

and last but not least, ๏ธ๏ธโšก๏ธ WAT โšก๏ธ

also:

tools

๐Ÿ”จ๐Ÿ› ๐Ÿ”ฉ

online demos

fake online APIs

  • https://jsonplaceholder.typicode.com/comments?name_like=earum
  • https://dog.ceo/dog-api/documentation/
    • https://dog.ceo/api/breeds/image/random
  • https://icanhazdadjoke.com/api
  • https://www.thecocktaildb.com/api.php, https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita
  • https://ergast.com/api/f1/2018/results/1.json, https://ergast.com/mrd/

free stock photos

  • https://unsplash.com/
  • https://pixabay.com/
  • https://picjumbo.com/
  • https://www.pexels.com/

UI design, sketches, mockups

  • https://freebiesupply.com/free-sketch-websites/traders-social-network-concept-free-sketch/
  • refactoring UI (tips): https://twitter.com/i/moments/994601867987619840
  • https://uxmyths.com

placeholder images

  • https://loremipsum.io/21-of-the-best-placeholder-image-generators/ (!)
  • https://loremflickr.com/
  • https://placeimg.com

icons

emmet

extremely concise syntax that generates standard HTML (dev-friendly)

use within template files:

  • ul#list>li.item{item no. $}*5
  • ul>li*3>a>lorem10 (lorem ipsum)

some emojis

  • (โ•ฏยฐโ–กยฐ)โ•ฏ๏ธต โ”ปโ”โ”ป
  • (โ”›โ—‰ะ”โ—‰)โ”›ๅฝก ยกษนวฦƒuษยก
  • ยฏ\_(ใƒ„)_/ยฏ
  • emoji4fun: ๐Ÿฆ๐Ÿ’ฐ๐Ÿ’ธโœจโšก๐ŸŒฉ๏ธ๐ŸงŸ๐Ÿ”จ๐Ÿ‘ ๐Ÿณ๏ธโ€๐ŸŒˆ๐Ÿ’€โšฐ๏ธ๐Ÿฅฅ๐Ÿ•โ˜ƒ๐ŸŽธ
  • flags: ๐Ÿ‡ซ๐Ÿ‡ท๐Ÿ‡ฉ๐Ÿ‡ช๐Ÿ‡ต๐Ÿ‡ฑ๐Ÿ‡ช๐Ÿ‡ธ๐Ÿ‡ฎ๐Ÿ‡น๐Ÿ‡ณ๐Ÿ‡ฑ๐Ÿ‡ฌ๐Ÿ‡ง๐Ÿ‡บ๐Ÿ‡ธ

snippets

Improve your developer productivity with tailored code snippets used throughout your apps.

good practice:

  • think about the order in which you think about your code. THe order in which you define piece by piece might make it more smooth - or more cumbersome - to achieve your goal. Define the order with ${N:ELEMENT}, where N number defines the order and ELEMENT is a default name (likely to change), best describing what this piece is. Example: ${1:AGGR}
  • Declare multiple bieces with the same number: ${1:ELEMENT} ${1:ELEMENT} if you want both o change at the same time. Example below: React Component along with its props interface name

create:

VSCode's custom snippets:

  • ctrl + shift + P (windows)
  • cmd + shift + P (mac)

then: user snippets > javascript.json / typescript.json > add following:

{
	"Array-Reduce": {
		"prefix": "reduce",
		"body": [
			"${1:COLLECTION}.reduce( (${3:ACC}, ${2:ITEM}) => ${5:NEWACC}, ${4:INIT} )",
			"$0"
		],
		"description": "Call Array.reduce FTW!"
	},
	"Array-Reduce-Function": {
		"prefix": "reduce-fn",
		"body": [
			"${1:COLLECTION}.reduce((${3:ACC}, ${2:ITEM}) => {",
			"  return ${5:NEWACC}",
			"}, ${4:INIT})",
			"$0"
		],
		"description": "Call Array.reduce FTW!"
	}
}

or typescriptreact.json (TSX):

	"FunctionComponent": {
		"prefix": "fc",
		"description": "typed function component",
		"body": [
			"import React from 'react';",
			"",
			"type ${1:Component}Props = {",
			"  ${2:...}",
			"}",
			"",
			"export const ${1:Component}: React.FC<${1:Component}Props> = (${4:props}) => {",
			"  return <>${3:siema}</>",
			"}",
			"$0"
		]
	},

โ† Metadata

38
Stars
8
Forks
Watchers

Owner

verified publisher icon ducin

Metadata

Awesome list of valuable resources and people to follow, curated by me โ„ข

Back