text:
package com.amazonaws.services.ec2.model;

import java.io.Serializable;
import javax.annotation.Generated;

import com.amazonaws.AmazonWebServiceRequest;
import com.amazonaws.Request;
import com.amazonaws.services.ec2.model.transform.EnableVgwRoutePropagationRequestMarshaller;

/**
 *

 * Contains the parameters for EnableVgwRoutePropagation.
 *

 */
@Generated("com.amazonaws:aws-java-sdk-code-generator")
public class EnableVgwRoutePropagationRequest extends AmazonWebServiceRequest implements Serializable, Cloneable,
        DryRunSupportedRequest<EnableVgwRoutePropagationRequest> {

    /**
     *

     * The ID of the virtual private gateway that is attached to a VPC. The virtual private gateway must be attached to
     * the same VPC that the routing tables are associated with.
     *

     */
    private String gatewayId;
    /**
     *

     * The ID of the route table. The routing table must be associated with the same VPC that the virtual private
     * gateway is attached to.
     *

     */
    private String routeTableId;

    /**
     *

     * The ID of the virtual private gateway that is attached to a VPC. The virtual private gateway must be attached to
     * the same VPC that the routing tables are associated with.
     *

     *
     * @param gatewayId
     *        The ID of the virtual private gateway that is attached to a VPC. The virtual private gateway must be
     *        attached to the same VPC that the routing tables are associated with.
     */

    public void setGatewayId(String gatewayId) {
        this.gatewayId = gatewayId;
    }

    /**
     *

     * The ID of the virtual private gateway that is attached to a VPC. The virtual private gateway must be attached to
     * the same VPC that the routing tables are associated with.
     *

     *
     * @return The ID of the virtual private gateway that is attached to a VPC. The virtual private gateway must be
     *         attached to the same VPC that the routing tables are associated with.
     */

    public String getGatewayId() {
        return this.gatewayId;
    }

    /**
     *

     * The ID of the virtual private gateway that is attached to a VPC. The virtual private gateway must be attached to
     * the same VPC that the routing tables are associated with.
     *

     *
     * @param gatewayId
     *        The ID of the virtual private gateway that is attached to a VPC. The virtual private gateway must be
     *        attached to the same VPC that the routing tables are associated with.
     * @return Returns a reference to this object so that method calls can be chained together.
     */

    public EnableVgwRoutePropagationRequest withGatewayId(String gatewayId) {
        setGatewayId(gatewayId);
        return this;
    }

    /**
     *

     * The ID of the route table. The routing table must be associated with the same VPC that the virtual private
     * gateway is attached to.
     *

     *
     * @param routeTableId
     *        The ID of the route table. The routing table must be associated with the same VPC that the virtual private
     *        gateway is attached to.
     */

    public void setRouteTableId(String routeTableId) {
        this.routeTableId = routeTableId;
    }

    /**
     *

     * The ID of the route table. The routing table must be associated with the same VPC that the virtual private
     * gateway is attached to.
     *

     *
     * @return The ID of the route table. The routing table must be associated with the same VPC that the virtual
     *         private gateway is attached to.
     */

    public String getRouteTableId() {
        return this.routeTableId;
    }

    /**
     *

     * The ID of the route table. The routing table must be associated with the same VPC that the virtual private
     * gateway is attached to.
     *

     *
     * @param routeTableId
     *        The ID of the route table. The routing table must be associated with the same VPC that the virtual private
     *        gateway is attached to.
     * @return Returns a reference to this object so that method calls can be chained together.
     */

    public EnableVgwRoutePropagationRequest withRouteTableId(String routeTableId) {
        setRouteTableId(routeTableId);
        return this;
    }

    /**
     * This method is intended for internal use only. Returns the marshaled request configured with additional
     * parameters to enable operation dry-run.
     */
    @Override
    public Request<EnableVgwRoutePropagationRequest> getDryRunRequest() {
        Request<EnableVgwRoutePropagationRequest> request = new EnableVgwRoutePropagationRequestMarshaller().marshall(this);
        request.addParameter("DryRun", Boolean.toString(true));
        return request;
    }

    /**
     * Returns a string representation of this object. This is useful for testing and debugging. Sensitive data will be
     * redacted from this string using a placeholder value.
     *
     * @return A string representation of this object.
     *
     * @see java.lang.Object#toString()
     */
    @Override
    public String toString() {
        StringBuilder sb = new StringBuilder();
        sb.append("{");
        if (getGatewayId() != null)
            sb.append("GatewayId: ").append(getGatewayId()).append(",");
        if (getRouteTableId() != null)
            sb.append("RouteTableId: ").append(getRouteTableId());
        sb.append("}");
        return sb.toString();
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj)
            return true;
        if (obj == null)
            return false;

        if (obj instanceof EnableVgwRoutePropagationRequest == false)
            return false;
        EnableVgwRoutePropagationRequest other = (EnableVgwRoutePropagationRequest) obj;
        if (other.getGatewayId() == null ^ this.getGatewayId() == null)
            return false;
        if (other.getGatewayId() != null && other.getGatewayId().equals(this.getGatewayId()) == false)
            return false;
        if (other.getRouteTableId() == null ^ this.getRouteTableId() == null)
            return false;
        if (other.getRouteTableId() != null && other.getRouteTableId().equals(this.getRouteTableId()) == false)
            return false;
        return true;
    }

    @Override
    public int hashCode() {
        final int prime = 31;
        int hashCode = 1;

        hashCode = prime * hashCode + ((getGatewayId() == null) ? 0 : getGatewayId().hashCode());
        hashCode = prime * hashCode + ((getRouteTableId() == null) ? 0 : getRouteTableId().hashCode());
        return hashCode;
    }

    @Override
    public EnableVgwRoutePropagationRequest clone() {
        return (EnableVgwRoutePropagationRequest) super.clone();
    }
}


text:
//*******************************************************************************************//
//                                                                                //
// Download Free Evaluation Version From: https://bytescout.com/download/web-installer       //
//                                                                                //
// Also available as Web API! Get Your Free API Key: https://app.pdf.co/signup               //
//                                                                                //
// Copyright © 2017-2020 ByteScout, Inc. All rights reserved.                                //
// https://www.bytescout.com                                                                 //
// https://pdf.co                                                                            //
//                                                                                //
//*******************************************************************************************//

/*jshint esversion: 6 */

// Please NOTE: In this sample we're assuming Cloud Api Server is hosted at "https://localhost".
// If it's not then please replace this with with your hosting url.

var https = require("https");
var path = require("path");
var fs = require("fs");

// `request` module is required for file upload.
// Use "npm install request" command to install.
var request = require("request");

// Source PDF file
const SourceFile = "./sample.pdf";
// Comma-separated list of page indices (or ranges) to process. Leave empty for all pages. Example: '0,2-5,7-'.
const Pages = "";
// PDF document password. Leave empty for unprotected documents.
const Password = "";

// 1. RETRIEVE PRESIGNED URL TO UPLOAD FILE.
getPresignedUrl(SourceFile)
    .then(([uploadUrl, uploadedFileUrl]) => {
        // 2. UPLOAD THE FILE TO CLOUD.
        uploadFile(SourceFile, uploadUrl)
            .then(() => {
                // 3. CONVERT UPLOADED PDF FILE TO JPEG
                convertPdfToJpeg(uploadedFileUrl, Password, Pages);
            })
            .catch(e => {
                console.log(e);
            });
    })
    .catch(e => {
        console.log(e);
    });

function getPresignedUrl(localFile) {
    return new Promise(resolve => {
        // Prepare request to `Get Presigned URL` API endpoint
        let queryPath = `/file/upload/get-presigned-url?contenttype=application/octet-stream&name=${path.basename(SourceFile)}`;
        let reqOptions = {
            host: "localhost",
            path: encodeURI(queryPath)
        };
        // Send request
        https.get(reqOptions, (response) => {
            response.on("data", (d) => {
                let data = JSON.parse(d);
                if (data.error == false) {
                    // Return presigned url we received
                    resolve([data.presignedUrl, data.url]);
                }
                else {
                    // Service reported error
                    console.log("getPresignedUrl(): " + data.message);
                }
            });
        })
            .on("error", (e) => {
                // Request error
                console.log("getPresignedUrl(): " + e);
            });
    });
}

function uploadFile(localFile, uploadUrl) {
    return new Promise(resolve => {
        fs.readFile(SourceFile, (err, data) => {
            request({
                method: "PUT",
                url: uploadUrl,
                body: data,
                headers: {
                    "Content-Type": "application/octet-stream"
                }
            }, (err, res, body) => {
                if (!err) {
                    resolve();
                }
                else {
                    console.log("uploadFile() request error: " + e);
                }
            });
        });
    });
}

function convertPdfToJpeg(uploadedFileUrl, password, pages) {
    // Prepare URL for `PDF To JPEG` API call
    var queryPath = `/pdf/convert/to/jpg?password=${password}&pages=${pages}&url=${uploadedFileUrl}&async=True`;
    let reqOptions = {
        host: "localhost",
        path: encodeURI(queryPath),
        method: "GET"
    };
    // Send request
    https.get(reqOptions, (response) => {
        response.on("data", (d) => {
            response.setEncoding("utf8");
            // Parse JSON response
            let data = JSON.parse(d);
            if (data.error == false) {
                console.log(`Job #${data.jobId} has been created!`);
                checkIfJobIsCompleted(data.jobId, data.url);
            }
            else {
                // Service reported error
                console.log("convertPdfToJpeg(): " + data.message);
            }
        });
    })
        .on("error", (e) => {
            // Request error
            console.log("convertPdfToJpeg(): " + e);
        });
}

function checkIfJobIsCompleted(jobId, resultFileUrlJson) {

    let queryPath = `/job/check?jobid=${jobId}`;
    let reqOptions = {
        host: "localhost",
        path: encodeURI(queryPath),
        method: "GET"
    };

    https.get(reqOptions, (response) => {
        response.on("data", (d) => {
            response.setEncoding("utf8");

            // Parse JSON response
            let data = JSON.parse(d);
            console.log(`Checking Job #${jobId}, Status: ${data.status}, Time: ${new Date().toLocaleString()}`);

            if (data.status == "working") {
                // Check again after 3 seconds
                setTimeout(function(){checkIfJobIsCompleted(jobId, resultFileUrlJson)} , 3000);
            }
            else if (data.status == "success") {

                request({ method: 'GET', uri: resultFileUrlJson, gzip: true },
                    function (error, response, body) {

                        // Parse JSON response
                        let respJsonFileArray = JSON.parse(body);
                        let page = 1;

                        respJsonFileArray.forEach((url) => {
                            var localFileName = `./page${page}.jpg`;
                            var file = fs.createWriteStream(localFileName);
                            https.get(url, (response2) => {
                                response2.pipe(file)
                                    .on("close", () => {
                                        console.log(`Generated JPEG file saved as "${localFileName} file."`);
                                    });
                            });
                            page++;
                        }, this);

                    });
            }
            else {
                console.log(`Operation ended with status: "${data.status}".`);
            }
        })
    });
}

redpajama_set_name: RedPajamaGithub


text:
<?xml version="1.0" ?>

