{"id":21951344,"url":"https://github.com/hiswe/web-helpers","last_synced_at":"2026-05-11T04:36:27.510Z","repository":{"id":137624004,"uuid":"143124747","full_name":"Hiswe/web-helpers","owner":"Hiswe","description":"some common web patterns","archived":false,"fork":false,"pushed_at":"2019-04-04T13:43:08.000Z","size":21,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-22T17:44:47.230Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Hiswe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-01T08:10:23.000Z","updated_at":"2019-04-04T13:43:10.000Z","dependencies_parsed_at":"2024-03-30T21:01:38.266Z","dependency_job_id":null,"html_url":"https://github.com/Hiswe/web-helpers","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Hiswe/web-helpers","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hiswe%2Fweb-helpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hiswe%2Fweb-helpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hiswe%2Fweb-helpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hiswe%2Fweb-helpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hiswe","download_url":"https://codeload.github.com/Hiswe/web-helpers/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hiswe%2Fweb-helpers/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32881443,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-10T13:40:02.631Z","status":"online","status_checked_at":"2026-05-11T02:00:05.975Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-29T06:13:38.426Z","updated_at":"2026-05-11T04:36:27.492Z","avatar_url":"https://github.com/Hiswe.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# web-helpers\n\nsome common web patterns\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n\n- [CSS – general](#css-%C2%A0general)\n  - [native font-stack](#native-font-stack)\n  - [mono font-stack](#mono-font-stack)\n  - [box-sizing](#box-sizing)\n  - [mobile – prevent font scaling while rotating iOS device while allowing user to zoom](#mobile--prevent-font-scaling-while-rotating-ios-device-while-allowing-user-to-zoom)\n  - [mobile – prevent zooming on double-tap](#mobile--prevent-zooming-on-double-tap)\n  - [accord native elements to website style](#accord-native-elements-to-website-style)\n  - [font aliasing](#font-aliasing)\n  - [momentum scrolling](#momentum-scrolling)\n  - [hidden and accessible](#hidden-and-accessible)\n- [CSS – with JS](#css--with-js)\n  - [accessible focus ring (enabled by tabbing with a keyboard)](#accessible-focus-ring-enabled-by-tabbing-with-a-keyboard)\n- [javascript](#javascript)\n  - [native array unique](#native-array-unique)\n  - [external promise creation](#external-promise-creation)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## CSS – general\n\n### native font-stack\n\nsee:\n\n- [github system fonts](http://markdotto.com/2018/02/07/github-system-fonts/)\n- [CSS trick](https://css-tricks.com/snippets/css/system-font-stack/#article-header-id-1)\n\n```css\nhtml {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n    Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n}\n```\n\n### mono font-stack\n\n```css\nhtml {\n  font-family: Consolas, \"Andale Mono WT\", \"Andale Mono\", \"Lucida Console\",\n    \"Lucida Sans Typewriter\", \"DejaVu Sans Mono\", \"Bitstream Vera Sans Mono\",\n    \"Liberation Mono\", \"Nimbus Mono L\", Monaco, \"Courier New\", Courier,\n    monospace;\n}\n```\n\n### box-sizing\n\n```css\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n```\n\n### mobile – prevent font scaling while rotating iOS device while allowing user to zoom\n\n```css\nhtml {\n  -webkit-text-size-adjust: 100%;\n}\n```\n\n### mobile – [prevent zooming on double-tap](https://stackoverflow.com/questions/46167604/iphone-html-disable-double-tap-to-zoom)\n\n```css\nbutton {\n  touch-action: manipulation;\n}\n```\n\n### accord native elements to website style\n\n```css\nbutton,\ninput,\ntextarea,\nselect {\n  font: inherit;\n  color: currentColor;\n  text-align: inherit;\n}\n```\n\n### [font aliasing](https://stackoverflow.com/questions/11459746/webfont-smoothing-and-antialiasing-in-firefox-and-opera#17927764)\n\n```css\n.font-smoothing {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n```\n\n### [momentum scrolling](https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/)\n\n```css\n.module {\n  overflow-y: scroll; /* has to be scroll, not auto */\n  -webkit-overflow-scrolling: touch;\n}\n```\n\n### hidden and accessible\n\n```css\n.hidden-accessible {\n  border: 0 !important;\n  clip: rect(0 0 0 0) !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n}\n```\n\n## CSS – with JS\n\n\u003c!-- ### [fluid font-size](https://css-tricks.com/snippets/css/fluid-typography/)\n\n```scss\n@function strip-unit($value) {\n  @return $value / ($value * 0 + 1);\n}\n\n@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {\n  $u1: unit($min-vw);\n  $u2: unit($max-vw);\n  $u3: unit($min-font-size);\n  $u4: unit($max-font-size);\n\n  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {\n    \u0026 {\n      font-size: $min-font-size;\n      @media screen and (min-width: $min-vw) {\n        font-size: calc(\n          #{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *\n            ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})\n        );\n      }\n      @media screen and (min-width: $max-vw) {\n        font-size: $max-font-size;\n      }\n    }\n  }\n}\n``` --\u003e\n\n### [accessible focus ring](https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2) (enabled by tabbing with a keyboard)\n\n```scss\nbody:not(.user-is-tabbing) {\n  a:focus,\n  button:focus,\n  input:focus,\n  select:focus,\n  textarea:focus {\n    outline: none;\n  }\n}\n```\n\n```js\nfunction handleFirstTab(e) {\n  if (e.keyCode === 9) {\n    // the \"I am a keyboard user\" key\n    document.body.classList.add(`user-is-tabbing`);\n    window.removeEventListener(`keydown`, handleFirstTab, { passive: true });\n  }\n}\nwindow.addEventListener(`keydown`, handleFirstTab);\n```\n\n## javascript\n\n### [native array unique](https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates#14438954)\n\n```js\n[...new Set(myArray)];\n```\n\n### [external promise creation](http://lea.verou.me/2016/12/resolve-promises-externally-with-this-one-weird-trick/)\n\n```js\nfunction defer() {\n  var res, rej;\n  var promise = new Promise((resolve, reject) =\u003e {\n    res = resolve;\n    rej = reject;\n  });\n  promise.resolve = res;\n  promise.reject = rej;\n  return promise;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiswe%2Fweb-helpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhiswe%2Fweb-helpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiswe%2Fweb-helpers/lists"}