VSC, Github Desktop, css-in-wordpress

Friday 25 February 2022

At the end of the day, I am

  • Able to use VSC, and find it preferable to BBEdit
  • I got github desktop to let me edit a branch, but I couldn’t see how to merge it back in to main. I don’t really understand the git model yet. I finally got rid of the branch, and manually updated the main files, and uploaded them.
  • I’ve figured out markup (as it works in wordpress), and figured out how to change the appearance of headers in my wordpress theme.

All in all a reasonable day’s work.

VSC

I’ve installed Visual Studio Code on my Mac. So far it is performing as promised — it makes css code more legible, and shows examples of colors referred to in the text. Hopefully it will work as well for php and html. Taking a quick peek at the html reminded me that there is still a lot of clean up to do. …Before I embark on that, I want to see if I can get git or github working locally; modern version control would certainly be preferrable to my modus operandi of just creating copies of folders and trying to name the appropriately.

Github Desktop

I looked into Github and discovered that I have an account, with the username 2goldfinch, from 2017. This was created for some kind of IBM project, but I never used it other than making a couple of test repositories. Now I hope to explore it a bit more, and am encouraged that there is a desktop version that is oriented towards point and click folks like me. …Besides using it to maintain my website materials, I’ve read that people also use it to manage writing. I’m not entirely sure how that works — do I need to write plain text with markdown? We shall see.

Markdown and css-in-wordpress

So the basic markdown works for creating headings, but I don’t see how to re-use reusable blocks; applying custom css styles to each block seems way to cumbersome to be the way it ought to work.

Also, all of a sudden, I am now getting the spinning beachball cursor appearing forlongish amounts of time as I am writing here. That doesn’t seem good. Could it be related to special css files? …Or is it some weird interaction with githum desktop trying to sign into github.com. Not sure.

=> Not long after, github desktop complained it wasn’t in the app folder and that this might cause problems. So I moved it, and also moved VSC to the app folder. Hopefully that will help. ….That, and a reboot, seemed to help.

Changing the appearance of the headers with css

OK, now I can use markdown to easily create headers, and I’ve found out how to insert css to change the appearance of the header text — it appears necessary to include “!important” at the end of each css statement. I presume that overrules defaults set elsewhere.

h1 {
    color: #000066 !important;
	font: small-caps bold 20pt Arial, sans-serif !important;
}

h1.entry-title {
    color: black !important;
	font:  bold 24pt Arial, sans-serif !important;
}

h2 {
    color: darkred !important;
	font: small-caps bold 16pt Arial, sans-serif !important;

}

h3 {
    color: cornflowerblue !important;
	font: bold 13pt Arial, sans-serif !important;

}

Views: 4

Markdown; Next: Git & Visual Studio Code

Thursday, 24 February 2022

Markdown

OK, it looks like this wordpress editor automatically interprets *Markdown*… at least I think it does. **Sometimes.** Well, maybe only for headings? Or things that are on their own lines?

