Tutorial by Examples: comp

break out of incomplete expression

When you have entered something into IEx which expects a completion, such as a multiline string, IEx will change the prompt to indicate that it is waiting for you finish by changing the prompt to have an ellipsis (...) rather than iex. If you find that IEx is waiting for you to finish an expression...

Elixir Language • IEx Console Tips & Tricks

Create React Component

Let's explore the syntax differences by comparing two code examples. React.createClass (deprecated) Here we have a const with a React class assigned, with the render function following on to complete a typical base component definition. import React from 'react'; const MyComponent = React.crea...

React • React.createClass vs extends React.Component

Composition operators

Two useful higher-order functions are the binary application (@@) and reverse-application or "pipe" (|>) operators. Although since 4.01 they're available as primitives, it might still be instructive to define them here: let (|>) x f = f x let (@@) f x = f x Consider the problem ...

OCaml • Higher Order Functions

Custom Listview comprises of rows that are designed as per the users needs.

For the layout above your customrow.axml file is as shown below <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_heigh...

Xamarin.Android • Custom ListView

Basic webpage using bootstrap components

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">...

twitter-bootstrap • Getting started with twitter-bootstrap

Adding more than one google auto complete activity.

public static final int PLACE_AUTOCOMPLETE_FROM_PLACE_REQUEST_CODE=1; public static final int PLACE_AUTOCOMPLETE_TO_PLACE_REQUEST_CODE=2; fromPlaceEdit.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { ...

Android • Android Places API

Components & Page Objects

Page Objects are similar to Custom Commands; except they are collections of custom commands that are associated with a specific UI component. This works extremely well with modern component based design, such as in React. module.exports = { url: 'http://localhost:3000/login', commands: [{ ...

meteor • Acceptance Testing (with Nightwatch)

Complete example

Suppose we have container "CustomersContainer" which connects a "Customers" dumb component to the Redux store. In index.js: import { Component }, React from 'react'; import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { createStore } from 'redu...

react-redux • Getting started with react-redux

installing via composer (github)

1 cd my/project/dir 2 git clone git://github.com/zendframework/ZendSkeletonApplication.git 3 cd ZendSkeletonApplication 4 php composer.phar self-update 5 php composer.phar install

zend-framework2 • Installation

Component states - Dynamic user-interface

Suppose we want to have the following behaviour - We have a heading (say h3 element) and on clicking it, we want it to become an input box so that we can modify heading name. React makes this highly simple and intuitive using component states and if else statements. (Code explanation below) // I ha...

React • Components

Docker-compose

Networks can be specified in a compose file (v2). By default all the containers are in a shared network. Start with this file: example/docker-compose.yml: version: '2' services: keys: image: consul command: agent -server -client=0.0.0.0 -bootstrap test: image: alpine tty...

Docker • Connecting Containers

Detecting the type of Children components

Sometimes it's really useful to know the type of child component when iterating through them. In order to iterate through the children components you can use React Children.map util function: React.Children.map(this.props.children, (child) => { if (child.type === MyComponentType) { ......

React • Props in React

Parent to Child Components

That the easiest case actually, very natural in the React world and the chances are - you are already using it. You can pass props down to child components. In this example message is the prop that we pass down to the child component, the name message is chosen arbitrarily, you can name it anything...

React • Communication Between Components

Strip leading components

To strip any number of leading components, use the --strip-components option: --strip-components=NUMBER strip NUMBER leading components from file names on extraction For example to strip the leading folder, use: tar -xf --strip-components=1 archive-name.tar

GNU/Linux • File Compression with 'tar' command

The complete code

import pygame pygame.init() WIDTH = 300 HEIGHT = 200 SCREEN = pygame.display.set_mode((WIDTH, HEIGHT)) pygame.display.set_caption('My Game') WHITE = (255, 255, 255) BLACK = (0, 0, 0) RED = (255, 0, 0) GREEN = (0, 255, 0) BLUE = (0, 0, 255) YELLOW = (255, 255, 255) SCREEN.fill(R...

pygame • Creating a simple pygame window

The example of Primefaces panelGrid component in its Showcase.

The showcase of Primefaces components you can find here and documentation is here Frontend needs to be saved as a XHTML file. This file can contain JSF, JSTL, JSP, HTML, CSS, jQuery, javaScript and its framework and more front-end technologies. Please, do not mix JSF and JSP technologies together....

primefaces • How to use Primefaces showcase

1. Install Angular 2 dependencies with compiler

NOTE: for best results, make sure your project was created using the Angular-CLI. npm install angular/{core,common,compiler,platform-browser,platform-browser-dynamic,http,router,forms,compiler-cli,tsc-wrapped,platform-server} You don't have to do this step if you project already has angular 2 an...

Angular 2 • Ahead-of-time (AOT) compilation with Angular 2

2. Add `angularCompilerOptions` to your `tsconfig.json` file

... "angularCompilerOptions": { "genDir": "./ngfactory" } ... This is the output folder of the compiler.

Angular 2 • Ahead-of-time (AOT) compilation with Angular 2

3. Run ngc, the angular compiler

from the root of your project ./node_modules/.bin/ngc -p src where src is where all your angular 2 code lives. This will generate a folder called ngfactory where all your compiled code will live. "node_modules/.bin/ngc" -p src for windows

Angular 2 • Ahead-of-time (AOT) compilation with Angular 2

Child to Parent Components

Sending data back to the parent, to do this we simply pass a function as a prop from the parent component to the child component, and the child component calls that function. In this example, we will change the Parent state by passing a function to the Child component and invoking that function ins...

React • Communication Between Components