<container xmlns="http://symfony.com/schema/dic/services"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">

    <parameters>
        <parameter key="geekhub.tag.tag_manager.class">Geekhub\TagBundle\TagManager</parameter>
        <parameter key="geekhub.tag.tag_subscriber.class">Geekhub\TagBundle\EventListener\TagSubscriber</parameter>
    </parameters>

    <services>
        <service id="geekhub.tag.tag_manager" class="%geekhub.tag.tag_manager.class%" parent="fpn_tag.tag_manager" />

        <service id="geekhub.tag.tag_subscriber" class="%geekhub.tag.tag_subscriber.class%">
            <argument type="service" id="service_container"/>
            <tag name="doctrine.event_subscriber" connection="default" />
        </service>
    </services>

</container>


text:
package ufsc.bd1.org.model;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.SequenceGenerator;
import javax.persistence.Table;
import java.util.Date;

@Entity
@Table(name = "Pedido")

public class Pedido {

	@Id
    @SequenceGenerator(name="pk_sequence",sequenceName="seq_Pedido_pk", allocationSize=1)
    @GeneratedValue(strategy=GenerationType.SEQUENCE,generator="pk_sequence")
	@Column(name="ID_pedido", unique=true, nullable=false)
	private Integer id;

	@Column(name = "data")
	private Date data;

	@Column(name = "descricao")
	private char descricao;

	@ManyToOne
	@JoinColumn(name = "ID_fornecedor")
	private Fornecedor fornecedor;

	@ManyToOne
	@JoinColumn(name = "ID_pessoa")
	private Pessoa pessoa;

	public Pedido(){}

	public Pedido(int id, Date data, char descricao, Fornecedor fornecedor, Pessoa pessoa)
	{
		this.setId(id);
		this.setFornecedor(fornecedor);
		this.setPessoa(pessoa);
		this.setData(data);
		this.setDescricao(descricao);
	}

	public Pedido(Date data, char descricao, Fornecedor fornecedor, Pessoa pessoa)
	{
		this.setFornecedor(fornecedor);
		this.setPessoa(pessoa);
		this.setData(data);
		this.setDescricao(descricao);
	}

	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public Fornecedor getFornecedor() {
		return fornecedor;
	}
	public void setFornecedor(Fornecedor fornecedor) {
		this.fornecedor = fornecedor;
	}
	public Pessoa getPessoa() {
		return pessoa;
	}
	public void setPessoa(Pessoa pessoa) {
		this.pessoa = pessoa;
	}
	public Date getData() {
		return data;
	}
	public void setData(Date data) {
		this.data = data;
	}
	public char getDescricao() {
		return descricao;
	}
	public void setDescricao(char descricao) {
		this.descricao = descricao;
	}
}


text:
+++
Talk_date = ""
Talk_start_time = ""
Talk_end_time = ""
Title = "Observability for Developers: How to Get From Here to There"
Type = "talk"
Speakers = ["christine-yen"]
+++

There's been a lot of talk about software ownership—but what does "owning code in production" really mean for developers, day to day? Many development teams still reach for logs in production as the most familiar way to bridge the development environment with production.

This talk will make the case that observability—and the skills to craft the right graphs and read them—benefits developers **more** than it does operators by examining several instances where well-informed devs can supercharge their development process:

- Data-driven product decisions (or how to know more about what needs to be done than your PM)
- Rewrites and migrations
- Feature flags and "testing in production"
- Fine-grained performance analysis

Then, we'll lay out a series of steps to get your team from grepping unstructured text logs to outputting and analyzing well-structured traces. Instrumentation and observability aren't all-or-nothing endeavors, and attendees should leave with an idea of "the next step" they can take to improve their ability to understand their production systems.


text:
layout: default
title: Jackee H. | Tuned
permalink: tuned

---

    MENU

PORTFOLIO

ABOUT

CONTACT

          Tune Into This

          Tuned is a mobile music app that is great for listening to your favorite tracks, creating and sharing playlists, but also for discovering new music and artists.

Target users included millennials who love to listen to music on-the-go, while they exercise, and connect their mobile device to their cars or speakers.

 iOS UI Design

 Suggested Playlist

 Song Play View

 Search Results

 Library View

 Simple Nav View

 Empty Search View

 BitBox

Design

 Crystal Aura

eCommerce Design

Home

Portfolio

About

Contact

Designed and developed © Jackee Hernandez


text:
sudo dnf install cockpit
sudo systemctl enable --now cockpit.socket
sudo firewall-cmd --add-service=cockpit
sudo firewall-cmd --add-service=cockpit --permanent


text:
<!doctype html>

		<meta charset="utf-8">

		<title>Mockups to Code | GDI Austin</title>

		<meta name="description" content="Girl Develop It framework for easily creating beautiful presentations using HTML in GDI theme. Forked from Hakim El Hattab's reveal.js">
		<meta name="author" content="Girl Develop It">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/gdi_elyse.css" id="theme">

		<link rel="stylesheet" href="lib/css/dark.css">

		<link rel="icon" type="image/x-icon" href="favicon.ico" />

Mockups to Code

Let's Draw Boxes~

HTML Theory

What is a div anyway?

Display States

The Box Model

Margin Collapsing

Box Sizing

Name All the Things

Basic Naming

A Word about DRY

Page Structure Markup

Making it Pretty!

float: left;

What is a Float?

Floating is Weird: Widths

Floating Exercises

No, it's Really Weird: Clearing

The Clearfix

Laying Out

CSS In Use

Classes & IDs

Specificity

Organizing & Commenting

OOCSS, SMACSS, & DRY

CSS File Organization

A Brief Note about Sass

Making it Pretty Part 2

Stuff

Modules: Wrappers & Navs

Pictures

CSS3

Boxes!

Web layouts are made of them.

						Let's all look at our mockups and identify some basic parts of these layouts. Draw/outline those on your mockups!
						header w/ logo and nav, banner, about, hours/directions, footer. these are the main sections.
						Next we're going to talk about the basic HTML building blocks that are going to make up the boxes we outlined earlier.

HTML Theory

Divs, Display States, Box Model, Margins & Box Sizing

What is a Div, Anyway?

The building blocks of HTML layout are <div>s—generic containers that have no semantic meaning. You can think of a <div> as a rectangular box.

Compare to the semantically named <p> (paragraph), or <a> being an anchor link.

A <div> with nothing in it is an "invisible" box. A <div> with no CSS applied only has the dimensions of its content.

					You can give a div height, width, margin, padding, or a position, in terms of layout.

A Wild Div Appears

Let's take a look at some basic, vanilla <div>s.*

  <div>
	header
	<span>logo</span>
	<div>nav</div>
  </div>
  <div>banner</div>
  <div>about</div>
  <div>hours and directions</div>
  <div>footer</div>

 div {border: 1px solid blue;}

* and a sad, lonely span.

						There's one for each section of our mockup that we drew on earlier. Load it up in your editor and your browser. In the browser we should see those four words, each on a new line, with a blue outline. If you pull up your style.css file you'll see div {border: 1px solid blue;} which is giving them the borders.

Display Style

<div>s (and other HTML elements) typically have three display states.

  display: block;
  display: inline;
  display: inline-block;

					There are many more display states (provide link) but these are the most commonly used

display: block;

By default, a <div> is block level.

Block level elements begin on a new line on a page and occupy 100% of the available width (on the page or of its parent element).

A block level element will be as wide as it's available space and as tall as the content that is inside it.

That's what our divs are doing right now: they are taking up the full page width and the height of the content that is inside them.

						Divs can get height, width, etc.

display: inline;

An inline element can only have the height or width of what is inside it—you cannot apply height or width to them in CSS—, and displays "in the line" of text.

An inline element can wrap some text inside a paragraph like this without disrupting the flow of that paragraph.

  <span>like this</span>

					The <a> element is the most common inline element. <span> is the second most common, typically used for wrapping some content without adding a block-level element like a <div>.

display: inline-block;

inline-block is a hybrid of these two. An inline-block element can have height and width, but it doesn't start on a new line and doesn't break the flow:
this example
 is 200px wide and 100px tall but the rest of this paragraph continues to flow around it, as if it were an inline element.

DIY

Check out this Pen!

						Remember, inline elements can't get a width or height! But they can get visual styles. Inline-block can get a width/height. Block elements can get a width but they won't flow next to each other as every block div starts on a new line.

The Box Model

What is the Box Model?

The box model is the specification that defines how a box and its attributes relate to each other.

It consists of four parts, in order: Margin, Border, Padding, Content.

border

The border surrounds the box.

margin

Margin is the space outside the <div>'s border; this space typically separates it from other <div>s.

padding

Padding is the space inside the <div>'s border; this space usually gives the text or images inside a <div> some room away from the border.

DIY

Let's add some margin and padding and see how they affect our <div>s and our <span>.

Check out this Pen!

						cool: now all our divs are appearing with space between them!

But Wait...

Anyone noticing some weird things about this?

Why is the margin on the left and right the same as the margin between each of our <div>s? Shouldn't it be bigger?

Why is our 400px wide span actually 440px wide??

...and how can I tell!?

A Brief Note on Dev Inspector!

						mention: cursor overlay of the box model, selecting divs and seeing their CSS, debugging

Margin Collapsing

"In CSS, the adjoining margins of two or more boxes can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin."

						--w3 Spec on Collapsing Margins

Margin Math

Our stacked divs all have a bottom margin of 40px and a top margin of 40px.

When those two margins touch, instead of adding 40+40, it takes the larger of the two margins.

(In our case, they're the same, but if one was 10 and one was 20, it'd be 20.)

as one astute stackoverflow commenter put it,

"What is the point of CSS collapsing margins?"

						Learn more:
						http://www.w3.org/TR/CSS21/box.html#collapsing-margins
						http://stackoverflow.com/questions/3069921/what-is-the-point-of-css-collapsing-margins
						http://reference.sitepoint.com/css/collapsingmargins

& Box Sizing

"When you set the width of an element, the element can actually appear bigger than what you set: the element's border and padding will stretch out the element beyond the specified width. Look at the following example, where two elements with the same width value end up different sizes in the result."

						--learnlayout.com Box Model

Box Sizing Math:

margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

20 + 6 + 20 + 400 + 20 + 6 + 20 = 492px

"Over the generations, people realized that math is not fun, so a new CSS property called box-sizing was created. When you set box-sizing: border-box; on an element,... the padding and border of that element no longer increase its width."

						--learnlayout.com Box Sizing

In plain English, this just means the padding is subtracted from the total width, rather than adding to it.

You can add it globally using the CSS * selector, so all your math becomes easier:

  * {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
  }

					http://paulirish.com/2012/box-sizing-border-box-ftw/

DIY

Check out this Pen!

						Name All The Things!

Basic Naming, DRY, Page Structure Markup

					Let's go back to our mockup and do the box drawing exercise around all the rest—the paragraphs, titles, etc. Then let's add HTML with classes, and the content (provided in a text file).

Basic Naming

Now we have four stacked divs—great. We've written their purposes inside each one, but our code doesn't know the difference; they're all just <div>s.

We can reference our <span> separately, because it's the only <span> on the page, right? But how do we reference our <div>s individually?

Classes

