#jsInfo
j Start
Empty
Counter:
Everything stored in jStartArr per page load - Sort this -
Numbers above:
Go
Filter by name:
Go
Restore last
Restore all
Toggle elapsed
Original or new sort
organize
Toggle funcs
setupLogIntervalDisplay()
Whitelisted items are
unset
empty. this page doesnt use ajax
page load reconciliation
Name
Explanation
Before pg load?
Whitelist?
Yes
No
Tog. whitelist items
Highlight?
Yes
No
Highlight only
Whitelist only
Clean only
All
saveLogReconciliation()
Modified count:
0
Log box elapsed
this div is called #logBoxElapsed, and #logElapsedArea
fillContentWithRandom()
Toggle info card status
#ksCopyPage - alt K to toggle
toggle images - or press a
get order - or press g TOC pos: X
Main title: codecreate.cc
Any subtitle here for the main title
Status:
Click
Reorganize
Currently moving:
.reorganizeTocLineItem
Story
Code create is a coding sandbox with hundreds of features, hundreds of customization options, keyboard shortcuts, many CSS and javascript assitance modules, and integrated brainstorming tools. There are over 200 features, and each feature has a full length video tutorial. This website aims to speed up the coding and design process, while simultaneously becoming more organized. This website is for programmers of all levels, moreso for those who focus on frontend code, and less for people who write strictly backend code. Code create started out as a large set of tools that we were using internally to develop different websites, eventually we decided to make these tools available to the public. After deciding to put all of these tools together in a website, we added even more features and customization options, this process took about four years. Fixing bugs was the most time consuming aspect of this process. They would crop up daily and fixing bugs led to more bugs. You can view our glossary page, which goes into much greater detail, with over 200 full length videos, at at https://codecreate.cc or https://ccindex.cc
Close
Toggle images
#infoSidebar
#infoCards and #infoCardsInner - .allKSCards and .ks_card, PHP var and JS var: ks_cards
cards container .allKSCards and .ks_card
.allKSCards
Previous
Next
Go
Share this page
Message start
Adjectives
.sharingAdjectivesCheckboxes
App description
Name
#sharingNameCheckboxes
Features
.sharingFeaturesCheckboxes
Check out this coding sandbox/Web IDE with over 200 features and over 400 customization settings. https://codecreate.cc
Take a look at this coding sandbox/Web IDE with over 35 coding assistance modules and over 150 keyboard shortcuts. https://codecreate.cc
Copy
Randomize
Code create keyboard shortcuts
- SFP
Filtered by the query:
.currentFilterQuery
Color toggle - C
toggleNewGlossaryPage() and ID is #newGlossaryContainer
toggleGlossaryFullWidth()
Become a beta tester for code create
There are two options for becoming a beta tester
Option A: Apply with our beta tester signup form
We would ask that you view the features on the landing page, and complete a 2 minute survey.
We will give away 15 beta keys per week. Each key is three weeks of beta access.
Option B: Contribute to our indiegogo campaign.
You can become a beta tester by contributing to the indiegogo campaign, to help with server costs.
The cost is $5 per week.
All beta testers will have access to the beta tester discord.
#betaTesterOverlay and #betaTesterContainer
.newExplanationTitle
.modulePageMainVideo
.modulePageScreenshotInfo
.modulePageScreenshotCaption
.newExplanationTitle
Intro
Glossary
Mini
Keyboard shortcuts KB shortcs.
Share
Beta tester signup
Main
Summaries
Modules - detailed
Our mission
Modules - brief
Indiegogo Discord Subreddit
Share
Beta tester signup
Sign up
toggleTopBarOnly() - alt q
Glossary nav:
Nav:
Main
Main
Summaries
Modules
Combined videos
Combined
Prefer screenshots
Screenshots
Prefer videos
Videos
Mini feature showcase
Keyboard shortcuts display
Printing assistance
You may need to adjust the margin settings in the print dialog to ensure no content is cut off when printing.
Glossary options
Overlay on pause is:
on off
.thisOptionCover
Feature summaries:
Shown
.thisOptionCover
Videos:
Shown
Playback speed:
Preferred video location:
Sidebar click setting:
Hide after load
Stay open after load
Hide help buttons Show help buttons
More options
Glossary options
Main Glossary
Mini-glossary
Keyboard shortcuts
#topBarLineTwo
Working with
abcd
Wd:
Ht:
zoom:
Toggle full width
Load remaining groups
#alt_feature_admin_bar - Alt+A
Load more
Currently
X
of
groups loaded
Count of keyboard shortcuts
Main shortcut screen
104
Preset loading shortcuts
10
Top bar shortcuts
10
Bottom bar shortcuts
6
Console
14
Task list
5
Outline creator
9
Total
153
Module listing
#mainCCIntro
Ver. one
Ver. two
Ver. three
Welcome to
Coding sandbox with time saving code assistance modules, brainstorming and organizational tools, and hundreds of keyboard shortcuts
Easy way to hide the video, the video MUST not auto play
Top three features - not final
--Hundreds of customization options
--Various types of coding assistance modulesOver 150 keyboard shortcuts
Some images, not sure what
Why they should use it
.introVid
#loadingPracticeArea
.loadingMainArea and inside is loader
play
pause
stop

#oneStepLoadTime #slideAnimTime
.loadingNotes
Welcome to
Over 500
customization options.
Over 200 features
, each with an explanation video.
Plenty of keyboard shortcuts,
over 150
in total
Over 35
coding assistance modules, to reduce repetitive tasks.
Various CSS, measurement, and color assistance modules.
HTML/Javascript/PHP assistance.
Integrated brainstorming tools.
Draft sections of a page quickly with our item creation tool
Coding lessons for those with little to no experience
Scroll down for much more information
Intro slideshow
Indiegogo Discord Subreddit
#landingTwoSlideshowTitle
#landingTwoSlideshowCaption
Main introduction video
Prefer video
Prefer screenshots
Current style:
Duration:
Toggle practice area
What is code create?
Coding sandbox with time saving code assistance modules, brainstorming and organizational tools, and over 150 keyboard shortcuts.
Our mission
We aim to make coding sandboxes more effective than ever, by providing ample modules and tools to help users work more efficiently and become more organized.
Endless customization.
Hundreds of modifiable GUI colors.
Hundreds of GUI elements to toggle.
Modifiable proportions for the majority of our modules.
Even more customization options in the near future.
Code create modules
Modules
Features
.slideshowBarContentInner
.loader
#slideshowBar
Shown below are summaries of our most well-developed features
Prefer videos
Prefer screenshots
Hundreds of options
hundredsOfOptions
There are over 500 user settings within Code Create.

These settings range from module functionality, GUI display options, customzing colors for the GUI, keyboard shortcut options, and much more.

For the sake of convenience, users can hide rarely changed or rarely used settings.

We have about 30 modules, and each has about 3-15 customizable settings.

In addition, there are plenty of global settings.

There are many more settings than what was shown in this short summary, please visit the main glossary area for much more information.
Hundreds of options
meta: hundredsOfOptions

caption: There are hundreds of user settings and over 250 customizable GUI colors within Code Create.

content: User settings screen with about 40 settings showing
There are hundreds of user settings and over 250 customizable GUI colors within Code Create.
screenshot: User settings screen with about 40 settings showing
caption: There are hundreds of user settings and over 250 customizable GUI colors within Code Create.
vid: settings_tiny
summary: goodLength
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/settings_tiny.m4v and m4v is yes
Over 35 modules
over30Modules
There are various modules within Code Create to assist users with code generation, brainstorming, measurements, CSS generation, and more.

Additionally, there are various modules that allow users to customize their experience, with over 500 settings in total.

Some examples of code generating modules are: the function factory, the styles section of the console, and the item creation module.

Some examples of the brainstorming modules are: the outline creator, task list, and scratchpad modules.

