This is a #Hacktoberfest training git repo on GitHub. It contains resources for learning Git. 99% of the contributions in this repository are from different first time beginners just like you. So, jump right in! 🎯

Meetup Event sponsorship DigitalOcean →

Hacktoberfest is a month-long celebration of open source software run by DigitalOcean in partnership with GitHub and Dev.

• Hacktoberfest is open to everyone in our global community!
• Four quality pull requests must be submitted to public GitHub repositories.
• You can sign up anytime between October 1 and October 31.

• Hacktoberfest 2024 events

Listing a few git resources here for everyone.

• An interactive basic tutorial to Git: try.github.io
• A very light, but not gentle 👊, guide to Git: git – the simple guide
• Novice 🤓 to Ninja ⚔, a complete guide on becoming a Git Guru
• Vogella Git Tutorial
• The (Written) Unwritten Guide to Pull Requests by Blake Riosa

There are tons of learning material on the Web

• Try Git — learn Git in 15 minutes with pseudo-terminal interface
• How to Create a Pull Request — learn to create a GitHub Pull Request
• GitHub Learning Paths — learn about Git, Setup, GitHub, and a lot more
• Atlassian Git Tutorial — comprehensive tutorial on Git
• Use gitk to understand git — all important Git terms (commit, commit SHA, branch, merge, rebase) explained using gitk
• Learn Version Control with Git — freemium ebook from fournova Software (makers for Tower), associated with paid video course
• Learn Enough Git to Be Dangerous – a tutorial on version control with git
• Pro Git — free Git book (CC BY-NC-SA 3.0)
• The Git Community Book — book built by dozens of people in the Git community
• Git Pocket Guide — a short O’Reilly book on Git
• Git Real: Code School — paid training course from Code School
• Git Branching — visual way to learn git branching
• Learn Git in a Month of Lunches — tutorial-based book by Manning Publications
• Git Magic — short book about Git
• Git from the bottom up — great series of articles about Git
• Git-it — app-tutorial on Git
• Learn Git – Codecademy — This course will show you basic workflow and core features, different ways to undo changes or save multiple versions of a project, and how to collaborate with other developers
• Migrating to Git LFS — Use Git LFS on an existing repository to manage large files in a better way
• Learn Git Branching — Interactive way to learn how git branching works
• An Introduction to Git and GitHub by Brian Yu – CS 50 Git Tutorial
• Version Control with Git — The essentials of using the version control system Git
• GitHub & Collaboration — The essentials of working with remote repositories
• How to Use Git and GitHub — Effective use of version control
• Getting Started with Git
• Learn to Manage Code Based Projects and Collaborate Using GitHub
• Introduction to Git by DataCamp
• Become an Expert in Git & GitHub in 4 Hours

• Beginner Tutorial: How to user Git for WordPress development by NICK SCHÄFERHOFF
• WordPress + Git = ♥ – Presenting VersionPress
• A full tutorial on Managing WordPress website with Git, consisting 4 articles by Delicious Brains
• Top 8 Resources: WordPress with Git by PANTHEON
• Keeping WordPress Under “Version” Control with Git by Steve Grunwell
• Introductory guide to Git for WordPress with resources and tools
• 8 Ways to Sync Git Repositories with WordPress

Various tools for daily operations

• GitHub Desktop — Git Client by GitHub. works with GitHub and GitHub Enterprise seamless
• SourceTree — free (in-beer) GUI client. Windows and Mac only
• GitKraken — a cross Git client for Windows, Mac & Linux. Electron based. Free for non-commercial use and paid Pro version is available.
• Tower — a popular non-free Git GUI client. Mac and Windows
• SmartGit — a commercial comprehensive SCM client with Git, SVN, Mercurial. cross-platform (works on Windows, Mac and Linux)
• RabbitVCS — TortoiseSVN inspired graphic tool for version control systems, with Nautilus and Thunar integration
• gitg — a open-source GTK+ GUI client
• git-cola — a cross-platform Git GUI client
• SGit — Git client for Android 4.x
• Ungit — The easiest way to use git. On any platform. Anywhere.
• MyRepos — a tool to manage multiple version control repositories
• awesome-git-addons — lists more than 20 git addons including all available commands
• GitIgnore Collection — collection of gitignore files for various programming language
• git-extras – git utilities adding useful git commands
• git-extra-commands — Another collection of useful git commands
• GitUp — a clean, minimal Git client. Mac only.
• GitExtensions — a shell extension, a Visual Studio 2010-2015 plugin and a standalone Git repository tool.
• Octotree — a must-have browser extension to explore code on GitHub
• Tig – text-mode interface for Git
• Sublime Merge – a cross-platform Git client from the makers of Sublime Text.
• Gitless – an experimental version of Git that changes some of Git’s underlying concepts
• ghq — Organization for remote repositories
• bash-git-prompt – An informative and fancy bash prompt for Git users

Git is designed for source control management. Extensions help people to extend the idea and push version control to everywhere

• Git Large File Storage — practical solution for versioning large files. supported by GitHub
• Git Virtual File System or GVFS — solution for managing very large Git repository while maintaining speed and efficiency of most operations, in development by Microsoft.
• git-annex — allow managing massive binaries among machines, as if operating a standard git repository. Possible to create a synchronized folder with git-annex assistant
• GitLens – A Visual Studio code extension which helps you visualize code authorship at a glance via Git blame annotations and code lens. Allows you to seamlessly explore Git repositories and gain valuable insights via powerful comparison commands.

People have plenty of options to host their source code

• GitHub — the de-facto git hosting service. Perfect integration with most external services.
• GitLab.com — a free Git repository hosting service served by GitLab EE. Unlimited repositories and private collaborators
• BitBucket — well-known for its free private repository (5 user max).
• Kiln — paid Git repository hosting service
• CodePlex — Microsoft’s free open source code hosting service with many ASP/C# OSS projects
• AWS CodeCommit — a SaaS service provided by Amazon Web Service on high availability infrastructure
• Codeplane — a paid Git repository hosting service with no contributor limit
• Deveo — a paid repository hosting service with support for Git, Subversion, Mercurial, WebDAV
• SourceForge — a long-standing free Git repository hosting service

Or you can host the code yourselves

• Gitolite — a simple with fine-grained access control
• GitHub Enterprise — self-hosted solution provided from GitHub
• Bitbucket Server — self-hosted refrom Atlassian. Good integration with JIRA and other Atlassian products
• GitLab CE/EE — a popular open-source Git (CE) with paid support option (EE).
• Upsource — recent offer from Jetbrains, a famos developer-oriented software company. Code repository hosting feature pending. Free for 10 users. Good integration with YouTrack and TeamCity
• GitBucket — a GitHub clone powered by Scala.
• Gogs — a self-hosted Git Service written in Go.
• Gitea – a community managed fork of Gogs
• GitBlit — Pure Java Stack for managing, view, and serving Git repositories.
• Apache Allura — an open source implementation of project hosting platform
• Phabricator — an integrated set of powerful tools to help companies build higher quality software
• RhodeCode CE/EE — a platform delivering enterprise source code management

Inexpensive branching allows people adopt workflows other than the classic centralilzed workflow

• Pro Git – Distributed Workflows
• Atlassian Git Tutorial – Comparing Workflows
• Gitflow — the most well-known Git workflow model
• GitHub flow — a simple branching model with a single master
• GitLab flow
• Git DMZ Flow

Git provide hooks at commit/push phrase, allowing integration with and code quality checking tool and Continuous Integration (CI)

• pre-commit — a framework for managing and maintaining multi-language pre-commit hooks from Yelp. Extensive support for multiple programming language.
• Overcommit — a extendable Git hook manager written with Ruby.
• git-hooks — tool to manage project, user, and global Git hooks
• quickhook — a fast, Unix’y, opinionated Git hook runner
• husky – Git hooks for Node.js, manage your hooks from your package.json

A curated list of GitHub’s Resources.

The awesomeness is currently organized into just a few different buckets:

• Infomation for People Who Are New to GitHub
• Resources for Those Already Familiar With GitHub
• Tips, Tricks, Tools, and Add-Ons for GitHub Power Users
• Novel Uses of GitHub
• The Beginner’s Guide to Hacktoberfest 2019 & Winning the T-shirt

• Code School’s Try Git — If you’d like to better understand Git, one of the technologys that makes GitHub possible, this is a great place to start. No GitHub account required.
• Git-it — 💻 🎓 A workshopper for learning Git and GitHub.
• On-Demand GitHub Training — Self-paced, interactive projects created and maintained by GitHub’s own Training team.
• Bingo Board — Play bingo 💥 by sending pull requests!
• Writing on GitHub — GitHub’s own guide to using GitHub for more than just software development.
• GitHubGuides — GitHub Training & Guides on YouTube.
• GitHub Pages — Websites for you and your projects. Hosted directly from your GitHub repository. Just edit, push, and your changes are live.
• Filetypes that GitHub can do magic with:
  • GeoJSON/TopoJSON — Instantly render maps when you add a GeoJSON file to a repository.
  • iPython/Jupyter — Yes, that’s right, GitHub also renders ipynb files right in the browser. The possibilities are endless.
  • PDF — View PDFs right in your browser.
  • STL files — It’s pretty amazing, 3D right in the browser.
  • CSV — Data journalists and civic data nerds rejoice, comma separated values right in the browser!
  • SVG — Not only can you view scalable vector graphics in the browser, but you can see the difference between versions visually! You’ve got to see it to believe it. (In fact, you can do this with most image files.)
  • PSD — That’s right, same idea as SVG, but for Photoshop files!
• GitHub Government Community — Information on joining GitHub’s government community — a collaborative community for sharing best practices in furtherance of open source, open data, and open government efforts.
• Classroom for GitHub — Your course assignments on GitHub.
• Fun with GitHub — A fun overview of GitHub.

