I had the pleasure of teaching a workshop at HackBCA’s Imagine 2018 event for a group of High School students in Hackensack, New Jersey on Sunday afternoon. I was very impressed with their engaging questions and most of all their results!
https://imagine.hackbca.com/workshops/
I’ve taught workshops around the world on various topics. While they’ve often been covering subjects of a more challenging nature, the end results were usually less impressive than what we achieved in this hour-and-a-half session on Decentralized Web Development with Docker, Nginx, and Filestack. I think that’s because the tool chain we used in this workshop was leveraging so much power behind the scenes with such a simple set of steps to implement. There were somewhere between 15-20 or so students at this event. I’ll recap what we did together here.
What the Students Did
We discussed decentralization in several areas of web development, including the shift from centralized servers to cloud clusters, the change in strategy from SVN to Git, and the power of unifying disparate development environments through Docker.
The students downloaded and installed Docker on their laptops, and we all ran the hello-world-nginx image from the official distribution via Kitematic. Next, we mounted the internal image volume to a folder on our laptops, and made a simple edit to see a change in the index.html page.
With all of that mental and technical preparation, we were ready to implement Filestack’s file picker and API in our pages, and it went fast!
We simply added the following line to the head of our index.html file in Docker:
<script src="https://static.filestackapi.com/v3/filestack.js"></script>…and in the HTML body, we added this script:
<script>
var client = filestack.init('APIKEY');
client.pick({});
</script>(Where APIKEY was each of our individual API keys.)
That’s all it took to enable file uploads to our Filestack accounts! We tested by uploading files from the file picker running inside of our localhost on Docker’s Nginx image, then went to the Developer Portal at dev.filestack.com to view the uploads in the Content Browser. We right-clicked on the “link” icon in the Content Browser, and then pasted that URL into the src attribute of an image tag in our localhost index.html file:
<img src="https://cdn.filestackcontent.com/9ZahW8OGSoGs5A0azcjk" />We then changed the URL to utilize Filestack’s processing service to resize the images:
<img src="https://cdn.filestackcontent.com/resize=height:100/9ZahW8OGSoGs5A0azcjk" />You Can Do It, Too!
It was great to see how quickly the students were able to take control of their media, their development environment, and their decentralized workflow in this workshop. Practical, hands-on experience with real-world tools like this are so important to building confidence and excitement with new developers. If you’re thinking about a talk, class, or workshop that you can teach at your school, university, or local meetup, you may want to consider taking your group through these same steps!
David Liedle is Filestack’s Chief Evangelist. He works remotely in New York City with his wife and son, and their kitty. See more at https://DavidCanHelp.me/
Read More →