<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=0.5, minimal-ui">
<title>Car Sounds</title>
<!--Style Sheet link-->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!--Car image -->
<img src="images/car1.png" class="car" alt="car">
<!--Buttons-->
<a href="javascript:startCar();"><img src="images/key.png" alt="key"></a>
<a href="javascript:honkHorn();"><img src="images/steering-wheel.png" alt="steering wheel"></a>
<a href="javascript:peelOut();"><img src="images/nos.png" alt="nos"></a>
<!--Audio Files-->
<audio id="startCar" src="sounds/startCarA.wav" preload="auto"></audio>
<audio id="honkHorn" src="sounds/honkHorn.wav" preload="auto"></audio>
<audio id="peelOut" src="sounds/peelOut.wav" preload="auto"></audio>
<!--Javascript-->
<script type="text/javascript">
function startCar() {
document.getElementById('startCar').play();
}
function honkHorn() {
document.getElementById('honkHorn').play();
}
function peelOut() {
document.getElementById('peelOut').play();
}
</script>
</body>
</html>
Now whenever I want to work with audio/sound files, I have a quick example! Check it out, I hadn't used the transform properties in a while:
header .profile-image:hover {
transform: scale(1.2) rotate(5deg);
}
That makes the selected element spin around when a user hovers their mouse over it. HTML5 uses header, main, and footer tags, they're completely optional, the browser will function if we do not use them, but they help with screen readers and such.
So, there's a website I just found out about called placeimg.com, and you can get placeholder images for working on a project. That's great, it's faster than going to tinypic and uploading it! Man, I'm loving these back-to-basics courses, there's lots of gold scattered throughout!
Note that when entering separate paragraphs onto a page, they should actually be in separate paragraph tags, otherwise the browser will not honor the line break between the paragraphs.
Sometimes we want to link to an outside source, like twitter, for example, on our website, but if we want a new tab to open up, so that the user doesn't have to go back to see our website, we can add target:"_blank" like so:
<a href="http://twitter.com" target="_blank" class="social twitter">Twitter</a>
I'll use that on my portfolio links! And this will send you to the top of the page:
<a href="#top">Go back to the top of the page.</a>
I've used that before, it's useful on sites like wikipedia where pages can be lengthy. I'm working on a game now, called MASH (Mansion, Apartment, Shack, and House). check out this meta tag:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=0.5, minimal-ui">
<title>Futuristic MASH</title>
We used the opacity property to hide:
.hide {
opacity: 0;
height: 0;
}
And to show an element:
.show {
opacity: 1;
height: 100%;
}
You can give it a value of .8, for example, to do something in between. We worked with the Chrome dev tools to switch the CSS on a page on and off by clicking on the small square next to the styles. Again, the shortcut for the Chrome Deve tools is command option j.
We're working with .addEventListener now. Here's the code:
// Find the form on the page and attach a handler for when it's submitted
var form = document.querySelector('#mash');
form.addEventListener('submit', handle_submission); // Anytime the form is submitted, we want to call the function handle_submission
Check out the project:
It's a good base to start work from on my own version of it. I really like the flat design, I'm leaning towards incorporating that style into my portfolio page. I
I went over website validation (http://validator.w3.org/check), which helps with finding/preventing bugs. I learned about domainr (http://domai.nr), which helps you pick a domain name.
I went over vector versus raster today, it's preferable to do work with vector images, generally speaking, when thinking about how an image will display on screens of various sizes. I went over saving and optimizing graphics for the web.
I went over web accessibility. the www.spurapp.com site helps you test your site under various conditions for accessibility purposes. I went over screen reading software. There's different ways to make navigation bars, but the ul li method is preferred, according to the video.
When I want text inside a button to darken slightly, just change to color to a slightly darker version of the same color on hover. Neat trick.
I'm working on forms, tables, and charts and graphs now, in regards to accessibility. I learned how to make a VERY simple graph with ul li elements (instead of an li element, you use a span element then give it a width property and fill in the background).
I'm learning about front end performance optimization now. We explored the network tab in the Chrome Dev Tools. If you select disable cache, you can see lots of information that you can use to decide what to cut on your website to meet your performance budget.
We went over google page speed.
I learned about sprite maps, that's where we combine a bunch of smaller images/icons into a bigger picture for the request to the server, and then split them up in to individual pictures with our HTML/CSS.
I went over resizing images to have them load faster (including changing the type to SVG and using the "save for web" option instead of the usual "save as" option). Avoid using the @import rule as it's only loaded after the rest of the CSS file, and it also affects performance. When loading fonts, we should try to use hosted services.
Remember to link to the CDN at the top of EVERY page in the site (well, the pages that will use the content accessible via the CDN anyhow). We're able to reference an SVG sprite via the use of the <use></use> element, like so:
<svg class="social-icon">
<use xlink:href="#twitter-wrap"/>
</svg>
That targets the id of the image in the sprite, I think, but forgive me if I'm wrong because on this particular class, which is part of the front end track, it went into making a sprite map without first explaining SVG's, which I haven't really used too much yet, so it looks like Treehouse was a bit absent-minded in not including the SVG course, which they do have, earlier in the front end track so that when we get to the front end performance optimization class we're able to follow along on SVG's more confidently. That's ok, though, I'll take the SVG course sometime soon.
I learned about minification, which makes a more efficient copy of our code, with no spaces, for example. The closure-compiler.appspot.com site allows us to compile our javascript, while CSS minifier allows us to do so for our CSS.
I'm learning about the Chrome dev tools now. We can detach the dev tools from the browser, and we can drag and drop HTML elements around the page simply by dragging and dropping them within the dev tools (in the elements panel).
Command shift r does a hard refresh on the network tab (clear it first by clicking the anti sign). In the network tab, blue bars denote HTML files, green are CSS files, purple bars denote image files, orange bars denote font files, and other assets, like JavaScript, will be in other colors. The transparent part of the bar is the request time and the filled in part of the bar is the download time.
The "Sources" tab is great for playing with the CSS. If you make a modification, then hit command s, you can then right click and select local modifications and jump back and forth between any versions of your css saved in local storage (click on the arrow the click on the apply revision content link). You can actually right click and save as, if you're happy with your modifications, and save the changes right into your project (assuming it's stored locally).
You can right-click on the numbers on the left in the sources panel of the Chrome Dev Tools and set break points to stop your JavaScript from running. You can also pause the JavaScript when there are exceptions by using the pause button.
We explored frame rates (we want 60 frames per second, not lower) in the Timeline panel of the console. Gradients, shadows, and other complex effects can negatively affect this.
Now I'm working with the Profiles panel in the Chrome Dev Tools. You can select a profile, start, and then stop it, and it can tell you how much of the CPU the JavaScript on the page was taking up, for example (collect JavaScript CPU profile, then click on the CPU profile image after the test runs). A HEP snapshot shows memory distribution of the JavaScript on the page. The Profiles panel shows the CPU utilization of JavaScript functions as a percentage, and functions with a high percentage should be iptimized as much as possible.
The Audits panel will show you if there's any unused CSS rules and can help with other page optimizations. If you made your own CSS, this can be helpful, but if you're using a framework, then it's not as applicable, since there will be many unused rules. Note that generally, a width and height should be specified for all images in order to speed up page display.
On the console, we can target specific elements (other than clicking on them) like this:
document.getElementById("intro")
and
$("#intro")
This will select the element and show the code in the console. Up arrow and down arrow lets you scroll through your console entries. When you're entering JavaScript in the console and need to move one line down without actually submitting the code above, hit shift and enter, as this will prevent the code from submitting and allow you to continue typing in the subsequent line.
Here's a function that will allow you to run a timer in the console:
function MyLogTest(MyVar) {
console.time("Loop");
for(;;) {
MyVar++;
console.log("The value of MyVar is " + MyVar + ".");
if (MyVar == 8) { break }
}
console.timeEnd("Loop");
}
You can then call it by entering MyLogTest(1);
This will print out how long it took the loop to run.
In the console settings, we can set the console to log XMLHTTP requests.
I'm working on a mobile drop down menu project right now, with jQuery. Here's the version with a button:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id="menu">
<ul>
<li class="selected"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="events.html">Events</a></li>
</ul>
</div>
<h1>Home</h1>
<p>This is the home page.</p>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
// Problem: The site looks bad in smaller browser widths and small devices.
// Solution: To hide the text links and swap them out with a more appropriate navigation.
//Create a select and append to #menu
var $select = $("<select></select>");
$("#menu").append($select);
//Cycle over menu links
$("#menu a").each(function() {
var $anchor = $(this);
//Create an option
var $option = $("<option></option>");
//Deal with selected options depending on current page
if($anchor.parent().hasClass("selected")) {
$option.prop("selected", true);
}
//option's value is the href
$option.val($anchor.attr("href"));
//option's text is the text of link
$option.text($anchor.text());
//append option to select
$select.append($option);
});
//Create button
var $button = $("<button>Go</button>");
$("#menu").append($button);
//Bind click to button
$button.click(function() {
//Go to select's location
window.location = $select.val();
});
//Modify CSS to hide links on small width and show button and select
//Also hides select and button on larger width and show's links
//Deal with selected options depending on current page
And here's the version without a button:
// Problem: The site looks bad in smaller browser widths and small devices.
// Solution: To hide the text links and swap them out with a more appropriate navigation.
//Create a select and append to #menu
var $select = $("<select></select>");
$("#menu").append($select);
//Cycle over menu links
$("#menu a").each(function() {
var $anchor = $(this);
//Create an option
var $option = $("<option></option>");
//Deal with selected options depending on current page
if($anchor.parent().hasClass("selected")) {
$option.prop("selected", true);
}
//option's value is the href
$option.val($anchor.attr("href"));
//option's text is the text of link
$option.text($anchor.text());
//append option to select
$select.append($option);
});
//Create button
//var $button = $("<button>Go</button>");
//$("#menu").append($button);
//Bind click to button
$select.change(function() {
//Go to select's location
window.location = $select.val();
});
//Modify CSS to hide links on small width and show button and select
//Also hides select and button on larger width and show's links
//Deal with selected options depending on current page
Note the button has been commented out and we used .change() to capture the change in the dropdown menu! Oh, on a side note, I made 1st place on the Treehouse Leaderboards!!! Check it out:
I placed 1st of 14,032 students in number of badges earned this week! One user, Justan Human, placed 1st in number of points (I'm second right now in number of points), so we're both in first place right now, depending on the metric you use. So Cool!
Update: Justan now matched me in badges, so he retook first place. It's a battle!
Update: Shortly after Justan matched me in badges, I earned another badge, I've reclaimed my rightful place at the Treehouse Leaderboards Throne!
Coding has its light-hearted moments! :)
I learned about the jQuery .keyup() method which triggers after a keystroke. It's really useful for giving warnings about password lengths, for example, triggering a notice of minimum password length when a user focuses on a password input field, and making the notice disappear when the required password input length has been reached. Here's the example we worked on:
// Problem: Hints are shown even when form is valid
// Solution: Hide and show them at appropriate times
// Hide hints
$("form span").hide();
function passwordEvent() {
if ($(this).val().length > 8) {
// Hide hint if valid entry
$(this).next().hide();
}
else {
//else show hint
// $("form span").show();
$(this).next().show();
}
}
// When event happens on password input
$("#password").focus(passwordEvent).keyup(passwordEvent);
// Find out if the password is valid
// Hide hint if valid
// Else show hint
// When event happens on confirmation input
//Find out if pasword and confirmation match
//Hide hint if match
//else show hint
Using the "this" keyword is AMAZING...it's really growing on me. So:
// Problem: Hints are shown even when form is valid
// Solution: Hide and show them at appropriate times
var $password = $("#password");
var $confirmPassword = $("#confirm_password");
// Hide hints
$("form span").hide();
function isPasswordValid() {
return $password.val().length > 8;
}
function arePasswordsMatching() {
return $password.val() === $confirmPassword.val();
}
function passwordEvent() {
if ($password.val().length > 8) {
// Hide hint if valid entry
$password.next().hide();
//$("form span").hide();
}
else {
//else show hint
//$("form span").show();
$password.next().show();
}
}
function confirmPasswordEvent() {
//Find out if pasword and confirmation match
if (arePasswordsMatching()) {
//Hide hint if match
$confirmPassword.next().hide();
} else {
$confirmPassword.next().show();
}
//else show hint
}
// When event happens on password input
$password.focus(passwordEvent).keyup(passwordEvent).focus(confirmPasswordEvent).keyup(confirmPasswordEvent);
// When event happens on confirmation input
$confirmPassword.focus(confirmPasswordEvent).keyup(confirmPasswordEvent);
Check out the isPasswordValid and arePasswordsMatching functions. They're returning the result of a comparison. The code works. Interesting.
Always remember that when i am looking for a bug in my JavaScript, the bug may not be in the JavaScript, it could just as easily be in the HTML. Here's the final code, check out the function with ! in it. It returns a true or false, but the function that uses it needs to return a true in order to fire, so we flip the result in order to make the function fire. In other words, if canSubmit returns false, meaning we cannot submit, then flip that to a true, return true to the prop, and make the prop disabled! Neat.
// Problem: Hints are shown even when form is valid
// Solution: Hide and show them at appropriate times
var $password = $("#password");
var $confirmPassword = $("#confirm_password");
// Hide hints
$("form span").hide();
function isPasswordValid() {
return $password.val().length > 8;
}
function arePasswordsMatching() {
return $password.val() === $confirmPassword.val();
}
function canSubmit() {
return isPasswordValid() && arePasswordsMatching();
}
function passwordEvent() {
if (isPasswordValid()) {
// Hide hint if valid entry
$password.next().hide();
//$("form span").hide();
} else {
//else show hint
//$("form span").show();
$password.next().show();
}
}
function confirmPasswordEvent() {
//Find out if pasword and confirmation match
if (arePasswordsMatching()) {
//Hide hint if match
$confirmPassword.next().hide();
} else {
$confirmPassword.next().show();
}
//else show hint
}
function enableSubmitEvent() {
$("#submit").prop("disabled", !canSubmit());
}
// When event happens on password input
$password.focus(passwordEvent).keyup(passwordEvent).keyup(confirmPasswordEvent).keyup(enableSubmitEvent);
// When event happens on confirmation input
$confirmPassword.focus(confirmPasswordEvent).keyup(confirmPasswordEvent).keyup(enableSubmitEvent);
enableSubmitEvent();
And this checks if a username is greater than 0:
var $username = $("#username");
function isUsernamePresent() {
if ($username.val().length > 0) {
return true;
}
}
We have to get the val() inside the username to check.
Ok it's midnight, so I'm closing this blog entry up, since any time after midnight gets credited to tomorrow (due to my productivity app, RescueTime). hey, check out my RescueTime screenshot:
I put in 14.5 hours of solid study time in today. The app says 14 hours and 12 minutes of productivity, but that's because it crashed (my buddy confirmed it, his crashed also) for about 30 minutes or so midday today. Good stuff.
SUMMARY OF CODING SKILLS
Total Treehouse Points: 10,766 (miscellaneous not included)
HTML: 1,772
CSS: 3,368
Design: 1,193
Development Tools: 1,344
JavaScript: 2,605
Treehouse (and other) Courses Completed:
How to Make a Website
HTML
HTML Forms
HTML Tables
CSS Foundations
CSS Basics
CSS Layout Techniques
CSS Layout Basics
CSS Selectors
Responsive Layouts
CSS Flexbox Layout
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% done, switched focus from design to web dev)
Console Foundations
Git Basics
Introduction to Programming
JavaScript Basics
AJAX Basics
HTML and CSS (Codecademy)
Introduction to Web Dev (The Odin Project)
Web Dev 101 (The Odin Project, 33% done, switched to FCC for larger community)
Books Read or in Progress: Status
"Head First HTML and CSS," by E. Robson & E. Freeman Complete
"A Smarter Way to Learn JavaScript," by Mark Myers Complete
"HTML and CSS," by Jon Duckett Complete
"JavaScript and JQuery," by Jon Duckett Complete
Free Code Camp (FCC) Status
1. Get Started with Free Code Camp Complete
2. HTML5 and CSS Complete
3. Responsive Design with Bootstrap Complete
4. Gear up for Success Complete
5. jQuery Complete
6. Basic JavaScript Complete
7. Object Oriented and Functional Programming Complete
8. Basic Algorithm Scripting Complete
9. Basic Front End Development Projects Complete
5. jQuery Complete
6. Basic JavaScript Complete
7. Object Oriented and Functional Programming Complete
8. Basic Algorithm Scripting Complete
9. Basic Front End Development Projects Complete
10. JSON API's and Ajax Complete
11. Intermediate Algorithm Scripting Complete
11. Intermediate Algorithm Scripting Complete
12. Intermediate Front End Development Projects On 3 of 6
13. Claim Your Front End Development Certificate
14. Advanced Algorithm Scripting
15. Automated Testing and Debugging
16. Git
17. Node.js and Express.js
18. MongoDB
19. API Projects
15. Automated Testing and Debugging
16. Git
17. Node.js and Express.js
18. MongoDB
19. API Projects
20. Dynamic Web Application Projects
21. Claim Your Back End Development Certificate
The Coding Boot Camp at UT Austin Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery)
The Coding Boot Camp at UT Austin Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery)
Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX)
Week 11-14: Server Side (Node.js, MySQL, MongoDB)
Week 15-18: PHP (WordPress, CodeIgniter, Laravel)
Week 18-21: Full Stack Coding
Week 22-24: Final Project
CodePen: http://codepen.io/Adancode/
Week 22-24: Final Project
CodePen: http://codepen.io/Adancode/
GitHub: https://github.com/Adancode
LinkedIn: https://www.linkedin.com/in/adamcamacho1
Team Treehouse: https://teamtreehouse.com/adamcamacho
Free Code Camp: http://www.freecodecamp.com/adancode
Team Treehouse: https://teamtreehouse.com/adamcamacho
Free Code Camp: http://www.freecodecamp.com/adancode
Hours Spent Coding Today: 12
Total Hours Coding: 991.5
No comments:
Post a Comment