Skip to content

Instantly share code, notes, and snippets.

View a-x-'s full-sized avatar
🛩️

Alexander a-x-

🛩️
View GitHub Profile
@a-x-
a-x- / Flow.tsx
Created September 10, 2020 23:32
Поток вёрстки — React обёртка над flexbox. <Flow row size="1rem"><Button/><Button/></Flow>
import React, { ReactNode } from 'react'
import styled from 'styled-components'
/** Nice flexbox wrapper */
type CrossAlign = 'start' | 'end' | 'center' | 'stretch' | 'baseline'
export interface FlowProps {
children: ReactNode
// direction shortcut
row?: boolean
default_config:
timer:
my_timer:
five_sec_after_button_press:
one_min_after_button_press:
input_text:
@una
una / color-functions.md
Last active March 11, 2020 13:15
CSS Color Functions

CSS Color Functions

Web developers and design systems developers often use functions to design components. With the increasing usage of design systems that support multiple platforms, and increased capability of Dark Mode in UI, this becomes even more useful to not need to manually set color, and to instead have a single source from which layouts are calculated. Currently Sass, calc() on HSL values, or PostCSS is used to do this.

Examples:

  • Components with color variations based on calculations from a parent. (i.e. Button with outline that uses the primary button color to adjust the size)
  • Theming - Palletes based on a color or set of colors for themes. Especially when a single base system is used with multiple themes
  • Uniformity among transformations between components with different primary colors

Proposal

@a-x-
a-x- / index.html
Last active June 3, 2019 20:06
golang wasm. go <-> js interlop
<html>
<head>
<meta charset="utf-8">
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
go.run(result.instance);
console.log(Template('123', "Цифры из этого смс никому нельзя сообщать. Для входа в приложение Рокетбанка введите код {{ index . 0 }}"));
hass:account
hass:alert
hass:alert-circle
hass:altimeter
hass:apple-safari
hass:apps
hass:arrow-bottom-left
hass:arrow-down
hass:arrow-left
hass:arrow-right
@a-x-
a-x- / scroll-in-flex.md
Last active May 6, 2024 20:20
`overflow: scroll` in the `display: flex` 👿😳🤔🤯

Как поместить scroll-контейнер во flexbox и не облажаться.

overflow-flex-grid-hack

Столкнулись с проблемой: блок со скролом распепячивает flex. Давайте разбираться.

4 месяца назад показалось, что хак найден, о чём мы поспешили рассказать в твиттере, но потом стало ясно что таки поспешили.

Помотрели в спеку и mdn, но ключей к решению не нашли.

@a-x-
a-x- / simple-triangle-question.md
Last active August 20, 2021 10:17
simple triangle question

triangle question

image

>> TsU = 40° and QS = QU and RS = RT
<< what the ∠RpQ ?

Solution

class Link extends PureComponent {
render () {
// Unusual useful omit application
const rest = omit(this.props, [
'url', 'basePath', 'RouterLink', 'method', 'currentTab', 'disabled', 'children', 'className',
'title', 'confirm', 'onClick', 'onSuccess', 'onFailure', 'axiosProps', 'noExternalIcon',
]);
return isExternalUrl(this.props.url)
? this.renderExternalLink({ rest })
: this.renderInternalLink({ rest });
@dmnsgn
dmnsgn / WebGL-WebGPU-frameworks-libraries.md
Last active May 8, 2024 18:53
A collection of WebGL and WebGPU frameworks and libraries

A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.

Engines and libraries ⚙️

Name Stars Last Commit Description
three.js ![GitHub
@slavikdev
slavikdev / cheatsheet.md
Created March 16, 2017 17:54
Rails request path cheatsheet

Rails request path cheatsheet

Full path with query string

>>  request.url
=> "http://localhost:3000/ask-help.amp?hui=pizda"

Virtual path without query string

>>  request.path
=&gt; "/ask-help.amp"