Creating Responsive Inputs and Labels

Creating responsive inputs and labels provides you with in-depth training on Web. Taught by James Williamson as part of the Building Responsive Forms with Flexbox. Also, see my previous post: What is Flexbox?

The CSS3 Flexible Box Model, or Flexbox, is a different way to design responsive websites and HTML forms. Flexbox doesn’t rely on floats or collapsible margins. Instead, flex containers shrink and expand items to fit the available space. With flexbox, complex layouts can be achieved with cleaner, more semantic code.

In this course, senior staff author James Williamson shows how to use flex containers, flex child items, and responsive design techniques to create responsive layouts for two forms: a short search form and a longer registration form with sections. He demonstrates how to style the form structures, fields, labels, and buttons; control the alignment of different elements; and enhance the responsiveness of both forms with media queries.

CSS3 Modules

Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided into several separate documents called “modules”. Each module adds new capabilities or extends features defined in CSS 2, preserving backward compatibility. Work on CSS level 3 started around the time of publication of the original CSS 2 recommendation. The earliest CSS 3 drafts were published in June 1999.

responsive

Due to the modularization, different modules have different stability and statuses. As of June 2012, there are over fifty CSS modules published from the CSS Working Group., and four of these have been published as formal recommendations:

Some modules have Candidate Recommendation (CR) status and are considered moderately stable. At CR stage, implementations are advised to drop vendor prefixes.

Terminology

See the Pen CSS3 Flexbox by Sten Hougaard (@netsi1964) on CodePen.

Following are a few terms associated with the flex layout model:

Flex container
Parent element that holds all flex items. Using the CSS display property, the container can be defined as either flex or inline-flex.

Flex item
Any child element held within the flex container in considered a flex item. Any text within the container element is wrapped in an unknown flex item.

Axes
Each flex box contains two axes: the main and cross axes. The main axis is the axis on which the items align with each other. The cross axis is perpendicular to the main axis.

Flex-direction
Establishes main axis.

Justify-content
Determines how content gets placed on the main axis on the current line.

Align-items
Determines the default for how content gets placed on the cross axis on the current line.

Align-self
Determines how a single item is placed along the cross axis. This overrides any defaults set by align-items.

Directions
The main-start/main-end sides determine where to start placing flex items within the flex container, starting from the main-start end and going to the main-end end. The cross-start/cross-end sides determine where flex lines get filled with flex items from cross-start to cross-end.

Order
Places elements in groups and determines which order they are to be placed in within the container.

Flex-flow
Shorthands flex-direction and flex-wrap to place the flex content.

Lines
Flex items can either be placed on a singular line or on multiple lines as defined by the flex-wrap property, which controls both the direction of the cross axis and how lines stack within the container.

Dimensions
Main size and cross size are essentially the height and width of the flex container, each dealing with the main and cross axes respectively.

See more resources:

Using Bootstrap 4 Flexbox
Flexbox’s Best-Kept Secret
How To Get Started With CSS Flexbox

Website:
Build My Site

Introducing Popperscores: A Preview of the Final Project

Introducing Popperscores: A preview of the final project provides you with in-depth training on Web. Taught by Morten Rand-Hendriksen as part of the WordPress: Building Themes from Scratch Using Underscores.

Ready for your next WordPress challenge? Learn how to build more complex custom themes using the _s (aka Underscores) starter theme. Morten Rand-Hendriksen takes you from basic layout and customization to enabling advanced responsive design and accessibility features. He reinforces the basics lessons with DRY (don’t repeat yourself) development practices and a structured approach that will help you build WordPress themes that meet modern standards. Plus, he explores core concepts like understanding the WordPress template hierarchy and mobile-first design, creating functions, adding custom JavaScript, applying styles, and more. Plus, for 2016, we’re including an all-new chapter on the Customizer, which provides controls that allow users of your theme to adjust the colors and layout.

Topics include:

  • Installing WordPress, Underscores, plugins, and NetBeans
  • Creating a modular, mobile-first WordPress theme
  • Setting up the basic theme
  • Building a custom header
  • Designing responsive, accessible menus
  • Configuring the Single Post Template plugin
  • Generating featured images
  • Styling the comments area, search results, and widget areas
  • Working with static pages
  • Adding features to the Customizer
  • Customizing the backend
