Skip to content

Instantly share code, notes, and snippets.

View marcelmokos's full-sized avatar

Marcel Mokoš marcelmokos

25 followers · 30 following
View GitHub Profile
@marcelmokos
marcelmokos / bootstrap-project-file-structure.text
Last active October 26, 2018 13:24
Whenever possible, avoid modifying Bootstrap’s core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you’re using a package manager like npm, you’ll have a file structure that looks like this
your-project/
├── scss
│ ├── variables.scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
@marcelmokos
marcelmokos / Theme javascript.js
Last active October 26, 2018 11:54
Example code style with comments (comments are meant to explain code style do not use comments like this in application)
function initToggle({
TOGGLE_SELECTOR = ".js-toggle",
TOGGLE_FOCUSED_CLASS = "toggle--focused",
TOGGLE_ITEM_OPEN_CLASS = "toggle__item--open", // use constants for class names and selectors variable name should end with _CLASS or _SELECTOR
}) { // use init functions that encapsulate functionality
const $toggle = $(TOGGLE_SELECTOR); // jQuery objects variable names should start with $ for jQuery elements
$toggle.on("focus", (event) => {
const $this = $(event.currentTarget);
$this.addClass(TOGGLE_FOCUSED_CLASS);
@marcelmokos
marcelmokos / CommentWithDefaultPrpps.js
Last active October 17, 2018 13:51
Comment.js
import React from "react";
import styled from "react-emotion";
import { Flex, Box } from "grid-styled/emotion";
import Text from "./Text";
import Avatar from "./Avatar";
const Comment = ({ children, ...props }) => children(props);
Comment.defaultProps = {
Wrapper: props => <Flex flexDirection="row" mb={"1rem"} {...props} />,
@marcelmokos
marcelmokos / Comment.js
Last active October 17, 2018 12:48
Comment component with everything in props
<Comment
channel={channel}
createdAt={createdAt}
text={text}
getComments={getComments}
comments={comments}
/>
@marcelmokos
marcelmokos / Strategy in react.js
Last active January 16, 2019 14:29
Openslava
const FormattedNumber = ({ value, roundingFn = val => val }) => roundingFn(value);
//js
console.log(
FormattedNumber({value: 5.6}) /* 5.6 */
);
//jsx
<FormattedNumber value={5.6} /> /* 5.6 */
<FormattedNumber value={5.6} roundingFn={Math.floor} /> /* 5 */
@marcelmokos
marcelmokos / be.js
Last active July 20, 2018 10:27
<script data-senna-track="temporary" type="text/javascript">
(function(i,s,o,r,g,v,a,m){
g=v?g+'?v='+v:g;i['BrandEmbassy']=r;
i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)};i[r].l=+new Date();
a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;a.setAttribute("data-senna-track", "temporary");
a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','brandembassy','https://livechat-static.brandembassy.com/3/chat.js');
try {
@marcelmokos
marcelmokos / deriveStateFromProps.js
Last active June 1, 2018 00:26
React optionally controlled components
// @flow
const deriveStateFromProps = (nextProps: Object, prevState: Object) => {
const derivedStateUpdate: Object = Object.keys(nextProps).reduce(
(acc, key) => {
if (nextProps[key] !== undefined && nextProps[key] !== prevState[key]) {
return { ...acc, [key]: nextProps[key] };
}
return acc;
},
@marcelmokos
marcelmokos / PropsAndState.js
Last active June 1, 2018 00:04
React optionally controlled components
// @flow
import { type Log } from "./Logs";
type PropsAndState = {
/** value */
value: number,
/** update value */
updateValue: number => void,
};
@marcelmokos
marcelmokos / js-fun.js
Last active February 11, 2018 08:42
Hearth and zerg rush, paste into developer console in chrome.
function rotate(element = $("body"), time = 20, turn = 1) {
element.style.transition = `all ${20}s ease-in-out`;
element.style.transform = `rotate(${turn}turn)`;
}
rotate($("body"));
// find all and spin
function findAll(element) {
@marcelmokos
marcelmokos / github.css
Last active October 29, 2017 13:34
IDEA github markdown css
@font-face {
font-family: octicons-link;
src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAA