Yofiel CMS

Welcome! Named for the archangel of beauty, this site provides software tools and knowledge to help you be more beautiful yourself. Yofiel is currently being rebuilt to use its own CMS system.

The Yofiel Open-Source CMS

The Yofiel 'Content Managment System' (CMS) is a lightweight tool for website development for those just wanting to write content with simple HTML tags. It's designed for simplicity and speed, requiring users to configure a minimal number of data fields while generating a complete, feature-rich Website. Benefits include:

Small Size - The gzipped css, scripts, and metadata are <3kB, an astounding 0.5% of Joomla's for the same functionality. The W3C-validated, fully responsive HTML5 and CSS3 templates work consistently on Chrome, Safari, and IE, requires a minimal number of classes and IDs, and--no DIVs!
Transparent Content Scripting: The automatically added scripts include support for:

Automatic smooth scrolling: to named anchors, both on load and on loaded pages.
Image lightbox with slideshow: Inserted automatically on standard HTML IMG tags.
Automatic metadata insertion: Facebook and Linkedin display image, page title, and description automatically, with customization options.

Forthcoming: PHP7 generation of multipage menus and sitemap, YouTube player, PDF viewer, code highlighting, and Google Analytics, all of which are a complete nightmare in Joomla and WordPress.

How it Works

The CMS acts on user documents, which contain a handful of variables at the top, followed by the document in standard HTML format. Supported tags include A, B, BLOCKQUOTE, CODE, DATA, DL+TD/DD, H!~H6, I, IMG, P, STRONG, SUB, SUPER, U, PRE, TABLE+TR+TH/TD, UL/OL+LI, and VIDEO.

The CMS parses the user document with three PHP files to create the Web Page on demand, adding stylesheets, a YouTube player for VIDEO, code hightighting for PRE, a PDF viewer for DATA, and metadata for images and descroiptions to appear when links are published on Facebook, Twitter, LinkedIn, and other media.

Individual pages only need only five variables. The CMS could determine the filename automatically, but some URLs are redirected, so this variable contains the canonical path now. The head.php file includes all the required scripts to genrate the headers. A similar require statement for a foot.php file at the end of the document text runs the plugin insertion scripts and adds the same footer to all pages.

Online Code Editor

The Yofiel 'Content Managment System' (CMS) is a lightweight tool for website development for those just wanting to write content with simple HTML tags. It's designed for simplicity and speed, requiring users to configure a minimal number of data fields while generating a complete, feature-rich Website.

This is the online code editor for the Yofiel CMS. It supports syntax highlighting of PHP7, HML5, CSS3, and C/C++. It has been W3C validated on Chrome, IE, and Safari. The example shows the head element's contents for this this page.

