Notes for Udemy Course “The Complete React Web Developer Course (with Redux)”

Posted in Javascript on February 23, 2018 by rowej83.

Notes for Udemy Course “The Complete React Web Developer Course (with Redux)” – https://www.udemy.com/react-2nd-edition/

React uses jsx and ES6 which means it requires Babel ( requires node ). Two scripts are required to work with React in the browser. React and ReactDOM. Below is a sample React component that has toggle visibility functionality.

import React from 'react';
import { render } from 'react-dom';
// required to work with React in the browser

// Any component must extend React.Component and have at the very least a 
// render() method.

class VisibilityComponent extends React.Component {
// constructor for component really only needs to use super(props) instead of super() 
// if you need to reference the props in the constructor

  constructor(props) {
    super(props);
    // We bind all methods so that it references the correct this instance.   
    this.setVisibility = this.setVisibility.bind(this);
    // set the initial state variables
    this.state = {
      visibility: false
    };

  }
  // method that toggles the visibility state variable.
  setVisibility() {
  // updating setState should be a function that returns a new object.
  // if the previous state's value is needed, add prevState ( can be named anything )
  // to the this.setState method's parameter.
    this.setState((prevState) => {
      return { visibility: !prevState.visibility }
    }
    );
  }
  // return jsx that can be inclosed by ( ) 
  render() {
    return (
      <div>
        <button onClick={this.setVisibility}>Toggle visibility</button>
         // if statement checking visibility state value 
         // shows 'it is shown' if true, 'not shown' if it is false.
        {this.state.visibility ? 'it is shown' : 'not shown'}
      </div>

    )

  }

}

// finally, use render function from ReactDOM to attach the app to the DOM.
render(<VisibilityComponent />, document.getElementById('root'));

import React from 'react';

import { render } from 'react-dom';

// required to work with React in the browser

// Any component must extend React.Component and have at the very least a

// render() method.