• GitHub Cheat Sheet — Use this list to test your GitHub knowledge.
• GitHub Universe — Two full days on how to build, collaborate, and deploy great software, presented by GitHub. October 1 & 2, 2015, SF.
• GitHub Desktop — Simple collaboration from your desktop.
• Atom — Did you know that GitHub makes an editor? Use it to write, code, and more.
• Electron — Build cross platform desktop apps with web technologies
• GitHub Buttons — Showcase your GitHub repo’s success with hotlinkable GitHub star, fork, or follow buttons.
• Resume — Resumes generated using GitHub.
• Speaker Deck — Share Presentations without the Mess, by GitHub.
• Blocks — This is a simple viewer for code examples hosted on GitHub Gist. (Introduction is here)
• Block Builder — Quickly create, edit, and fork D3.js examples
• GitHub Template Guidelines — Guidelines for creating template files for a GitHub project..

• GitHub Integrations Directory — Use your favorite tools with GitHub.
• GitHub Cheat Sheet — Use this list to test your GitHub knowledge. (A resource so good, it’s worth mentioning twice.)
• A collection of awesome browser extensions for GitHub. — Well, the link kinda’ says it all.
• Gitter — Chat, for GitHub. Unlimited public rooms and one-to-one chats, free.
• ZenHub — Project management inside of GitHub, including kanban boards and more.
• HuBoard — Instant project management for your GitHub issues (sadly, no free plan, but appears to be open source)
• Overv.io — Agile project management for teams who love GitHub. Kanban baords and more.
• Penflip — Collaborative writing and version control, powered by GitLab (similar to GitHub).
• Gitbook — A modern publishing toolchain. Simply taking you from ideas to finished, polished books.
• Prose — Prose provides a beautifully simple content authoring environment for CMS-free websites. It’s a web-based interface for managing content on GitHub.
• Redliner — A tool for facilitating the redlining of documents with the GitHub uninitiated.
• Gatekeeper — Enables client-side applications to dance OAuth with GitHub.
• github-secret-keeper — Microservice to enable GitHub login for multiple server-less applications.
• Hub — A command line tool that wraps git in order to extend it with extra features and commands that make working with GitHub easier.
• Ghizmo — A command line for GitHub, allowing access to all APIs.
• cli-github — GitHub made pretty, within the command line.
• GitHub Dark — A sophisticated dark theme for GitHub.
• github-issues-import — A Python script that allows you to import issues and pull requests from one GitHub repository to another
• Github-Auto-Issue-Creator — A Python script that searches a GitHub repository (locally) and automatically creates GitHub issues for TODO statements, keeping them tracked.
• Problem Child — Allows authenticated or anonymous users to fill out a standard web form to create GitHub issues (and pull requests).
• gitify — All your GitHub notifications on your menu.
• HubPress — A web application to build your Blog on GitHub
• TinyPress — TinyPress is the easiest way to publish a blog on GitHub.
• Issue and Pull Request Template Generator — Generate templates customized to your project, with the help of Cthulhu and Lewis Carroll
• Noteit — Manage your notes at CLI with GitHub Gists.
• Zappr — A free/open-source GitHub integration that removes bottlenecks around pull request approval and helps dev teams to painlessly abide by compliance requirements.
• Migrating to Git LFS — Easily manage huge files in your Git projects, useful for Data Science projects

• Mozilla Festival — Mozfest 2015 Program on GitHub.
• Open Source Society University — Path to a free self-taught education in Computer Science.
• Clef’s Handbook — An employee handbook built for inclusion.
• The United States Code — The complete United States Code.
• Le code civil français sous git — French Civil Code on GitHub.
• Gitron — A web game about GitHub based on Tron movies.

• Using Ansible with DigitalOcean
• Ansible Cloud Modules – DigitalOcean
• Terraform – DigitalOcean Provider
• DigitalOcean in Action! – Example repo for using DigitalOcean with Terraform and Ansible.

• API
• Spaces API
• OAuth
• Droplet Metadata
• Official DO Release Notes – Notes tracking incremental improvements and major releases for the DigitalOcean cloud platform.

• GitHub – Hosting service for Git repositories.
• Cheat Sheet
• Git Cheat Sheet & Git Flow
• Browser Extensions
• Git Tips

• Open Source @ DigitalOcean
• Netbox
• Doctl – Official command-line interface for the DigitalOcean API.
• go-libvirt
• go-qemu

• Learn VSCode — VSCode.pro Power User Course
• Vim
• Sublime Text

• do-sshuttle – Transparent Proxying via sshuttle to DigitalOcean Droplet.
• drophosts – Update /etc/hosts with peer droplets.
• droplan – Manage iptable rules for the private interface on DigitalOcean droplets.
• foreman-digitalocean – Plugin to enable management of DigitalOcean droplets in Foreman.
• lita-digitalocean – Lita handler for managing DigitalOcean services.
• DDNS – Personal DDNS client with DigitalOcean Networking DNS as backend.
• Less Confusing Menus – A Chrome extension that makes account menus less confusing.
• DigitalOcean Droplet creator – A dialog-based shell script to quickly create a single DigitalOcean Droplet.
• do-upgrade-plans – A script to upgrade your DigitalOcean Droplets to better plans with the same cost.

• doctl – Command-line tool for DigitalOcean services.
• digitalocean-indicator – Debian Gnome panel client.
• domanager – Linux and Windows System Tray Client.
• OceanBar – macOS menu bar client.
• Tugboat – Ruby command-line tool for DigitalOcean services, focusing on a more guided UX.

• Building a Kubernetes cluster on DigitalOcean using Kubicorn
• Reddit community
• ##digitalocean on freenode
• Engineering Code of Conduct
• User Scripts – User data scripts to help provision apps on a Droplet.
• Hacktoberfest – Month-long celebration of open source software in partnership with GitHub.

• Set Up
• Configuration Files
• Create
• Local Changes
• Search
• Commit History
• Branches & Tags
• Update & Publish
• Merge & Rebase
• Undo
• Git Flow

$ git config --list

$ git config --local --list

$ git config --global --list

$ git config --system --list

$ git config --global user.name "[firstname lastname]"

$ git config --global user.email "[valid-email]"

$ git config --global color.ui auto

$ git config --global core.editor vi

<repo>/.git/config

~/.gitconfig

/etc/gitconfig

There are two ways:

Via SSH

$ git clone ssh://user@domain.com/repo.git

Via HTTP

$ git clone http://domain.com/user/repo.git

$ git init

$ git status

$ git diff

$ git add .

$ git add -p <file>

$ git commit -a

$ git commit

$ git commit -m 'message here'

$ git commit -am 'message here'

$ git commit --date="`date --date='n day ago'`" -am "<Commit Message Here>"

_{Don’t amend published commits!}

$ git commit -a --amend

_{Don’t amend published commits!}

$ git commit --amend --no-edit

GIT_COMMITTER_DATE="date" git commit --amend

$ git commit --amend --date="date"

$ git stash
$ git checkout branch2
$ git stash pop

$ git stash apply

• {stash_number} can be obtained from git stash list

$ git stash apply stash@{stash_number}

$ git stash drop

$ git grep "Hello"

$ git grep "Hello" v2.5

$ git log

$ git log --oneline

$ git log --author="username"

$ git log -p <file>

$ git log --oneline <origin/master>..<remote/master> --left-right

$ git log --all --decorate --oneline --graph

$ git blame <file>

$ git reflog show

$ git reflog delete

$ git branch

$ git branch -a

$ git branch -r

$ git checkout <branch>

$ git checkout <branch> -- <filename>

$ git checkout -b <branch>

$ git checkout <commit-hash> -b <new_branch_name>

$ git branch <new-branch>

$ git branch --track <new-branch> <remote-branch>

$ git branch -d <branch>

$ git branch -m <new_branch_name>

_{You will lose unmerged changes!}

$ git branch -D <branch>

$ git tag <tag-name>

$ git tag -a <tag-name>

$ git remote -v

$ git remote show <remote>

$ git remote add <remote> <url>

$ git fetch <remote>

$ git remote pull <remote> <url>

$ git pull origin master

$ git pull --rebase <remote> <branch>

$ git push remote <remote> <branch>

$ git push <remote> :<branch> (since Git v1.5.0)

OR

$ git push <remote> --delete <branch> (since Git v1.7.0)

$ git push --tags

$ git config --global merge.tool meld

$ git mergetool

$ git merge <branch>

$ git merge --no-ff <branch>

_{Don’t rebase published commit!}

$ git rebase <branch>

$ git rebase --abort

$ git rebase --continue

$ git add <resolved-file>

$ git rm <resolved-file>

$ git rebase -i <commit-just-before-first>

Now replace this,

pick <commit_id>
pick <commit_id2>
pick <commit_id3>

to this,

pick <commit_id>
squash <commit_id2>
squash <commit_id3>

$ git reset --hard HEAD

$ git reset HEAD

$ git checkout HEAD <file>

$ git revert <commit>

$ git reset --hard <commit>

$ git reset --hard <remote/branch> e.g., upstream/master, origin/my-feature

$ git reset <commit>

$ git reset --keep <commit>

$ git rm -r --cached .
$ git add .
$ git commit -m "remove xyz file"

Improved Git-flow

• Setup
• Getting Started
• Features
• Make a Release
• Hotfixes
• Commands

$ brew install git-flow-avh

$ port install git-flow

$ sudo apt-get install git-flow

$ wget -q -O - --no-check-certificate https://raw.githubusercontent.com/petervanderdoes/gitflow/develop/contrib/gitflow-installer.sh install <state> | bash

git flow init

OR

git flow init -d

git flow feature start MYFEATURE

git flow feature finish MYFEATURE

git flow feature publish MYFEATURE

git flow feature pull origin MYFEATURE

git flow feature track MYFEATURE

git flow release start RELEASE [BASE]

git flow release publish RELEASE

git flow release finish RELEASE

$ git flow hotfix start VERSION [BASENAME]

git flow hotfix finish VERSION

$ git squash fixed-cursor-styling "Fixed cursor styling"
$ git squash 95b7c52
$ git squash HEAD~3

$ git summary

 project  : git
 repo age : 10 years
 active   : 11868 days
 commits  : 40530
 files    : 2825
 authors  :
 15401	Junio C Hamano                  38.0%
  1844	Jeff King                       4.5%

