Scheduled Maintenance: We are aware of an issue with Google, AOL, and Yahoo services as email providers which are blocking new registrations. We are trying to fix the issue and we have several internal and external support tickets in process to resolve the issue. Please see: viewtopic.php?t=158230

 

 

 

Code sharing tools

Off-Topic discussions about science, technology, and non Debian specific topics.
Post Reply
Message
Author
User avatar
qyron
Posts: 206
Joined: 2008-07-21 20:47

Code sharing tools

#1 Post by qyron »

I've started to learn HTML/CSS recently and I have a good friend who is a well rounded coder on these languages, willing to lend a hand in getting my feet wet, but actually sharing the code between us, in real time, is proving to be hard as he only uses Win/Mac environment (professional reasons) and I only use Debian.

Can anyone recommend a way to work something out?
Stop hitting me with anvils!|Parem de me bater com bigornas!
Willie E. Coyote

Running Debian 9.2

Dai_trying
Posts: 1100
Joined: 2016-01-07 12:25
Has thanked: 5 times
Been thanked: 16 times

Re: Code sharing tools

#2 Post by Dai_trying »

Would something like GitHub be any good to you?

User avatar
GarryRicketson
Posts: 5644
Joined: 2015-01-20 22:16
Location: Durango, Mexico

Re: Code sharing tools

#3 Post by GarryRicketson »

Well to start with, for websites, and things like that,...HTML and the CSS, is the same no matter what OS or editor is used to write the webpages, other code, that is for programming the OS and software, there is differences.
Can you clarify what you mean by "Code sharing tools". ? Use some logic, the browser is what is used to view the web pages, all you really need to do, for example, right click, the screen, you should get a menu, that included "view page source", for example this page on the forum, :

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-gb" xml:lang="en-gb">
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="en-gb" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<title>Debian User Forums • Post a reply</title>



<!--
	phpBB style name: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:
-->

<script type="text/javascript">
// <![CDATA[
	var jump_page = 'Enter the page number you wish to go to:';
	var on_page = '';
	var per_page = '';
	var base_url = '';
	var style_cookie = 'phpBBstyle';
	var style_cookie_settings = '; path=/; domain=forums.debian.net';
	var onload_functions = new Array();
	var onunload_functions = new Array();

	

	/**
	* Find a member
	*/
	function find_username(url)
	{
		popup(url, 760, 570, '_usersearch');
		return false;
	}

	/**
	* New function for handling multiple calls to window.onload and window.unload by pentapenguin
	*/
	window.onload = function()
	{
		for (var i = 0; i < onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	};

	window.onunload = function()
	{
		for (var i = 0; i < onunload_functions.length; i++)
		{
			eval(onunload_functions[i]);
		}
	};

// ]]>
</script>
<script type="text/javascript" src="./styles/prosilver/template/styleswitcher.js"></script>
<script type="text/javascript" src="./styles/prosilver/template/forum_fn.js"></script>

<link href="./styles/prosilver/theme/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="./style.php?id=1&lang=en" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="./styles/prosilver/theme/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="./styles/prosilver/theme/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="./styles/prosilver/theme/large.css" rel="alternate stylesheet" type="text/css" title="A++" />



</head>

<body id="phpbb" class="section-posting ltr">

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div id="site-description">
				<a href="./index.php" title="Board index" id="logo"><img src="/styles/prosilver/imageset/site_logo.png" width="42" height="52" alt="" title=""></a>
				<h1>Debian User Forums</h1>
				<p></p>
				<p class="skiplink"><a href="#start_here">Skip to content</a></p>
			</div>

		
			<div id="search-box">
				<form action="./search.php" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="Search for keywords" class="inputbox search" value="Search…" onclick="if(this.value=='Search…')this.value='';" onblur="if(this.value=='')this.value='Search…';" />
					<input class="button2" value="Search" type="submit" /><br />
					<a href="./search.php" title="View the advanced search options">Advanced search</a> 
				</fieldset>
				</form>
			</div>
		

			<span class="corners-bottom"><span></span></span></div>
		</div>

		<div class="navbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<ul class="linklist navlinks">
				<li class="icon-home"><a href="./index.php" accesskey="h">Board index</a>  <strong>‹</strong> <a href="./viewforum.php?f=24">Discussion</a> <strong>‹</strong> <a href="./viewforum.php?f=3">Offtopic</a></li>

				<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="Change font size">Change font size</a></li>

				
			</ul>

			
			<ul class="linklist leftside">
				<li class="icon-ucp">
					<a href="./ucp.php" title="User Control Panel" accesskey="e">User Control Panel</a>
						 (<a href="./ucp.php?i=pm&folder=inbox"><strong>0</strong> new messages</a>) •
					<a href="./search.php?search_id=egosearch">View your posts</a>
					
				</li>
			</ul>
			

			<ul class="linklist rightside">
				<li class="icon-faq"><a href="./faq.php" title="Frequently Asked Questions">FAQ</a></li>
				<li class="icon-members"><a href="./memberlist.php" title="View complete list of members">Members</a></li>
					<li class="icon-logout"><a href="./ucp.php?mode=logout&sid=343688966ac7c2c98eea108a424f6fd7" title="Logout [ GarryRicketson ]" accesskey="x">Logout [ GarryRicketson ]</a></li>
				
			</ul>

			<span class="corners-bottom"><span></span></span></div>
		</div>

	</div>

	<a name="start_here"></a>
	<div id="page-body">
		
	<h2><a href="./viewtopic.php?f=3&t=142465">Code sharing tools</a></h2>


<form id="postform" method="post" action="./posting.php?mode=reply&f=3&t=142465" enctype="multipart/form-data">



<div class="panel" id="postingbox">
	<div class="inner"><span class="corners-top"><span></span></span>
	
	<h3>Post a reply</h3>

	<script type="text/javascript">
// <![CDATA[
	onload_functions.push('apply_onkeypress_event()');
// ]]>
</script>

<fieldset class="fields1">
	
	<dl style="clear: left;">
		<dt><label for="subject">Subject:</label></dt>
		<dd><input type="text" name="subject" id="subject" size="45" maxlength="64" tabindex="2" value="Re: Code sharing tools" class="inputbox autowidth" /></dd>
	</dl>
	<script type="text/javascript">
// <![CDATA[
	var form_name = 'postform';
	var text_name = 'message';
	var load_draft = false;
	var upload = false;

	// Define the bbCode tags
	var bbcode = new Array();
	var bbtags = new Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]','[code]','
','
  • ','
','
  • ','
','[img]','[/img]','','','[flash=]', '[/flash]','[size=]','[/size]');
var imageTag = false;

// Helpline messages
var help_line = {
b: 'Bold text: text',
i: 'Italic text: text',
u: 'Underline text: text',
q: 'Quote text: [quote]text[/quote]',
c: 'Code display:

Code: Select all

code
',
l: 'List:
  • text
',
o: 'Ordered list:
  • text
',
p: 'Insert image: [img]http://image_url[/img]',
w: 'Insert URL: http://url or URL text',
a: 'Inline uploaded attachment: [attachment=]filename.ext[/attachment]',
s: 'Font colour: text Tip: you can also use color=#FF0000',
f: 'Font size: small text',
y: 'List: Add list element',
d: 'Flash: [flash=width,height]http://url[/flash]'

}

var panels = new Array('options-panel', 'attach-panel', 'poll-panel');
var show_panel = 'options-panel';


// ]]>
</script>
<script type="text/javascript" src="./styles/prosilver/template/editor.js"></script>


<div id="colour_palette" style="display: none;">
<dl style="clear: left;">
<dt><label>Font colour:</label></dt>
<dd>
<script type="text/javascript">
// <![CDATA[
function change_palette()
{
dE('colour_palette');
e = document.getElementById('colour_palette');

if (e.style.display == 'block')
{
document.getElementById('bbpalette').value = 'Hide font colour';
}
else
{
document.getElementById('bbpalette').value = 'Font colour';
}
}

colorPalette('h', 15, 10);
// ]]>
</script>
</dd>
</dl>
</div>

<div id="format-buttons">
<input type="button" class="button2" accesskey="b" name="addbbcode0" value=" B " style="font-weight:bold; width: 30px" onclick="bbstyle(0)" title="Bold text: text" />
<input type="button" class="button2" accesskey="i" name="addbbcode2" value=" i " style="font-style:italic; width: 30px" onclick="bbstyle(2)" title="Italic text: text" />
<input type="button" class="button2" accesskey="u" name="addbbcode4" value=" u " style="text-decoration: underline; width: 30px" onclick="bbstyle(4)" title="Underline text: text" />

<input type="button" class="button2" accesskey="q" name="addbbcode6" value="Quote" style="width: 50px" onclick="bbstyle(6)" title="Quote text: [quote]text[/quote]" />

<input type="button" class="button2" accesskey="c" name="addbbcode8" value="Code" style="width: 40px" onclick="bbstyle(8)" title="Code display:

Code: Select all