We have a module section available on our glossary page, where users can see the features and utility of each module.
Over 35 modules
meta: over30Modules

caption: There are various modules within Code Create to assist users with code generation, brainstorming, measurements, CSS generation, and more.

content: Show a few modules arranged on the screen
There are various modules within Code Create to assist users with code generation, brainstorming, measurements, CSS generation, and more.
screenshot: Show a few modules arranged on the screen
caption: There are various modules within Code Create to assist users with code generation, brainstorming, measurements, CSS generation, and more.
vid: various_modules_tiny
summary: goodLength
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/various_modules_tiny.mp4 and m4v is no
Over 150 keyboard shortcuts
hundredsOfKeyboardShortcuts
Code create has over 150 keyboard shortcuts

There are over 20 unique modules and each has 3-10 keyboard shortcuts

The majority of the keyboard shortcuts are global shortcuts.

The keyboard shortcuts page shows the majority of the available shortcuts, and we have a separate page that is pre-formatted for printing keyboard shortcuts.

On the keyboard shortcut page, there are several filters available to refine your search.

There are around 20 shortcuts that can have their associated action customized. Keyboard shortcuts can be easily printed from the "print keyboard shortcuts" page.
Over 150 keyboard shortcuts
meta: hundredsOfKeyboardShortcuts

caption: Code create offers over 150 keyboard shortcuts, and the majority of them are shown on the keyboard shortcuts page.

content: Keyboard shortcuts screen
Code create offers over 150 keyboard shortcuts, and the majority of them are shown on the keyboard shortcuts page.
screenshot: Keyboard shortcuts screen
caption: Code create offers over 150 keyboard shortcuts, and the majority of them are shown on the keyboard shortcuts page.
vid: keyboard_shortcuts_smaller
summary: goodLength
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/keyboard_shortcuts_smaller.m4v and m4v is yes
Persistent color picker and color tools
colorTools
There are various tools to assist users with finding the perfect color.

There is the persistent color picker, colors generated from this tool can be easily inserted into your projects or copied to the clipboard.

Users can also acquire colors from the main page or the render area using this tool.

The persistent color picker is also a color converter, which allows users to easily convert between the most common color formats.

Hundreds of colors can be stored in the colors section of the console.

Users can use these colors as is, or in conjunction with CSS rules.

The colors can be copied to the clipboard or inserted into various modules.

Additionally, there is the style editor.

With the style editor, users can make provisional changes to CSS colors in real time.

The provisional changes can be inserted into the code base with one click, or copied to the clipboard.

For even more detail regarding modules that deal with colors, please use the search term "color" on the glossary page.
Persistent color picker and color tools
meta: colorTools

caption: There are various tools to assist users with finding the perfect color.

The persistent color picker, the color section of the console, the style editor, and more.

content: Persistent color picker - alongside console
There are various tools to assist users with finding the perfect color.

The persistent color picker, the color section of the console, the style editor, and more.
screenshot: Persistent color picker - alongside console
caption: There are various tools to assist users with finding the perfect color.

The persistent color picker, the color section of the console, the style editor, and more.
vid: colors_127
summary: okay length
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/colors_127.m4v and m4v is yes
Item creation
itemCreation
The item creation module is one of our most powerful tools that will save anyone that builds pages time. This tool allows users to build entire web pages or portions of a page with a GUI. Start by filling in an draft outline of the div hierarchy - which can be edited at any time. Items can be set as siblings, parents, and children. Then you add in HTML attributes, CSS rules, and javascript listeners, and content. The features of this module that save time are: indentMe-CSS selectors will automatically be generated. indentMe-Duplicating items or sections can be accomplished in a few clicks. indentMe-Moving items around can be accomplished in a few clicks. indentMe-Optionally, add HTML comments to every ending tag, keeping your code more readable. indentMe-Javascript functions such as onclick, or onchange - automatically defined. indentMe-Ex: Item with attribute pair onclick and myFunc():function myFunc() auto generated in javascript area. Users can preview their structures in its dedicated render area, and can preview the compiled HTML file for their structures. At compiling time, users have plenty of export options, or they can save their structure to the server. Users can also parse any HTML code into the item creation area.
Item creation
meta: itemCreation

caption: The item creation section allows users to make HTML, CSS, and Javascript with a GUI. Users can utilize various HTML tags, CSS rules, HTML attributes, Javascript listeners, and more. There are various export options.

content:
The item creation section allows users to make HTML, CSS, and Javascript with a GUI. Users can utilize various HTML tags, CSS rules, HTML attributes, Javascript listeners, and more. There are various export options.
screenshot:
caption: The item creation section allows users to make HTML, CSS, and Javascript with a GUI. Users can utilize various HTML tags, CSS rules, HTML attributes, Javascript listeners, and more. There are various export options.
vid: item_creation
summary:
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/gallery/itemCreation.webm and m4v is special webm
Extensive GUI color and layout customization
extensiveGUIColor
There are over 250 customizable GUI colors within code create.

There are also hundreds of GUI elements that can be toggled or modified.

Many modules are fully color customizable.

Full color customization means that every item within that module can have its color customized.

The proportions for various modules can be customized.

The proportions include height, width, scale, opacity, and more.

Every item on the top or bottom bars can be toggled, and have its color customized.

Lastly, various modules within Code create have premade color or layout schemes that can be further customized.

Extensive GUI color and layout customization
meta: extensiveGUIColor

caption: There are over 250 customizable GUI colors within code create and hundreds of GUI elements that can be have its display toggled or altered.

content:
There are over 250 customizable GUI colors within code create and hundreds of GUI elements that can be have its display toggled or altered.
screenshot:
caption: There are over 250 customizable GUI colors within code create and hundreds of GUI elements that can be have its display toggled or altered.
vid: extensive_webbed
summary: goodLength
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/extensive_webbed.webm and m4v is actually webm..
Brainstorming tools
brainstorming
Code create offers various brainstorming/organizational tools, these tools assist users with organizing and brainstorming for their present and upcoming projects.

These tools include the outline creator, task list overlay, and the scratchpad editor.

All of our brainstorming tools offer plenty of customization options.

Lastly, there are several export options, including text, image, and HTML.

Please visit the main glossary entries for any brainstorming tool for more information.
Brainstorming tools
meta: brainstorming

caption: Code create offers various brainstorming/organizational tools, these tools assist users with organizing and brainstorming for their present and upcoming projects.

content: Task list or outline creator or both
Code create offers various brainstorming/organizational tools, these tools assist users with organizing and brainstorming for their present and upcoming projects.
screenshot: Task list or outline creator or both
caption: Code create offers various brainstorming/organizational tools, these tools assist users with organizing and brainstorming for their present and upcoming projects.
vid: brainstorming_tiny_125
summary: finished
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/brainstorming_tiny_125.m4v and m4v is yes
Glossary page
glossary
There are over 200 unique features on the glossary page.

Each feature has a video and text entry, explaining its purpose and utility in detail.

These videos showcase the features, but these videos can also be used for tutorial purposes.

There are over 3 hours of tutorials for our features.

The features are organized by groups and there are about 20 groups.

Lastly, users can search for terms within the glossary using the search dialog.
Glossary page
meta: glossary

caption: There are over 200 unique features on the glossary page.

Each feature has a video and text entry, explaining its purpose and utility in detail.

content: Show the main glossary page, with its different levels
There are over 200 unique features on the glossary page.

Each feature has a video and text entry, explaining its purpose and utility in detail.
screenshot: Show the main glossary page, with its different levels
caption: There are over 200 unique features on the glossary page.

Each feature has a video and text entry, explaining its purpose and utility in detail.
vid: unique_features_tiny
summary: goodLength
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/unique_features_tiny.mp4 and m4v is no
CSS assistance part one
CSSAssistanceOne
There are various modules geared toward generating CSS rules and creating styles for elements.

The style editor allows users to make provisional changes to their CSS in real time.