$ git line-summary

 project  : gulp
 lines    : 3900
 authors  :
 1040 Contra                    26.7%
  828 Sindre Sorhus             21.2%

$ git effort

  file                                          commits    active days

  .gitattributes............................... 3          3
  .gitignore................................... 265        226
  .mailmap..................................... 47         40

$ git authors
Contra <contra@maricopa.edu>
Eric Schoffstall <contra@wearefractal.com>
Sindre Sorhus <sindresorhus@gmail.com>

$ git changelog
## 3.9.0

- add babel support
- add transpiler fallback support
- add support for some renamed transpilers (livescript, etc)
- add JSCS
- update dependecies (liftoff, interpret)
- documentation tweaks

## 3.8.11

- fix node 0.12/iojs problems
- add node 0.12 and iojs to travis
- update dependencies (liftoff, v8flags)
- documentation tweaks

$ git commits-since yesterday
... changes since yesterday
TJ Holowaychuk - Fixed readme

$ git count
total 855

$ git create-branch development
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/tj/git-extras.git
 * [new branch]      HEAD -> development
Branch development set up to track remote branch development from origin.
Switched to a new branch 'development'

$ git delete-submodule lib/foo

$ git delete-tag v0.1.1
Deleted tag 'v0.1.1' (was 9fde751)
To https://github.com/tj/git-extras.git
 - [deleted]         v0.1.1

$ git delete-merged-branches
Deleted feature/themes (was c029ab3).
Deleted feature/live_preview (was a81b002).
Deleted feature/dashboard (was 923befa).

$ git fresh-branch docs
Removing .DS_Store
Removing .editorconfig
Removing .gitignore

$ git guilt `git log --until="3 weeks ago" --format="%H" -n 1` HEAD
Paul Schreiber                +++++++++++++++++++++++++++++++++++++++++++++(349)
spacewander                   +++++++++++++++++++++++++++++++++++++++++++++(113)
Mark Eissler                  ++++++++++++++++++++++++++

$ git merge-into master
Switched to branch 'master'
Your branch is up-to-date with 'origin/master'.
Updating 9fde751..e62edfa
Fast-forward
 234 | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 234
Switched to branch 'development'

$ git graft development
Your branch is up-to-date with 'origin/master'.
Merge made by the 'recursive' strategy.
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
Deleted branch development (was 64b3563).

$ git alias last "cat-file commit HEAD"
$ git alias
last = cat-file commit HEAD

$ git ignore build "*.o" "*.log"
... added 'build'
... added '*.o'
... added '*.log'

$ git info

    ## Remote URLs:

    origin              git@github.com:sampleAuthor/git-extras.git (fetch)
    origin              git@github.com:sampleAuthor/git-extras.git (push)

    ## Remote Branches:

    origin/HEAD -> origin/master
    origin/myBranch

    ## Local Branches:

    myBranch
    * master

    ## Most Recent Commit:

    commit e3952df2c172c6f3eb533d8d0b1a6c77250769a7
    Author: Sample Author <sampleAuthor@gmail.com>

    Added git-info command.

    Type 'git log' for more commits, or 'git show <commit id>' for full commit details.

    ## Configuration (.git/config):

    color.diff=auto
    color.status=auto

$ git fork LearnBoost/expect.js

$ git release 0.1.0
... releasing 0.1.0
On branch development
Your branch is up-to-date with 'origin/development'.
nothing to commit, working directory clean
Total 0 (delta 0), reused 0 (delta 0)
To https://github.com/tj/git-extras.git
   9fde751..e62edfa  master -> master
Counting objects: 1, done.
Writing objects: 100% (1/1), 166 bytes | 0 bytes/s, done.
Total 1 (delta 0), reused 0 (delta 0)
To https://github.com/tj/git-extras.git
 * [new tag]         0.1.0 -> 0.1.0
... complete

$ git contrib visionmedia
visionmedia (18):
  Export STATUS_CODES
  Replaced several Array.prototype.slice.call() calls with Array.prototype.unshift.call()
  Moved help msg to node-repl

$ git repl

git> ls-files
History.md
Makefile

$ git undo
Unstaged changes after reset:
M	package.json
M	readme.md

$ git gh-pages

$ git scp staging HEAD

$ git setup
Initialized empty Git repository in /GitHub/test/gulp/.git/
[master (root-commit) 9469797] Initial commit
 69 files changed, 3900 insertions(+)
 create mode 100644 .editorconfig
 create mode 100644 .gitignore
 create mode 100644 .jscsrc

$ git touch index.js

$ git obliterate secrets.json
Rewrite 2357a4334051a6d1733037406ab7538255030d0b (1/981)rm 'secrets.json'
Rewrite b5f62b2746c23150917d346bd0c50c467f01eb03 (2/981)rm 'secrets.json'
Rewrite 3cd94f3395c2701848f6ff626a0a4f883d8a8433 (3/981)rm 'secrets.json'

$ git feature dependencies
$ git feature finish dependencies
Already up-to-date.
Deleted branch feature/dependencies (was f0fc4c7).
Deleted remote-tracking branch origin/feature/dependencies (was f0fc4c7).
To git@github.com:stevemao/gulp.git
 - [deleted]         feature/dependencies

$ git local-commits
commit 5f00a3c1bb71876ebdca059fac96b7185dea5467
Merge: 7ad3ef9 841af4e
Author: Blaine Bublitz <blaine@iceddev.com>
Date:   Thu Aug 20 11:35:15 2015 -0700

    Merge pull request #1211 from JimiHFord/patch-1

    Update guidelines.md

commit 841af4ee7aaf55b505354d0e86d7fb876d745e26
Author: Jimi Ford <JimiHFord@users.noreply.github.com>
Date:   Thu Aug 20 11:55:38 2015 -0400

    Update guidelines.md

    fixed typo

$ git archive-file
Building archive on branch "master"
Saved to "gulp.v3.9.0-36-g47cb6b0.zip" ( 60K)

$ git missing master
< d14b8f0 only on current checked out branch
> 97ef387 only on master

$ git lock config/database.yml

$ git locked
config/database.yml

$ git unlock config/database.yml

$ git reset-file README.md HEAD^
Reset 'README.md' to HEAD^

$ git pr 226
From https://github.com/tj/git-extras
 * [new ref]       refs/pulls/226/head -> pr/226
Switched to branch 'pr/226'

$ git root
/GitHub/git

$ git delta
README.md

$ git merge-repo git@github.com:tj/git-extras.git master .
git fetch git@github.com:tj/git-extras.git master
warning: no common commits
remote: Counting objects: 3507, done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 3507 (delta 1), reused 0 (delta 0), pack-reused 3502
Receiving objects: 100% (3507/3507), 821.12 KiB | 286.00 KiB/s, done.
Resolving deltas: 100% (1986/1986), done.
From github.com:tj/git-extras
 * branch            master     -> FETCH_HEAD
Added dir 'git-merge-repo.E95m0gj'
No local changes to save

$ git psykorebase master
$ git psykorebase --continue
$ git psykorebase master feature

$ git flow init

Which branch should be used for bringing forth production releases?
   - changelog
   - master
Branch name for production releases: [master]

Which branch should be used for integration of the "next release"?
   - changelog
Branch name for "next release" development: [master]
Production and integration branches should differ.

$ git flow feature
$ git flow feature start awesome-feature
$ git flow feature finish awesome-feature
$ git flow feature delete awesome-feature

$ git flow feature publish awesome-feature
$ git flow feature pull remote awesome-feature

$ git flow release
$ git flow release start awesome-release
$ git flow release finish awesome-release
$ git flow release delete awesome-release

$ git flow hotfix
$ git flow hotfix start awesome-release
$ git flow hotfix finish awesome-release
$ git flow hotfix delete awesome-release

$ git flow support

$ git up
Fetching origin
4.0       fast-forwarding...
changelog ahead of upstream
master    fast-forwarding...
returning to 4.0

$ git clone schacon/ticgit
> git clone git://github.com/schacon/ticgit.git

$ git clone -p schacon/ticgit
> git clone git@github.com:schacon/ticgit.git

$ git clone resque
> git clone git@github.com/YOUR_USER/resque.git

$ git remote add rtomayko
> git remote add rtomayko git://github.com/rtomayko/CURRENT_REPO.git

$ git remote add -p rtomayko
> git remote add rtomayko git@github.com:rtomayko/CURRENT_REPO.git

$ git remote add origin
> git remote add origin git://github.com/YOUR_USER/CURRENT_REPO.git

$ git fetch mislav
> git remote add mislav git://github.com/mislav/REPO.git
> git fetch mislav

$ git fetch mislav,xoebus
> git remote add mislav ...
> git remote add xoebus ...
> git fetch --multiple mislav xoebus

$ git cherry-pick https://github.com/mislav/REPO/commit/SHA
> git remote add -f --no-tags mislav git://github.com/mislav/REPO.git
> git cherry-pick SHA

$ git cherry-pick mislav@SHA
> git remote add -f --no-tags mislav git://github.com/mislav/CURRENT_REPO.git
> git cherry-pick SHA

$ git cherry-pick mislav@SHA
> git fetch mislav
> git cherry-pick SHA

$ git am https://github.com/github/hub/pull/55
[ downloads patch via API ]
> git am /tmp/55.patch

$ git am --ignore-whitespace https://github.com/davidbalbert/hub/commit/fdb9921
[ downloads patch via API ]
> git am --ignore-whitespace /tmp/fdb9921.patch

$ git apply https://gist.github.com/8da7fb575debd88c54cf
[ downloads patch via API ]
> git apply /tmp/gist-8da7fb575debd88c54cf.txt

$ git fork
[ repo forked on GitHub ]
> git remote add -f YOUR_USER git@github.com:YOUR_USER/CURRENT_REPO.git

$ git pull-request
[ opens text editor to edit title & body for the request ]
[ opened pull request on GitHub for "YOUR_USER:feature" ]

$ git checkout https://github.com/github/hub/pull/73
> git remote add -f --no-tags -t feature mislav git://github.com/mislav/hub.git
> git checkout --track -B mislav-feature mislav/feature