code
" />
<input type="button" class="button2" accesskey="l" name="addbbcode10" value="List" style="width: 40px" onclick="bbstyle(10)" title="List:
  • text
" />
<input type="button" class="button2" accesskey="o" name="addbbcode12" value="List=" style="width: 40px" onclick="bbstyle(12)" title="Ordered list:
  • text
" />
<input type="button" class="button2" accesskey="y" name="addlistitem" value="[*]" style="width: 40px" onclick="bbstyle(-1)" title="List item: [*]text[/*]" />

<input type="button" class="button2" accesskey="p" name="addbbcode14" value="Img" style="width: 40px" onclick="bbstyle(14)" title="Insert image: [img]http://image_url[/img]" />

<input type="button" class="button2" accesskey="w" name="addbbcode16" value="URL" style="text-decoration: underline; width: 40px" onclick="bbstyle(16)" title="Insert URL: http://url or URL text" />

<select name="addbbcode20" onchange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]');this.form.addbbcode20.selectedIndex = 2;" title="Font size: small text">
<option value="50">Tiny</option>
<option value="85">Small</option>
<option value="100" selected="selected">Normal</option>

<option value="150">Large</option>

<option value="200">Huge</option>

</select>
<input type="button" class="button2" name="bbpalette" id="bbpalette" value="Font colour" onclick="change_palette();" title="Font colour: text Tip: you can also use color=#FF0000" />

</div>


<div id="smiley-box">

<strong>Smilies</strong><br />

<a href="#" onclick="insert_text(':D', true); return false;"><img src="./images/smilies/icon_biggrin.gif" width="15" height="15" alt=":D" title="Very Happy" /></a>

<a href="#" onclick="insert_text(':)', true); return false;"><img src="./images/smilies/icon_smile.gif" width="15" height="15" alt=":)" title="Smile" /></a>

<a href="#" onclick="insert_text(':(', true); return false;"><img src="./images/smilies/icon_sad.gif" width="15" height="15" alt=":(" title="Sad" /></a>

<a href="#" onclick="insert_text(':o', true); return false;"><img src="./images/smilies/icon_surprised.gif" width="15" height="15" alt=":o" title="Surprised" /></a>

<a href="#" onclick="insert_text(':shock:', true); return false;"><img src="./images/smilies/icon_eek.gif" width="15" height="15" alt=":shock:" title="Shocked" /></a>

<a href="#" onclick="insert_text(':?', true); return false;"><img src="./images/smilies/icon_confused.gif" width="15" height="15" alt=":?" title="Confused" /></a>

<a href="#" onclick="insert_text('8)', true); return false;"><img src="./images/smilies/icon_cool.gif" width="15" height="15" alt="8)" title="Cool" /></a>

<a href="#" onclick="insert_text(':lol:', true); return false;"><img src="./images/smilies/icon_lol.gif" width="15" height="15" alt=":lol:" title="Laughing" /></a>

<a href="#" onclick="insert_text(':x', true); return false;"><img src="./images/smilies/icon_mad.gif" width="15" height="15" alt=":x" title="Mad" /></a>

<a href="#" onclick="insert_text(':P', true); return false;"><img src="./images/smilies/icon_razz.gif" width="15" height="15" alt=":P" title="Razz" /></a>

<a href="#" onclick="insert_text(':oops:', true); return false;"><img src="./images/smilies/icon_redface.gif" width="15" height="15" alt=":oops:" title="Embarassed" /></a>

<a href="#" onclick="insert_text(':cry:', true); return false;"><img src="./images/smilies/icon_cry.gif" width="15" height="15" alt=":cry:" title="Crying or Very sad" /></a>

<a href="#" onclick="insert_text(':evil:', true); return false;"><img src="./images/smilies/icon_evil.gif" width="15" height="15" alt=":evil:" title="Evil or Very Mad" /></a>

<a href="#" onclick="insert_text(':twisted:', true); return false;"><img src="./images/smilies/icon_twisted.gif" width="15" height="15" alt=":twisted:" title="Twisted Evil" /></a>

<a href="#" onclick="insert_text(':roll:', true); return false;"><img src="./images/smilies/icon_rolleyes.gif" width="15" height="15" alt=":roll:" title="Rolling Eyes" /></a>

<a href="#" onclick="insert_text(':wink:', true); return false;"><img src="./images/smilies/icon_wink.gif" width="15" height="15" alt=":wink:" title="Wink" /></a>

<a href="#" onclick="insert_text(':!:', true); return false;"><img src="./images/smilies/icon_exclaim.gif" width="15" height="15" alt=":!:" title="Exclamation" /></a>

<a href="#" onclick="insert_text(':?:', true); return false;"><img src="./images/smilies/icon_question.gif" width="15" height="15" alt=":?:" title="Question" /></a>

<a href="#" onclick="insert_text(':idea:', true); return false;"><img src="./images/smilies/icon_idea.gif" width="15" height="15" alt=":idea:" title="Idea" /></a>

<a href="#" onclick="insert_text(':arrow:', true); return false;"><img src="./images/smilies/icon_arrow.gif" width="15" height="15" alt=":arrow:" title="Arrow" /></a>

<a href="#" onclick="insert_text(':|', true); return false;"><img src="./images/smilies/icon_neutral.gif" width="15" height="15" alt=":|" title="Neutral" /></a>

<a href="#" onclick="insert_text(':mrgreen:', true); return false;"><img src="./images/smilies/icon_mrgreen.gif" width="15" height="15" alt=":mrgreen:" title="Mr. Green" /></a>
<hr />
<a href="./faq.php?mode=bbcode">BBCode</a> is <em>ON</em><br />

[img] is <em>ON</em><br />
[flash] is <em>OFF</em><br />
[url] is <em>ON</em><br />

Smilies are <em>ON</em>
<hr /><strong><a href="#review">Topic review</a></strong>
</div>

<div id="message-box">
<textarea name="message" id="message" rows="15" cols="76" tabindex="4" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" class="inputbox"></textarea>
</div>
</fieldset>


<span class="corners-bottom"><span></span></span></div>
</div>

<div class="panel bg2">
<div class="inner"><span class="corners-top"><span></span></span>
<fieldset class="submit-buttons">

<input type="hidden" name="topic_cur_post_id" value="701215" /><input type="hidden" name="lastclick" value="1561648229" />
<input type="submit" accesskey="k" tabindex="7" name="save" value="Save draft" class="button2" /> 
<input type="submit" tabindex="5" name="preview" value="Preview" class="button1" onclick="document.getElementById('postform').action += '#preview';" /> 
<input type="submit" accesskey="s" tabindex="6" name="post" value="Submit" class="button1 default-submit-action" /> 

</fieldset>

<span class="corners-bottom"><span></span></span></div>
</div>

<div id="tabs">
<ul>
<li id="options-panel-tab" class="activetab"><a href="#tabs" onclick="subPanels('options-panel'); return false;"><span>Options</span></a></li>
<li id="attach-panel-tab"><a href="#tabs" onclick="subPanels('attach-panel'); return false;"><span>Upload attachment</span></a></li>
</ul>
</div>

<div class="panel bg3" id="options-panel">
<div class="inner"><span class="corners-top"><span></span></span>

<fieldset class="fields1">

<div><label for="disable_bbcode"><input type="checkbox" name="disable_bbcode" id="disable_bbcode" /> Disable BBCode</label></div>

<div><label for="disable_smilies"><input type="checkbox" name="disable_smilies" id="disable_smilies" /> Disable smilies</label></div>

<div><label for="disable_magic_url"><input type="checkbox" name="disable_magic_url" id="disable_magic_url" /> Do not automatically parse URLs</label></div>

<div><label for="attach_sig"><input type="checkbox" name="attach_sig" id="attach_sig" checked="checked" /> Attach a signature (signatures can be altered via the UCP)</label></div>

<div><label for="notify"><input type="checkbox" name="notify" id="notify" /> Notify me when a reply is posted</label></div>

</fieldset>

<input type="hidden" name="creation_time" value="1561648229" />
<input type="hidden" name="form_token" value="126d6455b401c050865f758c01da98187b01f50e" />

<span class="corners-bottom"><span></span></span></div>
</div>

<div class="panel bg3" id="attach-panel">
<div class="inner"><span class="corners-top"><span></span></span>

<p>If you wish to attach one or more files enter the details below.</p>

<fieldset class="fields2">
<dl>
<dt><label for="fileupload">Filename:</label></dt>
<dd>
<input type="file" name="fileupload" id="fileupload" maxlength="262144" value="" class="inputbox autowidth" />
<input type="submit" name="add_file" value="Add the file" class="button2" onclick="upload = true;" />
</dd>
</dl>
<dl>
<dt><label for="filecomment">File comment:</label></dt>
<dd><textarea name="filecomment" id="filecomment" rows="1" cols="40" class="inputbox autowidth"></textarea></dd>
</dl>
</fieldset>