Finding CSS selectors for modification is simple with the style editor, and is done with a couple clicks within the render area.

The item creation section allows users to create HTML, CSS, and Javascript code for new elements simultaneously, using a GUI.

Users can select between preset and custom attributes, and custom attributes can be saved for the future.

Upon pressing add, all of the code will be added to the appropriate editors.

CSS assistance part one
meta: CSSAssistanceOne

caption: There are various modules geared toward generating CSS rules and creating styles for elements.

content: Show the style editor and item creation side by side
There are various modules geared toward generating CSS rules and creating styles for elements.
screenshot: Show the style editor and item creation side by side
caption: There are various modules geared toward generating CSS rules and creating styles for elements.
vid: css_smaller_one
summary: good length - maybe
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/css_smaller_one.mp4 and m4v is no
CSS assistance part two
CSSAssistanceTwo
With the style section of the console, users can add the most popular CSS rules with just a few keystrokes, these rules will be properly formatted and inserted in the location of your choice.

Users can use the keyboard to select their measurement units (px, %, em, etc.) and users can also use the keyboard to multiply or divide numbers by factors of ten.

The window dimensions (width, height, and current zoom) can be shown at any time in the render area. Additionally, users can see the dimensions of the entire page by selecting that option in the bottom bar.

Valid min-width and max-width media queries can be copied to the clipboard in one click by clicking on the width or height.

CSS assistance part two
meta: CSSAssistanceTwo

caption: With the style section of the console, users can quickly write CSS rules.

content: Show the style editor and item creation side by side
With the style section of the console, users can quickly write CSS rules.
screenshot: Show the style editor and item creation side by side
caption: With the style section of the console, users can quickly write CSS rules.
vid: css_smaller_two
summary: good length - maybe
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/css_smaller_two.mp4 and m4v is no
CSS assistance part three
CSSAssistanceThree
The CSS toolbox assists users with centering elements, creating CSS scrollbars, and creating alternating CSS row color patterns.

Users have the choice of centering with padding, margin, text align, and more.

Users can select horizontal centering, vertical centering, or both.

Additionally, users can create CSS scrollbar styles with the CSS toolbox.

Users can change the main background, height, width, handle colors, and more.

Lastly, users can preview their changes within the sample area.
CSS assistance part three
meta: CSSAssistanceThree

caption: Code create offers support for CSS centering, CSS scrollbars, and CSS selectors.

content:
Code create offers support for CSS centering, CSS scrollbars, and CSS selectors.
screenshot:
caption: Code create offers support for CSS centering, CSS scrollbars, and CSS selectors.
vid: css_smaller_three
summary:
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/css_smaller_three.mp4 and m4v is no
Element inspector
element_inspector
The element inspector is a tool that allows users to view the CSS properties for any element, which can be useful when you would like to find out the properties of a certain element.

This is accomplished by middle clicking on the element while the element inspector is open.

The element inspector can be toggled at any time with Control+Shift+Space.

After inspecting an element, the property value or rule can be copied to the clipboard in one click.

The element tree associated with the element inspector allows users to see the properties of all the initial element's ancestors.

There are several layout options for the element inspector, including scale, position, and opacity.

The CSS rules that are inspected can be changed at any time.

Additionally, the element inspector can be fully color customized.

Lastly, there are a few more features that were not mentioned, please visit the main glossary section for more information.
Element inspector
meta: element_inspector

caption: The element inspector is a tool that allows users to view the CSS properties for any element, which can be useful when you would like to find out the properties of a certain element.

content: unknown
The element inspector is a tool that allows users to view the CSS properties for any element, which can be useful when you would like to find out the properties of a certain element.
screenshot: unknown
caption: The element inspector is a tool that allows users to view the CSS properties for any element, which can be useful when you would like to find out the properties of a certain element.
vid: element_inspector_tiny
summary: good length - maybe
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/element_inspector_tiny.m4v and m4v is yes
Console
console
The shortcuts section is an interactive console that allows user to save a wide variety of code snippets.

The console saves custom text snippets and links them to shortcut keys. When you press the shortcut key, the snippet will be written to the editors.

The console can also insert text into a few locations besides the editors.

These snippets are stored in groups, and users can save over 500 code snippets.

These snippets can be utilized for every language that code create suports.

With the styles section of the console, users can enter various CSS rules with minimal keystrokes.

When in the style section, one keystroke will select the property, and the next keystroke will select the value.

After selecting the value, you will be returned to property selection automatically.

Apart from text and style snippets, the console can also store hundreds of custom colors.

The same principle applies, enter a key, and the color will be written to the editors.

Colors are also stored in groups, and users can store over 500 CSS colors.

All major color formats are supported.

Colors can be inserted as-is, or in conjunction with CSS rules.

There are many more features not mentioned in this short summary.

Please visit the main glossary section for more information.
Console
meta: console

caption: The shortcuts section is an interactive console that allows user to save a wide variety of code snippets and CSS colors.

content: Show the console alongside editors
The shortcuts section is an interactive console that allows user to save a wide variety of code snippets and CSS colors.
screenshot: Show the console alongside editors
caption: The shortcuts section is an interactive console that allows user to save a wide variety of code snippets and CSS colors.
vid: shortcuts_tiny
summary: length is fine. this is kinda tough
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/shortcuts_tiny.m4v and m4v is yes
Function factory
function_factory
The function factory assists with the creation of over 60 functions within Javascript and PHP.

There is also support for jQuery and Wordpress.

The function factory can save programmers time, as programmers of all levels occasionally search for correct function syntax.

To use the function factory, enter the arguments into the appropriate boxes, and then press "create function".

The page will return a correctly formatted function.

There are a few export options, including copying to the clipboard or inserting into your codebase.

There are plenty of customizable settings and keyboard shortcuts within the function factory.

For more information on the function factory, please visit the main glossary section, where there are more than 10 presentations available.
Function factory
meta: function_factory

caption: The function factory assists with the creation of over 60 functions. across Javascript, PHP, Wordpress, and jQuery.

content: show parts of function factory
The function factory assists with the creation of over 60 functions. across Javascript, PHP, Wordpress, and jQuery.
screenshot: show parts of function factory
caption: The function factory assists with the creation of over 60 functions. across Javascript, PHP, Wordpress, and jQuery.
vid: function_factory_128
summary: goodLength
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/function_factory_128.m4v and m4v is yes
Scratchpad
scratchpad
The scratchpad editor is a place for users to brainstorm, store code snippets, or write provisional code.

The text entered into the scratchpad editor does not get rendered nor compiled.

Users can choose the programming language for the scratchpad editor.

Sessions in the scratchpad editor can be saved, and these are saved separately from the main editor sessions.

Lastly, the editor theme within the scratchpad editor is customizable.
Scratchpad
meta: scratchpad

caption: The scratchpad editor is a place for users to brainstorm, store code snippets, or write provisional code.

The text entered into the scratchpad editor does not get rendered nor compiled.

content: unknown
The scratchpad editor is a place for users to brainstorm, store code snippets, or write provisional code.

The text entered into the scratchpad editor does not get rendered nor compiled.
screenshot: unknown
caption: The scratchpad editor is a place for users to brainstorm, store code snippets, or write provisional code.

The text entered into the scratchpad editor does not get rendered nor compiled.
vid: scratchpad_tiny
summary: goodLength
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/scratchpad_tiny.mp4 and m4v is no
Rulers and measurement
rulersMeasurement
There are various tools available to help users achieve pixel perfect accuracy.

One of these tools is the page ruler module. These rulers are color customizable and they can be moved around the screen freely.

There are a few layout options available for rulers as well.

Gridlines are available to assist with alignment, there are various gridline sizes available.

Users can plot points or lines at any times to assist with testing alignment or visualizing distances between elements.

This can be done by entering coordinates or by clicking with the mouse.

The height, width and color of these points or lines can be completely customized.

This was a short introduction for the measurement tools offered within Code create.

