DEV Community: JavaScriptErika

Cascading Coder's Creative Code Challenge: Emojis

JavaScriptErika — Fri, 15 Mar 2019 04:48:57 +0000

Hello all!

I invite you to participate in Cascading Coder's new creative code challenge!
What up pure CSS? I'm looking at you.

All the details you need are below:

🍇🙈❤️🥨🔥😅🐐🚀🐯🥑🏀🚖🕹️🛵🥕🐛🐌🍌🗑️🎉🐶🐱🐭🐰🐻

// Detect dark theme var iframe = document.getElementById('tweet-1106390901004357633-915'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1106390901004357633&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1106390901805498370-925'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1106390901805498370&theme=dark" }
🍇🙈❤️🥨🔥😅🐐🚀🐯🥑🏀🚖🕹️🛵🥕🐛🐌🍌🗑️🎉🐶🐱🐭🐰🐻

If you're curious about who, what, why, huh.... details are below (but should you want to stop reading, that's cool, everything you need to join in on the creative code challenge fun is above).

🌌Inspiration:🌌

One of the first reasons I began coding (2013) was because I wanted to animate and create interactive experiences! I thought anything that moved on the screen was awesome!

You have to admit, when you visit websites that have cute, subtle animations or full-immersive experiences with 3D objects - you may find yourself smiling, wow'd, amazed...all of the above? I certainly do. And if you haven't come across anything, let's fix that, check out anything from awwwards.

If you're like me, when you see these sites, you wonder, how in the hell did anyone make this. Digging around you find that maybe these sites use canvas, three.js, pixiJS, Greensock, or maybe a combination of them all. Still, to jump into something like an experimental site takes time, trial-and-error, experience, planned thought, and can feel daunting. I have also found that there is a steep learning curve and not a whole ton of resources (besides documentation)! Though, folks like 🚂Dan Shiffman from The Coding Train🚂 sure do break barriers by teaching fundamentals, having fun, and create interesting and creative projects with P5.js.🦄

By taking small steps towards the bigger picture, can you make progress. Creative code can be exhilarating experiences for the user. And, as a developer, creative code projects will absolutely assist you in your growth - CSS and JavaScript, all while demystifying that sector a bit, or taking the steps to have the courage to.

🎨Cascading Coders🎨

I founded a group called Cascading Coders back when I was enrolled in Udacity's Google Scholarship 2018 program. At this point, I had been developing for a few years now and knew that I would be among new developers who more than likely had not heard about creative code or what that is. I found it an opportunity to share and give back, and that's important to me because I wouldn't have the career that I do if it weren't for our community and producing tutorials for free. During that time, creative code challenges were often voted on from suggested topics from the community. There was quite a bit of momentum within that group! We held everything from dino to taco challenges with CSS and/or SVG, and it was a blast!

When the first phase of the scholarship ended, I brought Cascading Coders out into the world! Oooh look, on March 5th 2018! 'Ello World!

// Detect dark theme var iframe = document.getElementById('tweet-970743175454347265-109'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=970743175454347265&theme=dark" }

In June 2018, I landed my first developer job after 3 years of learning from non-traditional sources online! During that time (and really up until now) Cascading Coders took the back burner, because I needed to adjust to full-time work life and gym life (I began powerlifting around that time too...do you even lift bro? why yes, yes I do).

It's my goal now to grow the community and help developers to expand their portfolio...and just have fun while gaining more skills along the way. When is the last time you created something out of pure joy, with no motives other than to code for fun? I know with dev jobs, it can be the last thing you want to do when you get home or off of work. So I do hope, that this group can serve as a way to fall in love with code again, or pick up a new skill. I hope it can respark joy to learn in public, and that you explore an area fearlessly and make mistakes, and come out with something to share with the world.💜

About Cascading Coders:

We're a welcoming community of developers of all skill levels who have a love or interest in creative code. Even if you've never heard of it before or it sounds intimidating - this is the place for you!

From CSS web animation to experimenting with HTML5 Canvas, code is art and a means of self-expression that can be translated into effective UI/UX and bring about unforgettable experiences and interaction to the web. We curate content/resources, hold CSS/SVG art (creative code) challenges, and inspire each other to become better Cascading Coders!

Join us on Twitter and/or Facebook

Deploy a React App as a Github User Page with Yarn