$ git merge https://github.com/github/hub/pull/73
> git fetch git://github.com/mislav/hub.git +refs/heads/feature:refs/remotes/mislav/feature
> git merge mislav/feature --no-ff -m 'Merge pull request #73 from mislav/feature...'

$ git create
[ repo created on GitHub ]
> git remote add origin git@github.com:YOUR_USER/CURRENT_REPO.git

$ git init -g
> git init
> git remote add origin git@github.com:YOUR_USER/REPO.git

$ git push origin,staging,qa bert_timeout
> git push origin bert_timeout
> git push staging bert_timeout
> git push qa bert_timeout

$ git browse
> open https://github.com/YOUR_USER/CURRENT_REPO

$ git compare refactor
> open https://github.com/CURRENT_REPO/compare/refactor

$ git submodule add wycats/bundler vendor/bundler
> git submodule add git://github.com/wycats/bundler.git vendor/bundler

$ git ci-status
success

Collection of git-tips, want to add your tips? Checkout contributing.md

• git-tip — A handy CLI to make optimum use of these tips. (Here in Docker container)

P.S: All these commands are tested on git version 2.7.4 (Apple Git-66).

• Everyday Git in twenty commands or so
• Show helpful guides that come with Git
• Search change by content
• Sync with remote, overwrite local changes
• List of all files till a commit
• Git reset first commit
• List all the conflicted files
• List of all files changed in a commit
• Unstaged changes since last commit
• Changes staged for commit
• Show both staged and unstaged changes
• List all branches that are already merged into master
• Quickly switch to the previous branch
• Remove branches that have already been merged with master
• List all branches and their upstreams, as well as last commit on branch
• Track upstream branch
• Delete local branch
• Delete remote branch
• Delete local tag
• Delete remote tag
• Undo local changes with the last content in head
• Revert: Undo a commit by creating a new commit
• Reset: Discard commits, advised for private branch
• Reword the previous commit message
• See commit history for just the current branch
• Amend author.
• Reset author, after author has been changed in the global config.
• Changing a remote’s URL
• Get list of all remote references
• Get list of all local and remote branches
• Get only remote branches
• Stage parts of a changed file, instead of the entire file
• Get git bash completion
• What changed since two weeks?
• See all commits made since forking from master
• Pick commits across branches using cherry-pick
• Find out branches containing commit-hash
• Git Aliases
• Saving current state of tracked files without commiting
• Saving current state of unstaged changes to tracked files
• Saving current state including untracked files
• Saving current state with message
• Saving current state of all files (ignored, untracked, and tracked)
• Show list of all saved stashes
• Apply any stash without deleting from the stashed list
• Apply last stashed state and delete it from stashed list
• Delete all stored stashes
• Grab a single file from a stash
• Show all tracked files
• Show all untracked files
• Show all ignored files
• Create new working tree from a repository (git 2.5)
• Create new working tree from HEAD state
• Untrack files without deleting
• Before deleting untracked files/directory, do a dry run to get the list of these files/directories
• Forcefully remove untracked files
• Forcefully remove untracked directory
• Update all the submodules
• Show all commits in the current branch yet to be merged to master
• Rename a branch
• Rebases ‘feature’ to ‘master’ and merges it in to master
• Archive the master branch
• Modify previous commit without modifying the commit message
• Prunes references to remote branches that have been deleted in the remote.
• Retrieve the commit hash of the initial revision.
• Visualize the version tree.
• Deploying git tracked subfolder to gh-pages
• Adding a project to repo using subtree
• Get latest changes in your repo for a linked project using subtree
• Export a branch with history to a file.
• Import from a bundle
• Get the name of current branch.
• Ignore one file on commit (e.g. Changelog).
• Stash changes before rebasing
• Fetch pull request by ID to a local branch
• Show the most recent tag on the current branch.
• Show inline word diff.
• Show changes using common diff tools.
• Don’t consider changes for tracked file.
• Undo assume-unchanged.
• Clean the files from .gitignore.
• Restore deleted file.
• Restore file to a specific commit-hash
• Always rebase instead of merge on pull.
• List all the alias and configs.
• Make git case sensitive.
• Add custom editors.
• Auto correct typos.
• Check if the change was a part of a release.
• Dry run. (any command that supports dry-run flag should do.)
• Marks your commit as a fix of a previous commit.
• Squash fixup commits normal commits.
• Skip staging area during commit.
• Interactive staging.
• List ignored files.
• Status of ignored files.
• Commits in Branch1 that are not in Branch2
• List n last commits
• Reuse recorded resolution, record and reuse previous conflicts resolutions.
• Open all conflicted files in an editor.
• Count unpacked number of objects and their disk consumption.
• Prune all unreachable objects from the object database.
• Instantly browse your working repository in gitweb.
• View the GPG signatures in the commit log
• Remove entry in the global config.
• Checkout a new branch without any history
• Extract file from another branch.
• List only the root and merge commits.
• Change previous two commits with an interactive rebase.
• List all branch is WIP
• Find guilty with binary search
• Bypass pre-commit and commit-msg githooks
• List commits and changes to a specific file (even through renaming)
• Clone a single branch
• Create and switch new branch
• Ignore file mode changes on commits
• Turn off git colored terminal output
• Specific color settings
• Show all local branches ordered by recent commits
• Find lines matching the pattern (regex or string) in tracked files
• Clone a shallow copy of a repository
• Search Commit log across all branches for given text
• Get first commit in a branch (from master)
• Unstaging Staged file
• Force push to Remote Repository
• Adding Remote name
• Show the author, time and last revision made to each line of a given file
• Group commits by authors and title
• Forced push but still ensure you don’t overwrite other’s work
• Show how many lines does an author contribute
• Revert: Reverting an entire merge
• Number of commits in a branch
• Alias: git undo
• Add object notes
• Show all the git-notes
• Apply commit from another repository
• Specific fetch reference
• Find common ancestor of two branches
• List unpushed git commits
• Add everything, but whitespace changes
• Edit [local/global] git config
• blame on certain range
• Show a Git logical variable.
• Preformatted patch file.
• Get the repo name.
• logs between date range
• Exclude author from logs
• Generates a summary of pending changes
• List references in a remote repository
• Backup untracked files.
• List all git aliases
• Show git status short
• Checkout a commit prior to a day ago
• Push a new local branch to remote repository and track

git help everyday

git help -g

git log -S'<a term in the source>'

git fetch origin && git reset --hard origin/master && git clean -f -d

git ls-tree --name-only -r <commit-ish>

git update-ref -d HEAD

git diff --name-only --diff-filter=U

git diff-tree --no-commit-id --name-only -r <commit-ish>

git diff

git diff --cached

Alternatives:

git diff --staged

git diff HEAD

git branch --merged master

git checkout -

Alternatives:

git checkout @{-1}

git branch --merged master | grep -v '^\*' | xargs -n 1 git branch -d

Alternatives:

git branch --merged master | grep -v '^\*\|  master' | xargs -n 1 git branch -d # will not delete master if master is not checked out

git branch -vv

git branch -u origin/mybranch

git branch -d <local_branchname>

git push origin --delete <remote_branchname>

Alternatives:

git push origin :<remote_branchname>

git tag -d <tag-name>

git push origin :refs/tags/<tag-name>

git checkout -- <file_name>

git revert <commit-ish>

git reset <commit-ish>

git commit -v --amend

git cherry -v master

git commit --amend --author='Author Name <email@address.com>'

git commit --amend --reset-author --no-edit

git remote set-url origin <URL>

git remote

Alternatives:

git remote show

git branch -a

git branch -r

git add -p

curl http://git.io/vfhol > ~/.git-completion.bash && echo '[ -f ~/.git-completion.bash ] && . ~/.git-completion.bash' >> ~/.bashrc

git log --no-merges --raw --since='2 weeks ago'

Alternatives:

git whatchanged --since='2 weeks ago'

git log --no-merges --stat --reverse master..

git checkout <branch-name> && git cherry-pick <commit-ish>

git branch -a --contains <commit-ish>

Alternatives:

git branch --contains <commit-ish>

git config --global alias.<handle> <command>
git config --global alias.st status

git stash

Alternatives:

git stash save

git stash -k

Alternatives:

git stash --keep-index

git stash save --keep-index

git stash -u

Alternatives:

git stash save -u

git stash save --include-untracked

git stash save <message>

git stash -a

Alternatives:

git stash --all

git stash save --all

git stash list

git stash apply <stash@{n}>

git stash pop

Alternatives:

git stash apply stash@{0} && git stash drop stash@{0}

git stash clear

Alternatives:

git stash drop <stash@{n}>

git checkout <stash@{n}> -- <file_path>

Alternatives:

git checkout stash@{0} -- <file_path>

git ls-files -t

git ls-files --others

git ls-files --others -i --exclude-standard

git worktree add -b <branch-name> <path> <start-point>

git worktree add --detach <path> HEAD

git rm --cached <file_path>

Alternatives:

git rm --cached -r <directory_path>

git clean -n

git clean -f

git clean -f -d

git submodule foreach git pull

Alternatives:

git submodule update --init --recursive

git submodule update --remote

git cherry -v master

Alternatives:

git cherry -v master <branch-to-be-merged>

git branch -m <new-branch-name>

Alternatives:

git branch -m [<old-branch-name>] <new-branch-name>

git rebase master feature && git checkout master && git merge -

git archive master --format=zip --output=master.zip

git add --all && git commit --amend --no-edit

git fetch -p

Alternatives:

git remote prune origin

 git rev-list --reverse HEAD | head -1

Alternatives:

git rev-list --max-parents=0 HEAD

git log --pretty=oneline | tail -1 | cut -c 1-40

git log --pretty=oneline --reverse | head -1 | cut -c 1-40

git log --pretty=oneline --graph --decorate --all

Alternatives:

gitk --all

git subtree push --prefix subfolder_name origin gh-pages

git subtree add --prefix=<directory_name>/<project_name> --squash git@github.com:<username>/<project_name>.git master