More information on our measurement tools can be found on the glossary page.
Rulers and measurement
meta: rulersMeasurement

caption: There are various tools available to help users achieve pixel perfect accuracy.

For example, there is the page rulers, gridlines, and the point plotting dialog.

content: Ruler and point plotting
There are various tools available to help users achieve pixel perfect accuracy.

For example, there is the page rulers, gridlines, and the point plotting dialog.
screenshot: Ruler and point plotting
caption: There are various tools available to help users achieve pixel perfect accuracy.

For example, there is the page rulers, gridlines, and the point plotting dialog.
vid: measurement_tiny
summary: goodLength
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/measurement_tiny.mp4 and m4v is no
Beginner coding lessons
beginnerCodingLessons
Code create users have access to beginner coding lessons, for those with little to no experience. With these lessons, users can build their knowledge to be able to start to develop websites. Exercises are offered in these lessons, so users can practice what they have learned. Additionally, these lessons discuss how users can hone their skills by focusing on building their own projects. If no project comes to mind at the moment, we also discuss sample projects users can focus on to improve their skills, while they think of ideas for their own projects Lastly, these lessons also go into the psychology of coding: what to keep in mind and what to avoid. These lessons can be found at https://codingclasses.cc
Beginner coding lessons
meta: beginnerCodingLessons

caption: Code create users have access to beginner coding lessons.

content:
Code create users have access to beginner coding lessons.
screenshot:
caption: Code create users have access to beginner coding lessons.
vid: beginnerCodingLessons
summary: goodLength
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/modules/beginnerCodingLessons.mp4 and m4v is no
The page only needs to be loaded once
loadedOnce
The main page only needs to be loaded once.

All of our features, apart from just a few exceptions, can be accessed without reloading the page.

The exceptions are: the preview page, the print keyboard shortcuts page, and the feature voting/bug reporting page.

Loading your sessions or other users' sessions is done without reloading the page.
The page only needs to be loaded once
meta: loadedOnce

caption: The main page only needs to be loaded once.

All of our features, apart from just a few exceptions, can be accessed without reloading the page.

content: Unclear - maybe nothing?
The main page only needs to be loaded once.

All of our features, apart from just a few exceptions, can be accessed without reloading the page.
screenshot: Unclear - maybe nothing?
caption: The main page only needs to be loaded once.

All of our features, apart from just a few exceptions, can be accessed without reloading the page.
vid: load_once_smaller
summary: goodLength
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/load_once_smaller.mp4 and m4v is no
Plenty of customization options for the main editor
mainEditorCustomization
The main editors module is very customizable.

The color scheme, font size, programming language, width, height, and amount of editors are all customizable.

Additionally, there are more options for the main editors in the main editor customization dialog.
Plenty of customization options for the main editor
meta: mainEditorCustomization

caption: The main editors module is very customizable.

The color scheme, font size, programming language, width, height, and amount of editors are all customizable.

content: Main editor customization screen
The main editors module is very customizable.

The color scheme, font size, programming language, width, height, and amount of editors are all customizable.
screenshot: Main editor customization screen
caption: The main editors module is very customizable.

The color scheme, font size, programming language, width, height, and amount of editors are all customizable.
vid: main_editor_customization
summary: goodLength
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/main_editor_customization.mp4 and m4v is no
Customizable shortcut areas
customizableShortcutAreas
Both the top and bottom bars are fully customizable, and you will only see what you choose to put on these bars.

Each bar has customizable shortcut areas, where users can place shortcuts to their favorite modules.

Every color on each bar can be fully customized, with over 35 customizable colors in total.

Also, every item on each bar can have its display individually toggled.
Customizable shortcut areas
meta: customizableShortcutAreas

caption: Both the top and bottom bars are fully customizable, and you will only see what you choose to put on these bars.

content: Show the bar, alongside its customization features
Both the top and bottom bars are fully customizable, and you will only see what you choose to put on these bars.
screenshot: Show the bar, alongside its customization features
caption: Both the top and bottom bars are fully customizable, and you will only see what you choose to put on these bars.
vid: top_bottom_tiny
summary: goodLength
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/top_bottom_tiny.mp4 and m4v is no
Preview page
previewPage
The preview page is a separate page that can preview the code written on the main page.

This can be ideal for users with two monitors, writing the code within one browser window, and previewing the output in a different browser window.

The majority of the features on the main page are also accessible on the preview page.

For example, the style editor, point plotting dialog, compiled code editor, the function factory, and more, are all available on the preview page.

Some modules within the preview page can pass data back to the main page.

The preview page also has plenty of customizable settings and a few customizable menus.

There are quite a few features for the preview page that were not mentioned in this short summary.

Please take a look at the main glossary entries for more information.
Preview page
meta: previewPage

caption: The preview page is a separate page that can preview the code written on the main page.

This can be ideal for users with two monitors, writing the code within one browser window, and previewing the output in a different browser windowfw

content: Show preview page, alongside main page
The preview page is a separate page that can preview the code written on the main page.

This can be ideal for users with two monitors, writing the code within one browser window, and previewing the output in a different browser windowfw
screenshot: Show preview page, alongside main page
caption: The preview page is a separate page that can preview the code written on the main page.

This can be ideal for users with two monitors, writing the code within one browser window, and previewing the output in a different browser windowfw
vid: preview_tiny
summary: goodLength
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/preview_tiny.mp4 and m4v is no
Compiled code editor
compiledCode
The compiled code editor takes all the frontend code from the active languages and places it into an HTML file.

From there, the code can be downloaded or copied to the clipboard.

Edits can be made in the compiled code screen before copying or downloading, the edits made within the compiled code editor do not get passed back to the main editors.

There are a couple customization options for the compiled editor, including the editor theme and font size.

There are more features regarding the compiled editor area, Please visit the main glossary section for more information.
Compiled code editor
meta: compiledCode

caption: The compiled code editor takes all the frontend code from the active languages and places it into an HTML file.

From there, the code can be downloaded or copied to the clipboard

content: Show compiled code editor
The compiled code editor takes all the frontend code from the active languages and places it into an HTML file.

From there, the code can be downloaded or copied to the clipboard
screenshot: Show compiled code editor
caption: The compiled code editor takes all the frontend code from the active languages and places it into an HTML file.

From there, the code can be downloaded or copied to the clipboard
vid: compiled_tiny
summary: goodLength
lrl - link is https://d3pofc1he7kw4v.cloudfront.net/module_summary_combined/ks/compiled_tiny.mp4 and m4v is no
toggleJSInfo
{{obj['metaKey']}}
{{groupObj['nice']}}
Codecreate keyboard shortcuts
Filter:
{{label}}
Key
Shortcut
Filter: All
{{subTypeObject[subType]}}
{{theValue}}
{{moduleKeyboardFilterObject[keyboardShortcutModuleFilter]}}
{{theValue}}
{{theKey}}
Alt+
Number
Shift +
F-Key
Alt +
Shift +
{{keyObject["theShortcutKey"]}}
Ctrl +
Shift +
{{keyObject["theShortcutKey"]}}
Alt+Shift
Number
F-Key
Ctrl+Shift
Number
+ `
Ctrl+Alt+ Shft+
Minus sign
Ctrl+Alt+ Shft+
Ctrl+Alt+ Shft
Number
+ `
E
code: {{ show_cc_key_code(theKey) }}
{{keyObject['label']}}
{{keyObject['group']}}
Available
No search results for query:
borderOnly
Search:
Search query:
Go
Clear
Main glossary page - helpButton for count loaded on load...
Main glossary page
Filter:
Go
Clear
Search query:
Search:
Search
Clear
.combinedVideoOperations admins only...

$fileName is clipboard_group_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_clipboard_group_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_clipboard_group_combined_video_id.togglePlay()
player_v_clipboard_group_combined_video_id.playing for the state
player_v_clipboard_group_combined_video_id.play()
player_v_clipboard_group_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'clipboard_group_combined_video_id')
Clipboard group
$fileName is clipboard_group_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/clipboard_group_combined.mp4