popperscores
Generate your own custom version at Underscores.me

Underscores (_s)

Designed to serve as a base/starter theme by the WordPress.com Theme Team — the people responsible for
the design and development of themes that ship with WordPress. It is a culmination of the lessons learned and best practices garnered from building themes used by millions of people all over the world.

Check out Underscores (_s) on Github

Themes

WordPress users may install and switch between themes. Themes allow users to change the look and functionality of a WordPress website and they can be installed without altering the content or health of the site. Every WordPress website requires at least one theme to be present and every theme should be designed using WordPress standards with structured PHP, valid HTML and Cascading Style Sheets (CSS). Themes may be directly installed using the WordPress “Appearance” administration tool in the dashboard or theme folders may be uploaded via FTP. The PHP, HTML (HyperText Markup Language) and CSS code found in themes can be added to or edited for providing advanced features. WordPress themes are in general classified into two categories, free themes and premium themes. All the free themes are listed in the WordPress theme directory and premium themes should be purchased from marketplaces and individual WordPress developers.

Popperscores
Sparkle is based on Underscores (_s) and Bootstrap Framework with built-in flexibility

WordPress users may also create and develop their own custom themes if they have the knowledge and skill to do so. If WordPress users do not have themes development knowledge then they may download and use free WordPress themes from wordpress.org.

See more resources:

Underscores WordPress Starter Theme Adds Support for Sass
Introduction To Underscores: A WordPress Starter Theme With Konstantin Obenland
_s_backbone: A WordPress Starter Theme Based on Underscores and Backbone.js

Website:
Build My Site

Styling Social Media Icons

Styling social media icons provides you with in-depth training on Web. Taught by Justin Seeley as part of the Building a Responsive Portfolio Site.

A great portfolio can make the difference between landing the job and getting passed over. This quick and fun project-based course will show you how to build a responsive portfolio site from start to finish. Staff author Justin Seeley shows how to plan the website in Photoshop and convert the plan into a single-page site. The backbone driving the portfolio will be Skeleton, an intuitive CSS framework that you’ll learn how to use for your own projects. Along the way, you’ll find out how to work with web fonts like Google fonts and icon fonts, how to start inserting content into containers, and how to style the look of headers, images, typography, and even social media buttons with some simple custom CSS. Add on a responsive lightbox effect and some media queries to make sure your site is ready for mobile, and you’ll have a complete, high-quality platform for showcasing your work.

Topics include:

  • Planning and setting up an HTML layout
  • Creating responsive CSS grids
  • Incorporating web and icon fonts
  • Building a layout with the Skeleton grid
  • Styling the website
  • Using jQuery for simple lightbox effects
  • Testing a website’s responsiveness
  • Adjusting media queries

CSS Frameworks

CSS frameworks are pre-prepared software frameworks that are meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and unobtrusive. This differentiates these from functional and full JavaScript frameworks.

social
Website development

CSS frameworks offer different modules and tools:

  • reset style sheet
  • grid especially for responsive web design
  • web typography
  • set of icons in sprites or icon fonts
  • styling for tooltips, buttons, elements of forms
  • parts of graphical user interfaces like accordion, tabs, slideshow or modal windows (Lightbox)
  • equalizer to create equal height content
  • often used css helper classes (left, hide)

Skeleton is: Responsive Grid Down To Mobile, Fast to Start, Style Agnostic. Base grid is a variation of the 960 grid system.

Google Fonts

Google Fonts (previously called Google Web Fonts) is an interactive directory of free hosted application programming interfaces for web fonts. It was launched in 2010, and revamped in 2011. Many of the fonts are released under the SIL Open Font License 1.1, while some are released under the Apache License; both are free software licenses. The fonts are also served by Monotype’s SkyFonts, and Adobe’s Edge Web Fonts and Typekit services.

social

Google Fonts is designed to provide a platform for users to discover fonts and is used extensively, and example font faces include Lato, Raleway, and Lobster.

Font Awesome

Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy for use with the Twitter Bootstrap, and later was incorporated into the BootstrapCDN.

social