<span class="corners-bottom"><span></span></span></div>
</div><h3 id="review">
<span class="right-box"><a href="#review" onclick="viewableArea(getElementById('topicreview'), true); var rev_text = getElementById('review').getElementsByTagName('a').item(0).firstChild; if (rev_text.data == 'Expand view'){rev_text.data = 'Collapse view'; } else if (rev_text.data == 'Collapse view'){rev_text.data = 'Expand view'};">Expand view</a></span>
Topic review: Code sharing tools
</h3>

<div id="topicreview">
<script type="text/javascript">
// <![CDATA[
bbcodeEnabled = 1;
// ]]>
</script>

<div class="post bg2">
<div class="inner"><span class="corners-top"><span></span></span>


<div class="postbody" id="pr701215">

<ul class="profile-icons">
<li class="quote-icon"><a href="#postingbox" onclick="addquote(701215, 'Dai_trying', 'wrote');" title="Quote Dai_trying"><span>Quote Dai_trying</span></a></li>
</ul>

<h3><a href="#pr701215">Re: Code sharing tools</a></h3>
<p class="author"><a href="./viewtopic.php?p=701215#p701215"><img src="./styles/prosilver/imageset/icon_post_target.gif" width="11" height="9" alt="Post" title="Post" /></a> by <strong><a href="./memberlist.php?mode=viewprofile&u=195727">Dai_trying</a></strong> » 2019-06-27 09:42 </p>
<div class="content">Would something like GitHub be any good to you?</div>


<div id="message_701215" style="display: none;">Would something like GitHub be any good to you?</div>

</div>
<span class="corners-bottom"><span></span></span></div>
</div>

<div class="post bg1">
<div class="inner"><span class="corners-top"><span></span></span>


<div class="postbody" id="pr701213">

<ul class="profile-icons">
<li class="quote-icon"><a href="#postingbox" onclick="addquote(701213, 'qyron', 'wrote');" title="Quote qyron"><span>Quote qyron</span></a></li>
</ul>

<h3><a href="#pr701213">Code sharing tools</a></h3>
<p class="author"><a href="./viewtopic.php?p=701213#p701213"><img src="./styles/prosilver/imageset/icon_post_target.gif" width="11" height="9" alt="Post" title="Post" /></a> by <strong><a href="./memberlist.php?mode=viewprofile&u=17574">qyron</a></strong> » 2019-06-27 09:27 </p>
<div class="content">I've started to learn HTML/CSS recently and I have a good friend who is a well rounded coder on these languages, willing to lend a hand in getting my feet wet, but actually sharing the code between us, in real time, is proving to be hard as he only uses Win/Mac environment (professional reasons) and I only use Debian.<br /><br />Can anyone recommend a way to work something out?</div>


<div id="message_701213" style="display: none;">I've started to learn HTML/CSS recently and I have a good friend who is a well rounded coder on these languages, willing to lend a hand in getting my feet wet, but actually sharing the code between us, in real time, is proving to be hard as he only uses Win/Mac environment (professional reasons) and I only use Debian.<br /><br />Can anyone recommend a way to work something out?</div>

</div>
<span class="corners-bottom"><span></span></span></div>
</div>

</div>

<hr />


<p><a href="#postingbox" class="top2">Top</a></p>


</form>

<script type="text/javascript">
// <![CDATA[
subPanels(show_panel);
// ]]>
</script>
</div>
<div style="position: absolute; top: -250px; left: -250px;"><a href="http://forums.debian.net/stick.php">fas ... e</a></div>
<div id="page-footer">
<a href="http://forums.debian.net/stick.php"><!-- printing --></a>
<div class="navbar">
<div class="inner"><span class="corners-top"><span></span></span>

<ul class="linklist">
<li class="icon-home"><a href="./index.php" accesskey="h">Board index</a></li>

<li class="rightside"><a href="./memberlist.php?mode=leaders">The team</a> • <a href="./ucp.php?mode=delete_cookies">Delete all board cookies</a> • All times are UTC - 6 hours [ <abbr title="Daylight Saving Time">DST</abbr> ]</li>
</ul>

<span class="corners-bottom"><span></span></span></div>
</div>

<div class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a>® Forum Software © phpBB Group

</div>
</div>

</div>

<div>
<a id="bottom" name="bottom" accesskey="z"></a>

</div>

</body>
</html> [/code]
Yes you could use github, I don't know why you would need to though, use your browser, you can view, copy paste, all the code on your friends web site, so what other "tools" you would need is a mystery to me. Copy paste the code into a text editor and use it as a template, HTML and CSS stays the same, no matter what OS is being used, and no matter what browser is being used, How ever on the, some poorly designed web pages, might not work properly for some browsers, but still, it has nothing to do with what OS is being used.
Go figure.

neuraleskimo
Posts: 195
Joined: 2019-03-12 23:26

Re: Code sharing tools

#4 Post by neuraleskimo »

qyron wrote:I've started to learn HTML/CSS recently and I have a good friend who is a well rounded coder on these languages, willing to lend a hand in getting my feet wet, but actually sharing the code between us, in real time, is proving to be hard as he only uses Win/Mac environment (professional reasons) and I only use Debian.

Can anyone recommend a way to work something out?
Can you describe what you mean by "real time"? Do you mean exchange quickly (e.g., Dai_trying's or GarryRickertson's suggestions) or something more like simultaneous editing (e.g., google docs)?

User avatar
GarryRicketson
Posts: 5644
Joined: 2015-01-20 22:16
Location: Durango, Mexico

Re: Code sharing tools

#5 Post by GarryRicketson »

Just to point out, the term "Code sharing tools", is very broad,
Code sharing tools
You will see , if you look at some of the results, there are many sites intended for sharing code, Git hub is just one of many.
If all you are interested in is HTML, and CSS, all your friend needs to do is make it available to you, if he/she wants to.
willing to lend a hand in getting my feet wet

I will also give this advice: Start out simple , don't jump into a bunch of things/coding that is way to deep for you, none of it will make sense. Start with a simple webpage, using basic html, this can be done on your PC, using a local host set up.
I will share a little with you, This is a very simple "index.html"

Code: Select all

<!DOCTYPE html>
<html><title>The Bird Cage</title>
<head>
<style>
h1 {font-size:40px;}
p {font-size:16px;}
span {font-size:35px;}
</style>
</head>
<center><body><h1>For my birds</h1>
<p><span>Welcome</span></p>
<a href="images/openbsd-1stimage.gif"><img 
src="images/open-bsd-greeter.gif"></img></a>
<p><a href="http://daemonforums.org/index.php"><B>Daemon Forums</B></a> 

Some of <a href="birds/parrots.html">My Parrots and Birds</a></p> 

This site is under construction, more to come later<br>
<p><a href="myforum"> FORUM </a></p>
<p><a href="news/news.html">News</p>
<p><span> Powered with OpenBsd</span></p>
Last updated:Tue Apr  9 21:54:11 CDT 2019 no new content added
Written and edited with text editors, leafpad and joe 
</body></center></html>
======
Look at it with your browser: http://www.parrotsandopenbsd.org/
==Next , look at this: http://www.parrotsandopenbsd.org/birds/parrots.html
This was one of the first things I did, that included using some CSS, below is the code:

Code: Select all

 <!DOCTYPE html>
<html>
<center>
<title>My Parrots</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/w3.css">
<center><h2 class="w3-center">Parrots</h2>
<div class="w3-content" style="max-width:800px;position:relative">

<img class="parrots" src="SAM_1576.JPG " style="width:100%">
<img class="parrots" src="SAM_1577.JPG " style="width:100%">
<img class="parrots" src="SAM_1578.JPG " style="width:100%">
<img class="parrots" src="SAM_1579.JPG " style="width:100%">
<img class="parrots" src="SAM_1580.JPG" style="width:100%">
<img class="parrots" src="SAM_1581.JPG" style="width:100%">
<img class="parrots" src="SAM_1582.JPG" style="width:100%">
<img class="parrots" src="SAM_1583.JPG" style="width:100%">
<img class="parrots" src="SAM_1584.JPG" style="width:100%">
<img class="parrots" src="guako-2.JPG" style="width:100%">
<img class="parrots" src="guako-3.JPG" style="width:100%">
<img class="parrots" src="guako-4.JPG" style="width:100%">
<img class="parrots" src="guako-5.JPG" style="width:100%">
<img class="parrots" src="guako-6.JPG" style="width:100%">
<img class="parrots" src="guako-7.JPG" style="width:100%">
<img class="parrots" src="guako.JPG" style="width:100%">

<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)"><img src="left-arrow.png"</img></a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)"><img src="right-arrow1.png"></img></a>My Parrots
</div>
<a href="chanate.html">El Chanate</a>
</center><br>
<center><a href="images/1-babies.JPG">New Babies</a>
 and also <a href="images/birds.gif"> My Birds 
</a></center> 

<br>
<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("parrots");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>
<a href="http://parrotsandopenbsd.org/">HOME</a></center>
</body>
</html>
 
