Brinmi radio is the latest intrenate gospel radio. It is designed to reach out to all men and women who desire to Know God and to grow in the Lord. We are the goodnews station.


Write a blog post in the text area below. Write your post in HTML. You must enter a Github issued OAUTH token value in the text box below in order to save a post.
Save post


ResuMe
Created by Brown students: Edward Li, Sahil Prasad, and Yuta Arai
Get started
Enter name
E-mail
Phone Number
Address Line 1
Address Line 2
Enter type
Business
Technical
Next
College
Major
Graduation Date (Month, Year)
Relevant Coursework
GPA
High School
Graduation Date (Month, Year)
GPA
Back
Next
Activity
Position
Experience
Duration (Month, Year - Month, Year)
Activity
Position
Experience
Duration (Month, Year - Month, Year)
Activity
Position
Experience
Duration (Month, Year - Month, Year)
Back
Next
Extracurriculars
Extracurriculars
Interest
Interest
Back
Next
Project
Description
Project
Description
Coding Languages
Interests
Back
Next
Submit
Licensed by Romania


{% include shareaholic_setup.html %}
{% include codementor.html %} {% include navigation.html %}
{{ site.title }}
{{ content }}
{% include google_analytics.html %}


Form groups are used to assemble form elements with labels, messages, and help containers.
These components can be used alone. For example, the form__item element with the label and control could be used without the full form group since not every form field will need error messages.
Inputs
Inputs are used to collect data from the user and should always be paired with a label. When a field is required, the label should include an asterisk (*).
A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, it provides additional features like “auto-complete”, “suggestions”, and “value help”.
Use the input field if:
The user needs to enter a short, single-line text or numbers, dates or times.
The user needs to select one or more items from a list of items, such a a multi-input.
The user needs to find one or more items out of a list of items by searching for more than one attribute, such as a combobox.
Do not use the input field if:
The user needs to enter long texts. In this case, use the textarea.
The user needs to carry out a search. In this case, use the search field.
Inputs help elements
Help elements give the user information about the input. Two types of help elements can be used.
The inline help element is displayed as a ? Icon. On hover or click, help content is displayed.
Help content can also be visible at all times to avoid mistakes. This type of help generally contains validation rules about the data allowed in the input field. An example is “Maximum 20 characters”. This is displayed below the input field.
Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
Input States
The state of the input field can reflect validity of the data entered, whether the input data is editable or disabled.
Normal: The field is editable but no validation has occurred
Valid: The data format entered has been validated and it’s correct, such as an email address.
Invalid: The data entered is not valid and must be corrected.
Warning: The data entered is formatted correctly but there are other issues are problematic but will not stop the user from moving forward.
Disabled: This indicates the field is not editable. A common use case is that this field is dependent on a previous entry or selection within the form.
Read Only: Used to display static information in the context of a form.
Along with Invalid and Warning, error messages should be displayed below the field so the user can correct the error and move forward.
Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
Textarea
Use the text area if you want users to enter multiple lines of unformatted text.
Do not use the text area if
You only want them to enter a single line of text, use the input control instead.
Users need to enter formatted text. Use the rich text editor instead.
Select
The Select component is similar to a dropdown but is more commonly used within a form. It can also be set to a disabled state.
Radio buttons
Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. Each option is represented by a radio button. Consequently, radio buttons only work in groups.
Use the radio button if:
You need to help users choose quickly between at least two clearly different choices.
Do not use the radio button if:
You need to offer the user the option of multiple selection. In this case, use checkboxes instead because radio buttons are for single-selection contexts only.
You need to present more than 8 options. Use a dropdown box or list view.
In special cases, there are only two mutually exclusive options. Combine them into a single checkbox or toggle switch. For example, use a checkbox for “I agree” (for example, to terms and conditions) instead of two radio buttons for “I agree” and “I don’t agree”.
The options are numbers with fixed steps. Use a slider control.
Checkbox
With checkboxes, all options are visible and the user can make one or more selections. This component can be set disabled and also displayed in a row.
Use the check box if:
Only one option can be selected or deselected, for example to accept terms of use. Use it only if the meaning is obvious.
A group or a list of options can be selected independently of each other.
All available options need to be displayed right away without any user interaction.
An intermediate selection state (Tri-State) is required when multiple sub-options are grouped under a parent option. The Tri-State will represent that multiple (but not all) sub-options are selected in the list.
Do not use the checkbox control if:
The user needs to choose multiple options from a large list. Use a multi-combo box instead.
The user can choose only one option from a list. Use a radio buttons, a select, or a list instead.
The user needs to perform instantaneous actions that do not need reviewing or confirming. Consider using the switch control instead.
There is not enough space available on the screen. Use the combo box control instead.


Learn CSS So That Your Site Doesn’t Look Like Garbage
Learn CSS So That Your Site Doesn’t Look Like Garbage
CSS Selectors
-
CSS Selector
: Applies styles to a specific DOM element(s), there are various types: -
Type Selectors
: Matches by node name. -
Class Selectors
: Matches by class name. -
ID Selectors
: Matches by ID name. -
Universal Selectors
: Selects all HTML elements on a page. -
Attribute Selectors
: Matches elements based on the prescence or value of a given attribute. (i.e. a[title] will match all a elements with a title attribute)
/* Type selector */
div {
background-color: #000000;
}/* Class selector */
.active {
color: #ffffff;
}/* ID selector */
#list-1 {
border: 1px solid gray;
}/* Universal selector */
* {
padding: 10px;
}/* Attribute selector */
a[title] {
font-size: 2em;
}
Class Selectors
-
Used to select all elements of a certain class denoted with
a
.[class name]
- You can assign multiple classes to a DOM element by separating them with a space.
Compound Class Selectors
- To get around accidentally selecting elements with multiple classes beyond what we want to grab we can chain dots.
- TO use a compound class selector just append the classes together when referencing them in the CSS.