Classes (and IDs) are just names we can apply to any HTML element. They don't have any styling information to them all by themselves. They provide us a way to reference an element by a name.

					We'll talk about this more tomorrow, on class/id and semantics and naming theory, but for now, we're just going to give all our divs and stuff names!

Name All The Things!

  <div class="header">
	header
	<div class="logo">logo</div>
	<div class="nav">nav</div>
  </div>
  <div class="banner">banner</div>
  <div class="about">about</div>
  <div class="hoursdirections">hours and directions</div>
  <div class="footer">footer</div>

						Since we already know what our divs are, I bet you can guess what we are going to name them, right? Note I converted that span to a div, since it's a more common thing to use, it doesn't need to be a span.

						If you refresh you'll notice there's no difference in the styles--our <div> CSS still applies. But now we can do this:

Check out this Pen!

					Now we can have generic code that applies to all divs, or specific code that only applies to one.

3 Words About DRY:
Don't Repeat Yourself

  div { margin: 20px; padding: 20px;}

This code applies to all the <div>s on the page, so we can just write it here, instead of doing this:

  .header {border: 1px solid red; margin: 20px; padding: 20px;}
  .banner {border: 1px solid black; margin: 20px; padding: 20px;}
  .about {border: 1px solid purple; margin: 20px; padding: 20px;}
  .hoursdirections {border: 1px solid green; margin: 20px; padding: 20px;}
  .footer {border: 1px solid orange; margin: 20px; padding: 20px;}

						Did you notice how we divided up our CSS just now? Much shorter and easier to read.

D.R.Y means "Don't Repeat Yourself". So where possible, if you can condense your styles, you should!

Adding Content

Obviously there's a lot more in our mockup than a word or two. Let's go back to our mockup and do the box drawing exercise around all the rest—the paragraphs, titles, etc.

						Write HTML w/ classes for each section and put the content from content.md in it. Then we'll go thru each section and look at some more detailed HTML for it.

The Header

Our div.logo will have an image in it, but for now let's just write the name of our coffeeshop, Vintage Heart Coffee.

The navigation will be in the new HTML5 attribute <nav> and contain a set of links.

You're probably used to seeing navigations in a <ul> unordered list, but for accessibility, we're learning this might not be the best.

					The role="navigation" is an ARIA accessibility thing to tell screen readers what type of section this is. You can apply it to a div.navigation as well if your site can't use HTML5.

  <div class="header">
	<div class="logo">Vintage Heart Coffee</div>
	<nav role="navigation">
	  <a href="#">hours &amp; directions</a>
	  <a href="#">baristas</a>
	  <a href="#">press</a>
	  <a href="#">blog</a>
	</nav>
  </div>

The Banner

The banner here is a big image, but we're not ready to add images. Instead let's just add our content as text.

We have a tagline, and an address.

  <div class="banner">
	<div class="tagline">Love your coffee</div>
	<div class="address">1405 East 7th Street, Austin</div>
  </div>

About

We'll put each header in an <h4> tag, which tells us it's a header, but not as important as an h1, and then each paragraph into a <p> paragraph element.

					Add .introtext in day two, so we can use that as a layout problem.

  <div class="about">

	  <h4>Slow Down.</h4>
	  <p>[text goes here]</p>
	  <h4>Third Space</h4>
	  <p>[text goes here]</p>

	  <h4>Local Coffee &amp; Pastries</h4>
	  <p>[text goes here]</p>
	  <p>[text goes here]</p>

  </div>

Hours & Directions

Here we have a map, which will be an image. To the left we have an address and the hours.

  <div class="hoursdirections">
	<div class="map">
	  [map goes here]
	</div>
	<div class="address">
	  1405 E. 7th. Austin, TX 78702
	</div>
	<div class="hours">
	  Open every day from 7am til 10 pm.
	</div>
  </div>

Footer

Lastly, we have the footer, which is basically a duplication of the header, but without the logo.

Note the #s in the link hrefs? Because those pages don't exist yet, we're just adding placeholder URLs. Like the images, we'll come back and fill these in later.

  <div class="footer">
	<nav role="navigation">
	  <a href="#">hours &amp; directions</a>
	  <a href="#">baristas</a>
	  <a href="#">press</a>
	  <a href="#">blog</a>
	</nav>
  </div>

		At this point we should have barebones.html

Making it Pretty!

Background, Margin, Colors, Fonts

					Typically here we'd go straight into layout and floating, but considering our 4 hr/2 day schedule I wanted to end on something more fun so we will get to the weird complicated floating stuff tomorrow!

Backgrounds

Let's add some background colors to each section instead of borders, so they're more visible and less ugly!

  body {
	background: #F7F5F2;
  }

  .header {
	background: #F7F5F2;
  }

  .banner {
	background: #4D717A;
  }

  .about { /* no background */ }

  .hoursdirections {
	background: #ffffff;
  }

  .footer {
	background: #222222;
  }

Margins

If we remove the margin from the <div> element in our CSS we'll see that things stack closer together, which is what we want. But they don't touch the edge. Why?

The browser automatically applies a margin (of 8px) to the body. Most of the time you'll apply margin: 0; to the body to override it and get full-width backgrounds.

  body {
	margin: 0;
  }

Font Colors

  body {
	color: #222;
  }

  .logo {
	color: #555;
  }

  .banner {
	color: #fff;
  }

  .about h4 {
	color: #a18c9c;
  }

  .hoursdirections {
	color: #694160;
  }

					The '.about h4' thing we will discuss tomorrow in more detail, but has anyone here seen that before? Do you know what it does? It says "only h4's within the .about div".

Link Colors

  a, a:active, a:visited {
	color: #4d717a;
	text-decoration: none;
  }

  a:hover, a:focus {
	color: #9cb89a;
	text-decoration: none;
  }

Fonts

Let's add some fonts—we'll use a Google Web Font and a regular websafe font fallback.

First we'll add the Google Web Font link into the head of our HTML page.

  <link href='http://fonts.googleapis.com/css?family=Noto+Sans:700|Noto+Serif:400,700' rel='stylesheet' type='text/css'>

Then we'll add the font-family declaration in our CSS, along with some other font styles.

  body {
	font-size: 100%;
	line-height: 1.5em;
	font-family: "Noto Serif", Georgia, serif;
  }

  h1, h2, h2, h4, h5, nav {
	font-family: "Noto Serif", Georgia, serif;
	text-transform: uppercase;
  }

We're Getting There!

					Tomorrow we'll go over layout, floats, CSS commenting and organization, and polishing up our coffeeshop page!

float: left;

Layout Time!

What is a Float?

Floating was originally intended to "float" images around text1.

"The practice of flowing text around an image goes back a long, long time. That's why the ability was added to the Web starting with Netscape 1.1, and why CSS makes it possible using the property float."

"The purpose of the CSS float property is to push a block-level element to the left or right, ...allow[ing] naturally-flowing content to wrap around the floated element. This concept is similar to what you see every day in print literature."

					— Smashing Magazine Float Theory

						The CSS1 spec from December 17, 1996.

						Check out that rad background!1

Eric Meyer, July 17, 2004

"Floats have been bent to the purpose of large-scale layout for exactly one reason: clear. Because you can clear a footer below two floated columns, float layout came into being.  If there had ever been a way to "clear" elements below positioned elements, we'd never have bothered to use floats for layout.  We'd have used floats in layouts, but that's not the same thing."

— Floats Suck if you Don't Use Them Right

We Abuse Floats for Layout

"Take the common page layout with a section and an aside. The section and aside, as block level elements, will be stacked on top of one another by default. However, we want them to sit side by side."

— Shay Howe

Try it Yourself!

OK, so, float: left;?

Check out this Pen!

					OK.. well, that isn't exactly what we wanted.
					Why?

"Important Things to Note"

"...when floating an element it is going to float all the way to the edge of its parent container. If there isn't a parent element it will float all the way to the edge of the page."

Secondly, because floated elements "are taken out of the flow", the other block elements around them act as if they aren't there.

Elements after it ignore the floated elements and appear where they normally would if the float element wasn't there.

Block Elements = Full Width

Third, if you'll remember back to our display slides, a block element takes up all it's available width. A floated element that does not have a pre-defined width will take up only as much horizontal space as its content.

This is why we are seeing the behavior we just saw: our .sidebar is now all the way to the left of the page, the .main element is acting like the .sidebar isn't there, and the .sidebar is only as wide as its content (the word "sidebar").

					Note that the _word_ sidebar is wrapping around the div, but the actual div.main is all the way to the left of the page. if you imagine .sidebar as an image, this is what you'd expect from a print-style floated layout.

Floats with Widths

So we just add a width to .sidebar, right?

						OK, not quite. Why?

Moar Widths

Because .main is still a block element, it will still take up 100% of the width of the page. So even though we set a  width on .sidebar, .main isn't next to it because it's 100% wide.

					Suggestions on what to do next? [answers: a) give .main a width or b) float .main. correct fix is both.]

Give .main a width

This makes .main small enough to be next to .sidebar, but block elements start at the beginning of a new line, and ignore floated elements, so .main is still starting at the edge of the page instead of beside .sidebar.

float .main

If we float .main without giving it a width, it does exactly what .sidebar did: take up only the width of its content, the word "main".

Now .main floating correctly beside .sidebar, but it's skinny, and now the .footer is all up in our business.

float .main AND give it width

OK.. better! But why is .footer still all up in my business?

Floats are Weird: Clearing

Because floated elements are "taken out of the flow", the other block elements around them act as if they aren't there. Elements after it ignore the floated elements and appear where they normally would if the float element wasn't there.

So .footer is appearing where it should, right after our last non-floated element (.header), and ignoring the two floated elements in between it.

clear: both/left/right/none;

What we want .footer to do is respect that there's two elements above it, even though they are floated.

The clear property will force a <div> to fall below the two floated elements.

Clear has four values: both/left/right/none.

clear: left will only clear left-floated elements.
clear: right will only clear right-floated elements, and clear: both will clear anything.

Clear the .footer

Add clear: both;, since we want to clear both .main and .sidebar

					Ah, that's what we wanted, isn't it! Starting to look like a webpage!

Clearing Part 2: The Clearfix

Let's float .tagline to the right, so we can have the logo and tagline appearing side by side.

Why is .tagline now appearing half in and half out of .header? and why is it pushing .main down?

					There's a second use for clears, and to explain it we'll need to learn a little more about floats and the flow.

Floats Aren't Content

Floated elements don't count as content of their parent <div>, so they don't count as height.

The parent element (.header) will be the height of whatever content is inside it, so .tagline doesn't count for the height of .header.

So what we need to do to fix both of these problems is make .header recognize .tagline as being inside it, and make .sidebar and .main start on the same line.

Any Ideas?

Let's see what putting a clear on .sidebar gets us.

This makes .sidebar and .main start on the same line, because we are making .sidebar clear any floats that are above it. But it didn't fix our containment problem.

float the parent

A floated element will expand to contain any floated elements that descend from it.

If we float .header left, it suddenly will include .tagline in its content. However, it is now only as wide as its content, which is the word "header" + the .tagline box.

Additionally, if we remove the clear: both; on .sidebar, .sidebar will now float up next to .header. So this fix can work in some cases, but not in all.

The Clearfix

What we REALLY want is to clear after the .tagline but before the close of .header.

