Smarter, livelier, interactive web pages
EasyCoder is a WordPress plugin that lets you control aspects of any web page by adding your own English-like script to the page itself.
WordPress, now powering over 30% of the world’s websites, offers developers a huge range of themes and plugins that govern style, appearance and behavior. Although there are thousands of plugins to choose from there are times when there is no alternative to writing program code to run in the browser, and up till now that meant JavaScript. This can be daunting to WordPress site builders, a high proportion of whom are not programmers, so we developed EasyCoder as a powerful yet easy to use alternative.
EasyCoder is for beginners. It's probably one of the simplest ways to start programming in general and website coding in particular, by keeping to something close to plain English.
EasyCoder is for experts. As a Rapid Application Development (RAD) tool it makes for great productivity, enabling you to build web applications far more quickly. Use it in conjunction with other tools or by itself to avoid huge learning curves and get results more quickly.
Elsewhere in these pages you'll find sample code and complete websites with source code.
Add interactivity to your web pages
Web pages are made up of 3 distinct parts; content, style and interactivity.
Content is provided by the HTML of the page, which defines the text and images and how they are laid out. Style is done by CSS, which governs the appearance of those elements; colors, sizes and so on. Interactivity - what happens when a button is clicked or some other event occurs - is done with JavaScript. When you need to add interactivity to a web page you may find a plug-in that does what you need, but if you can't, what then?
EasyCoder lets you add English-like scripts directly to your web pages, that do what JavaScript does but make it much easier. Now anyone can spice up their pages without having to leave their favorite HTML editor. Scripting gives you complete control over the details of what you want to achieve.
EasyCoder lets you adjust the appearance of your pages without the need to tinker with theme files and often removes the need to load a new page when users interact with your content. It includes REST queries that make it easy to add content on the fly from remote websites or from your own website, and graphical features that you can use to create simple animations or even games.
Click the Next button above to read more.
Did you notice that when you clicked the button the text changed instantly, without the usual delay to fetch a new page? (If you didn't, then click Previous and try again.) The reason for the instant change is that all the text is contained in the page downloaded from the server, and the job of the EasyCoder script is to choose which section to make visible. This is one of the more common uses for embedded scripts; to instantly substitute parts of the page content when they're needed.
WordPress sites often have all the bulk of their content under the home tab, resulting in a very long page containing many sections that can be difficult to navigate when looking for a particular section. By using a simple script these sections can be organised as overlays that appear when a button or link is clicked and come instantly into view without the screen jumping or scrolling.
EasyCoder scripts are part of the page itself, so you write scripts in your favorite HTML editor (for WordPress that means the page editor, mostly in Text mode) and test it immediately to see the result.
You can see the script for any page - including this one - by viewing the page source (Control-U in most browsers). It may look wordy but in fact scripts often take up less room than their equivalent JavaScript and are much easier to read, especially by non-programmers.
If you prefer you can download scripts on demand from a database accessed by a REST server. EasyCoder includes one of these, that uses tables added to your WordPress installation. Scripts can request other scripts so there is virtually no limit to the size of program that can be managed, broken down into bite-sized chunks. Scripts accessed in this way remain hidden from the page source, allowing you to keep your algorithms a secret.
By now you may have been curious enough to click the Animate button. This is another simple demonstration of what a script can do; to manipulate parts of the page. Here it runs the background through a sequence of colors, taking a few seconds to complete.
To help you debug your scripts, EasyCoder has its own single-step tracer that lets you place breakpoints in your scripts, examine variables and step through commands one by one. To see this happening, click the Trace button then click Animate to see the same animation run under control of the tracer, displaying some of its variables at each step.
The tracer control panel can be placed anywhere in your page, simply by adding a <div> with a special id. Here we've chosen to place it in the sidebar to avoid altering the appearance of the main content area. It displays a panel in which trace information appears, and buttons to run the program (up to the next breakpoint) and step one instruction.
EasyCoder can be used to control image-related tasks such as slideshows:
EasyCoder is under development and may not yet have all the features you need. More are being added but if there's one you particularly want you can request it by contacting us. The Examples page will have examples of all the major features that are currently implemented.
You can email us at info@easycoder.software. We welcome all comments and suggestions. You can also join our Slack channel:
If you are a programmer, EasyCoder is hosted at GitHub. If you would like to join the project just let us know.
!
! EasyCoder main script
! Declare variables
img DuckThink
div Frame
div Intro
div Sections
div Section
div Contact
img Images
button TellMeMoreButton
button StartButton
button NextButton
button PreviousButton
button AnimateButton
button TraceButton
button ContactButton
variable TellMeMore
variable CurrentSection
variable NSections
variable Color
variable Red
variable Green
variable Blue
variable Tracing
variable CurrentImage
variable Value
variable UpDown
! Set up the tracer
trace Red Green Blue Color vertical
clear Tracing
! Set up the sections of this page
put 7 into NSections
set the elements of Section to NSections
put 0 into CurrentSection
while CurrentSection is less than NSections
begin
index Section to CurrentSection
attach Section to `easycoder-section` cat CurrentSection
if CurrentSection is greater than 0
set style `display` of Section to `none`
add 1 to CurrentSection
end
put 0 into CurrentSection
! Set up to use images
set the elements of Images to 4
put 0 into CurrentImage
while CurrentImage is less than 4
begin
index Images to CurrentImage
attach Images to `easycoder-img` cat CurrentImage
add 1 to CurrentImage
end
! Attach variables to all the screen elements
attach Intro to `easycoder-intro`
attach Sections to `easycoder-sections`
attach Frame to `easycoder-frame`
attach Contact to `easycoder-contact`
attach TellMeMoreButton to `easycoder-tell-me-more`
attach StartButton to `easycoder-start-button`
attach NextButton to `easycoder-next-button`
attach PreviousButton to `easycoder-previous-button`
attach AnimateButton to `easycoder-animate-button`
attach TraceButton to `easycoder-trace-button`
attach ContactButton to `easycoder-contact-button`
set TellMeMore
! Handle clicks on the buttons
on click TellMeMoreButton
begin
clear TellMeMore
set style `display` of Intro to `none`
set style `display` of Sections to `block`
end
index Section to 0
set style `display` of Contact to `none`
on click StartButton
begin
put 0 into CurrentSection
while CurrentSection is less than NSections
begin
index Section to CurrentSection
add 1 to CurrentSection
end
put 1 into CurrentSection
while CurrentSection is less than NSections
begin
index Section to CurrentSection
set style `display` of Section to `none`
add 1 to CurrentSection
end
put 0 into CurrentSection
index Section to CurrentSection
set style `display` of Section to `block`
set style `display` of Contact to `none`
end
on click NextButton
begin
index Section to CurrentSection
set style `display` of Section to `none`
add 1 to CurrentSection
if CurrentSection is NSections
take 1 from CurrentSection
index Section to CurrentSection
set style `display` of Section to `block`
if CurrentSection is 5 gosub to RunSlideshow
set style `display` of Contact to `none`
end
on click PreviousButton
begin
index Section to CurrentSection
set style `display` of Section to `none`
if CurrentSection is not 0
take 1 from CurrentSection
index Section to CurrentSection
set style `display` of Section to `block`
set style `display` of Contact to `none`
end
on click AnimateButton
begin
if Tracing trace
go to RunAnimation
end
on click TraceButton
begin
toggle Tracing
if Tracing
begin
set style `color` of TraceButton to `white`
set style `background-color` of TraceButton to color 250*65536+43*256+102
end
else
begin
set style `color` of TraceButton to ``
set style `background-color` of TraceButton to ``
end
end
on click ContactButton
begin
put 0 into CurrentSection
while CurrentSection is less than NSections
begin
index Section to CurrentSection
set style `display` of Section to `none`
add 1 to CurrentSection
end
put 0 into CurrentSection
set style `display` of Contact to `block`
end
! Animate the 'Tell Me More' button
set UpDown
put 128 into Value
while TellMeMore
begin
wait 1 tick
multiply Value by 256 giving Color
add Value to Color
multiply Color by 256
add 255 to Color
set style `background-color` of TellMeMoreButton to color Color
if UpDown
begin
if Value is 255 clear UpDown
else add 1 to Value
end
else
begin
if Value is 128 set UpDown
else take 1 from Value
end
end
stop
! Run the slideshow
RunSlideshow:
put 0 into CurrentImage
index Images to CurrentImage
set style `opacity` of Images to 1
while CurrentSection is 5
begin
wait 5 seconds
set style `opacity` of Images to 0
add 1 to CurrentImage
if CurrentImage is greater than 3 put 0 into CurrentImage
index Images to CurrentImage
set style `opacity` of Images to 1
end
return
! Run the background animation
RunAnimation:
put 255 into Red
put 255 into Green
put 255 into Blue
Loop1:
put Red into Color
multiply Color by 256
add Green to Color
multiply Color by 256
add Blue to Color
set style `background-color` of Frame to color Color
wait 1 tick
if Red is greater than 128
begin
take 1 from Red
go to Loop1
end
if Green is greater than 128
begin
take 1 from Green
go to Loop1
end
if Blue is greater than 128
begin
take 1 from Blue
go to Loop1
end
Loop2:
put Red into Color
multiply Color by 256
add Green to Color
multiply Color by 256
add Blue to Color
set style `background-color` of Frame to color Color
wait 1 tick
if Red is less than 255
begin
add 1 to Red
go to Loop2
end
if Green is less than 255
begin
add 1 to Green
go to Loop2
end
if Blue is less than 255
begin
add 1 to Blue
go to Loop2
end
print `Animation finished`
stop