Skip to content

Instantly share code, notes, and snippets.

Avatar

Marcel Mokoš marcelmokos

View GitHub Profile
View index.js
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) => (
View Calendar.defaultProps.js
Calendar.defaultProps = {
Wrapper: styled.div`
display: flex;
flex-direction: row;
`,
Column: styled.div`
display: flex;
flex-direction: column;
margin: 0.5rem;
`,
View JavaScriptTypeConversionTable.csv
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
View purefunction-for-adding-days.js
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);
View tomorrowDate.js
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 / importing-bootstrap-scss-from-node-modules.scss
Last active Oct 26, 2018
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.
View importing-bootstrap-scss-from-node-modules.scss
// 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 / bootstrap-project-file-structure.text
Last active Oct 26, 2018
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
View bootstrap-project-file-structure.text
your-project/
├── scss
│ ├── variables.scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
@marcelmokos
marcelmokos / Theme javascript.js
Last active Oct 26, 2018
Example code style with comments (comments are meant to explain code style do not use comments like this in application)
View Theme javascript.js
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);
View CommentWithDefaultPrpps.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 Oct 17, 2018
Comment component with everything in props
View Comment.js
<Comment
channel={channel}
createdAt={createdAt}
text={text}
getComments={getComments}
comments={comments}
/>