class VisibilityComponent extends React.Component {

// constructor for component really only needs to use super(props) instead of super()

// if you need to reference the props in the constructor

constructor(props) {

super(props);

// We bind all methods so that it references the correct this instance.

this.setVisibility = this.setVisibility.bind(this);

// set the initial state variables

this.state = {

visibility: false

};

}

// method that toggles the visibility state variable.

setVisibility() {

// updating setState should be a function that returns a new object.

// if the previous state's value is needed, add prevState ( can be named anything )

// to the this.setState method's parameter.

this.setState((prevState) => {

return { visibility: !prevState.visibility }

}

);

}

// return jsx that can be inclosed by ( )

render() {

return (

<div>

<button onClick={this.setVisibility}>Toggle visibility</button>

// if statement checking visibility state value

// shows 'it is shown' if true, 'not shown' if it is false.

{this.state.visibility ? 'it is shown' : 'not shown'}

</div>

)

}

// finally, use render function from ReactDOM to attach the app to the DOM.

render(<VisibilityComponent />, document.getElementById('root'));

If components are nested, data as props can only be sent down – not up. So, on the parent component a method can be passed to the child component as a prop in order to send the information back to the parent.

Stateless functional components

Another type of component that can be reduced to a single function call because they do not have any state to handle of their own. Mostly used for “presentation” type components. They can use props but aren’t accessible through *this* .

This type of component is “faster” as it has less overhead as it doesn’t handle state.

// Stateless functional component example
// The name of the variable will be the component name
// i.e. <User />

const User = (props) => {
// like regular components, it has a render method but it is
// just the body of the function itself

return (
  <div> Any valid JSX will work here {props.name} </div>
);
};

// Can setup defaults for props using below:
User.defaultProps({
name="default name if not given one"
});

ReactDOM.render(<User name="Jason Rowe"/>,document.getElementById('root');

// Stateless functional component example

// The name of the variable will be the component name

// i.e. <User />

const User = (props) => {

// like regular components, it has a render method but it is

// just the body of the function itself

return (

<div> Any valid JSX will work here {props.name} </div>

);

};

// Can setup defaults for props using below:

User.defaultProps({

name="default name if not given one"

});

ReactDOM.render(<User name="Jason Rowe"/>,document.getElementById('root');

Small tricks for conditional rendering

// Below will only show the h2 tags if the title is not empty
{this.props.title && <h2>{this.props.title}</h2>}

1 2	// Below will only show the h2 tags if the title is not empty {this.props.title && <h2>{this.props.title}</h2>}

For the arrow function, if you are return just an object you can use the following syntax:

this.setState(() => ({ options:[] }));

// key difference is that following the arrow it must include () so 
// it knows it is an object rather then the normal opening and
// closing brackets of the arrow function

this.setState(() => ({ options:[] }));

// key difference is that following the arrow it must include () so

// it knows it is an object rather then the normal opening and

// closing brackets of the arrow function

In React, methods to update a parent component are passed down to child components via props.

Lifecycle methods

Methods are available to hook in to when a class based component is added/removed/updated in React. Common ones to use are componentDidMount() for fetching initial data, and componentDidUpdate(prevProps, prevState) for saving updated changes back to the db.

When using componentDidUpdate, make sure the prevState and current state are not equal ( !==) so that a save to db/localStorage is not called that is not needed.

Localstorage Notes

// valid commands
localStorage.setItem('name', 'Jason');

localStorage.getItem('name');

localStorage.removeItem('name');

// localStorage can only store strings. Will automatically convert 
// a number i.e. 26 to "26" . To make best use, we use JSON methods

// below will turn a javascript object to a string that
// we can store in localStorage
JSON.stringify(Object); 

// below will turn a string back to a javascript object
JSON.parse(String);

// valid commands

localStorage.setItem('name', 'Jason');

localStorage.getItem('name');

localStorage.removeItem('name');

// localStorage can only store strings. Will automatically convert

// a number i.e. 26 to "26" . To make best use, we use JSON methods

// below will turn a javascript object to a string that

// we can store in localStorage

JSON.stringify(Object);

// below will turn a string back to a javascript object

JSON.parse(String);

When within a method that was attached to a onClick event ( or any other similar method ), you can reference the field/value by the following type of example:

<form onSubmit={this.handleAddOption}>
 <input type="text" name="option" />
 <button> Add option </button>
</form>

// Within handleAddOption(e) can use the following to reference the 
// input field's value. It uses the name field for what you would reference.
// in the case, name="option"

e.target.elements.option.value;

<button> Add option </button>

</form>

// Within handleAddOption(e) can use the following to reference the

// input field's value. It uses the name field for what you would reference.

// in the case, name="option"

e.target.elements.option.value;

Children props ( slots )

Dynamic content that be added between a components tag can be added to be placed within the layout of the components it’s self. For example:

const Layout = (props) => return (
  <div>
   <h1> Random Header </h1>
   {props.children} 
   // above will add what was put between the <Layout> </Layout> tag
  </div>
);

ReactDOM.render(<Layout><p> This content will be added as a child prop </p></Layout>, document.getElementById('root');

// The <p> </p> content will be added within the Layout component

const Layout = (props) => return (

<div>

<h1> Random Header </h1>

{props.children}

// above will add what was put between the <Layout> </Layout> tag

</div>

);

ReactDOM.render(<Layout><p> This content will be added as a child prop </p></Layout>, document.getElementById('root');

// The <p> </p> content will be added within the Layout component

Simple form value/onChange practice:

Can create a single handleChange method to handle all form values and updates that are used in state.

handleChange = event => {
   //uses a object deconstructor to create name / value variables from
   // the even.target object

    const {name, value} = event.target;

    this.setState({
        [name] : value
    });
}

handleChange = event => {

//uses a object deconstructor to create name / value variables from

// the even.target object

const {name, value} = event.target;

this.setState({

[name] : value

});

}

Now we can use same method for all form fields:

render() {
    const { name, job } = this.state; 

    return (
        <form>
            <label>Name</label>
            <input 
                type="text" 
                name="name" 
                value={name} 
                onChange={this.handleChange} />
            <label>Job</label>
            <input 
                type="text" 
                name="job" 
                value={job} 
                onChange={this.handleChange}/>
        </form>
    );
}

render() {

const { name, job } = this.state;

return (

<form>

<input

type="text"

name="name"

value={name}

onChange={this.handleChange} />

<input

type="text"

name="job"

value={job}

onChange={this.handleChange}/>

</form>

);

}

Misc React Notes

In JSX, all normal html attributes such as onclick and onchange MUST be camel case.. i.e.e onClick and onChange

All components must start with a capital letter.

JSX conditional rendering :

ternary operator is accepted i.e. true ? ‘show this if true’ : ‘ value if false’

if/else can not be used in {} jsx since it is a statement and not an expression.

&& AND Operator

{user.age>18 && <p>{user.age}</p>}

// If the first value is true (user.age is greater than 18)
// then the second value is returned.
// This is useful to only show something if a certain value is true.

{user.age>18 && <p>{user.age}</p>}

// If the first value is true (user.age is greater than 18)

// then the second value is returned.

// This is useful to only show something if a certain value is true.

Notes for using Ajax in WordPress

Posted in WordPress on January 25, 2018 by rowej83.

While in WordPress admin area.. the variable named ajaxurl is available for javascript scripts to use for the url for ajax. Every call must at the very least have an “action” data property passed to WordPress in order for it to know which function will be used on the back-end to complete the ajax request.

// when in the WordPress admin area. the variable "ajaxurl" is available that
// points to /wp-admin/admin-ajax.php which handles all ajax requests.

// if the user is not logged in then the ajaxurl is not automatically passed.
// also wp_ajax_nopriv action must also have the php ajax function tied to it 
// in case the user that is visiting is not logged in.

var datasent={
'action':'method_that_handles_the_ajax_request',
'address':'555 street'
};

// in this example we manually set a ajaxurl in case the user isn't logged in.

var ajaxurltowp=site_vars.ajaxurl; // passed in from localize wp script 

$.post(ajaxurltowp, datasent,function(response){
// response is what is sent back from the server for the ajax request.

});

// when in the WordPress admin area. the variable "ajaxurl" is available that

// points to /wp-admin/admin-ajax.php which handles all ajax requests.

// if the user is not logged in then the ajaxurl is not automatically passed.

// also wp_ajax_nopriv action must also have the php ajax function tied to it

// in case the user that is visiting is not logged in.

var datasent={

'action':'method_that_handles_the_ajax_request',

'address':'555 street'

};

// in this example we manually set a ajaxurl in case the user isn't logged in.

var ajaxurltowp=site_vars.ajaxurl; // passed in from localize wp script

$.post(ajaxurltowp, datasent,function(response){

// response is what is sent back from the server for the ajax request.

});

The associated php that would be needed to process above :

<?php

function handle_request(){
$address=$_POST["address"]; // grab field sent via ajax
//do something here
// all functions that handle ajax must die() at the end of the function.
die();

}

//adding action assuming not in a namespace.
add_action('wp_ajax_method_that_handles_the_ajax_request','handle_request');

// adding action for visitors who are no logged in
add_action('wp_ajax_nopriv_method_that_handles_the_ajax_request','handle_request');

<?php

function handle_request(){

$address=$_POST["address"]; // grab field sent via ajax

//do something here

// all functions that handle ajax must die() at the end of the function.

die();

}

//adding action assuming not in a namespace.

add_action('wp_ajax_method_that_handles_the_ajax_request','handle_request');

// adding action for visitors who are no logged in

add_action('wp_ajax_nopriv_method_that_handles_the_ajax_request','handle_request');

Any ajax request must be handles by a function which has to be added via add_action

Note that any action you specify in the ‘action’ field for the data sent to the server will have ‘wp_ajax_’ prepended to the actions name.

Also need to bind to the action prefix ‘wp_ajax_nopriv’ so that the ajax will still work for visitors who are not logged in.

So the action ‘method_that_handles_the_ajax_request’ will have to be added in php as ‘wp_ajax_method_that_handles_the_ajax_request’ as seen in the php snippet.

If the action can not be found by admin-ajax.php the response returned from the ajax request will be an integer of zero ( 0 ).

If you created an ajax action method properly and you keep receiving a 0 response…confirm that your ajax action method was added.

//if were in a namespace would have to do the following:
add_action('wp_ajax_method_that_handles_the_ajax_request',__NAMESPACE__.'\\handle_request');

//if were in a class would have to do the following:
add_action('wp_ajax_method_that_handles_the_ajax_request',array($this,'handle_request'));

//if were in a namespace would have to do the following:

add_action('wp_ajax_method_that_handles_the_ajax_request',__NAMESPACE__.'\\handle_request');

//if were in a class would have to do the following:

add_action('wp_ajax_method_that_handles_the_ajax_request',array($this,'handle_request'));

Any function in php that handles a ajax request MUST end with die();

Within the php function, any post variable that is passed via the ajax data field, in our case the ‘address’ or ‘action’ field, is available via $_POST[“address”] or $_POST[“action”]

wp_localize_script

Used to add data to javascript that is normally only available on server side. Has to be used after an enqueue of a script and use the same “handle”. It will make the variables passed via localize_script available to the rest of the javascript that was enqueued.

Typically, this is used for nuances

Example of adding the nuances

<?php

// Register the script
wp_register_script( 'the_handle', 'path/to/myscript.js' );

// Localize the script with new data
// ajaxurl is passed in manually in case the visitor
// is not logged in - wordpress does not automatically
// populate ajaxurl if the user is not logged in

$sites_variables = array(
	'site_nonce' => wp_create_nonce('site_nonce'),
         'ajaxurl'=> admin_url( 'admin-ajax.php' ) 
	);

wp_localize_script( 'the_handle', 'site_vars', $sites_variables );

// Enqueued script with localized (nonce ) data.
wp_enqueue_script( 'the_handle' );

<?php

// Register the script

wp_register_script( 'the_handle', 'path/to/myscript.js' );

// Localize the script with new data

// ajaxurl is passed in manually in case the visitor

// is not logged in - wordpress does not automatically

// populate ajaxurl if the user is not logged in

$sites_variables = array(

'site_nonce' => wp_create_nonce('site_nonce'),

'ajaxurl'=> admin_url( 'admin-ajax.php' )

);

wp_localize_script( 'the_handle', 'site_vars', $sites_variables );

// Enqueued script with localized (nonce ) data.

wp_enqueue_script( 'the_handle' );

Another way to add it when there are times where an additional script isn’t needed could be done in the following way.

function add_nonce_variable_in_javascript_to_admin_head_area(){ ?>
    <script type="text/javascript">
        var site_variables = {
        'site_nonce':<?php echo json_encode(wp_create_nonce("site_nonce")); ?>
        };
    </script><?php
}
add_action( 'admin_head', __NAMESPACE__ . '\\add_nonce_variable_in_javascript_to_admin_head_area' );

function add_nonce_variable_in_javascript_to_admin_head_area(){ ?>

var site_variables = {

'site_nonce':<?php echo json_encode(wp_create_nonce("site_nonce")); ?>

};

</script><?php

}

add_action( 'admin_head', __NAMESPACE__ . '\\add_nonce_variable_in_javascript_to_admin_head_area' );

Now we can update the javascript to use the nonce to pass back to WordPress to check for nonce validity.

// "site_nonce" is populated from the sites_vars variable passed from wp_localize_script

var datasent={
"action":"method_that_handles_the_ajax_request",
"address":"555 street",
"site_nonce":sites_vars.site_nonce;
};

$.post(ajaxurl, data_sent,function(response){
// response is what is sent back from the server for the ajax request.

});

// "site_nonce" is populated from the sites_vars variable passed from wp_localize_script

var datasent={

"action":"method_that_handles_the_ajax_request",

"address":"555 street",

"site_nonce":sites_vars.site_nonce;

};

$.post(ajaxurl, data_sent,function(response){

// response is what is sent back from the server for the ajax request.

});

Now that the nonce is created and is being passed from javascript to WordPress.. we setup below in php in the action that the ajax requests to process it’s integrity.

if( !isset($_POST['site_nonce']) || !wp_verify_nonce($_POST['site_nonce'], 'site_nonce')){
// nonce is missing or is bad. Cancel request

die('Permission check failed');
}

//$_POST['site_nonce'] has to be passed in first parameter as it is POST name we gave it below:


// site_nonce has to be passed since it was 
// the handle we used when creating the nonce
// i.e. wp_create_nonce('site_nonce');

if( !isset($_POST['site_nonce']) || !wp_verify_nonce($_POST['site_nonce'], 'site_nonce')){

// nonce is missing or is bad. Cancel request

die('Permission check failed');

}

//$_POST['site_nonce'] has to be passed in first parameter as it is POST name we gave it below:

// site_nonce has to be passed since it was

// the handle we used when creating the nonce

// i.e. wp_create_nonce('site_nonce');

Good notes for ajax usage: https://developer.wordpress.org/plugins/javascript/enqueuing/

check_ajax_referer( 'nonce' ); This function will check nonce and if it fails will automatically kill the action it was ran within

wp_send_json() will send back appropriate header and json back to javascript as well as wp_die() for the action it was called in.

Notes for “Advanced CSS and SASS” Udemy course

Posted in CSS on December 14, 2017 by rowej83.

The course can be found at : https://www.udemy.com/advanced-css-and-sass

To center an absolute item in the middle of its parent ( parent position must be set to relative ) with out using flex-box,the following can be done:

.center-item{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

.center-item{

position:absolute;

top:50%;

left:50%;

transform: translate(-50%,-50%);

}

The following CSS3 property can be used to make an element not visible until its animation starts by having it’s 0% keyframe set an opacity to 0. For example:

@keyframes animated-frames{
0%{opacity:0;}

100%{opacity:1;}
}

.item-to-be-animated {
animation-fill-mode: backwards;

/* The backwards setting will apply what is in the 0% settings
before the animation starts. So, the item will have an opacity 
of 0 which will make it "invisible" until the animation begins. */

animation:animated-frames .5s ease-out .7s;

/* The above animation would use the animated-frames keyframes , 
it would take .5seconds to complete, 
would use a ease-out method for it's animation, 
and the animation would be delayed before it starts by .7seconds */
}

@keyframes animated-frames{

0%{opacity:0;}

100%{opacity:1;}

}

.item-to-be-animated {

animation-fill-mode: backwards;

/* The backwards setting will apply what is in the 0% settings

before the animation starts. So, the item will have an opacity

of 0 which will make it "invisible" until the animation begins. */

animation:animated-frames .5s ease-out .7s;

/* The above animation would use the animated-frames keyframes ,

it would take .5seconds to complete,

would use a ease-out method for it's animation,

and the animation would be delayed before it starts by .7seconds */

}

How CSS is processed and how styles that will be used will be determined:

!importance -> Specificity – > order that CSS is loaded ( cascade )

How relative values ( %, em, rem, vh , vw ) are converted to absolute values (px)

Relative values such as em and rem. em for fonts uses the parent element as it’s reference, em for lengths ( like padding etc ) uses the current element the while rem uses the root element (html element) for both font and length type values.

Viewport-based : vh ( View Height) and vw (View Width) will use the devices View height/width to determine the site. So 90vh would be a height of 90% of the viewports height.

Misc Notes on Inheritance:

initial keyword resets a property to its initial value ( reset ).

Properties related to text ( font-family, size, color ) are inherited. Things like margin/padding are not by default. Can force inheritance of a property by using the inherit keyword on that property.

How and why to use rem instead of px

Set html element (root) font-size property to 10px . This way when using rem in other element properties it is easier to figure out since it is a multiple/divisible by 10. This creates a good method in case the view point resizes. However, this is bad in the event that the user sets a different font size in their browser. Because of this, it is better to set the html element ( root ) to font-size of 62.5% . It is 62.5% because the default font-size in a browser is 16px. Since we want 10px, we use 10/16 = .625 or 62.5% for the font-size.

Box Types ( inline, block, inline-block )

All determined by the display: property.

Block

Displayed as blocks. 100% of parent’s width. Vertically, one after another. Creates line breaks before and after it.

Inline

Inline box only occupies just the size it needs. Does not create line breaks. Height and width property do no apply. Can only apply left and right padding and margins.

Inline-block

Mostly inline that it only occupies content spaces that is using, does not create line breaks. Block on inside so all margin padding ( top and bottom) can be set.

Positioning Schemes

position: relative

Elements laid out in natural order that is written in code. Not floats or absolutely positioned.

float: left , float: right

Element is removed from the normal flow; Text and inline element will wrap around floated element. Container of a floated item will not adjust it’s height to the element but can use clear:both fixes

position: absolute; , position:fixed;

Element is removed from normal flow. No impact on surrounding contents/elements. Can use top,bottom, left and right to offset the element from its relatively positioned contained.

Stacking contexts

z-index

higher z-index appears on top, the lower the z-index the lower on the stack.

SASS

Variables

Can be used to store any type of values, must start with $ – for example:

$text-color:#f2f2f2;

$button-width:150px;

Nesting

Can nest elements/classes to reduce the need to rewrite certain code. For example:

.nav {
  background-color: red;

  &:hover {
    background-color: darken(yellow, 15%);
  }
  ul {
    width: 100px;
    background-color: yellow;
  }
}


/* Would produce below */

.nav {
  background-color: red;
}
.nav:hover {
  background-color: #b3b300;
}
.nav ul {
  width: 100px;
  background-color: yellow;
}

.nav {

background-color: red;

&:hover {

background-color: darken(yellow, 15%);

}

ul {

width: 100px;

background-color: yellow;

}

/* Would produce below */

.nav {

background-color: red;

}

.nav:hover {

background-color: #b3b300;

}

.nav ul {

width: 100px;

background-color: yellow;

}

& is used to join the pseudo element or state to the element before it. With out it, it would of produced .nav :hover {} instead which is not what was intended.

darken and lighten

Color methods in SASS to darken/lighten a color. First param is the color. Second param is the % you want to adjust it by. i.e.

darken(#f2f2f2,15%); or lighten(#f2f2f2,10%);

Mixin

A type function or block of code you can define to use in different areas of your css.

To define a mixin:

@mixin clearfix{
$::after{
content:"";
clear:both;
display:table; 
 }
}

/**  To use the mixin: **/
@include clearfix;

@mixin clearfix{

$::after{

content:"";

clear:both;

display:table;

}

/** To use the mixin: **/

@include clearfix;

Can also use parameters i.e.

@mixin button-config($color)
{
width:150px;
background-color:$color;
}

@mixin button-config($color)

{

width:150px;

background-color:$color;

}

Misc Notes

In order to use scss variables in the calc() function it must be enclosed within #{ }

.random-class{
width:calc((100%-#{$variable-with-a-width-value})/2);
}

.random-class{

width:calc((100%-#{$variable-with-a-width-value})/2);

}

To make text or a font type icon have a gradient background you can do the following CSS:

display:inline-block;
background-image:linear-gradient(to-right, $begin-color,$end-color);
-webkit-background-clip:text;
color:transparent;

display:inline-block;

background-image:linear-gradient(to-right, $begin-color,$end-color);

-webkit-background-clip:text;

color:transparent;

To use a linear-gradient, you must apply it to the background-image property.

box-decoration-break or -webkit-box-decoration-break

If a single line of text i.e. <p> line of text that exceeds more than 1 line</p> exceeds a single line.. any padding added to the element would normally not apply to both lines if the element is broken in to two lines. Can use box-decoration-break:clone; to make it so any padding added to the element will be applied to both ( or more ) lines for that element.

Notes if rotating an object

perspective & -moz-perspective:

Add a decent amount of pixels to smooth the rotation to look more natural. Must be added to the parent element.

backface-visibility:hidden;

Will make the backside of an element not visible . i.e. if it is transform: rotateY(180deg);

Python script to scrape array of urls and create an excel spreadsheet

Posted in Development, Python on August 31, 2017 by rowej83.

I created this in order to have a bootstrap for wanting to create a script to generate an excel spreadsheet from scraped information from an array of urls. Comments within the script indicate which values/columns/headers need to be updated.

import xlsxwriter
import numpy as np
import os
import contextlib
from bs4 import BeautifulSoup
import requests

# Empty array of urls to be parsed
arrofurls = []
# would then call getvaluesperurl with above arrofurls.

# Empty multi-dimension array- only initial values are the headers
arrofitems = [['NAME', 'ADDRESS', 'CITY']]

# Deleting any existing spreadsheet before performing operation
with contextlib.suppress(FileNotFoundError):
    os.remove('Scrape-output.xlsx')

# Create a workbook and add a worksheet.
workbook = xlsxwriter.Workbook('Scrape-output.xlsx')
worksheet = workbook.add_worksheet()

# Increment row to start at 1 for loop since headers were added
# Start from the first cell. Rows and columns are zero indexed.
row = 0
col = 0
# Iterate over the data and write it out row by row. - need to change name1, address1 etc for what column values will be
for name1, address1, city1 in (arrofitems):
    worksheet.write(row, col, name1)
    worksheet.write(row, col + 1, address1)
    worksheet.write(row, col + 2, city1)
    row += 1

# Write a total using a formula. Commented out since not needed for the example
# worksheet.write(row, 0, 'Total')
# worksheet.write(row, 1, '=SUM(B1:B4)')
workbook.close()


# function that goes through urls and grabs values to add in main array
# values and size o main array depends on the information needed
# below is just an example of a single value being
def getvaluesperurl(arrayofurls):
    for url in arrayofurls:
        r = requests.get(url)
        data1 = r.text
        soup = BeautifulSoup(data1, "lxml")
        # go thru each value and find via select and check if not none
        valueofitem = soup.select_one(
            "#school-single > div.ccsf-content-wrap > div > ul > li:nth-of-type(16) > div.ccsf-value").text
        if valueofitem is None:
            valueofitem = 'NA'
        valueofitem2 = soup.select_one(
            "#school-single > div.ccsf-content-wrap > div > ul > li:nth-of-type(16) > div.ccsf-value").text
        if valueofitem2 is None:
            valueofitem2 = 'NA'
        valueofitem3 = soup.select_one(
            "#school-single > div.ccsf-content-wrap > div > ul > li:nth-of-type(16) > div.ccsf-value").text
        if valueofitem3 is None:
            valueofitem3 = 'NA'

        # after finding all values, add to the main array
        temparr = np.array([[valueofitem, valueofitem2, valueofitem3]])
        arrofitems = np.concatenate((arrofitems, temparr), axis=0)

import xlsxwriter

import numpy as np

import os

import contextlib

from bs4 import BeautifulSoup

import requests

# Empty array of urls to be parsed

arrofurls = []

# would then call getvaluesperurl with above arrofurls.

# Empty multi-dimension array- only initial values are the headers

arrofitems = [['NAME', 'ADDRESS', 'CITY']]

# Deleting any existing spreadsheet before performing operation

with contextlib.suppress(FileNotFoundError):

os.remove('Scrape-output.xlsx')

# Create a workbook and add a worksheet.

workbook = xlsxwriter.Workbook('Scrape-output.xlsx')

worksheet = workbook.add_worksheet()

# Increment row to start at 1 for loop since headers were added

# Start from the first cell. Rows and columns are zero indexed.

row = 0

col = 0

# Iterate over the data and write it out row by row. - need to change name1, address1 etc for what column values will be

for name1, address1, city1 in (arrofitems):

worksheet.write(row, col, name1)

worksheet.write(row, col + 1, address1)

worksheet.write(row, col + 2, city1)

row += 1

# Write a total using a formula. Commented out since not needed for the example

# worksheet.write(row, 0, 'Total')

# worksheet.write(row, 1, '=SUM(B1:B4)')

workbook.close()

# function that goes through urls and grabs values to add in main array

# values and size o main array depends on the information needed

# below is just an example of a single value being

def getvaluesperurl(arrayofurls):

for url in arrayofurls:

r = requests.get(url)

data1 = r.text

soup = BeautifulSoup(data1, "lxml")

# go thru each value and find via select and check if not none

valueofitem = soup.select_one(

"#school-single > div.ccsf-content-wrap > div > ul > li:nth-of-type(16) > div.ccsf-value").text

if valueofitem is None:

valueofitem = 'NA'

valueofitem2 = soup.select_one(

"#school-single > div.ccsf-content-wrap > div > ul > li:nth-of-type(16) > div.ccsf-value").text

if valueofitem2 is None:

valueofitem2 = 'NA'

valueofitem3 = soup.select_one(

"#school-single > div.ccsf-content-wrap > div > ul > li:nth-of-type(16) > div.ccsf-value").text

if valueofitem3 is None:

valueofitem3 = 'NA'

# after finding all values, add to the main array

temparr = np.array([[valueofitem, valueofitem2, valueofitem3]])

arrofitems = np.concatenate((arrofitems, temparr), axis=0)

Example of C# delegate/event to pass data from one form to another

Posted in C# on August 2, 2017 by rowej83.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
  public partial class Form1 : Form
  {
    private Form2 Frm2 = new Form2();

    public Form1()
    {
      InitializeComponent();
      Frm2.AdviseParent += new Form2.AdviseParentEventHandler(SetFromForm2);
    }

    private void button1_Click(object sender, EventArgs e)
    {
      Frm2.ShowDialog();
    }


    public void SetFromForm2(string label)
    {
      label1.Text = label;
    }

  }
}


//Form 2

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
  public partial class Form2 : Form
  {
    public delegate void AdviseParentEventHandler(string text);
    public event AdviseParentEventHandler AdviseParent;

    public Form2()
    {
      InitializeComponent();
    }

    private void button1_Click(object sender, EventArgs e)
    {
      SetLabelOnForm1(textBox1.Text);
    }

    public void SetLabelOnForm1(string label)
    {
      if (AdviseParent != null)
        AdviseParent(label);
    }
  }
}

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Text;

using System.Windows.Forms;

namespace WindowsFormsApplication1

{

public partial class Form1 : Form

{

private Form2 Frm2 = new Form2();

public Form1()

{

InitializeComponent();

Frm2.AdviseParent += new Form2.AdviseParentEventHandler(SetFromForm2);

}

private void button1_Click(object sender, EventArgs e)

{

Frm2.ShowDialog();

}

public void SetFromForm2(string label)

{

label1.Text = label;

}

//Form 2

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Text;

using System.Windows.Forms;

namespace WindowsFormsApplication1

{

public partial class Form2 : Form

{

public delegate void AdviseParentEventHandler(string text);

public event AdviseParentEventHandler AdviseParent;

public Form2()

{

InitializeComponent();

}

private void button1_Click(object sender, EventArgs e)

{

SetLabelOnForm1(textBox1.Text);

}

public void SetLabelOnForm1(string label)

{

if (AdviseParent != null)

AdviseParent(label);

}

Online Journal

My online journal about design and development related topics and what I've learned.

Notes for Udemy Course “The Complete React Web Developer Course (with Redux)”

Notes for using Ajax in WordPress

Notes for “Advanced CSS and SASS” Udemy course

How CSS is processed and how styles that will be used will be determined:

How relative values ( %, em, rem, vh , vw ) are converted to absolute values (px)

Misc Notes on Inheritance:

How and why to use rem instead of px

Box Types ( inline, block, inline-block )

Positioning Schemes

SASS

Misc Notes

Notes if rotating an object

Python script to scrape array of urls and create an excel spreadsheet

Example of C# delegate/event to pass data from one form to another