If we clear .sidebar, we are clearing after .header. But there's no <div> after .tagline to put clear: both; on.

So we're going to rely on some CSS magic:

  .header:after {
	content: "";
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
  }

:after

:after is a CSS pseudo-selector that means "after the element".

Since :after isn't really a DOM element, we have to put some content in it, so we define content: "";, which makes the browser believe there's some content in this fake :after thing.

Then we make it a block level element, but hide it with visibility: hidden; and set it to height: 0; so that it never actually appears, and then we apply clear: both; to it.

Laying Out

Floats for layout, columns

					go through each section like we did on day one and do the layout part

The Header

Here we want our logo floated to the left, and our navigation to the right and for the header to appropriately contain both floated elements.

Our nav text items are already styled. We want header to have a bottom border, and a background color.

Later we'll add the image logo.

  <div class="header">
	<div class="logo">Vintage Heart Coffee</div>
	<nav role="navigation">
	  <a href="#">hours &amp; directions</a>
	  <a href="#">baristas</a>
	  <a href="#">press</a>
	  <a href="#">blog</a>
	</nav>
  </div>

  .header {
	padding: .75em 0 .5em;
	background: #F7F5F2;
	border-bottom: 5px solid #a8988b;
  }

	.header:after {
	  content: "";
	  height: 0;
	  display: block;
	  visibility: hidden;
	  clear: both;
	}

	.logo {
	  color: #555;
	  float: left;
	}

	nav {
	  float: right;
	}

The Banner

We'll get to images at the end, so for now let's just add plenty of padding to make this as big as we want it and give it a bottom border.

Give your tagline and address their font sizes.

  <div class="banner">
	<div class="tagline">Love your coffee</div>
	<div class="address">1405 East 7th Street, Austin</div>
  </div>

  .banner {
	background: #4d717a;
	color: #fff;
	border-bottom: 1px solid #a8988b;
	padding: 120px 50px;
  }

	.tagline {
	  font-size: 100px;
	}

	.address {
	  font-size: 30px;
	}

About

Our about section is actually two columns, so knowing what we know about floats, we could just give each h4 and p a width and they'd get all columned up, right?

New CSS like flexbox may allow for that, but for now let's just use some good old-fashioned divs, one for each column.

  <div class="about">

	<div class="introtext">
	  <h4>Slow Down.</h4>
	  <p>[text goes here]</p>
	  <h4>Third Space</h4>
	  <p>[text goes here]</p>
	</div>

	<div class="introtext">
	  <h4>Local Coffee &amp; Pastries</h4>
	  <p>[text goes here]</p>
	  <p>[text goes here]</p>
	</div>

  </div>

About

Note that you shouldn't name your <div>s .leftcolumn and .rightcolumn--what if you switched them?

I picked .introtext, which says something about the content it contains. Semantic names can be a little difficult to choose, but try to explain what's it is or does, not what it looks like.

Now let's give each of those .introtexts a width and a float. And since we're floating them, be sure to give .about a clearfix, too!

  .about {
	background: #ffffff;
  }

	.about:after {
	  content: "";
	  height: 0;
	  display: block;
	  visibility: hidden;
	  clear: both;
	}

	.about h4 {
	  color: #a18c9c;
	}

	.introtext {
	  float: left;
	  width: 50%;
	}

	.about p {
	  color: #222f42;
	}

Why didn't our .introtexts float?

Debugging

But seriously: the best tool to debug CSS is the Dev Inspector and a trusty border: 1px solid red;. Try it out.

Anyone remember the box-sizing from earlier? Because all of our <div>s have padding on them, 50% (of the page) + 20px of padding actually equals MORE than 50% of the page.

Let's remove that padding: 20px;, since we may not want EVERY <div> to have it, and let's add that box-sizing property back in.

  * {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
  }

  /*div {
	padding: 20px;
  }*/

Hours & Directions

Let's make sure the address and hours float correctly to the left.

The map we can give an approximate size in the CSS and float it right. Since it's first, we can just float the others left without having to clear anything.

					Talk about height trick/non-clearing background when you add the image.

  <div class="hoursdirections">
	<div class="map">
	  map goes here
	</div>
	<div class="address">
	  1405 E. 7th. Austin, TX 78702
	</div>
	<div class="hours">
	  Open every day from 7am til 10 pm.
	</div>
  </div>

  .hoursdirections {
	background: #ffffff;
	color: #694160;
  }

	.hoursdirections:after {
	  content: "";
	  height: 0;
	  display: block;
	  visibility: hidden;
	  clear: both;
	}

	.hoursdirections .address {
	  color: #694160;
	  text-transform: uppercase;
	  font-size: 2em;
	  margin: 3em 0 .5em;
	  float: left;
	  width: 45%;
	}

	.hoursdirections .hours {
	  float: left;
	  clear: left;
	  width: 45%;
	  color: #798a77;
	  font-size: 1.25em;
	}

	.hoursdirections .map {
	  float: right;
	  background: black;
	  width: 45%;
	  height: 220px;
	}

Footer

Not much to do here—the background color is already added. Let's give it some more padding (spacing) so it's more readable.

We don't want our nav to float to the right, so let's override the float: right; just for the .footer.

Nav links will be different than the header, but we'll get to that after our CSS section.

  <div class="footer">
	<nav role="navigation">
	  <a href="#">hours &amp; directions</a>
	  <a href="#">baristas</a>
	  <a href="#">press</a>
	  <a href="#">blog</a>
	</nav>
  </div>

  .footer {
	background: #222;
	padding: 60px;
  }

	.footer nav {
	  float: none;
	}

CSS In Use

Classes & IDs, Specificity, Organization, & Tools

Classes & IDs

Adding a class name or ID to an element does nothing to that element by default. Remember, it's just a name.

IDs are unique.

Each element can have only one ID, and each page can have only one element with that ID.

Classes are reusable.

You can use the same class on multiple elements, and you can use multiple classes on the same element.

Any styling information that needs to be applied to multiple objects on a page should be done with a class.

  <div class="widget"></div>
  <div class="widget"></div>
  <div class="widget"></div>

You can now use the class name .widget as your hook to apply the same set of styling to all of these.

Combinations

There is nothing stopping you from having both an ID and a class on a single element.

  <div id="widget-12345" class="widget">[widget text]<div>

.widget is a class for styling all widgets, and #widget-12345 is a unique ID that we can use to reference that particular widget in JavaScript, or to link directly to it as a unique URL.

Multiples

What if you need one .widget to be bigger than the rest, but still share all the other attributes?

  <div class="widget"></div>
  <div class="widget big"></div>
  <div class="widget"></div>

  .widget {
	background: blue;
	padding: 20px;
	color: white;
  }

  .big {
	background: red;
  }

Chaining

What is the difference between these two selectors?

  .widget.big { }

  .widget .big { }

A Single Space

They look nearly identical, but the top one has no space between .widget and .big while the bottom one does. This small difference makes a huge difference in what it does. To some of you, that top selector may seem like a mistake, but it's actually a quite useful selector.

Example from css-tricks.com

In English...

  .widget.big { }

Select the element which has a class name of .widget and ALSO a class name of .big.

  .widget .big { }

Select all elements with the class name .big that are descendents of the element .widget.

						http://css-tricks.com/multiple-class-id-selectors/

Don't Be Redundant

  <a href="http://css-tricks.com" class="link">CSS-Tricks.com</a>

We already know this element is a link—it's built-in to the element.

If you want to style it like a link, you can use the element <a>. If you are making a more complex site and need to distinguish between types of links, choose a better classname. For example: .search_link and .profile_link.

Be Semantic

"When choosing a class or ID it is important to choose something that has value to the actual context of that element."

"For example, if you have a div with an orange background that contains social media links your first inclination might be to give the div a class of .orange. What happens if that orange background is later changed to blue? Having a class of .orange. no longer makes sense. A better, more semantic, choice for a class would be .social. as it pertains to the contents of the div, not the style."

— Shay Howe

"Class names should never map directly to a CSS property, or a given visual effect you want to achieve (such as floating, or a border effect, or a background colour, etc.). It's shockingly bad as an ideology because it encourages a direct mapping between class name and display action. A class name, like an ID, should be descriptive in a semantic sense. ie., it should describe something about the content of the tag to which it applies. "float" is not describing content. It is describing an action you want to perform."

— Matt Wilcox, Naming and using id's and classes properly

Why Not to Use IDs

There can only be one element with an ID per page, so that element is not re-usable on that page.

There are also very few cases where ID-based styles will never be reused. Let's say you have a #search box in your header. Then later you decide to add it to the footer, too.

What is confusing is that your CSS will still apply. However, if you're using JavaScript on that #search, it will now break, because the JavaScript doesn't know which one.

It's almost always better to use "several reusable snippets of CSS" with classes instead of IDs to prevent this potential issue. A good rule of thumb for me is that unless it's truly unique, like our .widget-12345 example, use a class.

						http://oli.jp/2011/ids/

Specificity

What is Specificity?

The "C" in CSS stands for "cascading." We typically take that to mean a style rule later in the stylesheet will override a previous one.

CSS is more complicated, though. It assigns each selector a "weight" based on how specific it is. The more specific your selector, the more precedence it will have.

Browsers Read Backwards

Browsers read right to left. The right-most selector is the "key selector".

  #home a { }

"We'd generally read this selector as "find the element with #home", then apply these styles to every a it contains". This should be super-fast, right? After all there should only be one #home on the page. However, browsers read this differently: "find every a element, then check if its parent element is #home, and if not keep checking parent elements until you find it or reach <html>". That's a lot less performant than our mental model."

— oli.jp on IDs

Weight

Give each HTML element selector 1 point. Example: p

Give each class selector 10 points. Example: .column

Give each id selector 100 point. Example: #wrap

Add up the points for each piece of the selector to get the full value of the selector.

Check out this Pen!

The Reference Docs

CSS-Tricks: The Specifics on CSS Specificity

Smashing Magazine: CSS Specificity & Inheritance

Smashing Magazine: CSS Specificity Things you Should Know

"Using an ID over a class also ratchets up the specificity all the way to Darth Sidious in Andy Clarke's Star Wars-themed guide to CSS specificity. While you might not think this is a big deal, it quickly leads to a full-on selector battle. This problem becomes worse as the CSS gets larger, and more people get involved, leading to crazy-specific selectors like .entry #content_main div.post a {…}. This rule could probably be rewritten at least as .entry .post a {…}, or maybe .post a {…}, but changing it to .post-link {…} would be even better. My rule of thumb is three CSS selectors max — any more than this and it's generally a sign of (specificity) problems."

— oli.jp on IDs

Organizing & Commenting

Commenting Rules of Thumb

Comment every big section of CSS/HTML

Comment any individual items that may need clarification

Be consistent

There are loads of CSS style guides and organizational references. Here's a few I like: KSS (GitHub), Idiomatic CSS, CSSWizardry, and more.

SMACSS

SMACSS stands for Scalable Modular Architecture for CSS, a book written by Jonathan Snook.

Categorize your CSS Rules

"At the very core of SMACSS is categorization. By categorizing CSS rules, we begin to see patterns and can define better practices around each of these patterns."