Now , take a look at this: http://www.parrotsandopenbsd.org/myforum/
I do not have a registration option, because it is not for public use, and no registrations are accepted, you or your friend, could set up a simple forum, the one in the above link is using FluxBB. Fluxbb is very easy to start out with, and easy to modify, customize, I used it to "get my feet wet" so to speak, As you can see below, the code has gotten much more complex,

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>For the Birds</title>
<link rel="stylesheet" type="text/css" href="style/Air.css" />
<link rel="alternate" type="application/atom+xml" href="extern.php?action=feed&type=atom" title="Atom active topics feed" />
</head>

<body>

<div id="punindex" class="pun">
<div class="top-box"></div>
<div class="punwrap">

<div id="brdheader" class="block">
	<div class="box">
		<div id="brdtitle" class="inbox">
			<h1><a href="index.php">For the Birds</a></h1>
			<div id="brddesc"><center><p><img src="http://www.parrotsandopenbsd.org/birds/images/parrots/Bryan.JPG " alt="openbsd" height="200" width="300"></img><img src="http://www.parrotsandopenbsd.org/images/open-bsd-greeter.gif" alt="openbsd" height="200" width="300"></img></img><img src="http://www.parrotsandopenbsd.org/birds/images/parrots/panchito-1-aug18.jpg" alt="openbsd" height="200" width="300"></img></p></center></div>
		</div>
		<div id="brdmenu" class="inbox">
			<ul>
				<li id="navextra1"><a href="http://parrotsandopenbsd.org">Home</a></li>
				<li id="navindex" class="isactive"><a href="index.php">Index</a></li>
				<li id="navrules"><a href="misc.php?action=rules">Rules</a></li>
				<li id="navsearch"><a href="search.php">Search</a></li>
				<li id="navlogin"><a href="login.php">Login</a></li>
			</ul>
		</div>
		<div id="brdwelcome" class="inbox">
			<p class="conl">You are not logged in.</p>
			<ul class="conr">
				<li><span>Topics: <a href="search.php?action=show_recent" title="Find topics with recent posts.">Active</a> | <a href="search.php?action=show_unanswered" title="Find topics with no replies.">Unanswered</a></span></li>
			</ul>
			<div class="clearer"></div>
		</div>
	</div>
</div>



<div id="brdmain">
<div id="idx1" class="blocktable">
	<h2><span>Forum rules READ BEFORE POSTING</span></h2>
	<div class="box">
		<div class="inbox">
			<table>
			<thead>
				<tr>
					<th class="tcl" scope="col">Forum</th>
					<th class="tc2" scope="col">Topics</th>
					<th class="tc3" scope="col">Posts</th>
					<th class="tcr" scope="col">Last post</th>
				</tr>
			</thead>
			<tbody>
				<tr class="rowodd">
					<td class="tcl">
						<div class="icon"><div class="nosize">1</div></div>
						<div class="tclcon">
							<div>
								<h3><a href="viewforum.php?id=13">Rules, Read before posting</a></h3>
								<div class="forumdesc">There are a few rules, and you should read them, 
failure to do so could result in your post being deleted,
and also getting submitted to a data base , listed as a 
spammer bot.</div>
								<p class="modlist">(<em>Moderated by</em> george)</p>
							</div>
						</div>
					</td>
					<td class="tc2">1</td>
					<td class="tc3">4</td>
					<td class="tcr"><a href="viewtopic.php?pid=78#p78">2017-09-07 22:10:54</a> <span class="byuser">by garry</span></td>
				</tr>
			</tbody>
			</table>
		</div>
	</div>
</div>

<div id="idx2" class="blocktable">
	<h2><span>Parrots</span></h2>
	<div class="box">
		<div class="inbox">
			<table>
			<thead>
				<tr>
					<th class="tcl" scope="col">Forum</th>
					<th class="tc2" scope="col">Topics</th>
					<th class="tc3" scope="col">Posts</th>
					<th class="tcr" scope="col">Last post</th>
				</tr>
			</thead>
			<tbody>
				<tr class="rowodd">
					<td class="tcl">
						<div class="icon"><div class="nosize">1</div></div>
						<div class="tclcon">
							<div>
								<h3><a href="viewforum.php?id=3">Parrots</a></h3>
								<div class="forumdesc">This is my helper Bryan</div>
								<p class="modlist">(<em>Moderated by</em> george)</p>
							</div>
						</div>
					</td>
					<td class="tc2">9</td>
					<td class="tc3">32</td>
					<td class="tcr"><a href="viewtopic.php?pid=182#p182">2018-10-28 01:04:32</a> <span class="byuser">by garry</span></td>
				</tr>
				<tr class="roweven">
					<td class="tcl">
						<div class="icon"><div class="nosize">2</div></div>
						<div class="tclcon">
							<div>
								<h3><a href="viewforum.php?id=11">Other Birds and Pets</a></h3>
								<div class="forumdesc">This is for other birds and pets, incuding dogs,cats, turtles,etc.</div>
								<p class="modlist">(<em>Moderated by</em> george)</p>
							</div>
						</div>
					</td>
					<td class="tc2">4</td>
					<td class="tc3">5</td>
					<td class="tcr"><a href="viewtopic.php?pid=173#p173">2018-07-20 02:37:38</a> <span class="byuser">by garry</span></td>
				</tr>
			</tbody>
			</table>
		</div>
	</div>
</div>

<div id="idx3" class="blocktable">
	<h2><span>OpenBsd</span></h2>
	<div class="box">
		<div class="inbox">
			<table>
			<thead>
				<tr>
					<th class="tcl" scope="col">Forum</th>
					<th class="tc2" scope="col">Topics</th>
					<th class="tc3" scope="col">Posts</th>
					<th class="tcr" scope="col">Last post</th>
				</tr>
			</thead>
			<tbody>
				<tr class="rowodd">
					<td class="tcl">
						<div class="icon"><div class="nosize">1</div></div>
						<div class="tclcon">
							<div>
								<h3><a href="viewforum.php?id=6">OpenBsd</a></h3>
								<div class="forumdesc">This is for OpenBsd discussions, screen shots, info.</div>
								<p class="modlist">(<em>Moderated by</em> george)</p>
							</div>
						</div>
					</td>
					<td class="tc2">8</td>
					<td class="tc3">18</td>
					<td class="tcr"><a href="viewtopic.php?pid=179#p179">2018-10-02 02:55:54</a> <span class="byuser">by garry</span></td>
				</tr>
			</tbody>
			</table>
		</div>
	</div>
</div>

<div id="idx4" class="blocktable">
	<h2><span>Minix 3</span></h2>
	<div class="box">
		<div class="inbox">
			<table>
			<thead>
				<tr>
					<th class="tcl" scope="col">Forum</th>
					<th class="tc2" scope="col">Topics</th>
					<th class="tc3" scope="col">Posts</th>
					<th class="tcr" scope="col">Last post</th>
				</tr>
			</thead>
			<tbody>
				<tr class="rowodd">
					<td class="tcl">
						<div class="icon"><div class="nosize">1</div></div>
						<div class="tclcon">
							<div>
								<h3><a href="viewforum.php?id=8">Minix 3</a></h3>
								<div class="forumdesc">This is for discussion about Minix 3 in general. 
Discussion about the server should be kept in the
Minix 3 server forum/category</div>
								<p class="modlist">(<em>Moderated by</em> george)</p>
							</div>
						</div>
					</td>
					<td class="tc2">1</td>
					<td class="tc3">7</td>
					<td class="tcr"><a href="viewtopic.php?pid=131#p131">2017-11-27 01:33:53</a> <span class="byuser">by garry</span></td>
				</tr>
			</tbody>
			</table>
		</div>
	</div>
</div>

<div id="idx5" class="blocktable">
	<h2><span>NEW TOYS ARE FUN</span></h2>
	<div class="box">
		<div class="inbox">
			<table>
			<thead>
				<tr>
					<th class="tcl" scope="col">Forum</th>
					<th class="tc2" scope="col">Topics</th>
					<th class="tc3" scope="col">Posts</th>
					<th class="tcr" scope="col">Last post</th>
				</tr>
			</thead>
			<tbody>
				<tr class="rowodd">
					<td class="tcl">
						<div class="icon"><div class="nosize">1</div></div>
						<div class="tclcon">
							<div>
								<h3><a href="viewforum.php?id=9">New TOYS are fun</a></h3>
								<div class="forumdesc">This is to talk about your new toys, and why new toys are more fun then the old ones, that one gets bored with.</div>
								<p class="modlist">(<em>Moderated by</em> george)</p>
							</div>
						</div>
					</td>
					<td class="tc2">4</td>
					<td class="tc3">9</td>
					<td class="tcr"><a href="viewtopic.php?pid=170#p170">2018-04-18 04:51:32</a> <span class="byuser">by garry</span></td>
				</tr>
				<tr class="roweven">
					<td class="tcl">
						<div class="icon"><div class="nosize">2</div></div>
						<div class="tclcon">
							<div>
								<h3><a href="viewforum.php?id=15">Virtual Box</a></h3>
								<div class="forumdesc">I am going to try a experiment, using virtual box on a server.
