Tuesday, April 30, 2013

Wasting time and php

Today I wasted majority of my time fixing the like button.  The dislike button worked fine but it was just the like button.  I worked to solve the error for a good hour and a half before I figured that I was missing a fucking single quote after action_like in my GetLikeDislike function  Why did it take so long to figure this out?  Because I never remembered even touching that function and originally thought it was something in the javascript file.  Also I was watching a movie at the same exact time (I get distracted easily).  Anyways, here's that now complete (and working) function: http://pastebin.com/Nwe613zj

Now that I got that out of the way I ran into another problem.  I need to somehow pull the author id from the post that a user likes to give points/exp to the poster using jquery.  How would I go about this though?  Because there's no user id in the markup that I can pull using jquery.  What I could pull however, was the author's username by doing the following (btw post_id is defined ahead of this and returns either "like-[ID]" or "dislike-[ID]" where [ID] is a number like 4.):
var user_id = jQuery("#" + post_id.replace("like-", "post-") + " .author a").text();

Once I pull the username, when the POST request gets sent to the php file I can convert it to the user id by doing (thanks to: http://wordpress.org/support/topic/getting-user-id-from-username):
$user = get_userdatabylogin($user_id);
var_dump($user);
echo $user->ID; // prints the id of the user


Currently I'm stuck on this next issue. My original idea was to create a new php file (levelpoints.php) just to handle the POST data with the user_id, instead of post_id, to update the level_points db. I've found that if I do this though I would have to rewrite the loops in the likedislike.php that check if the user is logged in, hasn't already voted, etc. So this means that I'm going to rename likedislike.php to handlelikedata.php because it seems more general than just covering the like and dislike db. It also means that I'm getting rid of the levelpoints.php.

Now that's out of the way I'm adding the user_id to the data getting sent.  So far my handlelikedata.php looks like this: http://pastebin.com/VM8YxKt4

For whatever reason the success part of that code that's supposed to display the status messages is not working.  I'm not sure why but I think it might be another simple fix.  It's 1am now though and my brain is too far gone to even try looking for that solution.  Hopefully I can finally finish this damn system tomorrow and just focus solely on styling.

Monday, April 29, 2013

SQL?

Looking through the functions for the like/dislike plugin I've found I don't know nearly as much SQL as I should know.  I have an O'Reilly book for beginning SQL but I never cracked it because I thought I could just figure how it works and code it without having to read anything.

Well here's the original query from the GetLikeCount function:
"SELECT SUM(value) FROM {$wpdb->prefix}memepls_like_dislike WHERE post_id = '$post_id' AND value >= 0"

Now that I've typed it out I understand it for some reason even though I couldn't before even after looking through the http://techonthenet.com/sql/ site.  The SELECT SUM(value), sums up all the numbers from the value column (which is either 1 or -1).  The FROM {$wpdb->prefix}memepls_like_dislike, just points to the database you're pulling the data from.  And the WHERE post_id = '$post_id' AND value >= 0, makes sure that it's pulling all the values from that certain post ($post_id is defined in the functions parameters) and makes sure that it only pulls all the 1s and not the -1s.

For the GetLevelCount, GetExpCount, and GetPointsCount functions, I simply need to select the value for each of these columns and make sure it's from the correct user ($user_id).  So that means for grabbing the current level I would do:
SELECT cur_lvl FROM {$wpdb->prefix}memepls_level_points WHERE user_id = '$user_id'

Alright, now that I got that I got the queries to pull things from the db I need to make some queries to update the row for each user's points column when:
  • The user levels up.
  • The user gets a like on his post.
    • User get's 20 for each level up, and 3 for each like.
I need to update the exp column when:
  • The user gets a like on his post.
  • The user gets a dislike on his post.  (You can lose exp for posting gay shit unlike with points)
  • The user posts something.
    • User get's 10 exp per post, 3 for each like, -3 for each dislike.
I need to update the level column when:
  • A certain amount of user exp is achieved.  So I'd want to use the getExpCount function right after updating the experience column.  Then if that number of exp is over a certain amount determined by the leveling algorithm it will update the level to a higher amount.
    • Leveling algorithm is simple and works like so: you multiply the amount of exp it takes to achieve the previous level by 1.5 and strip any decimals.
    • For example, if it takes 10 exp to get to level 1, it takes 22 to level 2 and 33 to level 3.
Now that I've got all these thoughts I had sorted I can finally put them into code.  I'm keeping this post just for my SQL though (I know, it's surprising I'm even bothering with organization), so I'm just going to write out the queries I'll use for updating.  I'm also going to write the queries to create a row if there isn't already one for that specific user.  The php will come either tonight or tomorrow.

INSERT INTO {$wpdb->prefix}memepls_level_points SET user_id = '$user_id', cur_level = '$cur_level', exp ='$exp', points = '$points'
This will be used in a separate function that's called if the users stats aren't in the db already.

UPDATE {$wpdb->prefix}memepls_level_points SET user_id = '$user_id', cur_level = cur_level + '$cur_level', exp = exp + '$exp', points = points + '$points'
Again, this will be used in a separate function to update the cur level, exp and points.  Both of these functions will be in the functions.php.

A separate php file will need to be made to use these functions and to point the javascript file too.  I'm too tired to focus on this any longer so the php will come tomorrow.

Oh and lastly, this is the $wpdb var explained: http://codex.wordpress.org/Class_Reference/wpdb

Useful css3/css properties

Double Borders
Today I relearned to make some nice css3 double borders with the following article: http://css-tricks.com/snippets/css/multiple-borders/

The article goes on to explain how you can use either the :before :after selectors or simply use box-shadow.  For a more thorough explanation on the box-shadow property I visited: http://www.css3.info/preview/box-shadow/

And on the too pick hsl colors (because the css-tricks guide uses them) I used: http://hslpicker.com/

Here's an example:
.site{
-moz-box-shadow:
0 0 0 1px hsl(161, 0%, 77%),
0 0 0 2px hsl(184, 0%, 17%);
-webkit-box-shadow:
0 0 0 1px hsl(161, 0%, 77%),
0 0 0 2px hsl(184, 0%, 17%);
box-shadow:
0 0 0 1px hsl(161, 0%, 77%),
0 0 0 2px hsl(184, 0%, 17%);
}

Gradients
To create a background gradient I found I just have to use this site to select my colors and I can copy and paste the code into my stylesheet: http://www.colorzilla.com/gradient-editor/

The css they give you is compatible with all browsers which is great!

Rounded Edges
I've done this effect numerous times but always forget the syntax so I'm finally writing this one down for my horrible memory.  So for rounded corners I only need to put this:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */

That's compatible with majority of the browsers and I can get more details on this from here: http://www.the-art-of-web.com/css/border-radius/#.UX8BMbXOmic


I might be using a border on the site and buttons.  I'll probably make use of the rounded edges and gradients on buttons.  That just about covers the new css stuff I learned/wrote down today just to remember.  This is going to be useful to me so I'm sure it'll help out any of you reading.

Sunday, April 28, 2013

Structure of the _s theme stylesheet

This is the structure I'm using for the stylesheet for the memepls wordpress theme which works off of _s theme from themeshaper.  The title of a section looks like this:
/* =Title Here 
----------------------------------------------- */

There's also a couple sub-sections that look like this:
/* Sub Section */

Now that that's established I'm going to post all of these and go through all of them and what should be posted under them.

/* =Global
----------------------------------------------- */
The css under here goes throughout the entire theme and doesn't change no matter the page.  So not very many ID or classes get styled in here unless they are in every page like .site for example.  Mainly fonts, borders, margins, and colors are styled for elements in this section.

/* Headings */
In the global section and is where the css for hr, h1, h2 or any other type of global header can be found.

/* Text elements */
In the global section and is where the css for paragraphs, unordered and ordered lists, textareas, code tags, and inputs are set.

/* Links */
In the global section and the area where links and all of the links actions (a:hover, a:focus, etc.) are styled.

/* Alignment */
In the global section and where .alignleft, .alignright and aligncenter are given their display, float, margin, and clear properties according to their name.

/* Text meant only for screen readers */
.assistive-text {
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}

I have no clue as to what this css does.  I might look it up later if I finish everything else quickly but as for now I'm just gunna leave this in hopes that some reader will do the research for me ;)

/* =Menu
----------------------------------------------- */
As you may guess, the menu (navbar) is styled in this section.  You'll find the .main-navigation tag a lot.  There's a bunch of empty css blocks in here like this:
.main-navigation ul ul li {
}
.main-navigation li:hover > a {
}
.main-navigation ul ul :hover > a {
}
.main-navigation ul ul a:hover {
}

Which I guess are supposed to be filled in by me once I add child menus and stuff.  It might be a smart idea to start from scratch with all of this so I understand more of what the fuck is going on (I get confused easily).

/* Small menu */
In the menu section and for the mobile menu.  This is set to none because the page is originally too big but as the page gets smaller to say the size of a phone screen, @media only screen and (max-width: 480px){}, I can display the menu.  All the styling work still needs to be done on my part.

/* =Content
----------------------------------------------- */
This is where all the css concerning the content of the page belongs.  .hentry would be a post, .entry-content is where the post's paragraph can be found inside, .entry-meta contains the post date, etc.,  .byline is used on span that wraps around the line of text that says who made the post, and the others can't be found on the page at the moment.

/* =Asides
----------------------------------------------- */
Not sure what the .format-aside is for but any .entry-title underneath it on the blog and archive page don't get displayed.  The aside tag is used in the sidebar though so css for the sidebar should go in here.

/* =Media
----------------------------------------------- */
The section where any images, videos or any other type of media should be styled.

/* Make sure embeds and iframes fit their containers */
Under the media section and where the css for embed, iframe and objects goes.

/* =Navigation
----------------------------------------------- */
Where the css for the next and previous buttons in the content section goes.

/* =Comments
----------------------------------------------- */
Any css having to do with the comments area goes in here.

/* =Widgets
----------------------------------------------- */
Section for styling widgets.

/* Search widget */
Under widgets section for styling the search button.  Currently it's just not displaying the submit button for the search box with:
#searchsubmit {
    display: none;
}