Font Awesome has a 20% market share among those websites which use third-party Font Scripts on their platform, ranking it on a second place after Google Fonts.

See more resources:

Grid Based Web Design Resources
28 Powerful Open Source CSS Frameworks & Libraries

Website:
Build My Site

Restyling the Mobile Menu

Restyling the mobile menu provides you with in-depth training on Web. Taught by Chris Converse as part of the Creating a Responsive Web Design: Advanced Techniques.

Looking to take your responsive web design skills to the next level? Learn how to create collapsible menus and add scalable vector graphics (SVGs) to your layouts. Chris Converse shares advanced techniques to style mobile menus and graphics with HTML, CSS, JavaScript, and jQuery. These videos offer practical, start-to-finish tutorials to build more efficient and flexible webpages that can adapt to different screen sizes and orientations.

mobile
Content is like water, a saying that illustrates the principles of RWD.

“Holy Grail” – Responsive

The Holy Grail refers to a web page layout which has multiple, equal height columns that are defined with style sheets. It is commonly desired and implemented, although the ways in which it can be implemented with current technologies all have drawbacks. Because of this, finding an optimal implementation has been likened to searching for the elusive Holy Grail.

The limitations of CSS and HTML, the desirability of semantically meaningful pages that rank well in search engines, and the deficiencies of various browsers combine to create a situation in which there is no way to create this type of layout that would be considered totally correct. As the underlying technologies do not provide a proper solution, web designers have found various ways to work around the limitations. Common workarounds include changes in page structure, the addition of graphics, scripting, and the creative use of CSS. These methods are imperfect, inconvenient, and may even be considered abuse of the web standards and their intent.

Upcoming web standards will deal with this and other layout issues in a much more elegant fashion. However, the problem will continue until these standards are finalized and widely implemented.

mobile

The World Wide Web Consortium (W3C) has approached the layout issue through various proposals. Three of these proposals are under current development: the Flexible Box Layout Module, the Grid Layout Module, and the Template Layout Module.

The most mature proposal is the Flexible Box Module, which reached Last Call Working Draft status as of May 2015, and has support in all current desktop and many mobile browsers (Webkit-based browsers and some other mobile browsers require prefix filters). Setting an element’s display property to “flex” or “flex-inline” causes the element to become a new type of container (similar to a block or inline block, respectively), with new methods of positioning child objects. Content can flow in any direction, and be displayed in any order. The W3C proposal contains an example which achieves the Holy Grail column layout using four simple CSS rules, and makes the layout responsive with a simple media query rule. The module can also be used to address many other layout issues.

The Grid Layout Module similarly allows a designer to create a container for layout, which contains rows and columns of fixed or variable size into which elements can be placed. It is in Working Draft status (September 2015), and has very limited browser support. This module is a continuation of work done as the Grid Positioning Module.

There is a new draft of the Template Layout Module as of March 2015, which was inactive since 2011. This module allows designers to create grid slots in a container semi-graphically, in a manner that has been described as “ASCII art”. This module does not have browser support, but Web designers who wish to use the Template Layout syntax may add support to their pages through jQuery/javascript. This module is a continuation of work previously done as the Advanced Layout Module, and the authors state that it “combines ideas from earlier drafts on Template Layout, Grid Positioning and Grid Layout”. The W3C does not expect that this module will become a recommendation; rather it serves as a repository for ideas which may migrate to other modules of CSS.

When these standards become mature, and nonconforming browsers are no longer in common use, the Holy Grail problem will have become a non-issue.

See more resources:

Holy Grail Layout — Solved By Flexbox — Cleaner, hack-free CSS
Responsive Web Design
The Role of Table Layouts in Responsive Web Design

Website:
Build My Site

Inserting a Navigation Bar with Bootstrap and Dreamweaver CC 2015

Inserting a navigation bar provides you with in-depth training on Web. Taught by David Powers as part of the Responsive Design with Bootstrap and Dreamweaver CC 2015.

Bootstrap—the popular HTML, CSS, and JavaScript framework for building responsive mobile-first websites—has been fully integrated into Dreamweaver CC 2015. The combo puts responsive web design within reach of all Creative Cloud members. This project-based course will show you how to define a Bootstrap layout grid in Dreamweaver, and build a responsive webpage using Bootstrap components and Dreamweaver’s column tools. Author David Powers also shows how to add a hero image to your front page, create placeholder content with the text editor Emmet, and go straight to the DOM to move page elements around, avoiding the need to restructure the HTML.

