text:
# vets.gov - beta [![Build Status](https://dev.vets.gov/jenkins/buildStatus/icon?job=department-of-veterans-affairs/vets-website/master)](http://jenkins.vetsgov-internal/job/department-of-veterans-affairs/job/vets-website/job/master/)

## What is this?

This is the combined frontend repository for www.vets.gov. With this repository, it is possible to
build all of the client-side (ie, anything that gets downloaded to the browser) code for
www.vets.gov with the exception of some high sensitivity endpoints that require server side
interaction such as login.

As it is client side there are no secrets in this repository since, well, public secrets aren't
very secret.

## I want to...

| I want to... | Then you should... |
| ------------ | ------------------ |
| clone the site | `git clone https://github.com/department-of-veterans-affairs/vets-website.git` followed by `cd vets-website`, `git submodule init; git submodule update`, `npm install`. Run `npm install` anytime `package.json` changes. |
| deploy the site | merge to master for `dev.vets.gov` and `staging.vets.gov`. Merge to production for `www.vets.gov`. Travis will do the deploy on the post merge build. Submit a trivial change to force a re-deploy. |
| update static content that is already on the site. | Find the corresponding file in `content/pages`. Make your edit. Send a PR. |
| add new static content to the site. | Create new files at the right location in `content/pages`. Send a PR. |
| build the site with dev features enabled. | `npm run build` |
| build the production site (dev features disabled). | `npm run build -- --buildtype production` Note the extra `--` is required otherwise npm eats the buildtype argument instead of passing it on. |
| build the site with optimizaitons (minification, chunking etc) on. | Set `NODE_ENV=production` before running build. |
| run the site for local development with automatic rebuilding of Javascript and sass | `npm run watch` then visit `http://localhost:3001/`. You may also set `buildtype` and `NODE_ENV` though setting `NODE_ENV` to production will make incremental builds slow. |
| run the site for local development with automatic rebuilding of code and styles for specific apps | `npm run watch -- --entry disability-benefits,no-react`. Valid application names are in `config/webpack.config.js` |
| run the site for local development with automatic rebuilding of code and styles for static content | `npm run watch:static`. This is equivalent to running `npm run watch -- --entry no-react` |
| run the site so that devices on your local network can access it  | `npm run watch -- --host <IP_ADDRESS>`. Note that we use CORS to limit what hosts can access different APIs, so accessing with a `192.168.x.x` address may run into problems |
| run all tests | `npm run test` |
| run only unit tests | `npm run test:unit` |
| run only e2e tests | `npm run test:e2e`.  Note, on a fresh checkout, run `npm run selenium:bootstrap` to install the selenium server into `node_modules`. This only needs to be done once per install. |
| run all linters | `npm run lint` |
| run only javascript linter | `npm run lint:js` |
| run only sass linter | `npm run lint:sass` |
| run automated accessibility tests | `npm run build && npm run test:accessibility` |
| test for broken links | Build the site. Broken Link Checking is done via a Metalsmith plugin during build. Note that it only runs on *build* not watch. |
| add new npm modules | `npm install -D my-module` followed by `npm shrinkwrap --dev`. There are no non-dev modules here. |
| get the latest json schema | Update vets-json-schema in package.json with the latest commit hash, then run `npm update vets-json-schema && npm shrinkwrap --dev` |

## Directory structure

| Directory | Description |
| ----------| ------------|
| assets | Static assets such as images or fonts. These may get some optimization-style processing done on them, but in general files here are expected to show up directly in the output.  |
| build | Output of the site build. A subdirectory is generated per `buildtype` so `--buildtype=development` appears in `build/development`. This directory is suitable for synchronizing into S3 for deployment |
| config | Contains config files for the site. |
| content/pages | Static content for the site. If a file is added here, it will appear on the website by default. |
| content/layouts | Collection of layouts that can be used by content/pages. Must be html. No Markdown. |
| content/includes | Collection of HTML fragments shared between layouts. Must be html. No Markdown. |
| logs | Directory for log output from build tools. Currently only used by nightwatch and selenium for end-to-end testing. |
| node\_modules | install location of npm modules. Managed by npm. |
| old | Directories from the original Jekyll site that still need to be examined for possibly useful content before being deleted. |
| script | Scripts for building the repostiory. The most commonly used script is `build.js` which runs Metalsmith |
| src | Any source files that require compilation. This is all our Javascript and Sass currently. |
| test | Tests for files inside `src`.  The directory structure of `test` should mirror that of `src`. |

### Where are the Javascript and Sass `vendor` or `libs` directories?

There are none!!

All third-party styles and javascript are handled via npm using package.json. This allows
strong versioning of third-party libraries and makes it impossible for developers to
accidentally modify copies of upstream.