git subtree pull --prefix=<directory_name>/<project_name> --squash git@github.com:<username>/<project_name>.git master

git bundle create <file> <branch-name>

git clone repo.bundle <repo-dir> -b <branch-name>

git rev-parse --abbrev-ref HEAD

git update-index --assume-unchanged Changelog; git commit -a; git update-index --no-assume-unchanged Changelog

git rebase --autostash

git fetch origin pull/<id>/head:<branch-name>

Alternatives:

git pull origin pull/<id>/head:<branch-name>

git describe --tags --abbrev=0

git diff --word-diff

git difftool -t <commit1> <commit2> <path>

git update-index --assume-unchanged <file_name>

git update-index --no-assume-unchanged <file_name>

git clean -X -f

git checkout <deleting_commit>^ -- <file_path>

git checkout <commit-ish> -- <file_path>

git config --global pull.rebase true

Alternatives:

#git < 1.7.9
git config --global branch.autosetuprebase always

git config --list

git config --global core.ignorecase false

git config --global core.editor '$EDITOR'

git config --global help.autocorrect 1

git name-rev --name-only <SHA-1>

git clean -fd --dry-run

git commit --fixup <SHA-1>

git rebase -i --autosquash

git commit --only <file_path>

git add -i

git check-ignore *

git status --ignored

git log Branch1 ^Branch2

git log -<n>

Alternatives:

git log -n <n>

git config --global rerere.enabled 1

git diff --name-only | uniq | xargs $EDITOR

git count-objects --human-readable

git gc --prune=now --aggressive

git instaweb [--local] [--httpd=<httpd>] [--port=<port>] [--browser=<browser>]

git log --show-signature

git config --global --unset <entry-name>

git checkout --orphan <branch_name>

git show <branch_name>:<file_name>

git log --first-parent

git rebase --interactive HEAD~2

git checkout master && git branch --no-merged

git bisect start                    # Search start
git bisect bad                      # Set point to bad commit
git bisect good v2.6.13-rc2         # Set point to good commit|tag
git bisect bad                      # Say current state is bad
git bisect good                     # Say current state is good
git bisect reset                    # Finish search

git commit --no-verify

git log --follow -p -- <file_path>

git clone -b <branch-name> --single-branch https://github.com/user/repo.git

git checkout -b <branch-name>

Alternatives:

git branch <branch-name> && git checkout <branch-name>

git config core.fileMode false

git config --global color.ui false

git config --global <specific command e.g branch, diff> <true, false or always>

git for-each-ref --sort=-committerdate --format='%(refname:short)' refs/heads/

git grep --heading --line-number 'foo bar'

git clone https://github.com/user/repo.git --depth 1

git log --all --grep='<given-text>'

git log master..<branch-name> --oneline | tail -1

git reset --soft HEAD

git reset HEAD <file-name>

git push -f <remote-name> <branch-name>

git remote add <remote-nickname> <remote-url>

git blame <file-name>

git shortlog

git push --force-with-lease <remote-name> <branch-name>

Alternatives:

git revert -m 1 <commit-ish>

git rev-list --count <branch-name>

git config --global alias.undo '!f() { git reset --hard $(git rev-parse --abbrev-ref HEAD)@{${1-1}}; }; f'

git notes add -m 'Note on the previous commit....'

git log --show-notes='*'

git --git-dir=<source-dir>/.git format-patch -k -1 --stdout <SHA1> | git am -3 -k

git fetch origin master:refs/remotes/origin/mymaster

diff -u <(git rev-list --first-parent BranchA) <(git rev-list --first-parent BranchB) | sed -ne 's/^ //p' | head -1

git log --branches --not --remotes

Alternatives:

git log @{u}..

git cherry -v

git diff --ignore-all-space | git apply --cached

git config [--global] --edit

git blame -L <start>,<end>

git var -l | <variable>

git format-patch -M upstream..topic

git rev-parse --show-toplevel

git log --since='FEB 1 2017' --until='FEB 14 2017'

git log --perl-regexp --author='^((?!excluded-author-regex).*)

git request-pull v1.0 https://git.ko.xz/project master:for-linus

git ls-remote git://git.kernel.org/pub/scm/git/git.git

git ls-files --others -i --exclude-standard | xargs zip untracked.zip

git config -l | grep alias | sed 's/^alias\.//g'

Alternatives:

git config -l | grep alias | cut -d '.' -f 2

git status --short --branch

git checkout master@{yesterday}

git push -u origin <branch_name>

Make sure you follow the following simple set of rules here while trying to contribute.

• Every Pull Request must have a title.
• Every Pull Request must have a description.
• Write the title and description of what you have done in the imperative mode, that is as if you were commanding someone.
  • ✅ DO: Start the line with “FIX”, “ADD”, “IMPROVE”.
  • ❌ DON’T: Start with “Fixed”, “Added”, “Adding”, “Improved”.
  • 🎯 Read → How to Write a Git Commit Message!
• Don’t end the summary line with a period – it’s a title and titles don’t end with a period.
• Have fun.

This open source project is maintained by the help of awesome businesses listed below. What? Read more about it →

MIT © Ahmad Awais

ahmadawais	wpcontentstudio	worwox	driftikharahmad	ahmadbilalme	finktanks

mrbilloo	wpbizreview	NidaBatool	usmanworwox	TheWPCouple	a2podcast

nighatiftikhar	MahamBatool	TheOpenDeveloper	WPMetaList	freakify	finktanksceo

TheDevCouple	ahmedzerar	alexruf	mrumair	AliRaza1844	AdnanMuhib

arximughal	prubianes	saqibameen	Elias504	Endless7188	shoaibahmedqureshi

GayathriVenkatesh	jamezrin	julicheng	WisdomSky	kkdroidgit	luisfmelo

k0R73z	michaelwright74	green-leaves	omerl13	Omkar-Ajnadkar	petrkle

starchow	darpr	vyaspranjal33	RajithaFernando	rchung95	riacheruvu

MarkisDev	Burnett2k	SnehPandya18	sudaisasif	saayv1	WajahatAnwar

ybaruchel	alljp	kuwali	Smith-erin

For anything else, tweet at @MrAhmadAwais

I have released a video course to help you become a better developer — Become a VSCode Power User →

VSCode

VSCode Power User Course →

Ignition is an amazing WordPress starter theme that aims to make your life easier and your development faster!

Note: The site below has a splash page that is a bit old and mentions one day incorporating Gutenberg… We are long past that! Luckily the documentation has been updated. Please stand by while we find time to update the splash page.

Ignition 4.0 is out as of Jun 16, 2020

Ignition has a lot of features while remaining lightweight and bare bones. It allows you to create your website without having to rebuild the most common things found in most projects. Here are just some of the features found in ignition.

• NPM and Webpack ready so you can use the latest js, as well as sass, postcss, and more
• We use dart sass for the latest sass including @use and @forward
• Quick theme configuration via theme.config.json for settings you don’t want clients touching
• A powerful CSS grid system that falls back on flexbox for older browsers.
• Upload svg logos in the customizer, and they will output as inline logos for easy css styling. Logo will also appear on login page
• A beautiful menu that works with submenus, dropdowns, and menu placement via the theme config.
• All your JS scripts will be minified and concatenated and set for output, so you wont need to enqueue any front end JS files. They automatically are included.
• Google Fonts at the ready. Easily changeable in the theme config file.
• ACF Blocks Included. Easily use and add your own in the blocks folder.
• Javascript events for scroll animations and click events and even moving items from around the page with simple data attributes.
• svg icons support with iconify.design
• An automatic header block that can be added when a new post is made automatically using the theme config file
• Drag and drop folders of js, css, and even php for plug and play. Any underscored files will be auto included in the build. Even underscored php files.

First things first!
Download the theme into your WordPress theme directory.

npx create-ignition-theme theme-directory-name --setup

This will ask you for the new name of your theme. You must also give a slug which will be used as your text domain and in some functions. Example: Theme Name: My Amazing Theme, Slug: amazing-theme If you are using a local environment with something like flywheel, make sure to enter the local url. The default is ignition.local

Answer all the questions and your theme will be all set up and ready to use!

You should also install Advanced Custom Fields Pro as Ignition works best with it.

There is now a theme config file. It has some nifty quick settings for you without letting the client mess around. Some of these settings use to be in the WP customizer. We have moved them here. Note the name and slug here were created by running the setup. If you run the setup again, it will do a replacement based on whats here. So to change the theme name again, run the setup, don’t just change those here!

{
 "name": "Ignition", //Theme name. Created by the setup we ran before. No touchy!
 "slug": "ignition", //Theme slug. No touchy! If you want to change the theme name, run setup again
 "local": "ignition.local", //browsersync url proxy
 "google_fonts": [
   "Roboto:400,400i,700,700i", //change me to your liking!
   "Roboto Slab:400,700"
 ],
  "menu_icon": "", //svg icons can be added here and in the icon settings below
   "sidebar_icon": "",
   "submenu_arrow_icon": "",
   "comment_icon": "",
   "search_menu_item": false, //adds a search item to top menu
   "dev_admin_bar_color": "#156288", //color of local admin bar
   "admin_access_capability": "manage_options", //capability of who can access back end
   "load_custom_icons": false, //now that we use iconify.design you might not need to load any custom icons, although you can still add them
   "mobile_menu_type": "app-menu", //fancy mobile menu, leave blank for regular
   "logo_position": "logo-left", //logo position with menu
   "site_top_container": "container", //contain the menu and logo takes container, container-fluid or nothing
   "default_acf_header_block" : ["post", "page"] //create default header block for these post types (assumes they use Gutenberg)
}

By setting these up here you wont have to delve into files or through setting pages. It’s fast and easy!

This file resides in “src/sass”. Here you can edit your CSS variables and colors and fonts. Add the google fonts you created in the theme config here so they are applied to the entire site. For adding or changing SASS variables, please use the resources.scss file. SASS variables are still being used for media queries and the like. Otherwise try and use CSS variables.