<style>@media only screen{ a{color:#D1FF54;padding:2px;text-decoration:none;transition:all .15s ease} a,blockquote,#h1top,img{border-width:2px;border-style:solid; border-radius:11px;-webkit-border-radius: 11px;-moz-border-radius: 11px; box-shadow:15px 15px 23px -1px rgba(0,0,0,0.75);box-sizing:border-box; display:block;overflow:hidden} a,img{border-color:#999 #222 #54d443 #999} a:hover{background-color:rgba(0,0,0,0.3);cursor:pointer;text-decoration:underline} a:focus{color:#E95846;cursor:pointer;outline:0;text-decoration:none} a:active{color:red} .anchor{position:relative;top:-100px;visibility:hidden} blockquote{border-color:#999 #222 #333 #999} blockquote,body,dd,h6,li,p{font-family:Cambria,Georgia,Times,'Times New Roman',serif; hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;-o-hyphens:auto;-webkit-hyphens:auto; -moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased} blockquote{background:#335b85;margin:4px;padding:2px 8px 2px 0;quotes:none} body,html{background-image:linear-gradient(to right,#4d8ccf,#335b85,#4d8ccf); color:white;height:100%;margin:0;padding:0;width:100%} body{overflow: hidden;overflow-y:auto} html{;scroll-behavior:smooth} b,dt,h1,#h1top,h2,h3,h4,h5,.item a{font-family:'Arial Black',gadget,sans-serif;font-weight:700; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} br{clear:both} code,dt,pre,td,th{font-size:13px;line-height:24px} code,details{font-family:'Lucida Sans Unicode','Lucida Grande',sans-serif;color:#ccc} code{white-space:pre-wrap;word-wrap:break-word} div.anchor{display:block;position:relative;visibility:hidden;height:0} dl{clear:right;float:right;margin:0;overflow:hidden;padding:0} dt{clear:none;float:left;margin:0;padding:0} dd{font-size:13px;line-height:18px;margin:4px 0 12px 100px;padding:2px 4px 2px 0} details{margin:8px 8px 0 0} details,summary,.note{font-size:12px;line-height:24px} em,i{font-style:oblique} h1,h2,h3,h4,h5,h6{color:#fff262} h1,#h1top{font-size:26px;line-height:33px;padding-left:8px;padding-top:8px} h1{float:left} h2{border-top:1px solid;margin:2px 0 0 8px;padding:4px 0 8px 0} h2,caption,figcaption{font-size:18px;line-height:23px} h3{font-size:16px;line-height:21px;margin:8px 0 0 0;padding:8px} h4,h5,h6{display:inline} h4,h5,h6,li,p{font-size:14px;line-height:19px} h4:after,h5:after,h6:after{content:". "} h4,h5{margin:14px 0 0 0} h5,h6{font-size:14px} h6{margin:0} img{clear:left;float:left;padding:4px;margin:0 16px 8px 8px} img:hover{border-color:#c343d4;cursor:url('/img/magnify.png'),auto} img,nav a{background:#103762} li,p{margin:0 8px 8px 8px;letter-spacing:.75px; word-spacing:2px} nav a{display:inline-block;font-family:'Arial',gadget,sans-serif;font-weight:400;padding:8px} ol,ul{margin:0 24px 0 0;padding-left:24px} strong{font-weight:900} #yprev:hover,#ynext:hover,#ystop:hover{font-weight:900} #yview,#ytable,#ytable tr,#ycell{background:none;border:0;margin:0;padding:0} #yview,#ytable,#ycell{height:100%;width:100%} #yview{background:#ccc;background:rgba(0,0,0,0.75);box-sizing:border-box;display:none;left:0px; position:fixed;text-decoration:none;top:0px;z-index:100} #ycell{text-align:center;vertical-align:middle;} #yimg{background:white;border:0;float:none;margin:auto;padding:0} #ywait{background:url('/img/loading.gif')no-repeat; height:80px;left:50%;position:fixed;top:50%;width:100px} #ymenu{background:#111;border-radius:12px 12px 0 0;color:#ccc;font-size:20px;height:20px; letter-spacing:2px;max-height:20px;padding:0 12px;text-align:right;vertical-align:middle} #yctl{float:right;white-space:nowrap} #ycap{display:block;float:left;height:18px;max-height:18px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;width:350px} #yprev,#ynext,#ystop{cursor:pointer;text-align:center;white-space:nowrap;width:80px} } @media screen and (min-width:740px) { body{padding-top:70px} div.anchor{top:-70px} }@media screen and (max-width:740px) { body{padding-top:120px} div.anchor{top:-120px} }@media only print{ header{display:none} img{float:left;clear:left;margin:0px 15px 15px 8px} } </style>

The entire CMS is open source and available under GPL 3.0 license.

~

~

About Me

My name is Ernest Meyer, this is my private site, and I make no money from my work. Born in Washington DC in 1960, I earned all-paid schlarshiups to Eton prep, Stowe (Bucks, UK), and Oxford University, where I sat Philosophy, Psychology, and Politics (PPP).
I became a semiconductor analyst, then a silicon-valley engineer. I was a digital architect on the first 802.11 chipset, the first Pentium, the first Japanese cellphone, the prototype Netflix interface, and the first iPhone microprocessor. I retired when Steve Jobs died. You can contact me on LinkedIn at:

https://www.linkedin.com/in/ernest-meyer/

Thank you for visiting my site.