Monthly Archives: July 2017

JavaScript30—Day 15

JavaScript30 is 30-day vanilla javaScript coding challenge by Wes Bos (@wesbos). The purpose of these posts is to reflect my troubles and moments of ahhaa. Lessons from Day 15 — LocalStorage and EventDelegation: Demo - Day 15

Form and submit: if it is form you should listen to submit—event and not click.

this.querySelector('[name=item]') So if we have form like this:

We can grab input value like this:

var input = document.querySelector('.js-it');
var inputValue = input.value;

or using this and parthensis:

var input = (this.querySelector['name=it']).value;

plates=[]: We have function
```
function populateList(plates=[], plateList){
 //code here
    
  }
```
plates=[] is an empty object and if we forget to pass something in, it won't broke our JavaScript
.map(): creates from one array another array.
.join(''): returns .map() array as a string.
will still be checked— any existence of attribute checked will check it.
localStorage accepts only strings. If it's something else in Console->Application-> Local Storage you'll see [object Object]. It can be stringified:
```
localStorage.setItem('items', JSON.stringify(items));
```
JSON. parse() is opposite to JSON.stringify(), itparses string to origin value or object.

setting value as condition:

const items = JSON.parse(localStorage.getItem('items')) || [];

Day 15 code on github.

JavaScript30—Day 28

JavaScript30 is 30-day vanilla javaScript coding challenge by Wes Bos (@wesbos). The purpose of these posts is to reflect my troubles and moments of ahhaa. Sorting band names without a/an/the Lessons from Day 28 — Video Speed Scrubber: Demo - Day 28

This tutorial won't work with YouTube videos because you can't put embeded video into video-tag.
video-tag won't play .avi-format
e.pageY : MouseEvent interface returns the Y (vertical) coordinatein pixels of the event relative to the whole document
element.offsetTop: is the number of pixels from the top of the closest relatively positioned parent element.
element.offsetHeight: is a measurement in pixels of the element's CSS height, including border, padding and the element's horizontal scrollbar (if present, if rendered).
HTMLMediaElement.playbackRate: property sets the rate at which the media is being played back. A value of 1.0 indicates normal speed and if negative—it's played back backwards. If it's too fast or slow— audio is muted.

Day 28 code on github.

Jeremy Keith about CSS

Jeremy Keith's post about CSS:

I mean, the basics of CSS—selectors, properties, and values—can be grasped in a day. But you can spend a lifetime trying to master the details. Heck, you could spend a lifetime trying to master just one part of CSS, like layout, or text.

Dealing with databases in Laravel vol 2 – error SQLSTATE[42000]

Error: [Illuminate\Database\QueryException] SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 1000 bytes (SQL: alter table users add unique users_email_unique(email)) [PDOException] SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 1000 bytes Solution:

In your Laravel folder go to app - Providers - AppServiceProvider.php
Add use Illuminate\Support\Facades\Schema; after use Illuminate\Support\ServiceProvider; If you don't do it you'll get next error: [Symfony\Component\Debug\Exception\FatalErrorException] Class 'App\Providers\Schema' not found
Inside boot function add next line: Schema::defaultStringLength(191);

Now your AppServiceProvider.php file should look like this:






Find solution from laravel-news.com.

Dealing with databases in Laravel vol 1

Before running

php artisan migrate

don't forget to make real database on server. Let's name it blogdb. In .env file following changes needed to be done:

DB_DATABASE=homestead rename as DB_DATABASE=blogdb
DB_USERNAME=homestead rename as DB_USERNAME=yourusername
DB_PASSWORD=secret rename as DB_PASSWORD=yourpassword

Routing without public folder (Laravel urls)

Instead e.g blog/public/about wanted the url to be blog/about - made these changes:

Copied .htaccess file from public folder to root folder - at the moment to blog folder.
Renamed server.php to index.php

Source

Page template and custom header

Few quick heurekas about these topics. Page template

Name your file like this: my-template.php
At the beginning of my-template.php add:
Actually it showed up in both cases Template name: My-template and Template name: my-template. It is traditionally used with capital letter, but I have to check, maybe it is a standard

Different header

Name your file like this: header-yourheadername.php

To call it out on your about page, add into template-file.php or about-template.php:

if(is_page('about')){
    
    get_header('yourheadername');

} else {
    get_header();
}

Show x latest blogposts

Needed a quick solution for displaying five latest blogposts on home-page. It will show only titles and makes them active links. This is the code:


 '5' );
	$recent_posts = wp_get_recent_posts( $args );
	foreach( $recent_posts as $recent ){
		echo '' .   $recent["post_title"].'  ';
	}
	wp_reset_query();
?>

If different number of posts is needed, change the number 5 in this row:

$args = array( 'numberposts' => '5' );

Source