Topics include:

  • Defining a custom Bootstrap layout grid
  • Inserting and modifying a navigation bar
  • Adding a container for a hero image
  • Working with columns inside a Bootstrap container
  • Creating placeholder content with Emmet
  • Speeding up layout by duplicating columns
  • Moving page elements in the DOM
  • Previewing the mobile webpage with Device Preview

Dreamweaver CC 2015

Adobe Dreamweaver CC is a web design and development application that combines a visual design surface known as Live View and a code editor with standard features such as syntax highlighting, code completion, and code collapsing as well as more sophisticated features such as real-time syntax checking and code introspection for generating code hints to assist the user in writing code. Combined with an array of site management tools, Dreamweaver lets its users design, code and manage websites as well as mobile content. Dreamweaver is positioned as a versatile web design and development tool that enables visualization of web content while coding.

Dreamweaver CC brings you a breakthrough experience in designing and building websites in Dreamweaver. Creative Cloud Libraries and Adobe Stock can now be accessed from within Dreamweaver to integrate design elements and styles from Adobe desktop and mobile apps, and high-quality images and videos. Collaborative features in Creative Cloud provide a smooth designer-to-developer workflows.

Dreamweaver CC

Bootstrap enhancements

Bootstrap version used in Dreamweaver has been updated to version 3.3.5. As a result, Bootstrap components, snippets, and starter templates are now in version 3.3.5.

jQuery version, too, has been updated to 1.11.3.

Whether you create a Bootstrap document from the New Document dialog box or from starter templates, the workflow is now seamless. No dialog boxes – Copy Dependent Files and Overwrite Existing Files – are displayed as in previous versions of Dreamweaver.

When you create and save a Bootstrap document in a specific location, the dependent files too are automatically saved in the same location.

Adobe Creative Cloud

Adobe Creative Cloud is a software as a service offering from Adobe Systems that gives users access to a collection of software developed by Adobe for graphic design, video editing, web development, photography, and cloud services. In Creative Cloud, a monthly or annual subscription service is delivered over the Internet. Software from Creative Cloud is downloaded from the Internet, installed directly on a local computer and used as long as the subscription remains valid. Online updates and multiple languages are included in the CC subscription. Creative Cloud is hosted on Amazon Web Services.

Dreamweaver CC

Website:
Build My Site

Installing the WP-API from the Course WordPress REST API (WP-API): First Look

Installing the WP-API from the Course WordPress REST API (WP-API): First Look.

The revolution will be RESTful! WordPress, the most popular and prevalent content publishing platform on the web, is undergoing a fundamental change. With the introduction of the WP API, a RESTful JSON API, the content management system can finally graduate from its PHP-rooted origins to become a full-fledged application platform.

With the WP API, developers can access the data on a WordPress site—such as users, posts, and categories—programmatically. The result is an expansion of the already limitless field of possibilities where theme and plugin development is concerned.

This course is a first look at the WP API: what it is, how to get it running, how to interact with it, what it can do for us, and what we can do with it. Join Morten Rand-Hendriksen, your guide and WordPress guru, as he walks through the tools and major features (such as routes and endpoints) of the WP API, as well as a short project that shows how this new API will be used in real-world workflows.

Topics include:

  • Installing the WP API
  • Exploring common routes
  • Examining WP API output
  • Building plugins with the WP API
  • Crafting WP API URL requests
  • Creating AJAX functions with the WP API

api

Web APIs

Web APIs are the defined interfaces through which interactions happen between an enterprise and applications that use its assets. An API approach is an architectural approach that revolves around providing programmable interfaces to a set of services to different applications serving different types of consumers. When used in the context of web development, an API is typically defined as a set of Hypertext Transfer Protocol (HTTP) request messages, along with a definition of the structure of response messages, which is usually in an Extensible Markup Language (XML) or JavaScript Object Notation (JSON) format. While “web API” historically has been virtually synonymous for web service, the recent trend (so-called Web 2.0) has been moving away from Simple Object Access Protocol (SOAP) based web services and service-oriented architecture (SOA) towards more direct representational state transfer (REST) style web resources and resource-oriented architecture (ROA). Part of this trend is related to the Semantic Web movement toward Resource Description Framework (RDF), a concept to promote web-based ontology engineering technologies. Web APIs allow the combination of multiple APIs into new applications known as mashups.