JavaScriptErika — Tue, 29 May 2018 04:31:55 +0000

tldr; see Solution

I've been working on redoing my portfolio site, it's still a WIP - that being said here it is so far. I need to polish my portfolio section functionality in mobile view and some other tasks, and I need to refactor the code yet. I'd say it's about 90% done.

It needed a huge change from what it originally was to better reflect my skills since last year. I'm thinking a new redesign every year or so is a good time to keep reiterating and updating a portfolio. I went from using Foundation and jQuery to React, Flexbox, and p5js!

Speaking of React, before I began my portfolio, I wanted to make sure I could easily publish my project as a Github User Page! You know the one's where you can access a site as: https://yourUserName.github.io/ as opposed to a Project Page: https://yourUserName.github.io/yourProjectRepo. I always get the naming of those confused and forget them. Thankfully you can deploy as a user page or project page with the gh-pages package!

I got to the point of needing to test my site on mobile and had to do some digging around to find out how to deploy a create-react-app project as a User Page. If you're looking to deploy a Project Page with via create-react-app, check this documentation out here - there are a few subtle differences between deploying as a user page and project page that aren't completely covered for a project page.

I made the mistake of going through the above steps, not realizing there would be differences. I deployed my project!! My project was not showing up on https://javascripterika.github.io/, and my master branch had all of the build code. I wanted to push changes to my master branch, but of course, I'm not going to pull in the build code with 5k changes, and I can't push changes without pulling. Whoa, and now I have a random gh-pages branch? And my master is just showing up as all HTML (that big long red bar). WTF! Noooooo! Where is my JavaScripts??! 😭

The Solution

This tutorial assumes you have a working project and created your repo as username/username.github.io, are using create-react-app, and yarn

While in the current directory of your project:

$ yarn add gh-pages

In your package.json file, add

"homepage": "https://yourUserName.github.io/",

I added this right above "dependencies"

Still in your package.json file, add the following INSIDE of "scripts":

"predeploy": "yarn run build",
"deploy": "gh-pages -b master -d build",

Next, let's create a new branch...since master will contain our build files pretty soon and minifiy, bundle and get weird, we need a new branch that will serve as our source code - so we can make changes and we don't lose our beautiful human-able readable code.

While in the master branch, let's create our source branch... you can name it whatever you want.

$ git checkout -b source
$ git push origin source

Yay! Our source branch is a direct copy of our master. Now, on Github we need to update our Default branch, master, to our source branch...and that's also why we pushed it (so Github knows it exists).

Navigate to your repo on Github, and select "Settings".
On the left-side panel, click on "Branches".
Next, you're able to select your source branch and update it under the Default branch heading.

Now while you're in your source branch via your terminal, run:

$ yarn deploy

AND! That's it! Your master branch will contain the build code. Give it a couple of minutes and visit your site at https://yourUserName.github.io/

Making Changes

Let's say you want to make changes, your source branch acts like your master. So branch away using source, and merge your branches into source as needed. Other than what's mentioned below, you don't need to do anything else with master now.

Let's say I make some "testing" changes in source. I push it as usual to github:

$ git push origin source

Switch to master in the terminal, git merge source or whatever branch you want, switch to your source branch and and run:

$ yarn deploy

There you go! Those changes are published and deployed.

A Quick SideNote

I ended up deleting my gh-pages branch and retried the deploy, and it works just fine! I no longer have the big red bar of HTML as my Default branch is source and my changes work! All is good with the world now!

If a gh-pages branch is created via Github after you deploy, go ahead and delete it! According to Github, "User pages must be built from the master branch." If you navigate to your repo under Settings, and scroll down to the "Github Pages" section, you will see a grayed out option there under Source!

Update and Edit 5/30

I was working on my project and realized a MAJOR issue! More than likely MOST of us will use the user page as a portfolio page and link to our project pages via Github.

If you are using React Router, the Service Worker will cache your project pages & they won't direct correctly (all of my project pages appeared as a blank page a part of my portfolio only with its menu)...this will happen whether or not you click on the links to your project pages in your app or copy and paste it in your browser. Even if you do not use a project page in your user page, it will still be affected!

To fix this, you have to delete the service worker file and any references to it in your index.js file... & remember to clear your browser cache (a hard refresh doesn't suffice).