logo

Mead.Design

CodeSnap Web Application

Introduction

This project almost did not come into existence. There are lots of tools out there for collecting and cataloging code snippets, and I looked at several of them as alternatives to making my own. Given the amount of time and effort it would take to make my own code snippet library generator, I was more inclined to make something that was already available work for me and my students.

However, nothing did exactly what I wanted, so after a few fits and starts, CodeSnap was born.

codesnapintro

The Challenge

When I teach web design and development classes, I often need to get code snippets to students so we can speed past the basic parts and get to the heart of the lesson.

Most of the code snippet tools available are for developers to manage and keep track of their own code snippets. It seemed reasonable that I could make one of those systems work for me, but I just found the experience unsatisfactory.

What I really wanted was a way of creating an individual file to go with an individual project that had snippets students could copy and paste from.

It was fairly important to me that this file be entirely self contained, so that I could give it out with other project files, or send it by email, and the students could just open it in the browser and use it without any fuss.

Solution

First, I should let you know this web application is currently incomplete. However, it works well for my purposes and I have been successfully using it since 2014 with students. If you want to give it a try, you can download it and install it from GitHub. It runs great on localhost, or you can put it on your own web server.

Probably the best way to get started in understanding this project is to see the final result.

Essentially, I enter code snippets into a form, and then when I have all the snippets I want to include, the application generates a file that I can download and give to my students.

reLEAFsnippets

The image above shows what a finished file might look like, or you can see a live example.

The foundation for this project is this excellent sitepoint article about best practices for code snippets.

I manually built a snippet or two using his files as a template and quickly realized that building snippets manually would take forever.

However, building a little PHP application would not be so difficult.

Syntax highlighting was another challenge. I didn’t want to have to manually highlight different bits of the code, and so the Google code-prittify library came to the rescue.

The documentation for the library is terrible, but after some experimentation, I got it to work the way I wanted it to.

The web application allows you to create a title, add tags and an intro to the snippet if you want to provide some explanation. The caption goes at the top of the snippet container, then comes the snippet itself.

The default syntax highlighting works well more most the languages I use (HTML, PHP, JavaScript), however, CSS is a bit different, so I added a option that you must select to make CSS work properly.

You can then add another code snippet, or generate the file if you are done. When you generate the file, the data in the various fields goes into a database, and PHP actually makes a file and saves it into the repository folder.

The nice thing about these files is that they are entirely self contained. Each file includes all the HTML/CSS and JavaScript necessary to render the snippets properly, so if you want you can attach the file to an email and send it to someone, or deliver it in any number of ways and it will just work.

codesnapFront

Featured Projects

  1. ZAP Creative

    Responsive Design, HTML, CSS, JS, PHP and WordPress

  2. Animal Shelter

    Responsive Design, HTML, CSS, JS, PHP and MySQL

  3. Experimental JavaScript

    Responsive Design, HTML, CSS, and JavaScript

  4. KITTENS FOR SALE!

    HTML, CSS & JavaScript focusing on jQuery plugins

  5. Syllabus Generator

    PHP & MySQL Web Application

  6. CodeSnap Web Application

    PHP & MySQL web application

More Projects

  1. 4.23 Microsite

    Experimental JavaScript Microsite

  2. Audio Space

    HTML, CSS & jQuery

  3. Bttrfly Productions

    HTML, CSS, JS, & WordPress

  4. Desktop Repainter

    HTML, CSS & JS

  5. Bluephant Dental

    HTML, CSS, & JS

  6. Zen Music Festival

    HTML & CSS

About William Mead…

William Mead Photo

This site shows some of my front-end design and development work and shows how I use these projects to teach students about those same topics.

Find me on these networks

Professional Qualities

  • Enthusiastic about teaching, learning, managing projects and building products for the web.
  • Deeply creative and always playful. Frequently engrossed in solving complex puzzles.
  • Thoroughly engaged in the design and web development industries.
  • A visual learner with an analytical mind.
  • Introspective and always striving for improvement.

Skills

I am particularly good at bending CSS to do my bidding, and I really enjoy creating custom interactivity with JavaScript. I am always excited about new problems that need to be tackled.

Contact Me…

I look forward to hearing from you. Please contact me using the form or directly by email or phone.

bill@mead.design
530-219-8998

Your Name (required)

Your Email (required)

Subject

Your Message

Anti Spambot Question