This is for details on this new toy</div>
								<p class="modlist">(<em>Moderated by</em> george)</p>
							</div>
						</div>
					</td>
					<td class="tc2">1</td>
					<td class="tc3">2</td>
					<td class="tcr"><a href="viewtopic.php?pid=110#p110">2017-09-25 12:45:54</a> <span class="byuser">by garry</span></td>
				</tr>
			</tbody>
			</table>
		</div>
	</div>
</div>

<div id="idx6" class="blocktable">
	<h2><span>Minix 3 server</span></h2>
	<div class="box">
		<div class="inbox">
			<table>
			<thead>
				<tr>
					<th class="tcl" scope="col">Forum</th>
					<th class="tc2" scope="col">Topics</th>
					<th class="tc3" scope="col">Posts</th>
					<th class="tcr" scope="col">Last post</th>
				</tr>
			</thead>
			<tbody>
				<tr class="rowodd">
					<td class="tcl">
						<div class="icon"><div class="nosize">1</div></div>
						<div class="tclcon">
							<div>
								<h3><a href="viewforum.php?id=7">Minix 3 server</a></h3>
								<div class="forumdesc">This is for discussion and questions about the Minix 3 server, 
also notes, etc,</div>
								<p class="modlist">(<em>Moderated by</em> george)</p>
							</div>
						</div>
					</td>
					<td class="tc2">1</td>
					<td class="tc3">2</td>
					<td class="tcr"><a href="viewtopic.php?pid=61#p61">2017-08-27 11:50:09</a> <span class="byuser">by garry</span></td>
				</tr>
			</tbody>
			</table>
		</div>
	</div>
</div>

<div id="idx7" class="blocktable">
	<h2><span>Test category</span></h2>
	<div class="box">
		<div class="inbox">
			<table>
			<thead>
				<tr>
					<th class="tcl" scope="col">Forum</th>
					<th class="tc2" scope="col">Topics</th>
					<th class="tc3" scope="col">Posts</th>
					<th class="tcr" scope="col">Last post</th>
				</tr>
			</thead>
			<tbody>
				<tr class="rowodd">
					<td class="tcl">
						<div class="icon"><div class="nosize">1</div></div>
						<div class="tclcon">
							<div>
								<h3><a href="viewforum.php?id=1">Test forum</a></h3>
								<div class="forumdesc">This is just a test forum</div>
								<p class="modlist">(<em>Moderated by</em> george)</p>
							</div>
						</div>
					</td>
					<td class="tc2">10</td>
					<td class="tc3">23</td>
					<td class="tcr"><a href="viewtopic.php?pid=171#p171">2018-05-09 19:12:06</a> <span class="byuser">by garry</span></td>
				</tr>
			</tbody>
			</table>
		</div>
	</div>
</div>

<div id="idx8" class="blocktable">
	<h2><span>Herbal Health</span></h2>
	<div class="box">
		<div class="inbox">
			<table>
			<thead>
				<tr>
					<th class="tcl" scope="col">Forum</th>
					<th class="tc2" scope="col">Topics</th>
					<th class="tc3" scope="col">Posts</th>
					<th class="tcr" scope="col">Last post</th>
				</tr>
			</thead>
			<tbody>
				<tr class="rowodd">
					<td class="tcl">
						<div class="icon"><div class="nosize">1</div></div>
						<div class="tclcon">
							<div>
								<h3><a href="viewforum.php?id=10">Natural healing and God</a></h3>
								<div class="forumdesc">I don't believe in doctors and the chemicals they poison people with. 
God provides all the plants and ways we need to stay healthy,so
that is what this is about</div>
								<p class="modlist">(<em>Moderated by</em> george)</p>
							</div>
						</div>
					</td>
					<td class="tc2">3</td>
					<td class="tc3">5</td>
					<td class="tcr"><a href="viewtopic.php?pid=99#p99">2017-09-15 18:29:50</a> <span class="byuser">by garry</span></td>
				</tr>
			</tbody>
			</table>
		</div>
	</div>
</div>

<div id="idx9" class="blocktable">
	<h2><span>Sports and events</span></h2>
	<div class="box">
		<div class="inbox">
			<table>
			<thead>
				<tr>
					<th class="tcl" scope="col">Forum</th>
					<th class="tc2" scope="col">Topics</th>
					<th class="tc3" scope="col">Posts</th>
					<th class="tcr" scope="col">Last post</th>
				</tr>
			</thead>
			<tbody>
				<tr class="rowodd">
					<td class="tcl">
						<div class="icon"><div class="nosize">1</div></div>
						<div class="tclcon">
							<div>
								<h3><a href="viewforum.php?id=12">Sports and events</a></h3>
								<div class="forumdesc">For those of you that are sports fans, you can talk about sports and events here.</div>
								<p class="modlist">(<em>Moderated by</em> george)</p>
							</div>
						</div>
					</td>
					<td class="tc2">3</td>
					<td class="tc3">4</td>
					<td class="tcr"><a href="viewtopic.php?pid=169#p169">2018-04-04 01:44:46</a> <span class="byuser">by garry</span></td>
				</tr>
			</tbody>
			</table>
		</div>
	</div>
</div>

<div id="idx10" class="blocktable">
	<h2><span>For the Birds</span></h2>
	<div class="box">
		<div class="inbox">
			<table>
			<thead>
				<tr>
					<th class="tcl" scope="col">Forum</th>
					<th class="tc2" scope="col">Topics</th>
					<th class="tc3" scope="col">Posts</th>
					<th class="tcr" scope="col">Last post</th>
				</tr>
			</thead>
			<tbody>
				<tr class="rowodd">
					<td class="tcl">
						<div class="icon"><div class="nosize">1</div></div>
						<div class="tclcon">
							<div>
								<h3><a href="viewforum.php?id=14">For the Birds</a></h3>
								<div class="forumdesc">Some general discussions, talk , politics, religion , etc. 
Talk is cheap, but seeds and food  "for the birds" is expensive.</div>
								<p class="modlist">(<em>Moderated by</em> george)</p>
							</div>
						</div>
					</td>
					<td class="tc2">18</td>
					<td class="tc3">25</td>
					<td class="tcr"><a href="viewtopic.php?pid=180#p180">2018-10-09 15:25:03</a> <span class="byuser">by garry</span></td>
				</tr>
			</tbody>
			</table>
		</div>
	</div>
</div>

<div id="idx11" class="blocktable">
	<h2><span>Webdesign, Hosting, Servers</span></h2>
	<div class="box">
		<div class="inbox">
			<table>
			<thead>
				<tr>
					<th class="tcl" scope="col">Forum</th>
					<th class="tc2" scope="col">Topics</th>
					<th class="tc3" scope="col">Posts</th>
					<th class="tcr" scope="col">Last post</th>
				</tr>
			</thead>
			<tbody>
				<tr class="rowodd">
					<td class="tcl">
						<div class="icon"><div class="nosize">1</div></div>
						<div class="tclcon">
							<div>
								<h3><a href="viewforum.php?id=16">How to choose your hosting service</a></h3>
								<div class="forumdesc">This is about hosting services and how to decide 
which one to use</div>
								<p class="modlist">(<em>Moderated by</em> george)</p>
							</div>
						</div>
					</td>
					<td class="tc2">1</td>
					<td class="tc3">3</td>
					<td class="tcr"><a href="viewtopic.php?pid=132#p132">2017-11-29 00:13:29</a> <span class="byuser">by garry</span></td>
				</tr>
			</tbody>
			</table>
		</div>
	</div>
</div>

<div id="brdstats" class="block">
	<h2><span>Board information</span></h2>
	<div class="box">
		<div class="inbox">
			<dl class="conr">
				<dt><strong>Board statistics</strong></dt>
				<dd><span>Total number of registered users: <strong>7</strong></span></dd>
				<dd><span>Total number of topics: <strong>65</strong></span></dd>
				<dd><span>Total number of posts: <strong>140</strong></span></dd>
			</dl>
			<dl class="conl">
				<dt><strong>User information</strong></dt>
				<dd><span>Newest registered user: Bryan-tester</span></dd>
				<dd><span>Registered users online: <strong>0</strong></span></dd>
				<dd><span>Guests online: <strong>1</strong></span></dd>
			</dl>
			<div class="clearer"></div>
		</div>
	</div>
</div>
</div>