/* =Structure
----------------------------------------------- */
Imo the most important css, which gives us a two column layout when displayed on a full size computer screen (will turn different if browser is shrunk a lot).

/* =Mobile
----------------------------------------------- */
Added this in myself and is where the css for when the browser shrinks goes:
@media only screen and (max-width: 480px) {
#secondary, #tertiary, .site-footer{
clear: both;
width: 100%;
}
}

@media only screen and (max-width: 959px) {
#secondary, #tertiary, .site-footer{
clear: both;
width: 100%;
}
}

So when it shrinks the #secondary (sidebar), #tertiary (underneath), and .site-footer will drop underneath the content and have their own row.

And that's it for an explanation.  Here's the complete current css so anyone reading might kind of understand: http://pastebin.com/ASG6rJTZ

Now that I've gone over everything I feel much more confident about finally styling the theme and putting everything in the proper section/sub-section.  I should probably create new ones as needed too.  Well that's it for this post.

The cost of running websites

Now I don't have a job at the moment because I'm just concentrated on school and building up a portfolio to and a good job in the future.  Because I don't have a job though I really can't go on wasting it on stupid things like websites.

For codepier.com I spent $45 on the theme, $10 for the domain and $10 a month for hosting.  For all the other domains I've spent a total of $30 and $100 on more themes.  I've been paying for hosting from hostgator for about a year and a half now and it allows unlimited domains & emails.  Altogether this adds up to be $365.