## Toolchain
The site is built using 2 tools: [Metalsmith](http://www.metalsmith.io/) and
[Webpack](https://webpack.github.io/) and is fully node.js stack.

Metalsmith is used as the top-level build coordinator -- it is effectively a generic
"if file changes here, run this" system -- as well as the static content genertaor. When
Metalsmith sees Javascript, it is delegated to Webpack.  Sass files are "require"ed inside
the Javascript files for the site and processed by Webpack.

### Requirements

The requirements for running this application are Node.js 4.4.7 and npm 3.8.9.

Node.js's version is managed using nvm. Please follow the installation instructions on `nvm`
to ensure you are using the same version of node as others.
You should use Node Version Manager (nvm) to manage the versions of node.js on your local machine.
To install please visit: https://github.com/creationix/nvm
_If you are on a mac and use [homebrew](http://brew.sh/), you can install nvm by typing: brew update && brew install nvm_

Once you have nvm installed you should now install node.js version 4.4.7 by running:

```bash
nvm install
```

Once you have node.js version 4.4.4 installed install npm version 3.8.9 by running:

```bash
npm i -g<EMAIL_ADDRESS>```
### Verify your local requirements are set

```bash
node --version // 4.4.7
npm --version  // 3.8.9
```

## How it all works
### Build
The build is abstracted by the command `npm run build` which really just exectues
`scripts/build.js` --  a simple Javscript program that configures Metalscript and Webpack
based on things in `config/`, commandline flags, and the `NODE_ENV` environment variable.

*WARNING: `--buildtype` and `NODE_ENV` are unlrelated!*

`--buildtype` changes what constants are defined which enables/disables features from the code.

`NODE_ENV` changes the optimizations applies such as disabling React PropType checks and
enabling minification + javascript chunking.

(Note: The `NODE_ENV` env variable dependency is a questionable design choice. It should

#### Metalsmith -- Static content builds and top-level file watching.
The `build.js` script relies on [Metalsmith's Javscript
API](https://github.com/metalsmith/metalsmith#api) as the main build script. Metalscript,
at the core, is just a file watcher that runs a set of files through chain of plugins.
Using the Javascript API for Metalscript allows removal of tools like Grunt while also
enabling faster incremental builds because Metalsmith and Webpack can stay in memory.

Metalsmith's behavior is entirely defined by the plugins added, their configuration, and
their ordering.

The primary responsibility of Metalsmith is to process all the pages in `content/` and
static assets under `assets/` to produce output in `build/`.

With the exception of files under `build/${BUILDTYPE}/generated/` that are handled by webpack,
everything else is directly generated by metalsmith-plugins.

Refer to the (thorough) comments inside `build.js` for specifics.

#### Webpack -- Javascript and Sass processing. Outputs `build/generated`
Metalsmith invokes Webpack or [Webpack Dev
Server](https://webpack.github.io/docs/webpack-dev-server.html) depending of it is in
build or watch mode.

Webpack's configuration is stored in `config/webpack.config.js` and declares a set of
loaders which are Webpack's version of plugins. The loaders are used to compile ES2015
to ES5 via Babel, and to process the sass into CSS.

Webpack is configured to handle multiple different entrypoints (see `entry`
in `webpack.config.js`). In general, there should be one entrypoint
`non-react.entry.js` used by most of the static content pages. Each react app
should have their own entrypoint.

Sass and styles are loaded *via Javascript*. Each entrypoint `require()` an appropriate
top-level sass file which the imports the rest of the css dependency tree as needed.
Webpack then generates a separate css bundle for each of these entrypoints allowing
the site to have app-specific css.

### Watch mode
File watching and incremental building is important for developer efficiency, but it's
more complicated because, to be fast, each tool needs to keep its state between runs.
This is actually the driving reason NOT to use grunt or gulp because, fundametnally,
both those task runners would expect to restart either metalsmith or webpack on
file changes.

In our setup, we use the `metalsmith-watch` plugin as well as the
`metalsmith-webpack-dev-server` plugin to do file watching based on the separation of
duties listed earlier. The Webpack Dev Server also serves as the actual web server
endpoint that handles HTTP requests.

When a file chagnes in `content/\*` or `asset/\*`, whether and how it gets rebuilt
is dependent on the `metalsmith-watch` configuration.

If a 404 is incorrectly handled, that's a configuration problem with Webpack Dev Server.

Similarly, everything in `src/\*` is dependent on the webpack configuration.

Quirks:
  * metalsmith-watch cannot do broken link detection during incrementals.
  * Webpack Dev Server uses an in-memory filesystem so nothing shows up in `build/${}/generated`
  * Visit `http://localhost:3001/webpack-dev-server` (no trailing slash!) to see the contents of generated files.

Overall, this runs pretty well.

In a future TODO, hooking ESlint and Sass lint into metalsmith or webpack dev
server would allow them to execute during incremental builds as well.

### Unit Test -- Mocha
All unittests re under `test/\*` and are named with the suffix `.unit.spec.js`.

Unittests are done via `mocha` with the `chai` assertion library run directly via
the mocha test runner without going through karma or PhantomJS. This means they
run very fast.

Unfortunately, it also means there is no true `window` or `document` provided which
breaks `ReactTestUtils`'s simulate calls. To rememdy, a fake `window` and
`document` are provided using `jsdom` and bootstrapped in `test/util/mocha-setup.js`
which is required via `test/mocha.opts`.

With this, most everything (except code that accesses HTML5 `dataset`) is testable
without the overhead of starting a browser.

The `mocha-setup.js` file can be thought of as the init script for mocha tests.

Note that because mocha is running the test files directly, it needs to use
`babel-register` (see `compilers` option in `mocha.opts`) to execute babel on
the unittests. This is why babel configuration is kept in `.babelrc`, so it can
be shared between build and test.

### End-to-end Test -- nightwatch

All end-to-end tests are under `test/\*` and are named with the suffix `.e2e.spec.js`.

Nightwatch is being used for browser-based testing. On the default configuration,
PhantomJS is used as the default browser for faster testing and to prevent
nightwatch from interfering with the developer's UI.

Nightwatch is a wrapper on Selenium. It is configured in `config/nightwatch.js`.
To run a nightwatch test, 3 things need to execute:

  1. A webserver with our site
  2. The selenium server (which will spawn browsers like PhanomJS)
  3. The nightwatch client that talks to the Selenium server

End-to-end tests do not need to be restricted exclusively to selenium style tests
(eg, navigate to this url, click this button, etc). At its core, it just a system
for starting up and controlling web browser.  For mocha tests that we want to
run on real browser, either because the tests is excercising browser quriks or because
the test requries features that jsdom does not provide, putting them into a
`e2e.spec.js` file is completely valid and good.

TODO(awong): Figure out sauce labs integrations. Not all e2e tests should always be
run on all browsers. That's wasteful. How do we determine what should be run on
multiple browsers as opposed to on PhantomJS in Travis?

### Automated Accessibility Testing -- aXe

The automated accessibility tests are contained within the `test/accessibility`
directory. All URLs from the generated sitemap are scanned with aXe
rules for 508 compliance.

Automated accessibility tests are run by Travis on PRs for the production build
type.

### Continuous Integration
Continuous integration and deployment is done via
[Travis CI](travis-ci.org/department-of-veterans-affairs/vets-website). All of the configuration
is stored in `.travis.yml`.

In the interest of preventing a backlog on Travis, some optimizations were
chosen for the CI pipeline. These require utilizing the pull request workflow
we've established, and not directly pushing to master or production outside of
a pull request.

Builds are triggered for PRs for all build types. The special branch name
`content/wip/.*`, will fail by default and not run any builds. This is to allow
rapid iteration on WIP content team work before builds are tested.

Tests are run over the production buildtype for all PRs. Tests should not
be tied to the build type. Instead, define a feature flag variable and
test both the enabled and disabled states. While a build type will either enable
or disable the feature in the UI, the tests will still run the feature's code
path despite the environment. This ensures that your component will function in
all builds regardless of the build type. The important distinction is that your
feature is still active within the code base, but the UI is either enabled or
disabled by the feature flag.

To enable or disable the feature in a specific build type, toggle the feature
in `test/util/mocha-setup.js` and `config/webpack.config.js`. See
`SampleFeature` and the associated `__SAMPLE_FEATURE__` env variables for an
example implementation.

Please see the `/script/travis-build.sh` file for more documentation and an
overview of the CI configuration.

### Deploy
Because this is a static site, deployment is simply synchronizing the generated artifacts
with a remote s3 bucket.  Travis handles the synchronization by using the
[s3-cli](https://www.npmjs.com/package/s3-cli) commandline tool.

Commits to `master` pushes `buildtype=development` to `dev.vets.gov` and
`buildtype=staging` to `staging.vets.gov`.

Commits to `production` pushes `buildtype=production` to `www.vets.gov`.

AWS access is granted to travis via the encrypted envrionment variables
`AWS_ACCESS_KEY` and `AWS_SECRET_KEY`. The same access key is reused for all pushed because
there is no trust boundary between the different deploys in Travis CI and in the source
repository.

For exact details, look in the deployment stanza of `.travis.yml`.

## Design Rationale and History.

*tl;dr:* React apps became the primary development churn. Webpack is the most natural tool
which forced Node.js into the system. The site was migrated to Metalsmith from Jekyll for
static content creationg to allow keeping things in one langauge. A single repository was
chosen to facilitate easier code sharing.

The MVP of www.vets.gov was a 100% static content site built using Jekyll and deployed on to
Github Pages. The historical repository layout was constrained by the needs of Github Pages
which required all content to be at the root of the directory structure. Also, Jekyll implied
a Ruby stack. At the time, it was assumed any rich behavior would be written with a standard
monolithic Rails stack where render was handled server side.

With the launch of the Healthcare App, the team pivoted to use React for client side tooling.
Because of the Javascript heavy nature of this development, the Node.js ecosystem centered
around Webpack as the compiler for Javascript became much more natural.

Now we had two languages in the frontend with code separated into multiple repositories.
This started to become a versioning headache. For example, sharing stylesheets between the sites
meant having to package the Sass files twice, once in a Jekyll friendly manner and once in
a Webpack friendly manner. Furthermore, multiple languages meant multiple builds and multiple
pushes making it easy to desynchronize parts of the site.

A decision was made around August 2016 to create a single frontend build for easier code sharing
and more consistent deploys. Metalsmith was chosen as a replacement Jekyll because it was
written in Node.js and seemed reasonably well supported.

Initially the site used grunt as the task runner, but during the migration, it became clear
that Metalsmith itself was enough of a dependency manager and task marshaller to not require
grunt. In fact, grunt caused more problems with file watching.

And thus we ended up with one repository for content and Javascript code where Metalsmith is
the top-level task runner that builds all the static pages from `content/*` and delgates to
Webpack for Javscript and Sass compilation.

### Why Metalsmith?

Metalsmith looked well supported and very flexible. There were no major technical drivers here.

### Why Webpack?

Webpack seems to have become the defacto build toolkit for Javascript and Sass. Most current
documentation around React is based on a Webpack toolchain.

## More documentation

TODO: Verify if these are still relevant.

- [Why Is My Build Breaking?](docs/WhyIsMyBuildBreaking.md)
- [How Breadcrumbs Work](docs/HowBreadCrumbsWork.md)
- [How URLs are Created](docs/HowURLsAreCreated.md)
- [How Search Works](docs/HowSearchWorks.md)

repository: crwallace/vets-website

repo_name: crwallace/vets-website


text:
# Introduction to Style

This lab guides you through steps to start experimenting with style in your webpages.

This lab sheet provides the steps, but doesn't tell you how to do them.

As you work your way through the tasks, use the internet, each other, and your tutor where you get stuck.

Refresh your page in Chrome regularly to make sure it's all working as you go along.

### 1. Create a folder for this task

### 2. Open the folder in Atom

### 3. In Atom, create a new HTML file inside that folder
Don't forget the file extension!

### 4. Start off with the standard boilerplate html

### 5. Create a folder for your css files

### 6. Link your css file into your html file
Ok, this is perhaps starting to get a little tricky. You need to use a `<link>` element here, placed in the `<head>` section of your html page.

### 7. Insert a paragraph of text in to the body of your webpage

### 8. Change the background colour of your page
This is it, your first bit of style!!!

### 9. Change the font used.

### 10. Open up the Inspector (also called Developer Tools) in Chrome.
In the elements tab, select the paragraph and notice the css rules being applied to it. You're is there, as well as all the browser defaults.

## Layout
So far you've linked in a stylesheet and made a couple of basic visual changes. Now it's time to tackle layout.

### 1. Develop your page so that you have the following layout.

![Simple page layout](https://thomcorah.github.io/dmu-multimedia/resources/simpleLayout.png)

### 2. Set the background colour of the `<section>`s
This helps you to clearly see where they are when developing your layout.

### 3. Apply padding to the `<section>`s to indent the text
It doesn't look good right up to the edge of the sections, particularly on the left and right.

### 4. Make your `<article>` half the width of the window
Text that stretches across the full width of the screen is a bit difficult to read.

### 5. Centre your `<article>` in the middle of the page
Do some searching for this, but as a hint you want to set left and right margins to auto.

### 6. Add a third `<section>` at the bottom with a `<p>` in it.
This will be our footer, so put something like a copywrite notice in here.

### 7. Change the background colour of that section to dark grey

### 8. Make the text in the paragraph smaller than the rest of the text
This is going to require that you select just this paragraph, and not the others.

### 9. Tidy it all up a bit
You probably don't actually want the those first two sections to have a background colour. Instead, maybe the `<article>` should have it. Maybe you need to change some padding or margins somewhere too?

## Where Now?
The world is your oyster. You could look through the list of css properties available on [w3Schools.com](https://www.w3schools.com/cssref/default.asp), or you could have a particular idea in mind and try to achieve it.

license: MIT

repository: thomcorah/dmu-multimedia

branch_name: refs/heads/master

extension: md

gha_language: CSS

gha_license_id: MIT

license_type: permissive

repo_name: thomcorah/dmu-multimedia


text:
# test-fixtures

A simple but flexible fixtures module for your tests.

Inspired by the [fixtures](https://www.npmjs.org/package/node-fixtures) and [config](https://www.npmjs.org/package/config) modules,
it features the following:

* Environment aware. Running the code in NODE_ENV=env will extend the fixtures with the ones in env subdirectory.
* Always read fresh fixtures. Every time you use fixtures.namedFixture, it reads them again. Simplifies tear-down.
* Simple inheritance/extension of environments.  Allows you to specify simple dependencies.
* Both JSON and JavaScript formats. Allows you to define fixtures as modules. Use as your own risk, and beware that if your modules are singletons, they will be cached by node (no more "always read fresh fixtures").

## Basic usage
To load the fixture named validUser, from test/fixtures/validUser.json:

    var Fixtures = require("test-fixtures");
    var fixtures = new Fixtures(__dirname + "/test/fixtures");

    console.log(fixtures.validUser);

Please look at the files in the [examples](examples) directory.

When used with the defaults:

    node examples/basic.js
    { email<EMAIL_ADDRESS>password: 'secret' }
    undefined

When used with qa environment:

    NODE_ENV=qa node examples/basic.js
    { email<EMAIL_ADDRESS>password: 'QA-secret' }
    { email<EMAIL_ADDRESS>password: 'supersecret' }

When using the not-so-basic example in prod environment:

    NODE_ENV=prod node examples/not_so_basic.js
    { email<EMAIL_ADDRESS>password: 'QA-secret' }
    { email<EMAIL_ADDRESS>password: 'supersecret' }

## Options
You can pass the following options as a second argument in the constructor:

* envVar: Defaults to NODE_ENV.  Extend fixtures in base directory with fixtures in process.env[envVar] subdirectory.
* dependencies: Defaults to {}.  Allows you to define custom environment dependencies.  Useful if you have similar environments where one extends the other (for example staging is based on production), then you can use:

    var fixtures = new Fixtures(basedir, {dependencies: staging: "production"});

And only override the required production fixtures in your staging subdirectory.

## License

The MIT License (MIT)

Copyright (c) <year> <copyright holders>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

 IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.


text:
# Rails I18nterface

[![Gem Version](http://img.shields.io/gem/v/rails-i18nterface.svg)](https://rubygems.org/gems/rails-i18nterface)
[![Downloads](http://img.shields.io/gem/dt/rails-i18nterface.svg)](https://rubygems.org/gems/rails-i18nterface)
[![Build Status](http://img.shields.io/travis/mose/rails-i18nterface.svg)](http://travis-ci.org/mose/rails-i18nterface)
[![Code Coverage](http://img.shields.io/coveralls/mose/rails-i18nterface.svg)](https://coveralls.io/r/mose/rails-i18nterface)

![rails-i18nterface](http://mose.fr/rails-i18nterface.png)

## Usage

In Gemfile

```ruby
gem 'rails-i18nterface'
```
In routes.rb

```ruby
mount RailsI18nterface::Engine => "/translate", :as => "translate_engine"
```

### Protect access

You may want to protect the translation engine to admin and create a constraint
in your routes (note that you don't want to mount it when you launch tests):
```ruby
constraints AdminConstraint.new do
  unless Rails.env.test?
    mount RailsI18nterface::Engine => "/translate", :as => "translate_engine"
  end
end
# this second route will be then used if the user is not an admin
get 'translate', to: redirect do |p, req|
  req.flash['error'] = I18n.t('errors.permission_denied')
  "/signin"
end
```

Then create a `config/initializers/admin_constraint.rb` containing:
```ruby
class AdminConstraint
  def matches?(request)
    current_user && current_user.is_admin?
  end
end
```
(this example is for devise users, but you can adjust it to return true or false
according to your own context).

### Configuration

You can configure `from_locales` and `to_locales` explicitly in your
`environments/development.rb` by adding
```ruby
config.from_locales = [:en]
config.to_locales = [:ja, :es, :fr]
```
Where `[:en]` and `[:ja, :es, :fr]` could be replaced by locale list of your choice.

## Todo

* <s>fix the code smell reported by code climate</s> (done)
  * <s>extract code from the controller to a lib</s> (done)
  * <s>refactor the libs in a cleaner way</s> (done)
  * <s>apply rubocop and follow his law</s> (done)
* <s>remove those damn global variables</s> (done)
* <s>extend testing to refactored libs</s> (done)
* add a way in the config to ignore some gem locales
* make the application thread-safe
* change navigation to an ajax-driven reload
* add a way to gather .one and .other and .few under same translation line (not sure actually)
* add support for other i18n backends (gettext)

## Note for upgrade 0.1.x to 0.2.x

The database is not used anymore, back to the good old way.
So you can remove the table rails_i18nterface_translations (v0.1.7)
or translations (< 0.1.7).

## Project history

This is a fork of an overhaul of a fork of a fork of rails-translate.

It was originally created by [Peter Marklund and Joakim Westerlund @ mynewsdesk](https://github.com/mynewsdesk/translate)
and later adapted to rails 3.0 by [Claudius Coenen](https://github.com/ccoenen/rails-translate).
This version is a spin-off of Claudius Coenen's version by [Larry Sprock](https://github.com/lardawge/rails-i18nterface).
It was renamed, refactored and prepared for rails 3.1 as an Engine. Over this work
[Michal Hantl](https://github.com/hakunin/rails-i18nterface) made a bunch of nice UI modifications
on his fork. Since then it was more or less abandoned.

I took over the evolution with some new features:

* testing using [combustion](https://github.com/pat/combustion) and [rspec](https://github.com/rspec/rspec)
* redesign of the layout
* navigation overhaul, splitting the name-spaces in a foldable menu
* gathering of first-level translations under a ROOT container
* gemification and release of a version 0.1.0
* (the 0.0.1 was the work from Larry Sprock but was not published as a gem)
* compatibility with rails 4 and ruby 2

Check the [Changelog](https://github.com/mose/rails-i18nterface/blob/master/changelog.md) for details about further changes.

## License

```
Copyright 2009-2011 Peter Marklund, Joakim Westerlund, Claudius Coenen
Copyright 2011-2013 Larry Sprock, Artin Boghosain, Michal Hantl
Copyright 2013-2016 Mose

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

 IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```


text:
### Codepen Example
Check out our live [codepen](http://codepen.io/MarkitOnDemand/pen/adQMBK) documentation.

##### Table of Contents
1. **Features**
2. **Markup**
  - Basic Setup
  - Element Linking
  - Reverse Logic
  - Right to Left
  - Click/Enter Vs. Mouseover/Out
  - Advanced Tooltips
3. **JavaScript**
  - Public API
  - Event Hooks

### Features
1. **Fully Keyboard Accessible.** We support a complete setup of using tabs, arrows, esc, enter, spacebar, etc. 100% friendly for keyboard users.
2. **Screen reader compatible.** We support screen readers using Aria and Role attributes dynamically with our JavaScript to help assist users in working with the selectmenu UI.
3. **Inherits all features from MkComponent.** MkComponent is the base object our Mk libaries extend from. MkComponent has build in object copying, GUID generators, a helpful Aria API, and a unique, light weight templating system for markup and formatting text. See more [here](http://codepen.io/MarkitOnDemand/post/mk-component).
4. **Multipurposed.** Use Mktooltip as simple tooltip text display or an advanced popup region full of interactivity.
5. **Flexible positioning.** You can easily modify how you want your tooltip to behave: position top to bottom, right to left, or reverse the logic completely with simple attribute values.
6. **Flexible contents.** You can literally populate a tooltip with whatever content you want: spans, forms, videos, you name it.
9. **Flexible CSS Styling.** Classname hooks for each and every element exist so it's extremely easy to apply any sort of custom styling your heart desires.

### The Markup
There are quite a few different things we can do with these tooltips but for now let's take a look at a bare bones setup.

```html
<a href="javascript: void(0);"
    role="button"
    class="mk-tooltip-trigger"
    data-title="Hello there. I'm a tooltip">Hover me</a>
```

That's really all you need to create simply little hover fellows that give additional information and context to your element. But we can also supply tooltip with completely seperate elements instead of just text.

##### Element Linking

Below is an example of what we're calling 'element linking' which essencially links a trigger and a tooltip together. You can link these elements by either nesting the tooltip as a child of the trigger OR having the trigger and the tooltip as sibling elements.

```html
<a href="javascript: void(0);" role="button" class="mk-tooltip-trigger">
  Hover me
  <span class="mk-tooltip">Hello there. I'm a tooltip</span>
</a>

<div>
  <a href="javascript: void(0);" role="button" class="mk-tooltip-trigger">
    Hover me
  </a>
  <div class="mk-tooltip">
    <h4>Hello there!</h4>
    <p>I'm a tooltip</p>
  </div>
</div>
```

##### Reverse Logic

By default tooltips will attempt to position themselves top-center of the trigger element. If real estate is scarce on the Y axis it will move to below the trigger element. If left or right real estate is scarce, it will adust it's X axis position to fit into view as much as possible. That said, it's also possible to reverse the order of this logic. For instance, we want tooltips to always be positioned bottom first before attempting to be positioned at the top of a trigger.

```html
<div>
  <a href="javascript: void(0);" role="button" class="mk-tooltip-trigger">Hover me</a>
  <div class="mk-tooltip" data-display="reverse">
    <h4>Hello there!</h4>
    <p>I'm a tooltip</p>
  </div>
</div>
```

##### Right to Left

Closely realted to the above reverse logic, we can also tell the tooltips to position themselfs left-to-right instead of top-to-bottom. They will still maintain the logic of fitting into the real estate provided and adjust themselves if necessary.

```javascript
<div>
  <a href="javascript: void(0);" role="button" class="mk-tooltip-trigger">Hover me</a>
  <div class="mk-tooltip" data-display="rtl">
    <h4>Hello there!</h4>
    <p>I'm a tooltip</p>
  </div>
</div>
```

##### Click/Enter Vs. Mouseover/Out

Who says tooltips have to be triggered by mouseover/out only? By default tooltips are opt-in to mouseover/out event handlers but this is easily changed to click/enter with a simple attribute addition.

```javascript
<div>
  <a href="javascript: void(0);" role="button" class="mk-tooltip-trigger" data-toggle="click">Click Me Instead</a>
  <div class="mk-tooltip">
    <h4>Hello there!</h4>
    <p>I'm a tooltip</p>
  </div>
</div>
```

##### Advanced Tooltips

Finally, it's worth mentioning that you can basically do anything with these things including adding your own highly dynamic content including media, forms, etc. The tooltip recognizes when we have dynamic content and switches roles around allowing for focus into the tooltip and tabbing/clicking/keyboarding through all its content.

```html
<a href="javascript: void(0);" role="button" class="mk-tooltip-trigger" data-toggle="click">Edit User Info</a>
<div class="mk-tooltip">
  <form class="form">
    <fieldset>
      <label for="name">User Name</label>
      <input class="form-control" type="text" name="name" id="name" value="" placeholder="Username" />
    </fieldset>
    <fieldset>
      <label for="password">Password</label>
      <input class="form-control" type="password" name="password" id="password" value="" placeholder="Password" />
    </fieldset>
    <button class="btn btn-primary">Submit</button>
  </form>
</div>
```

### The JavaScript
Mk Components are *not* self initializing so as the end developer, you are responsible for creating instances of this component. Don't worry, it's super easy. Let's take a look at two ways to do that.

This component actually serves as a delegate instead of having to initialize every tooltip on the page. Not only is this performance efficient but it saves a lot of hassel when adding/removing dynamic content. It also works as a 'lazy' component in that it only does what it has to when it has to - so if you have 1000 tooltips on your page and a user only interacts with one, it only does work to that one tooltip - everything else is left alone.

```javascript
  //jQuery hook
  $(function() {
    var $body = $(document.body);
        $body.mktooltip();
  });

  //Via the Mk namespace
  $(function() {
    var $body = $(document.body),
         tooltip = new $.Mk.Tooltip($body);
  });
```
##### Public API
Now lets check out the public properties and methods available to you as the end developer. First off, you can retrieve any instance of the tooltip via jQuery.data.

```javascript
  var instance = $(my-selector).data('mk-tooltip');
```
###### **show( trigger, xy )**
Show a tooltip by passing in the trigger element. You can optionally pass in an object with x and y integers if you would like to manually position the tooltip yourself.

###### **hide( trigger )**
Hide a tooltip by passing in the trigger element. If nothing is passed in, hideAll() is triggered.

###### **hideAll()**
Hide all tooltips in a given delegate region.

###### **lock( trigger )**
Prevents a tooltip from hiding when mouseout or click until it is unlocked.

###### **unlock( trigger )**
Removes a tooltip's hiding lock.

##### Event Hooks
All tooltip events are namespaced with *.mk-tooltip.* Currently, there are two possible event hooks you can use: **show** and **hide**. Let's take a look.

###### **show/hide**
Self explanitory. Events are triggered when the tooltip shows/hides.

````javascript
  $(my-selector).on('show.mk-tooltip', function(e, $trigger, $tooltip) {
    ///do something...
  })
  .on('hide.mk-tooltip', function(e, $tooltip, $trigger) {
    ///do something...
  });
```

repository: ChristinaMak/Bon-Voyage

gha_language: JavaScript

repo_name: ChristinaMak/Bon-Voyage


text:
# b3

![GitHub](https://img.shields.io/github/license/ritschmaster/b3)
[![Telegram chat](https://img.shields.io/badge/chat-%40b3__dev-%2335ADE1?logo=telegram)](https://t.me/b3_dev)
![GitHub All Releases](https://img.shields.io/github/downloads/ritschmaster/b3/total)
[![Donate with Bitcoin](https://en.cryptobadges.io/badge/micro/3DF2eTL9KSndqbuQTokWvTbUpDNQ6RuwxU)](#donations)

__b__(aeck's implementation of i) __3__ (wm for Windows)

## Using b3

### Using binary releases

1. Head over to the [Release](https://github.com/ritschmaster/b3/releases) page and download the latest binary zip file.
2. Decompress it somwhere
3. Copy the `example.config` to `bin` (See [FAQ](#faq) if you want to personalize the configuration))
4. Execute `b3.exe`

### Using source code releases

1. Head over to the [Release](https://github.com/ritschmaster/b3/releases) page and download the latest source zip file.
2. Decompress it somwhere
3. See [Compiling](#Compiling)
4. Copy the `example.config` to `bin` (See [FAQ](#faq) if you want to personalize the configuration))
5. Execute `b3.exe`

## FAQ

### What features of i3 are currently supported?

See [here](https://github.com/ritschmaster/b3/blob/master/CompatibilityList.md).

### How does b3 integrate into Windows?

* Your default Windows expierence stays the same. b3 lives within the Microsoft
  default Explorer shell and just adds functionalities you know and love of i3.
* Stuff like Alt + Tab is still avialable
* Switching between windows in the plain Windows way will be automatically
  recognized by b3 (e.g. switch to workspace of that window).
* The Windows 10 desktop are still available but useless when b3 is running.
* It is possible to rebind almost any key combination. Win + h, j, k, l is supported (for l see [here](https://github.com/ritschmaster/w32bindkeys#i-want-to-remap-the-win-key))

### What are the project's goals?

1. Be as i3 like as possible while integrating into default Windows as easily as possible.
2. Being stable is more important than having more features

### I need a default configuration

A default config file is included in the [release zip](https://github.com/ritschmaster/b3/releases). To get started right away, it is already placed as `config` in the same directory as `b3.exe`.

For more information on where the configuration file can be placed please see the included man page.

### Are there known limitations?

Yes, please see [here](https://github.com/ritschmaster/w32bindkeys#are-there-known-limitations).

## Documentation

### User

* In the unzipped release you can perform `man -l man/b3.1` to see the available command line options and where the configuration file can be placed.
* Since b3 tries to be a drop in replacement for i3 you can use [i3 User's Guide](https://i3wm.org/docs/userguide.html) also for b3. But please cross check it with the [compatibility list](https://github.com/ritschmaster/b3/blob/master/CompatibilityList.md).
* b3 releases ship a default configuration file. You can check it to see a list of most used commands.

### Developer

* Currently you have to read the source code entirely to get into b3 development. But most methods/functions have a documentation string. In the future some sort of generated documentation and/or class diagram will be added.

## Compiling

### Dependencies

* [MinGW](http://mingw.org/)
* [Collections-C](https://github.com/srdja/Collections-C)
* [w32bindkeys](https://github.com/ritschmaster/w32bindkeys)

### On Windows using Msys2

You will need a functioning MinGW environment. This sections describes the compilation using [Msys2](https://www.msys2.org/).

First install the dependencies:

    pacman -S make cmake automake autoconf mingw-w64-x86_64-gcc libtool bison flex mingw64/mingw-w64-x86_64-pcre

Then compile and install Collections-C:

    wget https://github.com/srdja/Collections-C/archive/master.zip
    unzip master.zip
    cd Collections-C-master/
    sed -i s/add_subdirectory\(test\)//g CMakeLists.txt # Testing is not needed
    mkdir build
    cd build
    cmake -DCMAKE_INSTALL_PREFIX=/usr ..

Then compile and install w32bindkeys. Please have a look at its [README](https://github.com/ritschmaster/w32bindkeys/blob/master/README.md).

Then compile b3:

    git clone https://github.com/ritschmaster/b3.git
    cd b3
    ./autogen.sh
    make

Afterwards you may install b3 - depending on your MinGW environment - by performing:

    make install

If you are unsatisfied with b3 you may uninstall it again:

    make uninstall

### On Fedora Linux (64 bit)

First install MinGW:

    sudo dnf install -y mingw64-gcc mingw64-gcc-c++ cmake automake autoconf autoconf-archive libtool bison flex mingw64-pcre

Then compile and install Collections-C:

    wget https://github.com/srdja/Collections-C/archive/master.zip
    unzip master.zip
    cd Collections-C-master/
    sed -i s/add_subdirectory\(test\)//g CMakeLists.txt # Testing is not needed
    mkdir build
    cd build
    mingw64-cmake ..
    sudo make install
    sudo cp /usr/x86_64-w64-mingw32/sys-root/mingw/lib/pkgconfig/collectionc.pc /usr/lib64/pkgconfig

Then compile and install w32bindkeys. Please have a look at its [README](https://github.com/ritschmaster/w32bindkeys/blob/master/README.md).

Then compile b3:

    git clone https://github.com/ritschmaster/b3.git
    cd b3
    export PKG_CONFIG_PATH=/usr/x86_64-w64-mingw32/lib/pkgconfig/
    ./configure --host=x86_64-w64-mingw32
    make

## Version scheme

The version scheme of w32bindkeys is as follows: x.y.z

* x is the stage:
  * < 0 is an unstable release
  * \> 0 is a stable release
* y incidates changes to the API or the configuration file functionalities.
* z indicates additions without breaking any compatibility.

 Thanks for any amount!

My Bitcoin address: 3DF2eTL9KSndqbuQTokWvTbUpDNQ6RuwxU

gha_language: C


text:
# OpenGL 3.3 core mode application

**Used libraries**:
1. [freeglut](http://freeglut.sourceforge.net/) - open-source alternative to the OpenGL Utility Toolkit (GLUT) library
2. [GLM](https://glm.g-truc.net/0.9.9/index.html) - C++ mathematics library for graphics software based on the OpenGL Shading Language (GLSL) specifications
3. [GLEW](http://glew.sourceforge.net/) - The OpenGL Extension Wrangler Library (GLEW) is a cross-platform open-source C/C++ extension loading library.
4. [RapidJson](https://github.com/Tencent/rapidjson/) - A fast JSON parser/generator for C++ with both SAX/DOM style API

**Program in action**
1. Header:
    1. FPS
    1. drawcalls and material changes count
    1. ScenePath
    1. Objects count
2. Instanced DrawCalls
3. Loading models info and scene configuration from .json files
4. Orbital camera with moving center
5. Level-of-details: unload object if it's further than render distance
6. Phong lightning with textures support

Controls:
Mouse Wheel - Camera zoom*(close/further)*
LBM -  Camera rotation *(hold and move)*
WASD - Camera movement

![](https://raw.githubusercontent.com/catinapoke/opengl-core/master/app.gif)

license: Unlicense

repository: catinapoke/opengl-core

repo_name: catinapoke/opengl-core


text:
# News Highlight
#### 11.10.2019
#### By **Mark Muchiri Macharia**
## Description
This is an application that will help list and preview news articles from various sources.
## Deployed website
This app is live @
## How it works
As a user can ;
* see various news sources on the homepage of the application.

*  select a news source and see all news articles from the selected news source in the application.

* see the image, description and the time a news article was created.

* click on an article and read the full article on the source website.

## Installation

Installation for the package can be done via `pip`:

```bash
$ python -m pip install newsapi-python
```

## Usage

After installation, import the client class into your project:

```python
from newsapi import NewsApiClient
```

Initialize the client with your API key:

```python
api = NewsApiClient(api_key='XXXXXXXXXXXXXXXXXXXXXXX')
```

## Setup/Installation Requirements
Want to contribute? Lovely!

To fix a bug or enhance an existing module, follow these steps:

* Fork the repo
* Create a new branch (git checkout -b improve-feature)
* Make the appropriate changes in the files
* Add changes to reflect the changes made
* Commit your changes (git commit -am 'Improve feature')
* Push to the branch (git push origin improve-feature)
* Create a Pull Request

## Known Bugs
No known bugs.

repository: MachariaMark/News-Highlight

gha_language: Python

repo_name: MachariaMark/News-Highlight


text:
# SmartService
Simple rpc framework which is based on Swoole.

# Quick start
## Install Swoole (php extension)
## Create a new server instance demo.
Please rename Conf-example folder to Conf, and then execute command "php SmartService.php start. You will get a service which is named Example."

You can find the process whith command ("ps -ef | grep example").
If you need a new server, Please add a new class like `Config/Server/Example.php`, usually you need other config file (Config/Client/Example.php) for client.

repository: liujiekkk/SmartService

repo_name: liujiekkk/SmartService


text:
# todo-app
### (small application for organizing your todos)

## Technologies
* html
* java script
* tailwindcss
* mvc pattern

## Try it [here](https://pavelpashkovich.github.io/todo-app/)!

## Created by [Pavel Pashkovich](https://github.com/PavelPashkovich/)

repository: PavelPashkovich/todo-app

branch_name: refs/heads/main

repo_name: PavelPashkovich/todo-app


text:
# Blocking-based Neighbor Sampling for Large-scale Graph Neural Networks

```
@inproceedings{bns_ijcai21,
title = {Blocking-based Neighbor Sampling for Large-scale Graph Neural Networks},
author = {Kai-Lang Yao and Wu-Jun Li},
booktitle = {Proceedings of the Thirtieth International Joint Conference on Artificial Intelligence (IJCAI)},
year = {2021}
}
```

links
- [preprint](https://cs.nju.edu.cn/lwj/paper/IJCAI21_BNS.pdf)


text:
---
published: true
title: Street art in Kiev
layout: post
tags:
  - graffiti
date: '2016-08-02 23:00:00 +0300'
---
Alesia and I went hunting for murals around Kiev, thanks to Kate since she sent me a link to [a map](http://kyivmural.com/?lang=en) that marks many of them. I also included public art that you can see outside of a museum or gallery. Which ones are your favorites?

<!--more-->

![Car & slut]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/00.jpeg)
![Working together under the sun]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/01.jpeg)
![Finch and lightbulb]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/02.jpeg)
![Roly-poly dragons]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/03.jpeg)
![Traditional Ukrainian girl]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/04.jpeg)
![Ravens]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/05.jpeg)
![Automobiles]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/06.jpeg)
![Storks]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/07.jpeg)
![Flipping over]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/08.jpeg)
![Warhol-style kid portraits]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/09.jpeg)
![Kitchen utensil horse]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/10.jpeg)
![Made in USSR]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/11.jpeg)
![Time for change]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/12.jpeg)
![Larger than life cats]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/13.jpeg)
![Stack of pillows]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/14.jpeg)
![Immovable blanket and pillow]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/15.jpeg)
![Worm dragon]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/16.jpeg)
![Glasses bench]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/17.jpeg)
![Handy bench]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/18.jpeg)
![Mosaic Little Prince]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/19.jpeg)
![Art or not art]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/20.jpeg)
![Cameras]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/21.jpeg)
![Bee bumper]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/22.jpeg)
![Cossack]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/23.jpeg)
![Worldly cereal]({{site.baseurl}}/images/2016/08/02/street-art-in-kiev/24.jpeg)


text:
# Flutter-Business-Card
Flutter Mobile Application. Minimalist UI for your business card.

Business Card UI

This a basic Flutter application.
You can simply use it by installing Flutter SDK and create an apk file using command "flutter create apk" in root directory.

Screenshot

![Image](https://github.com/Aman-Yadav/Flutter-Business-Card/blob/master/card.JPG)

repository: Jerez-M/Flutter-Business-Card

repo_name: Jerez-M/Flutter-Business-Card


text:
---
date: 06 August 2013
categories: modular-css, advanced, guides
author: John W. Long
summary: If avoiding nested selectors in favor of a flatter class-based CSS scares you, maybe this example will help you embrace some of the principles of modular CSS.
---

# Modular CSS, an example

If my last article about [avoiding nested selectors for more modular CSS](http://thesassway.com/intermediate/avoid-nested-selectors-for-more-modular-css) left your head spinning, you are not alone. After all, one of the coolest things about Sass is that you can nest selectors. Why would you want to give that power up?

I'm glad you asked. Perhaps an example would help. For myself, these principles really started to make sense when I was building a menubar that looked something like this:

See the Pen Simple menu by John W. Long (@jlong) on CodePen

To build this menubar, I started out with the following HTML:

    :::html

        File

Open

Save

Save as…

Close

Exit

        Edit

Cut

Copy

Paste

        Help

About

This is fairly standard markup for a dropdown menu system. Lists within lists seem to be the semantic method of choice. To minimize the impact on my HTML I decided to try to code it with only one class ("menubar") which I applied to the outer element.

## Using nested selectors

I then styled it using nested selectors:

    :::scss
    ul.menubar {
      background: white;
      list-style: none;
      padding: 0 10px;

      > li {
        display: inline-block;
        position: relative;

        > a {
          color: black;
          display: block;
          padding: 10px 14px;
          text-decoration: none;

          &:hover { background: #29a7f5; color: white; }
        }

        > ul {
          display: none;
          position: absolute;
          top: 100%;
          background: white;
          padding: 10px 0;

          > li > a {
            color: black;
            display: block;
            padding: 8px 20px;
            text-decoration: none;

            &:hover { background: #29a7f5; color: white; }
          }
        }

        &.is-selected {
          > a { background: #29a7f5; color: white; }
          > ul { display: block; }
        }
      }
    }

To get it to work correctly, I found myself using a lot of child selectors (">"). This was necessary because of the lists within lists. I didn't want the same styles for the menubar to be applied to the dropdown menus, so I had to explicitly indicate which "li" or "a" tag I was refering to. Child selectors let me do this. Without child selectors it's actually an even bigger mess to style a menu like this because you must turn off styles that were set for parent "li" elements on decendants. Which makes it much harder.

## A more modular approach

The menu system I was working on was actually much more complicated than the code shown above. In fact, the code spanned several screens which made it even harder to follow with all of the nesting. To maintain my own sanity I decided to add a couple of classes to the HTML to make it easier to style and evolved my CSS to something more like this:

    :::scss
    .menubar {
      list-style: none;
      font-size: 14px;
      background: white;
      padding: 0 10px;

      > li {
        display: inline-block;
        position: relative;
      }
    }
    .menubar-item {
      color: black;
      display: block;
      padding: 10px 14px;
      text-decoration: none;

      &:hover, .is-selected & { background: #29a7f5; color: white; }
    }

    .menu {
      display: none;
      position: absolute;
      top: 100%;
      background: white;
      list-style: none;
      width: 15em;
      padding: 10px 0;

      .is-selected & { display: block; }
    }
    .menu-item {
      color: black;
      display: block;
      padding: 8px 20px;
      text-decoration: none;

      &:hover { background: #29a7f5; color: white; }
    }

By flattening the structure of the CSS I was able to make it much easier to understand and modify. It also helped me conceptually to think about my styles in terms of objects instead of lists. In this example I have a "menubar" and a "menu". Each of those objects have their own child objects called "items" which are distinguished with the "menubar-item" and "menu-item" classes.

Not only is my CSS easier to read, but I was also able to combine two of the rules into one:

      &:hover, .is-selected & { background: #29a7f5; color: white; }

Above I was able write one rule for the hover and selected states of "menubar-item". Before I had written two rules because it was easier with all of the nesting. Keeping your selectors simple will make it easier for you to combine rules when necessary.

Another thing to note is with a tiny bit of modification I could probably make the "menu" styles work for context menus, not just menubars. Which is what modularity is all about.

## Striking a balance

Some of you may have noticed that in the code above I still have a couple of nested selectors. In particular the pseudo class for hover and the class for the selected case. These are both state classes and are a very good use of nesting.

But I also have one selector that is still referencing a child "li" element ("> li"). I wrote it this way because it seemed to be the best balance between the number of classes required and the added weight to my markup. Not everyone would agree with me that this is the best way to mark it up. Some would say that you should ONLY style using classes and avoid tag names entirely. You'll have to find your own balance for your own projects. My point is simply that avoiding nesting can make your Sass code easier to read and maintain.

## The Examples

To write this article I created several [CodePen](http://codepen.io) projects to illustrate various levels of modularity:

* [Simple menu 1](http://codepen.io/jlong/pen/LlCrx) - the non-modular, nested approach.
* [Simple menu 2](http://codepen.io/jlong/pen/wpbzq) - a more modular approach.
* [Simple menu 3](http://codepen.io/jlong/pen/AmwrK) - an ultra-modular approach (using only class selectors).

Let me know which approach you like the best.

extension: markdown

gha_language: SCSS

gha_license_id: NOASSERTION


text:
About
=====

Stalker Pyramid is the Pyramid Web App package based on [Stalker](https://github.com/eoyilmaz/stalker). Basically it
supplies the web interfaces to the system. It is also licensed under MIT License.

Features:
 * Designed for animation and VFX Studios.
 * It is a Pyramid Web Application.
 * Platform independent.
 * Default installation handles nearly all the asset and project management
   needs of an animation and vfx studio.
 * Customizable with configuration scripts.
 * Customizable object model (Stalker Object Model - SOM).
 * Uses TaskJuggler as the project planing and tracking backend.
 * Can be used with any kind of databases supported by SQLAlchemy.
 * Can be connected to all the major 3d animation packages like Maya, Houdini,
   Nuke, XSI, Vue, Blender etc. and any application that has a Python API.
 * Can work as a stand-alone application.

Stalker Pyramid is build over these other OpenSource projects:
 * Python
 * Stalker
 * Pyramid
 * SQLAlchemy and Alembic
 * Jinja2
 * TaskJuggler

Source
======

The latest development version is available in [GitHub](https://www.github.com/eoyilmaz/stalker_pyramid)
or can be directly cloned with the following command if you already have mercurial installed::

  git clone https://github.com/eoyilmaz/stalker_pyramid stalker_pyramid


text:
# Markov_Text_Generator
Use Markov Chain to Generate Text

## What is a Markov Chain ?
A Markov chain is a stochastic model describing a sequence of possible events in which the probability of each event depends only on the state attained in the previous event.
![Diagram](assets/diagram.png)
Using Probabilistic connections a Markov Chain can be used to generate text.

## Training Data
The data should be in form of a text file. An example of presidential speeches has been provied in the Presidents folder.

## Generating a Dictionary
To generate a dictionary file, you'll need to run the genDict.py script as follows:
```
python genDict.py -k <key length> -i <input files> -d <output dictionary file>
```

For eg:
```
python genDict.py -k 2 -i Presidents\*.* -d pdict.txt
```
**Note: Wild Card characters can be used for input**

## Generating the Text
To generate the text, you'll need to run the genText.py script as follows:
```
python genText.py -w <max word count> -n <max line count> -d <dictionary file>
```

For eg:
```
python genText.py -w 100 -n 5 -d pdict.txt
```

## Generated Sample
The following was generated from the presedential speeches:

>For the college years we will flourish and that is due to the continued growth and political democracy.
The life of Abraham Lincoln.
For a second century we struggled to hold together the first century we labored to establish a unity of the Lord are true and righteous altogether.” With malice toward none, with charity for all, with firmness in the Capital of the price that has been the New World in all tongues, to all our people.
We will step up our effort to make it work—work with us, not over us; to stand still.
The answer was waiting for me in the wisest and most momentous occasion; and yet, in the last 4 years.
Most important of all, in this Chamber are among men whose first love is their country, men who believe that together, with God's help, we can have a strong and we have resolved in friendship our disputes with our neighbors of the individual have been awakened by the bondsman's two hundred and fifty years of public service, practically all of them would 'make' war rather than let it perish, and the fortitude to make the Potomac a model of government are justly considered, perhaps, as 'deeply', as 'finally', staked on the work a man who might have been constantly called forth on every point and phase of the republican model of government is subject to the Congress.
All of us to enlarge the meaning of his mind and skills.
We shall extend it—and we shall suppose that American slavery is one of the whole population were colored slaves, not distributed generally over the Union, but localized in the interest of Europe.
All dreaded it, all sought to avert it.
A nation, like a person, has a government—not the other way around.
Off to one side, the stately memorial to Thomas Jefferson.
The hopes of the entire Nation.
Standing here, one faces a magnificent vista, opening up on this tradition.
Our continued prosperity demands continued price stability.
Besides the ordinary objects submitted to your care, it will always be challenge and not just in theory?
I confidently predict—what every economic sign tells us tonight—the continued flourishing of the American community.
We are there, first, because a friendly nation has become too complex to be done to preserve our national history.
The frustrations of the governed.
We seek full employment opportunity for every sacrifice that Martin Treptow and so many thousands of prayer meetings are being held on this subject, in which they originated.
They require different attitudes and different answers.

# G00D LUCK

For doubts email me at:
<EMAIL_ADDRESS>

repository: crypto-code/Markov-Text-Generator

repo_name: crypto-code/Markov-Text-Generator


text:
# Excel - Invoice letter (German)

Back to [main page](https://github.com/kimai/invoice-templates).

## Introduction

This Excel template contains German translation only, but it is very easy to convert it into your language.

It is formatted as letter (no cell borders) and a table of all invoice rows at the bottom.

![Screenshot of template](screenshot.png "Screenshot of template")

repository: kimai/invoice-templates

gha_language: Twig

repo_name: kimai/invoice-templates


text:
# Weather Application
Android weather application implemented using the MVVM pattern, Kodein, Retrofit , LiveData, ViewModel, Coroutines, Room. WeatherApp fetches data from the [OpenWeatherMap API](https://openweathermap.org/api) to provide real time weather information.

[App overview](https://user-images.githubusercontent.com/19778140/127747971-c591f13b-97a6-4231-bbe4-23a2a5e75099.mp4)

# App download

Android download link：
https://github.com/xuanlocle/WeatherApp/blob/a76d85d7af88e2b363c7e7d23a671119f829193b/app-release-v0r1.apk

# Features

- [x] Landing weather list
- [x] Landing search city weather
- [x] Filter query weather
- [x] Handle error message
- [x] Save local database
- [x] History search list,
- [x] Secure apk by proguard,
- [ ] View weather details
- [ ] Improve UX/UI
- [ ] Add favourites cities
- [ ] Notification daily weather

## Architecture
The architecture of this application relies and complies with the following points below:
* Pattern [Model-View-ViewModel](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel)(MVVM) which facilitates a separation of development of the graphical user interface.
* [Android architecture components](https://developer.android.com/topic/libraries/architecture/) which help to keep the application robust, testable, and maintainable.

## Technologies used:

* [Retrofit](https://square.github.io/retrofit/) a REST Client for Android which makes it relatively easy to retrieve and upload JSON (or other structured data) via a REST based webservice.
* [Kodein](https://kodein.org/di/) for dependency injection.
* [ViewModel](https://developer.android.com/topic/libraries/architecture/viewmodel) to store and manage UI-related data in a lifecycle conscious way.
* [LiveData](https://developer.android.com/topic/libraries/architecture/livedata) to handle data in a lifecycle-aware fashion.
* [Material Design](https://material.io/develop/android/docs/getting-started/) an adaptable system of guidelines, components, and tools that support the best practices of user interface design.
* [Coroutines](https://kotlinlang.org/docs/reference/coroutines-overview.html) used to manage the local storage i.e. `writing to and reading from the database`. Coroutines help in managing background threads and reduces the need for callbacks.
* [Room](https://developer.android.com/topic/libraries/architecture/room) persistence library which provides an abstraction layer over SQLite to allow for more robust database access while harnessing the full power of SQLite.
* [Android KTX](https://developer.android.com/kotlin/ktx) which helps to write more concise, idiomatic Kotlin code.

## Installation
WeatherApp requires a minimum API level of 23. Clone the repository. You will need an API key i.e. `API_KEY` from [Open Weather](https://openweathermap.org/) to request data. If you don’t already have an account, you will need to create one in order to request an API Key.

In your project's root directory, inside the `local.properties` file (create one if unavailable) include the following lines:

````properties
API_KEY = "YOUR_API_KEY"

````

## Contribution
All contributions are welcome. If you are interested in seeing a particular feature implemented in this app, please open a new issue after which you can make a PR!

## LICENSE
```
MIT License

Copyright (c) 2021 xuanlocle

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

 IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

repository: xuanlocle/WeatherApp

repo_name: xuanlocle/WeatherApp


text:
---
layout: post
title: "Friday Links #367"
---

### Programming

- [CSS constants and variables | Macropod Blog](https://macropod.com/blog/why-we-need-localized-css-constants/)
- [ANGLE for Windows Now Available On NuGet | Building Apps for Windows](http://blogs.windows.com/buildingapps/2015/08/04/angle-for-windows-now-available-on-nuget/)
- [The React.js Way: Flux Architecture with Immutable.js](https://blog.risingstack.com/the-react-js-way-flux-architecture-with-immutable-js/)
- [techfort/armour](https://github.com/techfort/armour)
- [Testing a React project with Karma and Webpack - The Dapper Developer](http://dapperdeveloper.com/2015/05/11/testing-a-react-project-with-karma-and-webpack/)
- [Brunch - ultra-fast HTML5 build tool](http://brunch.io/?utm_source=nodeweekly&utm_medium=email)
- [Git 2.5 Adds Worktrees, Improves Triangular Workflows, Performance, and More](http://www.infoq.com/news/2015/07/git-25-released?utm_campaign=infoq_content&utm_source=infoq&utm_medium=feed&utm_term=global)
- [paint.net 4.0.6 is now available | Paint.NET Blog](http://blog.getpaint.net/2015/08/02/paint-net-4-0-6-is-now-available/)
- [asvd/viewport](https://github.com/asvd/viewport)
- [A JavaScript framework for building fantastic SVG widgets - Svidget.js](http://www.svidget.com/)
- [Project EON - Realtime Dashboards](http://www.pubnub.com/developers/eon/)
- [New React Devtools Beta | React](https://facebook.github.io/react/blog/2015/08/03/new-react-devtools-beta.html)
- [The JavaScript Looping Evolution -Telerik Developer Network](http://developer.telerik.com/featured/the-javascript-looping-evolution/)
- [Let's talk about Web Performance](http://ponyfoo.com/articles/talk-about-web-performance)
- [Managing Inline Images in CSS - AshleyNolan.co.uk - Blog and Portfolio for Ashley Nolan](http://ashleynolan.co.uk/blog/managing-inline-images-in-css)
- [Getting started with ECMAScript 6](http://www.2ality.com/2015/08/getting-started-es6.html)
- [Angular Loading Bar](https://chieffancypants.github.io/angular-loading-bar/)

### Applications

- [This Utility Can Change Your Windows 10 Login Image](http://lifehacker.com/this-utility-can-change-your-windows-10-login-image-1721713560)

### Science and Technology

- [Imaging tool lets scientists look inside brain at nanoscale resolution](http://www.gizmag.com/brain-imaging-tool-nanoscale-resolution/38738/)
- [New Ebola Vaccine Shows 100 Percent Effectiveness In Early Tests | Popular Science](http://www.popsci.com/new-ebola-vaccine-shows-100-percent-effectiveness-early-tests)
- [Stratolaunch aircraft will have a 385-foot wingspan - SlashGear](http://www.slashgear.com/stratolaunch-aircraft-will-have-a-385-foot-wingspan-04395477/)
- [Tesla Model X finally ready to hit the road next month - SlashGear](http://www.slashgear.com/tesla-model-x-finally-ready-to-hit-the-road-next-month-06395787/)

### On the Web

- [Putting Elon Musk and Steve Jobs on a Pedestal Misrepresents How Innovation Happens | MIT Technology Review](http://www.technologyreview.com/review/539861/techs-enduring-great-man-myth/)
- [I Tried VR and It Was Just OK](http://blog.codinghorror.com/i-tried-vr-and-it-was-just-ok/)
- [Docs.com—Share your work with the world](https://docs.com/en-us)
- [Microsoft updates Docs.com, drops the beta tag](http://www.neowin.net/news/microsoft-updates-docscom-drops-the-beta-tag)

### Stuff I Just Like

- [This Video Shows How to Make "Smoked" Brisket Indoors Without a Smoker](http://lifehacker.com/this-video-shows-how-to-make-smoked-brisket-indoors-w-1722353628)
- [From Cecil the Lion to Climate Change: A Perfect Storm of Outrage Oneupmanship - The Atlantic](http://www.theatlantic.com/entertainment/archive/2015/07/outrage-rip-cecil-lion/400037/?utm_source=SFTwitter)
- [Expandable Hose Reviews | Lightweight Hose Test - Consumer Reports](http://www.consumerreports.org/cro/news/2015/08/do-the-new-expandable-hoses-still-spring-a-leak/index.htm)

THE YEAR IS 2025. JAVASCRIPT FRAMEWORKS OUTNUMBER HUMANS. SENTIENT TODO WEBAPPS SCOUR THE EARTH, HUNTING THE REMNANTS OF HUMANITY.
— Ted Mielczarek (@TedMielczarek) July 24, 2015

gha_language: HTML


text:
# mnp-idio

`mnp-idio` is a structure for mnp to create websites.

Because `yarn` ignores `yarn.lock` file, scripts were written to clone it into
`_yarn.lock` on prepublish, and rename it to `yarn.lock` on install.

---

(c) [Art Deco Code][1] 2018

[1]: https://artdeco.bz

repository: artdecocode/mnp-idio

repo_name: artdecocode/mnp-idio


text:
# revue

A reddit clone built with Vue.js and Flask

![Screenshot](https://raw.githubusercontent.com/Lanseuo/revue/master/screenshot.png)

## Installation

```bash
git clone https://github.com/Lanseuo/revue.git
cd revue
```

install dependencies for client
```bash
cd client
npm install
```

install dependencies for server
```bash
cd ../server
pip3 install -r requirements.txt
```

add config file
```bash
nano config.py
```
```python
flask_secret_key = "CHANGEME"
image_upload_folder = ".../revue/server/images"
```

## Usage

```bash
cd client

# serve with hot reload at localhost:8080
npm run serve

# build for production with minification
npm run build
```

```
cd server
flask run
```

## Made with

- [Vue.js](https://vuejs.org/) - JavaScript Framwork
- [axios](https://github.com/axios/axios) - HTTP client
- [Flask](https://flask.pooco.com) - Web Framework
- [MongoEngine](https://github.com/MongoEngine/mongoengine) - Object-Document-Mapper for MongoDB

## Meta

Lucas Hild - [https://lucas-hild.de](https://lucas-hild.de)
This project is licensed under the MIT License - see the LICENSE file for details

## Update
Updated to Vue 3 by me (@mrmechko).

repository: asaadielhassan/revue

gha_language: Vue

repo_name: asaadielhassan/revue


text:
# Albuca roodeae (E.Phillips) J.C.Manning & Goldblatt SPECIES

#### Status
ACCEPTED

#### According to
The Catalogue of Life, 3rd January 2011

#### Published in
null

#### Original name
Ornithogalum roodeae E.Phillips

### Remarks
null

repository: mdoering/backbone

repo_name: mdoering/backbone