api

Applied to web services

Web service APIs that adhere to the REST architectural constraints are called RESTful APIs. HTTP-based RESTful APIs are defined with these aspects:

  • base URI, such as http://example.com/resources/
  • an Internet media type for the data. This is often JSON but can be any other valid Internet media type (e.g., XML, Atom, microformats, images, etc.)
  • standard HTTP methods (e.g., GET, PUT, POST, or DELETE)
  • hypertext links to reference state
  • hypertext links to reference-related resources

The following table shows the HTTP methods that are typically used to implement a RESTful API:

RESTful API HTTP methods
Resource GET PUT POST DELETE
Collection URI, such as http://api.example.com/resources/ List the URIs and perhaps other details of the collection’s members. Replace the entire collection with another collection. Create a new entry in the collection. The new entry’s URI is assigned automatically and is usually returned by the operation. Delete the entire collection.
Element URI, such as http://api.example.com/resources/item17 Retrieve a representation of the addressed member of the collection, expressed in an appropriate Internet media type. Replace the addressed member of the collection, or if it does not exist, create it. Not generally used. Treat the addressed member as a collection in its own right and create a new entry in it. Delete the addressed member of the collection.

The PUT and DELETE methods are referred to as idempotent, meaning that the operation will produce the same result no matter how many times it is repeated. The GET method is a safe method (or nullipotent), meaning that calling it produces no side-effects. In other words, retrieving or accessing a record does not change it.

Unlike SOAP-based web services, there is no “official” standard for RESTful web APIs. This is because REST is an architectural style, while SOAP is a protocol. Even though REST is not a standard per se, most RESTful implementations make use of standards such as HTTP, URI, JSON, and XML.

Website:
Build My Site

Integrating Firebase Into Our Application

Integrating Firebase into our application from the Course AngularJS: Adding Registration to Your Application.

Firebase

Authentication is a fundamental part of any web application, but it can be notoriously difficult to implement. In this short course, you’ll create a simple registration system that allows users to log in and out of your applications. By taking advantage of Google’s Firebase authentication service, you can manage registrations easily and securely. In the process, you’ll explore working with the AngularJS application structure (including routes and controllers), storing user information into the Firebase NoSQL database, and creating services to manage registration information throughout different controllers. This will help you create a great registration template that you can use as a starting point in a variety of web applications.

Topics include:

  • Adding a basic MVC structure
  • Using routes
  • Processing form input
  • Integrating Firebase
  • Storing registration information in the database
  • Logging users in and out of an app

Realtime Database

Firebase provides a realtime database and backend as a service. The service provides application developers an API that allows application data to be synchronized across clients and stored on Firebase’s cloud. The company provides client libraries that enable integration with Android, iOS, JavaScript, Java, Objective-C and Node.js applications. The database is also accessible through a REST API and bindings for several JavaScript frameworks such as AngularJS, React, Ember.js and Backbone.js. The REST API uses the Server-Sent Events protocol, which is an API for creating HTTP connections for receiving push notifications from a server. Developers using the realtime database can secure their data by using the company’s server-side-enforced security rules.

Web API

A web API is a subset of an application programming interface (API). It is used for exchanging information with a website, either by receiving or by sending data. A web API typically consists of multiple publicly exposed endpoints that accept HTTP requests and respond with the requested data, typically in the form of JavaScript Object Notation (JSON) or Extensible Markup Language (XML).

Firebase

Server-side

A server-side web API is a programmatic interface to a defined request-response message system, typically expressed in JSON or XML, which is exposed via the web—most commonly by means of an HTTP-based web server. Mashups are web applications which combine the use of multiple such web APIs. Webhooks are server-side web APIs that take as input a URI that is designed to be used like a remote named pipe or a type of callback such that the server acts as a client to deference the provided URI and trigger an event on another server which handles this event thus providing a type of peer-to-peer IPC.

