Some functional stuff

Share
Screen capture

function buildAttrs(obj) {
    let result = [];
    for (prop in obj) {
        result.push(`${prop}="${obj[prop]}"`);
    }
    return result.join(" ");
}

function createOutput(tag, attrs = {}) {
    return function outputTag(content = "") {
        return `<${tag || "div"} ${buildAttrs(attrs)}>${content}</${tag || "div"}>`;
    };
}

function outputToDom(el, tag, attrs = {}) {
    return function outputToContainer(content = "") {
        getTargetContainer(el).innerHTML += createOutput(tag, attrs)(content);
    };

    function getTargetContainer(id) {
        return document.getElementById(id) || addDiv(id);
    }

    function addDiv(id) {
        const targetDiv = document.createElement("div");
        targetDiv.id = id;
        return document.body.appendChild(targetDiv);
    }
}

function pipe(...fns) {
    return function piped(result) {
        for (let i = 0; i < fns.length; i++) {
            result = fns[i](result);
        }
        return result;
    };
}

const heading = createOutput("h1", { style: "margin: 0" });

const paragraph = createOutput("p");

const article = createOutput("article");

const output = outputToDom("js-output", "section", {
    style: "outline: 1px dotted red; padding: 10px; margin: 10px"
});

const capitalize = i => i.replace(i.charAt(0), i.charAt(0).toUpperCase());

const capitalizeHeading = pipe(capitalize, heading);

const capitalizeParagraph = pipe(capitalize, paragraph);

const buildArticle = i =>
    article(`${capitalizeHeading(i.heading)} ${capitalizeParagraph(i.body)}`);

const buildArticles = i => i.map(buildArticle);

const joinArticles = arr => arr.join("");

const content = [
    {
        heading:
            "A lot of people cry when they cut onions. The trick is not to form an emotional bond.",
        body:
            "Go Speed Racer. Go Speed Racer. Go Speed Racer go. we might as well say... Would you be mine? Could you be mine? Won't you be my neighbor? Baby if you've ever wondered - wondered whatever became of me. I'm living on the air in Cincinnati. Cincinnati WKRP. It's time to put on makeup. It's time to dress up right. It's time to raise the curtain on the Muppet Show tonight."
    },
    {
        heading:
            "I wrote a song about a tortilla. Well actually, it’s more of a wrap.",
        body:
            "Boy the way Glen Miller played. Songs that made the hit parade. Guys like us we had it made. Those were the days. Then one day he was shootin' at some food and up through the ground came a bubblin' crude. Oil that is. They're creepy and they're kooky mysterious and spooky. They're all together ooky the Addams Family."
    },
    {
        heading:
            "Some people just have a way with words, and other people ... oh ... not have way.",
        body:
            "In 1972 a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. Sunday Monday Happy Days. Tuesday Wednesday Happy Days. Thursday Friday Happy Days.Saturday what a day. Groovin' all week with you. If you have a problem if no one else can help and if you can find them maybe you can hire The A-Team. And when the odds are against him and their dangers work to do. You bet your life Speed Racer he will see it through. The mate was a mighty sailin' man the Skipper brave and sure. Five passengers set sail that day for a three hour tour a three hour tour. Now were up in the big leagues getting' our turn at bat. In a freak mishap Ranger 3 and its pilot Captain William Buck Rogers are blown out of their trajectory into an orbit which freezes his life support systems and returns Buck Rogers to Earth five-hundred years later."
    }
];

const headingStyles = { style: "font-family: sans-serif" };

outputToDom("js-headings", "h1", headingStyles)(
    "Functional JS"
);

outputToDom("js-headings", "h2", headingStyles)(
    "AKA This is wickedly cool shit!"
);

pipe(buildArticles, joinArticles, output)(content);
Share

Animate SVG icons with CSS and Snap | CodyHouse

Share


SVG (scalable vector graphics) are becoming more and more popular on the web these days – and support is getting closer to being universal. In fact, if we didn’t have to support IE8 anymore, it would be universal!

One benefit of SVG is that it looks great on all devices, regardless of resolution (hence the scalable part of the name). Other benefits include the fact that they can be recolored on the fly with CSS, plus animation.

I’m heavily into reading about and experimenting with SVGs these days, and here’s a cool article I found on Smashing Magazine, so I thought I’d share. It not only covers the animation aspect noted in its title, but also has some great tips on creating the SVGs themselves as well as optimization.

Animate SVG icons with CSS and Snap | CodyHouse

Curious about the code behind the SVG logo? Here it is...

[html]
<svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” width=”100%” height=”100%” viewBox=”0 0 100 100″>

