You can use the editor on GitHub to maintain and preview the content for your website in Markdown files.
Whenever you commit to this repository, GitHub Pages will run Jekyll to rebuild the pages in your site, from the content in your Markdown files.
Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for
Syntax highlighted code block
# Header 1
## Header 2
### Header 3
- Bulleted
- List
1. Numbered
2. List
**Bold** and _Italic_ and `Code` text
[Link](url) and 
For more details see GitHub Flavored Markdown.
Your Pages site will use the layout and styles from the Jekyll theme you have selected in your repository settings. The name of this theme is saved in the Jekyll _config.yml configuration file.
Having trouble with Pages? Check out our documentation or contact support and we’ll help you sort it out.
Links: to @codewisdom on Twitter, and about Nicholas Negroponte at Wikipedia.
I think when you have a lot of jumbled up ideas they come together slowly over a period of several years ~ Tim Berners-Lee
Frontend Web Development
"There is no problem so bad that you can't make it worse." Chris Hadfield
Link of the month A super quick way to try out CSS Grid
Currently working on Mermay Gallery and #Junicorn2018 Gallery
Improving designs with tactics
Revisiting the updated FreeCodeCamp
Learning lots of new things with the free (minus certificate) W3Cx Front-end web developer course.
Viewing: Astronomy picture of the day
today's tweet: #100daysofcode R5D50/D53 getting a better understanding of the cascade in CSS with MDN while making practice stylesheets.
It may sound a little dramatic (or just plain weird) to say that we’re in a crisis of narrative, but as our lives become ever more distracted, dispersed and interconnected, these stories are what’s going to bind the fragmented interactions of daily life into a sensible whole. The protagonist
Udemy Build a website
Waiting for the ads to finish when downloading a picture dum de dum de dum
edX W3c CSS
Sharing stuff and looking at art
Junicorn digital image making
Avoid enormous network payloads
Image optimisation - Ilya Grigorik
Automating image optimization - Addy Osmani
Optimise images for the web using Paint.NET and PNGGauntlet - Beamtic
How PNG's Two-Dimensional Interlacing Works
Making a Progressive Web App:
OpenClipart.org Pixabay
Pixlr Paint.net
Notepad++
Github
I got Google Lighthouse as a Chrome extension and ran it's checks. This led to reading lots of stuff about image optimisation and after assesing my image gallery site with what it costs to view websites on mobile networks I can see how this improves load times with changes that are barely noticeable.
I decided to Learn Perl. I read a fair bit about it and watched some Big Think talks by Larry Wall. The found there are two versions. This happens. I put off learning Python because I started Python 2 and then there was Python 3. And CSS Grid didn't work when I tried it last year but now it does, yay!
And these: Thoughtful talk on creativity,
The poetry of programming for next gen. and IoT ... wonderful, whimsical and slightly weird".
After watching this, your brain will not be the same | Lara Boyd
I read about Dart after watching this Lightning Talk by Randal Schwartz at a Perl conference.
Mixed two digital images, 1 for #junicorn and #30dayswild the other for #worldoceansday
... through the 80's, the Internet was used for file transfers, newsgroups (a kind of open forum), email and other conveniences. There were a number of different programs like 'fetch', 'gopher' and 'archie' that were used to download, browse and search for files. archive.org
Marc Andreesen conceived of a solution that would put all the pieces together in one app, making it easy for users to browse all the different sorts of information and data on the World Wide Web. Together with others, he started the "Mosaic" project.
He envisioned a technology that would facilitate thoroughly interconnected documents. He wanted authors to be able to connect an idea in one document to the source of the idea in another, or connect a statement with the data that backs up that statement. Traditionally, this kind of thing was done with footnotes and bibliographies, which can be cumbersome. This information should be easily transferable from one place to another, so that in reading one document, it is easy to access everything related (linked) to it. Tim Berners-Lee imagined a "Web" of interconnected documents.
He used the metaphor of a Web to emphasize the importance of connections between documents. It was not just a long list of details, but rather a sea of information stretching out in all directions. This sea of information was navigated by a new tool called a "Browser".
Check #1 There is a character encoding declaration near the start of your source code, and its value is UTF-8.
<head>
<meta charset="utf-8"/>
...
</head>
check #2 The HTML tag has a lang attribute which correctly indicates the language of your content.
<!doctype html>
<html lang="fr">
<head>
Check #3: If your content will be seen by people from diverse cultures, check that your cultural references will be recognized and that there is no inappropriate cultural bias.
Don't worry!
You will learn about the basics as you progress through the course, so don't worry about things you don't understand on this page – you'll learn about them shortly. Once you have taken the course, you can find more tips and information from the W3C at: Internationalization techniques: Authoring HTML & CSS.
When you start creating Web pages, you can also run them through the W3C's Internationalization Checker. If there are internationalization problems with your page, this checker explains what they are and what to do about it.
Internationalisation and why as a content developer you should always choose the UTF-8 character encoding
Tips for getting started with web accessibility Easy Checks - A First Review of Web Accessibility
1.Page title e.g.
<head>
<titlt>Web Accessibility Initiative (WAI) - home page</title>
</head>
- Every image has an alt text eg
<a href="https://w3.org">
<img src="https://w3.org/Icons/w3c_home.png" width="72" height="48" alt="World Wide Web Consortium">
</a>
For more information on web accessibility, visit WAI
Web content accessability guidelines WCAG
Authoring tool accessibility guidelines ATAG
User agent accessibility guidelines UAAG
Enjoyable overview of where we're at re: CSS. Exciting times ahead!
Don't Use My Grid System (or any others)
A presentation at Beyond Tellerrand in May 2018 in Düsseldorf, Germany by Miriam Suzanne
Writing alt texts for img tags, describing the pictures to sound more interesting and less repetitive than the ones I first copy and pasted.
Much time validating code on my unicorn page with W3C's list on their unicorn page. LINK needed! Read loads of stuff about html and CSS on W3C and MDN pages. Interesting suggestions for refactoring code. LINK needed!
W3Cx: HTML5.0x HTML5 and CSS Fundamentals
- HyperText Transfer Protocol (HTTP) is the foundation of data communication for the Web.
- HyperText Markup Language (HTML) is the main mark-up language for creating Web pages and information that can be displayed on a Web browser.
- Web addresses or a Uniform Resource Locator (URL) are used to reference a Web page.
A fundamental key to the World Wide Web is the concept of "Hypertext". Hypertext is built on the idea of linking information together, not unlike using footnotes, except much easier and more flexible. The idea was to "Mark Up" your document with links and define how to break it down into different segments (chapters, sections, paragraphs, tables, figures, etc.)
-
HTML5 5th version of the HTML standard published in October 2014
-
Markup Language system for annotating documents based on for paper printing. Editors would use blue pencil on authors manuscripts.
-
World Wide Web (WWW or W3) Information space where docs are
-
- identified by URLs
- interlinked by hypertext
- accessed via the Internet
- The World Wide Web was invented by Tim Berners-Lee at CERN in Switzerland in 1989. He wrote the first web browser in 1990. - The W3Cx team.
- World Wide Web Consortium (W3C) International standards organisation for the Web abbreviated WWW or W3C.
- Tim Berners-Lee imagined a "Web" of interconnected documents.
- He used the metaphor of a Web to emphasize the importance of connections between documents. It was not just a long list of details, but rather a sea of information stretching out in all directions. This sea of information was navigated by a new tool called a "Browser".
-
Knowledge check
-
-
-
True or False: The primary purpose of HTML is to assist formatting of text.
Some history at the Wayback machine.
-
-
The placeholder unicorns don't work on iPad or Android. iPad has a little document icon and Android a page full of strange code. Only on Instagram!
#Junicorn2018 CSSGrid full of placehoder unicorns.
The end of the Mermay challenge 2018. I practiced digital image manipulation by making a digital image of a mermaid and posting it on Instagram every day. I was a couple of days behind at the start so caught up today and made four images. Three for 29/30/31st of May and one for the first day of the Junicorn challenge.
Tidying and finishing up the Mermay CSS Grid gallery and making making a new one for Junicorn.
Put all the folders and images accumulated on the virtual desktop into a May folder and made a new one for June.
"CSS Grid is here; it’s logical and fairly easy to learn. You can use it to accomplish all kinds of layouts that used to require JavaScript and frameworks, plus new kinds of layout nobody’s even tried yet." The Cult of the Complex
And here's the really good list apart of CSS Grid links:
- [Getting Started with CSS Layout—Rachel Andrew, Smashing Magazine](https://www.smashingmagazine.com/2018/05/guide-css-layout/)
- [Learn CSS Grid—Jen Simmons](http://jensimmons.com/post/feb-27-2017/learn-css-grid)
- [CSS Grid Layout—MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
- [Grid by Example—Rachel Andrew](https://gridbyexample.com/examples/)
- [A Complete Guide to Grid—Chris House, CSS-Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [Practical CSS Grid: Adding Grid to an Existing Design—Eric Meyer, A List Apart](https://alistapart.com/article/practical-grid)
- [Jen Simmons Labs](http://labs.jensimmons.com/)
- [Layout Land—YouTube](https://www.youtube.com/layoutland)
- [A Book Apart: The New CSS Layout, by Rachel Andrew](https://alistapart.com/article/the-story-of-css-grid-from-its-creators)
- [The Story of CSS Grid, from its Creators—Aaron Gustafson, A List Apart](https://alistapart.com/article/the-story-of-css-grid-from-its-creators)
- [Transcript: Intrinsic Web Design with Jen Simmons (The Big Web Show)](http://www.zeldman.com/2018/05/02/transcript-intrinsic-web-design-with-jen-simmons-the-big-web-show/)
I watched some Layout land videos on youtube then had some fun with CSS gid on the beach style image gallery page.
https://gipsi.github.io/mermay2018/
"That everyone has downloaded the same fundamental knowledge on any topic is becoming less and less probable."
"The beauty of hypertext is that we’re able to quickly add much-needed context helpful for n00bs but easy enough for those already in-the-know to scan over. And making documentation more human-readable benefits everyone." - Brad Frost
Helping access websites on an iPad - frustrating. A lot of waiting staring at a blank white screen.
EdX CSS course Friday May 25th 2018
Generally, it is a good idea to put a comment at the top of each CSS
rule, or at the very least at the top of sets of rules that apply to a
single category or section of your Web page.
dark cyan #008B8B 0, 139, 139
Results of Nu html checker on https://gipsi.github.io
- Warning: Consider avoiding viewport values that prevent users from resizing documents. From line 23, column 5; to line 23, column 90 ript>↩ ****↩ <
- Warning: Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools). From line 51, column 3; to line 51, column 41 />↩ **
Finished Module 1, started module 2, W3C EdX CSS course - happy I got all the questions in the quiz right.
Skimmed through all six weeks of the course in a couple of hours so hopefully will have access to it once archived on May 31st
Started W3c CSS course on EdX Some history looking at websites on Wayback machine from 1996, useful validator and checker links, different styles for the same markup on Zen Garden site.
Working on my Mermay gallery to fit images into CSS grid containers.
Getting to know Firefox developer tools better for layouts with Dev tools and CSS Grid
Resizing and overlapping images with fractional units and opacity for interesting layouts. Jen Simmons CSS Grid exercise 8
Let go of idea that your grid framework effects every part of the page. A CSS Grid only effects one element + children. Jen Simmons, 16th May on Twitter
Learning CSS Grid
Placing list children with grid-row and grid-column then resizing the browser is mesmerising.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>grid</title>
<link href="https://fonts.googleapis.com/css?family=Gruppo" rel="stylesheet">
<style>
html {
font-family: 'Gruppo', cursive, lato, sans-serif;
font-size: 12px;
background: #6699cc;
background: linear-gradient(to bottom, #f6e6b4 0%,#ed9017 100%); }
ul {
font-family: 'Gruppo', cursive, lato, sans-serif;
font-size: 2rem;
font-weight: bold;
color: #fff;
margin: 0;
padding: 10px;
background: #26558b;
list-style-type: none;
background: linear-gradient(to bottom, #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%);
}
li {
padding: 1em;
background: #F9423A;
}
li:nth-child(3),
li:nth-child(4),
li:nth-child(7),
li:nth-child(10),
li:nth-child(14),
li:nth-child(16),
li:nth-child(32){
background: #FF9124;
}
li:nth-child(3) {
grid-column: span 2;
}
li:nth-child(4) {
grid-row: span 2;
}
li:nth-child(7) {
grid-column: span 2;
grid-row: span 2;
}
li:nth-child(10) {
grid-column: span 2;
}
li:nth-child(14) {
grid-row: span 2;
}
li:nth-child(16) {
grid-column: span 2;
grid-row: span 2;
}
li:nth-child(32) {
grid-column: span 3;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px,2fr));
grid-gap: 2rem;
}
</style>
</head>
<body>
<ul class="grid-container">
<li>One <img src="" alt="" /></li>
<li>Two <img src="" alt="" /></li>
<li>Three<img src="" alt="" /></li>
<li>Four <img src="" alt="" /></li>
<li>Five <img src="" alt="" /></li>
<li>Six <img src="" alt="" /></li>
<li>Seven <img src="" alt="" /></li>
<li>Eight <img src="" alt="" /></li>
<li>Nine<img src="" alt="" /></li>
<li>Ten <img src="" alt="" /></li>
<li>Eleven <img src="" alt="" /></li>
<li>Twelve <img src="" alt="" /></li>
<li>Thirteen <img src="" alt="" /></li>
</ul>
<footer>
</footer>
</body>
</html>
This awesome set of exercises Here's a Super Quick Way to Try out CSS Grid by Jen Simmons
Research ... a pure css popup without JavaScript
Interesting ... comlex spiral
Try things.
This works, sort of - but I want the image itself bigger ... zoom hover
Firefox asked if I wanted to stop this site ... zoom imagesinside the container using mouse over
Image gallery. Each different skin has a separate HTML page for the moment.
Found a neat pack of css buttons to play with at Codrops
Learning more about HTML <form>, <span>, <option> and <select> tags. Trying out dropdown menu's and buttons for switching stylesheets and some Flexbox and Grid. MDN Forms
Playing with Grid boxes from Codrops reference section
And reading Shaye Howe on Semantics and accessability in HTML
Making buttons as an styleswitcher seems a good plan to offer the viewer a choice of background styles when visiting a website. Alternative Style: Working With Alternate Style Sheets Gave me a deeper understanding of The three different relationships external style sheets can have with the document: persistent, preferred, and alternate. I tpent a while thinking about using JavaScript for dynamic style switching and followed along with this article but got stuck on how to get the button to make the function work.
Eventually I made some HTML button links with onclick and href using the <form> tag as suggested by Hyperlink Code
First version:
Made an alternative stylesheet darkstyle. Investigating how this can be accessed on different devices and through various browsers showed that not many seem to support this option.
I didn't manage to access any of the options on an Android device and Chrome browser required an extension which I couldnt get to work.
"Technology isn’t an industry, it’s a method of transforming the culture and economics of existing systems and institutions ~ Anil Dash"
12 Things Everyone Should Understand About Tech
Some tips from the BBC on How to be a digital nomad
Having created a new colour scheme for the photo gallery page it occurred to me that it would be nice to offer the viewer the option of changing the theme. I remembered Jeremy Keith's adactio site has a theme chooser so went to have a rummage around his source code for some clues. There's a theme chooser form on the site which is just the kind of thing I'd like to be able to do.
Web Style Sheets CSS tips & tricks was the next stop and explained succinctly how to offer alternative style sheets.
The gist of it is to add alternate stylesheets. <link rel="alternate stylesheet" title="16 line css grid" href="css/style.css"> which show up in the view menu on the top toolbar. I added the 16 line css stylesheet with the link in the head and it worked! There are now three themes to choose from .
Am now going to try it out on different browsers and devices. Not sure how many people know you can do this. I only just found out so I'll be checking to see if sites have alternative stylesheets in future.
Mermaid dreaming the Eagle Nebula
Some attention to fonts. I was wondering why it wasn't changing to the one I wanted then realised I'd forgotten the link in the header to Google fonts for the one I was attempting to use.
<link href="https://fonts.googleapis.com/css?family=Gruppo" rel="stylesheet">
There's a lot to know about fonts and typography and I've spent quite some time reading about it.
'...at a time when scientific techniques can support the proven traditions (e.g., greater legibility with the use of serifs, upper and lower case, contrast, etc.) through understanding the limitations of human vision, typography as often encountered may fail to achieve its principal objective: effective communication. Wikipedia'
Do serifs make text more readable? I find sans-serif less cluttered.
I enjoy the back stories about font creation which is the main reason I use Lato and Gruppo until I know more.
I was tinkering about on Glitch with the font links and copy /pasted a great block of the wrong code. Thank goodness for the rewind function in the log section.
Colour gradient backgound and title bar colorzilla seems to be a useful tool for the css codes.
Bit of a moment when the link I put on twitter didn't display correctly from the code I'd put on GitHub. Relieved to find it worked on my desktop files. Very difficult to find where the problem was, tried isolating different files and bits of code with no joy. So in the end I deleted the GitHub files and replaced with the ones that work on my machine.
I get the need for version control. And folder trees with sensible file names.
Rather minimal coding as I got involved in learning to use layers with paint.net for the mermay challenge but I am updating the image gallery and using dev tools and GitHub so practicing with html and markdown for this log.
Today posting to Instagram with Firefoxdev tools didn't work. It's bit of a workaround but easier than using phone so I persisted and it did work with Chrome.
Various size numbered boxes with drop shadows for the #mermay challenge where for the month of may I make a piece of digital art every day with the theme of mermaids.
I am working through Layout Lab of Jen Simmons, inspired after watching Layout Land videos and have borrowed code from there to adapt and play around with for #mermay2018 project.
Tip: You can post to Instagram on desktop with Firefox DevTools responsive mode.
Version 1
Just sixteen lines of CSS for a responsive page of photos.
* {
box-sizing: border-box;
}
body {
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
margin: 0;
}
main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
img {
display: grid;
box-shadow: -1px 0px 0px rgba(0,0,0,0.6);
width: 90%
}
Two Layout Land videos today:
Notes:
- explicit v implicit you define the explicit, the browser defines the implicit
- autoplacement algorithm
Here's the HTML the essence of the content with white space, photo links and alt texts removed from the Glitch version.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main role="main">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</main>
</body>
</html>
Went for some adventures in Layout Land the seven part YouTube series on Resilient CSS by Jen Simmons. I have a much clearer picture of how CSS works or not in different browsers and devices and whether it matters.
The most significant thing for me is understanding that the resilience and robustness of HTML and CSS is because they are declarative languages so mistakes are generally skipped over and ignored by browsers. This is different to imperative programming languages which may fail if there is an error in syntax and such. There's a concise explanation of the difference in Jeremy Keith's book Resilient Web Design
Robustness Principle, also known as Postel’s Law:
"Be conservative in what you send; be liberal in what you accept."
The seven Layout Land videos are about 10-15 minutes each. This list is from the notes I took whilst watching them:
- Web-no-matter-what, original concept and progressive enhancement.
- Superpowers, statuses, statistics and analytics.
- Ignoring weird, robust and resilient.
- Overrides, tweaks, details and craftsmanship.
- Featurequeries-1, media query type conditional wrap
@supports (foo: value) {// some code here}. - Featurequeries-2, to not or not to not and why flexbox doesnt need them anyway.
- Featurefail, ask how well does this feature fail.
Very much enjoyed this excursion and have come away with some better ideas on how to consider the variety of formats that the content can be transformed into.
A restart after falling behind last week. Learning some CSS grid then tried out the css writing mode after reading this Jen Simmons post.
Progressive enhancement practice website complete-baker on Glitch.
- Udacity Android UX
- Making a baking website on Glitch - complete-baker
- CSS grid practice with Wes Bos '#Griddyup'. He covers a lot quite quickly for me but without timed limits to viewing the course I can pause and repeat things for practice.
- Deep learning - neural nets and algorithms the basics.
-
Grid and flexbox Variable widths and responsiveness with Wes Bos.
-
Skewing box shapes with transform.
-
Some experimental css styling, colour themes and background images.
-
Logical and critical thinking with Futurelearn. Arguments and statements.
- P1 Premise 1
- P2 Premise 2
- P3 And so on for as many premises as there are in the argument. Therefore.
- C conclusion I included this here because I think it helps with the way I think about coding.
I also did some of a mindfulness course which is good for clarity, awareness and focus.
Today I was looking into user testing and watched some videos by Steve Krug and explored his website Advanced Common Sense
I am interested in the intersection of coding (for web development) and design and did some tutorials with Udacity's UX Design for Mobile Developers
It involved some reading:
- The Skeptic’s Guide To Low-Fidelity Prototyping
- A walk through the wireframing process
- How to design a low-fi wireframe
and some new tools:
-
Prezi for presentation (of low resolution wireframe flow.) colorful nature my first presentation template
-
Infogram for a quick infographic.
-
Notion All-in-one workspace (to try). May cause lag.
Next ...
My answer in the quiz about the sign in form was to enlarge the entry boxes. This was not looking at the bigger picture. The advisory for this was: "It's easy to forget the big picture. Especially if detailed thinking is something you really love (which is the case with many developers).
It takes some discipline to keep your thoughts at a high-level when that's what's best for your product and users, but by the end of this course, you'll have plenty of techniques to help you do just that!"
-
Google checkout or PayPal checkout for payments.
-
Don't use a sign in form use a button to sign in with Google or Facebook.
-
The difference between UX and UI is that UX involves the backend code that you can't see as well as the frontend code, while UI is just the frontend code.
"The question with technology is no longer how, but why? In a world of endless connectivity and limitless computing, we need to ask why we are doing whatever it is we are doing, before it is too late."
"Thus, we should focus on the skills that are inherently human – critical thinking, creativity, emotional intelligence and cognitive flexibility. Non-routine, cognitive work is the future."
21.30 - Developers like complicated stuff (releases endorphins).
23.30 - It's very hard for us to remember that they don't know what we know.
Hello Firefox Notes! I'm pleased to meet you.
I just spent half an hour trying to work out how to write a note.
And then ... some ...
My searching led to this Moz://a HACKS post (love the falling K in HaCKS title when it's moused over) by Lin Clark:
and ...
A new word!
-
Deleuzional about the philosoper
-
JavaScript to Rust and Back Again: A wasm-bindgen Tale By Alex Crichton
-
Writing an x86 “Hello world” boot loader with assembly Martin Splitt
had a go with
"Try any Node.js package right in your browser".
using Powershell
Got stuck on making a js file with a console. log in it.
So read this:
Some Code! Html in PowerShell.
...and a bit about
So there we have it. Yes, I like the notes in Firefox.
P.S. Just had to click return to start taking notes.
Today I did some more of the Wes Bos CSS Grid course.
I went over the setup and the basics again.
Lots of tips and as well as Grid tutorials.
He walks through how to use the tools swiftly, concisely and thoroughly, and so far I haven't got stuck.
-
VS Code with Emmet
-
Command line terminal (I used Powershell)
-
Node.js and npm
-
Firefox developer tools for Grid
-
Browserify updates straight into the browser from VS code, especially helpful for front end dev.
I made a copy of the code folders and spent some time with the regular stylesheet, changing the colours and image and explored how to adjust the opacity of the
-
image
-
items
-
fonts
over the two colour gradient background.
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> </div> .container { display: grid; grid-template-columns: 200px 500px; grid-template-rows: 200px 100px 400px; grid-gap: 20px; } -
Code session today began with putting the directional chevrons back on my current live web page project, they had gone missing! Not sure why but they were still all fine in my offline version so I updated with that. That led on to making another image link, sorting out files and other routes for linking. Then I started another page on the Glitch Bio site So some buttons and links and badges in html. Connecting things. Understanding the z-index CSS with MDN. Looking at different ways to resize and make images responsive. And I found this useful tool that quickly generates a website style guide with colours, fonts, sizing and spacing Stylify Me
A new landing page for my website!
What is this!?! 👇
gipsi.itbit.me/#bornwildgipsi.itbit.me/#bornwild</a>
<img src="gipsi.itbit.me(250).jpg alt="my horse-logo">
This is where I'm trying to make a clickable image link to my new web page in markdown (when falling asleep). I was very determined and didn't want to give up. It seemed like such a simple task. I kept phasing in and out of conciousness as I persisted. Stack Exchange had most suggestions and using markup seemed the only solution, even getting this to work proved completely beyond me. In the end I did give up and went to sleep feeling dismayed and frustrated.
After a sleep and some food I came back to the problem. Much more alert and awake.
First I wrote this regular link.
[gipsi.itbit.me/#bornwild](http://gipsi.itbit.me/#born-wild)
Then I wrote it like this with the image I want to use in an html <img> tag as the link wrapped in an <a> tag.
<a href="http://gipsi.itbit.me/#born-wild" target="_blank">
<img src="media/gipsi.itbit.me(250).jpg"alt="my horse-logo">
</a>
.jpg)
Better. but going to the wrong part of the page. And it does work here, but not on the GitHub Pages Jekyll version. This is always a problem I eventually come up against with templates, if something doesn't work it's another opaque layer to peel away and try to understand and fix.
.jpg)
The images are experiments with logo design that I made on the Canva website. These are made before I spotted the tutorials. I'll do the tutorials and see if they improves my technique and aesthetic sensibilities.
After reading about writing style guidelines on the MDN wiki I've been pondering style and layout and the itersection between coding and design so I was interested to read this blog post about the SEEK styleguide
Next I had a go with figma an in browser design tool with a styleguide API. I watched some YouTube channels to learn how to use it.
Also looked at Surge.shwhere you can build and host apps from the command line.
I just figured out how to do the image that links in markdown. 🎆 That exclamation mark at the after the first angle bracket is the code to display the image, I knew there was a way.
[.jpg)](http://gipsi.itbit.me/)
And now it works in the Jekyll too - phew! For all the frustrations it's a great feeling when stuff does work.
Making an html/css web page - a new homepage for my projects site.
I'm starting to view and read the source code of websites more often and today I noticed a back button at the bottom of a page I was viewing.
```
<a href="#" class="btn-to-top" title="Back to top">
<i class="fa fa-lg fa-chevron-up"></i>
<span>Back to top</span>
</a>
```
I read a bit about the Font Awesome icons and put one on a page I'm making that I'd made a mental note of needing one.
I read a few things on MDN that I wanted to be clearer about. Increasingly I find it the best place to go for reference and learning and such a pleasant experience to use that I plan make a habit of visiting more frequently. One thing I looked up was the Line Break element. I didn't know why it is often written <br /> rather than <br> and MDN had the answer:
In XHTML documents, write this element as
<br />
I investigated HTML5 Boilerplate and became a member of The Internet Defence League and displayed some badges,
More time (many hours) learning about APIs in general, the Met Office datapoint in particular. Very frustrated by this. I got to the 'make a weather app' stage of FreeCodeCamp last year and hit a wall. So much I don't know.
Following MDN basic tutorials they're thorough which is good I'm picking up little things which I've missed like in file naming using a dash instead of an underscore.
<!DOCTYPE html>— the doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days no one really cares about them, and they are really just a historical artefact that needs to be included for everything to work right. So whay is html really? MDN
Writing in Markdown is gently reminding me of the importance of practice in learning to be any good at things.
A very long time figuring how to use Met Office datapoint with a view to making a weather app. Presently unfathomable.
Today was my 99th day of #100DaysofX which I started on the winter solstice, 21st December '17, as a personal challenge so I began putting together some files for a web document as a record.
Remixed and played with a basic website starter kit on glitch.com. Really enjoyed the setup and speed it renders great fun. noisy-month
I watched the introduction and the first four videos on this Eduonix site. Become a certified Web Developer
More than an hour fixing the volume button on the taskbar of Windows 10. The button was there but doing nothing. Quite a few suggestions I visited started with right click on the button but this didn't work either.
Eventually this Windows 10 skills site had the solution: Change Audio Services, which was basically switch the audio manager off then on again and reboot.
So I was wondering if I could add a YouTube video to this page. No, but I can link to one with an image like this:
<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg"
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
I watched this DevTips video about making a splash page yesterday and had planned to make one myself today. Tried code from link on CodePen but it didn't work. The syntax wasn't complete, I tried filling it in but gave up as IDK SASS (or LESS)! ... just yet.
Brad Traversy put the code for a full screen landing page on CodePen so I used that instead.
I also looked at his site to check out some video tutorials at
Linked to another site called EduOnix where I started a short video tutorial on making anHTML5 distance meter I watched about a third then needed to switch to reading about XAMMP a free and open source cross-platform web server solution stack package developed by Apache Friends.
Back to the landing page. I like to use web safe colors as often using color-picker chosen ones doesn't work. The HTML Color Names has more choice though and I used the hex for lavender E6E6FA for the title.
I set up new blog on Blogger for creative writing and called it Bio.
Importing the writing I'd put a Google Docs template into Blogger and editing the HTML there went OK. Although the copious amounts of code in a great block in the head tag was a surprise (there are widows and orphans in there too 😮) . I did proceed and edit in HTML. It took a bit of fiddling about to get the title photo in the right place. The backgound photo of the blog looked alright to begin with on the laptop. only later on the phone I noticed the picture repeating, that wont do!
Learnt some basic use of google analytics watching their tutorial videos then installed it by adding a script tag they gave me to paste in. Now it's all about learning how to read and use the analytics software.
The code looks quite different. Much easier to read in the browser with 'view source'.
The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)
Emoji homework! ... on unicode and character sets.
Whilst exploring tumblr I found you can edit the html.
I made an emojigrid GitHub repo last night but fogot how to set the url for it.
Sorted that out: go to settings>scroll down to gh-pages section>publish default is None, change that to Master or gh-pages.
Filled in the most popular from a list on emojipedia. Then used the randomise button and picking ones I like.
Found out you can change the skin colour of people emojis. 🧜🏿♂️ . The code for that in HTML is
🧜🏿 This is the two code point numbers that represents the emoji plus a modifier in Unicode with the prefix U+ changed to a character escape &#x. Some more on character escapes in css and markup
Emoji modifiers were added based on the Fitzpatrick scale of skin tones in 2015.
I made a CodePen pen too: CSS Grid Playground - placing items
Using Typora for Markdown - Lovely to use now I'm getting the hang of it.
Practicing what I learnt yesterday by placing emoji items in CSS Grid boxes.
Here's a comprehensive encyclopedia of emoji! 😀
Hello 💩
Well that was easy! No not really. This is Markdown and copy paste is working fine. Not so in HTML Markup.
Do I want an emoji domain name?
Actually no, that was interesting but a distraction. I want to put emoji's in CSS Grid boxes in an HTML5 document.
Ah! This looks helpful. How to Insert Emojis in HTML
And another emoji list
I'll try a unicorn face
Get to the the code point.
U+1F984
Change it to this.
F984;
Nope that doesn't work.
Handling character encodings in HTML and CSS (tutorial)
Save your pages as UTF-8. Yep did that right from the start.
How about W3School - try an HTML5 entity.
uhblack - a black box ▀ alt="waving black flag" 🏴
Yep that works with this code: ▀, or this, ▀, or this, ▀.
But I don't really want an entity I want an emoji.😒
Sooo, back to the pile of poo.
OK some history of the poop emoji and stuff about code points
When I copy and paste the emoji code point code it just transfers a two question marks, like this: <div class="item item10">??</div> which then both appear in my CSS Grid box. No emoji.
But there is an [Embed this codepoint] button. A pop up box appears.
Embed this codepoint in your own website by simply copy-and-pasting the following HTML snippet:
<iframe src="https://codepoints.net/U+1F984?embed"
style="width: 200px; height: 26px;
border: 1px solid #444;">
</iframe>
If you want, you can freely change width and height to meet your needs. The layout will adapt accordingly.
This is alright, I have got the unicorn face, but also the code point and the name of the emoji written beside it. I'd really rather just have the emoji.
Looking at the iframe code and wondering how to ditch the surplus info went to the codepoints link in the code. This unicorn page has at the bottom an HTML-Escape code, same as the one I tried earlier but with an x 🦄 It works! 🦄
For horizontal scrolling: grid-auto-flow: column;
(Doesn't show up in dev tools yet)
The lines between the boxes can be named by putting the names inside square brackets in front of the value of the boxes, e.g.
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: [site-left] 1fr [content-start] 500 px [content-end] 1fr [site-right];
/* Can be multiple names too: grid-template-columns: [sidebar-start site-left] 1fr [sidebar-end content-start] 500 px [content-end] 1fr [site-right]; */
grid-template-rows; [content-top] repeat(10, auto) [content-bottom];
.item3 {
background: slateblue;
grid-column: content-start;
grid-row: content-top / content-bottom;
grid-auto-flow: dense;
An alternative for the grid-autoflow property.
If the order of different size boxes is not too important this is useful for filling the page without leaving holes or gaps.
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(10, 1fr);
grid-auto-flow: dense;
}
.item:nth-child(6n) {
background: cornflowerblue;
grid-column: span 6;
}
.item:nthchild(8n) {
background: tomato;
grid-column: span 2;
}
.item:nth-child(9n) {
grid-row: span 2;
}
.item18 {
background: greenyellow !important; /* Have to have the !important because nth-child is more specific than the item number. */
/* Then if you want to anchor this item at the end */
grid-column-end: -1 !important;
For horizontal scrolling: grid-auto-flow: column;
6 items come with justify:
(justify = row axis align = column axis)
justify-items: align-items:
justify-content: align-content:
align-self: justify-self:
For reference see: CSS-TRICKS A Complete Guide to Grid
Stuck on how to put emoji into html.
.container {
display: grid;
grid-gap: 20px;
border: 10px solid var(--yellow);
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
- Wes Bos CSS GRID
- Smashing Magazine Using Media Queries For Responsive Design In 2018
- Smashing Magazine Understanding CSS Layout And The Block Formatting Context
.container {
display: grid;
grid-gap: 20px;
/* Make the grid 10 columns wide, every other taking up twice the free space */
grid-template-columns: repeat(5, 1fr 2fr);
/* Make the grid have 10 explicit rows, 50px high each */
grid-template-rows: repeat(10, 50);
}
/* With Item 1, start at col 3 and go until 5 */
.item1 {
grid-column: 3 / 5;
}
/* With Item 2, start at col 5 and go until the end */
.item2 {
grid-column: 5 / -1;
}
/* Make Item 5 double span 2 cols and rows */
.item5 {
grid-column: span 2;
grid-row: span 2;
}
/* Make Item 8 two rows high */
.item8 {
grid-row: span 2;
}
/* Make Item 15 span the entire grid width */
.item15 {
grid-column: 1 / -1;
}
/* Make item 18 span 4 widths, but end 9 */
item18 {
grid-column: span 4 / 9;
}
/* Make item 20 start at row 4 and go for 3 */
.item20 {
grid-row: 4 / span 3;
}
Day 6 March 13th 2018 - CSS grid-auto-flow, Fractional Unit (free space) and "The Curse of Knowledge".
By default CSS grid places items in rows, with auto-flow this can be changed to columns for horizontal scrolling.
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: 400px 200px;
grid-auto-flow: column;
grid-auto-columns: 200px;
}
In CSS Grid fr = fractional unit = (free space!) represents the amount of space left after all the elements are laid out.
.container {
display: grid;
grid-gap: 20px;
border: 10px solid var(--yellow);
grid-template-columns: 1fr 1fr 1fr 1fr;
}
Adactio on "the curse of Knowledge" and why it's a good idea to blog about stuff when you're learning.
An exercise in writing for the Futurelearn Course Start Writing Fiction.
Is a Glitch.com remix a collection of videos.
-
Watching: I Have No Idea What The Hell I'm Doing by Brad Frost
-
Reading:
-
The Little Book of HTML/CSS Coding Guidelines by Jens Oliver Meiert on writing code for humans.
-
The V6 Blog Archive of Rob Weychert on the ephemeral nature of third party services.
-
-
Learning: Transmedia Storytelling with FutureLearn Transition in common usage from the term narrative to storytelling in the 1990s. The basic elements of background, character and plot.
On 1st February 2014 Chris Coyer of CSS Tricks declared International box-sizing Awareness Day.
In honor of, you guessed it, the most humble and undersung, yet awesome and useful CSS property: box-sizing. ~ Chris Coyer
The origin of the concept being a post by Paul Irish on 1st February 2012 * { Box-sizing: Border-box }FTW
There's a fascinating history and it's interesting to discover how width has been interpreted differently between the W3C and Internet Explorer.
Lea Verou has shared the slides from her MIT labs introducing students to Web development technologies. A great set of slides plus useful resource selection to go with them. Lots more good stuff on her wonderfully absorbing Website too.
Two more of Wes Bos CSS GRID videos. I'm getting the hang of using npm through Powershell for browser-sync. Quite a bit of shuffling windows around the desktop and rearranging the dev tools panes, resizing things.
Outlining and changing the colour the lines around items in web developer>inspector. Dotted lines surround implicit tracks, which are like the default ones and dashed lines border explicit tracks which are defined by you in the code.
Second day of the Wes Bos CSS GRID course dives right into making and sizing grid items.
This piece of code demonstrates how display: grid; works on all the container items,
grid-template-columns: 200px 500px; and grid-template-rows: 200px 100px 400px; explicitly sizes the items and
grid-gap: 20px; sets the tracks, which are like margins between the items.
.container {
display: grid;
grid-template-columns: 200px auto 500px 50px;
grid-template-rows: 200px 100px 400px;
grid-gap: 20px;
}
The auto keyword made things fluid and the values are pixels or rems rather than percentages as the new fr value is going to be introduced instead later on.
Sometimes it seems like everything on the Web is a box - it doesn't have to be.
Use the Clip Path property to alter elements in your layouts to be polygons, circles, triangles, and more. ~ Jen Simmons
In this great video Jen Simmons explains. There's a whole bunch more about layout on her YouTube Channel Layout Land - just what I need right now.
After a quick review of last year's coding efforts I decided that I need to improve my CSS skills. So today I started
CSS GRID the 25 video free course by Wes Bos .
Wes, How is this Free!? What's the Catch?
No catch! A huge thanks to Mozilla Firefox who has sponsored my time to create this course and offer it up for free. Firefox packs >some of the best dev tools and in particular their CSS Grid Dev tools make understanding, debugging and visualizing complex grid >layouts a snap.
After the welcome video the first tutorial is only a little over 10 minutes, but there is a lot to do!
- Install Firefox Quantum: Developer Edition
- Download and install Node.js
- Download starter files from GitHub
- Download and install VS Code
I already have the Firefox Quantum Developer Browser but I did need to install Node.js. I followed along with the video pausing it to get through each of the steps required to complete the setup. I used Windows Powershell to check for the Node.js installation. Next was downloading the starter files from GitHub, I also forked the repo, noting that I should take care not to do a pull request.
I got VS code up and running and read the opened JSON lock file. Although this seemed a bit obscure to start with the reason is to have the"browser-sync" tool update the results of coding in the browser without refreshing.
The next part was to look at the start file package in Powershell by copy pasting it into the root and then npm i which installed the dependency "browser-sync".
npm start then opened a page of the files to work with in the browser.
- A nice basic html skeleton file. With a demonstration of how adjustments automatically refresh.
- An explanatory recommendation and demonstration of Emmet.
container.item*10is a useful snippet. Hit tab = ten divs. - A run through of the basic CSS stylesheet no CSS Grid here yet.
var(--color)from:roottop of stylesheet- Google
"box-sizing: border-box;"
Loads of tips and snippets in a short video so I'm happy. Everything worked not exactly straight away but eventually so looking forward to tomorrow.
Last year I coded every day, nearly four rounds of one hundred days of code. As well as tweeting my progress I followed tutorials, got stuck, found answers, read manuals, read code, read blogs, signed up for email newsletters, did MOOCs ... and made this website of my own gipsi.itbit.me blog.
Today I'm reviewing what I did, tinkering a bit, fixing broken links and setting up some new things for a another round of #100DaysOfCode.
I'm participating in the CodeNewbie Challenge Start Coding #CNC2018 which is encouraging me to think more clearly about and be more specific with my coding goals.
Partly due to working on:
- Learning about Biodiversity and Global Change: Science & Action and creative writing The Craft of Plot.
- Setting up the tools for Creative Programming for Digital Media & Mobile Apps.
- "Doing the Opposite" #100DaysOfVolunteering as a thing after thinking about #100DaysOfX.
- A MOOC about mental health and wellbeing Psychology and Mental Health: Beyond Nature and Nurture.
*I am developing this coding blog from a template and intend to keep the following section here for reference:
You can use the editor on GitHub to maintain and preview the content for your website in Markdown files.
Whenever you commit to this repository, GitHub Pages will run Jekyll to rebuild the pages in your site, from the content in your Markdown files.
Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for
Syntax highlighted code block
# Header 1
## Header 2
### Header 3
- Bulleted
- List
1. Numbered
2. List
**Bold** and _Italic_ and `Code` text
[Link](url) and For more details see GitHub Flavored Markdown.
Your Pages site will use the layout and styles from the Jekyll theme you have selected in your repository settings. The name of this theme is saved in the Jekyll _config.yml configuration file.
Having trouble with Pages? Check out our documentation or contact support and we’ll help you sort it out.