Posted in ideas
153
4:18 am, July 6, 2022
 

Idea: create blocks of code that can be re-used and added easily to recreate site parts

Note: this might be a bit hard to read through as its just my raw notes on this subject/idea.

Idea: create blocks of code that can be re-used and added easily to recreate site parts.

I started this concept here, but it needs major work.

I like the concept here, but it need to be finished with more blocks added and different gui i think.

maybe move it to blocks sub domain and work on it seperately, or blocks just removes all widgets and add the blocks in the widgets area.

CSS Bundle Code Blocks
CSS Bundle Code Blocks

Fix up the layout 1st, remove this large right wiget and replace with blocks.

Layout changes
Layout changes
Layout changed
Layout changed

preview of code

add a php script that can compile the code into a preview html file so the js function can pass in the code for the preview and it writes to a random file name for preview iframe.

preview button will take all code from the boxes and write it to a temp html file with a unique file name or one from the filename box.

Temp file name

/* unique file name html */
$unigue_id = $functions->suniqid();
$unique_filename = $unigue_id.".html";
/* random string generator: a smaller version of uniqid() uses letters and numbers and specify the lengh of the random string */
public function suniqid($len = 5) {
		$seed = str_split('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'); // allowed characters
		shuffle($seed); // shuffle the array
		$rand = '';
		foreach (array_rand($seed, $len) as $x) $rand .= $seed[$x];
		return $rand;
	}

Set the unique file name as a page string and redirect to it, so then its working with just one unique file name.

Do i just do a normal submit and then take all the content from the text areas and save it into a file. Probably easier and then its saved to the file.

then load that file into the iframe once saved.

Seems its not re-writing to the same file name when new content is loaded

add a class to save the additional items, and then load them from there once saved and written to file.

Title and link to preview change
Title and link to preview change

Iframe srcdoc

i tried the iframe srcdoc with inline html, but it didnt work well.

https://mionskowski.pl/posts/iframe-code-preview/

<iframe srcdoc="<button>Hello world!</button>"></iframe>

test code:
<iframe srcdoc=\"data:$html_template_flat\" sandbox style='width:100%;min-height:800px;'></iframe>

this is what it ended up looking like

this is what it ended up looking like
this is what it ended up looking like

Codemirror

Try thisas codemirror instead?

Preview need to be full width to be useful.

Make the blocks set width and scrollable.

same height as the code areas.

got a demo with code preview working for code mirror.

codemirror with working preview

codemirror with working preview

adding codemirror changes the way the load works on the code areas, so i have disabled the code mirror.

this idea is partially working but still a bit broken.

View Statistics
This Week
23
This Month
40
This Year
154

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Articles
Search Articles by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

Subscribe
Subscribe to weekly update emails.
Random Quote
Nothing, to my way of thinking, is a better proof of a well ordered mind than a man's ability to stop just where he is and pass some time in his own company.
Seneca
Random CSS Property

background-position-y

The background-position-y CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by background-origin.
background-position-y css reference