Base — These are your defaults (html, body, h1, ul, etc)

Layout — These divide the page into major sections

Module — These are the reusable modular components of a design

State — These describe how things look when in a particular state (hidden or expanded, active/inactive)

Theme — These define things like a color scheme or typographic treatment across a site

OOCSS

OOCSS, or Object Oriented CSS, created by Nicole Sullivan, breaks CSS out into reusable modules.

It has two main principles: separate structure from skin, and separate container from content.

— Smashing Magazine: An Introduction to OOCSS

						"Like Object Oriented CSS, SMACSS is an approach to writing css and html with more emphasis placed on using classes. Unlike OOCSS, it doesn't suggest using classes for everything. It's fine with IDs and descendent selectors where appropriate."

A Quick Example

  .button {
	width: 200px;
	height: 50px;
  }

 .widget {
	width: 500px;
	height: auto;
	float: left;
  }

  .skin {
	border: solid 1px #000;
	background: #ccc;
	color: #fff
  }

  <div class="button skin">[content of a button]<div>
  <div class="widget skin">[content of a widget]<div>

					Now all the elements are using classes, the common styles are combined into a reusable "skin" and nothing is unnecessarily repeated. We just need to apply the "skin" class to all the elements and the result will be the same as what the first example would produce, except with less code and a possiblity for further reuse.

DRY: Don't Repeat Yourself

The main principles of DRY are: group reusable css properties together, and name these groups logically.

					I already touched on DRY earlier. The concept of DRY really started OOCSS/SMACSS type concepts. Never have more CSS than you need, combine it in smart ways, etc. But as sites got complex, you'd start to see styles grouped in classes that didn't make sense together. So now naming them logically is a key part.

File Organization

put CSS files in a /css or /stylesheets folder

amount of CSS is a good determining factor for breaking into files

divide your CSS into files based on type. (think SMACSS)

Making it
 Pretty
Part 2

Wrapping

So the last layout work we have to do is the width. You can see in the mock that every section has a full background color, but the content isn't full. Now it's possible to do this with some really horrible CSS, like adding left and right padding to every single div...

But obviously that is not a good idea. It's not maintainable, it's not precise, and it's definitely not reusable.

div.wrapper

Instead, let's create a .wrapper div that wraps the content inside each section. The section itself will be full width, but the wrapper inside it will constrain only the content. This ensures that each section will always be the same width, and that we'll never miss one.

  <div class="banner">
	<div class="wrapper">
	  <div class="tagline">Love your coffee</div>
	  <div class="address">1405 East 7th Street, Austin</div>
	</div>
  </div>

  .wrapper {
	width: 80%;
	margin: 0 auto;
	/*border: 1px solid red;*/
  }

					You could add this 5 times, like .about .wrapper, .hoursdirections .wrapper, etc, but you don't have to—module!

Nav CSS

In our page, our header and footer navs are the same, but the header one is floated left, and the bottom one is not (among other differences.)

The cleanest way to write this is to have a "module" for nav, and then overwrite what is necessary in each section.

  nav {
	font-family: "Noto Sans", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	/* inherit link color */
  }

	nav a {
	  padding-right: 1.5em;
	}

  /* style nav individually in modules */

  .header nav {
	float: right;
	width: 75%;
	margin-top: 1.8em;
	text-align: right;
  }

  .footer nav a,
  .footer nav a:active,
  .footer nav a:visited {
	color: #9cb89a;
  }

  .footer nav a:hover,
  .footer nav a:focus {
	color: #F7F5F2;
  }

Fixed Header

Our header in the final version is "fixed", so it doesn't scroll along with the rest of the page.

  .header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 120px;
	padding: .75em 0 .5em;
	background: #F7F5F2;
	border-bottom: 5px solid #a8988b;
  }

  body {
	margin: 100px 0 0 0;
  }

Pictures

The Logo

The logo uses ye olde "text-indent" trick. This is cool because it allows for the text to still be in the HTML, but not to display on screen.

Banner Background

The banner is a simple background image, but with one special trick:

background-size: cover;

This means "cover the entire area".

And as we saw with the logo, a background image requires a height. Here the background-size stands in for the width. I set a min-height here, rather than a fixed height, but either would work.

Tagline

Tagline uses the same text-indent trick as the logo, and again, has a height and a width.

Address

This isn't an image, but I did add some margin and padding to correctly align it where I wanted.

The negative margin value will move an element UP. Use sparingly, as layouts with this can get tricky! Pro tip: use a border to see where these elements overlap!

Footer Background

A fun trick for visual effect is adding a texture background on top of a color. The texture image is transparent (and sometimes tileable), so it will be a much smaller file than one with the bg color and texture in it. This reduces your image payload to the server!

Hours & Directions Background

Like the footer, we're using a background pattern here. Unlike the footer, this one is a repeatable image, so we don't set a location or "no-repeat".

I got this from my favorite tileable pattern library, Subtle Patterns.

Map

The map image is, unlike the others, an actual image in the HTML. It could easily be a background image, but I wanted it to overlap the footer, and a background won't do that. Can anyone guess why?

Hint 1: Our map div is floated.

Hint 2: The content of a float doesn't count as height.

Map

Because the image is in the HTML, it will always display full size, unless we give it some CSS to change that, cut it off, etc. Since our div is floated, and the content (a full size image) doesn't count as height, if we set a smaller height to the div (220px), the footer will appear right after that... but the rest of the image will still show.

This wouldn't work if the map was a background image, because to get it to fully appear, we'd have to set the height to the full height of the map image.

					An alternate solution might be to give the footer a negative top margin, but that could get a little messy.

Header Box Shadow

  .header {
	border-bottom: 5px solid #a8988b;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }

Link Transitions

  a, a:active, a:visited {
	color: #4d717a;
	text-decoration: none;
	transition: color 0.5s ease;
	-webkit-transition: color 0.5s ease;
  }

RGBa

RGBa is a way to set colors (similar to a hex value) that allows for an alphatransparency value.

Opacity opacity: .5 sets everything in the entire div to be that transparency value, which we may not want. If we just want the background color to be transparent, but not the text, opacity won't work. Enter RGBa.

  .about h4 {
	border-bottom: 2px solid rgba(161, 140, 156, .25);
  }

A Brief Note about Sass

Your last downloaded zip contains two different versions, style.scss and style.sass. These are two syntax formats that Sass allows for.

.scss looks like CSS, including punctuation, and accepts regular CSS.

.sass has no punctuation, and nesting is dependent on indentation.

What is Sass?

					Sass is a tool that makes organizing your CSS (and files) much easier. You can create variables and mixins that "include" repeatable bits of code. These are easier to edit (in one place), maintain (all code cascades from them), and organize.

Variables

  $white: #ffffff
  $grey: #cccccc
  $lightpurple: #a18c9c
  $darkpurple: #694160

  a, a:active, a:visited {
	color: $lightpurple
  }

  a:hover, a:focus {
	color: $darkpurple
  }

Mixins

  // rounded corners - all corners the same
  @mixin border-radius-all($cornervalue)
	border-radius: $cornervalue

  // rounded corners - different corners
  @mixin border-radius-mixed($topleft, $topright, $bottomright, $bottomleft)
	border-radius: $topleft $topright $bottomright $bottomleft

  .box {
	@include border-radius-mixed(0, 2px, 0, 2px)
  }

  .button {
	@include border-radius-all(2px)
  }

Importing

"Stylesheets can get pretty big. CSS has an @import directive that allows you to break your styles up into multiple stylesheets, but each stylesheet takes a separate (slow) HTTP request. That's why Sass's @import directive pulls in the stylesheets directly. Not only that, but any variables or mixins defined in @imported files are available to the files that import them."

Import Example

  /* _rounded.sass */

  @mixin rounded($vert, $horiz, $radius: 10px) {
	border-#{$vert}-#{$horiz}-radius: $radius;
	-moz-border-radius-#{$vert}#{$horiz}: $radius;
	-we  bkit-border-#{$vert}-#{$horiz}-radius: $radius;
  }

  /* style.sass */

  @import "rounded";

  #navbar li { @include rounded(top, left); }
  #footer { @include rounded(top, left, 5px); }
  #sidebar { @include rounded(top, left, 8px); }

Nesting

My favorite Sass feature is nesting. This can get really hairy if you do it too much, but used sparingly it's very cool.

  .about {
	margin: 4em 0;
  }

	.about .introtext {
	  float: left;
	  width: 50%;
	  padding: 0 4.5em 0 0;
	}

  .about {
	margin: 4em 0;

	.introtext {
	  float: left;
	  width: 50%;
	  padding: 0 4.5em 0 0;
	}
  }

The End!


text:
document.getElementById('btn').addEventListener('click', function() {
  location.replace(location.href);
});

onload = function() {
  // Set a sentinel value in sessionStorage to avoid clicking the button on
  // the second load of the document. Otherwise a second click will dispatch
  // another fragment navigation, which the test would not expect.
  if (sessionStorage['foo'])
    return;
  sessionStorage['foo'] = true;

  setTimeout(function() {
    document.getElementById('btn').click();
  }, 0);
}


text:
// Copyright 2016 The Oppia Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
 * @fileoverview Unit tests for EditableCollectionBackendApiService.
 */
import { HttpClientTestingModule, HttpTestingController } from
  '@angular/common/http/testing';
import { TestBed, fakeAsync, flushMicrotasks } from '@angular/core/testing';

import { EditableCollectionBackendApiService } from
  'domain/collection/editable-collection-backend-api.service';
import { Collection, CollectionObjectFactory } from
  'domain/collection/CollectionObjectFactory';

describe('Editable collection backend API service', () => {
  let editableCollectionBackendApiService:
    EditableCollectionBackendApiService = null;
  let httpTestingController: HttpTestingController;
  let collectionObjectFactory: CollectionObjectFactory;
  // Sample collection object returnable from the backend.
  let sampleDataResults = {
    collection: {
      id: '0',
      title: 'Collection Under Test',
      category: 'Test',
      objective: 'To pass',
      version: 1,
      nodes: [{
        exploration_id: '0',
        exploration_summary: {
          last_updated_msec: 1591296737470.528,
          community_owned: false,
          objective: 'Test Objective',
          id: '44LKoKLlIbGe',
          num_views: 0,
          thumbnail_icon_url: '/subjects/Algebra.svg',
          human_readable_contributors_summary: {},
          language_code: 'en',
          thumbnail_bg_color: '#cd672b',
          created_on_msec: 1591296635736.666,
          ratings: {
            1: 0,
            2: 0,
            3: 0,
            4: 0,
            5: 0
          },
          status: 'public',
          tags: [],
          activity_type: 'exploration',
          category: 'Algebra',
          title: 'Test Title'
        }
      }],
      playthrough_dict: {
        next_exploration_id: 'expId',
        completed_exploration_ids: ['expId2']
      },
      language_code: null,
      tags: null,
      schema_version: null
    }
  };

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule]
    });

    editableCollectionBackendApiService = TestBed.get(
      EditableCollectionBackendApiService);
    collectionObjectFactory = TestBed.get(CollectionObjectFactory);
    httpTestingController = TestBed.get(HttpTestingController);
  });

  afterEach(() => {
    httpTestingController.verify();
  });

  it('should successfully fetch an existing collection from the backend',
    fakeAsync(() => {
      var successHandler = jasmine.createSpy('success');
      var failHandler = jasmine.createSpy('fail');

      editableCollectionBackendApiService.fetchCollection('0').then(
        successHandler, failHandler);
      var req = httpTestingController.expectOne(
        '/collection_editor_handler/data/0');
      expect(req.request.method).toEqual('GET');
      req.flush(sampleDataResults);

      flushMicrotasks();

      var collectionObject = collectionObjectFactory.create(
        sampleDataResults.collection);

      expect(successHandler).toHaveBeenCalledWith(collectionObject);
      expect(failHandler).not.toHaveBeenCalled();
    })
  );

  it('should use the rejection handler if the backend request failed',
    fakeAsync(() => {
      var successHandler = jasmine.createSpy('success');
      var failHandler = jasmine.createSpy('fail');

      editableCollectionBackendApiService.fetchCollection('1').then(
        successHandler, failHandler);
      var req = httpTestingController.expectOne(
        '/collection_editor_handler/data/1');
      expect(req.request.method).toEqual('GET');
      req.flush({
        error: 'Error loading collection 1'
      }, {
        status: 500, statusText: 'Invalid Request'
      });

      flushMicrotasks();

      expect(successHandler).not.toHaveBeenCalled();
      expect(failHandler).toHaveBeenCalledWith('Error loading collection 1');
    })
  );

  it('should update a collection after fetching it from the backend',
    fakeAsync(() => {
      var successHandler = jasmine.createSpy('success');
      var failHandler = jasmine.createSpy('fail');
      var collection: Collection = null;
      var collectionDict = sampleDataResults;
      // Loading a collection the first time should fetch it from the backend.
      editableCollectionBackendApiService.fetchCollection('0').then(
        (data) => {
          collection = data;
        });
      var req = httpTestingController.expectOne(
        '/collection_editor_handler/data/0');
      expect(req.request.method).toEqual('GET');
      req.flush(sampleDataResults);

      flushMicrotasks();

      collectionDict.collection.title = 'New Title';
      collectionDict.collection.version = 2;
      collection = collectionObjectFactory.create(collectionDict.collection);

      // Send a request to update collection.
      editableCollectionBackendApiService.updateCollection(
        collectionDict.collection.id,
        collectionDict.collection.version,
        collectionDict.collection.title, []
      ).then(successHandler, failHandler);
      req = httpTestingController.expectOne(
        '/collection_editor_handler/data/0');
      expect(req.request.method).toEqual('PUT');
      req.flush(collectionDict);

      flushMicrotasks();

      expect(successHandler).toHaveBeenCalledWith(collection);
      expect(failHandler).not.toHaveBeenCalled();
    })
  );
});


