Codepen: A Powerful Online Sandbox Tool for Web Development Professionals

by 10 Best Design

Codepen.io is one of several "sandbox" websites that allow users who are skilled in Internet programming and the syntax behind web pages to demonstrate the kinds of elaborate and interactive effects that modern-day web code is capable of. Projects posted on the site simultaneously showcase the code within the HTML, CSS, and JavaScript files that would recreate them in users' own potential projects, and users can temporarily make changes through the website's "Editor View" button with the expectation that the effects in the project area will be adjusted accordingly.

Since a steadily increasing number of websites use advanced effects that are dependent on uniquely expanded versions of the baseline scripts, Codepen's Editor View makes it a point to display any special libraries and extension languages used. In a particular project showcasing what the author calls a "fancy scroll," for example, the file fulfilling the role of the project's native CSS document is an SCSS document, which supports a broad array of additional and more specific functions.

The JavaScript file in use, meanwhile, is listed as a product of "Babel," which is a compiler that dynamically converts functionality coded in other Internet programming languages into equivalent JavaScript code. This allows someone who is more familiar with a different programming language to create code that will work the same in the JavaScript format.

The project showcases several photographs that dynamically replace themselves based on how high or low the scroll bar is, and each photo is accompanied by a text description that fades into existence only when the user scrolls toward its position on the page. Each photograph is changed into a version in which the people pictured on it are muted in color and the background behind them is replaced with a pattern with purple and yellow shapes. This effect does not use particularly elaborate syntax, however; it is shown that there are simply two versions of each photograph, with one overlaid on top of the other. The smooth transition used to "wipe" away the photograph on top to reveal the version underneath can make a striking impression on viewers regardless. For more information click here https://v.redd.it/4ksv0s2rg0731.