- i.e. .box.yellow will select only the first element.
- KEEP IN MIND that if you do include a space it will make the selector into a descendant selector.
h1#heading,
h2.subheading {
font-style: italic;
}
-
When we want to target all
h1
tags with the id ofheading
.
CSS Combinators
- CSS Combinators are used to combine other selectors into more complex or targeted selectors — they are very powerful!
- Be careful not to use too many of them as they will make your CSS far too complex.
-
Descendant Selectors
- Separated by a space.
- Selects all descendants of a parent container.
-
Direct Child Selectors
-
Indicated with a
>
. - Different from descendants because it only affects the direct children of an element.
-
.menu > .is-active { background-color: #ffe0b2; }
-

Belka

Strelka

 Laika

- Belka would be the only element selected.
-
Adjacent Sibling Selectors
-
Uses the
+
symbol. - Used for elements that directly follow one another and who both have the same parent.
-
h1 + h2 { font-style: italic; }
Big header

This one is styled because it is directly adjacent to the H1

This one is NOT styled because there is no H1 right before it

Pseudo-Classes
-
Pseudo-Class
: Specifies a special state of the seleted element(s) and does not refer to any elements or attributes contained in the DOM. -
Format is a
Selector:Pseudo-Class Name
orA:B
-
a:hover { font-family: "Roboto Condensed", sans-serif; color: #4fc3f7; text-decoration: none; border-bottom: 2px solid #4fc3f7; }
- Some common pseudo-classes that are frequently used are:
-
active
: ‘push down’, when ele are activated. -
checked
: applies to things like radio buttons or checkbox inputs. -
disabled
: any disabled element. -
first-child
: first element in a group of children/siblings. -
focus
: elements that have current focus. -
hover
: elements that have cursor hovering over it. -
invalid
: any form elements in an invalid state from client-side form validation. -
last-child
: last element in a group of children/siblings. -
not(selector)
: elements that do not match the provided selector. -
required
: form elements that are required. -
valid
: form elements in a valid state. -
visited
: anchor tags of whih the user has already been to the URL that the href points to.
Pseudo-Selectors
- Used to create pseudo-elements as children of the elements to which the property applies.
-
::after
-
::before

This is the first paragraph

This is the second paragraph

This is the third paragraph

- Will add some blue smiley faces before the p tag elements.
CSS Rules
-
CSS Rule
: Collection of single or compound selectors, a curly brace, zero or more properties -
CSS Rule Specificity
: Sometimes CSS rules will contain multiple elements and may have overlapping properties rules for those same elements - there is an algorithm in CSS that calculates which rule takes precedence. -
The Four Number Calculation
: listed in increasing order of importance.
Who has the most IDs? If no one, continue.
Who has the most classes? If no one, continue.
Who has the most tags? If no one, continue.
Last Read in the browser wins.

-
Coming back to our example where all the CSS Rules have tied,
the last step 4 wins out so our element will have a
purple border
.
CSS: Type, Properties, and Imports
Typography
-
font-family
: change the font.
- Remember that not all computers have the same fonts on them.
- You can import web fonts via an api by using
-
@import url('https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&display=swap');
and pasting it st the top of your CSS file. - And then reference it in your font-family.
-
font-size
: Changes the size of your font. - Keep in mind the two kind of units CSS uses:
-
Absolute
:Pixels
, Points, Inches, Centimeters. -
Relative
: Em, Rem. - Em: Calulating the size relative to the previous div (bubbles down)
- Rem: Calulates relative to the parent element always.
-
font-style
: Used to set a font to italics. -
font-weight
: Used to make a font bold. -
text-align
: Used to align your text to the left, center, or right. -
text-decoration
: Use to put lines above, through, or under text. Lines can be solid, dashed, or wavy! -
text-transform
: Used to set text to all lowercase, uppercase, or capitalize all words.
Background-Images
- You can use the background-image property to set a background image for an element.
CSS: Colors, Borders, and Shadows
Colors
- You can set colors in CSS in three popular ways: by name, by hexadecimal RGB value, and by their decimal RGB value.
-
rgba() is used to make an rbg value more transparent, the
a
is used to specify thealpha channel
. - Color : Property used to change the color of text.
- Background-Color : Property to change the backgrounf color of an element.
Borders
- Borders take three values: The width of the border, the style (i.e. solid, dotted, dashed), color of the border.
Shadows
-
There are two kinds of shadows in CSS:
box shadows
andtext shadows
. - Box refers to HTML elements.
- Text refers to text.
- Shadows take values such as, the horizontal & vertical offsets of the shadow, the blur radius of the shadow, the spread radius, and of course the colors.
The Box Model
Box Model : A concept that basically boils down that every DOM element has a box around it.
Imagine a gift, inside is the gift, wrapped in foam all around
(padding), and the giftbox outside of it (border) and then a
wrapping paper on the giftbox (margin).- For items that are
using block
as
it’s display, the browser will follow these rules to layout the
element: - The box fills 100% of the available container space.
- Every new box takes on a new line/row. - Width and Height
properties are respected. - Padding, Margin, and Border will
push other elements away from the box. - Certain elements have
block
as their
default display, such as: divs, headers, and paragraphs.- For
items that are using
inline
as it’s
display, the browser will follow these rules to layout the
element: - Each box appears in a single line until it fills up
the space. - Width and height are
not
respected. - Padding, Margin, and Border are applied but they
do not
push other elements away from the box. - Certain elements have
inline
as their
default display, such as: span tags, anchors, and images.
Standard Box Model vs Border-Box- As per the standard Box Model, the width and height pertains to the content of the box and excludes any additional padding, borders, and margins.
This bothered many programmers so they created the border box to include the calculation of the entire box’s height and width.
Inline-Block- Inline-block uses the best features of both
block
and
inline
. -
Elements still get laid out left to right. - Layout takes into
account specified width and height.
Padding- Padding applies padding to every side of a box. It is
shorthand for four padding properties in this order:
padding-top
,
padding-right
,
padding-bottom
,
padding-left
(clockwise!)
Border-
Border applies a border on all sides of an element. It takes
three values in this order:
border-width
,
border-style
,
border-color
. -
All three properties can be broken down in the four sides
clockwise: top, right, bottom, left.
Margin-
Margin sets margins on every side of an element. It takes four
values in this order:
margin-top
,
margin-right
,
margin-bottom
,
margin-left
. -
You can use
margin: 0 auto
to center an element.
Positioning
-
The
position
property allows us to set the position of elements on a page and is an integral part of creatnig a Web page layout. -
It accepts five values:
static
,relative
,absolute
,fixed
,sticky
. -
Every property (minus
static
) is used with:top
,right
,bottom
, andleft
to position an element on a page.
Static Positioning
- The default position value of page elements.
- Most likely will not use static that much.
Relative Positioning
- Remains in it’s original position in the page flow.
- It is positioned RELATIVE to the it’s ORIGINAL PLACE on the page flow.
- Creates a stacking context : overlapping elements whose order can be set by the z-index property.
#pink-box {
background-color: #ff69b4;
bottom: 0;
left: -20px;
position: relative;
right: 0;
top: 0;
}
Absolute Positioning
- Absolute elements are removed from the normal page flow and other elements around it act like it’s not there. (how we can easily achieve some layering)
- Here are some examples to illustration absolute positioning:
.container {
background-color: #2b2d2f;
position: relative;
}#pink-box {
position: absolute;
top: 60px;
}
- Note that the container ele has a relative positioning — this is so that any changes made to the absolute positioned children will be positioned from it’s top-left corner.
- Note that because we removed the pink from the normal page flow, the container has now shifted the blue box to where the pink box should have been — which is why it is now layered beneath the pink.
.container {
background-color: #2b2d2f;
position: relative;
}#pink-box {
position: absolute;
top: 60px;
}#blue-box {
position: absolute;
}
- As you can see here, since we have also taken the blue box out of the normal page flow by declaring it as absoutely positioned it now overlaps over the pink box.
.container {
background-color: #2b2d2f;
position: relative;
}#pink-box {
background-color: #ff69b4;
bottom: 60px;
position: absolute;
}
- Example where the absolute element has it’s bottom property modified.
.container {
background-color: #2b2d2f;
}#pink-box {
background-color: #ff69b4;
bottom: 60px;
position: absolute;
}
- If we removed the container’s relative position. Our absolute unit would look for the nearest parent which would be the document itself.
Fixed Positioning
- Another positioning that removes it’s element from the page flow, and automatically positions it’s parent as the HTML doc itself.
- Fixed also uses top, right, bottom, and left.
- Useful for things like nav bars or other features we want to keep visible as the user scrolls.
Sticky Positioning
- Remains in it’s original position in the page flow, and it is positioned relative to it’s closest block-level ancestor and any scrolling ancestors.
- Behaves like a relatively positioned element until the point at which you would normally scroll past it’s viewport — then it sticks!
- It is positioned with top, right, bottom, and left.
- A good example are headers in a scrollable list.
Flexible Box Model
- Flexbox is a CSS module that provides a convenient way for us to display items inside a flexible container so that the layout is responsive.
- Float was used back in the day to display position of elements in a container.
- A very inconvenient aspect of float is the need to clear the float.
- To ‘clear’ a float we need to set up a ghost div to properly align — this is already sounds so inefficient.
Using Flexbox
- Flexbox automatically resizes a container element to fit the viewport size without needing to use breakpoints.
- Flexbox layout applies styles to the parent element, and it’s children.
.container {
display: flex; /*sets display to use flex*/
flex-wrap: wrap; /*bc flex tries to fit everything into one line, use wrap to have the elements wrap to the next line*/
flex-direction: row; /*lets us create either rows or columns*/
}
-
flex-flow
can be used to combine wrap and direction. -
justify-content
used to define the alignment of flex items along the main axis. -
align-items
used to define the alignment on the Y-axis. -
align-content
redistributes extra space on the cross axis. -
By default, flex items will appear in the order they are added
to the DOM, but we can use the
order
property to change that. - Some other properties we can use on flex items are:
-
flex-grow
: dictates amount of avail. space the item should take up. -
flex-shrink
: defines the ability for a flex item to shrink. -
flex-basis
: Default size of an element before the remaining space is distributed. -
flex
: shorthand for grow, shrink and basis. -
align-self
: Overrides default alignment in the container.
Grid Layout
- CSS Grid is a 2d layout system that let’s use create a grid with columns and rows purely using Vanilla CSS. (flex is one dimensional)
Bootstrap vs CSS Grid
- Bootstrap was a front-end library commonly used to create grid layouts but now CSS grid provides greater flexibility and control.
- Grid applies style to a parent container and it’s child elements.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-template-areas:
"header header header"
"main . sidebar"
"footer footer footer"; grid-column-gap: 20px;
grid-row-gap: 30px;
justify-items: stretch;
align-items: stretch;
justify-content: stretch;
align-content: stretch;
}.item-1 {
grid-area: header;
}
.item-2 {
grid-area: main;
}
.item-3 {
grid-area: sidebar;
}
.item-4 {
grid-area: footer;
}
-
Columns and Rows can be defined with: pixels, percentages,
auto, named grid lines, using
repeat
, fractions. -
Grid Template Areas
gives us a handy way to map out and visualize areas of the grid layout. - Combine areas with templates to define how much space an area should take up.
-
Grid Gaps
can be used to create ‘gutters’ between grid item.s -
The way we have defined our grid with
grid-templates
andareas
are considered explicit. -
We can also
implicitly
define grids.
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-template-rows: 50px 50px 50px;
grid-auto-columns: 100px;
grid-auto-rows: 50px;
}
- Any grid items that aren’t explicity placed are automatically placed or re-flowed
Spanning Columns & Rows
- We can use the following properties to take up a specified num of cols and rows.
-
grid-column-start
-
grid-column-end
-
grid-row-start
-
grid-row-end
- All four properties can take any of the following values: the line number, span #, span name, auto.
.item-1 {
grid-row-start: row2-start; /* Item starts at row line named "row2-start" */
grid-row-end: 5; /* Item ends at row line 5 */
grid-column-start: 1; /* Item starts at column line 1 */
grid-column-end: three; /* Item ends at column line named "three" */
}.item-2 {
grid-row-start: 1; /* Item starts at row line 1 */
grid-row-end: span 2; /* Item spans two rows and ends at row line 3 */
grid-column-start: 3; /* Item starts at column line 3 */
grid-column-end: span col5-start; /* Item spans and ends at line named "col5-start" */
}
Grid Areas
- We use the grid areas in conjunction with grid-container property to define sections of the layout.
- We can then assign named sections to individual element’s css rules.
Justify & Align Self
- Justify items and Align Items can be used to align all grid items at once.
- Justify Self is used to align self on the row.
- It can take four values: start, end, center, stretch.
- Align Self is used to align self on the column.
- It can take four values: start, end, center, stretch.
CSS Hover Effect and Handling
Overflow
css .btn { background-color: #00bfff; color: #ffffff;
border-radius: 10px; padding: 1.5rem; }
.btn--active:hover { cursor: pointer; transform:
translateY(-0.25rem);
/* Moves our button up/down on the Y axis */ }
The Pseudo Class Selector
hover
activates when the cursor goes over the selected element.
Content Overflow- You can apply an
overflow
content property to an element if it’s inner contents are
spilling over.
There are three members in the overflow family: — overflow-x
: Apply horizontally. -
overflow-y
: Apply vertically. -
overflow
: Apply both directions.
Transitions
- Transitions provide a way to control animation speed when changing CSS properties.
- Implicit Transitions : Animations that involve transitioning between two states.
Defining Transitions
-
transition-property
: specifies the name of the CSS property to apply the transition. -
transition-duration
: during of the transition. -
transition-delay
: time before the transition should start.
Examples :
#delay {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}#delay:hover {
font-size: 36px;
}
- After a delay of two seconds, a four second transition begins where the font size goes from 36px to 14px.
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000ff;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}.box:hover {
background-color: #ffcccc;
width: 200px;
height: 200px;
transform: rotate(180deg);
}
- When the mouse hovers over a box, it spins due to the rotate transform. Width and height change and also the bg color.
BEM Guidelines
- BEM was created as a guideline to solve the issue of loose standards around CSS naming conventions.
-
BEM
stands for
block
,element
,modifier
. - Block
- A standalone entity that is meaningful on it’s own.
- Can be nested and interact with one another.
- Holistic entities without DOM rep can be blocks.
- May consist latin letters, digits, and dashes.
- Any DOM node can be a block if it accepts a class name.
- Element
- Part of a block and has no standalone meaning.
- Any element that is semantically tied to a block.
- May consist latin letters, digits, and dashes.
- Formed by using two underscores after it’s block name.
- Any DOM node within a block can be an element.
- Element classes should be used independently.
- Modifier
- A flag on blocks or elements. Use them to change appearance, behavior or state.
- Extra class name to add onto blocks or elements.
- Add mods only to the elements they modify.
- Modifier names may consist of Latin letters, digits, dashes and underscores.
- Written with two dashes.
BEM Example
<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input class="form__submit form__submit--disabled" type="submit" />
</form>/* block selector */
.form {
}/* block modifier selector */
.form--theme-xmas {
}/* block modifier selector */
.form--simple {
}/* element selector */
.form__input {
}/* element selector */
.form__submit {
}/* element modifier selector */
.form__submit--disabled {
}
If you found this guide helpful feel free to checkout my github/gists where I host similar content:
Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com
Or Checkout my personal Resource Site:


I felt compelled to put this on github and publish to npm. I haven't tested every other big integer library out there, but the few that I have tested in comparison to this one have not even come close in performance. I am aware of the bi
module on npm, however it has been modified and I wanted to publish the original without modifications. This is jsbn and jsbn2 from Tom Wu's original website above, with the modular pattern applied to prevent global leaks and to allow for use with node.js on the server side.
var BigInteger = require('jsbn');
var a = new BigInteger('91823918239182398123');
alert(a.bitLength()); // 67
returns the base-10 number as a string
returns a new BigInteger equal to the negation of bi
returns new BI of absolute value


Today CSS preprocessors is a tech standard for the Web development. One of the main advantages of the preprocessors is an ability to use variables. It helps to avoid copy-pasting of the code, simplifies development and refactoring.
We use them to store colors, font and layout details etc.- mostly everything we use in CSS.
But preprocessor’s variables have own problems:
As a silver bullet to solve these and other problems, the community invented CSS Custom Properties. Essentially, they look and work as CSS variables and the way they work is reflected in their name.
The Custom Properties are opening the new horizons for the Web development.
The usual problem when you start the new preprocessor/framework- is to learn the new syntax to solve your issues.
The same situation we have in preprocessors, each of them requires an own way to declare variables.
Usually, they start with a different symbol, e.g. $
(Sass) or @
(Less).
CSS custom properties went the same way and started using --
at the beginning to represent the declaration.
But the good point here is that you can learn this syntax once and you can reuse it across the browsers!
You may want to ask: “Why not to reuse one of the previous syntaxes?”
There was a reason- in short, it’s to provide a way to use Custom Properties in any preprocessors. This way you can provide/use Custom Properties and preprocessor will not compile them, so they will directly go to the output CSS. On the other hand, you can reuse preprocessor variables in the native ones, but I will describe that later.
Regarding the name:
As the idea and purpose are very similar, sometimes Custom Properties are called the “CSS variables” though the correct name is “CSS custom properties” and reading further you will understand why such a name describes them the best.
So, to declare a variable just instead of the usual CSS properties like color
/padding
etc. provide a custom named property which name starts from --
:
.box{
--box-color: #4d4e53;
--box-padding: 0 10px;
}
A value of a property can be any valid CSS value, from colors to strings, layout values and even expressions.
Here is the example of valid Custom Properties:
:root{
--main-color: #4d4e53;
--main-bg: rgb(255, 255, 255);
--logo-border-color: rebeccapurple;
--header-height: 68px;
--content-padding: 10px 20px;
--base-line-height: 1.428571429;
--transition-duration: .35s;
--external-link: "external link";
--margin-top: calc(2vh + 20px);
/* valid CSS Custom Prop, can be reused later e.g. in JS */
--foo: if(x > 5) this.width = 10;
}
If you are not sure what the :root
matches, in case of HTML it’s the same as html
, but with the higher specificity.
As other CSS properties, Custom ones cascade in the same way and are dynamic. It means, they can be changed at any moment and the change is processed accordingly by the browser.
To use the variable, you have to use the var()
CSS function and provide a name of the property inside:
.box{
--box-color:#4d4e53;
--box-padding: 0 10px;
padding: var(--box-padding);
}
.box div{
color: var(--box-color);
}
The var()
function provides a handy way to provide a default value to be used.
For instance, you are not sure if a Custom Property is defined and want to give a value to be used in such a case.
It can be done easily, passing the second param to the function:
.box{
--box-color:#4d4e53;
--box-padding: 0 10px;
/*10px is used as --box-margin is not defined*/
margin: var(--box-margin, 10px);
}
As you may expect, you can reuse other variables to declare new ones:
.box{
/* "--main-padding" variable is used if "--box-padding" is not defined */
padding: var(--box-padding, var(--main-padding));
--box-text: 'This is my box';
/* equal to: --box-highlight-text:'This is my box with highlight'; */
--box-highlight-text: var(--box-text)' with highlight';
}
As we got used in preprocessors and other languages, we want to use basic operators when working with variables.
For such purposes CSS provides a calc()
function, which will make the browser to recalculate the expressions
after any changes to the Custom Properties values:
:root{
--indent-size: 10px;
--indent-xl: calc(2*var(--indent-size));
--indent-l: calc(var(--indent-size) + 2px);
--indent-s: calc(var(--indent-size) - 2px);
--indent-xs: calc(var(--indent-size)/2);
}
A problem waits for you when you try to use unit-less values.
You will see that calc()
is your friend there again as without that it doesn’t work:
:root{
--gap: 10;
}
.box{
padding: var(--spacer)px 0; /* DOESN'T work */
padding: calc(var(--spacer)*1px) 0; /* WORKS */
}
Before we move to CSS Custom properties scopes, let’s recollect the JS/preprocessors scopes, so we can easier understand the differences.
We know the idea of the scope applied e.g. for JavaScript variables (var
)- the scope is limited to the functions.
A similar situation is for let
\ const
, but they are block-scope local variables.
A closure
in JavaScript is a function that has access to the outer (enclosing) function’s variables—scope chain.
The closure has three scope chains and it has access to:
The similar story is around preprocessors. Let’s take a look into Sass example, as it’s one of the most popular preprocessors for today.
In Sass, there are two types of variables: local
and global
variables.
A global
variable you can declare providing it outside of any selector or construction (e.g. a mixin
), otherwise you get a local
one.
Any nested blocks of code can access the enclosing variables (similar to the JS case).
Which means, in Sass, the variable scopes are fully reliable on the code structure.
On the other hand, CSS Custom Properties are inherited by default and as other CSS properties, they cascade.
You also cannot provide a “global” variable providing a Custom Property outside of the selectors- it’s not valid CSS.
The global scope for CSS Custom Properties is actually the :root
scope, after what the property is available “globally”.
Let’s use our syntax knowledge and reflect the Sass example in HTML/CSS and create a demo using the native CSS Custom Properties:
global

enclosing

closure

and CSS:
:root {
--globalVar: 10px;
}
.enclosing {
--enclosingVar: 20px;
}
.enclosing .closure {
--closureVar: 30px;
font-size: calc(var(--closureVar) + var(--enclosingVar) + var(--globalVar));
/* 60px for now */
}
So far we haven’t faced differences with the Sass variables, but let’s reassign the variable after it’s usage:
It has no effect in the Sass case:
.closure {
$closureVar: 30px; // local variable
font-size: $closureVar +$enclosingVar+ $globalVar;
// 60px, $closureVar: 30px is used
$closureVar: 50px; // local variable
}
But in CSS, the calculated value is changed, as the font-size
value is recalculated from the changed --closureVar
value:
.enclosing .closure {
--closureVar: 30px;
font-size: calc(var(--closureVar) + var(--enclosingVar) + var(--globalVar));
/* 80px for now, --closureVar: 50px is used */
--closureVar: 50px;
}
That’s the first huge difference- if you reassign a Custom Property value, the browser recalculates all the variables/calc() expression etc. where it’s applied
Let’s provide an example where we want to use a default font-size
for the block,
except the case when the highlighted
class is present.
Here it the HTML:

default

default highlighted