and vidExists is 1
Combined videos for Clipboard group
Clipboard group
Timestamps for this video
Copy current link to clipboard
:
00:03
Copy editor content
:
00:45
Snippet to clipboard
:
01:02
.combinedVideoOperations admins only...

$fileName is console_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_console_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_console_combined_video_id.togglePlay()
player_v_console_combined_video_id.playing for the state
player_v_console_combined_video_id.play()
player_v_console_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'console_combined_video_id')
Console
$fileName is console_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/console_combined.mp4

and vidExists is 1
Combined videos for Console
Console
Timestamps for this video
Code create console
:
00:03
Adding new shortcuts and groups
:
02:55
Auto-hiding numeric functions
:
03:58
Border and outline
:
05:00
Changing CSS attributes with the keyboard
:
05:48
Changing shortcut/color sets with mouse or keyboard
:
07:32
Color picker
:
07:53
Color sets
:
08:34
Console module selector
:
09:23
Console output size
:
09:54
Default color set
:
10:26
Measurement units
:
10:48
Multipliers for numeric snippets
:
11:36
Shortcut area scrolling
:
12:17
Toggle important button
:
12:45
Using custom values
:
13:33
.combinedVideoOperations admins only...

$fileName is all_features by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_all_features_video_id -- click here to copy to clipboard

with the above you can do... player_v_all_features_video_id.togglePlay()
player_v_all_features_video_id.playing for the state
player_v_all_features_video_id.play()
player_v_all_features_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'all_features_video_id')
All features
$fileName is all_features,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/all_features.mp4

and vidExists is 1
Combined videos for All features
All features
Timestamps for this video
Clipboard group
:
00:00:02
Copy current link to clipboard
:
00:00:09
Copy editor content
:
00:00:51
Snippet to clipboard
:
00:01:07
Colors group
:
00:01:59
Basic color lists
:
00:02:08
Color converter
:
00:02:40
Persistent color picker
:
00:03:16
Persistent color picker color format
:
00:04:47
Persistent picker settings
:
00:05:32
Support all color formats
:
00:06:21
Using or copying color picker colors
:
00:06:42
Condensed page
:
00:07:17
Condensed layout control
:
00:07:25
Condensed layouts
:
00:08:00
Condensed page
:
00:08:40
Console
:
00:09:16
Main console entry
:
00:09:24
Adding new shortcuts and groups
:
00:12:16
Auto-hiding numeric functions
:
00:13:19
Border and outline
:
00:14:21
Changing CSS attributes with the keyboard
:
00:15:10
Changing shortcut/color sets with mouse or keyboard
:
00:16:54
Color picker
:
00:17:14
Color sets
:
00:17:55
Console module selector
:
00:18:45
Console output size
:
00:19:16
Default color set
:
00:19:47
Measurement units
:
00:20:09
Multipliers for numeric snippets
:
00:20:57
Shortcut area scrolling
:
00:21:38
Toggle important button
:
00:22:05
Using custom values
:
00:22:53
Editors
:
00:23:53
Active language accents
:
00:24:00
Active language highlight
:
00:24:52
Additional editor theme features
:
00:25:07
Automatic and manual rendering
:
00:26:22
Caret editor
:
00:27:09
Default languages
:
00:30:17
Default templates one and two
:
00:30:51
Download code
:
00:31:32
Editor font size
:
00:32:18
Editor themes/Language accent colors
:
00:32:53
Four languages per editor
:
00:34:49
Full width/height tabs view
:
00:35:30
Increase/decrease editor size with keyboard
:
00:36:07
Language syntax checking
:
00:36:41
Languages admin menu
:
00:37:33
Maximize editor on:
:
00:38:12
Minimize/maximize languages buttons
:
00:38:58
Modifying divider colors
:
00:39:24
Resizable panels for editors and modules
:
00:40:15
Save/Load/Fork/New
:
00:42:46
Suspending languages from session
:
00:43:20
Switching/Maximizing with F-Keys
:
00:44:04
Templates
:
00:44:28
Variable amount of languages
:
00:45:37
Variable/Locked language modes
:
00:46:24
View compiled code
:
00:47:07
Function factory
:
00:47:38
Function factory
:
00:47:47
Common functions (PHP, jQuery,Javascript, Wordpress)
:
00:49:46
Function Factory input shortcuts
:
00:52:22
Function factory custom functions
:
00:53:02
Function factory default values
:
00:54:20
Function factory keyboard control
:
00:54:51
Function factory settings
:
00:58:04
Hiding and showing factories
:
00:58:30
General
:
00:58:52
All ajax
:
00:59:01
Auto Hide GUI
:
00:59:33
Autosaving
:
01:00:10
Backups of everything that you save
:
01:00:48
Different ways to resize sections
:
01:01:37
Easy access from address bar
:
01:02:20
Feature voting and bug reporting
:
01:02:40
Filtering the current menu by keyword
:
01:04:05
Find and replace
:
01:05:01
Hiding unused languages
:
01:06:05
Javascript code converter
:
01:06:43
Javascript key display
:
01:07:46
Load session by link
:
01:08:19
Modified indicator
:
01:09:24
Nav menu
:
01:10:20
Support backend and other languages
:
01:10:45
Item Creation/Style editor
:
01:11:26
Item creation
:
01:11:35
Style editor
:
01:14:03
Add custom selector
:
01:15:45
CSS rule editor
:
01:16:13
CSS rules preview container
:
01:17:45
Load page elements previously created
:
01:19:06
Make multiple elements with the same attributes
:
01:20:08
Quick add selectors
:
01:21:06
Remove styles without confirm
:
01:21:33
Store custom values for later use
:
01:22:07
Style editor element tree
:
01:23:12
jQuery or vanilla JS listeners
:
01:24:32
Keyboard shortcuts
:
01:25:21
Changing layouts with the alt key
:
01:25:29
Customizable numeric keyboard shortcuts
:
01:25:57
Esc button to close overlays
:
01:26:52
Keyboard shortcuts screen
:
01:27:20
Create CSS selectors with keyboard combinations
:
01:28:15
Printable list of keyboard shortcuts
:
01:29:04
Quickly switch focus between editor and console
:
01:29:40
Layouts
:
01:30:46
Bottom bar buttons filter
:
01:30:54
Bottom bar color customization
:
01:31:36
Bottom bar shortcut area
:
01:32:16
Editor options
:
01:32:58
Full width/height labels
:
01:34:27
Layouts basic information
:
01:35:26
Name display
:
01:36:45
Name is shown when switching presets
:
01:37:27
Overlay
:
01:37:44
Precise editor adjustment screen
:
01:39:28
Preset list
:
01:40:00
Preset list click function
:
01:40:43
Preset name locations
:
01:41:25
Resizing sections will update the layout
:
01:42:05
Save editor sizes
:
01:42:48
Setting a preset as initial
:
01:43:15
Showing/hiding the top bar
:
01:43:57
Size in px when resizing
:
01:44:29
Skip auto adjusting
:
01:44:50
Submenu customization
:
01:45:30
Top bar customization
:
01:46:21
Various preset options
:
01:47:37
Measurements and ruler
:
01:50:05
Click to plot
:
01:50:12
More click to plot settings
:
01:50:56
Gridlines
:
01:52:09
More page measurement features
:
01:52:51
Persistent ruler
:
01:53:43
Plotting lines
:
01:54:49
Point plotting
:
01:55:46
Removing plotted points
:
01:57:57
Render and page measurement
:
01:58:23
Ruler settings
:
01:58:57
Options
:
02:00:03
Hiding menu items
:
02:00:11
Hundreds of user options to customize experience
:
02:00:55
Outline creator
:
02:01:45
Outline creator GUI
:
02:01:53
Outline creator keyboard shortcuts
:
02:03:43
Outline creator search
:
02:04:51
Outline creator settings
:
02:05:38
Outline item symbols
:
02:07:44
Save outline as image
:
02:09:25
Preview page
:
02:09:51
Code preview basic information
:
02:09:58
Additional options
:
02:10:53
Constant code rendering
:
02:11:11
Load new preview
:
02:12:25
Open on main page
:
02:13:29
Preview bottom bar shortcut area
:
02:13:46
Preview page auto reload
:
02:15:03
Preview page fork
:
02:15:56
Preview page modified indicator
:
02:16:46
Preview page style editor
:
02:17:21
Preview top bar customization
:
02:18:27
Real time code rendering
:
02:19:52
Render area measurement settings
:
02:21:19
Toggle top and bottom bars
:
02:22:26
Reminder boxes
:
02:22:55
Changing content of the reminder boxes
:
02:23:02
Reminder box color/scale/opacity
:
02:23:32
Reminder box location/display status
:
02:24:18
Reminder box title
:
02:25:33
Reminder/recording menu
:
02:25:54
Saving/loading reminder box content and layout
:
02:26:34
Toggle reminder box display
:
02:27:07
Scratchpad module
:
02:27:20
Additional scratchpad options
:
02:27:29
Autosaving the scratchpad
:
02:28:11
Scratchpad module
:
02:28:34
Sessions
:
02:29:20
Create session from address bar
:
02:29:27
Customize new session
:
02:29:45
New session options
:
02:30:37
More new session options
:
02:31:45
New session shortcuts
:
02:32:21
Predictable urls
:
02:32:58
Recent sessions menu and Show all sessions menu
:
02:33:48
Search user sessions
:
02:35:05
Session descriptions
:
02:35:50
Session privacy
:
02:36:36
Shortcuts
:
02:37:08
Action before entering shortcuts
:
02:37:16
Activate/deactivate/hide shortcut groups
:
02:38:00
Custom shortcut and color groups
:
02:39:10
Default shortcut group per language
:
02:40:14
Quick shortcut switch
:
02:41:22
Reverting shortcuts to saved version
:
02:42:07
Shortcut groups
:
02:42:46
Shortcut manager
:
02:44:59
Shortcut sharing
:
02:46:15
Shortcuts insertion point
:
02:47:35
Styles shortcut group
:
02:48:10
Task list
:
02:50:55
Integrated task list
:
02:50:59
Saving task list as image
:
02:52:54
Task list keyboard shortcuts
:
02:53:20
Task list search
:
02:54:34
Task list settings
:
02:55:19
Workflow chains
:
02:56:59
Persistent chain graphic
:
02:57:04
Workflow chains
:
02:58:26
Workflow chains customization
:
03:01:47
.combinedVideoOperations admins only...