<title>SVG Logo</title>

<a xlink:href=”http://www.w3.org/Graphics/SVG/” target=”_parent”
xlink:title=”W3C SVG Working Group home page”>

<rect
id=”background”
fill=”#FF9900″
width=”100″
height=”100″
rx=”4″
ry=”4″/>

<rect
id=”top-left”
fill=”#FFB13B”
width=”50″
height=”50″
rx=”4″
ry=”4″/>

<rect
id=”bottom-right”
x=”50″
y=”50″
fill=”#DE8500″
width=”50″
height=”50″
rx=”4″
ry=”4″/>

<g id=”circles” fill=”#FF9900″>
<circle
id=”n”
cx=”50″
cy=”18.4″
r=”18.4″/>

<circle
id=”ne”
cx=”72.4″
cy=”27.6″
r=”18.4″/>

<circle
id=”e”
cx=”81.6″
cy=”50″
r=”18.4″/>

<circle
id=”se”
cx=”72.4″
cy=”72.4″
r=”18.4″/>

<circle
id=”s”
cx=”50″
cy=”81.6″
r=”18.4″/>

<circle
id=”sw”
cx=”27.6″
cy=”72.4″
r=”18.4″/>

<circle
id=”w”
cx=”18.4″
cy=”50″
r=”18.4″/>

<circle
id=”nw”
cx=”27.6″
cy=”27.6″
r=”18.4″/>
</g>

<g id=”stars”>
<path
id=”black-star”
d=”M 63.086, 18.385
c 0.000, -7.227 -5.859,-13.086 -13.100,-13.086
c -7.235, 0.000 -13.096, 5.859 -13.096, 13.086
c -5.100, -5.110 -13.395, -5.110 -18.497, 0.000
c -5.119, 5.120 -5.119, 13.408 0.000, 18.524
c -7.234, 0.000 -13.103, 5.859 -13.103, 13.085
c 0.000, 7.230 5.870, 13.098 13.103, 13.098
c -5.119, 5.110 -5.119, 13.395 0.000, 18.515
c 5.102, 5.104 13.397, 5.104 18.497, 0.000
c 0.000, 7.228 5.860, 13.083 13.096, 13.083
c 7.240, 0.000 13.100, -5.855 13.100,-13.083
c 5.118, 5.104 13.416, 5.104 18.513, 0.000
c 5.101, -5.120 5.101,-13.410 0.000,-18.515
c 7.216, 0.000 13.081, -5.869 13.081,-13.098
c 0.000, -7.227 -5.865,-13.085 -13.081,-13.085
c 5.101, -5.119 5.101,-13.406 0.000,-18.524
C 76.502, 13.275 68.206, 13.275 63.086, 18.385 z”/>

<path
id=”white-star”
fill=”#FFFFFF”
d=”M 55.003, 23.405
v 14.488
L 65.260, 27.640
c 0.000, -1.812 0.691,-3.618 2.066, -5.005
c 2.780, -2.771 7.275,-2.771 10.024, 0.000
c 2.771, 2.766 2.771, 7.255 0.000, 10.027
c -1.377, 1.375 -3.195, 2.072 -5.015, 2.072
L 62.101, 44.982
H 76.590
c 1.290, -1.280 3.054,-2.076 5.011, -2.076
c 3.900, 0.000 7.078, 3.179 7.078, 7.087
c 0.000, 3.906 -3.178, 7.088 -7.078, 7.088
c -1.957, 0.000 -3.721,-0.798 -5.011, -2.072
H 62.100
l 10.229, 10.244
c 1.824, 0.000 3.642, 0.694 5.015, 2.086
c 2.774, 2.759 2.774, 7.250 0.000, 10.010
c -2.750, 2.774 -7.239, 2.774 -10.025, 0.000
c -1.372, -1.372 -2.064,-3.192 -2.064, -5.003
L 55.000, 62.094
v 14.499
c 1.271, 1.276 2.084, 3.054 2.084, 5.013
c 0.000, 3.906 -3.177, 7.077 -7.098, 7.077
c -3.919, 0.000 -7.094,-3.167 -7.094, -7.077
c 0.000, -1.959 0.811,-3.732 2.081, -5.013
V 62.094
L 34.738, 72.346
c 0.000, 1.812 -0.705, 3.627 -2.084, 5.003
c -2.769, 2.772 -7.251, 2.772 -10.024, 0.000
c -2.775, -2.764 -2.775,-7.253 0.000,-10.012
c 1.377, -1.390 3.214,-2.086 5.012, -2.086
l 10.257,-10.242
H 23.414
c -1.289, 1.276 -3.072, 2.072 -5.015, 2.072
c -3.917, 0.000 -7.096,-3.180 -7.096, -7.088
s 3.177, -7.087 7.096,-7.087
c 1.940, 0.000 3.725, 0.796 5.015, 2.076
h 14.488
L 27.646, 34.736
c -1.797, 0.000 -3.632,-0.697 -5.012, -2.071
c -2.775, -2.772 -2.775,-7.260 0.000,-10.027
c 2.773, -2.771 7.256,-2.771 10.027, 0.000
c 1.375, 1.386 2.083, 3.195 2.083, 5.005
l 10.235, 10.252
V 23.407
c -1.270, -1.287 -2.082,-3.053 -2.082, -5.023
c 0.000, -3.908 3.175,-7.079 7.096, -7.079
c 3.919, 0.000 7.097, 3.168 7.097, 7.079
C 57.088, 20.356 56.274,22.119 55.003, 23.405 z”/>
</g>