Client-side

A client-side web API is a programmatic interface to extend functionality within a web browser or other HTTP client. Originally these were most commonly in the form of native plug-in architectures however most newer ones target standardized JavaScript bindings.

The Mozilla Foundation created their WebAPI specification which is designed to help replace native mobile applications with HTML5 applications.

Google created their Native Client architecture which is designed to help replace insecure native plug-ins with secure native sandboxed extensions and applications. They have also made this portable by employing a modified LLVM AOT compiler.

See More Resources:

Free eBook: AngularJS Programming Cookbook
Responsive Web Design with AngularJS
Firechat – Open-source real-time chat, built on Firebase
Firepad – Open source collaborative code and text editing

Website:
Build My Site

Creating and Compiling a Hello World Application with Go

Creating and compiling a hello world application provides you with in-depth training on Developer. Taught by David Gassner as part of the Up and Running with Go developer series.

What is Go? Go is a next-generation, open-source programming language created by Google for building systems, web, and other applications. This course is designed to help developers get started with Go, covering its core language elements and syntax. David Gassner introduces tools and skills used in a Go workflow—including Go Playground, an online tool that takes Go development off the desktop. He also covers basic programming tasks: managing values, using math operators, storing values as complex types, and managing program flow. Plus, learn how to structure Go code for maximum readability and performance, read and write files, and make simple web requests.

Topics include:

  • Installing Go tools
  • Creating and compiling a Go workspace
  • Exploring variables, constants, and types
  • Storing ordered and unordered values
  • Grouping related values in structs
  • Programming conditional logic and loops
  • Defining and calling functions
  • Handling errors
  • Working with files
  • Creating a simple HTTP server

Language Tools in Go

Go includes the same sort of debugging, testing, and code-vetting tools as many language distributions. The Go distribution includes, among other tools,

Go

  • go build, which builds Go binaries using only information in the source files themselves, no separate makefiles
  • go test, for unit testing and microbenchmarks
  • go fmt, for formatting code
  • go get, for retrieving and installing remote packages
  • go vet, a static analyzer looking for potential errors in code
  • go run, a shortcut for building and executing code
  • godoc, for displaying documentation or serving it via HTTP
  • gorename, for renaming variables, functions, and so on in a type-safe way
  • go generate, a standard way to invoke code generators

Here is a Hello world program in Go:

package main

import "fmt"

func main() {
fmt.Println("Hello, World")
}

Run or edit this example online.

It also includes profiling and debugging support, runtime instrumentation (to, for example, track garbage collection pauses), and a race condition tester.

Conventions and Code Style

The Go authors and community put substantial effort into molding the style and design of Go programs:

  • Indentation, spacing, and other surface-level details of code are automatically standardized by the go fmt tool. golint does additional style checks automatically.
  • Tools and libraries distributed with Go suggest standard approaches to things like API documentation (godoc), testing (go test), building (go build), package management (go get), and so on.
  • Syntax rules require things that are optional in other languages, for example by banning cyclic dependencies, unused variables or imports, and implicit type conversions.
  • The omission of certain features (for example, functional-programming shortcuts like map and C++-style try/finally blocks) tends to encourage a particular explicit, concrete, and imperative programming style.
  • Core developers write extensively about Go idioms, style, and philosophy, in the Effective Go document and code review comments reference, presentations, blog posts, and public mailing list messages.

Website:
Build My Site

Creating Global Properties and Constants

Android, Windows, and iOS support are all required for a successful app launch. This course, revised for 2015, is one in a series that will demonstrate the similarities and differences between the three platforms via the development of a complete note-taking app. This installment uses Xcode and Apple’s Swift programming language to get the job done. Author Todd Perkins shows you how to set up your development environment, create a new app, and customize the app to support a split-screen view.

Building a Note-Taking App for Android and Building a Note-Taking App for Windows Phone 8 and Windows Store use the same assets. Compare and contrast the steps and discover the similarities and differences between the three platforms. See more: Building a Note-Taking App for iOS 9 with Swift.

Swift Programming Language