text:
package com.wsl.library.widget;

import android.view.View;
import android.view.ViewGroup;

/**
 * Created by wsl on 17/4/14.
 */

interface DdNineGridAdapter{

    int getCount();
    boolean isEmpty();

    View getView(int position, ViewGroup parent);

    Object getItem(int position);
}


text:
package com.galenframework.ide.tests.integration.components.pages;

import com.galenframework.ide.tests.integration.components.galenpages.FinalElement;
import com.galenframework.ide.tests.integration.components.galenpages.GalenComponent;
import com.galenframework.ide.tests.integration.components.galenpages.WebLocatorComponent;
import org.openqa.selenium.By;

import static org.openqa.selenium.By.cssSelector;

public class SizeProviderChooser extends WebLocatorComponent<SizeProviderChooser> {
    public FinalElement customRadio = button("Custom radio", cssSelector("[type='radio'][value='custom']"));
    public FinalElement rangeRadio = button("Range radio", cssSelector("[type='radio'][value='range']"));
    public FinalElement unsupportedRadio = button("Unsupported radio", cssSelector("[type='radio'][value='unsupported']"));

    public SizeProviderChooser(GalenComponent parent, By locator) {
        super("Size Provider Chooser", parent, locator);
    }
}


text:
module Taxonomy
  class TopicTaxonomy
    def initialize(adapter: RedisCacheAdapter.new, tree_builder_class: Tree)
      @adapter = adapter
      @tree_builder_class = tree_builder_class
    end

    def ordered_taxons
      @ordered_taxons ||= ordered_branches.select(&:visible_to_departmental_editors)
    end

    def ordered_taxons_transformed(selected_taxon_content_ids = [])
      transform_taxon(ordered_taxons, selected_taxon_content_ids)
    end

    def all_taxons
      @all_taxons ||= branches.flat_map(&:taxon_list)
    end

    def visible_taxons
      @visible_taxons = branches.select(
        &:visible_to_departmental_editors
      ).flat_map(&:taxon_list)
    end

  private

    def branches
      @branches ||= @adapter.taxon_data.map do |taxon_hash|
        @tree_builder_class.new(taxon_hash).root_taxon
      end
    end

    def ordered_branches
      @ordered_branches ||= branches.sort_by(&:name)
    end

    def transform_taxon(taxons, selected_taxon_content_ids)
      taxons.map do |taxon|
        checked = taxon.taxon_list.any? do |descendant_taxon|
          selected_taxon_content_ids.include?(descendant_taxon.content_id)
        end

        {
          label: taxon.name,
          value: taxon.content_id,
          items: (transform_taxon(taxon.children, selected_taxon_content_ids) if taxon.children),
          checked:,
        }
      end
    end
  end
end


text:
namespace benchmark {

namespace {

std::string StrEscape(const std::string& s) {
  std::string tmp;
  tmp.reserve(s.size());
  for (char c : s) {
    switch (c) {
      case '\b':
        tmp += "\\b";
        break;
      case '\f':
        tmp += "\\f";
        break;
      case '\n':
        tmp += "\\n";
        break;
      case '\r':
        tmp += "\\r";
        break;
      case '\t':
        tmp += "\\t";
        break;
      case '\\':
        tmp += "\\\\";
        break;
      case '"':
        tmp += "\\\"";
        break;
      default:
        tmp += c;
        break;
    }
  }
  return tmp;
}

std::string FormatKV(std::string const& key, std::string const& value) {
  return StrFormat("\"%s\": \"%s\"", StrEscape(key).c_str(),
                   StrEscape(value).c_str());
}

std::string FormatKV(std::string const& key, const char* value) {
  return StrFormat("\"%s\": \"%s\"", StrEscape(key).c_str(),
                   StrEscape(value).c_str());
}

std::string FormatKV(std::string const& key, bool value) {
  return StrFormat("\"%s\": %s", StrEscape(key).c_str(),
                   value ? "true" : "false");
}

std::string FormatKV(std::string const& key, int64_t value) {
  std::stringstream ss;
  ss << '"' << StrEscape(key) << "\": " << value;
  return ss.str();
}

std::string FormatKV(std::string const& key, IterationCount value) {
  std::stringstream ss;
  ss << '"' << StrEscape(key) << "\": " << value;
  return ss.str();
}

std::string FormatKV(std::string const& key, double value) {
  std::stringstream ss;
  ss << '"' << StrEscape(key) << "\": ";

  if (std::isnan(value))
    ss << (value < 0 ? "-" : "") << "NaN";
  else if (std::isinf(value))
    ss << (value < 0 ? "-" : "") << "Infinity";
  else {
    const auto max_digits10 =
        std::numeric_limits<decltype(value)>::max_digits10;
    const auto max_fractional_digits10 = max_digits10 - 1;
    ss << std::scientific << std::setprecision(max_fractional_digits10)
       << value;
  }
  return ss.str();
}

}  // end namespace

void BdmJSONReporter::ReportRuns(std::vector<Run> const& reports) {
  if (reports.empty()) {
    return;
  }
  std::string indent(4, ' ');
  std::ostream& out = GetOutputStream();
  if (!first_report_) {
    out << ",\n";
  }
  first_report_ = false;

  for (auto it = reports.begin(); it != reports.end(); ++it) {
    out << indent << "{\n";
    PrintRunData(*it);
    out << indent << '}';
    auto it_cp = it;
    if (++it_cp != reports.end()) {
      out << ",\n";
    }
  }
}

void BdmJSONReporter::PrintRunData(Run const& run) {
  std::string indent(6, ' ');
  std::ostream& out = GetOutputStream();
  out << indent << FormatKV("name", run.benchmark_name()) << ",\n";
  //  out << indent << FormatKV("memory", "100000") << ",\n";
  out << indent << FormatKV("run_name", run.run_name.str()) << ",\n";
  out << indent << FormatKV("run_type", [&run]() -> const char* {
    switch (run.run_type) {
      case BenchmarkReporter::Run::RT_Iteration:
        return "iteration";
      case BenchmarkReporter::Run::RT_Aggregate:
        return "aggregate";
    }
    BENCHMARK_UNREACHABLE();
  }()) << ",\n";
  out << indent << FormatKV("repetitions", run.repetitions) << ",\n";
  if (run.run_type != BenchmarkReporter::Run::RT_Aggregate) {
    out << indent << FormatKV("repetition_index", run.repetition_index)
        << ",\n";
  }
  out << indent << FormatKV("threads", run.threads) << ",\n";
  if (run.run_type == BenchmarkReporter::Run::RT_Aggregate) {
    out << indent << FormatKV("aggregate_name", run.aggregate_name) << ",\n";
  }
  if (run.error_occurred) {
    out << indent << FormatKV("error_occurred", run.error_occurred) << ",\n";
    out << indent << FormatKV("error_message", run.error_message) << ",\n";
  }
  if (!run.report_big_o && !run.report_rms) {
    out << indent << FormatKV("iterations", run.iterations) << ",\n";
    out << indent << FormatKV("memory", "10000") << ",\n";
    out << indent << FormatKV("real_time", run.GetAdjustedRealTime()) << ",\n";
    out << indent << FormatKV("cpu_time", run.GetAdjustedCPUTime());
    out << ",\n"
        << indent << FormatKV("time_unit", GetTimeUnitString(run.time_unit));
  } else if (run.report_big_o) {
    out << indent << FormatKV("cpu_coefficient", run.GetAdjustedCPUTime())
        << ",\n";
    out << indent << FormatKV("real_coefficient", run.GetAdjustedRealTime())
        << ",\n";
    out << indent << FormatKV("big_o", GetBigOString(run.complexity)) << ",\n";
    out << indent << FormatKV("time_unit", GetTimeUnitString(run.time_unit));
  } else if (run.report_rms) {
    out << indent << FormatKV("rms", run.GetAdjustedCPUTime());
  }

  for (auto& c : run.counters) {
    out << ",\n" << indent << FormatKV(c.first, c.second);
  }

  if (run.has_memory_result) {
    out << ",\n" << indent << FormatKV("allocs_per_iter", run.allocs_per_iter);
    out << ",\n" << indent << FormatKV("max_bytes_used", run.max_bytes_used);
  }

  if (!run.report_label.empty()) {
    out << ",\n" << indent << FormatKV("label", run.report_label);
  }
  out << '\n';
};

}  // namespace benchmark


text:
using System;
using System.Text;
using System.Runtime.Serialization;
using Microsoft.Practices.RecipeFramework.VisualStudio.Templates;
using EnvDTE80;
using EnvDTE;
using Microsoft.Practices.RecipeFramework;