<div id="brdfooter" class="block">
	<h2><span>Board footer</span></h2>
	<div class="box">
		<div id="brdfooternav" class="inbox">
			<div class="conl">
				<form id="qjump" method="get" action="viewforum.php">
					<div><label><span>Jump to<br /></span>
					<select name="id" onchange="window.location=('viewforum.php?id='+this.options[this.selectedIndex].value)">
						<optgroup label="Forum rules READ BEFORE POSTING">
							<option value="13">Rules, Read before posting</option>
						</optgroup>
						<optgroup label="Parrots">
							<option value="11">Other Birds and Pets</option>
							<option value="3">Parrots</option>
						</optgroup>
						<optgroup label="OpenBsd">
							<option value="6">OpenBsd</option>
						</optgroup>
						<optgroup label="Minix 3">
							<option value="8">Minix 3</option>
						</optgroup>
						<optgroup label="NEW TOYS ARE FUN">
							<option value="15">Virtual Box</option>
							<option value="9">New TOYS are fun</option>
						</optgroup>
						<optgroup label="Minix 3 server">
							<option value="7">Minix 3 server</option>
						</optgroup>
						<optgroup label="Test category">
							<option value="1">Test forum</option>
						</optgroup>
						<optgroup label="Herbal Health">
							<option value="10">Natural healing and God</option>
						</optgroup>
						<optgroup label="Sports and events">
							<option value="12">Sports and events</option>
						</optgroup>
						<optgroup label="For the Birds">
							<option value="14">For the Birds</option>
						</optgroup>
						<optgroup label="Webdesign, Hosting, Servers">
							<option value="16">How to choose your hosting service</option>
						</optgroup>
					</select></label>
					<input type="submit" value=" Go " accesskey="g" />
					</div>
				</form>
			</div>
			<div class="conr">
				<p id="feedlinks"><span class="atom"><a href="extern.php?action=feed&type=atom">Atom active topics feed</a></span></p>
				<p id="poweredby">Powered by <a href="http://fluxbb.org/">FluxBB</a></p>
			</div>
			<div class="clearer"></div>
		</div>
	</div>
</div>

</div>
<div class="end-box"></div>
</div>

</body>
</html>
 
=====
Below is a example, of how I have the CSS files I am working on in my home dir:

Code: Select all

 garry% cd /home/garry/CSS-files/
garry% ls
Cobalt.css      Lithium.css     Radium.css
Earth.css       Mercury.css     Sulfur.css
Fire.css        Oxygen.css      Technetium.css
garry% 
===== Let's look at the "Cobalt.css" ===
I use "leafpad", to write,edit, etc, but any text editor will do. You windows user buddy, could use "note pad", one thing that should be avoided is any Libre Office or MS office, etc,... those abdomations are not good to use, and ony serve to complicate things.

Code: Select all

/*****************************************************************
1. INITIAL SETTINGS
*****************************************************************/

/* Limited Reset
----------------------------------------------------------------*/

.pun table, .pun div, .pun form, .pun p, .pun h1, .pun h2, .pun h3,
.pun h4, .pun h5, .pun pre, .pun blockquote, .pun ul, .pun ol, .pun li, .pun dl,
.pun dt, .pun dd, .pun th, .pun td, .pun fieldset, .pun img, .pun abbr, .pun cite {
	margin: 0;
	padding: 0;
	border: 0;
	}

.pun ul, .pun ol {
	list-style: none
	}


/* Structural Settings
----------------------------------------------------------------*/

.pun .clearer, .pun .nosize {
	height: 0;
	width: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden
	}

.pun .clearer, .pun .clearb {
	clear: both
	}

.pun .nosize {
	position: absolute;
	left: -9999em;
	text-indent: -9999em;
	width: 0;
	}

* html .inbox, * html .inform, * html .pun, * html .tclcon, * html .codebox {
	height: 1px
	}

.pun, .pun .inbox, .pun .inform, .pun .tclcon, .pun .codebox {
	min-height: 1px
	}

.clearl {
	clear: left;
	}

/* Hidden Elements
----------------------------------------------------------------*/

#brdfooter h2, #brdstats h2, #brdstats .conl dt, #brdstats .conr dt,
#modcontrols dt, #searchlinks dt, div.postright h3, span.closedtext,
.pun .required strong span {
	position: absolute;
	display: block;
	overflow: hidden;
	width: 0;
	left: -9999em;
	text-indent: -9999em;
	}

/*****************************************************************
2. TEXT & CONTENT
*****************************************************************/

/* Text Defaults
----------------------------------------------------------------*/

.pun {
	font: 68.75%/1.4545em Verdana, Helvetica, Arial, sans-serif;
	line-height: normal;
	}

.pun table, .pun td, .pun th, .pun input, .pun select, .pun optgroup, .pun textarea, .pun samp, .pun legend {
	font-size: 1em;
	font-family: verdana, helvetica, arial, sans-serif;
	}

.pun pre, .pun code {
	font-size: 1.182em;
	font-family: consolas, monaco, "bitstream vera sans mono", "courier new", courier, monospace
	}

.pun pre code {
	font-size: 1em;
	}

.pun strong {
	font-weight: bold;
	}

.pun em {
	font-style: italic;
	}


/* Content Defaults
----------------------------------------------------------------*/

.pun p, .pun ul, .pun ol, .pun dl {
	font-size: 1em;
	padding: 3px 0;
	}

.pun h2 {
	font-size: 1em;
	font-weight: normal;
	padding: 4px 6px;
	}

.pun h3 {
	font-size: 1.091em;
	padding: 3px 0;
	}

.pun table p, .pun table h3 {
	padding: 0;
	}

.pun span.warntext, .pun p.warntext {
	font-weight: bold
	}

/* User Content (Announcements, Rules, Posts)
----------------------------------------------------------------*/

.pun .usercontent p, .pun .postmsg p {
	padding: 0.75em 0
	}

.pun .usercontent ul, .pun .postmsg ul {
	padding: 0.75em 1em 0.75em 2.5em;
	list-style: disc
	}

.pun .usercontent ol, .pun .postmsg ol {
	padding: 0.75em 1em 0.75em 2.5em;
	list-style: decimal
	}

.pun .usercontent ol.alpha, .pun .postmsg ol.alpha {
	list-style: lower-alpha
	}

.pun .usercontent li ol, .pun .usercontent li ul, .pun .postmsg li ol, .pun .postmsg li ul {
	padding: 0.25em 1em 0.75em 2.5em
	}

.pun .usercontent li p, .pun .postmsg li p {
	padding: 0
	}

.pun .usercontent h1 {
	font-size: 1.4em;
	font-weight: bold;
	padding: 0.75em 0 0 0
	}

.pun .usercontent h2 {
	font-size: 1.2em;
	font-weight: bold;
	padding: 0.75em 0 0 0
	}

.pun .usercontent h3 {
	font-size: 1.1em;
	font-weight: bold;
	padding: 0.75em 0 0 0
	}

.pun .usercontent h4, .pun .usercontent h5, .pun .usercontent h6 {
	font-size: 1em;
	font-weight: bold;
	padding: 0.75em 0 0 0
	}

.pun .quotebox cite {
	font-weight: bold;
	font-style: normal;
	padding: 0.75em 0.75em 0 0.75em
	}

.pun span.bbu {
	text-decoration: underline
	}

.pun span.bbs, .pun del {
	text-decoration: line-through;
	}

.pun .postmsg ins, #punhelp samp ins {
	text-decoration: none;
	}

.pun div.postmsg h5, #punhelp h5 {
	font-size: 1.1em;
	font-weight: bold;
	padding: 0.75em 0 0 0;
	}


/*****************************************************************
3. COMMON STYLES
*****************************************************************/

/* Page Layout
----------------------------------------------------------------*/

html, body {
	margin: 0;
	padding: 0
	}

.pun {
	max-width: 1070px;
	width: 95%;
	margin: 0 auto;
	padding: 12px 20px;
	}

#punredirect, #punmaint, #puninstall, #pundb_update {
	margin: 50px 20% 12px 20%
	}


/* Vertical Element Spacing
----------------------------------------------------------------*/

#brdheader {
	margin: 0 0 12px 0;
	}

#brdtitle p {
	padding-top: 0px
	}

#announce, #brdstats {
	margin: 12px 0 12px 0;
	}

.pun .blocktable, .pun .block, .pun .blockform, .pun .block2col, #postreview {
	margin-bottom: 12px
	}

#punindex .blocktable, .pun .blockpost {
	margin-bottom: 6px
	}

#postreview .blockpost {
	margin-bottom: -1px;
	}

.pun .block2col .blockform, .pun .block2col .block {
	margin-bottom: 0px
	}

.pun .linkst, .pun .linksb {
	margin-top: -12px
	}

.pun .postlinksb {
	margin-top: -6px
	}


/* External Borders
----------------------------------------------------------------*/

.pun .box {
	border-style: solid;
	border-width: 1px;
	}

#brdheader .box {
	border-top-width: 4px;
	}

/* Default Internal Spacing
----------------------------------------------------------------*/

.pun .block .inbox, .pun .blockmenu .inbox {
	padding: 3px 6px
	}

/*****************************************************************
4. COMMON BOARD ELEMENTS
*****************************************************************/

/* Board Header
----------------------------------------------------------------*/

#brdtitle h1 {
	font-size: 1.4em;
	font-weight: bold;
	padding: 3px 0 0 0;
	}

#brdmenu li {
	display: inline;
	margin-right: 12px;
	}

#brdmenu a:link, #brdmenu a:visited {
	text-decoration: none
	}

#brdmenu a:hover, #brdmenu a:active {
	text-decoration: underline
	}

#brdwelcome .conl {
	float: left;
	}

#brdwelcome .conr {
	float: right;
	text-align: right;
	}