$fileName is colors_group_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_colors_group_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_colors_group_combined_video_id.togglePlay()
player_v_colors_group_combined_video_id.playing for the state
player_v_colors_group_combined_video_id.play()
player_v_colors_group_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'colors_group_combined_video_id')
Colors group
$fileName is colors_group_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/colors_group_combined.mp4

and vidExists is 1
Combined videos for Colors group
Colors group
Timestamps for this video
Basic color lists
:
00:04
Color converter
:
00:35
Persistent color picker
:
01:12
Persistent color picker color format
:
02:43
Persistent picker settings
:
03:27
Support all color formats
:
04:17
Using or copying color picker colors
:
04:37
.combinedVideoOperations admins only...

$fileName is condensedgroup_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_condensedgroup_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_condensedgroup_combined_video_id.togglePlay()
player_v_condensedgroup_combined_video_id.playing for the state
player_v_condensedgroup_combined_video_id.play()
player_v_condensedgroup_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'condensedgroup_combined_video_id')
Condensed page
$fileName is condensedgroup_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/condensedgroup_combined.mp4

and vidExists is 1
Combined videos for Condensed page
Condensed page
Timestamps for this video
Condensed layout control
:
00:04
Condensed layouts
:
00:38
Condensed page
:
01:17
.combinedVideoOperations admins only...

$fileName is editors_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_editors_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_editors_combined_video_id.togglePlay()
player_v_editors_combined_video_id.playing for the state
player_v_editors_combined_video_id.play()
player_v_editors_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'editors_combined_video_id')
Editors
$fileName is editors_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/editors_combined.mp4

and vidExists is 1
Combined videos for Editors
Editors
Timestamps for this video
Active language accents
:
00:03
Active language highlight
:
00:56
Additional editor theme features
:
01:10
Automatic and manual rendering
:
02:26
Caret editor
:
03:12
Default languages
:
06:20
Default templates one and two
:
06:55
Download code
:
07:36
Editor font size
:
08:22
Editor themes/Language accent colors
:
08:57
Four languages per editor
:
10:53
Full width/height tabs view
:
11:33
Increase/decrease editor size with keyboard
:
12:11
Language syntax checking
:
12:45
Languages admin menu
:
13:37
Maximize editor on:
:
14:16
Minimize/maximize languages buttons
:
15:02
Modifying divider colors
:
15:27
Multiple instances of any language
:
16:18
Organize code
:
16:47
Pre-populate with template
:
17:23
Resizable panels for editors and modules
:
18:01
Save/Load/Fork/New
:
18:50
Suspending languages from session
:
19:24
Switching/Maximizing with F-Keys
:
20:08
Templates
:
20:32
Variable amount of languages
:
21:40
Variable/Locked language modes
:
22:28
View compiled code
:
23:11
.combinedVideoOperations admins only...

$fileName is function_factory_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_function_factory_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_function_factory_combined_video_id.togglePlay()
player_v_function_factory_combined_video_id.playing for the state
player_v_function_factory_combined_video_id.play()
player_v_function_factory_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'function_factory_combined_video_id')
Function factory
$fileName is function_factory_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/function_factory_combined.mp4

and vidExists is 1
Combined videos for Function factory
Function factory
Timestamps for this video
Function factory
:
00:03
Common functions (PHP, jQuery,Javascript, Wordpress)
:
02:04
Function Factory input shortcuts
:
04:39
Function factory custom functions
:
05:17
Function factory default values
:
06:37
Function factory export options
:
07:08
Function factory if/switch
:
08:27
Function factory keyboard control
:
09:24
Function factory settings
:
10:20
Hiding and showing factories
:
10:48
.combinedVideoOperations admins only...

$fileName is general_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_general_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_general_combined_video_id.togglePlay()
player_v_general_combined_video_id.playing for the state
player_v_general_combined_video_id.play()
player_v_general_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'general_combined_video_id')
General
$fileName is general_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/general_combined.mp4

and vidExists is 1
Combined videos for General
General
Timestamps for this video
All ajax
:
00:03
Auto Hide GUI
:
00:36
Autosaving
:
01:13
Backups of everything that you save
:
01:50
Different ways to resize sections
:
02:40
Easy access from address bar
:
03:23
Feature voting and bug reporting
:
03:44
Filtering the current menu by keyword
:
05:08
Find and replace
:
06:05
Hiding unused languages
:
07:09
Javascript code converter
:
07:46
Javascript key display
:
08:49
Load session by link
:
09:22
Modified indicator
:
10:28
Nav menu
:
11:23
Page alerts
:
11:49
Support backend and other languages
:
12:06
.combinedVideoOperations admins only...

$fileName is item_creation_style_editor_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_item_creation_style_editor_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_item_creation_style_editor_combined_video_id.togglePlay()
player_v_item_creation_style_editor_combined_video_id.playing for the state
player_v_item_creation_style_editor_combined_video_id.play()
player_v_item_creation_style_editor_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'item_creation_style_editor_combined_video_id')
Item Creation/Style editor
$fileName is item_creation_style_editor_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/item_creation_style_editor_combined.mp4