If you have made a theme before, you know this one. Here you can set up your theme. However, the theme config has basically taken care of almost everything for you! The only thing you may find you need to do here is add image-sizes based on the site you are making. Remember, the web is responsive and pixel size matters less than ratio size. If the client has two image sizes of 500×200 and 1000×400, only make the bigger one. Users should upload images twice the size of the image-size so they look good on retina. I also recommend going to the back end of the site and setting the media sizes of medium and large to 0. This way disk space is saved and images uploaded don’t create a plethora of image sizes. Lastly, all main styles and scripts have been enqueued for you.

When adding your own filters and actions you can stick them in functions.php OR keep it clean and make a new file, probably in the inc folder. This file can be added to function.php with an include or require… but you don’t even need to do that!
You can add php files to functions.php by simply giving the file a name that starts with an underscore.

Any php file that starts with an underscore inside the “inc”, “blocks”, and “parts” folders will automatically be included to functions.php A similar ability exists with js files and scss files that start with an underscore and are found in one of those folders. This allows you to bundle your php, scss, and js files together without explicitly importing or enqueuing them. See the blocks example below.

With all these files setup your ready to start making a theme!!

To get development rolling, open the terminal and run

npm run start

This will watch your files and reload the browser using browsersync.

Most of your development will take place in the src folder. This is where everything you make will go. From template files, to js files to scss. What’s really cool is you can group your sass, js, and php files together! They don’t have to be separated into separate folders. Not only that but underscored files are automatically imported. No need to enqueue those files!

This is because of special functionality ignition has. Let’s look at the blocks folder for a good example:

 - blocks/
 -- section-menu/
 ---- _section-menu.scss
 ---- _section-menu-block.php
 ---- section-menu-block.php

This is a block that spits out a custom menu section. Here, we can see there is an underscore php file _section-menu-block.php. This means it will automatically be included in the functions.php file. This file is responsible for setting up and registering the block. The scss file is also underscored so it will automatically be added to both the front and back end bundle css files. The last file there is a php file which is the actual template file for showing the block and wont be imported anywhere. The ability to add underscore files into the system means you can drag and drop folders with functionality straight into your theme. Drag a block you made in another project right in and its ready to use. (The only piece you might need to put elsewhere is the acf-json file if your block is using that,=. that must go in the acf-json folder)

This will greatly organize your files so you can work in one folder without having to fly around folders.

If your js or scss file is not underscored it will not be imported. You will have to add it yourself, if you choose to. This allows you to choose if it should be enqueued or put somewhere specific etc… js files can be imported into the index.js or admin-index.js files in the src folder. Admin-index is for the back end.
SASS files can be imported via @use or @forward within the SASS folder in one of the files there. If the file requires sass variables or mixins, make sure to use @use "resources" as *; at the top of the file.

When a single post is shown it uses the single.php file in the root. This is standard WordPress templating.
This file in turn will check which current post type is being shown and find the appropriate content file. This is ignition templating.
By default it will go to src/parts/post-type/ folder and get a file there. This is all done using a special template function Ignition comes with. It’s similar to say, get_template_part() and actually uses locate_template() under the hood, except it’s faster and you can pass variables to it.

ign_template('somePrefix'); //gets somePrefix-{post-type}.php

See the difference below:

 //Assumes your in a loop

//The following is the non ignition way to get a template part based on dynamic post type
locate_template( 'src/parts/' . get_post_type() . '/content-'  . get_post_type() . '.php');

//The following is the ignition way. It also has fallbacks that eventually go to the post folder
ign_template('content');
//This little line will search for a file in this order, stops after it finds one:
//looks for src/parts/{post-type}/content-{post-type}.php
//looks for src/parts/{post-type}/content.php
//looks for src/parts/post/content-{post-type}.php
//looks for src/parts/post/content.php

Therefore it’s best to work and divide your content into post type folders and give your files name-{post-type}.php

Furthermore you can pass a second parameter of variables like so:

$var = 'hello'; //will not be available inside the file below using WP function locate_template()
locate_template( 'src/parts/' . get_post_type() . '/content-'  . get_post_type() . '.php');

$var = 'hello'; //WILL be available using Ignition function ign_template()
ign_template('content', array('var'=> $var)); //pass an array of variables $var will now work

You can also use ign_template outside the loop by giving it a full path from the root of the theme

ign_template('src/some-folder/some-file.php'); //you can also pass variables if wanted here too

With ign_template(), you don’t need to make a single-portfolio.php for a portfolio post-type. You just make a new post-type folder with all the different views and template files that exist for that post type. Your post type folders should have a content-{post-type}.php and a card-{post-type}.php file to begin with. If the header is to look different, it should also have a header-{post-type}.php file.
A good place to start is to duplicate and rename the post folder. Rename the files inside too. The content one is for full view and the card one is usually for archive listings. The card view is used by default in index.php

Remember you can and should also add scss files as well as js files into your post-type folders. This keeps your post types and everything they need together.

Every post and page has a header. Sometimes you need the same header. Sometimes you want a different one per post type. Sometimes you want three for one post type and one for another. It can get confusing, but Ignition has finally made this part somewhat easier! Using the function above, a header template can be shown easily with:

ign_template('header'); //outputs header-{post-type}.php
//if your post type does not have this file it will try and load header-post.php as default

But what if you create a header block for say a carousel? And you would like to use that block instead? Ignition comes with another function that will check for a header block and if it exists, it will not output the header template. This function is used as follows and can be seen in content-post.php

//checks if there is a header block and if not outputs a header-{post-type}.php
ign_header_block();

//usually this comes next.
the_content();

The ign_header_block(); will check for a header block that has a name starting with header-. If you create a block with a name like header-carousel, it will be considered a header and if it’s used, the header template file will not be shown. If it does not find a header block on the current post, it will use ign_template() to load a file. By default it loads header-{post-type}.php You can change this by adding a string inside so a different file is loaded.

Default headers per post type are great, but they are not blocks… They wont show up on the back end when your client is creating posts and pages with Gutenberg. This does not result in a smooth experience! While the template part would load on the front end it will not show up on the back. However, wouldn’t it be nice if this file can be seen in the back end as well and act like a Gutenberg block so the client gets a smooth experience when using the default header?

Ignition to the rescue! In the themes.config file there is a setting for default_acf_header_block. Add your post type here and automatically your header-{post-type}.php template file will be added as a choosable block for that post type. Whats more it will be automatically loaded when the client goes to make a new post!
This gives the client a smooth experience when creating a page. It even updates when the client changes the title! The header template file can continue being used as a template file and works the same. You can use the_title() or any in-the-loop template tags, that you normally might not have access to in a block. It’s magic.

You can add an ACF group and connect it to your default header block…er… template hybrid. Just make sure you understand that when the default header-{post-type}.php file is used as a block, get_field() will get fields from the block unless you specify the second parameter.

//inside some portfolio/header-portfolio.php

the_title(); //works even when used as a block!

//if you want a custom field from the post
get_field('some_post_meta', get_the_ID()); //make sure to get the meta from the post NOT the block

//if you want a custom field from the block
get_field('some_post_meta'); //note: if this header is loaded as a template this might yield nothing.

So now your header template file is showing up in Gutenberg and ‘pretending’ to be a block! This feature is enabled by default for posts and pages. go try and make a post and see the header template file show up.

This documentation is not complete! It will be finished soon!

Visit the documentation to learn how to use the starter theme. It’s quite simple and reading the documentation should take less than 25 minutes. So download ignition and give it a try!

View the changelog For helpful info.

I dunno. Who cares!? Why do people ask these questions!? Just download it and see how easy your theming will become!!

Video Game that was created with phaser JS, HTML, CSS, Tiled.

The astronaut has been tasked with collecting data from an abandoned alien spaceship. He was sent there using highly advanced technology, which has one major drawback: it leaves a time-dimensional track behind the user. It’s crucial to avoid bumping into the track, otherwise the hero will be sent back to the beginning of his mission.

Movements – W, A, S, D, ↑, ←, ↓, →

Acceleration – HOLD SPACE BUTTON WHILE MOVING

Main Menu – M

Skip Dialog – PRESS ANY BUTTON

Run command npm install to install all required dependencies.

Run command npm start to run local webpack-dev-server with livereload and autocompile on localhost

Run command npm run build to build current application

• PetricakeGames for tileset and spritesheet – https://petricakegames.itch.io/

• bl4ckbyrd for spritesheet – https://bl4ckbyrd.itch.io/

• DyLESTorm for tileset – https://livingtheindie.itch.io/

• Wenrexa for images – https://wenrexa.itch.io/

• enjl for images – https://enjl.itch.io/

• FieraRyan for images – https://fieraryan.itch.io/

• CRAFTPIX.NET for images – https://craftpix.net/freebies/free-city-backgrounds-pixel-art/?num=1&count=147&s…

• noazudo for images and icons – https://noazudo.itch.io/

• VileR for font – https://fontesk.com/designer/viler/

• DavidKBD for soundtrack – https://davidkbd.itch.io/

• planarian BGM for soundtrack – https://itch.io/profile/planarian-bgm

• TrevorLentz for soundtrack – https://itch.io/profile/trevorlentz

• DOS88 for soundtrack – https://dos88.itch.io/

• Magic Eyes for soundtrack – https://magic-eyes.itch.io/

• Jim Hall for soundtrack – https://jhmakesgames.itch.io/

• alkakrab for soundtrack – https://alkakrab.itch.io/

• Chiphead64 for soundtrack – https://chiphead64.itch.io/

• David Harris for soundtrack – https://david-harris.itch.io/

• Matther Wilber for guide and sources available on github – https://github.com/mwilber

• Rusted Music Studio for soundtrack – https://rustedstudio.itch.io/

• robotmeadows for soundtrack- https://robotmeadows.itch.io/

The form state management library that can handle hundreds of fields without breaking a sweat.

• Expressive and concise API with strict typings.
• Controlled and uncontrolled inputs.
• Unparalleled extensibility with plugins.
• Compatible with Standard Schema ^↗.
• Just 2 kB gzipped. ^↗

npm install --save-prod roqueform

• API docs ^↗
• Live example ^↗

🔰 Features