namespace SPALM.SPSF.Library.References
{
  [Serializable]
  public class DeploymentReferenceTemplate : UnboundTemplateReference
  {
    public DeploymentReferenceTemplate(string template)
      : base(template)
    {
    }

    public override bool IsEnabledFor(object target)
    {
      try
      {
        if (target is SolutionFolder || target is Solution)
        {
          return true;
        }
        if (((Project)target).Object is SolutionFolder)
        {
          //any solution folder with name deployment
          if (((SolutionFolder)((Project)target).Object).Parent.Name == "Deployment")
          {
            return true;
          }
        }
        return false;
      }
      catch (Exception)
      {
      }
      return false;
    }

    public override string AppliesTo
    {
      get { return "Deployment Folders"; }
    }

    #region ISerializable Members

    /// <summary>
    /// Required constructor for deserialization.
    /// </summary>
    protected DeploymentReferenceTemplate(SerializationInfo info, StreamingContext context)
      : base(info, context)
    {
    }

    #endregion ISerializable Members
  }
}


text:
({
    optimize: 'none', // Comment this property to enable the uglify of the libraries
    baseUrl: '',
    paths: {
			'd3': 'd3.min' ,
			'd3linechart': 'd3linechart'
	},

	wrap: {
        start: "if (typeof define === 'function' && define.amd){}\nelse if (typeof __visualize__ !== 'undefined' &&\ntypeof __visualize__.define === 'function')\n{\n}\n\n(function(root){\n\nvar define = root.define;\n\n",
        end: "\n\n}(typeof __visualize__ != 'undefined' ? __visualize__ : window));"
    },

    name: "d3linechart",
    out: "d3linechart.min.js"
})


text:
namespace storage {

SandboxOriginDatabaseInterface::OriginRecord::OriginRecord() = default;

SandboxOriginDatabaseInterface::OriginRecord::OriginRecord(
    const std::string& origin_in,
    const base::FilePath& path_in)
    : origin(origin_in), path(path_in) {}

SandboxOriginDatabaseInterface::OriginRecord::~OriginRecord() = default;

}  // namespace storage


text:
const path = require('path');

const GetDirContent = require('Myriad/Tool/GetDirContent');
const StringBetween = require('Myriad/Tool/StringBetween');
const FunctionConstant = require('Myriad/Constant/FunctionConstant');
const PathConstant = require('Myriad/Constant/PathConstant');

const relativeLibPaths = [
  PathConstant.APP_LIB_PATH,
];

module.exports.store = {};

function loadOneLibDir (libDirPath) {
  return new Promise(function(fullfil, reject) {
    GetDirContent(libDirPath, '*.js').then(function(files) {
      let len = files.length;
      for (let i = 0; i < len; i++) {
        let libName = StringBetween(files[i].fileName, '', '.');
        if(module.exports.store.hasOwnProperty(libName)){
          return reject('Duplicate lib name : ' + libName);
        }
        let obj = require(files[i].path);
        module.exports.store[libName] = obj;
        if (typeof obj[FunctionConstant.LIB_START_FCT] == 'function'){
          obj[FunctionConstant.LIB_START_FCT]();
        }
      }
      fullfil();
    }).catch(function(err) {
      reject(err);
    });
  });
}

module.exports.load = function(rootPath) {
  return new Promise(function(fullfil, reject) {
    let promiseArray = [];
    for(let i= 0; i < relativeLibPaths.length; ++i)
    {
      let libDirPath = path.join(rootPath, relativeLibPaths[i]);
      promiseArray.push(loadOneLibDir(libDirPath));
    }
    Promise.all(promiseArray).then(function() {
      fullfil();
    }).catch(function(err) {
      reject(err);
    });

  });
};


text: pub mod primitives;


text:
<?xml version="1.0" encoding="utf-8"?>
<Function>
<Name>aaa</Name>
<Abstract><Para>Aaa.</Para></Abstract>
<Parameters>
  <Parameter>
    <Name>x2</Name>
    <Index>0</Index>
    <Direction isExplicit="0">in</Direction>
    <Discussion><Para>Bbb</Para></Discussion>
  </Parameter>
  <Parameter>
    <Name>x3</Name>
    <Index>2</Index>
    <Direction isExplicit="1">out</Direction>
    <Discussion><Para>Ccc</Para></Discussion>
  </Parameter>
  <Parameter>
    <Name>x1</Name>
    <Direction isExplicit="1">in,out</Direction>
    <Discussion><Para>Ddd</Para></Discussion>
  </Parameter>
  <Parameter>
    <Name>x4</Name>
    <IsVarArg />
    <Direction isExplicit="0">in</Direction>
    <Discussion><Para>Eee</Para></Discussion>
  </Parameter>
</Parameters>
<ResultDiscussion>
  <Para>Fff.</Para>
  <Para>Ggg</Para>
</ResultDiscussion>
<Discussion>
  <Para>Hhh</Para>
  <Verbatim xml:space="preserve" kind="verbatim">Iii</Verbatim>
</Discussion>
</Function>


text:
package com.skaryszewski.kidsgym.client.util;

import java.util.Properties;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;

/**
 * This class retrieves EJBs by calculating given interfaceName class by removing packageName.Remote prefix and adding Bean suffix.
 * Example:
 *   InterfaceName: this.is.my.package.RemoteCalculator
 *   calculated BeanName: CalculatorBean
 *
 * For all beans/interfaces that do not follow this convention, remote EJB will not be retrieved correctly.
 *
 * @author Michal
 *
 */
public enum RemoteEjbGetter {

	INSTANCE;

	private RemoteEjbGetter() {
		Properties properties = new Properties();
		properties.put(Context.URL_PKG_PREFIXES, "org.jboss.ejb.client.naming");
		try {
			context = new InitialContext(properties);
		} catch (NamingException e) {
			throw new RuntimeException(e);
		}
	}

	@SuppressWarnings({ "unchecked", "rawtypes" })
	public <U> U getRemoteEjb(Class clazz) throws NamingException {
		final String interfaceName = clazz.getName();
		String lookupName = generateLookupName(interfaceName);
		return (U) context.lookup(lookupName);
	}

	private String generateLookupName (String interfaceName) {
		final String beanName   = getBeanName(interfaceName);
		return "ejb:" + APP_NAME + "/" + EJB_MODULE_NAME + "/" + beanName + "!" + interfaceName;
	}

	private String getBeanName(String interfaceName) {
		return interfaceName.replaceFirst(".*Remote", "").concat("Bean");
	}

	private Context context;

	private static final String APP_NAME        = "kids-gym-app-0.0.1-SNAPSHOT";
	private static final String EJB_MODULE_NAME = "kids-gym-ejb-0.0.1-SNAPSHOT";
}


text:
Next: Asynchronous I/O Signals, Previous: Termination Signals, Up: Standard Signals   [Contents][Index]

24.2.3 Alarm Signals

These signals are used to indicate the expiration of timers.
See Setting an Alarm, for information about functions that cause
these signals to be sent.

The default behavior for these signals is to cause program termination.
This default is rarely useful, but no other default would be useful;
most of the ways of using these signals would require handler functions
in any case.

Macro: int SIGALRM

This signal typically indicates expiration of a timer that measures real
or clock time.  It is used by the alarm function, for example.

Macro: int SIGVTALRM

This signal typically indicates expiration of a timer that measures CPU
time used by the current process.  The name is an abbreviation for
“virtual time alarm”.

Macro: int SIGPROF

This signal typically indicates expiration of a timer that measures
both CPU time used by the current process, and CPU time expended on
behalf of the process by the system.  Such a timer is used to implement
code profiling facilities, hence the name of this signal.


text:
<?php

namespace Arrilot\BitrixMigrations\Autocreate\Handlers;

interface HandlerInterface
{
    /**
     * Get migration name.
     *
     * @return string
     */
    public function getName();

    /**
     * Get template name.
     *
     * @return string
     */
    public function getTemplate();

    /**
     * Get array of placeholders to replace.
     *
     * @return array
     */
    public function getReplace();
}


text:
<?php

final class PhabricatorStorageManagementProbeWorkflow
  extends PhabricatorStorageManagementWorkflow {

  public function didConstruct() {
    $this
      ->setName('probe')
      ->setExamples('**probe**')
      ->setSynopsis('Show approximate table sizes.');
  }

  public function execute(PhutilArgumentParser $args) {
    $console = PhutilConsole::getConsole();
    $console->writeErr(
      "%s\n",
      pht("Analyzing table sizes (this may take a moment)..."));

    $api = $this->getAPI();
    $patches = $this->getPatches();
    $databases = $api->getDatabaseList($patches, $only_living = true);

    $conn_r = $api->getConn(null);

    $data = array();
    foreach ($databases as $database) {
      queryfx($conn_r, 'USE %C', $database);
      $tables = queryfx_all(
        $conn_r,
        'SHOW TABLE STATUS');
      $tables = ipull($tables, null, 'Name');
      $data[$database] = $tables;
    }

    $totals = array_fill_keys(array_keys($data), 0);
    $overall = 0;

    foreach ($data as $db => $tables) {
      foreach ($tables as $table => $info) {
        $table_size = $info['Data_length'] + $info['Index_length'];

        $data[$db][$table]['_totalSize'] = $table_size;
        $totals[$db] += $table_size;
        $overall += $table_size;
      }
    }

    $console->writeOut("%s\n", pht("APPROXIMATE TABLE SIZES"));
    asort($totals);
    foreach ($totals as $db => $size) {
      $database_size = $this->formatSize($totals[$db], $overall);
      $console->writeOut(
        "**%s**\n",
        sprintf("%-32.32s %18s", $db, $database_size));
      $data[$db] = isort($data[$db], '_totalSize');
      foreach ($data[$db] as $table => $info) {
        $table_size = $this->formatSize($info['_totalSize'], $overall);
        $console->writeOut(
          "%s\n",
          sprintf("    %-28.28s %18s", $table, $table_size));
      }
    }
    $overall_size = $this->formatSize($overall, $overall);
    $console->writeOut(
      "**%s**\n",
      sprintf("%-32.32s %18s", pht('TOTAL'), $overall_size));

    return 0;
  }

  private function formatSize($n, $o) {
    return sprintf(
      '%8.8s MB  %5.5s%%',
      number_format($n / (1024 * 1024), 1),
      sprintf('%3.1f', 100 * ($n / $o)));
  }

}


text:
/* @flow */

import { resolveAsset } from 'core/util/options'
import { mergeVNodeHook } from 'core/vdom/helpers/index'
import { emptyNode } from 'core/vdom/patch'

export default {
  create: updateDirectives,
  update: updateDirectives,
  destroy: function unbindDirectives (vnode: VNodeWithData) {
    updateDirectives(vnode, emptyNode)
  }
}

function updateDirectives (oldVnode: VNodeWithData, vnode: VNodeWithData) {
  if (oldVnode.data.directives || vnode.data.directives) {
    _update(oldVnode, vnode)
  }
}