Things I can do

  • create headers with # or ## or ### …
  • create a block quote with >
  • create a list with * or 1, and indent it with a space
  • create inline code using back single quotes` (NB. the backquotes behave oddly, but work)
  • create a horizontal rule using —

Things I can’t do

  • create inline emphasis using asterixes
  • create inline highlights using =’s
  • create inline code using back single quotes
  • create a horizontal rule using ###
  • create a link using this syntax: [a link to my site](https://tomeri.org)

But let’s make sure the things I think I can’t do are not showing up when published

  • create *inline* **emphasis** using ***asterixes***
  • create inline ==highlights== using =’s
  • create a link using this syntax: [a link to my site](https://tomeri.org)

Things I’d like to be able to do

  • Create my own .css styles. I can see where to plug in the style names on the left, but where do I define the css styles?

Next Thing

The next thing I want to do is to learn more about git and how it is used for version control. In particular, there are people who use git for non-coding tasks, such as writing, so I’d like to see if that makes sense

After that, Jeffrey recommended I look at Visual Studio from Microsoft which could prove very helpful in (1) detecting errors, and (2) suggesting what code to write. He gave me a demo where he wrote a comment about what the code was going to do, and the editor supplied the actual code (by doing matching from within github).

Views: 2

MAMP

Wednesday 23 February 2022

A couple of weeks ago I installed MAMP. MAMP is a solution stack for web development and stands for Macintosh (OS), Apache , MySQL, PHP. It enables one to run a server based environment on a local machine, and simplifies development because new versions of a site that use php do not have to be uploaded to an external server.

I am now going back to MAMP for php development — that will help avoid the error I had yesterday where I uploaded my php file to the wrong directory and was unable to see any effect of changes I make. With MAMP, I can just edit the file directly.

Figuring out the code

The first thing I will do is figure out the code that makes the random quotations work. Here is the snippet:

<?php

$textfile = 'quotations.txt'; # data file of text lines to display randomly (html ok)

#### READ STRINGS FROM FILE (in same directory) INTO AN ARRAY AND RANDOMIZE THEM
ini_set('auto_detect_line_endings', TRUE);      #alters php settings to detect newlines
$disp = file($textfile, FILE_IGNORE_NEW_LINES); #reads a file into an array
$count = (count($disp)-1);                      #number of lines in array minus 1
$rand = array();                                # declare that rand is an array
for ($a=0;$a<=$count;$a++)                         
    {array_push($rand,$a);}                     # Puts sequence of $count indices into $rand
shuffle($rand);                                 # shuffles indices in $rand

#####Create html formatting and embed choosen string in it
echo '<table id="foo">';
$col_ent = array();                             # declare that $col_ent is an array

$i = 0;
 $key = $rand[$i];                               #put the first element of $rand into $key
 array_push($col_ent,'1');                       #put 1 into #col_ent
echo "<tr><td class='foo-$i'>";

echo "<div class=\"quotationDiv\">";
/* style=\"margin: 10% 15%; text-align: center; font-size:18pt; font-weight:bold;\">"; */
echo "$disp[$key]";  /* the string*/            #display a random string using $key
echo '</div></td></tr></table>';

#Once there was more code that created multiple random entries indexed with col_ent

/*
echo $post;
*/

?>


Ok, I’ve commented the above, and can see that the original code that I copied from this had a lot of leftovers from when it tried to be a far more general function. I think I should be able to rewrite the above so I can just generate a random number and use it as an index to select a random line.

Like this

  • #load the file into the array
  • #determine the length of the array
  • #generate a random index from the set 0 to length-1
    (assuming that php arrays start with 0)
  • #print out the line, embedded in the proper html

That works. The reduced code looks like this:

<?php

$textfile = 'quotations.txt'; # data file of text lines to display randomly (html ok)

#### READ STRINGS FROM FILE (in same directory) INTO AN ARRAY AND RANDOMIZE THEM
ini_set('auto_detect_line_endings', TRUE);      #alters php settings
$quotes = file($textfile, FILE_IGNORE_NEW_LINES);#reads a file into an array
$count = (count($quotes)-1);                     #count number of lines and sub 1
$key=rand(0,$count);                             #generate a random index 

#####Create html formatting and embed choosen string in it
echo '<table id="foo">';

$i = 0;
echo "<tr><td class='foo-$i'>";

echo "<div class=\"quotationDiv\">";
/* style=\"margin: 10% 15%; text-align: center; font-size:18pt; font-weight:bold;\">"; */
echo "$quotes[$key]";  /* the string*/            #display a random string using $key
echo '</div></td></tr></table>';

#Once there was more code that created multiple random entries indexed with col_ent

?>
  • Now I need to remove the legacy formatting… the<td class=’foo-$i’>.
  • And I also need to be crisper on the IDs and class stuff…
  • and the div and table stuff
  • OK, legacy formatting is gone — the table formatting has been discarded and there is just Div.
  • One odd thing that is happening is when I make tweaks to the .php file, they don’t always seem to have an effect right away. It’s as though the original file is cached, though doing what I think is required to force a reload doesn’t make a difference
  • ==> The above problem appears to be due to having ‘lost’ a semi colon in the style section.

The other mystery is that I tried putting all the style code into the main css file and it broke stuff — could that be due to the missing semi-colon???

=> YES
==> ALSO, NEED TO BE CAREFUL TO FORCE A REFRESH OF THE UPLOADED FILES

Views: 4

Random Flip Cards from File

Tuesday 22 February 2022

Where I am

I am now modifying the php code to make it work for flip cards

  1. first I simplified the old code by taking out various state variables. So the resulting code will assume a file is in the same directory, and not have options for giving it titles or putting things before or after.
  2. I should also go ahead and take out the code that allows multiple random items to be put up — but I don’t understand the code well enough yet. I will defer that until I get the basic things I want working
  3. What I will try next is to just get text from a line of a file onto one side of the card
  4. Then I will try parsing the line, so I can get stuff on the front and back.
  5. then we’ll see…

Next Steps

At this point I’ve gotten stuck on #3. So I am going to go back to #2, simply the code as much as possible, and make sure I understand everything that it is doing. Then I will return to #3.

  • Repeated an earlier error: uploaded a file to the wrong directory, and spent nearly an hour trying things and not getting any result — so always make sure that I can see a change when I upload a file.

Views: 7

Mo: Quick Flipcard

21 February 2022

Spent about an hour finding some css/html to make a flip card for a page. I still need to fully understand how it works. One that is done, I hope to be able to modify my php quote code so that I can pull the front and back of textual flipcards from a file and display a random card…

Views: 3

Fr: Omeka; other

Omeka

  • Omeka is working well enough, but when I display a single item it just lists all the Dublin Core meta-data — I would like to have more control over what is shown. It is possible that there are other ways to achieve that: there are entities called “Exhibits” and (I think) Pages that may allow for it.
  • What I would like, I think, is the ability to display several pictures at once, with text relating them — for example, Olivine in basaltic scoria, weather/altered and fresh, as well as green (olvine) sand.

Views: 2

We: Flashcards & Omeka

16 February 2022

Omeka

  • After the flashcard exploration did not work out, I decided to see if there were any pre-made tools offered by softaculous. And indeed there were: in particulr, Omeka, which is an open source platform for creating exhibits.
  • I managed to set it up on my site, and am currently importing a few pictures of rock samples into my site. So far, so good!

Flashcards

  • I found some code that is supposed to produce flashcards using html, javascript and jquery.

But it doesn’t entirely work. …I didn’t think to test it until I’d gone through the tutorial and produced something that didn’t quite work.

  • Then I just downloaded the original source, and that didn’t work either.
  • I tried it online, in case there was some problem with running it locally, but that didn’t help.
  • Also looks like the format of the coding log isn’t working as I would wish. : – (

Views: 5

Mo: Website work

14 February 2022

What I’ve done so far

  • Refactored my blogs: one semi-private, one public
  • Decided to try keeping track of my coding notes via a blog
  • Playing around with using a menu in a wordpress blog

What I’ve learned

  • Can’t access local files from a web page for security reasons

Thoughts / What’s Next

  • Put up things I’m trying to learn — perhaps a template that provides flash card like functionality.

# # #

Views: 4

Sa: Site formatting changes; indenting images; style sheet import error

12 February 2022

What I did

I did not take notes.

I messed around with the formatting of the site, and made several minor changes

  • A banner describing the purpose of each page at the top
  • Elimination of the archive tap, and an incorporation of its content into the professional page
  • elimination of the borders around the innter tables on the professional page
  • fixing the left indent on pictures on the professional page

What I learned

  • I got a bit more confident with the style sheet
  • I figured out that to indent the images, I needed to use padding-right rather than margin-right (but I don’t know why – perhaps because it wasn’t with in a <p> tag?)
  • I had a lot of difficulty at first because my pages were reading in a previous version of the style sheet, so my changes to the new style sheet seemed to have no effect

What to do next

I would like to put up more content. Possibilities, all of which I want to pursue, are

  • book summaries
  • another essay
  • Information about rock specimens – which means I need to figure out a format…
  • The rock sample format also would, I think, allow me to embed things I want to work on learning

Also I need to clean up the various blogs – I should have only two blogs on the site. One for personal work, and one for publication.

Views: 3

Tu: New site version up; next step

Starting Point

About a week ago, before I went to Mayos, I did 1-3 above, and it didn’t work. First, nothing happened, and then I realized I was having trouble with the cache. I cleared the cache on Chrome, and things worked better, but the top horizontal menu was broken.

  • One theory is that somehow having a php page mixed in broke things.
  • Another theory is that there is a second cache on my server page, and maybe it is pulling from that; however, at the time, I was reluctant to delete that in case it broke everything and I’d be left with a dead site.

Current steps

I am trying a more cautious incremental approach. I have

1. Made sure that none of the top level pages (except index.html) have the same names as the original site

2. I have eliminated all references to .php files from this version

Results

It worked!

There was something wrong with the way I had included the .css file – it worked when the browser was reading files from the disk, but failed on the server.

I will now go back and try putting in the version with the php work.  Yes, that worked as well. The php file was not a problem.

Next steps

  • I am going to see if I can make the professional page look better by moving the images into the ‘content’ part of the screen grid.  I got the format the way I like it by putting a table within a table, but I need to figure out how to create and invoke a second table definition in the .css sheet so I can have an internal table with no borders. I ought to understand this.
  • Next I think I will print out the top pages, and edit the text for brevity.
  • After that I will return to php – it would be nice to put cool pictures up, with commentary, in the same way the quotes come up. This is probably a larger project, though.

Views: 4