• Introduction
• Events and subscriptions
• Transient updates
• Accessors
• Plugins

🔌 Built-in plugins

• Annotations plugin
• Errors plugin
• DOM element reference plugin
• Reset plugin
• Scroll to error plugin
• Uncontrolled plugin
• Validation plugin
• Schema plugin
• Constraint validation API plugin

⚛️ React integration

• Eager and lazy re-renders
• Reacting to changes

🎯 Motivation

The central piece of Roqueform is the concept of a field. A field holds a value and provides a means to update it.

Let’s start by creating a field:

import { createField } from 'roqueform';

const field = createField();
// ⮕ Field<any>

A value can be set to and retrieved from the field:

field.setValue('Pluto');

field.value; // ⮕ 'Pluto'

Provide the initial value for a field:

const ageField = createField(42);
// ⮕ Field<number>

ageField.value; // ⮕ 42

The field value type is inferred from the initial value, but you can explicitly specify the field value type:

interface Planet {
  name: string;
}

interface Universe {
  planets: Planet[];
}

const universeField = createField<Universe>();
// ⮕ Field<Universe | undefined>

universeField.value; // ⮕ undefined

Retrieve a child field by its key:

const planetsField = universeField.at('planets');
// ⮕ Field<Planet[] | undefined>

planetsField is a child field, and it is linked to its parent universeField.

planetsField.key; // ⮕ 'planets'

planetsField.parent; // ⮕ universeField

Fields returned by the Field.at ^↗ method have a stable identity. This means that you can invoke at(key) with the same key multiple times and the same field instance is returned:

universeField.at('planets');
// ⮕ planetsField

So most of the time you don’t need to store a child field in a variable if you already have a reference to a parent field.

The child field has all the same functionality as its parent, so you can access its children as well:

planetsField.at(0).at('name');
// ⮕ Field<string | undefined>

When a value is set to a child field, a parent field value is also updated. If parent field doesn’t have a value yet, Roqueform would infer its type from a key of the child field.

universeField.value; // ⮕ undefined

universeField.at('planets').at(0).at('name').setValue('Mars');

universeField.value; // ⮕ { planets: [{ name: 'Mars' }] }

By default, for a key that is a numeric array index, a parent array is created, otherwise an object is created. You can change this behaviour with custom accessors.

When a value is set to a parent field, child fields are also updated:

const nameField = universeField.at('planets').at(0).at('name');

nameField.value; // ⮕ 'Mars'

universeField.setValue({ planets: [{ name: 'Venus' }] });

nameField.value; // ⮕ 'Venus'

You can subscribe to events published by a field:

const unsubscribe = planetsField.subscribe(event => {
  if (event.type === 'valueChanged') {
    // Handle the field value change
  }
});
// ⮕ () => void

All events conform the FieldEvent ^↗ interface.

Without plugins, fields publish only valueChanged ^↗ event when the field value is changed via Field.setValue ^↗.

The root field and its descendants are updated before valueChanged event is published, so it’s safe to read field values in a listener.

Fields use SameValueZero ^↗ comparison to detect that the value has changed.

planetsField
  .at(0)
  .at('name')
  .subscribe(event => {
    // Handle the event here
  });

// ✅ The value has changed, the listener is called
planetsField.at(0).at('name').setValue('Mercury');

// 🚫 The value is unchanged, the listener isn't called
planetsField.at(0).setValue({ name: 'Mercury' });

Plugins may publish their own events. Here’s an example of the errorAdded event published by the errorsPlugin.

import { createField } from 'roqueform';
import errorsPlugin from 'roqueform/plugin/errors';

const field = createField({ name: 'Bill' }, [errorsPlugin()]);

field.subscribe(event => {
  if (event.type === 'errorAdded') {
    // Handle the error here
    event.payload; // ⮕ 'Illegal user'
  }
});

field.addError('Illegal user');

Event types published by fields and built-in plugins:

valueChanged

The new value was set to the target field. The event payload contains the old value.

initialValueChanged

The new initial value was set to the target field. The event payload contains the old initial value.

validityChanged

The field’s validity state has changed. The event payload contains the previous validity state.

errorAdded

An error was added to a field. The event payload contains an error that was added.

errorDeleted

An error was deleted from a field. The event payload contains an error that was deleted.

errorsCleared

All errors were removed from the field. The event payload contains the previous array of errors.

errorDetected

An event type that notifies the errors plugin that an error must be added to a target field. The event payload must contain an error to add.

annotationsChanged

Field annotations were patched. The event payload contains the annotations before the patch was applied.

validationStarted

The validation of the field has started. The event payload contains the validation that has started.

validationFinished

The validation of the field has finished. The event payload contains the validation that has finished.

When you call Field.setValue ^↗ on a field its value is updates along with values of its ancestors and descendants. To manually control the update propagation to fields ancestors, you can use transient updates.

When a value of a child field is set transiently, values of its ancestors aren’t immediately updated.

const field = createField();
// ⮕ Field<any>

field.at('hello').setTransientValue('world');

field.at('hello').value; // ⮕ 'world'

// 🟡 Parent value wasn't updated
field.value; // ⮕ undefined

You can check that a field is in a transient state:

field.at('hello').isTransient; // ⮕ true

To propagate the transient value contained by the child field to its parent, use the Field.flushTransient ^↗ method:

field.at('hello').flushTransient();

// 🟡 The value of the parent field was updated
field.value; // ⮕ { hello: 'world' }

Field.setTransientValue ^↗ can be called multiple times, but only the most recent update is propagated to the parent field after the Field.flushTransient call.

When a child field is in a transient state, its value visible from the parent may differ from the actual value:

const planetsField = createField(['Mars', 'Pluto']);

planetsField.at(1).setTransientValue('Venus');

planetsField.at(1).value; // ⮕ 'Venus'

// 🟡 Transient value isn't visible from the parent
planetsField.value[1]; // ⮕ 'Pluto'

Values are synchronized after the update is flushed:

planetsField.at(1).flushTransient();

planetsField.at(1).value; // ⮕ 'Venus'

// 🟡 Parent and child values are now in sync
planetsField.value[1]; // ⮕ 'Venus'

ValueAccessor ^↗ creates, reads and updates field values.

• When the child field is accessed via Field.at ^↗ method for the first time, its value is read from the value of the parent field using the ValueAccessor.get ^↗ method.

• When a field value is updated via Field.setValue ^↗, then the parent field value is updated with the value returned from the ValueAccessor.set ^↗ method. If the updated field has child fields, their values are updated with values returned from the ValueAccessor.get ^↗ method.

By default, Roqueform uses naturalValueAccessor ^↗ which supports:

• plain objects,
• class instances,
• arrays,
• Map-like instances,
• Set-like instances.

If the field value object has add() and [Symbol.iterator]() methods, it is treated as a Set instance:

const usersField = createField(new Set(['Bill', 'Rich']));

usersField.at(0).value; // ⮕ 'Bill'

usersField.at(1).value; // ⮕ 'Rich'

If the field value object has get() and set() methods, it is treated as a Map instance:

const planetsField = createField(
  new Map([
    ['red', 'Mars'],
    ['green', 'Earth'],
  ])
);

planetsField.at('red').value; // ⮕ 'Mars'

planetsField.at('green').value; // ⮕ 'Earth'

When the field is updated, naturalValueAccessor infers a parent field value from the child field key: for a key that is a numeric array index, a parent array is created, otherwise an object is created.

const carsField = createField();

carsField.at(0).at('brand').setValue('Ford');

carsField.value; // ⮕ [{ brand: 'Ford' }]

You can explicitly provide a custom accessor along with the initial value:

import { createField, naturalValueAccessor } from 'roqueform';

const field = createField(['Mars', 'Venus'], undefined, naturalValueAccessor);

FieldPlugin ^↗ callbacks that are invoked once for each newly created field. Plugins can constrain the type of the root field value and add mixins to the root field and its descendants.

Pass an array of plugins that must be applied to createField ^↗:

import { createField } from 'roqueform';
import errorsPlugin from 'roqueform/plugin/errors';

const field = createField({ hello: 'world' }, [errorsPlugin()]);

A plugin receives a mutable field instance and should enrich it with the additional functionality. To illustrate how plugins work, let’s create a simple plugin that enriches a field with a DOM element reference.

import { FieldPlugin } from 'roqueform';

interface MyValue {
  hello: string;
}

interface MyMixin {
  element: Element | null;
}

const myPlugin: FieldPlugin<MyValue, MyMixin> = field => {
  // 🟡 Initialize mixin properties
  field.element = null;
};

To apply the plugin to a field, pass it to the field factory:

const field = createField({ hello: 'world' }, [myPlugin]);
// ⮕ Field<MyValue, MyMixin>

field.element; // ⮕ null

The plugin is applied to the field itself and its descendants when they are accessed for the first time:

field.at('hello').element; // ⮕ null

Plugins can publish custom events. Let’s update the myPlugin implementation so it publishes an event when an element is changed:

import { FieldPlugin } from 'roqueform';

interface MyMixin {
  element: Element | null;

  setElement(element: Element | null): void;
}

const myPlugin: FieldPlugin<MyValue, MyMixin> = field => {
  field.element = null;

  field.setElement = element => {
    field.element = element;

    // 🟡 Publish an event for field listeners
    field.publish({
      type: 'elementChanged',
      target: field,
      relatedTarget: null,
      payload: element,
    });
  };
};

Field.publish ^↗ invokes listeners subscribed to the field and its ancestors, so events bubble up to the root field which effectively enables event delegation:

const field = createField({ hello: 'world' }, [myPlugin]);

// 1️⃣ Subscribe a listener to the root field
field.subscribe(event => {
  if (event.type === 'elementChanged') {
    event.target.element; // ⮕ document.body
  }
});

// 2️⃣ Event is published by the child field
field.at('hello').setElement(document.body);

annotationsPlugin ^↗ associates arbitrary data with fields.

import { createField } from 'roqueform';
import annotationsPlugin from 'roqueform/plugin/annotations';

const field = createField({ hello: 'world' }, [
  annotationsPlugin({ isDisabled: false }),
]);

