Intellectual property, copyright & copyleft

Introduction to open source and open source principles

This post introduces what is open source and what are the factors must be included when using open source products or websites.

According to what says on the Open-source’s website, the definition of open source is: “something people can modify and share”.

Nowadays, people have a deeper understanding of this term and developed certain rules for those who want to create open-source websites or software.

Those are called the Open Source Initiative and here are the following criteria:

  1. Free redistribution.
    This means that the open-source product is licensed from any party by allowing them to sell or give away. While using the resources, the code coming from the open-source project should not be charged in any form.
  2. Source Code
    As mentioned above, the code getting from the project is called: “Source Code”. A program must include source code and must permit anyone to distribute the code as well as compiled form.
  3. Derived Work
    The license must be modifiable and it must allow anyone to create derived works. Based on this idea, it must also allow the works to be distributed under the same terms from the license of the original work.
  4. The integrity of The Author’s Source Code
    When anyone is trying to alter and modify the work, one must keep the source code from the original work.
    It is an essential point that the ability to trace code when some author has modified the work.
  5. No discrimination against persons or group
    This rule is about that different groups of people should not be prohibited from accessing the open-source website, and those people should not be classified under any “race” or “nationality”.
  6. No discrimination against specific fields of endeavor.
    Similar to the 5th one, there should not be a license restricting anyone from using the program in any certain field of career.
  7. Distribution of License
    The distributed license includes everything required to secure right, and no action needs to be taken when using, altering or distribute the code.
  8. License Must Not Be Specific to a Product
    If the program is removed from the distribution and used or issued within the terms of the program’s license, all parties to whom the program is reallocated should have the same rights as those that are granted along with the original work distribution.
  9. License Must Not Restrict Other Software
    The license must not place restrictions on other software that is distributed along with the licensed software. In other words, this is saying that it’s free to use your open source code with proprietary code. The license doesn’t require all other programs distributed on the same medium must be open-source software.
  10. License Must Be Technology Neutral
    The license has to be open to a variety of technologies and interfaces.

These ten factors made up what open-source initiatives, each of which is indispensable for building open-source websites or software.

Web fonts and Google fonts

An overview on HTML and the different types of Web fonts

HTML overview/review

HTML Tutorial: https://www.w3schools.com/html/default.asp

  • HTML defines the structure of a webpage and the meaning of the content to the browser.
  • Using semantic HTML for accessibility and SEO.
  • HTML and CSS work closely related together.

HTML+CSS +JavaScript= Front end.

  • HTML describes the content to the browser.
  • CSS Presentation layers; defines styles. (e.g: colors)
  • JavaScript Adds interactivity to the webpage.

HTML terminology and syntax.

Elements are the components that define page objects, such as paragraphs and links.

Tags are used to define these elements, using angled brackets wrapped around the tag name.

They usually come in pairs and wrap the content to give meaning to it.

The opening tag is added at the beginning of the element, and the closing tag, with the addition of a forward slash, marks the end.

There are some exceptions to this rule.
Void elements don’t have closing tags and don’t wrap any content, because they are the content. Such as for building tables.

Some void elements can be used on their own, and others require additional information. Such as <hr> and <omg> stands for each separately.


Document Object Model

The Document Object Model (DOM)represents the tree-like structure that is created when writing HTML.

Each element is an object, which makes up the document, hence the name, document object model.

Nested elements meaning the tags are written inside of other tags.

Web fonts and Google Fonts

Font Options

There are two types of fonts : Web Safe Fonts and Web Fonts.

Web fonts

Internal Font Sources

  1. Downloaded font files.
  2. Included in your project’s directory just like any other file. (CSS files, images, HTML files, etc).
  3. Declare and link to the font files using a method called @font-face.

External Font Source

  1. Third-party online services.
  2. Don’t need to download any files, or include them in your project’s directory.
  3. You can link directly to CSS and the font files which are hosted online.

There is a website named “Typekit” which need to pay the fee but can access to those high-quality fonts.

Google Fonts is a good choice for having all the fonts free.

Web safe fonts and the font family property.

The typeface is commonly referred to as a font or font family, but it’s actually a set of fonts, designed with common characteristics composed of glyphs.

Different Typefaces

  • Serif typefaces have small decorative lines.

e.g: Georgia, Rockwell, Times New Roman.

  • Sans serif typefaces have no decorative lines.

e.g: Verdana, Arial, Helvetica.

  • Cursive typefaces have a hand-lettered look.

e.g: Brush Script MT

  • Fantasy typefaces are distinct and ornamental, which is similar to script typefaces.
  • e.g: Papyrus, Copperplate
  • Monospace typefaces, each character uses the same amount of horizontal space and the same width.

e.g: Courier New.

What is Web Safe Fonts?

Web-Safe Fonts are the fonts (include Arial and Times New Roman)that are commonly preinstalled on computers or other electrical devices.

There is a resource from cssfontstack.com which lists all web-safe fonts and also categorizes them into typefaces.

In conclusion, this post introduces the overview of HTML, CSS and JavaScript’s relationship; the Web fonts and the Google fonts; different types of Typefaces fonts and Web Safe Fonts.

CSS Grid and Grid Features

Terminology
The basic concepts of CSS Grid.
Grid Container: The element containing a grid, defined by setting display: grid;

Grid Item: the element that is a direct descendant of the aid container.

Grid Line: Horizontal rows or vertical column lines separating the grid into sections. These are sequenced by number, starting and ending with the outer boards of the grid. It can also be named for easier reference.

Grid Cell: The intersection between a gird row and a grid column. Efficiently the same as a table cell.

Grid Track: The space between two or more adjacent grid lines. Row track are horizontal, Column tracks are vertical.

Grid Area: Rectangular area between four specified gird lines. Grid areas can cover one or more cells.

Grid Gap: Empty space between grid tracks(shown in blue). Commonly called gutters.

There goes the following CSS Grid features:

CSS Grid brings outside-in, two-dimensional layouts to the web browser.

CSS Grid Features: Grid Items

  • Direct first-level descendants of the grid container.
  • Second-level descendants need their own gird.
  • Subgrids are not supported – no present road map.
  • Resist the urge to “flatten” your HTML to make every item a grid item.
  • Embrace nested grids.

CSS Grid Features: True Grids

  • Grid items adhere to strict columns and rows.

CSS Grid Features: Content Stacking.

  • Any fire item can be placed anywhere on the grid.
  • This includes placing one item on top of another.
  • Items are stacked according to the HTML source order.
  • Items can be recorded using the z-index property.

CSS Grid Features: Content Order.

  • Any grid item can be placed anywhere on the grid.
  • Manual placement is not impacted by the source order,
  • Make sure the visible content oder matched the source content order to preserve meaningful communication.

CSS Grid Features: Pure CSS Grids.

  • Grids are defined using the pure CSS.
  • Grids can be nested inside the media queries.
  • Grids can be applied conditionally.

Overview of the starting point

All the content from the exercise website is fully accessible, easy to read and to maintain, but it is not being displayed in a three column layout.

In order to make a three column layout, it have to do by defining a gidd on the main container, which would be the body element with the class site.