/* Breadcrumbs and Post Links
----------------------------------------------------------------*/

.pun .linkst {
	padding: 8px 6px 3px 6px
	}

.pun .linksb, .pun .postlinksb {
	padding: 3px 6px 8px 6px
	}

.pun .crumbs {
	clear: both;
	width: 100%;
	overflow: hidden;
	}

.pun .crumbs li {
	display: inline;
	white-space: nowrap;
	font-weight: bold;
	}

.pun .pagelink {
	float: left;
	white-space: nowrap;
	}

.pun .postlink {
	font-weight: bold;
	white-space: nowrap;
	}

.pun .postlink, .pun .modbuttons {
	float: right;
	text-align: right;
	}

.pun .modbuttons {
	padding: 1px 0;
	white-space: nowrap;
	}

.pun .modbuttons input {
	margin-left: 6px;
	}

.pun .postlink a:link, .pun .postlink a:visited {
	text-decoration: none
	}

.pun .postlink a:hover, .pun .postlink a:active {
	text-decoration: underline;
	}

#punindex .subscribelink {
	margin-top: 6px;
	}

/* Board Footer
----------------------------------------------------------------*/

#brdfooter .conl {
	float: left;
	}

#brdfooter .conr {
	float: right;
	text-align: right;
	}

#brdfooter #modcontrols {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	text-align: center;
	}

#brdfooter #modcontrols dd {
	display: inline;
	margin:0 6px;
	}


/* Board Stats
----------------------------------------------------------------*/

#brdstats .conl {
	float: left;
	}

#brdstats .conr {
	float: right;
	text-align: right;
	}

#onlinelist dd, #onlinelist dt {
	display: inline;
	}


/*****************************************************************
5. MAIN TABLES
*****************************************************************/

.pun table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
	}

.pun .blocktable table {
	table-layout: fixed;
	}

.pun td, .pun th {
	padding: 4px 6px;
	text-align: left;
	font-weight: normal;
	}

.pun td, .pun th {
	border-style: solid none none solid;
	border-width: 1px;
	}

.pun .tcl {
	border-left: 0;
	width: auto;
	}

.pun .tc2, .pun .tc3, .pun .tcmod {
	width: 10%;
	text-align: center;
	padding: 4px 0;
	}

.pun .tcr {
	width: 30%;
	}

.pun .tcl h3 {
	font-size: 1.091em;
	font-weight: bold;
	}

.pun .tcl h3 span.newtext {
	font-size: 0.917em;
	}

.pun .tcl span.newtext, .pun .tcl span.pagestext {
	white-space: nowrap;
	font-weight: normal;
	}

.pun td span.byuser {
	white-space: nowrap;
	}

.pun .tcl p {
	padding: 5px 0 0 0
	}

#punsearch #vf .tc2 {
	width: 18%;
	text-align: left;
	padding: 4px 6px;
	}

#users1 .tcr {
	width: 25%
	}

#users1 .tc2 {
	width: 25%;
	text-align: left;
	padding: 4px 6px;
	}

#debug .tcl {
	width: 10%
	}

#debug .tcr {
	width: 90%;
	white-space: normal
	}

#punindex .tcr .byuser {
	display: block
	}

.pun .blocktable .tclcon {
	padding: 0 11px 0 12px;
	overflow: hidden;
	min-height: 1px;
	position: relative;
	}

.pun .blocktable .tclcon div {
	width: 100%;
	overflow: hidden;
	}

.pun .icon {
	margin: 0.1em 0 0 0.2em;
	border-width: 0.6em;
	border-style: solid;
	height: 0;
	width: 0;
	overflow: hidden;
	float: left;
	}

.pun .icon div {
	position: absolute;
	left: -9999em;
	text-indent: -9999em;
	height: 0;
	}

.pun .iposted .ipost {
	position: absolute;
	left: 0;
	font-weight: bold;
	width: 8px;
	padding-left: 4px;
	text-align: center;
	top: 0;
	}

/*****************************************************************
6. MAIN FORMS
*****************************************************************/

.pun .blockform form, .pun .fakeform {
	PADDING: 20px 20px 15px 20px
	}

.pun .forminfo {
	margin-bottom: 12px;
	padding: 9px 10px;
	border-style: solid;
	border-width: 1px;
	}

.pun .forminfo h3 {
	font-weight: bold;
	}

.pun .inform {
	padding-bottom: 12px
	}

.pun fieldset {
	padding: 0px 12px 0px 12px;
	border-style: solid;
	border-width: 1px
	}

.pun legend {
	padding: 0px 6px
	}

.pun .infldset {
	padding: 9px 0px 12px 0
	}

.pun label {
	display: block;
	padding: 3px 0
	}

.pun label.conl {
	float: left;
	overflow: visible;
	margin-right: 10px
	}

.pun fieldset .rbox br {
	display: none;
	}

.pun fieldset .rbox label {
	padding: 3px 0 3px 25px;
	position: relative;
	vertical-align: middle;
	}

.pun fieldset .rbox input {
	margin: 0 9px 0 -25px;
	padding: 0;
	width: 16px;
	position: relative;
	vertical-align: middle;
	}

.pun .txtarea {
	width: 75%
	}

.pun .txtarea textarea, .pun input.longinput {
	width: 100%
	}

.pun .bblinks {
	padding-bottom: 10px;
	padding-left: 4px
	}

.pun .bblinks li {
	display: inline;
	padding-right: 20px
	}

.pun .blockform .buttons {
	padding-left: 12px;
	}

.pun .blockform .buttons input {
	margin-right: 8px;
	}

#posterror ul {
	list-style: square;
	padding: 3px 0 3px 24px;
	}

.pun .deletemsg {
	border-style: solid;
	border-width: 1px;
	padding: 6px 15px;
	}

.pun p.actions span {
	margin-right: 12px;
	}

.pun .multiselect {
	float: left;
	padding-bottom: 7px;
	}

.pun .checklist {
	border-width: 1px;
	border-style: solid;
	max-height: 9em;
	width: 20em;
	overflow: auto;
	padding: 0.3em 0.5em;
	margin: 0.25em 16px 0 0.15em;
	}

.pun .checklist fieldset {
	border: 0;
	padding: 0;
	}

.pun .checklist legend {
	padding: 0;
	}

.pun .checklist legend span {
	width: auto;
	max-width: 25em;
	}

/*****************************************************************
7. PROFILES AND ADMIN
*****************************************************************/

.pun .block2col {
	padding-bottom: 1px
	}

.pun .block2col .blockform, .pun .block2col .block {
	margin-left: 14em
	}

.pun .blockmenu {
	float:left;
	width: 13em
	}

.pun .blockmenu li {
	padding: 3px 0;
	font-weight: bold;
	}

.pun .blockmenu a:link, .pun .blockmenu a:visited {
	text-decoration: none
	}

.pun .blockmenu a:hover, .pun .blockmenu a:active {
	text-decoration: underline
	}

#viewprofile dl {
	float: left;
	width: 100%;
	overflow: hidden
	}

#viewprofile dd {
	margin-left: 14em;
	padding: 3px;
	}

#viewprofile dt {
	float: left;
	width: 13em;
	margin: 3px 0;
	}

#profileavatar img {
	float: right;
	margin-left: 1em
	}

#adintro ul {
	list-style-type: disc;
	margin-left: 8px;
	padding-left: 16px;
	}

/*****************************************************************
8. MAIN POSTS
*****************************************************************/

.pun .blockpost h2 a:link, .pun .blockpost h2 a:visited {
	text-decoration: none;
	}

.pun .blockpost h2 a:hover, .pun .blockpost h2 a:active {
	text-decoration: underline;
	}

.pun .blockpost h2 .conr {
	float: right;
	text-align: right;
	}

#punsearch .blockpost h2 span {
	white-space: nowrap;
	}

.pun .blockpost .box {
	overflow: hidden;
	}

.pun .postleft, .pun .postfootleft {
	float:left;
	width: 18em;
	position: relative;
	overflow: hidden;
	}

.pun .postleft dl {
	padding: 6px;
	}

.pun .postleft .usercontacts, .pun .postleft .icon {
	margin-top: 6px
	}

.pun .postleft .postavatar, .pun .postleft .usertitle {
	margin-bottom: 6px;
	display: block;
	}

.pun .blockpost dt {
	font-size: 1.091em;
	font-weight: bold;
	}

.pun .blockpost dt a:link, .pun .blockpost dt a:visited {
	text-decoration: none;
	}

.pun .blockpost dt a:hover, .pun .blockpost dt a:active {
	text-decoration: underline;
	}

.pun .postright, .pun .postfootright {
	border-left-width: 18em;
	border-left-style: solid
	}

#postpreview .postright {
	border-left: 0
	}

.pun .postright {
	padding: 0 6px;
	}

.pun .postfootright, .pun .multidelete {
	text-align: right
	}

.pun .postmsg {
	width:98%;
	overflow: hidden;
	padding-bottom: 6px;
	word-wrap: break-word;
	}