field.at('hello').annotations.isDisabled; // ⮕ false

Update annotations for a single field:

field.annotate({ isDisabled: true });

field.annotations.isDisabled; // ⮕ true

field.at('hello').annotations.isDisabled; // ⮕ false

Annotate field and all of its children recursively:

field.annotate({ isDisabled: true }, { isRecursive: true });

field.annotations.isDisabled; // ⮕ true

// 🌕 The child field was annotated along with its parent
field.at('hello').annotations.isDisabled; // ⮕ true

Annotations can be updated using a callback. This is especially useful in conjunction with recursive flag:

field.annotate(
  field => {
    // Toggle isDisabled for the field and its descendants
    return { isDisabled: !field.annotations.isDisabled };
  },
  { isRecursive: true }
);

Subscribe to annotation changes:

field.subscribe(event => {
  if (event.type === 'annotationsChanged') {
    event.target.annotations; // ⮕ { isDisabled: boolean }
  }
});

errorsPlugin ^↗ associates errors with fields:

import { createField } from 'roqueform';
import errorsPlugin from 'roqueform/plugin/errors';

const field = createField({ hello: 'world' }, [errorsPlugin<string>()]);

field.at('hello').addError('Invalid value');

Read errors associated with the field:

field.at('hello').errors;
// ⮕ ['Invalid value']

Check that the field has associated errors:

field.at('hello').isInvalid; // ⮕ true

Get all fields that have associated errors:

field.getInvalidFields();
// ⮕ [field.at('hello')]

Delete an error from the field:

field.at('hello').deleteError('Invalid value');

Clear all errors from the field and its descendants:

field.clearErrors({ isRecursive: true });

By default, the error type is unknown. To restrict type of errors that can be added to a field, provide it explicitly:

interface MyError {
  message: string;
}

const field = createField({ hello: 'world' }, [
  errorsPlugin<MyError>(),
]);

field.errors; // ⮕ MyError[]

By default, if an error is an object that has a message field, it is added only if a message value is distinct. Otherwise, if an error isn’t an object or doesn’t have a message field, then it is added only if it has a unique identity. To override this behavior, provide an error concatenator callback:

import { createField } from 'roqueform';
import errorsPlugin from 'roqueform/plugin/errors';

const field = createField({ hello: 'world' }, [
  errorsPlugin<MyError>((prevErrors, error) => {
    return prevErrors.includes(error) ? prevErrors : [...prevErrors, error];
  }),
]);

To add an error to field, you can publish an errorDetected event instead of calling the addError ^↗ method:

field.publish({
  type: 'errorDetected',
  target: field,
  relatedTarget: null,
  payload: 'Ooops',
});

field.errors; // ⮕ ['Oops']

This is especially useful if you’re developing a plugin that adds errors to fields but you don’t want to couple with the errors plugin implementation.

Subscribe to error changes:

field.subscribe(event => {
  if (event.type === 'errorAdded') {
    event.target.errors; // ⮕ MyError[]
  }
});

refPlugin ^↗ associates DOM elements with fields.

import { createField } from 'roqueform';
import refPlugin from 'roqueform/plugin/ref';

const field = createField({ hello: 'world' }, [refPlugin()]);

field.at('hello').ref(document.querySelector('input'));

Access an element associated with the field:

field.at('hello').element; // ⮕ Element | null

Focus and blur an element referenced by a field. If a field doesn’t have an associated element this is a no-op.

field.at('hello').focus();

field.at('hello').isFocused; // ⮕ true

Scroll to an element:

field.at('hello').scrollIntoView({ behavior: 'smooth' });

resetPlugin ^↗ enhances fields with methods that manage the initial value.

import { createField } from 'roqueform';
import resetPlugin from 'roqueform/plugin/reset';

const field = createField({ hello: 'world' }, [resetPlugin()]);

field.at('hello').setValue('universe');

field.value; // ⮕ { hello: 'universe' }

field.reset();

// 🟡 The initial value was restored
field.value; // ⮕ { hello: 'world' }

Change the initial value of a field:

field.setInitialValue({ hello: 'universe' });

field.at('hello').initialValue; // ⮕ 'universe'

The field is considered dirty when its value differs from the initial value. Values are compared using an equality checker function passed to the resetPlugin ^↗. By default, values are compared using fast-deep-equal ^↗.

const field = createField({ hello: 'world' }, [resetPlugin()]);

field.at('hello').setValue('universe');

field.at('hello').isDirty; // ⮕ true

field.isDirty; // ⮕ true

Get the array of all dirty fields:

field.getDirtyFields();
// ⮕ [field, field.at('hello')]

Subscribe to initial value changes:

field.subscribe(event => {
  if (event.type === 'initialValueChanged') {
    event.target.initialValue;
  }
});

scrollToErrorPlugin ^↗ enhances the field with methods to scroll to the closest invalid field.

import { createField } from 'roqueform';
import scrollToErrorPlugin from 'roqueform/plugin/scroll-to-error';

const field = createField({ hello: 'world' }, [scrollToErrorPlugin()]);

// Associate a field with a DOM element
field.at('hello').ref(document.querySelector('input'));

// Mark a field as invalid
field.at('hello').isInvalid = true;

// 🟡 Scroll to an invalid field
field.scrollToError();
// ⮕ field.at('hello')

This plugin works best in conjunction with the errorsPlugin. If the invalid field was associated with an element via ref ^↗ than Field.scrollToError ^↗ scrolls the viewport the reveal this element.

import { createField } from 'roqueform';
import errorsPlugin from 'roqueform/plugin/errors';
import scrollToErrorPlugin from 'roqueform/plugin/scroll-to-error';

const field = createField({ hello: 'world' }, [
  errorsPlugin(),
  scrollToErrorPlugin(),
]);

field.at('hello').ref(document.querySelector('input'));

field.at('hello').addError('Invalid value');

field.scrollToError();
// ⮕ field.at('hello')

If there are multiple invalid fields, use an index to scroll to a particular field:

const field = createField({ name: 'Bill', age: 5 }, [
  errorsPlugin(),
  scrollToErrorPlugin(),
]);

// Associate fields with DOM elements
field.at('name').ref(document.getElementById('#name'));

field.at('age').ref(document.getElementById('#age'));

// Add errors to fields
field.at('name').addError('Cannot be a nickname');

field.at('age').addError('Too young');

// 🟡 Scroll to the "age" field
field.scrollToError(1);
// ⮕ field.at('age')

uncontrolledPlugin ^↗ updates fields by listening to change events of associated DOM elements.

import { createField } from 'roqueform';
import uncontrolledPlugin from 'roqueform/plugin/uncontrolled';

const field = createField({ hello: 'world' }, [uncontrolledPlugin()]);

field.at('hello').ref(document.querySelector('input'));

The plugin would synchronize the field value with the value of an input element.

If you have a set of radio buttons, or checkboxes that update a single field, call Field.ref multiple times providing each element. For example, let’s use uncontrolledPlugin to manage an array of animal species:

<input type="checkbox" value="Elephant" />
<input type="checkbox" value="Monkey" />
<input type="checkbox" value="Zebra" />

Create a field:

const field = createField({ animals: ['Zebra'] }, [uncontrolledPlugin()]);

Associate all checkboxes with a field:

document
  .querySelectorAll('input[type="checkbox"]')
  .forEach(field.at('animals').ref);

Right after checkboxes are associated, input with the value “Zebra” becomes checked. This happens because the uncontrolledPlugin updated the DOM to reflect the current state of the field.

If the user would check the “Elephant” value, then the field gets updated:

field.at('animals').value; // ⮕ ['Zebra', 'Elephant']

By default, uncontrolledPlugin uses the opinionated element value accessor that applies following coercion rules to values of form elements:

null, undefined, NaN and non-finite numbers are coerced to an empty string and written to value attribute.

To change how values are read from and written to DOM, provide a custom ElementsValueAccessor ^↗ implementation to a plugin, or use a createElementsValueAccessor ^↗ factory to customise the default behaviour:

import { createField } from 'roqueform';
import uncontrolledPlugin, { createElementsValueAccessor } from 'roqueform/plugin/uncontrolled';

const myValueAccessor = createElementsValueAccessor({
  dateFormat: 'timestamp',
});

const field = createField({ date: Date.now() }, [
  uncontrolledPlugin(myValueAccessor),
]);

Read more about available options in ElementsValueAccessorOptions ^↗.

validationPlugin ^↗ enhances fields with validation methods.

import { createField } from 'roqueform';
import validationPlugin from 'roqueform/plugin/validation';

const field = createField({ hello: 'world' }, [
  validationPlugin(validation => {
    // Validate the field value and return some result
    return { ok: true };
  }),
]);

The Validator ^↗ callback receives a Validation ^↗ object that references a field where Field.validate ^↗ was called.

Any result returned from the validator callback, is returned from the Field.validate method:

field.at('hello').validate();
// ⮕ { ok: boolean }

Validator may receive custom options so its behavior can be altered upon each Field.validate call:

const field = createField({ hello: 'world' }, [
  validationPlugin((validation, options: { coolStuff: string }) => {
    // 1️⃣ Receive options in a validator
    return options.coolStuff;
  }),
]);

// 2️⃣ Pass options to the validator
field.validate({ coolStuff: 'okay' });
// ⮕ 'okay'

For asynchronous validation, provide a validator that returns a Promise:

const field = createField({ hello: 'world' }, [
  validationPlugin(async validation => {
    // Do async validation here
    await doSomeAsyncCheck(validation.field.value);
  }),
]);

Check that async validation is pending:

field.isValidating; // ⮕ true

Abort the pending validation:

field.abortValidation();

When Field.validate is called, it instantly aborts any pending validation associated with the field. Use abortController ^↗ to detect that a validation was cancelled:

const field = createField({ hello: 'world' }, [
  validationPlugin(async validation => {
    if (validation.abortController.signal.aborted) {
      // Handle aborted validation here
    }
  }),
]);

field.validate();

// 🟡 Aborts pending validation
field.at('hello').validate();