and vidExists is 1
Combined videos for Item Creation/Style editor
Item Creation/Style editor
Timestamps for this video
Item creation
:
00:03
Style editor
:
02:32
Add custom selector
:
04:14
CSS rule editor
:
04:43
CSS rules preview container
:
06:15
Load page elements previously created
:
07:36
Make multiple elements with the same attributes
:
08:38
Quick add selectors
:
09:35
Remove styles without confirm
:
10:02
Store custom values for later use
:
10:36
Style editor element tree
:
11:42
jQuery or vanilla JS listeners
:
13:01
.combinedVideoOperations admins only...

$fileName is keyboard_shortcuts_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_keyboard_shortcuts_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_keyboard_shortcuts_combined_video_id.togglePlay()
player_v_keyboard_shortcuts_combined_video_id.playing for the state
player_v_keyboard_shortcuts_combined_video_id.play()
player_v_keyboard_shortcuts_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'keyboard_shortcuts_combined_video_id')
Keyboard shortcuts
$fileName is keyboard_shortcuts_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/keyboard_shortcuts_combined.mp4

and vidExists is 1
Combined videos for Keyboard shortcuts
Keyboard shortcuts
Timestamps for this video
Changing layouts with the alt key
:
00:03
Customizable numeric keyboard shortcuts
:
00:31
Esc button to close overlays
:
01:26
Keyboard shortcuts screen
:
01:54
Create selectors with keyboard combinations
:
02:48
Quickly switch focus between editor and console
:
04:13
.combinedVideoOperations admins only...

$fileName is layouts_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_layouts_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_layouts_combined_video_id.togglePlay()
player_v_layouts_combined_video_id.playing for the state
player_v_layouts_combined_video_id.play()
player_v_layouts_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'layouts_combined_video_id')
Layouts
$fileName is layouts_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/layouts_combined.mp4

and vidExists is 1
Combined videos for Layouts
Layouts
Timestamps for this video
Bottom bar buttons filter
:
00:04
Bottom bar color customization
:
00:45
Bottom bar shortcut area
:
01:25
Cycle layout opacity with keyboard shortcut
:
02:07
Editor options
:
02:21
Full width/height labels
:
03:36
Layouts basic information
:
04:35
Name display
:
05:55
Name is shown when switching presets
:
06:36
Overlay
:
06:53
Precise editor adjustment screen
:
08:38
Preset list
:
09:10
Preset list click function
:
09:53
Preset name locations
:
10:35
Resizing sections will update the layout
:
11:15
Save editor sizes
:
11:57
Setting a preset as initial
:
12:25
Showing/hiding the top bar
:
13:06
Size in px when resizing
:
13:38
Skip auto adjusting
:
14:00
Submenu customization
:
14:40
Top bar customization
:
15:30
Various preset options
:
16:46
.combinedVideoOperations admins only...

$fileName is measurements_ruler_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_measurements_ruler_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_measurements_ruler_combined_video_id.togglePlay()
player_v_measurements_ruler_combined_video_id.playing for the state
player_v_measurements_ruler_combined_video_id.play()
player_v_measurements_ruler_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'measurements_ruler_combined_video_id')
Measurements and ruler
$fileName is measurements_ruler_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/measurements_ruler_combined.mp4

and vidExists is 1
Combined videos for Measurements and ruler
Measurements and ruler
Timestamps for this video
Click to plot
:
00:04
More click to plot settings
:
00:46
Gridlines
:
02:00
More page measurement features
:
02:42
Persistent ruler
:
03:34
Plotting lines
:
04:40
Point plotting
:
05:37
Removing plotted points
:
07:49
Render and page measurement
:
08:13
Ruler settings
:
08:48
.combinedVideoOperations admins only...

$fileName is options_group_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_options_group_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_options_group_combined_video_id.togglePlay()
player_v_options_group_combined_video_id.playing for the state
player_v_options_group_combined_video_id.play()
player_v_options_group_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'options_group_combined_video_id')
Options
$fileName is options_group_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/options_group_combined.mp4

and vidExists is 1
Combined videos for Options
Options
Timestamps for this video
Hiding menu items
:
00:04
Hundreds of user options
:
00:48
.combinedVideoOperations admins only...

$fileName is outline_creator_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_outline_creator_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_outline_creator_combined_video_id.togglePlay()
player_v_outline_creator_combined_video_id.playing for the state
player_v_outline_creator_combined_video_id.play()
player_v_outline_creator_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'outline_creator_combined_video_id')
Outline creator
$fileName is outline_creator_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/outline_creator_combined.mp4

and vidExists is 1
Combined videos for Outline creator
Outline creator
Timestamps for this video
Outline creator GUI
:
00:04
Outline creator keyboard shortcuts
:
01:54
Outline creator search
:
03:01
Outline creator search
:
03:48
Outline creator settings
:
04:35
Outline creator settings
:
06:41
Save outline as image
:
08:22
.combinedVideoOperations admins only...

$fileName is preview_page_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_preview_page_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_preview_page_combined_video_id.togglePlay()
player_v_preview_page_combined_video_id.playing for the state
player_v_preview_page_combined_video_id.play()
player_v_preview_page_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'preview_page_combined_video_id')
Preview page
$fileName is preview_page_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/preview_page_combined.mp4

and vidExists is 1
Combined videos for Preview page
Preview page
Timestamps for this video
Code preview basic information
:
00:03
Additional options
:
00:59
Constant code rendering
:
01:16
Load new preview
:
02:30
Open on main page
:
03:34
Preview bottom bar shortcut area
:
03:52
Preview page auto reload
:
05:08
Preview page fork
:
06:01
Preview page modified indicator
:
06:51
Preview page style editor
:
07:26
Preview top bar customization
:
08:33
Real time code rendering
:
09:57
Render area measurement settings
:
11:24
Toggle top and bottom bars
:
12:31
.combinedVideoOperations admins only...

$fileName is reminders_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_reminders_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_reminders_combined_video_id.togglePlay()
player_v_reminders_combined_video_id.playing for the state
player_v_reminders_combined_video_id.play()
player_v_reminders_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'reminders_combined_video_id')
Reminder boxes
$fileName is reminders_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/reminders_combined.mp4

and vidExists is 1
Combined videos for Reminder boxes
Reminder boxes
Timestamps for this video
Changing content of the reminder boxes
:
00:04
Reminder box color/scale/opacity
:
00:34
Reminder box location/display status
:
01:20
Reminder box title
:
02:35
Reminder/recording menu
:
02:56
Saving/loading reminder box content and layout
:
03:35
Toggle reminder box display
:
04:08
.combinedVideoOperations admins only...

$fileName is scratchpad_group_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_scratchpad_group_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_scratchpad_group_combined_video_id.togglePlay()
player_v_scratchpad_group_combined_video_id.playing for the state
player_v_scratchpad_group_combined_video_id.play()
player_v_scratchpad_group_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'scratchpad_group_combined_video_id')
Scratchpad module
$fileName is scratchpad_group_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/scratchpad_group_combined.mp4

and vidExists is 1
Combined videos for Scratchpad module
Scratchpad module
Timestamps for this video
Additional scratchpad options
:
00:03
Autosaving the scratchpad
:
00:46
Scratchpad module
:
01:08
.combinedVideoOperations admins only...

$fileName is sessions_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_sessions_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_sessions_combined_video_id.togglePlay()
player_v_sessions_combined_video_id.playing for the state
player_v_sessions_combined_video_id.play()
player_v_sessions_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'sessions_combined_video_id')
Sessions
$fileName is sessions_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/sessions_combined.mp4

and vidExists is 1
Combined videos for Sessions
Sessions
Timestamps for this video
Create session from address bar
:
00:04
Customize new session
:
00:22
New session options
:
01:13
More new session options
:
02:22
New session shortcuts
:
02:58
Predictable urls
:
03:35
Recent sessions menu and Show all sessions menu
:
04:25
Search user sessions
:
05:42
Session descriptions
:
06:27
Session privacy
:
07:11
.combinedVideoOperations admins only...