function _update (oldVnode, vnode) {
  const isCreate = oldVnode === emptyNode
  const oldDirs = normalizeDirectives(oldVnode.data.directives, oldVnode.context)
  const newDirs = normalizeDirectives(vnode.data.directives, vnode.context)

  const dirsWithInsert = []
  const dirsWithPostpatch = []

  let key, oldDir, dir
  for (key in newDirs) {
    oldDir = oldDirs[key]
    dir = newDirs[key]
    if (!oldDir) {
      // new directive, bind
      callHook(dir, 'bind', vnode, oldVnode)
      if (dir.def && dir.def.inserted) {
        dirsWithInsert.push(dir)
      }
    } else {
      // existing directive, update
      dir.oldValue = oldDir.value
      callHook(dir, 'update', vnode, oldVnode)
      if (dir.def && dir.def.componentUpdated) {
        dirsWithPostpatch.push(dir)
      }
    }
  }

  if (dirsWithInsert.length) {
    const callInsert = () => {
      for (let i = 0; i < dirsWithInsert.length; i++) {
        callHook(dirsWithInsert[i], 'inserted', vnode, oldVnode)
      }
    }
    if (isCreate) {
      mergeVNodeHook(vnode.data.hook || (vnode.data.hook = {}), 'insert', callInsert, 'dir-insert')
    } else {
      callInsert()
    }
  }

  if (dirsWithPostpatch.length) {
    mergeVNodeHook(vnode.data.hook || (vnode.data.hook = {}), 'postpatch', () => {
      for (let i = 0; i < dirsWithPostpatch.length; i++) {
        callHook(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode)
      }
    }, 'dir-postpatch')
  }

  if (!isCreate) {
    for (key in oldDirs) {
      if (!newDirs[key]) {
        // no longer present, unbind
        callHook(oldDirs[key], 'unbind', oldVnode)
      }
    }
  }
}

const emptyModifiers = Object.create(null)

function normalizeDirectives (
  dirs: ?Array<VNodeDirective>,
  vm: Component
): { [key: string]: VNodeDirective } {
  const res = Object.create(null)
  if (!dirs) {
    return res
  }
  let i, dir
  for (i = 0; i < dirs.length; i++) {
    dir = dirs[i]
    if (!dir.modifiers) {
      dir.modifiers = emptyModifiers
    }
    res[getRawDirName(dir)] = dir
    dir.def = resolveAsset(vm.$options, 'directives', dir.name, true)
  }
  return res
}

function getRawDirName (dir: VNodeDirective): string {
  return dir.rawName || `${dir.name}.${Object.keys(dir.modifiers || {}).join('.')}`
}

function callHook (dir, hook, vnode, oldVnode) {
  const fn = dir.def && dir.def[hook]
  if (fn) {
    fn(vnode.elm, dir, vnode, oldVnode)
  }
}


text:
package changelist

// Changelist is the interface for all TUF change lists
type Changelist interface {
	// List returns the ordered list of changes
	// currently stored
	List() []Change

	// Add change appends the provided change to
	// the list of changes
	Add(Change) error

	// Clear empties the current change list.
	// Archive may be provided as a directory path
	// to save a copy of the changelist in that location
	Clear(archive string) error

	// Close syncronizes any pending writes to the underlying
	// storage and closes the file/connection
	Close() error
}

const (
	// ActionCreate represents a Create action
	ActionCreate = iota
	// ActionUpdate represents an Update action
	ActionUpdate
	// ActionDelete represents a Delete action
	ActionDelete
)

// Change is the interface for a TUF Change
type Change interface {
	// "create","update", or "delete"
	Action() int

	// Where the change should be made.
	// For TUF this will be the role
	Scope() string

	// The content type being affected.
	// For TUF this will be "target", or "delegation".
	// If the type is "delegation", the Scope will be
	// used to determine if a root role is being updated
	// or a target delegation.
	Type() string

	// Path indicates the entry within a role to be affected by the
	// change. For targets, this is simply the target's path,
	// for delegations it's the delegated role name.
	Path() string

	// Serialized content that the interpreter of a changelist
	// can use to apply the change.
	// For TUF this will be the serialized JSON that needs
	// to be inserted or merged. In the case of a "delete"
	// action, it will be nil.
	Content() []byte
}


text:
import pathlib

import ezdxf
from ezdxf.math import Matrix44, TransformError
from ezdxf.layouts import BaseLayout

CWD = pathlib.Path("~/Desktop/Outbox").expanduser()
if not CWD.exists():
    CWD = pathlib.Path(".")

# ------------------------------------------------------------------------------
# This example shows how to transform all entities of a layout by the
# general transformation interface.
# docs: https://ezdxf.mozman.at/docs/dxfentities/dxfgfx.html#ezdxf.entities.DXFGraphic.transform
# ------------------------------------------------------------------------------

EXAMPLE = (
    ezdxf.options.test_files_path / "CADKitSamples" / "AEC Plan Elev Sample.dxf"
)
INCH_TO_MM = 25.4

def transform_layout(layout: BaseLayout, m: Matrix44) -> None:
    for entity in layout:
        try:
            entity.transform(m)
        except (NotImplementedError, TransformError):
            pass

doc = ezdxf.readfile(EXAMPLE)
transform_layout(doc.modelspace(), Matrix44.scale(INCH_TO_MM))
doc.saveas(CWD / "scaled.dxf")


text:
from django.views.generic.list import ListView
from rest_framework.authentication import TokenAuthentication
from rest_framework.generics import CreateAPIView
from readbin.apps.bin.models import Article
from readbin.apps.bin.serializers import ArticleSerializer

class ArticlesList(ListView):
    model = Article
    template_name = 'apps/bin/articles_list.html'

class ArticleAPICreateView(CreateAPIView):
    authentication_classes = (TokenAuthentication,)
    serializer_class = ArticleSerializer


text:
/**
* Author: Bob Chen
*/

package com.jcommerce.core.service.impl;

import java.util.List;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.hibernate.Hibernate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.jcommerce.core.dao.SessionDAO;
import com.jcommerce.core.model.Cart;
import com.jcommerce.core.model.Session;
import com.jcommerce.core.service.CartManager;
import com.jcommerce.core.service.Condition;
import com.jcommerce.core.service.Criteria;
import com.jcommerce.core.service.SessionManager;

@Service("SessionManager")
public class SessionManagerImpl extends ManagerImpl implements SessionManager {
    private static Log log = LogFactory.getLog(SessionManagerImpl.class);

    @Autowired
    private SessionDAO dao;

    private CartManager cartManager;

    public CartManager getCartManager() {
        return cartManager;
    }

    public void setCartManager(CartManager cartManager) {
        this.cartManager = cartManager;
    }

    public void setSessionDAO(SessionDAO dao) {
        this.dao = dao;
        super.setDao(dao);
    }

    public Session initialize(Session obj) {
        if (obj != null && !Hibernate.isInitialized(obj)) {
            obj = dao.getSession(obj.getId());
        }
        return obj;
    }

    public List<Session> getSessionList(int firstRow, int maxRow) {
        List list = getList(firstRow, maxRow);
        return (List<Session>)list;
    }

    public int getSessionCount(Criteria criteria) {
        return getCount(criteria);
    }

    public List<Session> getSessionList(Criteria criteria) {
        List list = getList(criteria);
        return (List<Session>)list;
    }

    public List<Session> getSessionList(int firstRow, int maxRow, Criteria criteria) {
        List list = getList(firstRow, maxRow, criteria);
        return (List<Session>)list;
    }

    public List<Session> getSessionList() {
        return dao.getSessionList();
    }

    public Session getSession(Long id) {
        Session obj = dao.getSession(id);
        return obj;
    }

    public void saveSession(Session obj) {
        dao.saveSession(obj);
    }

    public void removeSession(Long id) {
        // remove the session info in Cart first
        Criteria criteria = new Criteria();
        criteria.addCondition(new Condition("session", Condition.EQUALS, id));
        List<Cart> carts = cartManager.getCartList(criteria);
        if (carts != null) {
            for (Cart cart : carts) {
                cart.setSession(null);
                cartManager.saveCart(cart);
            }
        }
        dao.removeSession(id);
    }
}


text:
<?php

namespace SWP\Exchange\Core;

use JMS\Serializer\Annotation as JMS;

use SimpleES\EventSourcing\Identifier\Identifies;

abstract class AbstractIdentifier implements Identifier
{
    /**
     * @JMS\Type("string")
     * @var string
     */
    private $id;

    /**
     * @return Identifier
     */
    public static function generate()
    {
        return new static(IdentifierGenerator::generate());
    }

    /**
     * @param string $string
     * @return static
     */
    public static function fromString($string)
    {
        return new static($string);
    }

    /**
     * @return string
     */
    public function __toString()
    {
        return $this->id;
    }

    /**
     * @param Identifies $other
     * @return bool
     */
    public function equals(Identifies $other)
    {
        return ($other instanceof static && $other->id === $this->id);
    }

    /**
     * @param string $id
     */
    private function __construct($id)
    {
        $this->id = (string) $id;
    }

}


text:
<?xml version="1.0" encoding="utf-8"?>
<openerp>
    <data>
        <record id="view_account_fiscalyear_close_state" model="ir.ui.view">
            <field name="name">account.fiscalyear.close.state.form</field>
            <field name="model">account.fiscalyear.close.state</field>
            <field name="arch" type="xml">
                <form string="Close states of Fiscal year and periods">
	                <group>
	                    <field name="fy_id"  domain="[('state','=','draft')]"/>
	                </group>
                    <footer>
                        <button icon="terp-locked" string="Close Fiscal Year" name="data_save" type="object" class="oe_highlight"/>
                        or
                        <button string="Cancel" class="oe_link" special="cancel"/>
                    </footer>
                </form>
            </field>
        </record>

        <record id="action_account_fiscalyear_close_state" model="ir.actions.act_window">
            <field name="name">Close a Fiscal Year</field>
            <field name="res_model">account.fiscalyear.close.state</field>
            <field name="view_type">form</field>
            <field name="view_mode">tree,form</field>
            <field name="view_id" ref="view_account_fiscalyear_close_state"/>
            <field name="target">new</field>
        </record>

        <menuitem action="action_account_fiscalyear_close_state"
            id="menu_wizard_fy_close_state"
            sequence="20"
            parent="menu_account_end_year_treatments" />

    </data>
</openerp>


text:
package com.rajtech.stockwebservice.common;

import java.util.Date;

import org.springframework.http.HttpStatus;

/**
 * Error model for interacting with client.
 *
 * @author vladimir.stankovic
 *
 * Aug 3, 2016
 */
public class ErrorResponse {
    // HTTP Response Status Code
    private final HttpStatus status;

    // General Error message
    private final String message;

    // Error code
    private final ErrorCode errorCode;

    private final Date timestamp;

    protected ErrorResponse(final String message, final ErrorCode errorCode, HttpStatus status) {
        this.message = message;
        this.errorCode = errorCode;
        this.status = status;
        this.timestamp = new java.util.Date();
    }

    public static ErrorResponse of(final String message, final ErrorCode errorCode, HttpStatus status) {
        return new ErrorResponse(message, errorCode, status);
    }

    public Integer getStatus() {
        return status.value();
    }

    public String getMessage() {
        return message;
    }

    public ErrorCode getErrorCode() {
        return errorCode;
    }

    public Date getTimestamp() {
        return timestamp;
    }
}