I do work for majority of my summer and that amount is a good chunk of what I make.  The real problem is I make $0 of these sites because I don't have enough content to provide or aren't motivated enough to make that content.

With my meme site project (memepls.com), I can make plenty new content and users can post new content as well.  The only problem is having queers post spam but I have a good amount of irl friends willing to be moderators for me.  Looking back at all of this I'm making the decision of closing all my sites besides memepls, and downgrading to the cheaper hatchling plan that only costs $4 a month.  I know theres cheaper but this is probably the most reliable.  And I'm perfectly fine with running my personal blog on something free like blogger ;)

Saturday, April 27, 2013

Just for me

I merely started this to get my thoughts involving anything with a computer straightened out.  I find myself thinking about a million different things when I'm on the computer and unable to focus on a single task.  As soon as I get serious about one project or run into a wall I'll think of switching to a new thing.  I'm tired of this habit though and need to stop it.  Another issue I have is that I'll forget things I've learned a couple months ago and won't be able to find the online resource I used to learn it.  So for any readers out there this blog might be a slight bit useful to learn something computer related.

Currently I'm working on a meme website that's working off wordpress and is proving to be difficult at times.  Mostly because I'm not a strong php coder or really a strong coder in any language other than vb.net (which I've been scrutinized countless times for favoring so much).  My main problem at the moment is building a custom post type (for posting memes) that only allows the user to browse and upload an image, and post a small excerpt to go with it.  I was following this article: http://sicdigital.com/2010/07/create-custom-post-type-for-image-upload-wordpress3/

Step 2 in this tutorial makes no sense to me though because I don't know where to insert the dam code and probably aren't getting it because I suck with php (only really know the basics).  I posted a question on the article but I'm still waiting to hear back from the author.  Because I can't figure this stupid post format issue out I feel demotivated to even complete the css for the theme.  I'm currently also trying to picture a design for the theme based on the 9gag structure and themes I like off themeforest.  The theme base is _s theme from the themeshaper 2nd edition tut.  I've found that they organized the stylesheet in the theme and I'm going to try and figure out the structure of it so I can continue this organization.  One thing I need to do with my css/design is make sure it works for ALL browsers especially since this is a meme site.

I find majority of my time these days is wasted on that stupid game MapleStory.  I think the fact that people have actually earned some good money on this game motivated me to play it so much but the fact of the matter is that you need to: A) invest a lot of money into a character to begin with or B) get very lucky merching and make a lot of mesos quickly or C) get really good at making hacks for the game and sell those.  Otherwise it will take ages to get anywhere from scratch and waste time and money.  The whole hack making idea isn't all bad but I don't have nearly enough knowledge in C++/ASM to write really good ones easily.

So in some type of conclusion here are my short-term future plans so far:

  • Quit maple completely.
  • Figure out the structure of the css and post here about it.
  • If I still can't fix the post problem, try creating a design and coding it.
As for long term I have:
  • Become fluent in PHP & even better in js.
  • Become an expert in java (I'll be using it nonstop for college next year.)
It's 2am now and I have to get up in 5hours... fuck.  So I'm getting sleep and hopefully going to have any energy to get any of this done tomorrow.  I'll be especially drained since I've left all my homework for tomorrow too.  Oh and one more thing, I know this blog looks absolutely hideous, especially for a web designer, but this is just for venting/writing my thoughts down.  Looks aren't important at all here.