$fileName is shortcuts_combined_fixed by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_shortcuts_combined_fixed_video_id -- click here to copy to clipboard

with the above you can do... player_v_shortcuts_combined_fixed_video_id.togglePlay()
player_v_shortcuts_combined_fixed_video_id.playing for the state
player_v_shortcuts_combined_fixed_video_id.play()
player_v_shortcuts_combined_fixed_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'shortcuts_combined_fixed_video_id')
Shortcuts
$fileName is shortcuts_combined_fixed,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/shortcuts_combined_fixed.mp4

and vidExists is 1
Combined videos for Shortcuts
Shortcuts
Timestamps for this video
Action before entering shortcuts
:
00:03
Activate/deactivate/hide shortcut groups
:
00:48
Custom shortcut and color groups
:
01:58
Default shortcut group per language
:
03:02
Quick shortcut switch
:
04:09
Reverting shortcuts to saved version
:
04:55
Shortcut groups
:
05:33
Shortcut manager
:
07:46
Shortcut sharing
:
09:02
Shortcuts insertion point
:
10:23
Styles shortcut group
:
10:57
.combinedVideoOperations admins only...

$fileName is tasklist_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_tasklist_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_tasklist_combined_video_id.togglePlay()
player_v_tasklist_combined_video_id.playing for the state
player_v_tasklist_combined_video_id.play()
player_v_tasklist_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'tasklist_combined_video_id')
Task list
$fileName is tasklist_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/tasklist_combined.mp4

and vidExists is 1
Combined videos for Task list
Task list
Timestamps for this video
Integrated task list
:
00:03
Saving task list as image
:
01:55
Task list keyboard shortcuts
:
02:21
Task list search
:
03:34
Task list settings
:
04:19
.combinedVideoOperations admins only...

$fileName is workflowchains_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_workflowchains_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_workflowchains_combined_video_id.togglePlay()
player_v_workflowchains_combined_video_id.playing for the state
player_v_workflowchains_combined_video_id.play()
player_v_workflowchains_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'workflowchains_combined_video_id')
Workflow chains
$fileName is workflowchains_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/workflowchains_combined.mp4

and vidExists is 1
Combined videos for Workflow chains
Workflow chains
Timestamps for this video
Persistent chain graphic
:
00:04
Workflow chains
:
01:23
Workflow chains customization
:
04:44
.combinedVideoOperations admins only...

$fileName is modules_combined by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_modules_combined_video_id -- click here to copy to clipboard

with the above you can do... player_v_modules_combined_video_id.togglePlay()
player_v_modules_combined_video_id.playing for the state
player_v_modules_combined_video_id.play()
player_v_modules_combined_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'modules_combined_video_id')
All modules
$fileName is modules_combined,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/modules_combined.mp4

and vidExists is 1
Combined videos for All modules
All modules
Timestamps for this video
Auto hide GUI
:
00:04
Bottom bar
:
00:41
Color shortcuts module
:
01:31
Compiled code editor
:
03:33
Customize new session
:
03:48
Dimensions indicator
:
04:06
Editor themes
:
05:07
Function factory
:
07:03
Item creation
:
07:27
Keyboard shortcuts
:
08:56
Layout overlay
:
09:18
Main editors
:
10:24
Main render
:
11:20
Modified indicator
:
12:27
Outline Creator GUI
:
13:23
Persistent color picker
:
13:49
Point plotting
:
14:31
Preview page
:
15:04
Preview page top/bottom bar area
:
16:06
Reminder menu
:
16:48
Ruler settings and gridlines
:
17:16
Scratchpad editor
:
18:03
Search sessions
:
18:27
Shortcuts manager
:
18:50
Shortcuts section
:
19:16
Show all sessions
:
21:05
Style editor
:
21:21
Task list overlay
:
22:06
Templates
:
23:02
Top main menu
:
23:32
Top sub menu
:
24:18
Top/bottom settings area
:
24:56
User settings
:
25:34
Workflow chains
:
25:49
.combinedVideoOperations admins only...

$fileName is all_summaries by using this filename, you can run
getVideoTime($fileName) or setVideoTime($fileName)
window variable for this player is
player_v_all_summaries_video_id -- click here to copy to clipboard

with the above you can do... player_v_all_summaries_video_id.togglePlay()
player_v_all_summaries_video_id.playing for the state
player_v_all_summaries_video_id.play()
player_v_all_summaries_video_id.pause()
to use this in conjunction with videoControl, you would do... videoControl(v_'all_summaries_video_id')
All summaries
$fileName is all_summaries,

vidPath is '/opt/bitnami/wordpress/jr4/combined_vids/all_summaries.mp4

and vidExists is 1
Combined videos for All summaries
All summaries
Timestamps for this video
Additional languages
:
00:04
Beginner friendly tools
:
00:27
Brainstorming and organizational tools
:
02:30
Color shortcuts
:
03:22
Console and shortcuts summary
:
05:24
CSS rules preview
:
07:15
Code create is customizable and flexible
:
09:24
Customize new session
:
10:29
Hundreds of options
:
11:02
All expected features are present
:
11:34
Function factory summary
:
12:13
General keyboard shortcuts
:
12:53
Item creation
:
13:23
Layout overlay summary
:
14:52
Only need to load the page once
:
15:56
Main editor customization
:
16:27
Over 190 presentations
:
17:08
Persistent color picker
:
17:45
Predictable URLs
:
18:28
Preview page summary
:
19:00
Rulers and measurement summary
:
20:02
Session privacy
:
20:40
Style editor
:
21:11
Style shortcuts area
:
21:56
Top and bottom bars
:
23:12
User reports
:
24:39
Viewing compiled code
:
25:18
Glossary search
.mainGlossarySearchInner
No results for the term:
theTerm
loadedGlossaryGroups: {{loadedGlossaryGroups}}

.notLoadedGroups
populateNotLoaded()
.mainGlossarySearchTasks
Prefer screenshots
Prefer videos
Load glossary page:
Load combined group:
Load summary page:
Load module page:
Go
Enable all options
A module pg A gloss pg A summ pg
Glossary nav:
Nav:
Go
#glossary_nav_dropdown
Main
Main
Summaries
Modules
Combined videos
Combined
Prefer screenshots
Screenshots
Prefer videos
Videos
.summaryGlossarySidebar
Additional languages
All expected features are present
Beginner friendly tools
Brainstorming and organizational tools
CSS rules preview
Code create is customizable and flexible
Color shortcuts
Console and shortcuts summary
Customize new session
Element inspector
Function factory summary
General keyboard shortcuts
Hundreds of options
Layout overlay summary
Main editor customization
Only need to load the page once
Over 200 presentations
Persistent color picker
Predictable URLs
Preview page
Rulers and measurement summary
Session privacy
Style editor
Style shortcuts area
Top and bottom bars
User reports
Viewing compiled code
All sessions module
Auto hide GUI
Beginner coding lessons
Bottom bar shortcut area
CSS rules preview container
CSS rulesets module
CSS selector GUI
CSS toolbox
Color shortcuts module
Compiled code editor
Customize new session
Dimensions indicator
Editor customization overlay
Element inspector
Feature voting/bug reporting
Function factory
Item creation
Keyboard shortcuts
Layout overlay
Main console module
Main editors
Main render area
Modified indicator
Outline Creator GUI
Persistent color picker
Point plotting
Preview page
Preview page top/bottom bar area
Reminder menu
Ruler settings and gridlines
Scratchpad editor
Search user sessions
Shortcuts manager
Style editor
Task list overlay
Templates
Top main menu
Top sub menu shortcut area
Top/bottom settings area
User settings
Workflow chains
.moduleGlossarySidebar
#glossary_to_do
search and clear search --- -
#page and vue var is alt_feature_page
Group: one
.oneAltGroupContent
Group: two
.oneAltGroupContent