<g id=”svg-textbox”>
<path
id=”text-backdrop”
fill=”black”
d=”M 5.30,50.00
H 94.68
V 90.00
Q 94.68,95.00 89.68,95.00
H 10.30
Q 5.30,95.00 5.30,90.00 Z”/>

<path
id=”shine”
fill=”#3F3F3F”
d=”M 14.657,54.211
h 71.394
c 2.908, 0.000 5.312, 2.385 5.312, 5.315
v 17.910
c -27.584,-3.403 -54.926,-8.125 -82.011,-7.683
V 59.526
C 9.353,56.596 11.743,54.211 14.657,54.211
L 14.657,54.211 z”/>

<g id=”svg-text”>
<title>SVG</title>
<path
id=”S”
fill=”#FFFFFF”
stroke=”#000000″
stroke-width=”0.5035″
d=”M 18.312,72.927
c -2.103,-2.107 -3.407, -5.028 -3.407, -8.253
c 0.000,-6.445 5.223,-11.672 11.666,-11.672
c 6.446, 0.000 11.667, 5.225 11.667, 11.672
h -6.832
c 0.000,-2.674 -2.168, -4.837 -4.835, -4.837
c -2.663, 0.000 -4.838, 2.163 -4.838, 4.837
c 0.000, 1.338 0.549, 2.536 1.415, 3.420
l 0.000, 0.000
c 0.883, 0.874 2.101, 1.405 3.423, 1.405
v 0.012
c 3.232, 0.000 6.145, 1.309 8.243, 3.416
l 0.000, 0.000
c 2.118, 2.111 3.424, 5.034 3.424, 8.248
c 0.000, 6.454 -5.221, 11.680 -11.667, 11.680
c -6.442, 0.000 -11.666, -5.222 -11.666,-11.680
h 6.828
c 0.000, 2.679 2.175, 4.835 4.838, 4.835
c 2.667, 0.000 4.835, -2.156 4.835, -4.835
c 0.000,-1.329 -0.545, -2.527 -1.429, -3.407
l 0.000, 0.000
c -0.864,-0.880 -2.082, -1.418 -3.406, -1.418
l 0.000, 0.000
C 23.341,76.350 20.429, 75.036 18.312, 72.927
L 18.312,72.927
L 18.312,72.927 z”/>
<polygon
id=”V”
fill=”#FFFFFF”
stroke=”#000000″
stroke-width=”0.5035″
points=”61.588,53.005
53.344,92.854
46.494,92.854
38.236,53.005
45.082,53.005
49.920,76.342
54.755,53.005″/>

<path
id=”G”
fill=”#FFFFFF”
stroke=”#000000″
stroke-width=”0.5035″
d=”M 73.255,69.513
h 11.683
v 11.664
l 0.000, 0.000
c 0.000, 6.452 -5.226,11.678 -11.669, 11.678
c -6.441, 0.000 -11.666,-5.226 -11.666,-11.678
l 0.000, 0.000
V 64.676
h -0.017
C 61.586,58.229 66.827,53.000 73.253, 53.000
c 6.459, 0.000 11.683, 5.225 11.683, 11.676
h -6.849
c 0.000,-2.674 -2.152,-4.837 -4.834, -4.837
c -2.647, 0.000 -4.820, 2.163 -4.820, 4.837
v 16.501
l 0.000, 0.000
c 0.000, 2.675 2.173, 4.837 4.820, 4.837
c 2.682, 0.000 4.834,-2.162 4.834, -4.827
v -0.012
v -4.827
h -4.834
L 73.255,69.513
L 73.255,69.513 z”/>
</g>
</g>
</a>
</svg>
[/html]

Share