Let's Code X

Let's talk about code, baby.

[letscodex-blog]

Accidental Ideas #1

I was messing around with some OO JavaScript just sort of keeping my mind loose for a big test I have to take tomorrow, when from the haze of studying I accidentally did this:

<script> function obj(){  //the base object, on which all other objects depend to exist      this.size=0;  //These are just arbitrary traits      this.idea=1; } function plane(x,y){  //When this object comes into 'existence' by being instantiated it requires an obj. It has it's own qualities, but it doesn't exist without existing as a descendent of obj.      this.width=x;      this.length=y; } function box(x,y){   //this object is comprised of 6 planes, each of which have an associated obj. It, however, doesn't have an obj.  It does not exist in and of itself, it only exists by virtue of the things that are defining it.  There's a metaphor here, is what I'm saying.  I'd make it, but yours will be better.     this.sides=new Array(6);     for(i=0;i<this.sides.length;i++){         this.sides[i]=new plane(x,y);     } //    alert("ss"); } plane.prototype=new obj(); var t=new box(3,4); alert(t.sides[0].idea);  //See the sides all exist in that they have the traits of existing(the idea) alert(t.idea); //But the box object itself doesn't exist\lacks the traits of existence(the idea) </script>

Truer now, than when it was spoken.

[letscodex-blog]

jQuery is Your Friend #2 - Drop down menus from the moon!

Hello, and welcome.  Drop down menus, that slide smooth and beautiful with each click, can be produced so easily with jQuery that you're going to want to slap someone. 

$(document).ready(function(){     $("nav ul li").click(function(){//jQuery allows a universal element selection method.  This unifies all the "getElementBy" and "getElementsBy" functions in vanilla JS.  This same uses the DOM to isolate by parent/child relation         $(".hideAway").slideUp("250");//It's literally this easy.  This selects all elements with the class 'hideAway' and works to hide all the elements and resets the menu with every click.        if($('.hideAway',this).is(':visible'))$('.hideAway',this).slideUp("250");//The '.is' function checks a variety of different states and returns a boolen type response. In this sample it checks to see if the menu item is visible and hides it if it is, allowing a user to close the menu altogether by clicking on an open element.         else $(".hideAway",this).slideDown("slow");//this will open the menu item if it isn't already open.     }); });

These five lines of code are all you need to create a drop down menu on par with any website out there.  The only thing missing is your CSS, which is, of course, a matter of taste, but here's what I used:

.hideAway{     display:none;/*This removes the element from the document flow, and is changed with the jquery '.slide' functions*/     position:absolute;/*this prevents the opening of the menu items from altering the overshape of the page*/     background:#5162a1;     font-size:1em;     width:20%; } .hideAway li{     display:list-item;/*I use a css resetter, so this is necessary*/     line-height:2em;     padding-left:2em;     width:100%;     list-style-type:disc;     list-style-position:inside;     font-size:.75em; }

Well, I guess there's one more thing that's missing, so I'll include that as well:

        <nav>             <ul>                 <li>Catagory 1<!-- This is what the $("nav ul lu") is referencing-->                     <ul class="hideAway" id="menu1"><!--This is what the $(".hideAway") is referencing-->                         <li>sample 1</li>                         <li>Sample 2</li>                     </ul>                 </li>                 <li>Catagory 2<!-- This is what the $("nav ul lu") is referencing-->                     <ul class="hideAway" id="menu2"><!--This is what the $(".hideAway") is referencing-->                         <li>sample 3</li>                         <li>sample 4</li>                         <li>sample 5</li>                         <li>sample 6</li>                     </ul>                 </li>                 <li>Catagory 3<!-- This is what the $("nav ul lu") is referencing-->                     <ul class="hideAway" id="menu3"><!--This is what the $(".hideAway") is referencing-->                         <li>sample 7</li>                         <li>sample 8</li>                         <li>sample 9</li>                     </ul>                 </li>                 <li >Catagory 4<!-- This is what the $("nav ul lu") is referencing-->                     <ul class="hideAway" id="menu4"><!--This is what the $(".hideAway") is referencing-->                         <li>Sample 10</li>                         <li>Sample 11</li>                         <li>Sample 12</li>                     </ul>                 </li>             </ul>         </nav>

And there you have it.  A drop down menu that just needs to be jammed wherever you need it. Again, this is intended as a tutorial and will require you to format and style what's there.  I haven't uploaded the sample site yet as I've also included a bunch of Angular on there (angular and jQuery are, like, really good buds.  Angular even hangs out with jQuerys little brother, it's cute) but a simple copy and paste job should get you started.  Hope it helps if you needed it.

[letscodex-blog]

jQuery is your friend #1

jQuery is your friend.  jQuery only wants to help. Here is jQuery making a dice rolling page easier to make than it has any right to be:

The js file (jquery has been linked through google)

$(document).ready(function(){  //think of this as 'priming' jquery

         var ecc=0;

         $(".dice").click(function(){ //this handles user clicks on elements with a '.dice' class

             var type=$(this).val();//the 'this' keyword, in this case, isolates the specific element the user clicked and assigns its value(val) to type

             if(type=="reset"){

                $(".feedBack").text(""); $(".feedBack2").text("");//this resets if the reset value is clicked

                ecc=0;

             }

             else{

                ecc=Math.floor((Math.random()*type)+1);//this uses the value stored in type as the number of sides the dice should have

                $(".feedBack").text(ecc);//the text of any element with the 'feedBack' class is replaced with the value assigned to ecc. 

                $(".feedBack2").append(ecc+" : ");//the text of any element with the 'feedBack2' class had ecc's value appended to it.

             }

      });

});

The functioning (if somewhat ugly) page can be found HERE

I also added a very simple but effective responsive bit of code to make it a little more functional on smaller displays:

var wide=$(window).width();//This quickly and easily grabs the screen width in pixels. if(wide<1100)$(".dice").css({"width":"5em","height":"3em"});//checks the width and modifies the css of the .dice class elements appropriately

What's the advantage over vanilla JS?  It's not a big one in this simple application, but even here you can plainly see how easily the DOM is accessed and altered, and it only goes up from here.  jQuery only wants to help you, to hold your hand, to guide you to safe, less frustrating and verbose shores. 

What's the disadvantage?  I don't really see one at the practical level.  With the loading of jQuery itself the page does weigh a little more than it otherwise would, but the traffic on this will be so low that it would never be noticeable at any level.  Combine this with the incredibly short dev time to create it and you're really in a win-win scenario.

My intention here is to provide a starting point for people who are interested in learning jQuery.  It really is a wonderful framework that really aids in the creation of beautiful, dynamic websites.  Here are a few other links that might help a person get started:

The jQuery home page

W3 Schools walkthru

The API documentation

With those three links you have all the info you need to get started.  Trust me, once you start using it you'll never look back. 

[letscodex-blog]

To Tumbl or not

CMSs, am I right? What are we, infants? This is a womans/mans world, not some place for lazy lay abouts who wouldn't know responsive design if it came up and bit them in the @ symbol. Or maybe it's: what are we, masochists? This is a world of speed, alacrity, agility, portability; give yourself a break! Why spend more hours than you need to creating responsiveness and templates when the lions share of the work has already been done for you? Me, I'm kind of in the middle of the road, with a stubborn affection for the formers attitude. I like working out my code on a case by case basis, when I'm sitting at home and have all the time in the world to work out exactly what I want a page/site to do depending on the users platform. I do, however, recognize the usefulness of a CMS, or your bootstraps, or even your SASSes and LESSes. I was working for a charitable organization here in Toronto last week and had to covert a dozen or so PDF files into "email blasts" to be sent out to donors and members. They used the "Constant Contact" marketing system, which has a mass-email CMS interface built in. Despite some alledged questionable business ethics it was a pretty efficient system, and worked well for the task at hand. But it presented me with a dilemma, a conumdrum, that I'm sure many of you have found yourselves in: on the one hand I could code these emails more-or-less by hand and have that smug self-satisfaction that comes from doing that sort of thing (or at least that I get), or; I could slap that stuff in a template and feel like I was doing a job anyone in the office could have done. So I started with hand coding, feeling like at least this way they could justify paying an outside contractor for doing the work. On the first day it was fine; I only had three emails to produce, so I finished with time to spare. The next day I did the same thing, this time with maybe 5 more to produce. Still, finished, hand coded, working perfectly, and I was justifying my presence. The third day, though, is when it all fell apart. Possibly a dozen or so came in, all needing to go out that day, all of the same nature, but in different shapes. For two hours I worked by hand, pain-stakingly mapping out how each of the sections would be presented, making sure it was fully responsive, taking the time to do things right. Two hours passed and I realised I'd made a horrible mistake. I was going to need to use their templates, and I was going to have to understand and master them fast, like two hours behind fast. Luckily I was familiar with other CMSs and the paradigm as a whole, but I learned a valuable lesson: when you're a contractor, no one cares how it gets done. They don't care if you find it easy or hard, they just want results, and their not doing it themselves because they either don't have the time or are too intimidated by the idea of anything even remotely resembling coding. That is what we're selling; not expertize, but comfort. So are CMSs cheating your way to beauty? Yes. Are they stiffling inovations in design and layout? I think an argument could be made. Do you need to know how to use them just as well as you know how to hand code? You'd better believe it. Time is of the essence here!