1 - 1
HTML5 Drag and Drop API

HTML5 Drag and Drop API

One of my favorite things about programming is that you almost always end up finding a better, more efficient way of accomplishing something. This means that you are always learning and always becoming better and what you do.

In the past, I have experimented with drag-and-drop, but never really needed to implement it in a large scale. I relied heavily on libraries and workarounds for very simple drag-and-drop tasks because I really didn’t understand it.

Recently, I revisited the HTML5 Drag and Drop API and gained a new understanding/perspective.

I was able to break down the process into some simple steps: make elements “draggable” in the HTML; add “ondragstart” and “ondragend” event handlers to the element being dragged; and add “ondragenter”, “ondragleave” “ondragover”, and “ondrop” event handlers to the element(s) things are being dragged over or dropped onto.

Using this basic idea, I recreated a faux Windows 95 desktop with the simple function of having folders that can be dragged and dropped into a recycle bin. We are all so used to this type of functionality, that it is easy to miss how many things come into play — something that I gained new insight on during this project.

When dragging a folder, it’s opacity is changed to show that it is actively being targeted. Then, when the mouse (still holding the folder) moves over the Recycle Bin, the text highlight changes to show the user they now have the option to do something with the folder and the Recycle Bin. If the user drops the folder outside of the Recycle Bin, the opacity returns to normal; if they drop it on the Recycle Bin, the folder is hidden or removed, the Recycle Bin changes to show that it is full, and the text highlight returns to normal to indicate that the action is complete.

 

UPDATE: I realized that I wasn’t actually removing the folder elements when dragging them into the Recycle Bin, I was just changing the opacity to 0%. This still allowed for the (now invisible) element to be dragged. I’ve since updated the code to remove the element completely.

I also found that the folders couldn’t be dragged in Firefox. Thanks to the information found here, I was able to resolve this by using the setData method of the dataTransfer object.

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail
Might Be A Racist

Might Be A Racist

Using a modified template, PHP, and mySQL, I threw together a small site as a quick side project.

While I approach the subject with humor in the website, I also aim to demonstrate how common racism and bigotry is, even in our public figures. In many cases, prejudice is spread unintentionally, but the damage is still there and the root cause is still something that we should be making ourselves aware of and fighting against.

On each page load, a name is randomly pulled from the database along with a link to an article about a time they demonstrated racist behavior.

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail
El Gallo Bravo #2

El Gallo Bravo #2

In an effort to build up my portfolio, I have been taking suggestions from several different online resources on the types of projects I should can work on. One that I thought would be fun was to make a website for my local taco place.

Now, I live in Chicago (in an especially Hispanic-populated neighborhood), so there is no shortage of great taco joints to choose from. Something about the name “El Gallo Bravo #2” really grabbed my attention, though. It also doesn’t hurt that their food is amazing.

My challenge to myself on this one was to see how quickly I could create a website that was unique and would satisfy a client’s needs. I created the site in a day using an existing template, which I modified. The images and graphics are stock, and the slides at the bottom are from a plug-in. The majority of my time spent was transforming the non-responsive design into a responsive one.

Overall, this was a fun little project that reminded me how not every website needed to be a months-long endeavor.

Check it out here.

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail
Halloween Hangman

Halloween Hangman

Halloween is just around the corner, and it is one of my favorite holidays! Who doesn’t love to be spooky?

Some time ago, I had decided to work more with the <canvas> element in HTML5, but I wanted to do something other than create different colored rectangles, circles, and polygons. I decided I wanted to make a simple, but fully realized game demonstrating some of the flexibility of the <canvas> element.

Halloween Hangman is a typical game of hangman using spooky words about the holiday. I used vanilla JavaScript to create and interact with the different canvas elements, which include all of the letters and shapes in the orange part of the web page.

The game is simple, but a fun little distraction, so feel free to check it out!

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail
Custom Blog

Custom Blog

In 11th grade, I was elected Historian of our school’s Spanish Club. This was great for me, as I was very into photography and had already started getting into web design. Meeting dates and times were usually written in the Spanish classroom, however, which meant that everyone had to remember to stop by and check the board to make sure they didn’t miss the next meeting.

This lead to me researching a way to easily store, get, and modify information for a website. I found that the best solution for me was PHP and mySQL. Since then, I have used PHP to create blogs, plugins, small CMS systems, forms, photo galleries, and many more projects.

My most recent project was a simple blog with a minimal design using HTML5 semantic tags. The blog pulls from a mySQL database and lists posts from newest-to-oldest. It also has a Recent Posts section, Archives (ordered by year and month), and an admin page where posts can be created, modified, and/or deleted after the administrator logs in.

While I would almost certainly not recommend this as a solution for a client who wants me to make them a blog (even my own site uses WordPress for this), it is a solid demonstration of the power of PHP and mySQL.

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail
DnDMagic.com – Dungeons & Dragons Spell Reference

DnDMagic.com – Dungeons & Dragons Spell Reference

DnDMagic.com started off as as a personal project, which I later decided to make public so that others could make use of it.

I wanted to create something I could spend a lot of time on, and I realized the best way to do that was to start with something I really enjoyed. Thankfully, I’ve got a huge nerdy side and had recently had some trouble looking up spells for a D&D character I was building. The light-bulb lit up, and D&D Magic was born.

This is my first real experience using the very popular Bootstrap framework, and I really loved working with it. This is also the first site that I decided to include advertisements using Google Adsense and Google Analytics. I regularly monitor my page views and have already made changes to improve the site based on that data.

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail