profile

dejakob.com

Create static website

This package can initiate, build, watch and run a static React project.

Please use Node V13.13 or higher

How?

Go to the directory where you want to set up the project and run

npx alegrify-static-site init

When everything is set up, you can use these npm scripts:

script purpose
build Build the static website
watch Watch for changes and build
dev Watch and open in browser

Components

Isomorphic components. Write your components inside components/src and import them using components/lib.

Pages

Each .js file created inside the pages folder (direct children under src) will be generated into a HTML file on your server root.

Styling

Each .less,.scss,.css file inside the pages folder (direct children under src) will generate a CSS bundle on your server root. Less will be compiled with lessc, Scss with sass (no autoprefixer yet) and css with PostCSS.

Corona free hug

NPM version

If you watched the news recently, you might have noticed that the world has changed.

🍩 forget that we´re in this together, so let the people know you care about them by sending a virtual hug

Check out the live website here

Contribute

Open a PR, when approved and merged, bitrise will automatically update the website

How it works

Static pages

All pages are completely static and hosted on Gcloud storage.

They pages are getting generated on build time with React and some node scripts.

Check out the pages folder to see the source code of all pages.

CSS first, JS maybe later

All pages work with CSS and have some tiny amount of JS for extra interactivity.

Like, how much client JS do you need to create a form?

Creating a hug

A serverless cloud function takes care of hug creation.

The function can be found in worker-triggers.

This will use this repo as a package to run the createHug script.

The script will render another static page and upload it to Gcloud storage.

This way, there'll be no server delay when opening a page; but a little bit when creating a hug

Used resources

alegrify-sleep

NPM

Let your async function sleep for some milliseconds

Usage

const sleep = require('alegrify-sleep');

async function main() {
  console.log('hello');
  await sleep(200);
  console.log('world');
}

async-map

Build Status NPM

Array.prototype.map, but with async callbacks

Usage

const asyncMap = require('alegrify-async-map');

const items = [1, 2, 3];
const filteredItems = asyncMap(items, async (element, index, array) => {
  return await someAsyncMethod(element);
});

async-filter

Build Status NPM

Array.prototype.filter, but with async callbacks

Usage

const asyncFilter = require('alegrify-async-filter');

const items = [1, 2, 3];
const filteredItems = asyncFilter(items, async (element, index, array) => {
  return await someTest(element);
});

XOR

Build Status NPM

Logical xor operator for JS

Boolean table

Condition Condition Output
false false false
false true true
true false true
true true false

Usage

const xor = require('alegrify-xor');

xor(true, false) // will return true

Alegrify Date

Pure JS Date library

Build Status NPM

Install

npm i alegrify-date

or

yarn i alegrify-date

How to use

const AlegrifyDate = require('alegrify-date');

const date = new AlegrifyDate();

// Set year to 2020
date.year = 2020;

// Set month to January
date.month = 'Jarnuary';

// Add one month
date.month++;

// Subtract 3 days
date.day -= 3;

// Add 5 minutes
date.minute = 5;

// Format the date
console.log(date.format('DD MMMM, HHhmm'));

API

Date.prototype

Alegrify Date extends from the Date Object, so every original Date method can be used such as getTime and toString

[Property] second

date.second = 22;
console.log(date.second);

[Property] minute

date.minute = 15;
console.log(date.minute);

[Property] minute

date.hour = 23;
console.log(date.hour);

[Property] day

date.day = 'Monday'; // Set to Monday in the same week
date.day = 16; // Set to the 16th day in the month
console.log(date.day);

[Property] month

date.month = 'Februrary'; // Set date to same day in February
date.month = 3; // Set date to same day in March
console.log(date.month);

[Property] year

date.year = 2017;
console.log(date.year);

[Method] format

Display the date in a certain format

