##Today's Project
Follow [this link](project/final.html) to see the whole project!
![final project](framework/img/final-project.jpg)
##A demonstration of what can be
##accomplished through CSS-based design
![](framework/img/css-zen-garden.png)
http://csszengarden.com/
##Setting Up Our Dev Tools
**[Sublime Text](http://www.sublimetext.com/2)** - a text editor with colour highlighting and other helpful features. If you are unable to install Sublime Text, try installing: [Notepad++](http://notepad-plus-plus.org/) (Windows) or [Atom](https://atom.io/) (Mac).
**[Google Chrome](https://www.google.com/intl/en-CA/chrome/browser/)** - Choose a modern web browser that supports current web standards and has good development tools. To set Chrome as your default browser, follow [these instructions](https://support.google.com/chrome/answer/95417?hl=en). Another good option is Firefox. Visit [browsehappy.com](http://browsehappy.com) for more info about modern browsers.
**Developer tools** allow us to *inspect* any web page to see how it's built. These tools also make it easier to test and debug code. The tools can be accessed in 3 ways:
* right-click / two-finger tap on a web page and select **Inspect Element**
* select the menu icon in the top right hand corner of the Chrome browser and select **Tools > Developer Tools**
* keyboard shortcut: **Ctrl + Shift + I** (PC) / **Cmnd + Option + I** (Mac)
##Setting Up Our Work Flow
Open our project files in the browser and text editor.
1. Open Sublime Text and go to **File > Open**.
![](framework/img/1-setup.png)
1. Navigate to the **Project** folder (in the folder you downloaded with today's slides). With the entire folder selected, select **Open**.
![](framework/img/2-setup.png)
1. The folder will appear in Sublime's side bar. Double click on **index.html** in the sidebar to open it.
![](framework/img/3-setup.png)
1. Right click or two finger tap and select **Open in Browser**. This will open the HTML file in your *default* browser.
![](framework/img/4-setup.png)
No CSS has been applied yet so all you will see is the HTML content and the default styles like in [this example](project/examples/1-no-css.html).
##HTML: Quick Review
HTML is used to define *content* so use the appropriate tag that best describes the meaning of your content.
**Headings**: There are 6 heading tags available (`<h1>,<h2>,...,<h6>`) and follow a hierarchical structure. `<h1>` represents the most important title/heading on the page and it's best to stick to using it just once per page. Other headings can be used multiple times. It's important to use the appropriate tag to describe the content, not for the default heading styles. That's what CSS is for!
```xml
<h1>Most Important Heading</h1>
<h2>Important But Not As Much As h1</h2>
```
**Paragraphs**: Created with the `<p></p>` tags.
```xml
<p>I'm a paragraph.</p>
```
**Link**: requires the addition of a `src` *attribute* to specify where to link to.
```
<a href="http://website.com">link</a>
```
**Lists**: There are two kinds of lists: ordered (`ol`) for numbered lists & undordered (`ul`) for lists with bullets. Content must be included only within the list item (`li`).
```xml
<ul>
<li>Unordered list item</li>
<li>Unordered list item</li>
</ul>
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
```
**Images**: like links, also requires the an additional attribute, `src`, for linking to the image file.
```
<img src="path/to/image.jpg">
```
##Exercise #1: Personalize the content (10 mins)
1. Update your name and tagline in the `header` section.
2. Update your profile / personal summary / profile image, if you have a picture handy.
Don't forget to save your changes!
Save the file using **File > Save**, or use keyboard shortcuts (**CMD + S** or **CNTL + S**)
After saving, just refresh the browser to see the changes (rather than opening your file in a new tab every time). Find a work flow that works best for you when making frequent changes.
Don't worry if you don't finish. There's placeholder content already included in the starter template.
##CSS Overview
HTML defines *content*, CSS defines the *presentation*.
**Selectors:** used to determine which element(s) to apply the styles to. Can target an HTML tag, class or ID.
**Declaration block:** consists of a list of declarations (rules to follow) wrapped in curly braces `{}`.
**Declarations** or rules to follow, are written using `property:value` pairs.
```css
selector {
property: value;
}
```
**Properties** determine the type of style to be applied to
the element (e.g. color).
**Values** are specific to the property. Declarations must end with a semi-colon (`;`) to indicate that the instruction is complete.
![](framework/img/css.png)
CSS Syntax
h1 {
color: blue;
font-size: 12px;
}
In the above example:
- Which one is the selector?
h1
- Which one is the property?
color & font-size
- Which one is the value?
blue & 12px
##Comments
Comments in CSS are written between a slash & asterix (`/* */`) and must close in the opposite order. Comments are great for ... well... leaving comments! Leave comments in your code as notes for yourself (or others), for organizing your code blocks or for "commenting" out your code (hiding it).
```
p {
color: #cc0066; /* magenta */
}
/* HEADER STYLES */
header {
width: 80%;
}
/* Saving this for later
.slider {
width: 100px;
background: red;
}
*/
```
##Classes vs IDs
When **type selectors** are too general (targeting the HTML element), HTML gives us two ways to attach extra identifying information to target specific elements with two **attributes**, `class` and `id`.
```
/* targets ALL parapraphs */
p {
color: red;
}
/* only applies to the element that contains this class */
.danger {
color: red;
}
/* only applies to the element that contains this id */
#danger {
color: red;
}
```
##Class Selectors
A `class` **attribute** can be added to any element but the value is defined by you. The class can then be used as a selector to apply styles to *any* element that references the class attribute. In CSS, a `class` selector is defined by a leading period (`.`) followed by the class name with *no* spaces as your CSS selector.
Classes can be used multiple times on the same page.
```xml
<p>Regular text</p>
<p>Regular text</p>
<p class="fancy">Fancy text here.</p>
```
```
p {
color: red;
font-family: Georgia, "Times New Roman", serif;
}
.fancy {
text-transform: uppercase;
}
```
##id Selectors
`id` **attributes** are similar to `class` **attributes** because it can also be added to any element and given any value.
However, it can be used only *once* per page. IDs should be used for significant style rules and is usually reserved for structural blocks. Some developers prefer not to use IDs at all for CSS styling because of specificity rules and classes can be used multiple times, making it more flexible.
In CSS, IDs are denoted by a leading number symbol (`#`).
```
#header {
width: 800px;
}
```
##class and id Naming Conventions
When choosing a `class` or `id` name, use a descriptive name and don't use spaces. Hyphens (-), underscores (_) and camel case are acceptable.
CSS is also case sensitive, so while these three examples look similar, CSS will read these as three different classes so it's important (for your own sanity) to pick one style and be consistent.
```
class="content-wrapper"
class="content_wrapper"
class="contentWrapper"
```
Adding Background Colours
Using the background
(shorthand) or background-color
(longhand) property to add colours to various page sections can be very useful when laying out the CSS for your HTML document. For now, you can use either. We will be going more in depth with the various background options. Try changing the color below and see what happens!
Change the background using shorthand!
Change the background using longhand!
##color Property and Values
The `color` property accepts different types of values.
**keywords** - you can use the actual name of the colour for most basic colours (red, green, blue, pink, etc) as well as a few fancy ones like "papayaWhip" and "paleGoldenrod".
**RGB (red-green-blue)** - Uses *three* numerical values from 0-255. 0 represents black and 255 represents white. See below for syntax.
**hex code** - Made up of the number sign (`#`) followed by six hexadecimal characters (0-9, A-F) or three hexadecimal characters (0-9, A-F).
```
p {
background: firebrick;
}
p {
background: #B22222;
}
p {
background: rgb(178,34,34);
}
```
##Colour Resources
[http://www.colorpicker.com/](http://www.colorpicker.com/)
[http://colours.neilorangepeel.com/](http://colours.neilorangepeel.com/)
[http://www.colourlovers.com/](http://www.colourlovers.com/)
[http://flatuicolors.com/](http://flatuicolors.com/)
[http://color.hailpixel.com/](http://color.hailpixel.com/)
[http://wesandersonpalettes.tumblr.com/](http://wesandersonpalettes.tumblr.com/)
##Referencing CSS
There are three ways to include (otherwise known as *referencing*) CSS in an HTML page.
###Inline
Can be used in any HTML element using the `style` *attribute*.
```
<p style="color: blue;">I'm writing CSS!</p>
```
This technique should be avoided but it's good to know how it works in case you encounter it "in the wild."
###Internal
Uses `<style>` and is included in the `<head>` element.
```
<head>
<title>Page Title</title>
<meta charset="utf-8">
<style>
h1 {
font-size: 16px;
}
</style>
</head>
<body>
<p>I'm still writing CSS!</p>
</body>
```
This method is preferred over *inline* css, however it is still inefficient because if you had multiple web pages, you would have to copy the style block to every single page to duplicate the styles.
###External
Links to a separate style sheet file. This method is recommended because it separates the CSS from the HTML document. The link to the stylesheet is referenced in the `<head>` on any page where these styles need to be included. Only the CSS file needs to be updated rather than the CSS block on every single page.
Referenced in the head element with a `<link>` tag and two **attributes**, `rel` and `href`. Just like creating links, the value of the `href` points to the location of the stylesheet.
Though it is not required, css files are often saved in a css folder for organization, so make sure the file path points to the appropriate directory.
The `rel` attribute describes the relationship.
```
<head>
<title>Page Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
```
##Exercise 2: add background colours (10mins)
1. In Sublime, open **main.css** (it should be blank). It is located in **Project > css **. Link it (reference it) in your HTML document.
1. Try using comments to organize your CSS into sections so you can group related CSS together.
1. Using `background` or `background-color`, add a different background colour to each major section of the page. Use an **element selector** for the header and **class selectors** for the sections. Since there are multiple `<section>` tags, we need to use a more specific selector to give them each a different colour. Here are the selectors to get started:
```
header { }
.profile { }
.work-experience { }
.skills { }
.education { }
.contact { }
```
Your page should look something like this: [background colour example](project/examples/2-bg-colours.html).
Default styles: Reset vs Normalize
Every browser has its own default ‘user agent’ stylesheet to add default styles to the html elements. (ex. links are blue, h1 are bigger than h2)
A CSS Reset is a set of CSS rules that resets the styling of all HTML elements to a consistent baseline to avoiding cross-browser differences as much as possible. Normalize is slightly different because it "normalizes" the default styling rather than removes the default styles.
Note that if you add it as a separate stylesheet, it should be included before your custom stylesheet.
These various stylesheets can be downloaded at cssreset.com but for today, it’s already included in the Projects folder.
* look at differences after just adding normalize
* explain why normalize has to come before custom css
##Cascading, Inheritance and Specificity
CSS executes from top to bottom (hence "cascading"), so be careful of the the order of your CSS declarations. The declaration that comes *after* will override the one that came before.
In this example, what colour will the `<h1>` be?
```
h1 {
color: black;
}
h1 {
color: blue;
}
```
##Cascading, Inheritance and Specificity
One of the strengths of CSS is styles can be inherited from parent to child elements using the family tree relationship between the elements.
```
<body>
<h1>My Website</h1><!-- child of body -->
<p>This is a paragraph.</p><!-- sibling of h1 -->
</body>
```
```
body {
color: blue;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
color: black;
}
```
In the above example, the CSS properties in the body selector is inherited by the children and descendants so all the text would be blue and display the Helvetica font. However, when a more specific selector is used (`h1`), it overrides the inherited values because it's more *specific*.
##Web safe fonts
The default font can be changed with the `font-family` **property**. However, not all fonts are installed on all computers so it's recommended to use fonts that are considered *web safe* — fonts that are commonly included on most computers.
It's best practice to list at least two or three font options to provide a fall-back if the user doesn't have the preferred fonts installed.
```
font-family: Helvetica, Arial, sans-serif;
```
Here's a handy resource for referencing web safe fonts: [CSS Font Stack](http://cssfontstack.com/).
##Custom fonts
For more options than just using the web safe fonts, services like [Google Fonts](http://www.google.com/fonts/) and [Font Squirrel](http://www.fontsquirrel.com/) can make it easier to use a variety of fonts that aren't normally supported by all computers.
A service like **Font Squirrel** requires you to download the fonts and add it to your project files. The site features a handy [generator](http://www.fontsquirrel.com/tools/webfont-generator) to create different font files to support various browsers as well as include demo files and instructions on how to use it.
**Google Fonts** allows you to link directly to their stylesheet and no file downloads are necessary. To use these fonts:
* Select the fonts you want to use and **Add to Collection**.
* You can **Review** them to take a closer look, then choose *Use* when ready.
* Select font weights. The more you choose, the more it will slow down page load time.
* The default character set should contain what you need. Only select an option if you need to add additional language support.
* Grab the `<link>` code snippet and add it the `<head>` part of your page.
* Use the new fonts with the `font-family` property as listed in the example on the Google Fonts page.
That's it!
Font Styles & Typography
Let's look at a few CSS properties for styling text.
Just some text to test out the above styles. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni repellat sunt quae fugit illum in aut sed, quis nesciunt totam veritatis, dolores alias modi fuga commodi dicta facilis, consequatur temporibus.
Resource: Sitepoint Typographical Properties
Exercise #3: Typography
Let's add some styles together first and start with some web safe fonts, cssfontstack.com.
1. Set the main font-family & line-height using body
as the selector.
body {
font-family: Georgia, Times, "Times New Roman", serif;
line-height: 1.5;
}
2. Set font styles for h1, h2 and h3
h1 {
font-family: "Brush Script MT", cursive;
font-weight: 400;
font-size: 80px;
}
h2 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: 32px;
}
h3 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
text-transform: uppercase;
}
* reference 3-typography in example folder
* Add main font family & line-height to body - explain inheritance
* put h2, h3 styles into separate blocks to show combining selectors & refactoring after. Use this to also explain specificity. Tell learners they have to option to try to type along or just watch to keep from slowing down the demo. They can catch up in the exercise work session since the final code will be posted in the next couple slides.
##Refactor!
What is refactoring? Code refactoring is the process of restructuring existing code to make it more efficient. Writing clean, organized and efficient code will not only make your pages run faster but will make it easier to maintain and can potentially reduce browser bugs. It's tempting to say "I'll fix it later" but later doesn't always come. It's important to re-factor your code as you go along.
If you find you are declaring the same styles over and over again, try using a `class` or apply the style to a parent selector so the styles can be inherited. You can also *combine* selectors to apply the same styles to multiple selectors at the same time. Make sure to separate selectors with a comma.
```
h1, h2 {
/* will apply any styles here to both headings */
}
```
##Exercise #3 Typography (continued)
The previous example can be re-factored to look like this:
```
h1, h2, h3 {
font-weight: 400;
}
h2, h3 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
}
h1 {
font-family: "Brush Script MT", cursive;
font-size: 80px;
}
h2 {
font-size: 32px;
}
```
##Exercise #3 Typography (Continued)(15mins)
1. Find and add 2-3 font families from [Google Fonts](http://www.google.com/fonts/)
1. Update the font & typography styles to your liking! You can add some more later as the page starts to come together.
Resource: [Sitepoint Typographical Properties](http://reference.sitepoint.com/css/typography)
Need help deciding on fonts? The example project uses Open Sans (sans-serif), Merriweather (serif), Pacifico (cursive).
Your page should look something like this: [Example 3](project/examples/3-typography.html)
##What is The Box Model?
The browser looks at every HTML element on the page as a rectangular box. The CSS Box Model describes the way CSS styles the size and spacing of HTML elements. Understanding the box model is crucial for understanding how to position elements with CSS to create the desired page layout. This is one of the trickiest part of CSS, so don't worry if it seems confusing!
CSS uses 5 properties to determine the size and spacing of these boxes:
* `margin` - adds/removes space *outside* of the element
* `padding` - adds/removes space *inside* of the element
* `border` - adds a border outside of the element
* `width` - can be set to a specific size via CSS
* `height` - can be set to a specific size via CSS
Padding and Margin
The padding
and margin
can both be declared using similar syntax of 1 to 4 values. Values can be declared using different measurement units but pixels or percentages are most commonly used. Setting the value to "0" will remove any default space on an HTML element. Any positive value will add space.
- 4 values means top, right, bottom, left
- 3 values means top, right/left, bottom
- 2 values means top/bottom, right/left
- 1 value means the same amount of padding on all sides
Change some values to see the difference between margin and padding. Let's also inspect the element using Chrome's Developer tool.
padding and margin test
##Padding and Margin (continued)
The previous slide uses the shorthand properties. Both can also be declared by specifying a particular side.
```
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
```
```
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
```
##Border
The `border` property resides between the `margin` and `padding` and creates an outline around the element. It, too, has longhand and shorthand syntax.
```
/* longhand */
border-width: 2px;
border-style: solid;
border-color: red;
/* shorthand */
border: 2px solid red;
```
Like padding and margin, a specific side of the element can be specified.
```
/* longhand */
border-top-width: 2px;
border-top-style: solid;
border-top-color: red;
/* shorthand */
border-top: 2px solid red;
```
Box Model Review
Let’s look at a diagram to see how all these different properties work together to change the size of an element.
The original element started with a width and height of 400 x 100. After including the padding, border & margin, the size of the box is actually 492 x 192!
##I Can't... even...
![](framework/img/cant-even.gif)
Box Model Fix!
Luckily, there’s a fix for this.
Enter the box-sizing: border-box fix ftw! It is recommended to add this snippet to all your projects.
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
More about margin
margin
also accepts negative values, padding does not. When using negative values, it will push the box outside of it’s natural spot within the surrounding elements.
box
Center aligning with margin
The margin property can also be used to center align block level elements. (More about block level elements later). First, a width needs to be set. Then, setting the left & right values to auto
will find the center of the page. The 0
just refers to the top and bottom value.
box
* show example of adding padding to a couple sections
* Inspect the element to show how padding pushing elements with margin inside of the containing element.
* set widths/margin: auto on profile section to show why we need to create an inner wrapper to set a background colour & center align content.
##Class exercise
1. Add the box model fix to our CSS file. [link](/#slide38)
1. Go back to our HTML & CSS project files, add `padding:1px` to the `header` section to see how it changes the spacing. Open up the Chrome Dev Tools and inspect the element.
1. The content is also too wide. Let's use the `margin: 0 auto` trick to center align the content. Try adding the styles to the `.profile` section in your CSS file.
```
.profile {
width: 1000px;
margin: 0 auto;
}
```
Your page will look something like this:
![](framework/img/margin-auto.png)
Class exercise (continued)
The content is centered but the background colour is restricted by the width dimension and doesn’t span the rest of the page anymore. To fix this, we’ll need to create a “container” just for center aligning the content by adding a new div
with a class of content-wrap
around all of the profile content.
<section class="profile">
<div class="content-wrap"><!-- new content wrap div -->
<img src="images/profile-generic.jpg" alt="Your Name">
<div class="summary">
...
</div>
</div><!-- close contact wrap div -->
</section>
Then apply the styles to .content-wrap
instead of .profile
. Let's add some padding while we're at it too.
.content-wrap {
width: 1000px;
margin: 0 auto;
padding: 60px 0;
}
width & max-width, px vs %
The content is all nice and centered now but what happens when the browser window is smaller than the set width?
Let’s look at the difference between the max-width
and width
property and using percentages and pixels.
Lorem ipsum dolor sit amet.
##Class exercise
Update the `.content-wrap` styles to include `max-width` and update `width`.
```
.content-wrap {
max-width: 1000px;
width: 90%;
margin: 0 auto;
padding: 60px 0;
}
```
Now we've created a reusable style that will help to keep our CSS nice and neat because we can apply this where ever this style is required, using the same class!
##Exercise #4: Content wrappers! (15mins)
Add the `.content-wrap` to each section *except* the `header`. We'll talk about why we're not adding this style to header after this exercise.
Let's go over how to collapse code blocks and tab multiple lines at the same time in Sublime first, to help make this addition easier.
Your page should look something like this: [example 4](project/examples/4-content-wrap.html).
## The Dangers of "div-itis"
Be careful of "divitis"! Use the `<div>` to *group* related elements to be styled *together* as one section. If you need to style a single element, like an `<h1>` for example, just style that element directly. The browser sees every element as a "box" so there's no need to put a box around a box!
A good rule of thumb is to only add what you need. It's much easier to add more than to remove extra markup.
```xml
<div class="title">
<h1>Heading</h1>
</div>
```
can just be
```xml
<h1 class="title">Heading</h1>
```
##Avoid code bloat
![](framework/img/bloat.jpg)
##Update header & heading styles
In the case of the `header` section, we can apply `text-align: center` instead of adding the `.content-wrap` since the content is short, we don't have to worry about containing it in a wrapper. Also, adjust the padding to add some more space in the header. The final code for header should look like this:
```
header {
background: #2c3e50;
text-align: center;
padding: 150px 0;
}
```
While we're here, let's remove all of the default margins for the headings to get more control over how the spacing later on. Add `margin: 0` to the existing code block for the headers.
```
h1, h2, h3 {
font-weight: 400;
margin: 0;
}
```
Your page should now look like this: [Example](project/examples/5a-heading-headers.html)
##Background images
So far we've used `background` for colours but it can also be used for setting background images.
```
background-image: url(path/to/file.jpg); /* longhand */
background: url(path/to/file.jpg);/* shorthand */
```
Since our CSS file in *inside* a folder, use `../` to go *up and out* of the folder to get to the image files.
```
background: url(../images/background-1.jpg);
```
Note how the images repeat. We can override that with another property, `background-repeat` or just add it to the shorthand `background` property.
```
/* shorthand */
background: url(../images/background-1.jpg) no-repeat;
/* longhand */
background-image: url(../images/background-1.jpg);
background-repeat: no-repeat;
```
##Fluid background images
CSS3 introduced the `background-size` property to make a background images fluid and flexible. The syntax is:
```
background-size: width height;
```
The default values for width and height are `auto` and retains the original image dimensions. If only one value is defined, it is assumed to be the `width`. The height will be set to auto and the image will keep its aspect ratio.
There are several ways to define sizing dimensions using various types of values (px, percentages, keywords, etc).
`background-size` is the longhand property. To include it in the shorthand `background` property, it *must* be included after `background-position`, separated with the `/` character.
```
header {
background-image: url(../images/background-1.jpg);
background-repeat: no-repeat;
background-position: 50%;
background-size: 100%;
}
```
```
header {
background: url(../images/background-1.jpg) no-repeat 50% / 100%;
}
```
If no background position value is being used, background-size won't work in the shorthand property so in this case, it may be less error prone to add it via the longhand property.
```
header {
background: url(../images/background-1.jpg) no-repeat 50%;
background-size: 100%;
}
```
##More About Background
`background-size` also accepts keyword values, `contain` and `cover`.
`contain` scales the image to fit its container. The image will grow or shrink proportionally but the width and height will not exceed the container's dimensions.
`cover` scales the image to fit the entire container but, if that has a different aspect ratio, the image will be cropped.
Let's add one more property, `background-attachment`. Set the value to fixed and see what happens! (This can be added to the shorthand property)
```
background: url(../images/background-2.jpg) no-repeat fixed 50%;
```
##Exercise 5: Update header background styles (10mins)
Based on the previous slides, update your header's background image and styles. There are a few images in your **Project** folder to choose from or add one of your own.
Resources:
[http://unsplash.com/](http://unsplash.com/)
[http://littlevisuals.co/](http://littlevisuals.co/)
[http://nos.twnsnd.co/](http://nos.twnsnd.co/)
Your page should look something like this: [Example 5](project/examples/5b-heading-bg.html)
#Inline & Block
#Elements
##Inline vs Block Elements
By default, some HTML elements are displayed as block or inline elements.
###Block Elements
* takes up 100% width of its container, no matter how long the actual content is
* will be the same height as its content
* always starts on a new line
* can wrap other block level elements or inline elements
* can apply sizing related CSS to it (margin, padding, height, width)
###Inline Elements
* will be the height and width of its content
* always appears "in a line" with other inline level elements
* can wrap other inline elements but cannot wrap block level elements *except* `<a>` tags. This is only valid with an HTML5 doctype.
* does not render CSS height and width at all, will apply margin and padding but with unexpected results
###Inline-block
* best of both worlds
* floats left and is the size & height of its content, like inline elements
* accepts height and width values like block elements
**Extra Resource**: [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements)
Block & Inline Example
Click Edit in JSFiddle to make edits. Let's see what happens when height, width, margin and padding is applied to inline and block elements.
##CSS Display property
These default display styles can be changed using the CSS `display` property.
`display: inline` can be used to get block level elements to line up side by side, in a line. The only problem is the block level element will not render sizing properties, just like default inline elements.
`display: block` can be used to make inline elements behave like a block level element (be able to apply size related properties) but they will no longer sit side by side, in a line.
`display: inline-block` is the best of both worlds. Elements will line up side by side and also render sizing properties.
`display: none;` will hide the element.
Let's go back to our previous example and try using the `display` property.
##CSS Float Property
Remember, block-style HTML elements like `<p>`, `<div>` and `<section>` automatically start on a new line and stack on top of each other. To get two block elements to align side-by-side, the `float` property can be used.
CSS floats can float elements left or right.
**However**, we have to break the natural stacking flow when an element is floated. This will cause any element *after* the floated element to try to move up beside it or just not display properly because we've disrupted the natural stacking flow. The parent container will also collapse.
**Also**, if there is no width set, the element will float but the width will automatically be the width of its content.
Just kidding! We can fix it.
Float, Clear and Clearfix
First we have to break it, then put it back together. One of the most confusing CSS concepts is when to use clear:both
and the .clearfix
class. Rule of thumb: if there's is an element that follows the floated element, apply clear: both
to that element. If all the elements need to be floated, apply the .clearfix
class to the parent element.
Let's add this clearfix snippet to our CSS file to use it later.
Want to know more about the clearfix trick and clearing floats? Here you go:
http://css-tricks.com/snippets/css/clear-fix/
http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/
#More selectors & Using multiple classes
##Descendant selectors
**Descendant selectors** - Matches any element that is a descendant of the element declared before it.
```css
p a {
/* targets only a tags nested inside of p tags */
}
.classname a {
/* targets only a tags nested inside any element with the matching classname */
}
```
**Protip:** Just like Inception, never go more than three levels deep. Truth.
```
nav ul li a span {
/* NOOOOOOOOOOO */
}
```
Feel free to skip a level but be mindful of specificity rules. For example, `nav ul li a` would override `nav a`. It’s generally easier to start with less specific selectors and make them more specific, as needed, rather than starting with very specific selectors and adding extra markup or classes to try to override the styles.
Child & Adjacent selectors
Child selectors - Only matches an element that is a direct child of the element declared before it.
Adjacent selectors - allows you to select an element that is directly after another specific element.
Extra Resource: The 30 CSS Selectors you Must Memorize
##Using multiple classes
It's common to use more than one class on one element to add different styles to it. To use multiple classes, declare it in the same class attribute but separate classes with a space.
```xml
<div class="class-1 class-2">
content here
</div>
```
Any styles under `.class-1` AND `.class-2` will apply.
To select two (or more) classes at the same time, use both names as the selector with *no* space. This style will only apply if *both* classes are declared in the element.
```css
.class-1.class-2 {
/* will only apply if both classes exist */
}
```
##Class Exercise: Floats
1.Add a float to profile image. What happens to the parent element when a child element is floated?
```
.profile img {
float: left;
}
```
2.Add the clearfix class to the parent element
3.Make the image a relative size to the page and add margin to create space between the image and text.
```
.profile img {
float: left;
width: 27%;
margin-right: 3%;
}
```
4.If the text is longer than the image, it will wrap around it. Let's put a width on the profile summary and float it too.
```
.summary {
width: 70%;
float: right;
}
```
##Exercise 6: Add More Floats and borders (15mins)
Add floats to the **Work Experience** section. Here's a link to the [final project](project/final.html) for reference and some hints to get you started:
In the HTML, the `.details` element contains the info that should be displayed on the left and the `.description` element contains the content to be displayed on the right. Floats can be applied to achieve this.
Remember, to float elements properly, declare a width as well.
What happens when elements are floated? The parent element *collapses* so make sure to fix that as well!
```
<div class="item">
<div class="details">
Company name, date, etc
</div>
<div class="description">
Job description
</div>
</div><!-- close .item -->
```
If you have some extra time, feel free to follow these instructions for adding a border or tweak some font styles!
* Each Work Experience item is contain in an element with the `.item` class. Create a new declaration block for `.item` and add the `border-bottom` property to it. The syntax is: `border-bottom: size style color;`
```
.item {
border-bottom: 1px solid #ccc;
}
```
Your page should look something like this: [Example 6](project/examples/6-floats.html).
##More Background Styles
It's time to get rid of these testing background colours and put in some nicer looking styles.
For the **Profile** section, add an opaque background style to see the header image behind it. Use the `background` property but with an RGBa value. The 'a' represents the alpha transparency. (There is an `opacity` property too but it makes the text opaque too so we'll use `background` instead).
```
.profile {
background: rgba(0,0,0,0.8);
}
```
##More Background Styles
Uh oh? Why didn't it work? The **Profile** and **Header** sections are *siblings* as in the elements come one after another. In order for the image to show through, it has to be declared in an ancestor or parent element.
* Let's move the `background` styles from the `header` selector to `body`.
* Change the font color in `.profile` to white, to see the text more clearly.
* Pick an accent colour and apply it to all links (`a` tags).
**Colour inspiration:**
[http://colours.neilorangepeel.com/](http://colours.neilorangepeel.com/)
[http://flatuicolors.com/](http://flatuicolors.com/)
##Exercise #7: Keep going with Background styles (20mins)
1. Update the **Work Experience** and **Education** section with the same background colour. The sample project is using a very light gray (#FEFEFC).
1. Change the font colour of the Profile, Skills & Contact section to white or #ffffff.
1. Add another background image to the **Skills** section. Don't worry about the overlay effect right now. Just add the image.
1. Add an underline to the `<h2>` headings, #cccccc or a colour of your choosing.
1. Update the background colour for the Contact section. Use #111111 or a colour of your choosing.
If you get stuck, ask a mentor! Don't worry if you don't finish, we'll go through it together as a class.
Your page should look something like this: [Example 7](/project/examples/7-bg.html)
##CSS3 Properties: border-radius
Take a break from tweaking spacing and floats and start adding some newer CSS3 features. The introduction of CSS3 brought in new ways to do things that previously had to be done in Flash, JavaScript or complicated hacks.
Let's start with `border-radius`.  Now we can do it with one line of CSS! Add this style to the existing declaration block for the profile image. Percentages or pixel values can be used. The bigger the number, the more rounded the corners will be. To get a perfect circle, set the `border-radius` to 50% and the original image must also be a square (or else it will look oval).
```
.profile img {
border-radius: 50%;
}
```
Let's add a border and some padding. Remember, padding adds space *inside* of an element.
```
.profile img {
border-radius: 50%;
border: 1px solid #ddd;
padding: 4px;
}
```
##Vendor prefixes
In some cases, to use a more advanced CSS3 styles, a standard CSS property may require an addition of a browser specific prefix. For example, the various prefixes for different browsers are as follows:
* Chrome: `-webkit-`
* Firefox: `-moz- `
* Internet Explorer: `-ms-`
Not all properties these prefixes and as newer browser versions come up, support for many of these prefixes are no longer required. Here's a couple handy resources.
* [caniuse.com](http://caniuse.com)
* [css3please.com](http://css3please.com/)
* [-prefix-free](http://leaverou.github.io/prefixfree/) - note, doesn't work **locally** in Chrome.
* [css-tricks.com/how-to-deal-with-vendor-prefixes](http://css-tricks.com/how-to-deal-with-vendor-prefixes/)
Profile Heading Update
-
Let’s update the <h2>
tag in the profile section and give it a style different from the other headings. First, we’ll override the bottom border. We need to use a selector that is specific to the profile section. Add a background color too. Try using your accent colour.
.profile h2 {
border: none;
background: #2980b9;
}
-
Headings are block level elements so they are going to want to span 100% width of it’s container. We could set a width value on it but what if we change the greeting? Then we’d have to set the width again. Remember, inline elements are as wide as their content so let’s change the heading to which display option?
display: inline-block;
so we can access the block and inline behaviors. Let's add some padding too!
.profile h2 {
border: none;
background: #2980b9;
display: inline-block;
padding: 10px 20px;
}
##CSS3 Transform
The `transform` property can be used to literally transform the element. You can skew it, scale it and few other things. Let's try adding just a slight `rotate` to it. The value for `rotate` is defined in degrees.
Add this declaration to the Profile heading. Try using positive or negative numbers until you find one that you like!
```
.profile h2 {
transform: rotate(-4deg);
}
```
Your page should look like this: [Example 8](project/examples/8-css3.html).
More about `transform` [here](http://css-tricks.com/almanac/properties/t/transform/).
##Animations
Let's check out some fun things we can do with this CSS3 animations library:
http://daneden.github.io/animate.css/
The CSS stylesheet has already been downloaded and added to the project css folder. We just need to link it to the HTML file. Remember the rules of cascading and inheritance so put it *before* your custom stylesheet.
Open **animate.css** in Sublime and take a peek at how to make these animations!
In order for these animations to work, we just need to include the desired animation in addition to the `.animated` class in the HTML tag itself, since the CSS is already taken care of. For example, if I wanted my `<h1>` to fade in from the left, it would look like this:
```xml
<h1 class="animated fadeInLeft">Name</h1>
```
##Animations on hover
Let's try adding an animation and other changes on hover using the `:hover` **psuedo** selector.
Psuedo selectors need to be attached to an element with a colon (`:`) and no space. A very common use for this selector is for links. Let's add a simple colour change when links are hovered on.
```
a:hover {
color: #000;
}
```
To make a change on hover for the "hello" heading, the selector will look like this:
```
.profile h2:hover {}
```
We can take a look through the **animate.css** stylesheet and pull out the declarations we want to use and apply it to the hover selector instead of adding it to the HTML element. That way, the animation won't happen until it's hovered on!
**But**, the `.animated` class still needs to be added in the HTML because that class contains the general styles needed to trigger the specific animations.
```xml
<h2 class="animated">Hello!</h2>
```
```
.profile h2:hover {
/* This is the bounce CSS */
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
```
**Note** that the `animation-name` is dependent on the matching `@keyframe` animation in the original **animate.css* file. It won't work without it.
##Exercise 9: Animations (10mins)
Take some time to experiment with what we just covered.
Here's the sample page: [Example 9](project/examples/9-animate.html).
Gradients
background
can also be used to create a gradient. Using CSS gradients instead of an image file, is better for flexibility and performance.
Gradients are usually one color that fades into another. With CSS you can control the direction of the fade, the colors, as well as where the color changes happen.
Gradients are set using the background-image
property. The shorthand background
property will also work.
To set the values, use linear-gradient(color, color)
to set the start and stop colour. The axis defaults at a top-to-bottom angle, though it is also possible to change the direction of the axis.
To change the direction to left-to-right, pass an additional parameter at the beginning of linear-gradient()
starting with the word "to" and the direction. (ex. "to right")
background-image: linear-gradient(to right, red, blue);
In the example below, try putting a start and stop colour. Then try changing the direction.
Learn all about gradients here: http://css-tricks.com/css3-gradients/
Gradients and Background Images
In our Skills section, the text is hard to read on top of the background image. Before CSS gradients, the other way to create an overlay effect on a background image was to use CSS position
to position a box with an opaque background colour on top of the image. But now it is so much easier with gradients and setting multiple background images.
Declare the gradient first so it can sit on top of the image. We also want the to see the image through the gradient so use RGBA color values to set the alpha transparency.
image source: http://www.stevensegallery.com
##Exercise 10: Gradient background & more floats! (20mins)
Using the previous example, add a gradient effect to the Skills section to make the text on background image more legible.
**Challenge!**
In the Skills section, there are also two options, a `.skills-list` option and a `.skills-circle` option. Hold off on the circle option for now but for the list, try adding floats to the `.column` class to get the three lists to line up side by side. Don't forget about all the funny quirks that happen to the stacking flow when floats are added!
```xml
<div class="skills-list">
<h3>List Option</h3>
<div class="columns"><!--float this class! -->
<h4>Best at:</h4>
<ul>
stuff
</ul>
</div>
...
</div>
```
Here's what your page should look like: [example 10](project/examples/10-skills-section.html)
##Icon fonts
Icon fonts are an easy way to add imagery to your web page but still have the flexibility of styling properties like size and colour using CSS since they *are* fonts!
There's many to choose from but today we'll use Font Awesome:
[http://fortawesome.github.io/Font-Awesome/](http://fortawesome.github.io/Font-Awesome/)
Under **Getting Started**, there are different options for adding the font files. If using the CDN, remember to add the "http" to make it work when you run your page "locally" (on your computer).
Simple to use, pick an icon you'd like to use and copy the supplied markup and class and that's it! There are already some included in your project. All of the social icons are included with an icon font.
##Class Exercise - Resetting List Styles
Add some flair to the skills list by adding icons to each skill. But first, let's reset some of the default list styles.
To remove the default bullet points, use the CSS property and value, `list-style-type: none;` and can be added to the `ul` since that element is used to create the list. Lists also have padding to create the indent so reset that by using a value of 0.
Since we want to remove the bullets from all the lists in this section, we can target them all at once using a **descendant selector**. We can use `.skill`, since that's the class for the entire section, and `ul` to target all the lists.
```css
.skills ul {
list-style-type: none;
padding: 0;
}
```
##Exercise 11: Adding Icon Fonts (15mins)
Now that the bullets have been removed, let's add a checkmark. Visit [Font Awesome](http://fortawesome.github.io/Font-Awesome/) and go to **Icons** to get the code.
Copy the markup and add it to your HTML file, where ever you want the icon to appear. In this case, we want it in each *list item* (`li`).
For this exercise, add the check marks (or whichever icon you'd like to use) to each list item and use the CSS `color` property to change the color of *only* the icons.
**Bonus:** Try center aligning the headings and lists like in the [final project](project/final.html).
**Extra Bonus:** Try changing the color or the `h4` subheadings.
Your page should look something like this: [Example 11](project/examples/11-icon-fonts.html)
Making circles
For the second option for the Skills section, let’s turn this lists into circles and center align them.
For this exercise, let’s use display: inline-block
instead of float: left
to get them to line up side-by-side and still be center aligned from the inherited style of text-align: center
.
Our selector will target only the list items contained within the circle option list to ensure that these styles will only be specific to this list. Since we want the individual list items itself to be lined up side-by-side, we have to target them specifically.
.skills-circles ul li {}
Making circles (continued)
We can give them an equal width & height as well to create a perfect circle using which CSS property?
border-radius!
Let’s add a border as well.
.skills-circles ul li {
display: inline-block;
height: 150px;
width: 150px;
border: 2px solid yourAccentColour;
border-radius: 50%;
}
##Hmm....
![](framework/img/circles.png)
If you see this, you didn't break it. It's just CSS.
![](framework/img/css.gif)
##Center align
Aligning elements horizontally is pretty straightforward, `text-align: center` or `margin: 0 auto`.
Vertical align? No so much.
Today we are going to try out one way. Remember `line-height`? It's used to create spacing between lines of content but if we set it to be the same as the height of the box, it will make the content inside align vertically.
... Unless you have text that is more than one line.
![](framework/img/line-height.png)
##Center align (continued)
If we look at the HTML markup, a `span` tag was added around each word so that we can still use the `line-height` trick on the list item, but now we can use the `span` tag to override the styles we don't want.
```xml
<ul>
<li><span>Social Media</span></li>
<li><span>Marketing Strategy</span></li>
...
</ul>
```
```
.skills-circles ul li {
display: inline-block;
height: 150px;
width: 150px;
border: 2px solid #2980b9;
border-radius: 50%;
line-height: 150px;
}
```
Create a new declaration block for the `span` tag, you can skip a couple levels even though it's nested inside of the `li` (remember, Inception... )
We need to make the span take on the characteristics if a block element in order for this fix to work.
```css
.skills-circles span {
display: inline-block;
}
```
##Center align (continued)
Now, set the `line-height` to normal to override the `line-height` set in the `li`. Then finally, `vertical-align: middle` can be added to vertically align the lines of text to each other (which probably seems like it should have work in the first place but doesnt... ugh.)
```
.skills-circles span {
display: inline-block;
line-height: normal;
vertical-align: middle;
}
```
Your page should look like this: [Example 12](project/examples/12-circles.html).
##Positioning in CSS
Sometimes floats and display just doesn't cut it.
The `position` property can be used to place elements in specific spots on the page without affecting the elements around it the way floats do. There are three options: relative, absolute and fixed. Elements are all `static` by default.
`position` is used in conjunction with offset properties: `top`, `right`, `bottom`, and `left`. These are use to identify where an element will be positioned.
Position: relative
When setting the position to relative
, elements will still appear within the normal flow a page but will unlock the additional offset properties (top, right, bottom, left). You can use these values to nudge the element in different directions.
Position: absolute
When positioning an element as absolute
, it needs to also be paired with relative
positioning. `relative` on it's own doesn't affect other elements but it is used to contain an `absolute` position element to a particular spot. Otherwise, it will position itself to the viewport, or browser window.
<div class="container">
<div class="box"></div>
</div>
Position: fixed
When positioning an element as fixed
, it will <always be positioned to the viewport. `relative` won't have any effect on this property. Also, it will always stay fixed on the page, even on page scroll.
<div class="container">
<div class="box"></div>
</div>
##Getting ready for the Final Exercise!
Some people may still be interested having a hard copy of your resume, so let's give them an option to download a copy. Go back to your HTML document and add a link to a copy of the resume. In your projects folder, there is a **resume.pdf** that you can use for today or feel free to use yours if you have it handy.
Use the anchor tag to link to your resume file. You can also add a new HTML5 `download` attribute to trigger a download right away! Also, give it a class to apply unique styles to it.
```xml
<a class="download" href="resume.pdf" download>
```
###Download attribute value
`download` is one of the few attributes that do not require a value. If no value is declared, the file name that is downloaded will be the same as the file name attached in the link. If a value is defined, the downloaded file will be the same name as that value. This technique would be useful if your site used generated file names.
```xml
<a class="download" href="resume.pdf" download="new-filename.pdf">
```
Exercise 13: Position and style download link
Apply fixed positioning to this element so that it’s always available as the user is scrolling through the page.
What properties & values are needed to position this element to the top right of the page?
.download {
position: fixed;
top: 0;
right: 0;
}
a
tags are inline elements by default so to apply padding or other sizing styles to it, we need to change it’s display value to inline-block
.download {
position: fixed;
top: 0;
right: 0;
display: inline-block;
}
##Exercise 13: Position and style download link
Now style the link as you wish! Add some padding, remove default link underline and change the color!
Your final code could look something like this:
```css
.download {
position: fixed;
top: 0;
right: 0;
display: inline-block;
background: #2980b9;
padding: 18px;
text-decoration: none;
color: #fff;
}
```
[Example 13](examples/13-fixed.html)
##Final Stretch!
From now until the end, take some time to make changes to smaller details like font sizes, margin, padding to give your HTML that extra polish!
![](framework/img/now-what.gif)
##Next steps
Here are some resources to help dive deeper into HTML & CSS
* [Learn to Code HTML & CSS](http://learn.shayhowe.com/)
* [Codecademy](http://www.codecademy.com/)
* [Treehouse](http://teamtreehouse.com/)
* [Code School](https://www.codeschool.com/)
* [HTML and CSS: Design & Build Websites](http://www.htmlandcssbook.com/) (book)
* [CodePen](http://codepen.io/)
* [CSSDeck](http://cssdeck.com)


| Opcode/Instruction | Op/En | 64/32 bit Mode Support | CPUID Feature Flag | Description |
|---|---|---|---|---|
| NP 0F FB /r1 PSUBQ mm1, mm2/m64 | A | V/V | SSE2 | Subtract quadword integer in mm1 from mm2 /m64. |
| 66 0F FB /r PSUBQ xmm1, xmm2/m128 | A | V/V | SSE2 | Subtract packed quadword integers in xmm1 from xmm2 /m128. |
| VEX.128.66.0F.WIG FB/r VPSUBQ xmm1, xmm2, xmm3/m128 | B | V/V | AVX | Subtract packed quadword integers in xmm3/m128 from xmm2. |
| VEX.256.66.0F.WIG FB /r VPSUBQ ymm1, ymm2, ymm3/m256 | B | V/V | AVX2 | Subtract packed quadword integers in ymm3/m256 from ymm2. |
| EVEX.128.66.0F.W1 FB /r VPSUBQ xmm1 {k1}{z}, xmm2, xmm3/m128/m64bcst | C | V/V | AVX512VL AVX512F | Subtract packed quadword integers in xmm3/m128/m64bcst from xmm2 and store in xmm1 using writemask k1. |
| EVEX.256.66.0F.W1 FB /r VPSUBQ ymm1 {k1}{z}, ymm2, ymm3/m256/m64bcst | C | V/V | AVX512VL AVX512F | Subtract packed quadword integers in ymm3/m256/m64bcst from ymm2 and store in ymm1 using writemask k1. |
| EVEX.512.66.0F.W1 FB/r VPSUBQ zmm1 {k1}{z}, zmm2, zmm3/m512/m64bcst | C | V/V | AVX512F | Subtract packed quadword integers in zmm3/m512/m64bcst from zmm2 and store in zmm1 using writemask k1. |
1. See note in Section 2.4, “AVX and SSE Instruction Exception Specification” in the Intel® 64 and IA-32 Architectures Software Developer’s Manual, Volume 2A and Section 22.25.3, “Exception Conditions of Legacy SIMD Instructions Operating on MMX Registers” in the Intel® 64 and IA-32 Architectures Software Developer’s Manual, Volume 3A.
| Op/En | Tuple Type | Operand 1 | Operand 2 | Operand 3 | Operand 4 |
| A | NA | ModRM:reg (r, w) | ModRM:r/m (r) | NA | NA |
| B | NA | ModRM:reg (w) | VEX.vvvv (r) | ModRM:r/m (r) | NA |
| C | Full | ModRM:reg (w) | EVEX.vvvv (r) | ModRM:r/m (r) | NA |
Subtracts the second operand (source operand) from the first operand (destination operand) and stores the result in the destination operand. When packed quadword operands are used, a SIMD subtract is performed. When a quadword result is too large to be represented in 64 bits (overflow), the result is wrapped around and the low 64 bits are written to the destination element (that is, the carry is ignored).
Note that the (V)PSUBQ instruction can operate on either unsigned or signed (two’s complement notation) integers; however, it does not set bits in the EFLAGS register to indicate overflow and/or a carry. To prevent undetected overflow conditions, software must control the ranges of the values upon which it operates.
In 64-bit mode and not encoded with VEX/EVEX, using a REX prefix in the form of REX.R permits this instruction to access additional registers (XMM8-XMM15).
Legacy SSE version 64-bit operand: The source operand can be a quadword integer stored in an MMX technology register or a 64-bit memory location.
128-bit Legacy SSE version: The second source operand is an XMM register or a 128-bit memory location. The first source operand and destination operands are XMM registers. Bits (MAXVL-1:128) of the corresponding YMM destination register remain unchanged.
VEX.128 encoded version: The second source operand is an XMM register or a 128-bit memory location. The first source operand and destination operands are XMM registers. Bits (MAXVL-1:128) of the destination YMM register are zeroed.
VEX.256 encoded versions: The second source operand is an YMM register or an 256-bit memory location. The first source operand and destination operands are YMM registers. Bits (MAXVL-1:256) of the corresponding ZMM register are zeroed.
EVEX encoded VPSUBQ: The second source operand is a ZMM/YMM/XMM register, a 512/256/128-bit memory location or a 512/256/128-bit vector broadcasted from a 32/64-bit memory location. The first source operand and destination operands are ZMM/YMM/XMM registers. The destination is conditionally updated with writemask k1.
DEST[63:0] ← DEST[63:0] − SRC[63:0];
DEST[63:0] ← DEST[63:0] − SRC[63:0]; DEST[127:64] ← DEST[127:64] − SRC[127:64];
DEST[63:0] ← SRC1[63:0]-SRC2[63:0] DEST[127:64] ← SRC1[127:64]-SRC2[127:64] DEST[MAXVL-1:128] ← 0
DEST[63:0] ← SRC1[63:0]-SRC2[63:0] DEST[127:64] ← SRC1[127:64]-SRC2[127:64] DEST[191:128] ← SRC1[191:128]-SRC2[191:128] DEST[255:192] ← SRC1[255:192]-SRC2[255:192] DEST[MAXVL-1:256] ← 0
(KL, VL) = (2, 128), (4, 256), (8, 512) FOR j←0 TO KL-1 i←j * 64 IF k1[j] OR *no writemask* THEN IF (EVEX.b = 1) AND (SRC2 *is memory*) THEN DEST[i+63:i]←SRC1[i+63:i] - SRC2[63:0] ELSE DEST[i+63:i]←SRC1[i+63:i] - SRC2[i+63:i] FI; ELSE IF *merging-masking* ; merging-masking THEN *DEST[i+63:i] remains unchanged* ELSE *zeroing-masking* ; zeroing-masking DEST[i+63:i] ← 0 FI FI; ENDFOR; DEST[MAXVL-1:VL] ← 0
VPSUBQ __m512i _mm512_sub_epi64(__m512i a, __m512i b);
VPSUBQ __m512i _mm512_mask_sub_epi64(__m512i s, __mmask8 k, __m512i a, __m512i b);
VPSUBQ __m512i _mm512_maskz_sub_epi64( __mmask8 k, __m512i a, __m512i b);
VPSUBQ __m256i _mm256_mask_sub_epi64(__m256i s, __mmask8 k, __m256i a, __m256i b);
VPSUBQ __m256i _mm256_maskz_sub_epi64( __mmask8 k, __m256i a, __m256i b);
VPSUBQ __m128i _mm_mask_sub_epi64(__m128i s, __mmask8 k, __m128i a, __m128i b);
VPSUBQ __m128i _mm_maskz_sub_epi64( __mmask8 k, __m128i a, __m128i b);
PSUBQ:__m64 _mm_sub_si64(__m64 m1, __m64 m2)
(V)PSUBQ:__m128i _mm_sub_epi64(__m128i m1, __m128i m2)
VPSUBQ:__m256i _mm256_sub_epi64(__m256i m1, __m256i m2)
None.
None.
Non-EVEX-encoded instruction, see Exceptions Type 4.
EVEX-encoded VPSUBQ, see Exceptions Type E4.


DIAG Set 10 - Annual cycle line plots of global means
| HadISST/OI.v2 1982-2001 | ||
|---|---|---|
| ICEFRAC | Sea-ice area (Northern) | plot |
| ICEFRAC | Sea-ice area (Southern) | plot |
| SST | Sea surface temperature | plot |
| SMMR & SSM/I 1979-1999 | ||
| ICEFRAC | Sea-ice area (Northern) | plot |
| ICEFRAC | Sea-ice area (Southern) | plot |
| Legates & Willmott 1920-80 | ||
| PRECT | Precipitation rate | plot |
| TREFHT | 2-meter air temperature | plot |
| Willmott & Matsuura 1950-99 | ||
| TREFHT | 2-meter air temperature (land) | plot |
| NCEP Reanalysis 1979-98 | ||
| PREH2O | Total precipitable water | plot |
| PSL | Sea-level pressure | plot |
| SHFLX | Surface sensible heat flux | plot |
| T 850 | 850 mb temperature | plot |
| T 200 | 200 mb temperature | plot |
| TS | Surface temperature | plot |
| U 200 | 200 mb zonal wind | plot |
| Z 500 | 500 mb geopotential height | plot |
| Z 300 | 300 mb geopotential height | plot |
| ERA40 Reanalysis 1980-2001 | ||
| EP | Evaporation - precipitation | plot |
| LHFLX | Surface latent heat flux | plot |
| PREH2O | Precipitable water | plot |
| QFLX | Surface water flux | plot |
| T 850 | 850 mb temperature | plot |
| T 200 | 200 mb temperature | plot |
| U 200 | 200 mb zonal wind | plot |
| Z 500 | 500 mb geopotential height | plot |
| Z 300 | 300 mb geopotential height | plot |
| ECMWF Reanalysis 1979-93 | ||
| EP | Evaporation - precipitation | plot |
| LHFLX | Surface latent heat flux | plot |
| PREH2O | Precipitable water | plot |
| QFLX | Surface water flux | plot |
| T 850 | 850 mb temperature | plot |
| T 200 | 200 mb temperature | plot |
| U 200 | 200 mb zonal wind | plot |
| Z 500 | 500 mb geopotential height | plot |
| Z 300 | 300 mb geopotential height | plot |
| JRA25 Reanalysis 1979-04 | ||
| PREH2O | Total precipitable water | plot |
| PSL | Sea-level pressure | plot |
| SHFLX | Surface sensible heat flux | plot |
| T 850 | 850 mb temperature | plot |
| T 200 | 200 mb temperature | plot |
| TREFHT | 2-meter surface air temperature | plot |
| U 200 | 200 mb zonal wind | plot |
| Z 500 | 500 mb geopotential height | plot |
| Z 300 | 300 mb geopotential height | plot |
| AIRS IR Sounder 2002-06 | ||
| T 850 * | 850 mb temperature | plot |
| T 200 | 200 mb temperature | plot |
| Large-Yeager 1984-2004 | ||
| SHFLX | Surface sensible heat flux | plot |
| QFLX | Surface water flux | plot |
| FLNS | Surf Net LW flux | plot |
| FSNS | Surf Net SW flux | plot |
| NVAP 1988-1999 | ||
| PREH2O | Total precipitable water | plot |
| TGCLDLWP | Cloud liquid water (ocean) | plot |
| Woods Hole OAFLUX 1958-2006 | ||
| LHFLX | Latent Heat Flux | plot |
| QFLX | Surface Water Flux | plot |
| GPCP 1979-2009 | ||
| PRECT | Precipitation rate | plot |
| CMAP (Xie-Arkin) 1979-98 | ||
| PRECT | Precipitation rate | plot |
| SSM/I (Wentz) 1987-2000 | ||
| PRECT | Precipitation rate (ocean) | plot |
| PREH2O | Precipitable water (ocean) | plot |
| TGCLDLWP | cloud liquid water (ocean) | plot |
| TRMM (3B43) 1998-2009 | ||
| PRECT | Precipitation rate (38S-38N) | plot |
| ERBE Feb1985-Apr1989 | ||
| FLUT | TOA upward longwave flux | plot |
| FLUTC | TOA clearsky upward longwave flux | plot |
| FSNTOA | TOA net shortwave flux | plot |
| FSNTOAC | TOA clearsky net shortwave flux | plot |
| LWCF | TOA longwave cloud forcing | plot |
| RESTOA | TOA residual energy flux | plot |
| SWCF | TOA shortwave cloud forcing | plot |
| CERES-EBAF March 2000-Feb 2010 | ||
| ALBEDO | TOA albedo | plot |
| ALBEDOC | TOA clearsky albedo | plot |
| FLUT * | TOA upward LW flux | plot |
| FLUTC | TOA clearsky upward LW flux | plot |
| FSNTOA * | TOA net SW flux | plot |
| FSNTOAC | TOA clearsky net SW flux | plot |
| LWCF * | TOA longwave cloud forcing | plot |
| SWCF * | TOA shortwave cloud forcing | plot |
| CERES 2000-2003 | ||
| ALBEDO | TOA albedo | plot |
| ALBEDOC | TOA clearsky albedo | plot |
| FLUT * | TOA upward LW flux | plot |
| FLUTC | TOA clearsky upward LW flux | plot |
| FSNTOA * | TOA net SW flux | plot |
| FSNTOAC | TOA clearsky net SW flux | plot |
| LWCF * | TOA longwave cloud forcing | plot |
| SWCF * | TOA shortwave cloud forcing | plot |
| ISCCP FD Jul1983-Dec2000 | ||
| FLDS | Surface LW downwelling flux | plot |
| FLNS | Surface Net LW flux | plot |
| FSDS | Surface SW downwelling flux | plot |
| FSNS | Surface Net SW flux | plot |
| ISCCP D2 1983-2001 | ||
| CLDHGH (IR clouds) | High-level cloud amount | plot |
| CLDHGH (VIS/IR/NIR clouds) | High-level cloud amount | plot |
| CLDLOW (IR clouds) | Low-level cloud amount | plot |
| CLDLOW (VIS/IR/NIR clouds) | Low-level cloud amount | plot |
| CLDMED (IR clouds) | Medium-level cloud amount | plot |
| CLDMED (VIS/IR/NIR clouds) | Medium-level cloud amount | plot |
| CLDTOT (IR clouds) | Total cloud amount | plot |
| CLDTOT (VIS/IR/NIR clouds) | Total cloud amount | plot |
| CFMIP Observation Simulator Package (COSP) Primary Diagnostics | ||
| ISCCP-COSP From D1 Daytime Jul1983-Sep2008 | ||
| CALIPSO GOCCP 2007-2010 | ||
| CLDTOT_CAL | Total cloud amount | plot |
| CLDLOW_CAL | Low-level cloud amount | plot |
| CLDMED_CAL | Mid-level cloud amount | plot |
| CLDHGH_CAL | High-level cloud amount | plot |
| ISCCP-COSP From D1 Daytime Jul1983-Sep2008 | ||
| CLDTOT_ISCCPCOSP | Total cloud amount (tau > 0.3) | plot |
| CLDTHICK_ISCCPCOSP | Optically thick cloud amount (tau > 23.0) | plot |
| MISR L3 CTH-OD V5 Mar2000-Nov2009 | ||
| CLDTOT_MISR | Total cloud amount (tau > 0.3) | plot |
| CLDTHICK_MISR | Optically thick cloud amount (tau > 23.0) | plot |
| MODIS-COSP 2003-2010 | ||
| CLDTOT_MODIS | Total cloud amount (tau > 0.3) | plot |
| CLDTHICK_MODIS | Optically thick cloud amount (tau > 23.0) | plot |
| Additional COSP Diagnostics | ||
| CALIPSO GOCCP 2007-2010 | ||
| CLDTOT_CAL | Total cloud amount | plot |
| CLDLOW_CAL | Low-level cloud amount | plot |
| CLDMED_CAL | Mid-level cloud amount | plot |
| CLDHGH_CAL | High-level cloud amount | plot |
| CLOUDSAT-COSP From Level 2 GEOPROF Jun2006-Nov2010 | ||
| CLDTOT_CS2 | Total cloud amount | plot |
| ISCCP-COSP From D1 Daytime Jul1983-Sep2008 | ||
| CLDTOT_ISCCPCOSP | Total cloud amount (tau > 0.3) | plot |
| CLDLOW_ISCCPCOSP | Low-topped cloud amount (tau > 0.3) | plot |
| CLDMED_ISCCPCOSP | Mid-topped cloud amount (tau > 0.3) | plot |
| CLDHGH_ISCCPCOSP | High-topped cloud amount (tau > 0.3) | plot |
| CLDTHICK_ISCCPCOSP | Optically thick cloud amount (tau > 23.0) | plot |
| MEANPTOP_ISCCPCOSP | Mean cloud top pressure | plot |
| MEANCLDALB_ISCCPCOSP | Mean cloud albedo | plot |
| MISR L3 CTH-OD V5 Mar2000-Nov2009 | ||
| CLDTOT_MISR | Total cloud amount (tau > 0.3) | plot |
| CLDLOW_MISR | Low-topped cloud amount (tau > 0.3) | plot |
| CLDMED_MISR | Mid-topped cloud amount (tau > 0.3) | plot |
| CLDHGH_MISR | High-topped cloud amount (tau > 0.3) | plot |
| CLDTHICK_MISR | Optically thick cloud amount (tau > 23.0) | plot |
| MODIS-COSP 2003-2010 | ||
| CLDTOT_MODIS | Total cloud amount (tau > 0.3) | plot |
| CLDLOW_MODIS | Low-topped cloud amount (tau > 0.3) | plot |
| CLDMED_MODIS | Mid-topped cloud amount (tau > 0.3) | plot |
| CLDHGH_MODIS | High-topped cloud amount (tau > 0.3) | plot |
| CLDTHICK_MODIS | Optically thick cloud amount (tau > 23.0) | plot |
| CLIMODIS | Total ice cloud amount | plot |
| CLWMODIS | Total liquid cloud amount | plot |
| IWPMODIS | Mean ice water path | plot |
| LWPMODIS | Mean liquid water path | plot |
| PCTMODIS | Mean cloud top pressure | plot |
| REFFCLIMODIS | Mean effective radius (ice clouds) | plot |
| REFFCLWMODIS | Mean effective radius (liquid clouds) | plot |
| TAUILOGMODIS | Log-weighted mean optical thickness (ice clouds) | plot |
| TAUWLOGMODIS | Log-weighted mean optical thickness (liquid clouds) | plot |
| TAUTLOGMODIS | Log-weighted mean optical thickness (all clouds) | plot |
| TAUIMODIS | Mean optical thickness (ice clouds) | plot |
| TAUWMODIS | Mean optical thickness (liquid clouds) | plot |
| TAUTMODIS | Mean optical thickness (all clouds) | plot |


Juan Luis Guerra Seijas (born June 7, 1957), is a Dominican musician, singer, composer, and record producer. He has sold 30 million records worldwide, making him one of the best-selling Latin music artists. Throughout his career, he has won numerous awards including 21 Latin Grammy Awards, two Grammy Awards, and two Latin Billboard Music Awards. Guerra won 3 Latin Grammy Awards in 2010, including Album of the Year.
In 2012, he won the Latin Grammy Award for Producer of the Year. Guerra is one of the most internationally recognized Latin artists of recent decades. His popular style of merengue and Afro-Latin fusion has garnered him considerable success throughout Latin America. He is also credited for popularizing bachata music on a global level and is often associated with the genre, although his distinct style of bachata features a more traditional bolero rhythm and aesthetic mixed with bossa-nova influenced melodies and harmony in some of his songs.[5] He does not limit himself to one style of music; instead, he incorporates diverse rhythms like merengue, bachata-fusion, balada, salsa, rock and roll, and even gospel. "Ojalá Que Llueva Café" ("Let's hope it will rain coffee") is one of his most critically acclaimed pieces.


Chester Bennington
His music touched the hearts of millions
Timeline of Chester Benningtion:
- 1976 - Born in Phoenix, Arizona
- 1983 to 1993 - Endures horrific abuse and turns to alcohol and hard drugs.
- 1993 - Moves in with his mother where she helps him with his drug addiction. He begins working at Burger King and starting his career as a professional musician in a band called Sean Dowdell and His Friends?. Later in the year, Dowdell and Bennington left and formed a new band named Grey Daze.
- 1998 - Leaves Grey Daze, struggles to find a new band.
- 1999 - Joins the band Xero, the name changed to Hybrid Theory, and then finally to Linkin Park which signed with Warner Brothers.
- 2000 - Releases the album Hybrid Theory, 4.8 million copies sold in its debut week.
- 2002 - Releases the album Reanimation, 270,000 copies sold in its debut week.
- 2003 - Releases the album Meteora, 810,000 copies sold in its debut week.
- 2004 - Side projects with other artists like DJ Lethal and Jay-Z. Created a side band named Dead by Sunrise. Raised money for victims of Hurricane Charley, Indian Ocean tsunami, and the Special Operations Warrior Foundation. Founds the non-profit Music for Relief Fund to respond to natural disaters.
- 2005 - Raised money for the victims of Hurricane Katrina.
- 2007 - Releases the album Minutes to Midnight. 625,000 copies sold in its debut week.
- 2009 - Releases the album A Thousand Suns. 241,000 copies sold in its debut week.
- 2012 - Releases the album Living Things. 223,000 copies sold in its debut week.
- 2012 - Releases the album Recharded. 223,000 copies sold in its debut week.
- 2014 - Releases the album The Hunting Party. 110,000 copies sold in its debut week.
- 2017 - Chester Bennington sadly takes his own life at the age of 41.
"I have been able to tap into all the negative things that can happen to me throughout my life by numbing myself to the pain so to speak and kind of being able to vent it through my music."


To create a game you need to go to create page. You can see there are the rules in left. fill the form with typing the name and choosing your symbol. Also you can make the game private with password protection. After that you can share the game with friends.
Go to all games page and search for orange button with text "Join". Click it and play
When you are in the game, first check the status. It will tell you what action to do. If there are no another opponent in the game you should wait. If it's your turn - click on the empty tile you want to place mark and then click play button else should wait until opponent plays. Pop up messages are showing from top-right of the screen if you make mistake.
- All operations needs a registered account.


There is a problem on this page
This email can be edited. It will be received by all applicants associated with each of the applications you selected.
This email can be edited. It will be received by all applicants associated with each of the applications you selected.


Yeah I think htat ac_perc as it sits can never work with a pool
it needs to be changed, we have discusses it with james, but obviously he hasnt had time yet
wonder if ac_perc works with a BR of 0.
No idea how to use KV though... it just keeps saying couldnt find ("key")
blackjok3r07-Oct-18 03:09 AM
Got an idea of this so far... looks like I might be able to make it print from mempool anyway, making this low diff thing pointless
CrisF07-Oct-18 04:20 AM
Is it all good to update, then run update_komodo.sh?
blackjok3r07-Oct-18 04:20 AM
I'm very close here... one thing left to do.
I need to take the length of ptr->key and only print the value of : keyvalue from the length of that value
@CrisF just run ./stop.sh(edited)
then ./start.sh
currently you will need to stop it the first time I think
CrisF07-Oct-18 04:21 AM
Ok, thanks!
blackjok3r07-Oct-18 04:21 AM
it shouldnt have to do that, but there is a bug
nope KV is bugged out...
you cannot use the password value
give up for now
bye all
2
jl777c07-Oct-18 07:47 AM
likely yes, it never printed from mempool, it just seemed that way with low diff on-demand
to print from mempool:
1. getrawmempool -> txids[]
2. iterate the txids[] and find ones with opreturn
3. parse the opreturn and display ones in the right format
THAT is the way to display mempool
blackjok3r07-Oct-18 09:15 AM
Not looking to print mempool
Will let u know what I found tomorrow @jl777c
Alright07-Oct-18 03:15 PM
does anyone know what @blackjok3r meant by you can't use password?
jspook1607-Oct-18 03:16 PM
FYI I was able to parse opreturn transactions to display key values in the right format. Will work on getting the tx IDs from mempool today
You can't use the password feature for a kvupdate I think @Alright
Alright07-Oct-18 03:16 PM
why?
doubt anything broke it since I tested last
jspook1607-Oct-18 03:18 PM
Haven't really checked it, so not sure
Alright07-Oct-18 03:18 PM
you just need to make sure you set password properly
there's been some confusion over that before
kvupdate <key> <value> <amount of days> <password>
must set amount of days if you want to use password
can anyone think of a usecase for a chain that's on-demand blockss and diff never raises?
we made it, but not sure it's actually useful now if we're just going to pull OP_RETURNs from mempool
jl777c07-Oct-18 03:24 PM
a chain with very high tx/min
Alright07-Oct-18 03:24 PM
no block reward though
it's a cool concept, but I doubt anyone will actually use it
jl777c07-Oct-18 03:24 PM
it would reduce the CPU time needed for scaling
Alright07-Oct-18 03:25 PM
yea scale test could use it
relies entirely on it being dpow'd
kmdkrazy07-Oct-18 03:51 PM
you guys figure this shit out yet?
ive been busy with my company and a nasty divorce
Alright07-Oct-18 03:53 PM
current state of staked is waiting for someone to come back before we're able to fix momom, in the mean time, you can track progress here
Organize anything, together. Trello is a collaboration tool that organizes your projects into boards. In one glance, know what's being worked on, who's working on what, and where something is in a process.
kmdkrazy07-Oct-18 03:53 PM
yeah ... how long is he on "holiday"
seems like weeks
Alright07-Oct-18 03:54 PM
plenty to do in the mean time, we aren't in much of a rush
STAKED will come out much stronger because of these couple weeks, trust me
kmdkrazy07-Oct-18 03:55 PM
ok... ill sit back and relax
Alright07-Oct-18 03:55 PM
work has been non-stop for months now
jl777c07-Oct-18 03:55 PM
months?
i thought years
Alright07-Oct-18 03:55 PM
kmdkrazy07-Oct-18 03:55 PM
tweaks are good
you guys are awesome
a GUI soon?
smart contract gui that can be understood by the 98%ers
Alright07-Oct-18 03:58 PM
Pinned a message.
kmdkrazy07-Oct-18 03:59 PM
got it
Bappo07-Oct-18 07:07 PM
Anyone want to help me create a coin for fun?
@Deleted User help me
like
do it with me help
Alright07-Oct-18 07:13 PM
@blackjok3r script for pushing assetchains.json to oracle is done
jl777c07-Oct-18 07:13 PM
a chain on one node is more like a database
it is just one if statement in miner.cpp that needs to be changed for that


The PMOS model is a simple model of a p-channel metal-oxide semiconductor FET. It differs slightly from the device used in the SPICE simulator. For more details please care for H. Spiro.
The model does not consider capacitances. A high drain-source
resistance RDS is included to avoid numerical difficulties.
Please note: In case of useHeatPort=true the
temperature dependence of the electrical behavior is
not modelled yet. The parameters are not
temperature dependent.


I think order level should be a POD:
A Plain Old Data Structure in C++ is an aggregate class that contains only PODS as members, has no user-defined destructor, no user-defined copy assignment operator, and no nonstatic members of pointer-to-member type.
and used as order_level{price, quantity, side}
we should rename OrderLevel to order_level.
It's should be a struct.
Ignore this message if you plan to add member function but for the moment it's just seem's to be data.


Ocean [ac31], ocean, in Crystal Sea
Last updated Turn #148
Ocean [ac31], ocean, in Crystal Sea
------------------------------------------------------------------------
9: Sea Lion [hq7s], ship, 2 hulls, 1 rowing port, 6 sails, arrived from
9: Ocean [ac30], owner:
9: Toulouse [h1q], Pen, with eight sailors
10: Sea Lion [hq7s], ship, 2 hulls, 1 rowing port, 6 sails, departed for
10: Ocean [ac32].
Routes leaving Ocean:
North, to Ocean [ab31], 6 days
East, to Ocean [ac32], 6 days
South, plain, to Wildhorse Plains [ad31], Oleg's Folly, 2 days
Garrison [em5s], garrison, uncontrolled, with 11 peasants
West, to Ocean [ac30], 6 days


Dress up games were a huge part of my childhood so here's a homage. This was made for a show with friends about nostalgia for the technology of our youth. The show was titled Xx_CutePixel_xX and was on display at The Frame Gallery in Pittsburgh from 02/07/2020-02/09/2020.


Toto Wolff missed pole position feeling but it's a "shame for Lewis"
by Matt GrettonValtteri Bottas' pole position for the United States Grand Prix gives Mercedes their first P1 on a Saturday since the German Grand Prix way back in the height of the summer.
Bottas finished just 0.012 ahead of Sebastian Vettel's P2 with a sublime lap in the first run of Q3. Team boss Wolff highlights Bottas' performance but also spares a thought for Hamilton who will start from fifth place.
"It was so tight you could see the were a few cars between the same tenths I'm very happy - it's good to be on pole again - shame for Lewis - we need to see what we can do tomorrow on strategy," Wolff told Sky Sports.
"With an aggressive strategy you can still compete for the win it wasn't his quali strategy so we will have to look into that."


Personal Portfolio: Joe Simpson
This website will be a way for me to showcase my skills to potential employers
Game development is a complicated field with many different disciplines coming together to make a product. Because of this, it is important to find a role to specialize in and demonstrate that you have the skills to fulfill that role. The purpose of this portfolio website will be to showcase my work in the game development program at MSU to show potential employers that I have the potential to contribute as a designer on any game dev team. This way employers will know not only what I aim to do at the company, but that I have the skills to do it.


I'm Devan 👉 @devanipsum
// Descript project here
// Descript jekyll here
// Descript sass here
- What do you know now that you didn't know when you were in school?
- If you could go back would you do anything differently?
- What is your favorite resturant in College Station?
- What do I do if I can't get the job I want?


TABLE OF CONTENTS
A. GS1 Related B. GS2 Related POLITY 1. Collegium and transparency HEALTH ISSUES 1. Threefold rise in domestic budget for fight against tuberculosis C. GS3 Related ECONOMICS 1. Govt. plans to sell Air India, AI Express together 2. Crypto currencies, ICOs under SEBI lens 3. Fiscal deficit rises to 91.3% of FY18 target in 6 months D. GS4 Related E. Prelims Fact F. UPSC Prelims Practice Questions G. UPSC Mains Practice Questions
Nothing here for Today!!!
Context:
- Recently, the Supreme Court decided to make public, on the court’s website, its various decisions, including its verdicts on persons nominated for elevation as judges to the high courts, its choices of candidates for elevation to the Supreme Court, and its decisions on transfer of judges between different high courts
Case Histories:
- In the cases of A. Zakir Hussain and Dr. K. Arul(candidates nominated for elevation to the Madras High Court) the collegium has said: “keeping in view the material on record, including the report of Intelligence Bureau [IB] he is not found suitable for elevation to the HC Bench”
- The reasons offered for rebuffing the nomination of Vasudevan V.N., a judicial member of the Income Tax Appellate Tribunal, are particularly perplexing. The report said: “While one of the two consultee-colleagues has offered no views about his suitability, the other colleague has not found him suitable for elevation”
- As per record, his name was also recommended by the Collegium of the Calcutta High Court on 28.11.2016 and the Government of West Bengal has expressed its disagreement
- Record placed before us also shows that the proposal for his elevation initiated on a previous occasion by the Collegium of the Bombay High Court was rejected by the Supreme Court Collegium on 1st August 2013
Issues related to Vasudevan VN
- The collegium, ever since its inception, following the Supreme Court’s judgment in what is known as the Second Judges Case (1993). The present revelations, much opposed to their perceived objective, scarcely make the system more transparent
- In Mr. Vasudevan’s case, for example, we don’t know which of the “consultee-judges objected to his elevation, and why the judge interviewed found him unsuitable
- Also the collegium’s express noting that Mr. Vasudevan had previously been recommended by two different high court collegia
- These issues concerning the system employed to appoint judges to the Supreme Court and the high courts are of particular salience
Constitution of India and appointments of High Court judges:
- The President, who would act on the advice of the council of ministers is required to compulsorily consult certain authorities, including the Chief Justice of India (CJI)
- And when making appointments to a high court, the chief justice of that court
‘Consultation’:
- In 1977, in Sankalchand Sheth’s case, when interpreting the word “consultation,” the Supreme Court ruled that the term can never mean “concurrence”. Hence, the CJI’s opinion, the court ruled, was not binding on the executive
- And in 1981, in the First Judges Case, the court once again endorsed this interpretation, partly
- But twelve years later, in the Second Judges Case, the court overruled its earlier decisions. It now held that “consultation” really meant “concurrence”. And that the CJI’s view enjoys primacy, since he is “best equipped to know and assess the worth” of candidates
- In 1998, in the Third Judges Case, the court clarified its position further. The collegium, it said, will comprise, in the case of appointments to the SC, the CJI and his four senior-most colleagues. And, in the case of appointments to the high courts, the CJI and his two senior-most colleagues
Collegium is a part of the basic structure of the constitution
- When the Constitution was altered, through the 99th constitutional amendment and when the collegium was sought to be replaced by the National Judicial Appointments Commission, the court swiftly struck it down
- It ruled, in what we might now call the Fourth Judges Case (2015), that the primacy of the collegium was a part of the Constitution’s basic structure and this power could not, therefore, be removed even through a constitutional amendment
1. Threefold rise in domestic budget for fight against tuberculosis
World Health Organisation report regarding TB cases in India:
- India’s domestic budget for fighting tuberculosis showed a dramatic jump from about ₹700 crore in 2015 to ₹2,500 crore last year.
- In 2016, India recorded a 12% dip in the number of TB deaths from the previous year though the incidence dipped marginally by 1%.
- The number of notified cases of drug-resistant tuberculosis (MDR-TB) jumped from 79,000 to 84,000 in 2016
- However, with 1.7 million new cases in 2016, India still continues to be the largest contributor to the global burden with up to a quarter of the 6.3 million new cases of TB (up from 6.1 million in 2015). Inspite of the dip, India accounts for about 32% of the number of people worldwide who succumbed to the disease.
‘90-90-90 target’ by 2035:
- The government has committed to achieve a ‘90-90-90 target’ by 2035 (90% reductions in incidence, mortality and catastrophic health expenditures due to TB).
- This is premised on improved diagnostics, shorter treatment courses, a better vaccine and comprehensive preventive strategies.
Activist opinions:
TB is still stigmatized and under-reported — especially from the private sector — and top-line drugs are still inadequate to treat people who suffer from the drug-resistant forms of the disease.
1. Govt. plans to sell Air India, AI Express together
In news:
- The Union government is working to conclude the sale of national carrier Air India by June 2018 and is keen on selling its core airline operations, together with its low-cost international airline, Air India Express.
- The decision was taken by the Air India-specific Alternative Mechanism — a group of Ministers led by Finance Minister to decide on the modalities of stake sale in the national carrier.
- Modalities: As per the decision, the Centre will look to sell AI’s regional airline Alliance Air to a separate universe of bidders while Air India and Air India Express will likely go together.
- On June 28, the Cabinet Committee on Economic Affairs, chaired by Prime Minister Narendra Modi, gave an in-principle nod for strategic disinvestment of Air India. The ministerial panel, led by Finance minister, is aiming to divest stake in Air India and its subsidiaries by June 2018.
- The panel is also in favour of hiving off Air India’s properties and non-operational assets into a special purpose vehicle (SPV) to retire a portion of the national carrier’s debt.
2. Crypto currencies, ICOs under SEBI lens
Context:
- The rising popularity of crypto currencies and the increasing number of entities looking at raising funds through Initial Coin Offerings (ICO).
- The trend has caught the attention of the capital market regulator, which is evaluating whether such instruments and offerings can be brought under its regulatory purview.
In news:
- The Securities and Exchange Board of India (SEBI) is mulling whether an ICO can be regulated under the existing legal framework or certain amendments would be required in case the government wants the capital market watchdog to be the regulatory authority for such issuances.
Who should regulate?
- Incidentally, crypto currencies like bitcoin, ethereum and such offerings have been under government radar for long.
- Discussions have been held between various bodies, including SEBI and the Reserve Bank of India (RBI), on the possible ways in which this segment can be regulated.
- The central bank is of the view that these instruments are securities and so SEBI should be the regulating body.
About ICO:
- An ICO, like an equity initial public offer (IPO), is an issuance of digital tokens that can be converted into crypto currencies and are mostly used to raise funds by start-up firms dealing in blockchain technology and virtual currencies like bitcoins and ethereum.
- Unlike an IPO, which is governed by SEBI regulations, there is no regulatory body for ICOs in India.
Key Points:
- According to data from UK-based CoinDesk, nearly $2.7 billion has been raised globally through ICOs since 2014.
- “Bitcoins are neither ‘commodities derivatives’ nor ‘securities’ under Securities Contracts (Regulation) Act, 1956.
3. Fiscal deficit rises to 91.3% of FY18 target in 6 months
In news:
- In the first six months of the current financial year, the country’s fiscal deficit touched 91.3 percent of the full-year budget estimate
- During the same period in the previous fiscal year, this figure was 83.9 percent
- In addition to the annual deficit, the national debt – the accumulation of past deficits and interest due to lenders to the Treasury – now exceeds trillion
Slippage of Fiscal deficit target:
- This will be due to lower-than-budgeted revenues, which are because of
- Uncertainty related to the buoyancy of indirect taxes post-GST, revenues from telecom and disinvestment flows
- Lower surplus transferred by the RBI
Basic Information:
What is ‘Fiscal Deficit’?
- A fiscal deficit occurs when a government’s total expenditures exceed the revenue that it generates, excluding money from borrowings. Deficit differs from debt, which is an accumulation of yearly deficits.
- A fiscal deficit is regarded by some as a positive economic event. For example, economist John Maynard Keynes believed that deficits help countries climb out of economic recession. On the other hand, fiscal conservatives feel that governments should avoid deficits in favor of a balanced budget policy.
Nothing here for Today!!!
|
Nothing here for Today!!! |
F. Practice Questions for UPSC Prelims Exam
Question 1. Consider the following statements
- A fiscal deficit occurs when a government’s total expenditures exceed the revenue that it generates, excluding money from borrowings
- Deficit differs from debt, which is an accumulation of yearly deficits
- John Maynard Keynes believed that deficits help countries climb out of economic recession
Choose the correct statements from the options given below
- 1 only
- 1 and 2
- 2 and 3
- 1,2 and 3
See
Question 2. Who is the chairman of Cabinet Committee on Economic Affair?
- Prime Minister
- Finance Minister
- Home Minister
- Lok Sabha speaker
See
Question 3. Consider the following statements
- An Initial Coin Offerings (ICO) is an issuance of digital tokens that can be converted into crypto currencies.
- ICO issuance is regulated by SEBI
Choose the correct statements from the option given below
- 1 only
- 2 only
- Both 1 and 2
- Neither 1 nor 2
Question 4. The famous Nabakalebara festival belongs to which of the following states?
- Rajasthan
- Odisha
- West Bengal
- Bihar
Question 5. The Coriolis force is maximum at _______?
- Poles
- Equator
- Tropics
- Mountain peaks
G. UPSC Mains Practice Questions
GS Paper I
- How do you justify the view that the level of excellence of the Gupta numismatic art is not at all noticeable in later times?
GS Paper II
- “The local self government system in India has not proved to be effective instrument of governance”. Critically examine the statement and give your views to improve the situation.
Also, check previous Daily News Analysis
“Proper Current Affairs preparation is the key to success in the UPSC- Civil Services Examination. We have now launched a comprehensive ‘Current Affairs Webinar’. Limited seats available. Click here to Know More.”
Enroll for India’s Largest All-India Test Series


Man shot dead on Costa del Sol is pictured after mum's desperate bid to save him
The mother of Peter Williamson was “screaming for help” as police tried to revive her son after he was shot in the chest outside his Costa Del Sol villa inh Spain
by Lila RandallThe mother of a man who was killed outside his Spanish home tried desperately to save her son, reports have revealed.
Peter Andrew Williamson, 39, was shot dead in a professional hit in Spain as he parked his Audi outside his villa in Riviera del Sol near Fuengirola after returning home from the gym on Thursday.
It is believed businessman Mr Williamson was shot five times in the chest before his killer escaped in a plush getaway car.
A family member of the Salford man - who did not want to be named - has told of how the victim’s mother, who also lives in the area, was “screaming for help” as she desperately tried to save her son, Manchester Evening News reports.
The family member said: ”She was screaming for help, screaming at the police to try and save him.
"It was her and a couple of neighbours trying to help.”
Police desperately tried to save his life at the scene, but were unable to revive him.
No arrests have been made and police are investigating.
His Audi was towed away at around 7.30pm after forensic experts had combed the murder scene for evidence.
The family member added: “We just don't get why it happened. His mum is in bits about it. She brought him into this world and she tried to save him. She was there when he went out of the world too."
Since his death, conflicting media reports have circulated about Mr Williamson’s business activities, with national media reporting the assassination is connected to drug feuds.
Talks of a gangland battle have prompted the family to speak out ‘to clarify some of what they have heard’.
The family spokesperson added: ”He had a number of businesses with his wife. He paid his taxes, everything was above board. His mum wants people to know that.
"I just wanted to set a few records straight. His mum just wants people to know that that he had nothing to do with drugs, he was not doing anything like that."
Mr Williamson, nicknamed Snaggle, was well-known in the UK despite living in Spain for several years.
Business records show Mr Williamson was registered as a self-employed agricultural sector intermediary, specialising in 'international trade'.
Tributes have poured in for Mr Williamson on social media.
One person posted: "What a guy he was. Another one of the Salford boys gone too soon."
Another person said: "Wow. In shock. RIP, Snaggle."


Age: 29
Gender: Male
Weight: 75kg
Compound: Methylenedioxymethcathinone (Methylone)
Amount: 187.2 mg
Method of measuring: Analytical Balance
Date/hour: 10pm Saturday Night
Setting: A friends house, quiet.
Mindset/mood: Generally positive, slightly anxious prior to ingesting
Duration: Strange Chronology, detailed below
A friend and I each swallowed a gelcap containing the methyl.one at approximately 10pm. Initial effects were felt within 15 minutes. Build to peak was slowish. With MDMA., once the initial effects are felt, I am usually deep into peak with 5 minutes. Methylone instead took about 20 minutes to build to a peak which then lasted about half an hour to forty five minutes. I was initially disappointed by the short duration of the peak. During the peak however I found much less jaw clenching, a more relaxed incarnation of the 'mellow energy' that MDMA provides. Very enjoyable.
However within 5 - 10 minutes after the end of the peak I felt this wave of energy come over me, and within seconds my muscles were tense, my jaw was clenching and I had the most ridiculous burst of energy reminding me of my days of using Methamphetamine when all of the sudden I would fearfully realize how tweaked I was after hours of trying to get high. A hint of paranoia surfaced as I checked my pulse, but it seemed to be rather normal. As I enjoy stimulants, I much enjoyed this state as well, which turned out to last about 2 hours. Conversation flowed at an incredible pace, never running out of things to talk about. Empathy was felt but not anywhere to the same degree as that of my initial MDMA experiences, however probably in line with my more recent experiences.
Suddenly it's as if the energy just ran out. Neither of us had anything more to say and ended up just sitting quietly muttering a comment once in awhile. And this is how is stayed for the come down. Thought process were in almost a stoned state, slowed down and not quite coherent. Still feeling the positive body effects. Similar in a way to the later tired stage of MDMA when it's on it's way down but I'm still too stimulated to sleep. Comfortable to just sit there for hours on end.
Physical symptoms:
I did experience a lot of dry mouth, and frequent desire to urinate. Several failed attempts, eventually was able to relax the muscles enough to empty my bladder. This occurred several times and while familiar with this from earlier MDMA experiences, I found this compound to be a much greater degree of difficulty. Nowadays I am unaffected by that particular side effect with MDMA.
Sleep did not come. About 4:00 am I decided to lay down and attempt to sleep. Still feeling much more stimulated that I would have at that stage with MDMA. Sleep did not come, although I was very comfortable and didn't feel the need to get up except to urinate about 6am. I then lied there until about 12:00pm, packed my stuff up and went home.
Throughout the following two days I encountered this frequent urination, the second day at a diminishing rate but still more frequent than normal.
All in all I would say it's fairly similar to MDMA in body high yet weaker in it's empathic / spiritual effects, with the qualitative differences as mentioned above. I found it harder on the body than clean MDMA but manageable.
All in all this is a good one, and if this had been my first empathogen / entactogen I may have come to a different conclusion, but my personal opinion is that this one will not provide the same level of insight, empathy and emotional clarity of MDMA.
Experience Reports are the writings and opinions of the individual authors who submit them.
Some of the activities described are dangerous and/or illegal and none are recommended by Erowid.