Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Osamah Aldoaiss Saifadin

🎯
Focusing
View GitHub Profile
View inline-react.html
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script>
const e = React.createElement;
function SliderImage() {
return e('div', { className: 'tSlider--image-wrapper' }, e('img', { src: '//cdn.shopify.com/s/files/1/0116/9562/0160/t/3/assets/bg.png?7092974999273233205', className: 'tSlider--image' }));
};
@Saifadin
Saifadin / inline-react-result.html
Created Feb 17, 2019
Result of inline React code
View inline-react-result.html
<div class="tSlider">
<div class="tSlider--image-wrapper">
<img src="//cdn.shopify.com/s/files/1/0116/9562/0160/t/3/assets/bg.png?7092974999273233205" class="tSlider--image">
</div>
<div class="tSlider--sliderText">
<h1 class="tSlider--headline">Fun stuff</h1>
<span class="tSlider--subHeadline">
This is a React example without any transpiling <b>with a bold text</b>. ❤️
</span>
</div>
View error.js
(window.webpackJsonp = window.webpackJsonp || []).push([[5], {
1271: function(t, e, r) {
(function(t) {
var r, n, o, i;
function a(t) {
return (a = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(t) {
return typeof t
}
: function(t) {
return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t
@Saifadin
Saifadin / useTypewriter.js
Last active Jan 25, 2019
Typewriter like "animation" for a string | Hooks
View useTypewriter.js
import { useState, useEffect } from 'react';
export const useTypeWriter = (text, startNow = true, speed = 100, skip) => {
const [toBeTyped] = useState(text);
const [displayedText, setDisplayedText] = useState('');
const [isDone, setIsDone] = useState(false);
const [intervalId, setIntervalId] = useState(null);
useEffect(
() => {
@Saifadin
Saifadin / customTheme.js
Created Jan 22, 2019
Gatsby Custom Playground Theme
View customTheme.js
export {
codeTheme: {
def: `#ffe036`,
property: `#9effe5`,
keyword: `#66b8ff`,
string: `#9effe5`,
punctuation: `#5c7180`,
comment: `#5c7180`,
background: `#241236`,
editorBackground: `#2c1742`,
View renderEmail2.js
import { renderEmail } from 'postonents';
import EmailContainer from '@company/email-templates';
// EmailContainer is the entry point for the service and it gets the data passed to it
const html = await renderEmail(EmailContainer, { lang: lang.toLowerCase(), template, emailData: data });
// generic send function
sendEmail(html);
@Saifadin
Saifadin / EmailComponent.js
Created Jan 2, 2019
Main email component
View EmailComponent.js
import React from 'react';
import { getEmail } from './utils';
/** utils.js
import { AccountUserDeleted } from './emails';
export const getEmail = name => {
switch (name) {
case 'ACCOUNT_USER_DELETED':
View renderEmail.js
import { renderEmail } from 'postonents';
import VerificationCodeMail from './templates/VerificationCode';
...
// Get your email templates, pass it as the entry point for the server side rendering
// data in this case should align with the data needed in the template
const html = renderEmail(VerificationCodeMail, { lang: 'en', data });
// This is just a generic send function
@Saifadin
Saifadin / VerificationMail.jsx
Last active Jan 2, 2019
Verification Code Email
View VerificationMail.jsx
import React from 'react';
import { Email, Container, Row, Column, Header, FullWidth, Footer, Text, Link, PostonentsProvider } from 'postonents';
// Data here represents the Example Data we might get passed to from the backend.
// This can be anything and you need, you have to define it beforehand
const VerificationEmail = ({ lang, data }) => {
const { verifyToken, email } = data;
return (
<PostonentsProvider theme={{ typo: { fontFamily: 'Roboto, sans-serif' } }}>
@Saifadin
Saifadin / styles.js
Created Dec 17, 2018
Why we use CSS-in-JS 5
View styles.js
export const Panel = styled('div')`
max-width: 1200px;
width: 100%;
margin-bottom: ${({ theme: { spacing } }) => spacing}px;
@media screen and (max-width: 768px) {
max-width: 400px;
}
`;