DEV Community: Mykal

Previewing Hidden Content in an Unpublished Shopify Theme

Mykal — Wed, 08 Jul 2020 19:22:42 +0000

What's the Issue?

You're working on a brand new product for your Shopify store, it's set to unavailable and you & the team are working on a launch for it later this month.

You're also working on a new theme that will launch alongside your product, how are you supposed to see how that new product looks with your new theme?

You can preview the new product, but it opens in the published theme, not the new theme you're working on...

So do you have to make your new product available and just hope no one notices? 😥

The Solution!

Thankfully, there's a way we can get around this!

Open your Shopify admin to your hidden product, and click "Preview" at the top of the page
From the product's preview page, copy the part of the URL that looks like this: /products_preview?preview_key=your_key_goes_here
In a new tab, open the new theme you're working in as a preview.
In the URL bar, paste the portion of the product URL we copied earlier. your new URL should look something like this https://mystore.com/products_preview?preview_key=your_key_goes_here.
Hit enter and you should be able to preview your hidden product in your new theme ✨🎉

Not just for Products

This will work for hidden pages, and articles as well! Which is great when you're working on a landing page or a fancy new blog template!

This has been a huge pain for me when working on themes, and I just recently found this quick fix so I thought I'd share! Hopefully it helped you as well.

Thanks for reading 👋

ZEIT Hackathon 2019: My First Server-less Hackathon

Mykal — Thu, 06 Jun 2019 18:39:10 +0000

This past weekend, I participated in ZEIT's first ever Hackathon. It was a 48-hour event that was centred around building an integration for ZEIT's "now" server-less hosting platform. I had never worked with Now before, but I love a lot of ZEIT's other software (Next.js & Hyper.js) and I figured this would be a good opportunity to learn about Now through building a little project with it.

This post is going to go over what I built, what I learned, and some takeaways for my next Hackathon.

What I Built

I was initially having trouble coming up with an Idea for the hackathon. I spent some time in the event's slack looking at ideas but nothing really came to me. So, by the recommendation of the event organisers, I decided to build an integration with one of their Sponsors: Twilio!

I ended up putting together a dead simple token manager integration that allows users to manage multiple Twilio authentication tokens and accounts across different deployments! When looking through the docs, I noticed that Now allows you to pass in environment variables into your projects through their API. I used this feature as a starting point, and after 48 hours (only around 16 hours of which I was actually coding) I had my integration!

In the end, all my integration really allows you to do is pass in some Twilio Credentials as Environment Variables and manage which projects have access to which credentials. If you use Now you can check it out at its Now Marketplace link here or check out the documentation at twilionow.tech

What I Learned

Server-less is Awesome (most of the time)

Now is a server-less hosting platform. At the start of the Hackathon, I knew Now was a server-less deployment but I didn't understand what that meant in practice. Essentially, all of your Now projects are broken into a bunch of cloud-based functions called "AWS Lambda" functions. This has a few major benefits:

Cost Savings: Apps only use compute-power when they're in use, greatly reducing the cost of the app in the first place* Crazy-fast Deployments: Apps literally take 10-15 seconds to go from local to live with Now which saves time and overall just feels really cool.
CDN without the work: Now allows you to duplicate your app across their servers which are placed throughout the world with a few lines of config (seriously it's crazy simple, see here)

While all of this stuff is super cool, I did encounter a few issues with Now and Server-less:

Things don't work as expected: when trying to build out an example Node.js/Express app to demo my integration, I quickly realized I couldn't build just any old express app. I would need to have a lambda based setup where each endpoint is in a separate .js file, among other things. Building my example app took way longer than expected because this setup was so much different than what I was used to.

I Need Clean Code

Despite the event's hackathon name, I felt like the hackier I was in my integration, the less efficient I became.

After the first day of programming, most of my code was still in one file and it felt like an absolute mess to work in. Every time I had to make a change it would take a minute to even really understand what my code was doing. When I finally figured it out, I would often have forgotten what I was even trying to do in the first place, leaving me at square 1 all over again.

At the start of day two, I did some hardcore code cleaning. I moved all my template literals (which I was using to build the integration's UI) to their own component-based files, which I then imported into pages, and broke my app logic into a few separate files as well.

This not only saved me probably 1-2 hours of programming time on day 2, but it also made me feel much better when writing code, which allowed me to really get into my code for longer.

This might not apply to anyone, but I personally wished I would have just started a little more organised and known from the start I need a (relatively) clean codebase to be efficient.

Takeaways For The Next Hackathon

Read the Documentation Beforehand

The ZEIT integration platform has awesome documentation. It's super in-depth, well-organized, and has guides and open-source code as examples. That said, I didn't spend nearly as much time as I should have in the docs before the event. I often found myself breaking my integration, writing a fix, and testing it, just to go to the documentation and find an awesome, well-explained example of the exact thing I was trying to build.

This all could have been solved with a solid once-over of the docs the week before the event. Skimming through the documentation would have maybe taken an hour to do and probably would have saved me at least two or three hours of time spent rewriting my code.

Minimize Distractions

Admittedly, I didn't spend nearly as much time as I wanted to on this Hackathon. Despite it being a 48-hour hackathon, I probably spent less than a day of actual focused time working on my integration and the final product reflects that. I didn't adequately prepare for the event or let the people around me know I was going to be AWOL which often pulled me away from VS Code, and into the real world for long periods of time. For example:

Saturday afternoon I had a friend come over to hang out.
Saturday night I went out to a movie I'd promised to go see.
Sunday night I rushed to finish my integration so I could go out for a previously planned date.

If I could do it over again, I would either go all in on the hackathon or just have my normal weekend. By trying to mix the two, I took away time and from my integration, and ended up being either late or stressed out when hanging out with friends & family.

Conclusion

Overall, it was a great weekend!I learned about server-less, made some friends in the Hacakthon's slack, and got another opportunity to grow as a Developer!

Also, I want to give a huge thanks to the Whole ZEIT team for throwing this event. They were super encouraging, answered a bunch of my questions and made participating online a blast!

Preparing for Battlesnake

Mykal — Thu, 04 Apr 2019 20:26:53 +0000

This year's Battlesnake competition takes place on March 2nd 2019 at the Victoria Convention Center and I've got quite a bit of preparation to do before then.

But Wait a second... what's Battlesnake?

In the organizer's words...

Battlesnake is a fun way to practice programming and learn new skills. Groups and individuals build AI bots to play the game Snake using modern, real-world technology. Read the docs, deploy your snake to a live web server, and join other programmers trying be the last snake slithering. (Battlesnake.io)

If you've ever played the classic game snake on your phone or computer, you know exactly what a battlesnake arena looks like.

Just imagine instead of one snake on the screen, there are 4-5 of them. All fighting for the same food and space with the best programmed snake taking home a cash prize and the esteemed title of Battlesnake Champ.

Sounds fun right? I thought so! If you're still not convinced, here's a video

My Goals for Battlesnake This Year

Since I've got the fundamentals down, I'm taking battlesnake as an opportunity to spend some time sharpening my pathfinding skills and programming a snake that can at least sort of stand on its own two, metaphorical, legs.

While, in a perfect world, I'd be spending hours on this a night, I've got midterms the week of and the week after battlesnake so I'm going to have to prioritize a little bit.

Priority #1: Self Sustaining

This is the very bare minimum I'd like to get my snake AI to.

At this level my snake should be able to:

Not kill itself by running into its own body / other snakes / walls...
Be able to find a route to food in the area and determine whether it can do so before any other snakes.
As a result of 1 + 2, be able to be self-sustaining if it is the only snake in an arena.

Priority #2: Basic Pathfinding

This is where I realistically feel that I should be able to get the snake to before the competition.

At this level my snake should be able to:

Do everything that a self-sustaining snake could do
Have some sort of intrinsic goal. For example, always be on the move for food, or always be trying to trap other snakes.
Have a basic weighting system where the snake can determine which move would be best and act on that.

Priority #3: Getting Fancy

These are the things I think would be really cool to play around with, but doubt I will actually get to implement.

At this level my snake should be able to:

Do everything a Basic Pathfinding snake could do.
Be operating off a trained neural network. Most likely something built through OpenAI or Clarifai
Capability to autonomously improve or "learn" after each match through the use of machine learning.

I've never used any AI tech beyond using some very simple pre-trained facial recognition models. This would be a tonne of fun to play around with, but may be a little too far out of my wheelhouse to be achievable in two weeks.

Closing Thoughts

This is actually my second year attending BattleSnake. I first attended in 2017, my first year of university. I don't think my team and I could even get the snake to change directions. We were all pretty inexperienced developers at the time and had never worked with, or even heard of, tools like Node.js or Heroku.

Despite our lack of knowledge, We had a tonne of fun! The event's atmosphere was awesome and I learned more about real-world development in that 5-6 hour event than I had all year in class. I remember feeling so proud that we even got our snake to respond with a 200 to the server.

It's crazy to think that just two years ago I knew absolutely nothing about any of the technology I use on an almost daily basis today. I sometimes feel like I'm constantly losing a race with technology; Like I can never learn enough, fast enough, to feel caught up and knowledgeable.

That said, Being able to look back on my skills in 2017 and contrast them to my skills today through the lens of something like battlesnake has really inspired me to prove to myself just how far I have come in that time. I can't wait to start this years snake!

This post was originally written on February 18, 2019, for my personal blog. My snake AI went on to make it into the second round of the beginner's bracket 🎉! I’ve definitely made progress and I’m looking forward to making even more, come next year’s Battlesnake.