Skip to content

Instantly share code, notes, and snippets.

View marcelmokos's full-sized avatar

Marcel Mokoš marcelmokos

27 followers · 30 following
View GitHub Profile
@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 / 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 / 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 / importing-bootstrap-scss-from-node-modules.scss
Last active October 26, 2018 13:48
In your custom.scss, you’ll import Bootstrap’s source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.
// Custom.scss
// Option B: Include parts of Bootstrap
// Required
@import "node_modules/bootstrap/scss/functions";
// Bootstrap default variables
@import "node_modules/bootstrap/scss/variables";
// Your variable overrides
@import "./variables";
@import "node_modules/bootstrap/scss/mixins";
@marcelmokos
marcelmokos / tomorrowDate.js
Last active November 8, 2018 23:34
Not testable
function tomorrowDate() {
const date = new Date();
date.setDate(date.getDate() + 1);
return date;
}
it("Test tomorrowDate function", () => {
expect(tomorrowDate()).toBe(/* ¯\_(ツ)_/¯ - it is imposible to test the function */)
@marcelmokos
marcelmokos / purefunction-for-adding-days.js
Last active November 8, 2018 23:47
function addDays(date = new Date(), days = 0) {
const dateClone = new Date(date); // date is an object provided by reference, we need to clone it
dateClone.setDate(date.getDate() + days);
return dateClone;
}
const tomorrowDate = (date, days = 1) => addDays(date, days);
@marcelmokos
marcelmokos / JavaScriptTypeConversionTable.csv
Last active November 28, 2018 01:18
Original Value Converted to Number Converted to String Converted to Boolean
false 0 false false
true 1 true true
0 0 0 false
1 1 1 true
0 0 0 true
000 0 000 true
1 1 1 true
NaN NaN NaN false
Infinity Infinity Infinity true
@marcelmokos
marcelmokos / Calendar.defaultProps.js
Last active January 19, 2019 23:20
Calendar.defaultProps
Calendar.defaultProps = {
Wrapper: styled.div`
display: flex;
flex-direction: row;
`,
Column: styled.div`
display: flex;
flex-direction: column;
margin: 0.5rem;
`,
@marcelmokos
marcelmokos / index.js
Created January 18, 2019 15:36
Calendar
import React from "react";
import ReactDOM from "react-dom";
import Calendar from "./components/Calendar";
const App = () => (
<>
<Calendar>
{({ Wrapper, Column, Box, Item, headers }) => (
<Wrapper>
{headers.map((header, index) => (
@marcelmokos
marcelmokos / prompt.js
Created March 13, 2019 11:47
// see types of prompts:
// https://github.com/enquirer/enquirer/tree/master/examples
//
module.exports = [
{
type: "input",
name: "name",
message: "What's the name of your package?"
},
{