Let’s do it using CSS Custom Properties:
.highlighted {
--highlighted-size: 30px;
}
.default {
--default-size: 10px;
/* use the "default-size" except the "highlighted-size" is provided */
font-size: var(--highlighted-size, var(--default-size));
}
As the second HTML element with the default
class has the highlighted
class,
properties from the highlighted
class starts being applied to the element.
In out case, it means --highlighted-size: 30px;
is applied,
which in turn makes font-size
property being assign using the --highlighted-size
.
Everything is straightforward and works:
And now we’ll try to achieve the same using Sass:
.highlighted {
$highlighted-size: 30px;
}
.default {
$default-size: 10px;
/* use the "default-size" except the "highlighted-size" is provided */
@if variable-exists(highlighted-size) {
font-size: $highlighted-size;
}
@else {
font-size: $default-size;
}
}
And the result shows that the default size is applied to both:
It happens because all the Sass calculations and processing happen during the compilation time, and, of course, it doesn’t now anything regarding the DOM structure and fully relies on the code structure.
As you see, Custom Properties took the best practice in terms of variables scoping but added the usual CSS Properties cascading, which is aware of the DOM structure and follows the same rules as other CSS properties.
The second takeaways is: CSS Custom properties are aware on the DOM structure and are dynamic
all
propertyCSS custom properties subject to the same rules as the usual CSS Custom Properties (CCP). It means you can assign any of the common CSS keywords to them.
inherit
CSS keyword applies the value of the element’s parent.initial
applies the initial value as defined in the CSS specifications (empty value, nothing in some cases for CCP)unset
applies the inherited value if the property is normally inherited (Custom Properties case), or the initial value if the property is normally not inheritedrevert
resetting the property to the default value established by the user-agent stylesheet (empty value for CSS Custom Properties)Here is an example:
.common-values{
--border: inherit;
--bgcolor: initial;
--padding: unset;
--animation: revert;
}
And now let’s consider an another case:
Let’s assume you want to build a component and be sure no other styles/Custom Properties are applied to it unintentionally
(for styles, in such cases, usually CSS Modules-related solutions are used).
But now there is another way, to use the all
CSS property.
It’s a shorthand which resets all the CSS properties.
Together with CSS keywords, you can do the following:
.my-wonderful-clean-component{
all: initial;
}
So you will reset all the styles for your component.
Unfortunately all
keyword doesn’t reset Custom Properties,
but currently, there is still a discussion to add the --
which will reset all the CSS Custom Properties.
So after a while, the full reset may be done using:
.my-wonderful-clean-component{
--: initial; /* reset all Custom CSS Properties */
all: initial; /* reset all other CSS styles */
}
There are many usages for the Custom Properties, I will provide the most interesting of them.
As the name of CSS variables is “Custom Properties” why not to use them to emulate non-existing properties?
There are many of them from translateX/Y/Z
to background-repeat-x/y
(still not cross-browser) and box-shadow-color
.
Let’s take the last and make it work.
In the example, we will change the box-shadow color on hover.
We just want to follow the DRY rule and instead of repeating all the box-shadow
value into the :hover
section, just change its color.
Custom Properties to the rescue:
.test {
--box-shadow-color: yellow;
box-shadow: 0 0 30px var(--box-shadow-color);
}
.test:hover {
--box-shadow-color: orange;
/* Instead of: box-shadow: 0 0 30px orange; */
}
One of the most common cases for Custom Properties is the color themes for the applications. They were created to solve this kind of problems, so let’s provide a simple color theme for a component (the same steps can be used for an application).
Here is our button-component code:
.btn {
background-image: linear-gradient(to bottom, #3498db, #2980b9);
text-shadow: 1px 1px 3px #777;
box-shadow: 0px 1px 3px #777;
border-radius: 28px;
color: #ffffff;
padding: 10px 20px 10px 20px;
}
Let’s assume we want to create an inverted color theme.
The first step will be to extend all the color variables to the CSS Custom Properties and rewrite our component, so the result is the same:
.btn {
--shadow-color: #777;
--gradient-from-color: #3498db;
--gradient-to-color: #2980b9;
--color: #ffffff;
background-image: linear-gradient(
to bottom,
var(--gradient-from-color),
var(--gradient-to-color)
);
text-shadow: 1px 1px 3px var(--shadow-color);
box-shadow: 0px 1px 3px var(--shadow-color);
border-radius: 28px;
color: var(--color);
padding: 10px 20px 10px 20px;
}
Everything we need now- to override the color variables value to the inverted ones and apply them when it’s needed.
We can e.g. add the global inverted
HTML class (e.g. to the body
element) and change the colors when it’s applied:
body.inverted .btn{
--shadow-color: #888888;
--gradient-from-color: #CB6724;
--gradient-to-color: #D67F46;
--color: #000000;
}
And here is the demo where you can click a button to add/remove a global class and see the demo in action:
This behavior cannot be achieved without the code duplication overhead using CSS preprocessors. With preprocessors, you always need to override the actual values and rules which always results in the additional CSS output.
In the case of CSS Custom Properties, the solution is as clean as poosible and avoids copy-paste, as only the values of the variables are redefined.
Previously, to send some data from CSS to JS, we often had to use tricks to writing CSS values via plain JSON in the CSS output and then read it from JS.
Now you can easily interact with the CSS variables from JavaScript, read and write to them
using well known .getPropertyValue()
and .setProperty()
methods,
which are used for the usual CSS properties:
/**
* Gives a CSS custom property value applied at the element
* element {Element}
* varName {String} without '--'
*
* E.g.:
* readCssVar(document.querySelector('.box'), 'color');
*/
function readCssVar(element, varName){
const elementStyles = getComputedStyle(element);
return elementStyles.getPropertyValue(`--${varName}`).trim();
}
/**
* Writes a CSS custom property value at the element
* element {Element}
* varName {String} without '--'
*
* E.g.:
* readCssVar(document.querySelector('.box'), 'color', 'white');
*/
function writeCssVar(element, varName, value){
return element.style.setProperty(`--${varName}`, value);
}
Let’s assume you have a list of the used media query values:
.breakpoints-data {
--phone: 480px;
--tablet: 800px;
}
As only you want to reuse them in JS e.g. in Window.matchMedia(), you can easily get them from CSS:
const breakpointsData = document.querySelector('.breakpoints-data');
// GET
const phoneBreakpoint = getComputedStyle(breakpointsData)
.getPropertyValue('--phone');
To show how to assign Custom Properties from JS, I created an interactive 3D CSS cube demo which responds to the user actions.
It’s not very hard, for that is enough to provide a simple background, and place 5 cube faces using
the proper values for the transform
property: translateZ()
, translateY()
, rotateX()
and rotateY()
.
To provide a perspective and proper view, I added the following to the page wrapper:
#world{
--translateZ:0;
--rotateX:65;
--rotateY:0;
transform-style:preserve-3d;
transform:
translateZ(calc(var(--translateZ) * 1px))
rotateX(calc(var(--rotateX) * 1deg))
rotateY(calc(var(--rotateY) * 1deg));
}
The only missed part was to add the interactivity, so the demo would change the X/Y view angles (--rotateX
, --rotateY
) on mousemove
and zoom in/out the view on mouse scroll (--translateZ
).
Here is the JS parts which do the trick:
// EVENTS
onMouseMove(e) {
this.worldXAngle = (.5 - (e.clientY / window.innerHeight)) * 180;
this.worldYAngle = -(.5 - (e.clientX / window.innerWidth)) * 180;
this.updateView();
};
onMouseWheel(e) {
...
this.worldZ += delta * 5;
this.updateView();
};
// JS-> CSS
updateView() {
this.worldEl.style.setProperty('--translateZ', this.worldZ);
this.worldEl.style.setProperty('--rotateX', this.worldXAngle);
this.worldEl.style.setProperty('--rotateY', this.worldYAngle);
};
After that on user mouse activities the demo changes it’s view. You can check it moving the mouse and using mouse wheel to zoom in/out:
Essentially we just change the CSS Custom Properties values, everything else (rotating, zoom in/out) is done by CSS.
Just a useful tip: one of the easiest ways to debug the CSS custom property values is just to show their content in CSS generated content (works in simple cases, e.g. for strings), so the browser will automatically show the current (up to date) applied value:
body:after {
content: '--screen-category : 'var(--screen-category);
}
You can check it in the plain CSS demo (no HTML/JS) (resize a browser window to see the browser reflects the changed CSS Custom Property value automatically)
CSS custom properties for today are supported in all the major browsers (except EDGE, where they are in development and should be available in the next version):
It means, that after a short time they are supported in all browsers and you can start using them natively.
Meanwhile, you can learn the syntax, usage examples and consider possible ways of switching/using CSS and preprocessor variables in parallel.
And, of course, we need to have the ability to detect the support in both CSS and JS to provide fallbacks or vice versa, improvements.
It’s quite easy. For CSS you can use a supports condition with a dummy CSS Custom Property feature query:
@supports ( (--a: 0)) {
/* supported */
}
@supports ( not (--a: 0)) {
/* not supported */
}
In JavaScript you can use the same dummy Custom Property with CSS.supports()
static method:
const isSupported = window.CSS &&
window.CSS.supports && window.CSS.supports('--a', 0);
if (isSupported) {
/* supported */
} else {
/* not supported */
}
As we saw, CSS Custom Properties are still not available in every browser. Knowing that and having the ability to check if they are supported, you can progressively enhance your application by checking if they are available.
For instance, you can generate 2 main CSS files: one with CSS Custom Properties, and a second without them, where the Properties are inlined (we will discuss the ways to do it further).
Load the second one by default. After just do a check in JS and switch to the enhanced version if it’s supported:

<link href="without-css-custom-properties.css"
rel="stylesheet" type="text/css" media="all" />
// js
if(isSupported){
removeCss('without-css-custom-properties.css');
loadCss('css-custom-properties.css');
// + conditionally apply some application enhancements
// using the Custom Properties
}
This is just an example, as you’ll see further, there are better options.
Accordingly to the recent survey Sass continuing being a main preprocessor for the community.
So let’s take it and consider options how we can start using CSS custom properties or being prepared for that using Sass.
There are a few options:
One pro for this- yes, it will work and is something we can do right now (don’t forget, we have switched to SCSS):
$color: red;
:root {
--color: red;
}
.box {
@supports ( (--a: 0)) {
color: var(--color);
}
@supports ( not (--a: 0)) {
color: $color;
}
}
This way have many cons- overcomplicated code, copy-paste and is quite hard to maintain.
PostCSS plugins ecosystem provides dozens of plugins today.
A couple of them process Custom Properties (inline values) in the result CSS output and make it work,
assuming you provide only global variables (declare/change CSS Custom Properties only inside the :root
selector(s)),
so their values can be easily inlined.
Here is an example- postcss-custom-properties.
The plugin gives more pros: it makes the syntax work and is compatible with all the PostCSS infrastructure, doesn’t require too much setup/configuration.
From cons:
css-vars
mixinI started using CSS Custom Properties in most of my projects and tried many strategies:
As result having that experience I started looking for a solution which would satisfy my needs:
As result, I created the css-vars
Sass
mixin which you can find on Github: https://github.com/malyw/css-vars
with which you can start using CSS Custom Properties -ish syntax.
To declare variable(s), use the mixin as the following:
$white-color: #fff;
$base-font-size: 10px;
@include css-vars((
--main-color: #000,
--main-bg: $white-color,
--main-font-size: 1.5*$base-font-size,
--padding-top: calc(2vh + 20px)
));
To use these variables, use the var()
function:
body {
color: var(--main-color);
background: var(--main-bg, #f00);
font-size: var(--main-font-size);
padding: var(--padding-top) 0 10px;
}
This gives you a way to control all the CSS output from one place (from Sass) and start getting used to the syntax + you can reuse Sass variables/logic with the mixin.
When all the browsers you support work with CSS variables, everything you have to do is to add:
$css-vars-use-native: true;
And instead of aligning the variable properties in the result CSS,
the mixin will start registering Custom Properties and the var()
usages will
go to the result CSS without any transformations.
Which means you’ll fully switch to CSS Custom Properties usage and have all the advantages we discussed.
If you want to turn on the useful debug info, add the following:
$css-vars-debug-log: true;
so you’ll have:
Now you know the CSS Custom Properties syntax, advantages, good usage examples and how to interact with them from JavaScript.
You have learned how to detect if they are supported, how they are different from the CSS Preprocessor variables and options to start using the native CSS variables till they are supported cross-browser.
So this is the perfect time to start using CSS Custom Properties and preparing for their native support in the browsers.
Serg is a Lead Front-End Developer / Engineering Manager based in Dublin.
He loves the Web and shares his knowledge in his blog.
Being a big fan of moving CSS and JavaScript forward, Serg participates specifications debates and discusses new features with the community.
He likes to stay on top of the latest Web technologies and browser additions, participates their development, standardization, and enhancement.
Email address (only to generate your user account — won't be displayed in public): shospodarets@gmail.com


DOCTOR DOLITTLE (20th Century Fox) Starring: Eddie Murphy, Oliver Platt, voices of Norm Macdonald, Albert Brooks, Chris Rock, Julie Kavner, Garry Shandling. Screenplay: Nat Maudlin and Larry Levin, based on the stories by Hugh Lofting. Producers: John Davis, Joseph M. Singer and David T. Friendly. Director: Betty Thomas. MPAA Rating: PG (profanity, adult humor) Running Time: 85 minutes. Reviewed by Scott Renshaw.
I'm not sure exactly when it happened, but a sad development has seized juvenile comedy as we know it.  In effect, it's a con playing on the low-level guilt of viewers who want to convince themselves that the bodily function humor is just a necessary evil on the way to an Important Social Message. And I'll bet they read Playboy for the articles, too.
Some viewers obviously manage to get past this dichotomy. Personally, I don't want any metaphorical chocolate in my peanut butter. DOCTOR DOLITTLE takes a salty little dab of peanut butter and smothers it in chocolate syrup. Eddie Murphy stars as physician John Dolittle, whose childhood gift for communicating with animals was throttled out of him because it made him different. Now a straight-laced family man with a thriving practice, Dolittle has no memory of his zooglotism until a fender bender revives his latent ability. Suddenly Dr. Dolittle is hearing animal voices all around him, the news of which gets around to sick animals everywhere keen to take advantage of being able to tell him exactly what ails them. This development troubles non-believers like his medical partner Dr. Mark Weller (Oliver Platt) and his wife Lisa (Kristen Wilson), both of whom suspect John is going a bit animal crackers.
DOCTOR DOLITTLE has plenty of predictable charms, most of them connected to the digitally-doctored menagerie surrounding the good doctor. The A-list voice talent -- Norm Macdonald as the sarcastic family mutt, Albert Brooks as a depressed circus tiger, Julie Kavner and Garry Shandling as a pair of bickering pigeons -- offers plenty of appeal, though prominently-featured Chris Rock as a guinea pig can only crank up the volume on his rather boring lines. The other critters spend a lot of time doing cute tricks and firing off wise cracks, particularly MacDonald and Gilbert Gottfried in a brief bit as a dog obsessed with chasing a ball. It's hardly classic comedy, but it's effective enough for a few belly laughs, even with the obligatury use of various animal calls of nature by screenwriters Nat Maudlin and Larry Levin.
Low-brow comedy isn't the problem; lacking the nerve to stick with low-brow comedy is. DOCTOR DOLITTLE stretches and strains for sub-plots on which to hang sentiment, from the self-absorbed attempts of Dr. Weller to sell the practice to an HMO, to the troubles of Dolittles introverted youngest daughter (Kyla Pratt), to Dolittle's noble efforts to save the tiger from a blood clot (and you haven't really brushed aside a tear until you've seen the touching hand-in-paw scene). "Be who you are and love who you are," Dolittle tells his daughter with paternal gravity, and at precisely that moment you may want to reach out, smack him in the head and tell him to get back to the goofy animal tricks.
Actually, it would have been nice if Murphy had gotten back to any tricks at all. Murphy can be a brilliant comic performer, but he works his finest magic as an instigator. Aside from a few token moments of frantic behavior, he is asked merely to react in DOCTOR DOLITTLE, to play straight man to the talking animals, which is a huge waste of his talents. I suppose it made sense to try another wacky re-make after the success of THE NUTTY PROFESSOR, and I suppose it made sense to hope that director Betty Thomas (THE BRADY BUNCH MOVIE, PRIVATE PARTS) could work similar slight-of-hand with another premise that didn't sound very promising. It may have seemed like a good idea at the time, but Doctor Dolittle only works until you realize it would have worked much better with Murphy -- and the whole film -- let off the leash of excess sincerity. When the guffaws give way to solemnly-intoned platitudes, it spoils all the fun of a good pigeon-crap-on-the-head gag. Of course, I only watch for the Important Social Message.
On the Renshaw scale of 0 to 10 crass menageries: 5.
Visit Scott Renshaw's MoviePage http://www.inconnect.com/~renshaw/ *** Subscribe to receive new reviews directly by email! See the MoviePage for details, or reply to this message with subject line "Subscribe".
The review above was posted to the
rec.arts.movies.reviews newsgroup (de.rec.film.kritiken for German reviews).
The Internet Movie Database accepts no responsibility for the contents of the
review and has no editorial control. Unless stated otherwise, the copyright
belongs to the author.
Please direct comments/criticisms of the review to relevant newsgroups.
Broken URLs inthe reviews are the responsibility of the author.
The formatting of the review is likely to differ from the original due
to ASCII to HTML conversion.
Related links: index of all rec.arts.movies.reviews reviews


Application Specifications
JS Framework: AngularJS 1.6.1
Front End Test Suite: Jasmine, Karma, Protractor
Build Tool: Gulp
Database: Firebase
Code Coverage: CodeCov
API Language: Java
Back End Test Suite: Cucumber
Hosting: Heroku
Continuous Integration: Travis
Continuous Deployment: GitHub Hook


Hello, I'm Alan. Full Stack Web Developer with background in graphic design and leveraging a degree in Architecture from The University of Georgia to create solutions that are both user friendly and elegant. Eager to use my skills in CSS, Javascript, and responsive web design earned through a certificate in Full Stack Development from the Georgia Institute of Technology. Known for being organized, collaberative, and a problem solver. Self taught in ladder logic and msSQL at the Georgia Aquarium and maintained and reprogramed equipment controls and PLC's. Eager to use my skills and unique perspective to create web elements that are functional and visually pleasing.


|
||||||||||
| PREV CLASS NEXT CLASS | FRAMES NO FRAMES | |||||||||
| SUMMARY: NESTED | FIELD | CONSTR | METHOD | DETAIL: FIELD | CONSTR | METHOD |
java.lang.Object Instruction org.apache.xalan.xsltc.compiler.util.MarkerInstruction
abstract class MarkerInstruction
A special abstract dummy subclass of
org.apache.bcel.generic.Instruction
used to mark locations of
interest in an org.apache.bcel.generic.InstructionList
. It and
its subclasses are only used as placeholders, and do not contribute to the
actual byte code instruction stream.
| Constructor Summary | |
|---|---|
MarkerInstruction()
Zero-argument constructor. |
| Method Summary | |
|---|---|
void |
accept(Visitor v)
org.apache.bcel.generic.Visitor s will know nothing about this
kind of org.apche.bcel.generic.Instruction , so this method does
nothing. |
int |
consumeStack(ConstantPoolGen cpg)
The number of JVM stack entries consumed by the instruction. |
Instruction |
copy()
Produce a copy of the instruction. |
void |
dump(java.io.DataOutputStream out)
Dump instruction as byte code to stream out. |
int |
produceStack(ConstantPoolGen cpg)
The number of JVM stack entries produced by the instruction. |
| Methods inherited from class java.lang.Object |
|---|
clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait |
| Constructor Detail |
|---|
public MarkerInstruction()
| Method Detail |
|---|
public void accept(Visitor v)
org.apache.bcel.generic.Visitor
s will know nothing about this
kind of org.apche.bcel.generic.Instruction
, so this method does
nothing.
public final int consumeStack(ConstantPoolGen cpg)
cpg
- The org.apache.bcel.generic.ConstantPoolGen
for the
current org.apache.bcel.generic.ClassGen
0
alwayspublic final int produceStack(ConstantPoolGen cpg)
cpg
- The org.apache.bcel.generic.ConstantPoolGen
for the
current org.apache.bcel.generic.ClassGen
0
alwayspublic Instruction copy()
MarkerInstruction
has no parameters, so the base implementation
of copy()
returns the instruction itself.
public final void dump(java.io.DataOutputStream out) throws java.io.IOException
MarkerInstruction
has no effect on the generated byte code so it is never emitted to the
output stream.
out
- Output stream
java.io.IOException
|
||||||||||
| PREV CLASS NEXT CLASS | FRAMES NO FRAMES | |||||||||
| SUMMARY: NESTED | FIELD | CONSTR | METHOD | DETAIL: FIELD | CONSTR | METHOD |


The TinyOS scheduler. It provides two interfaces: Scheduler, for TinyOS to initialize and run tasks, and TaskBasic, the simplext class of TinyOS tasks (reserved always at-most-once posting, FIFO, parameter-free). For details and information on how to replace the scheduler, refer to TEP 106.


Where I post about whatever stuff is of interest to me
Check out this cute puppy!
Bizzard, the pup, by Frank Harvey. From the State Library of NSW.
Also, lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur excepturi adipisci ab maiores, quae veniam atque tempora quaerat amet recusandae? Nostrum consectetur qui ipsa adipisci repellat at saepe id dolorum?
Lorem ipsum dolor sit!
This blog is written using HTML and CSS. I feel like I'm getting the hang of it.
HTML tags are just written like:
But there are a lot of tags you need to know!
CSS is a lot more complicated, but there are two parts:
But there are even more of those than there are HTML tags! But don't worry, I'm sure I'll learn enough of them soon!
Posted last week
You're looking at this? Really? Lorem ipsum dolor sit amet, consectetur adipisicing. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
The iSchool's address is:
UW Information School, Box 352840 - Mary Gates Hall, Ste. 370, Seattle WA 98195-2840
Veniam dolorem cupiditate tenetur placeat nulla repellat dicta maxime architecto blanditiis non facere nesciunt quae animi quam quidem ullam, suscipit nisi ipsam voluptatem accusamus necessitatibus itaque autem in, sunt similique.
In mollitia cumque sapiente ducimus quo labore magni qui quas aperiam, voluptatibus nesciunt dicta enim dignissimos doloribus tempora iusto commodi alias recusandae tempore beatae atque?


China condemns attack on Hong Kong justice secretary in London
Incident took place as Teresa Cheng was in London to promote Hong Kong as protests continue to paralyse city.
China condemned on Friday an incident involving the city's justice secretary in London, the first direct altercation between demonstrators and a government minister during more than five months of often violent protests.
Secretary for Justice Teresa Cheng, who was in London to promote Hong Kong as a dispute-resolution and deal-making hub, was rounded on by a group of protesters who shouted "murderer" and "shameful".
A statement by the Hong Kong government said Cheng suffered "serious bodily harm" but gave no details.
Video footage of the incident showed Cheng falling to the ground.
More:
-
Exclusive: Voices of Hong Kong
-
Pictures: Masked students protest at HK graduation
-
Hong Kong charges pro-democracy legislators
China's Embassy in the United Kingdom said Cheng had been "besieged and attacked by anti-China and pro-independence activists" who had organised online and that she had hurt her hand when she fell.
It called on the British police to investigate the incident and to strengthen security for Chinese officials and institutions in the country.
"Ending violence and restoring order is the paramount task in Hong Kong," the Embassy's spokesman said in a statement.
"The central government of China firmly supports the (Hong Kong) government in administering Hong Kong according to law, firmly supports the Hong Kong police in enforcing the law and firmly supports the judicial organ in bringing criminal offenders to justice in accordance with (the) law."
Hong Kong's government also condemned the incident.
The confrontation came amid escalating violence in Chinese-ruled Hong Kong, where a student protester died earlier this month after falling from a car park during demonstrations.

The Food and Environmental Hygiene Department expressed profound sadness on Friday at the death of the man and said it was providing assistance to his family.
Protesters walk through barricades of bricks on a road near the Hong Kong Polytechnic University in Hong Kong. Protesters have sought to paralyse the city throughout the week. [Kin Cheung/AP Photo]
Anti-government protesters continued their blockade of parts of the city for a fifth day on Friday, forcing schools to close and blocking some highways as students built barricades in university campuses and authorities struggled to end the violence.
The Cross-Harbour Tunnel, a key link between Kowloon and Hong Kong Island, remained closed for a second day after toll booths were set on fire and protesters blockaded the road.
Al Jazeera's Rob McBride, reporting from the tunnel, said there was a "tense and uneasy calm" in the territory.
"It remains to be seen what the next stage will be as we head into another weekend, which have tended to see the most violent protests," he said.
The protests escalated in June over a now-scrapped extradition bill that would have allowed people to be sent to mainland China for trial. They have since evolved into calls for greater democracy, among other demands.
Cheng, embattled Hong Kong leader Carrie Lam's chief legal adviser, played a key role in pushing forward the proposed extradition bill that ignited the protests.
The months-long protests have plunged the former British colony into its biggest political crisis in decades and pose the gravest popular challenge to Chinese President Xi Jinping since he came to power in 2012.
Hong Kong is also expected to confirm on Friday that it has fallen into recession for the first time in a decade amid concerns the economy could be in even worse shape than feared as a result of the anti-government protests.


The eof function checks if the read position is already at the end of the file.
None.
The function returns true if end of file is reached, otherwise false is returned. No error value can be returned.
This function is usually used together with read() to check if there is more data to read.


MEMENTO
Reviewed by Harvey Karten Newmarket Films Director: Christopher Nolan Writer: Christopher Nolan based on Jonathan Nolan's short story Cast: Guy Pearce, Carrie-Anne Moss, Joe Pantoliano, Mark Boone Junior, Stephen Tobolowsky, Jorja Fox, Harriet Harris
Stop me if you've heard this one:
Patient: "Doctor, doctor, I have a serious problem. You've got to help me. I can't remember anything."
Doctor: "When did you first notice that you had this problem?"
Patient: "What problem?"
Whether or not Jonathan Nolan ever heard that one, his short story illustrates not so much the hokey wit behind the sally but the horror that inhabits the body of a man actually afflicted with this rare disease. In the story adapted and directed by the writer's brother, Christopher Nolan, "Memento" tells of a thirty-something insurance investigator who, in the process of rescuing his wife from a rapist, suffers a blow to his head that causes him short-term memory. He cannot remember facts, names or faces once they are out of his mind for a few minutes, though memories of his life before the encounter with the attacker seem to be no problem for him. Or so he believes. As a memento of each meeting with a man, a woman or even a car, he snaps a Polaroid picture, captioning each shot with a fleeting statement like "Don't believe his lies," and dedicates his life to avenging his wife's rape-murder. Since the thought of revenge compels his every action, he actually tattoos vital information to his body, even having license numbers etched into his thigh and letters across his chest running backward so that they will appear normal when he faces himself in the mirror. Most chilling is the simple announcement written in reverse across his chest, "John G. raped and murdered my wife."
A thinking person's thriller with some occasionally startling albeit split-second sounds and striking imagery, Nolan's movie is an original. The story is told backwards, but this is not a mere gimmick such as that used to no useful effect by Mike Figgis, who divided his screen for "Time Code" into quadrants. Nolan is attempting to put the viewer into the poor guy's mind to show the confusion that has taken over his life, in effect making the audience as flustered as the brain-damaged Leonard--whose role is performed almost as a one-man show by the alarmingly talented Guy Pearce ("L.A. Confidential").
The story begins, then, with the conclusion. Leonard has wrestled a man known as Teddy (Joe Pantoliano) to the ground and has put a gun to Teddy's face prepared to do him in for the murder of his wife. But who, really, is Teddy? Is he the perpetrator against whom Leonard is justifiably seeking revenge? We don't know because Leonard himself doesn't know, a concept that gives the picture its fascinating intrigue. "Memento" is a jigsaw puzzle which, each time you think you have the pieces in place, you are confronted with a new twist that keeps you guessing about each individual's role.
For example, who is the mysterious Natalie (Carrie-Anne Moss), a woman willing to help Leonard gain his revenge? Is she merely using him to gain the satisfaction that she seeks, a vengeance against a man who has beaten her silly? Or does she take pity on this bewildered individual, empathizing with his tragedy and willing to go the distance for the stranger out of sheer compassion? Why does Nolan bring in the character of Sammy (Stephen Tobolowsky), a man who has apparently suffered a similar ailment as Leonard and whom Leonard is investigating to determine whether Sammy's affliction is an insurance-covered physical condition or an insurance exempted psychological one?
Most of all, who is Leonard and why has he been able to afford to drive a Jaguar and wear designer suits on the salary of an insurance investigator? He doesn't know, so we are kept in the dark as well. By the final minutes of the film (that is, the beginning of the action), some but not all of the enigma is resolved. This is not the kind of solution that most people in the audience would have guessed, I would imagine, making "Memento" a satisfying puzzle throughout and, perhaps equally important, a vehicle for 32-year-old Guy Pearce's tour de force performance--which is backed up well by an ensemble which includes Mark Boone Junior as Burt, who manages one of the motels in which Leonard is living anonymously and especially Carrie-Anne Moss (seen in November of 2000 in the far bigger-budgeted but less challenging "Red Planet"). Viewers accustomed to clever indies such as this one already know that you don't need megabucks to challenge and entertain. With the limited budget available to the producers and the circumscribed time afforded to its filming, Nolan's work is probably edgier than it would have been had the intensity and focus been missing.
Not Rated. Running time: 113 minutes. (C) 2000 by Harvey Karten<EMAIL_ADDRESS>The review above was posted to the
rec.arts.movies.reviews newsgroup (de.rec.film.kritiken for German reviews).
The Internet Movie Database accepts no responsibility for the contents of the
review and has no editorial control. Unless stated otherwise, the copyright
belongs to the author.
Please direct comments/criticisms of the review to relevant newsgroups.
Broken URLs inthe reviews are the responsibility of the author.
The formatting of the review is likely to differ from the original due
to ASCII to HTML conversion.
Related links: index of all rec.arts.movies.reviews reviews


Security camera records hatchet attack on Langley store owner
Target escaped uninjured, but was ‘upset’ by incident
by Dan FergusonA Langley convenience store owner said he was a little shaken up, but physically unharmed after a man took a swing at him with a hatchet during a confrontation Friday (Nov. 15).
Narender Puri said he was in a back room at Ed’s In Brookswood when he heard someone raising their voice with one of his staff.
“He was saying he wanted smokes,” Puri told the Langley Advance Times.
“The way he was shouting and screaming, he didn’t sound normal.
That was when the man pulled a hatchet out and started swinging at Puri, a moment captured by the store security video system.
“He swung at me a couple of time,” Puri recalled.
Puri, a former bodybuilder and nationally-ranked boxer in India, had no trouble avoiding the hatchet.
When another staffer moved to intervene with a baseball bat, the man with the hatchet fled, but not before Puri was able to grab the weapon away from him.
There was no intent to injure the man, Puri said, only to get him to leave.
“We don’t want to be criminals, ourselves.”
Puri said by then, 911 had already been called, and Langley RCMP arrived in time to arrest the suspect outside the store at 207th St. and 42nd Ave.
Puri said the incident left him a little rattled.
“I was upset,” he admitted.
READ ALSO: RCMP mapping shows crime low in Brookswood
READ ALSO: Crime rates higher but declining in Langley City compared to Township
Puri could only recall one other similar incident in the 12 years he has been running Ed’s.
Shortly after Puri took over, a robber with a metal bar hit a staffer, who needed stitches, he related, adding that robber was also arrested and later convicted, and sentenced to three-and-a-half years.
The store has also been a target of after-hours break-in attempts, he added.
Puri said he has been gratified by the community response to the incident, describing how customers have been coming by to express sympathy and show support, as well as online.
Langley RCMP report that 33-year-old Langley resident Rory Welsh was arrested and charged with robbery following a 1 p.m. incident at the store.
According to the police report, a man was demanding a cigar when a confrontation took place.
Welsh is scheduled to have a bail hearing on Tuesday.


The Naturopathic Doctor's 1001
Personal Report of Findings
The following information is based on a combination of laboratory diagnostics, medical history of past and present symptoms and the 200-year-old science of iridology, cross correlated and made possible with 21st century computer technology.
Abunda Life's form of naturopathic medicine is based on a 3500 year old, time tested and proven philosophy and belief system. Because we believe that every symptom is a sign of a nutritional deficiency and every named medical condition is a sign of a long-term deficiency ignored or worse suppressed with a drug, we do not treat or diagnose any specific disease or named Medical Condition. We focus rather on the nutritional causation of your personal condition.
Our philosophy looks to uncover what we believe is the common denominator of almost every named medical condition, namely toxicity, nutritional deficiency, hormonal imbalance, stress and spiritual life incongruity and imbalces of Body, Mind and Spirit. Each person's needs are different, even if their medical doctor's diagnosis is exactly the same.
This report of finding is prepared for educational purposes for the patient/student and informational purpose for the patient's busy primary care physician. This report is not a diagnosis, prescription or treatment for any named medical condition. Our opinion may not conform to those of the American Medical Association or your primary care physician and may even be contrary to the views held by the orthodox drug medical profession.
Our form of naturopathic medicine is understandingly not for everyone. It is designed for intelligent, proactive, health minded people seeking to optimize their nutrition and God given potential for high level wellness. We believe our system of medicine makes the most sense for thinking men and women not willing to wait for degenerate disease to gain a foothold or leave their future health to chance.
Abunda Life's system represents an advanced form of preventative and anti-aging medicine by incorporating the Abunda Life Body, Mind and Spirit natural healing philosophy into a practical, sensible, healthful and successful way of life.
Abunda Life's system of naturopathic medicine is first a philosophy. This philosophy motivates our discipline that then becomes our new way of life and finally that wonderful way of life becomes the greatest medicine in the world. A true preventative medicine that in reality is high level wellness of body, mind and spirit, a new breed of Medicine.
Our goal at Abunda Life, at some point, is to become substance free. Free of all harmful substances including unnecessary medications and devitalized food. The naturopathic doctor's 1001 is a computerized analysis that is highly specific and scientifically based. It is programmed to address your personalized needs. The system uses sophisticated technology to develop an accurate individual program based on your individual bio-chemistry.
The 1001 enables a proper and precise sequencing of your lifestyle changes, naturopathic detoxification, compatible/non-compatible foods, dietary nutritional saturation therapy, bio-identical hormone restoration, I.V. vitamin/chelation therapy, oxidative therapies, bodyfat loss, fitness medicine, stress relief and other appropriate clinical and home self help therapies that may be indicated based on your test results.
This approach uses over 200 different metabolic classifications to analyze the bottom line cause of your condition and to monitor, advise and coach you to higher levels of wellness using 100% natural therapies. Unlike main stream medicine that waits for a full blown named disease to set in before rendering its diagnosis and treatment plan, the 1001 program is designed to catch disease in the earliest state possible, which is the deficiency stage. The 1001 testing makes this possible by employing a much higher criterion in its evaluating process.
In our form of medicine we don't want the diagnosis. Our job is to help you first of all prevent the diagnosis and then begin to build an indestructible immune system and to begin to push back the pre-mature aging process and its related degenerative diseases.
Unlike orthodox drug medicine, we will always find something you can improve on.  Most of the time we will be able to connect your symptoms to a deficiency and make a definitive recommendation of a natural remedy.
Your test results are keyed against what your lab test scores should be if everything was working perfectly. Because it takes years and even decades for full blown degenerative disease to set in, we do not wait for a shocking diagnosis to begin working on your nutrition. We allow your body's highest authority to determine what is best for you taking all the guess work out of your nutritional needs.


--- layout: page title: Front-end developer permalink: /jobs/front-end/ ---
We are looking for front-end development engineers or ninjas who want to grow professionally and experience the adrenaline of working on a startup which is rapidly growing and expanding the business across the region.
The positions are for our offices in Buenos Aires in Retiro and Vicente Lopez, but you can also work remotely if you need. We offer a great salary according to your experience and horsepower, a great health insurance plan, and of course, great discounts in your next new car :)
We believe this is an excellent opportunity as we are starting to build the development team and there are plenty of opportunities to make huge impact on the business.
Hope to hear from you.
We heavily use front-end technologies like AngularJS to develop modern web applications for our users. We are currently doing some research on ReactJS and ES6 to implement a new feature which will make a huge impact on the business.
As a front-end developer you will be responisble for the development of UI components across all of our projects.
If you are interested in joining us, send us a message through the Contact section and we'll get in touch.


| Home | Libraries | People | FAQ | More |
Copyright © 2001-2004 Douglas Gregor
Copyright © 2007-2009 Frank Mori Hess
Distributed under the Boost
Software License, Version 1.0. (See accompanying file
LICENSE_1_0.txt
or copy at http://www.boost.org/LICENSE_1_0.txt)
Table of Contents
目录
The Boost.Signals2 library is an implementation of a managed signals and slots system. Signals represent callbacks with multiple targets, and are also called publishers or events in similar systems. Signals are connected to some set of slots, which are callback receivers (also called event targets or subscribers), which are called when the signal is "emitted."
Boost.Signals2 库实现了一个可控的信号插槽（signals and slots）系统。 信号代表了具有多个目标的回调， 在类似的系统中也称为发布者（publisher）或事件（event）。 信号与某组插槽相连接，插槽即回调的接收者 （也称为事件目标，event target，或订阅者，subscriber）， 它们在信号“发出”时被调用。
Signals and slots are managed, in that signals and slots (or, more properly, objects that occur as part of the slots) can track connections and are capable of automatically disconnecting signal/slot connections when either is destroyed. This enables the user to make signal/slot connections without expending a great effort to manage the lifetimes of those connections with regard to the lifetimes of all objects involved.
信号和插槽是可控的， 因为信号和插槽（或严格地说是作为插槽出现的对象）跟踪所有的连接， 并能够在信号或插槽销毁时自动断开信号/插槽的连接。 这让使用者能够在建立信号/插槽连接的同时， 不必费力地根据相关对象的生命期去管理那些连接的生命期。
When signals are connected to multiple slots, there is a question regarding the relationship between the return values of the slots and the return value of the signals. Boost.Signals2 allows the user to specify the manner in which multiple return values are combined.
当信号连接多个插槽时，插槽的返回值和信号的返回值之间是什么关系呢？ 这是个问题。 Boost.Signals2 允许用户合并多个返回值，并指定合并的方式。
This documentation describes a thread-safe variant of the original Boost.Signals library. There have been some changes to the interface to support thread-safety, mostly with respect to automatic connection management. This implementation was written by Frank Mori Hess. Acknowledgements are also due to Timmo Stange, Peter Dimov, and Gottlob Frege for ideas and feedback, and to Douglas Gregor for the original version of Boost.Signals this effort was based on.
本文描述的是原 Boost.Signals 库的一个线程安全的变体。 接口有所更改以支持线程安全，主要是在自动连接管理方面。 本实现由 Frank Mori Hess 编写。 同时感谢 Timmo Stange、Peter Dimov，和 Gottlob Frege 的意见和反馈， 并感谢 Douglas Gregor，基于他的 Boost.Signals 才会有这个成果。
Last revised: June 12, 2007 at 14:01:23 -0400 |
|
翻译：金庆 |
|
译文更新：2009.6.4 |


| S.No. | School Name | School Code | School Address | Action | |
|---|---|---|---|---|---|
| {{i+1}} | {{school.schoolName}} | {{school.schoolCode}} | {{util.limitToText(school.schoolAddress.address, 20)}} |
| School Logo | |
| School Code | {{selectedSchoolDetail.schoolCode}} |
| School Name | {{selectedSchoolDetail.schoolName}} |
| User ID | {{selectedSchoolDetail.userID}} |
| Registered Schools | {{selectedSchoolDetail.schoolsRegistered.length}} |
| Address | {{selectedSchoolDetail.schoolAddress.address}} |
| City | {{selectedSchoolDetail.schoolAddress.city}} |
| District | {{selectedSchoolDetail.schoolAddress.district}} |
| State | {{selectedSchoolDetail.schoolAddress.state}} |
| Pincode | {{selectedSchoolDetail.schoolAddress.pincode}} |
| Country | {{selectedSchoolDetail.schoolAddress.country}} |
| School open time | {{selectedSchoolDetail.schoolOpenTime}} |
| School close time | {{selectedSchoolDetail.schoolCloseTime}} |
| Admin Name | {{selectedSchoolDetail.adminName}} |
| Admin Username | {{selectedSchoolDetail.userID}} |
| Admin EmailID | {{selectedSchoolDetail.adminEmailID}} |
| Admin Mobile Number | {{selectedSchoolDetail.adminMobile}} |
Are you sure to delete this School?


Astros owner Jim Crane plans to 'take a run' at Gerrit Cole in free agency
by TSD StaffAll signs pointed toward Gerrit Cole having pitched his final game for the Astros after the team’s Game 7 loss in the World Series, when he warmed up but was not inserted in the contest, but apparently that’s not the case.
The Astros’ model does not entail signing pitchers to blockbuster deals upwards of $300 million, given how much offensive firepower the team has in its lineup — unlike the Nationals, who had no problem signing Max Scherzer and Stephen Strasburg to mega-contracts.
As such, it was expected that Cole’s Game 5 performance would be his last outing for the team.
However, Astros owner Jim Crane was recently asked about Cole’s impending free agency, and apparently, the team will be in the mix for his services — along with the California teams.
The interesting dynamic here is Astros manager AJ Hinch completely mismanaging Game 7 with a 2-0 lead, and rather than inserting Cole in the game, giving him a chance to be the hero, he never saw any action. It’s fair to wonder if he’s still upset about that, as many others would be.


Brazil GP promoter says Rio bid 'not serious'
Brazilian GP promoter Tamas Rohonyi does not believe a bid to switch the race to a new circuit in Rio de Janeiro is "serious".
by GMM F1Interlagos officials have and are meeting with Liberty Media to discuss paying an annual fee in order to keep the Formula 1 race in Sao Paulo for the next decade.
But Rohonyi told France's Auto Hebdo that he is not overly concerned about reports suggesting Rio is a viable alternative for the sport.
"I try not to comment on that project because it is not serious," he said.
"I do not know the person behind it and I do not doubt his good intentions, but there is no chance to build a circuit in that place in the next four or five years.
"It's not just a question of money, but of authority too. The place is a former military site used as a base that first needs all the ammunition that did not explode and is buried removed," Rohonyi added.
"It's not even worth talking about."
La Gazzetta dello Sport claimed this week that Interlagos may even be protected by a clause in its agreements with Liberty.
At any rate, Rohonyi thinks Interlagos has a good relationship with F1's post-Bernie Ecclestone owner Liberty Media.
"I hope so," he said. "We do not have so many relationships, actually.
"Chase Carey came here and we talked about anything and everything over coffee. It was very nice, but our relationship is primarily contractual," added Rohonyi.
"I think it's very important for them to be here. The Brazilian GP is the only one in South America, it takes place on a marvellous circuit in front of a huge crowd and the city is the most important economic centre in the southern hemisphere.
"So yes, I think it's very important to them," he said.
body check tags ::


Angelina Jolie, 'The Eternals' cast evacuate set after bomb scare
by Entertainment DeskHollywood star Angelina Jolie and other cast members from Marvel’s upcoming film The Eternals got a bit of a scare when a bomb was reportedly found on set this week.
Multiple media outlets reported that production of the project was halted when the film’s crew found an unidentified object in the near vicinity, confirmed E! News.
“We have learnt that an unidentified object was found on the set where 2nd unit filming was taking place,” E! News wrote. “Per safety protocol, the area was inspected and deemed safe, and production resumed. No cast was present but the crew was asked to clear the area while the inspection occurred.”
The filming was taking place on an island that was previously used as a German military base during the Second World War. Jolie is shooting the project alongside A-listers Richard Madden, Kumail Nanjiani, Brian Tyree Henry and Salma Hayek.
“It was obviously terrifying – the bomb could have been there for decades untouched but who knows what might have happened if it was disturbed,” an insider told The Sun. “Some of the biggest stars in the world were on set and nobody was taking any chances. Fortunately, experts dealt with it.”
Jolie has had a successful run of films this year, including starring in the newly released Maleficent: Mistress of Evil where she returns as the misunderstood horned character.
However, it seems like the Disney’s queen of darkness has had a slow first week, regardless of it being a $185 million film, opening with a disappointing $36 million, according to the Los Angeles Times.
On the personal front, Jolie recently opened up about her high-profile divorce from Troy actor Brad Pitt. The former Hollywood duo abruptly parted ways in 2016, after two years of marriage and over a decade together. The Eternals is slated for release late next year.


does happiness come before success
My nickname is Boss. I graduated with bachelor's degree in computer engineer from king mongkut university of technology north bangkok and I graduated in 2017. The first programming language that i studied is Pascal. I interest about opensource hardware like arduino, internet of things and game engine technology.
This is online game for 2 players. The goal of this game to be a winner by find a exit gate from each map. Use python as a UDP connection. If 2 player is in the same area network then they can play this game together.
This is web application about teaching how to use django framework. In this web have a details for visiter to read it and then visiter will get questions to answer for test understanding of content. Many user will get some point after answer questions to challenge with other.
This is device to find a distance by using many of module and microcontroller. Such as ultrasonic, OLED screen, laser pointer and buzzer piazo.
In the development process, we would use single computer to perform a server that store the data of faculty’s announcement. And then post the data on each monitor placed around The Engineering Faculty’s buildings, by using The Raspberry-pi which is a microcontroller board that install on each monitor to open the web browser for receive the data of The Engineering Faculty’s announcement and sent it to display on the monitor. In the server side there will have a content management system to facilitate the user’s usage.
Using micro servo and ultrasonic module to create rader. Radar monitor create from Processing that a opensource to draw art work base on JAVA . Arduino control servo and read data from ultrasonic then show data through serial port and Processing will read the same data to show in monitor.
Read more...
Pratice using soldering and design circuit to create led cube 3x3.
Read more...
Mar 2017, Work as ERP developer with Ecosoft co ltd. . coding with python and use odoo framework to customize project management, sell/purchase management, Human resource management and Asset management. Create quotation form, HR expense form, HR advance form and cost control sheet report. Support business team to work with customer such as meeting to get requirement, Support team to do UAT test.
Mar 2018 - present, work with NEXPIE co ltd. Develop Kidbright IDE ( ide to program Kidbright board ) in IOT blocks to make Kidbright board can send data and control by mobile app, create arithmetic blocks, array block and string block.
Mar 2018 - present, work with NEXPIE co ltd. Design and develop backend system of smart chicken farm using nodejs, express framework and MySQL database.
Mar 2018 - present, work with NEXPIE co ltd. Design and develop backend system of Loracat iot module for iot device that use lorawan.
Mar 2018 - present, work with NEXPIE co ltd. Do experiment about how to create intent and skill to command iot device.
Mar 2018 - present, work with NEXPIE co ltd. Develop Kidbright IDE ( ide to program Kidbright board ) in IOT blocks to make Kidbright board can connect with Netpie Broker.


{% csrf_token %}
First Name
Last Name
Gender
Male
Female
Date Of Birth
Email
Phone Number
Portfolio
Github Profile
Linkedin Profile
Skills
About You
Education Details
10th school
Year of Passout
Percentage Score
Inter(12th) college
Year of Passout
Percentage Score
B Tech College
Year of Passout
Percentage Score
Experience
Projects


| Brightness | The default value is 50. |
| Contrast | Contrast is the difference in luminance and color that makes an object distinguishable. The default value is 50. |
| Saturation | Saturation is the colorfulness of a color relative to its own brightness. The default value is 50. |
| Sharpness | In photography, the term "acutance" describes a subjective perception of sharpness that is related to the edge contrast of an image. Due to the nature of the human visual system, an image with higher acutance appears sharper even though an increase in acutance does not increase real resolution. The default value is 50. |
| Restore | Clicking this button will set Brightness, Contrast, Saturation, Sharpness and to their default value 50. |
| Gain Mode | The greater the gain, the brighter the image and the more the image noise. You are advised to set Gain Mode to Auto. Note:
1. If you select Auto, you need to specify Gain Upper Limit.
2. If you select Manual, you need to specify Gain Level. |
| Aperture Mode | Aperture mode |
| Shutter Mode | The lower the shutter level, the darker the image. You are advised to set Shutter Mode to Auto. Note:
1. If you select Auto, you need to specify Shutter Lower Limit.
2. If you select Manual, you need to specify Shutter Level. |
| Anti-Flicker | You can select 50 or 60 Hz to prevent lights on images from flickering. |
| Focus Mode | Focus mode |
| Minimum Focus Distance | Minimum focus distance
Note: This option is available only to dome cameras whose focus mode is Auto. |
| Day | In this mode, colors are retained.
Note: Infrared radiation will not be captured by the camera in this mode. |
| Night | In this mode, images are in black and white.
Note: Infrared radiation will be captured by the camera in this mode. |
| Auto | The Switching Time parameter indicates the time taken to switch from Day to Night or from Night to Day |
| Scheduled Day/Night | At a scheduled time, the Night mode is switched to the Day mode.
Note: During the scheduled period, the Day mode takes effect. |
| Alarm Trigger Switching | In this mode, an alarm can trigger a switching from Day to Night or from Night to Day. |
You can adjust the 3D denosing level to reduce image noise.
| Disable | Disable all options. |
| Backlight Auto | The default backlight level is 50. |
| Backlight Manual | If you select Backlight Manual, you need to specify BLC Level and Backlight Area.
Note: To customize the backlight area, click Edit. |
| WDR | The default value for WDR Sensitivity is 50. |
| HLC | HLC stands for high light compensation. The default value for HLC Level is 50. |
| Corridor Mode | If you select Left, images will be rotated counterclockwise. If you select Right, images will be rotated clockwise. |
| Mirroring Mode | When the camera is installed upside down, you can use this mode to rotate images. Parameter values are described as follows: Left and Right: Images are reversed. Up and Down: Images are moved upside down. Center: Images are rotated 180°. |
| Connect to Monitor | Parameter values are Disable, PAL, and NTSC. PAL stands for Phase Alternating Line and NTSC stands for National Television System Committee. PAL and NTSC are the color encoding system. |


Our Story
JENNIFER
I am not quite sure why I like to gloss over the details of how we met, but when people ask, I give them a noncommittal answer. Usually I say we met at a conference. It’s a good enough answer but I tend to forget that there was more.
The unpredictable set of events that pushed me toward this inconsequential conference can only be attributed to "fate". On the day of the conference, I only had enough time to stay for my picture to be taken before I had to leave for class. And while it was short, I’d enough time to realize I wasn’t going to get along with Eric.
He made taking portraits even more painful than it had to be and many times, urged me to open my eyes more. There was not a thread of reason in why we became Facebook friends later but we did, and I figured later, it was one of those things you couldn’t really pin down to rationality.
My first real conversation with Eric – on Facebook – happened a whole year later and I found it charming. But once we really got to know each other I was more than charmed; it was like what those fairytale stories promised to be. The difference is, I was not merely reading about them, I was living in it. I, too, experienced those sweet summer days of talking, eating, and finding out things we liked in common. Surprisingly, we continued to do so, via WeChat while he worked in Bermuda. The weather cooled, but we stayed strong, despite the hovering sense of responsibilities in our last year of undergrad, the temper flares, and the disagreements.
The fact is, by December that year, I’d been on this momentum that spurred me headfirst toward love. It really could have ended awfully, even outing total rejection. But – I think – the most enduring charm about Eric was that he truly connected with me and love me back withstanding all those humanly imperfections.
And surely there has been a love story more full of wonderment, more freshly original than this one, but mine takes center place because it belongs exclusively to me, to us. At the end of the day, even the wedding itself seems small and irrelevant, because if our feelings toward each other remain, not only as lovers but as friends, always there, always to be relied on for warmth and understanding. Then, that alone would ensure a more beloved story than any other ones I know.
Wedding
VENUE
Auberge du Pommier
4150 Yonge St
Toronto, ON M2P 2C6
(416)222-2220
SCHEDULE
Ceremony
Thursday, July 3rd at 11am
Lunch to follow
VICINITY MAP
Speech
ERIC
Before I started talking I must thank every one for coming to our wedding. It was my fault to give you guys such short notice. But I am so glad that I have my best friends here to witness the most important day of my life.
I will begin my talk in Mandarin and the rest in English.
首先我要感谢我的父亲和母亲。他们养育了我的身体，培育了我的人格。他们引导我认识这个世界上的各种美好。我能在加拿大念书，也归功于他们的一臂之力。我还要感谢易芝的父母。你们是我在加拿大新的家人，请让我正式叫你们一声“爸，妈”。
Next I want to talk about Jennifer and me. I owe so much to Jennifer. When I was still in Seattle weeks ago, she arranged all the details of the wedding.
I remember very well how we met. It was a conference in which I was the photographer. I took photos of her, many more than I should. I told her I was going to Bermuda.
Ah! The Bermuda! When I was working there I had a short trip back to Toronto. That’s when I really started to know Jennifer. We told each other everything on the first date: including the first kiss and the ex-relationships. I had never gotten along so well with anyone before. We have had fights, but they always ended with hugs and kisses. We sat in each other’s classes and studied together in our library dates. We had so much fun in our trip to Cuba! My dream came true when I drove her on a scooter near a beach. She is so cute, lovely, kind and understanding.
I also want to thank my friends for all the good time we spent together. One day I woke up in the middle of the night and said to Jennifer, “we must keep in touch with our friends, your friends and my friends!” She agreed. I am so glad you guys are here.
I want to say a last few words before I stop:
钱钟书说，婚姻是一座围城，外面的人想进来，里面的人想出去
My favourite author wrote, “marriage is like a castle under siege. People outside want to get in, and people inside wants to get out.”
我觉得婚姻更像是一艘驶向远方的轮船，全家人都在船上，凭着智慧和耐心，去经历风风雨雨和海阔天空。
I think marriage is more like a ship sailing to the future. Everyone in the family is on board. We rely on wisdom and patience to sail through hardship, and enjoy the happiness.
Photos
To be posted.