.pun .postfootright ul, .pun .postfootright div, .pun .postfootright p,
.pun .postfootleft p {
	padding: 10px 6px 5px 6px;
	}

.pun .postfootright li {
	display: inline;
	}

.pun .postfootright li:before {
	content: " | ";
	}

.pun .postfootright li:first-child:before {
	content: "";
	}

.pun .postfootright a:link, .pun .postfootright a:visited {
	text-decoration: none
	}

.pun .postfootright a:hover, .pun .postfootright a:active {
	text-decoration: underline
	}

.pun .codebox {
	border-style: solid;
	border-width: 1px;
	margin: 0.75em 1em;
	padding: 0;
	}

.pun .quotebox {
	border-style: solid;
	border-width: 1px;
	margin: 0.75em 1em;
	padding: 0 0.75em;
	}

.pun .quotebox cite {
	display: block;
	padding: 0.75em 0 0 0;
	}

.pun .quotebox blockquote {
	width: 100%;
	overflow: hidden
	}

.pun .codebox pre {
	overflow: auto;
	width: 100%;
	overflow-y:hidden
	}

* html .pun .codebox pre {
	padding-bottom: 10px;
	}

*+html .pun .codebox pre {
	padding-bottom: 10px
	}

.pun .codebox pre code {
	display: block;
	padding: 0.75em;
	}

.pun .codebox pre.vscroll {
	height: 32em;
	overflow: auto;
	overflow-y: auto
	}

.pun .postmsg img {
	vertical-align: bottom;
	}

.pun .postsignature hr {
	margin-left: 0px;
	width: 200px;
	text-align: left;
	height: 1px;
	border:none
	}

.pun .postmsg .postimg img {
	max-width: 98%;
	vertical-align: middle;
	margin: 7px 0.5em 7px 0;
	}

.pun .postmsg .postimg a:link img, .pun .postmsg .postimg a:visited img {
	border-style: solid;
	border-width: 2px;
	}

.pun .blockpost label {
	padding: 3px 6px;
	border-style: solid;
	border-width: 1px;
	vertical-align: middle;
	display: inline-block;
	}

.pun .blockpost label * {
	vertical-align: middle;
	margin: 0;
	padding: 0;
	}

/****************************************************************/
/* 9. HELP FILES AND MISC. */
/****************************************************************/

#punhelp h2 {
	margin-top: 12px
	}

#punhelp div.box {
	padding: 10px
	}

#debugtime {
	margin-top: -12px;
	text-align: center;
	}

#brdwelcome, #brdfooter dl a, div.blockmenu li, div.rbox input {
	line-height: 1.4em
	}

#announce div.inbox div {
	padding: 3px 0
	}

/*****************************************************************
COLOUR SCHEME
*****************************************************************/

/* Background / Text
----------------------------------------------------------------*/

body {
	background: #2a2a2a;
	color: #d4d4d4
	}

.pun {
	color: #d4d4d4
	}

.pun .box, #adminconsole fieldset th {
	background-color: #383838
	}

.pun td.tc2, .pun td.tc3, .pun td.tcmod, #postpreview, #viewprofile dd, .pun .forminfo,
#brdfooter #modcontrols, #adminconsole fieldset td, .pun .blockmenu .box, #adstats dd {
	background-color: #424242
	}

.pun h2, #brdmenu {
	background-color: #565656;
	color: #d4d4d4
	}

.pun th {
	background-color: #484848
	}

.pun legend {
	color: #60a0dc
	}

.pun .blockmenu li.isactive a, #posterror li strong {
	color: #d4d4d4
	}

.pun .usercontent * {
	background: transparent;
	color: #d4d4d4
	}

.pun textarea, .pun input, .pun select {
	background-color: #2a2a2a;
	color: #d4d4d4
	}

.pun .multiselect, .pun .checklist {
	color: #D4D4D4;
	}

.pun .checklist {
	border-color: #666;
	}

/* Posts
----------------------------------------------------------------*/

.pun .blockpost .box, .pun .postright, .pun .postfootright, .pun .deletemsg {
	background-color: #383838
	}

.pun .postright, .pun .postfootright {
	border-left-color: #424242
	}

.pun .postleft, .pun .postfootleft, .pun .blockpost label, .pun .codebox, .pun .quotebox {
	background-color: #424242
	}

.pun .blockpost h2 {
	background-color: #565656
	}

.pun .blockpost h2 span.conr {
	color: #a19e96
	}

.pun .postmsg ins, #punhelp samp ins {
	background-color: #ff0;
	}

.pun hr {
	background-color: #606060;
	color: #606060
	}

/* Borders
----------------------------------------------------------------*/

.pun .box {
	border-color:#565656
	}

.pun td, #brdfooter #modcontrols {
	border-color: #565656
	}

.pun th {
	border-color: #484848
	}

.pun fieldset {
	border-color: #606060
	}

#adminconsole td, #adminconsole th {
	border-color: #383838
	}

.pun .quotebox, .pun .codebox, .pun .forminfo,
.pun .blockpost label, .pun .deletemsg {
	border-color: #606060
	}

/* Links
----------------------------------------------------------------*/

.pun a:link, .pun a:visited {
	color: #60a0dc
	}

.pun a:hover, .pun a:active, .pun a:focus {
	color: #80d6ff
	}

.pun .postmsg .postimg a:link img, .pun .postmsg .postimg a:visited img {
	border-color: #60a0dc;
	}

.pun .postmsg .postimg a:hover img, .pun .postmsg .postimg a:active img, .pun .postmsg .postimg a:focus img {
	border-color: #80d6ff;
	}

.pun h2 a:link, .pun h2 a:visited,
#brdmenu a:link, #brdmenu a:visited {
	color: #d4d4d4
	}

.pun h2 a:hover, .pun h2 a:active,
#brdmenu a:hover, #brdmenu a:active {
	color: #d4d4d4
	}

.pun .postreport a:link, .pun .postreport a:visited,
.pun .iclosed td.tcl a:link, .pun .iclosed td.tcl a:visited {
	color: #888
	}

.pun .postreport a:hover, .pun .postreport a:active,
.pun .iclosed td.tcl a:hover, .pun .iclosed td.tcl a:active {
	color: #aaa
	}

.pun .maintenancelink a:link, .pun .maintenancelink a:visited {
	color: #ff4000
	}

.pun .maintenancelink a:hover, .pun .maintenancelink a:active {
	color: #ff5010
	}

/* Status Indicators
----------------------------------------------------------------*/

.pun .icon {
	border-color: #484848 #404040 #3c3c3c #444444
	}

.pun .iredirect .icon {
	border-color: #383838 #383838 #383838 #383838
	}

.pun .inew .icon {
	border-color: #5496d8 #4b85c0 #4377ac #4f8dcb
	}
 
The main point here, Hah, I am not using Debian, I am using OpenBsd, but any one using Debian, can still not only read the code, but can copy /paste it into their favourite text editor, modify, test, etc, .... do what ever the want with it. So that is a breif "get you feet wet", tutorial, all the tools needed to share code, are right there at your finger tips, and it does not matter what OS you or your friend use. What does matter, is use a good text editor, and not some MS mal ware that produces unreadable documents, of no use to anybody.
===== posted while writing ===
On the real time thing, what I do, is use my text editor on one side of the screen, edit and save, then on the other side of the screen, refresh the browser, and I see what affect the edits had,.... not sure either what the OP means on that though.
Last edited by GarryRicketson on 2019-06-28 12:18, edited 1 time in total.

User avatar
sickpig
Posts: 589
Joined: 2019-01-23 10:34

Re: Code sharing tools

#6 Post by sickpig »

if u r opposed to http or https sync then mayb syncthing(opensource) or resilio sync
edit
these options transfer data directly between devices no servers involved

User avatar
qyron
Posts: 206
Joined: 2008-07-21 20:47

Re: Code sharing tools

#7 Post by qyron »

Although HTML and CSS are universal why me and my friend are trying to find a way to share/audit code in real time is because I'm trying to learn these languages in a eBook application setting, something that is not very well know to my friend because, as I've been slowly discovering and sharing with him over long and tedious chats, there are some elements that deviate from the usual structure of a website.

What I've been able to learn up 'till now as been done by unzipping several ebooks and going through the "remains". It feels like a strange sort of compared anatomy class/project because no two books retain more than a thin resemblance on how the innards are organized and related.

Having a way to share/audit code in real time would aid us in both understand how everything is arranged and help me in learning the basics for HTML and CSS.
Stop hitting me with anvils!|Parem de me bater com bigornas!
Willie E. Coyote

Running Debian 9.2

Dai_trying
Posts: 1100
Joined: 2016-01-07 12:25
Has thanked: 5 times
Been thanked: 16 times

Re: Code sharing tools

#8 Post by Dai_trying »

What I would recommend for learning html/css (btw I'm no expert) is to get a free webserver and start playing, your friend could see the code you post by reading the page source and you could add comments (which are view-able in the source) for your friend to see when reading the code.
Would I be right in thinking you also want direct communication at the same time? If so you could use any chat software which is freely available cross platform.

Post Reply