Swift is a multi-paradigm, compiled programming language created by Apple Inc. for iOS, OS X, and watchOS development. Swift is designed to work with Apple’s Cocoa and Cocoa Touch frameworks and the large body of existing Objective-C code written for Apple products. Swift is intended to be more resilient to erroneous code (“safer”) than Objective-C, and also more concise. It is built with the LLVM compiler framework included in Xcode 6, and uses the Objective-C runtime, allowing C, Objective-C, C++ and Swift code to run within a single program.

global
Overview of the various programming paradigms according to Peter Van Roy

Swift was introduced at Apple’s 2014 Worldwide Developers Conference (WWDC), It underwent an upgrade to version 1.2 during 2014, and a more major upgrade to Swift 2 at WWDC 2015. Initially a proprietary language, it was announced that Swift 2 would become open source later that year, supporting iOS, OS X, and Linux.

Types, variables and scoping

Under the Cocoa and Cocoa Touch environments, many common classes were part of the Foundation Kit library. This included the NSString string library (using Unicode), the NSArray and NSDictionary collection classes, and others. Objective-C provided various bits of syntactic sugar to allow some of these objects to be created on-the-fly within the language, but once created the objects were manipulated with object calls. For instance, concatenating two NSStrings required method calls similar to this:

NSString *str = @"hello,";
str = [str stringByAppendingString:@" world"];

In Swift, many of these basic types have been promoted to the language’s core, and can be manipulated directly. For instance, strings are invisibly bridged to NSString (when Foundation is imported) and can now be concatenated with the + operator, allowing greatly simplified syntax; the previous example becoming:

var str = "hello,"
str += " world"

Though omitted in the early betas, Swift supports three access control levels for symbols: public, internal, and private. Unlike many object-oriented languages, these access controls ignore inheritance hierarchies: “private” indicates that a symbol is accessible only in the containing source file, “internal” indicates it is accessible within the containing module, and “public” indicates it is accessible from any module. The decision to omit the traditional “protected” scope met with some controversy.

See more resources:

Error-Handling in Swift-Language
Protocol-oriented Programming in Swift – Apple WWDC 2015
Programming Paradigms for Dummies: What Every Programmer Should Know

Website:
Build My Site

Understanding Syntactically Awesome Stylesheets (Sass)

Learn the fundamentals of Syntactically Awesome Stylesheets (Sass), a modern web development language that helps you write CSS better, faster, and with more advanced features. Ray Villalobos shows you the best way to install Sass and work with its main features: variables, nesting, partials, and mixins. Plus, learn how to use SassScript to create complex functions from Sass lists and control statements. See more: Sass Essential Training.

Topics include:

  • Working with variables
  • Nesting styles
  • Creating mixins
  • Conditional statements and loops in SassScript
  • Extending your mixins
  • Working with lists and maps

What Syntactically Awesome Stylesheets (Sass) Is

Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called “the indented syntax”, uses a syntax similar to Haml. It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, “SCSS”, uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss respectively.

CSS3 consists of a series of selectors and pseudo-selectors that group rules that apply to them. Sass (in the larger context of both syntaxes) extends CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that are not available to CSS3 itself. When SassScript is interpreted, it creates blocks of CSS rules for various selectors as defined by the Sass file. The Sass interpreter translates SassScript into CSS. Alternately, Sass can monitor the .sass or .scss file and translate it to an output .css file whenever the .sass or .scss file is saved. Sass is simply syntactic sugar for CSS.

stylesheets

The official implementation of Sass is open-source and coded in Ruby; however, other implementations exist, including PHP, and a high-performance implementation in C called libSass. There’s also a Java implementation called JSass. Additionally, Vaadin has a Java implementation of Sass. The indented syntax is a metalanguage. SCSS is a nested metalanguage, as valid CSS is valid SCSS with the same semantics. Sass supports integration with the Firefox extension Firebug.

Mixins

CSS does not support mixins. Any repeated code must be repeated in each location. A mixin is a section of code that contains any valid Sass code. Whenever a mixin is called, the result of translating the mixin is inserted at the calling location. Mixins allow for efficient and clean code repetitions, as well as easy alteration of code.

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

#data {
  @include table-base;
}

Would compile to:

#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

See more resources:

Sass Basics
Module: Sass::Script::Functions
Getting started with SASS

Website:
Build My Site