##CSS Методологии, от О до Б
-
CSS методологии на 1 примере https://github.com/aiboy/CSSM
-
Слайды https://wsd.events/2016/10/01/pres/css-methodologies.pdf
###CSS Design patterns
import * as gulp from 'gulp'; | |
import * as yargs from 'yargs'; | |
import * as merge from 'merge2'; | |
import { BaseGulpTask } from '../BaseGulpTask'; | |
import { BuildConfig, ProjectArtifact, ProjectPaths, Utils } from '../buildBarrel'; | |
import { gulpIf, gulpPlumber, gulpPrint, gulpSourcemaps, gulpTypeScript } from '../gulpPlugins'; | |
/** | |
* Builds the project, then the application. | |
* |
function testPreserve3DSupport() { | |
const element = document.createElement('p'); | |
document.body.insertBefore(element, null); | |
const propName = 'transform-style'; | |
element.style[propName] = 'preserve-3d'; | |
const propValue = window.getComputedStyle(element, null).getPropertyValue(propName); | |
document.body.removeChild(element); | |
return (propValue === 'preserve-3d'); | |
} |
const server = http2.createSecureServer(options); | |
const commonCSS = fs.readFileSync('common.css'); | |
server.on('stream', (stream, headers) => { | |
console.log(`${headers[':method']} ${headers[':path']}`); | |
const parsedUrl = url.parse(headers[':path']); | |
let pathname = `.${parsedUrl.pathname}`; | |
const ext = path.parse(pathname).ext; | |
if (headers[':path'] === '/index.html') { | |
stream.pushStream({ ':path': 'common.css' }, |
const http2 = require('http2'); | |
const fs = require('fs'); | |
const url = require('url'); | |
const path = require('path'); | |
const options = { | |
key: fs.readFileSync('key.pem'), | |
cert: fs.readFileSync('cert.pem') | |
}; | |
const mimeType = { | |
'.ico': 'image/x-icon', |
const cacheName = 'v1'; | |
this.addEventListener('install', function(event) { | |
event.waitUntil( | |
caches.open(cacheName).then(function(cache) { | |
return cache.addAll([ | |
'index.html', | |
'common.css' | |
].map(u => new Request(u, { credentials: 'include' }))) | |
}).then(()=> console.log('done')) | |
); |
// Кватернионы — это гиперкомплексные числа, предложенные Гамильтоном в 1843 году. | |
// Кватернионы с операциями на них образуют алгебраическую структуру, называемую "телом" или "кольцом с делением" (division ring) ℍ. | |
// Такие алгебраические структуры отличаются от привычных нам полей (например, поля действительных чисел ℝ) тем, | |
// что умножение в них некоммутативно, т.е. для кватернионов справедливо a * b =/= b * a. | |
// Кватернионы очень удобны для записи вращений в трёхмерном пространстве, поэтому они нашли широкое применение в механике, | |
// 3D-графике и компьютерном зрении. | |
// В этом упражнении вы должны будете создать тип, представляющий кватернионы. | |
// Этот тип будет размеченным объединением, т.к. мы можем по-разному определить кватернионы. |
_registry = {}; | |
importPolyfill = path => { | |
if(!(path in _registry)) { | |
const entry = _registry[path] = {}; | |
entry.promise = new Promise(resolve => entry.resolve = resolve); | |
document.head.appendChild(Object.assign( | |
document.createElement('script'), | |
{ | |
type: 'module', | |
innerText: `import * as X from '${path}'; _registry['${path}'].resolve(X);`, |
"use strict"; | |
// animation utils | |
// =============== | |
const trackTime = timing => { | |
const now = performance.now(); | |
if (!timing.startTime) timing.startTime = now; | |
const elapsed = now - timing.startTime; |
type DraggerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; | |
const computeGeometryWhileDragging = ( | |
position: DraggerPosition, | |
preserveAspectRatio: boolean, | |
initialGeometry: SlideElementGeometry, | |
currentGeometry: SlideElementGeometry, | |
dx: number, | |
dy: number | |
): SlideElementGeometry => { |
##CSS Методологии, от О до Б
CSS методологии на 1 примере https://github.com/aiboy/CSSM
Слайды https://wsd.events/2016/10/01/pres/css-methodologies.pdf
###CSS Design patterns