const date = AlegrifyDate('2019-06-03T20:45:00');
return date.format('D MMMM YYYY HH[h]');
// Will return 3 June 2019 20h
Param Description Example
s 1 digit second value 1 2 12
ss 2 digits second value 01 02 12
m 1 digit minute value 1 2 12
mm 2 digits minute value 01 02 12
H 1 digit hour value 1 2 12
HH 2 digits hour value 01 02 12
D 1 digit day value 1 2 12
DD 2 digits day value 01 02 12
Do Format day with 'Xth' 2nd 4th
d Weekday one digit Mo = 1
dd Short weekday string Mo Tu
ddd Medium weekday string Mon Tue
dddd Full weekday string Monday
dddd Full weekday string Monday
e Weekday one digit Su = 0
M Month one digit Jan = 1
MM Month two digits Jan = 01
MMM Month short name Jan Feb
MMMM Month full name January
Mo Format month with 'Xth' Jan = 1st
YY Short code year 2019 = 19
YYYY Short code year 2018 2019

React Alegrify UI

NPM

What is React Alegrify UI?

React Alegrify UI is a React wrapper around Alegrify UI.

As we believe human knowledge should be shared, we made some of our User Interface Elements available for everyone who wants to use it.

This repo is a React implementation of the available elements.

How to use

First, install the dependency with yarn, npm or any alternative:

yarn add react-alegrify-ui

Next, add the CSS file into your project. Most react projects support CSS imports (e.g. projects that are set up with create-react-app). In those cases, this should do the trick:

import '../node_modules/alegrify-ui/alegrify-ui.min.css';

In any other case manually include the alegrify-ui.min.css file into your html file:

<link rel="stylesheet" href="<PATH>/alegrify-ui.min.css" />

When these steps are fulfilled, you can easily import any component by doing

import { Button } from 'react-alegrify-ui';

Components

Helpers

Alegrify User Interface

Alegrify UI snippets

Set up

  1. Clone / Copy / npm install this repo and locate the source files

  2. Link the alegrify-ui.css file into your HTML file to get all css.

<link rel="stylesheet" href="alegrify-ui.min.css" />

react-native-styler

Enhance styling on React Native build status

NPM

The concept

  • Separate files between styling and components
  • Nested Stylesheets (React Native StyleSheet has only one level)
  • Easy implementation of themes with instant rerender when theme changes
  • Middlewares that can transform style declarations

Figure.js

<View
    style={getStyle('figure__container')}
>
    <Image
        style={getStyle('figure__image')}
        source={require('example.jpg')}
    />
    <View
        style={getStyle('figure__label__wrapper')}
    >
        <Text
            style={getStyle('figure__label__text')}
        />
    </View>
</View>

figure-style.js

createStyle({
    figure: {
        container: {
            height: '60h4s',
            backgroundColor: 'theme:primary'
        },
        image: {
            height: '46h4s',
            width: '46h4s',
            borderRadius: '23h4s'
        },
        label: {
            wrapper: {
                marginTop: '3h4s'
            },
            text: {
                fontSize: '11h4s',
                fontColor: 'theme:secondary'
            }
        }
    }
});

API

StylerProvider

Connect styler to your project

import { StylerProvider } from 'react-native-styler';
render() {
    return (
        <StylerProvider>
            <MyComponent />
        </StylerProvider>
    )
}

createStyle

Create a styleSheet that should be added to the styler. No export is needed, but the file should be imported anywhere in the project.

import { createStyle } from 'react-native-styler';

createStyle({
    header: {
        container: {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between'
        }
    }
});

getStyle

Get a style declaration from the styler

import { getStyle } from 'react-native-styler';

function Test() {
    return (
        <View
            style={getStyle('header__container')}
        />
    );
}

Middlewares

Color theme constants

It will replace a color constant name with the value of the current theme:

In theme.js:

import { createTheme } from 'react-native-styler';

createTheme({
    colors: {
        primary: '#ff0000'
    }
});

In style.js:

import { createStyle } from 'react-native-styler';

createStyle({
    header: {
        title: {
            color: 'theme:primary',
            fontWeight: '600'
        }
    }
});

Implementation of vh and vw

Just like CSS, use vh and vw to create sizes compared to the height or width of the viewport

// 30% of the width of the screen
width: '30vw'

h4s and w4s

In some cases, a component needs to resize based on the screen size. By adding 'h4s' or 'w4s', you provide the height or width the element should be on an iphone 4S screen and it will resize based on how much bigger / smaller the screen is.

// Font size will be bigger on an iPhone6 plus screen than an iPhone 5 for example
fontSize: '16h4s'

gitcheese.com