commit dcb2bc825d061e3ab948bb67f797acd007c214cb Author: alistair Date: Thu Jan 28 23:51:37 2021 +1000 initial diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png new file mode 100644 index 0000000..75a5bdd Binary files /dev/null and b/android-chrome-192x192.png differ diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png new file mode 100644 index 0000000..d4d7b46 Binary files /dev/null and b/android-chrome-512x512.png differ diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 0000000..3b009b9 Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/favicon-16x16.png b/favicon-16x16.png new file mode 100644 index 0000000..ac32e7e Binary files /dev/null and b/favicon-16x16.png differ diff --git a/favicon-32x32.png b/favicon-32x32.png new file mode 100644 index 0000000..3c9733a Binary files /dev/null and b/favicon-32x32.png differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..0f90350 Binary files /dev/null and b/favicon.ico differ diff --git a/game/colours.md b/game/colours.md new file mode 100644 index 0000000..176a635 --- /dev/null +++ b/game/colours.md @@ -0,0 +1,49 @@ +title: Pretty Colours +date: 17-07-2020 + +I've been able to put some more hours into this project now that I'm on holidays +from uni, so my 2D cave background graphic now comes with colours. + +![](/media/img1.png) + +Most of this work was tieing together the [colour code](https://git.topost.net/alistair/c-colours) +that I wrote a couple of weeks +ago[^1]. It lets me pick a random RGB colour, convert it to hsl and then rotate +however many degrees around the colour wheel. I also added some luminance +variation. It probably bears a bit more experimentation but I'm pleased with how +it turned out already. + +[^1]: The hard part of this was converting HSL to RBG but it turns out that + Wikipedia really is fantastic for explaining these sorts of algorithms + (and providing free pseudocode). I went overboard and + implemented conversion between any of RBG HSL and HSV. I was so excited that I + then [rewrote](https://git.topost.net/alistair/colcat) + [lolcat](https://github.com/busyloop/lolcat/) using my library. + +![](/media/img2.png) + +I also rewrote the prototype level generator with the goal that it would be +possible to stream levels piece-by-piece so that they are effectively infinite +but I put that on the backburner in favour of just jumping to a new level after +a certain distance. Partly because it was much faster to get working, and also +because it allows me to change the colour pallete more frequently. + +The levels are still generated using a level seed, which determines the terrain +and colour pallete. However now it must be of finite length and has to be loaded +entirely into memory. The world generation is nothing fancy. Just a random walk. + +As you can probably see the player-character (purple square) is quite lacking, I +unfortunately have no idea what to do about that. Admittedly, one of the nice +things about c is technical difficulties usually mean my productivity is always +far more limiting than my very limited creativity. + +I still need to get the grappling hook working again, write code to free all +the level memory when neccessary, and re-write the world object manager. It is +currently impossible to remove objects from the world once they are added. +Performance is also becoming a problem. The background is drawn entirely with +SDLDrawLine, and does a lot of calculations on the cpu every frame in order to +interpolate walls. My algorithms are generally inefficient but hey, dont optimise +prematurely right? Physics tick time is getting to the point where the simulation +starts breaking. Maybe its time. + +I am also yet to add any audio. I think I'll do that first. diff --git a/game/game.md b/game/game.md new file mode 100644 index 0000000..255179a --- /dev/null +++ b/game/game.md @@ -0,0 +1,36 @@ +--- +title: Game +date: 11-06-2020 + +I've been working on a simple physics game in C for about a year now. + +It's been a really enjoyable project to work on in pieces every now and again. +I hope to at some point implement procedurally generated levels, and some +tangible gameplay challenges but that is subject to further game design decisions. + +Up until now I've mainly been +interested in getting the physics system working, and just used SDL2 lines and +shapes to illustrate what is happening. I'm not sure I want to go and learn +OpenGL, but I think it might be time to make it look a bit nicer. + +My immediate plan is to improve the graphical presentation, keeping the flat-shaded +shapes though for stylistic reasons. To that end I wrote this +[colour manipulation code](https://git.topost.net/alistair/c-colours) as a +start for creating analagous colour palettes. + +What with University I don't have time to go into details, so here's a little +demo: + +```{=html} + + + +``` + + +[Source code](https://git.topost.net/alistair/space_game) + diff --git a/game/index.md b/game/index.md new file mode 100644 index 0000000..ed31fb3 --- /dev/null +++ b/game/index.md @@ -0,0 +1,14 @@ +--- +title: Game + +A little arcade-style PC game written in C, using libSDL2. + + +![](/media/game3.png) + +[source code](https://git.topost.net/alistair/space_game) + +### Posts + +${postlist:.} + diff --git a/game/release.md b/game/release.md new file mode 100644 index 0000000..7309157 --- /dev/null +++ b/game/release.md @@ -0,0 +1,77 @@ +--- +title: Release! +date: 21-07-2020 +... + +```{=html} + +``` + + +[high quality demo video](https://vimeo.com/440607394) + +At long last I have a version of the game that I can show to people. + +I have made a distributable binary for linux, and windows, finally. That can be +found [here](https://git.topost.net/alistair/space_game/releases). + +Now, does +this mean it has meaningful gameplay and is bug free? Of course not. But to look +back on the past year of working on this project here and there here is what I +have achieved: + +- Drawing shapes to the screen using libsdl +- A update-draw game loop and datastructures for looking after objects that + exist in the game world +- A 2D vector arithmetic library, for addition, scalar multiplication, + projection, mod and arg, et cetera. +- A system for adding and removing forces to objects using timeouts. +- A basic 2D physics system with gravity where the player can be moved around + using force impulses turned on and off by user input +- A viewport that can move to follow the player +- A simple world generated using a random walk +- A collision detection system using the Separating Axis Theorem to detect and + recover from collisions between the player and the world +- Wires that can attach the player to a point in the world and make it act like + a pendulum. +- A winch and ratchet that can shorten the rope using a specific amount of force + to hoist the player. +- Extending physics to simulate friction and partially elastic collisions. +- HSV-HSL-RGB colour space converters and a colour-pallette geerator +- An automatically growing and shrinking array list structure to improve object + management + +Part of what makes this project very enjoyable to work on is the fact I can pick +a very short term feature goal and work on that for a day, and usually have a +MVP to show for it within a few hours of work. The program is small enough to +fit in my head, so I could happily leave it for a couple days if I came across a +but I didn't feel motivated to bang my head against, and come back to it later. + +C is, admittedly, not the best language for designing something iteratively, but +I absolutely designed this game very iteratively. I had no idea what I was doing +the whole time. There were several times, especially when developing the +collision detection and pendulum physics, that I exhausted myself and could not +think of any more bug hypotheses to test. At those times leaving it for a week, +or 10, was helpful. The fact that it is broken into such small pieces and +designed iteratively really helped me get back into it. + +That is partly why I love writing C, what I have done of it. Most of the +problems I had to solve here were micro-problems. Why am I reading an +out-of-bounds value from this array? Why is my physics _doing that_. Why is it +crashing? I can very easly get sucked into solving one small thing after +another, and seeing the bit of progress each time. It's like its own addicting +game. + +There are still things I want to do with it. I mainly want to add a timer to the +levels so there is at least some gameplay. I also need menus: a simple save/quit +menu and a startup menu where you can input the level seed directly. The last +thing is sound effects and music, but that requires sourcing or making assets. +In the long term, I think a basic skill tree: upgrades (physics tweaks) that are +unlockable by completing a level in under a certain time, would be a good +addition. + +Right now, I'm going to leave it for a while. I think I can learn new things +more productively by working on other projects. + diff --git a/homepage.html.template b/homepage.html.template new file mode 100644 index 0000000..ba4b489 --- /dev/null +++ b/homepage.html.template @@ -0,0 +1,61 @@ + + + + + + + {{ ifdef:title:{{ :title }} }} + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +
+ +
+ +
+ +
+ {{ifdef:title:

{{ :title }}

}} + {{ifdef:date +

{{ :date }}

+ }} +
+ +{{ :body}} +
+
+ + + + diff --git a/html.template b/html.template new file mode 100644 index 0000000..327b4a4 --- /dev/null +++ b/html.template @@ -0,0 +1,59 @@ + + + + + + + {{ ifdef:title:{{ :title }} }} + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +
+ +
+ +
+ +
+ {{ifdef:title:

{{ :title }}

}} + {{ifdef:date:

Published {{ :date }}

}} +
+ +{{ :body}} +
+
+ + + + diff --git a/index.md b/index.md new file mode 100644 index 0000000..d30f504 --- /dev/null +++ b/index.md @@ -0,0 +1,12 @@ +## Projects + +{{postlist:projects }} + +### Game + +{{postlist:game}} + +## Blog Posts + +{{postlist:posts}} + diff --git a/manifest.webmanifest b/manifest.webmanifest new file mode 100644 index 0000000..e20fc3e --- /dev/null +++ b/manifest.webmanifest @@ -0,0 +1,15 @@ +{ + "name": "alistairmichael.com", + "short_name": "alistairmichael", + "start_url": "https://alistairmichael.com", + "display": "browser", + "background_color": "#fff", + "description": "The Personal Site / Blog / Whatever of Alistair Michael", + "icons":[ + {"src":"/android-chrome-192x192.png", + "sizes":"192x192","type":"image/png" + }, + {"src":"/android-chrome-512x512.png", + "sizes":"512x512","type":"image/png" + }] +} diff --git a/media/coolfungame.mp4 b/media/coolfungame.mp4 new file mode 100644 index 0000000..c55314a Binary files /dev/null and b/media/coolfungame.mp4 differ diff --git a/media/fonts/Charter/Charter license.txt b/media/fonts/Charter/Charter license.txt new file mode 100755 index 0000000..148919d --- /dev/null +++ b/media/fonts/Charter/Charter license.txt @@ -0,0 +1,3 @@ +This is a copy of the Charter fonts which Bitstream contributed to the X consortium. This is the original notice included with the fonts: + +(c) Copyright 1989-1992, Bitstream Inc., Cambridge, MA. You are hereby granted permission under all Bitstream propriety rights to use, copy, modify, sublicense, sell, and redistribute the 4 Bitstream Charter (r) Type 1 outline fonts and the 4 Courier Type 1 outline fonts for any purpose and without restriction; provided, that this notice is left intact on all copies of such fonts and that Bitstream's trademark is acknowledged as shown below on all unmodified copies of the 4 Charter Type 1 fonts. BITSTREAM CHARTER is a registered trademark of Bitstream Inc. \ No newline at end of file diff --git a/media/fonts/Charter/charter_bold.woff b/media/fonts/Charter/charter_bold.woff new file mode 100644 index 0000000..ebb9853 Binary files /dev/null and b/media/fonts/Charter/charter_bold.woff differ diff --git a/media/fonts/Charter/charter_bold_italic.woff b/media/fonts/Charter/charter_bold_italic.woff new file mode 100644 index 0000000..b9047d9 Binary files /dev/null and b/media/fonts/Charter/charter_bold_italic.woff differ diff --git a/media/fonts/Charter/charter_italic.woff b/media/fonts/Charter/charter_italic.woff new file mode 100644 index 0000000..526537c Binary files /dev/null and b/media/fonts/Charter/charter_italic.woff differ diff --git a/media/fonts/Charter/charter_regular.woff b/media/fonts/Charter/charter_regular.woff new file mode 100644 index 0000000..92e57b1 Binary files /dev/null and b/media/fonts/Charter/charter_regular.woff differ diff --git a/media/fonts/Vera/stylesheet.css b/media/fonts/Vera/stylesheet.css new file mode 100644 index 0000000..b607194 --- /dev/null +++ b/media/fonts/Vera/stylesheet.css @@ -0,0 +1,108 @@ +@font-face { + font-family: 'Bitstream Vera Sans Roman'; + src: url('https://alistairmichael.com/media/fonts/Vera/vera-webfont.woff2') format('woff2'), + url('https://alistairmichael.com/media/fonts/Vera/vera-webfont.woff') format('woff'); + font-weight: 400; + font-style: normal; + +} + + +@font-face { + font-family: 'Bitstream Vera Serif Roman'; + src: url('https://alistairmichael.com/media/fonts/Vera/verase-webfont.woff2') format('woff2'), + url('https://alistairmichael.com/media/fonts/Vera/verase-webfont.woff') format('woff'); + font-weight: 400; + font-style: normal; + +} + + +@font-face { + font-family: 'Bitstream Vera Serif'; + src: url('https://alistairmichael.com/media/fonts/Vera/verasebd-webfont.woff2') format('woff2'), + url('https://alistairmichael.com/media/fonts/Vera/verasebd-webfont.woff') format('woff'); + font-weight: 700; + font-style: normal; + +} + + +@font-face { + font-family: 'Bitstream Vera Sans Mono'; + src: url('https://alistairmichael.com/media/fonts/Vera/veramono-webfont.woff2') format('woff2'), + url('https://alistairmichael.com/media/fonts/Vera/veramono-webfont.woff') format('woff'); + font-weight: 400; + font-style: normal; + +} + + +@font-face { + font-family: 'Bitstream Vera Sans Mono'; + src: url('https://alistairmichael.com/media/fonts/Vera/veramoit-webfont.woff2') format('woff2'), + url('https://alistairmichael.com/media/fonts/Vera/veramoit-webfont.woff') format('woff'); + font-weight: 400; + font-style: italic; + +} + + + + +@font-face { + font-family: 'Bitstream Vera Sans Mono'; + src: url('https://alistairmichael.com/media/fonts/Vera/veramobi-webfont.woff2') format('woff2'), + url('https://alistairmichael.com/media/fonts/Vera/veramobi-webfont.woff') format('woff'); + font-weight: 700; + font-style: italic; + +} + + + + +@font-face { + font-family: 'Bitstream Vera Sans Mono'; + src: url('https://alistairmichael.com/media/fonts/Vera/veramobd-webfont.woff2') format('woff2'), + url('https://alistairmichael.com/media/fonts/Vera/veramobd-webfont.woff') format('woff'); + font-weight: 700; + font-style: normal; + +} + + + + +@font-face { + font-family: 'Bitstream Vera Sans'; + src: url('https://alistairmichael.com/media/fonts/Vera/verait-webfont.woff2') format('woff2'), + url('https://alistairmichael.com/media/fonts/Vera/verait-webfont.woff') format('woff'); + font-weight: 400; + font-style: italic; + +} + + + + +@font-face { + font-family: 'Bitstream Vera Sans'; + src: url('https://alistairmichael.com/media/fonts/Vera/verabi-webfont.woff2') format('woff2'), + url('https://alistairmichael.com/media/fonts/Vera/verabi-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; + +} + + + + +@font-face { + font-family: 'Bitstream Vera Sans'; + src: url('https://alistairmichael.com/media/fonts/Vera/verabd-webfont.woff2') format('woff2'), + url('https://alistairmichael.com/media/fonts/Vera/verabd-webfont.woff') format('woff'); + font-weight: 700; + font-style: bold; + +} diff --git a/media/fonts/Vera/vera-demo.html b/media/fonts/Vera/vera-demo.html new file mode 100644 index 0000000..50038ba --- /dev/null +++ b/media/fonts/Vera/vera-demo.html @@ -0,0 +1,620 @@ + + + + + + + + + + + + + Bitstream Vera Sans Roman Specimen + + + + + + +
+ + + +
+ + +
+ +
+
+
AaBb
+
+
+ +
+
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
+
+
+
+ + + + + + + + + + + + + + + + +
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
+ +
+ +
+ + + +
+ + +
+
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
+
+ bodyBitstream Vera Sans Roman +
+
+ bodyArial +
+
+ bodyVerdana +
+
+ bodyGeorgia +
+ + + +
+ + +
+ +
+

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+
+
+

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+ +
+ +
+ +
+
+

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+ +
+ +
+ +
+
+

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+ +
+ + + +
+
+

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+ +
+
+

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+ +
+
+

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+ +
+ +
+ +
+
+

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+ +
+ + + + +
+ +
+ +
+ +
+

Lorem Ipsum Dolor

+

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

+
+
+
+
+

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

+ +

Cras mattis consectetur

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+
+ +
+ +
+

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ +

Maecenas sed diam eget risus varius.

+ +

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + + +

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

+ +

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ +
+
+ +
+ + + + + + +
+
+
+ +

Language Support

+

The subset of Bitstream Vera Sans Roman in this kit supports the following languages:
+ + Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo

+

Glyph Chart

+

The subset of Bitstream Vera Sans Roman in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+
+ +



+

 

+

!

!
+

"

"
+

#

#
+

$

$
+

%

%
+

&

&
+

'

'
+

(

(
+

)

)
+

*

*
+

+

+
+

,

,
+

-

-
+

.

.
+

/

/
+

0

0
+

1

1
+

2

2
+

3

3
+

4

4
+

5

5
+

6

6
+

7

7
+

8

8
+

9

9
+

:

:
+

&#59;

;
+

<

<
+

&#61;

=
+

&#62;

>
+

&#63;

?
+

&#64;

@
+

&#65;

A
+

&#66;

B
+

&#67;

C
+

&#68;

D
+

&#69;

E
+

&#70;

F
+

&#71;

G
+

&#72;

H
+

&#73;

I
+

&#74;

J
+

&#75;

K
+

&#76;

L
+

&#77;

M
+

&#78;

N
+

&#79;

O
+

&#80;

P
+

&#81;

Q
+

&#82;

R
+

&#83;

S
+

&#84;

T
+

&#85;

U
+

&#86;

V
+

&#87;

W
+

&#88;

X
+

&#89;

Y
+

&#90;

Z
+

&#91;

[
+

&#92;

\
+

&#93;

]
+

&#94;

^
+

&#95;

_
+

&#96;

`
+

&#97;

a
+

&#98;

b
+

&#99;

c
+

&#100;

d
+

&#101;

e
+

&#102;

f
+

&#103;

g
+

&#104;

h
+

&#105;

i
+

&#106;

j
+

&#107;

k
+

&#108;

l
+

&#109;

m
+

&#110;

n
+

&#111;

o
+

&#112;

p
+

&#113;

q
+

&#114;

r
+

&#115;

s
+

&#116;

t
+

&#117;

u
+

&#118;

v
+

&#119;

w
+

&#120;

x
+

&#121;

y
+

&#122;

z
+

&#123;

{
+

&#124;

|
+

&#125;

}
+

&#126;

~
+

&#160;

 
+

&#161;

¡
+

&#162;

¢
+

&#163;

£
+

&#164;

¤
+

&#165;

¥
+

&#166;

¦
+

&#167;

§
+

&#168;

¨
+

&#169;

©
+

&#170;

ª
+

&#171;

«
+

&#172;

¬
+

&#173;

­
+

&#174;

®
+

&#175;

¯
+

&#176;

°
+

&#177;

±
+

&#178;

²
+

&#179;

³
+

&#180;

´
+

&#181;

µ
+

&#182;

+

&#183;

·
+

&#184;

¸
+

&#185;

¹
+

&#186;

º
+

&#187;

»
+

&#188;

¼
+

&#189;

½
+

&#190;

¾
+

&#191;

¿
+

&#192;

À
+

&#193;

Á
+

&#194;

Â
+

&#195;

Ã
+

&#196;

Ä
+

&#197;

Å
+

&#198;

Æ
+

&#199;

Ç
+

&#200;

È
+

&#201;

É
+

&#202;

Ê
+

&#203;

Ë
+

&#204;

Ì
+

&#205;

Í
+

&#206;

Î
+

&#207;

Ï
+

&#208;

Ð
+

&#209;

Ñ
+

&#210;

Ò
+

&#211;

Ó
+

&#212;

Ô
+

&#213;

Õ
+

&#214;

Ö
+

&#215;

×
+

&#216;

Ø
+

&#217;

Ù
+

&#218;

Ú
+

&#219;

Û
+

&#220;

Ü
+

&#221;

Ý
+

&#222;

Þ
+

&#223;

ß
+

&#224;

à
+

&#225;

á
+

&#226;

â
+

&#227;

ã
+

&#228;

ä
+

&#229;

å
+

&#230;

æ
+

&#231;

ç
+

&#232;

è
+

&#233;

é
+

&#234;

ê
+

&#235;

ë
+

&#236;

ì
+

&#237;

í
+

&#238;

î
+

&#239;

ï
+

&#240;

ð
+

&#241;

ñ
+

&#242;

ò
+

&#243;

ó
+

&#244;

ô
+

&#245;

õ
+

&#246;

ö
+

&#247;

÷
+

&#248;

ø
+

&#249;

ù
+

&#250;

ú
+

&#251;

û
+

&#252;

ü
+

&#253;

ý
+

&#254;

þ
+

&#255;

ÿ
+

&#338;

Œ
+

&#339;

œ
+

&#376;

Ÿ
+

&#710;

ˆ
+

&#732;

˜
+

&#8192;

 
+

&#8193;

 
+

&#8194;

 
+

&#8195;

 
+

&#8196;

 
+

&#8197;

 
+

&#8198;

 
+

&#8199;

 
+

&#8200;

 
+

&#8201;

 
+

&#8202;

 
+

&#8208;

‐
+

&#8209;

‑
+

&#8210;

‒
+

&#8211;

–
+

&#8212;

—
+

&#8216;

‘
+

&#8217;

’
+

&#8218;

‚
+

&#8220;

“
+

&#8221;

”
+

&#8222;

„
+

&#8226;

•
+

&#8230;

…
+

&#8239;

 
+

&#8249;

‹
+

&#8250;

›
+

&#8287;

 
+

&#8364;

€
+

&#8482;

™
+

&#9724;

◼
+

&#64257;

fi
+

&#64258;

fl
+
+
+ + +
+
+ + +
+ +
+ +
+
+
+

Installing Webfonts

+ +

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

+ +

1. Upload your webfonts

+

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

+ + + +@font-face{ + font-family: 'MyWebFont'; + src: url('WebFont.eot'); + src: url('WebFont.eot?#iefix') format('embedded-opentype'), + url('WebFont.woff') format('woff'), + url('WebFont.ttf') format('truetype'), + url('WebFont.svg#webfont') format('svg'); +} + + +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

+

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+
+ +
+
+

Troubleshooting
Font-Face Problems

+

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

+ +

Fonts not loading in iPhone or iPad

+ +

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

+ +

Fonts not loading in Firefox

+ +

The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

+ +

Fonts not loading in IE

+ +

Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+
+
+
+ +
+ +
+ +
+ + diff --git a/media/fonts/Vera/vera-webfont.woff b/media/fonts/Vera/vera-webfont.woff new file mode 100644 index 0000000..4e99513 Binary files /dev/null and b/media/fonts/Vera/vera-webfont.woff differ diff --git a/media/fonts/Vera/vera-webfont.woff2 b/media/fonts/Vera/vera-webfont.woff2 new file mode 100644 index 0000000..cf869d2 Binary files /dev/null and b/media/fonts/Vera/vera-webfont.woff2 differ diff --git a/media/fonts/Vera/verabd-demo.html b/media/fonts/Vera/verabd-demo.html new file mode 100644 index 0000000..8dd0c4c --- /dev/null +++ b/media/fonts/Vera/verabd-demo.html @@ -0,0 +1,620 @@ + + + + + + + + + + + + + Bitstream Vera Sans Bold Specimen + + + + + + +
+ + + +
+ + +
+ +
+
+
AaBb
+
+
+ +
+
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
+
+
+
+ + + + + + + + + + + + + + + + +
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
+ +
+ +
+ + + +
+ + +
+
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
+
+ bodyBitstream Vera Sans Bold +
+
+ bodyArial +
+
+ bodyVerdana +
+
+ bodyGeorgia +
+ + + +
+ + +
+ +
+

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+
+
+

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+ +
+ +
+ +
+
+

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+ +
+ +
+ +
+
+

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+ +
+ + + +
+
+

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+ +
+
+

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+ +
+
+

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+ +
+ +
+ +
+
+

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+ +
+ + + + +
+ +
+ +
+ +
+

Lorem Ipsum Dolor

+

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

+
+
+
+
+

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

+ +

Cras mattis consectetur

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+
+ +
+ +
+

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ +

Maecenas sed diam eget risus varius.

+ +

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + + +

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

+ +

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ +
+
+ +
+ + + + + + +
+
+
+ +

Language Support

+

The subset of Bitstream Vera Sans Bold in this kit supports the following languages:
+ + Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo

+

Glyph Chart

+

The subset of Bitstream Vera Sans Bold in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+
+ +

&#13;

+

&#32;

+

&#33;

!
+

&#34;

"
+

&#35;

#
+

&#36;

$
+

&#37;

%
+

&#38;

&
+

&#39;

'
+

&#40;

(
+

&#41;

)
+

&#42;

*
+

&#43;

+
+

&#44;

,
+

&#45;

-
+

&#46;

.
+

&#47;

/
+

&#48;

0
+

&#49;

1
+

&#50;

2
+

&#51;

3
+

&#52;

4
+

&#53;

5
+

&#54;

6
+

&#55;

7
+

&#56;

8
+

&#57;

9
+

&#58;

:
+

&#59;

;
+

&#60;

<
+

&#61;

=
+

&#62;

>
+

&#63;

?
+

&#64;

@
+

&#65;

A
+

&#66;

B
+

&#67;

C
+

&#68;

D
+

&#69;

E
+

&#70;

F
+

&#71;

G
+

&#72;

H
+

&#73;

I
+

&#74;

J
+

&#75;

K
+

&#76;

L
+

&#77;

M
+

&#78;

N
+

&#79;

O
+

&#80;

P
+

&#81;

Q
+

&#82;

R
+

&#83;

S
+

&#84;

T
+

&#85;

U
+

&#86;

V
+

&#87;

W
+

&#88;

X
+

&#89;

Y
+

&#90;

Z
+

&#91;

[
+

&#92;

\
+

&#93;

]
+

&#94;

^
+

&#95;

_
+

&#96;

`
+

&#97;

a
+

&#98;

b
+

&#99;

c
+

&#100;

d
+

&#101;

e
+

&#102;

f
+

&#103;

g
+

&#104;

h
+

&#105;

i
+

&#106;

j
+

&#107;

k
+

&#108;

l
+

&#109;

m
+

&#110;

n
+

&#111;

o
+

&#112;

p
+

&#113;

q
+

&#114;

r
+

&#115;

s
+

&#116;

t
+

&#117;

u
+

&#118;

v
+

&#119;

w
+

&#120;

x
+

&#121;

y
+

&#122;

z
+

&#123;

{
+

&#124;

|
+

&#125;

}
+

&#126;

~
+

&#160;

 
+

&#161;

¡
+

&#162;

¢
+

&#163;

£
+

&#164;

¤
+

&#165;

¥
+

&#166;

¦
+

&#167;

§
+

&#168;

¨
+

&#169;

©
+

&#170;

ª
+

&#171;

«
+

&#172;

¬
+

&#173;

­
+

&#174;

®
+

&#175;

¯
+

&#176;

°
+

&#177;

±
+

&#178;

²
+

&#179;

³
+

&#180;

´
+

&#181;

µ
+

&#182;

+

&#183;

·
+

&#184;

¸
+

&#185;

¹
+

&#186;

º
+

&#187;

»
+

&#188;

¼
+

&#189;

½
+

&#190;

¾
+

&#191;

¿
+

&#192;

À
+

&#193;

Á
+

&#194;

Â
+

&#195;

Ã
+

&#196;

Ä
+

&#197;

Å
+

&#198;

Æ
+

&#199;

Ç
+

&#200;

È
+

&#201;

É
+

&#202;

Ê
+

&#203;

Ë
+

&#204;

Ì
+

&#205;

Í
+

&#206;

Î
+

&#207;

Ï
+

&#208;

Ð
+

&#209;

Ñ
+

&#210;

Ò
+

&#211;

Ó
+

&#212;

Ô
+

&#213;

Õ
+

&#214;

Ö
+

&#215;

×
+

&#216;

Ø
+

&#217;

Ù
+

&#218;

Ú
+

&#219;

Û
+

&#220;

Ü
+

&#221;

Ý
+

&#222;

Þ
+

&#223;

ß
+

&#224;

à
+

&#225;

á
+

&#226;

â
+

&#227;

ã
+

&#228;

ä
+

&#229;

å
+

&#230;

æ
+

&#231;

ç
+

&#232;

è
+

&#233;

é
+

&#234;

ê
+

&#235;

ë
+

&#236;

ì
+

&#237;

í
+

&#238;

î
+

&#239;

ï
+

&#240;

ð
+

&#241;

ñ
+

&#242;

ò
+

&#243;

ó
+

&#244;

ô
+

&#245;

õ
+

&#246;

ö
+

&#247;

÷
+

&#248;

ø
+

&#249;

ù
+

&#250;

ú
+

&#251;

û
+

&#252;

ü
+

&#253;

ý
+

&#254;

þ
+

&#255;

ÿ
+

&#338;

Œ
+

&#339;

œ
+

&#376;

Ÿ
+

&#710;

ˆ
+

&#732;

˜
+

&#8192;

 
+

&#8193;

 
+

&#8194;

 
+

&#8195;

 
+

&#8196;

 
+

&#8197;

 
+

&#8198;

 
+

&#8199;

 
+

&#8200;

 
+

&#8201;

 
+

&#8202;

 
+

&#8208;

‐
+

&#8209;

‑
+

&#8210;

‒
+

&#8211;

–
+

&#8212;

—
+

&#8216;

‘
+

&#8217;

’
+

&#8218;

‚
+

&#8220;

“
+

&#8221;

”
+

&#8222;

„
+

&#8226;

•
+

&#8230;

…
+

&#8239;

 
+

&#8249;

‹
+

&#8250;

›
+

&#8287;

 
+

&#8364;

€
+

&#8482;

™
+

&#9724;

◼
+

&#64257;

fi
+

&#64258;

fl
+
+
+ + +
+
+ + +
+ +
+ +
+
+
+

Installing Webfonts

+ +

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

+ +

1. Upload your webfonts

+

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

+ + + +@font-face{ + font-family: 'MyWebFont'; + src: url('WebFont.eot'); + src: url('WebFont.eot?#iefix') format('embedded-opentype'), + url('WebFont.woff') format('woff'), + url('WebFont.ttf') format('truetype'), + url('WebFont.svg#webfont') format('svg'); +} + + +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

+

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+
+ +
+
+

Troubleshooting
Font-Face Problems

+

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

+ +

Fonts not loading in iPhone or iPad

+ +

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

+ +

Fonts not loading in Firefox

+ +

The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

+ +

Fonts not loading in IE

+ +

Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+
+
+
+ +
+ +
+ +
+ + diff --git a/media/fonts/Vera/verabd-webfont.woff b/media/fonts/Vera/verabd-webfont.woff new file mode 100644 index 0000000..e9bc08b Binary files /dev/null and b/media/fonts/Vera/verabd-webfont.woff differ diff --git a/media/fonts/Vera/verabd-webfont.woff2 b/media/fonts/Vera/verabd-webfont.woff2 new file mode 100644 index 0000000..a4ce446 Binary files /dev/null and b/media/fonts/Vera/verabd-webfont.woff2 differ diff --git a/media/fonts/Vera/verabi-webfont.woff b/media/fonts/Vera/verabi-webfont.woff new file mode 100644 index 0000000..f7a1f7a Binary files /dev/null and b/media/fonts/Vera/verabi-webfont.woff differ diff --git a/media/fonts/Vera/verabi-webfont.woff2 b/media/fonts/Vera/verabi-webfont.woff2 new file mode 100644 index 0000000..354c16f Binary files /dev/null and b/media/fonts/Vera/verabi-webfont.woff2 differ diff --git a/media/fonts/Vera/verait-demo.html b/media/fonts/Vera/verait-demo.html new file mode 100644 index 0000000..96ccbb5 --- /dev/null +++ b/media/fonts/Vera/verait-demo.html @@ -0,0 +1,620 @@ + + + + + + + + + + + + + Bitstream Vera Sans Oblique Specimen + + + + + + +
+ + + +
+ + +
+ +
+
+
AaBb
+
+
+ +
+
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
+
+
+
+ + + + + + + + + + + + + + + + +
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
+ +
+ +
+ + + +
+ + +
+
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
+
+ bodyBitstream Vera Sans Oblique +
+
+ bodyArial +
+
+ bodyVerdana +
+
+ bodyGeorgia +
+ + + +
+ + +
+ +
+

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+
+
+

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+ +
+ +
+ +
+
+

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+ +
+ +
+ +
+
+

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+ +
+ + + +
+
+

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+ +
+
+

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+ +
+
+

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+ +
+ +
+ +
+
+

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+ +
+ + + + +
+ +
+ +
+ +
+

Lorem Ipsum Dolor

+

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

+
+
+
+
+

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

+ +

Cras mattis consectetur

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+
+ +
+ +
+

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ +

Maecenas sed diam eget risus varius.

+ +

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + + +

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

+ +

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ +
+
+ +
+ + + + + + +
+
+
+ +

Language Support

+

The subset of Bitstream Vera Sans Oblique in this kit supports the following languages:
+ + Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo

+

Glyph Chart

+

The subset of Bitstream Vera Sans Oblique in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+
+ +

&#13;

+

&#32;

+

&#33;

!
+

&#34;

"
+

&#35;

#
+

&#36;

$
+

&#37;

%
+

&#38;

&
+

&#39;

'
+

&#40;

(
+

&#41;

)
+

&#42;

*
+

&#43;

+
+

&#44;

,
+

&#45;

-
+

&#46;

.
+

&#47;

/
+

&#48;

0
+

&#49;

1
+

&#50;

2
+

&#51;

3
+

&#52;

4
+

&#53;

5
+

&#54;

6
+

&#55;

7
+

&#56;

8
+

&#57;

9
+

&#58;

:
+

&#59;

;
+

&#60;

<
+

&#61;

=
+

&#62;

>
+

&#63;

?
+

&#64;

@
+

&#65;

A
+

&#66;

B
+

&#67;

C
+

&#68;

D
+

&#69;

E
+

&#70;

F
+

&#71;

G
+

&#72;

H
+

&#73;

I
+

&#74;

J
+

&#75;

K
+

&#76;

L
+

&#77;

M
+

&#78;

N
+

&#79;

O
+

&#80;

P
+

&#81;

Q
+

&#82;

R
+

&#83;

S
+

&#84;

T
+

&#85;

U
+

&#86;

V
+

&#87;

W
+

&#88;

X
+

&#89;

Y
+

&#90;

Z
+

&#91;

[
+

&#92;

\
+

&#93;

]
+

&#94;

^
+

&#95;

_
+

&#96;

`
+

&#97;

a
+

&#98;

b
+

&#99;

c
+

&#100;

d
+

&#101;

e
+

&#102;

f
+

&#103;

g
+

&#104;

h
+

&#105;

i
+

&#106;

j
+

&#107;

k
+

&#108;

l
+

&#109;

m
+

&#110;

n
+

&#111;

o
+

&#112;

p
+

&#113;

q
+

&#114;

r
+

&#115;

s
+

&#116;

t
+

&#117;

u
+

&#118;

v
+

&#119;

w
+

&#120;

x
+

&#121;

y
+

&#122;

z
+

&#123;

{
+

&#124;

|
+

&#125;

}
+

&#126;

~
+

&#160;

 
+

&#161;

¡
+

&#162;

¢
+

&#163;

£
+

&#164;

¤
+

&#165;

¥
+

&#166;

¦
+

&#167;

§
+

&#168;

¨
+

&#169;

©
+

&#170;

ª
+

&#171;

«
+

&#172;

¬
+

&#173;

­
+

&#174;

®
+

&#175;

¯
+

&#176;

°
+

&#177;

±
+

&#178;

²
+

&#179;

³
+

&#180;

´
+

&#181;

µ
+

&#182;

+

&#183;

·
+

&#184;

¸
+

&#185;

¹
+

&#186;

º
+

&#187;

»
+

&#188;

¼
+

&#189;

½
+

&#190;

¾
+

&#191;

¿
+

&#192;

À
+

&#193;

Á
+

&#194;

Â
+

&#195;

Ã
+

&#196;

Ä
+

&#197;

Å
+

&#198;

Æ
+

&#199;

Ç
+

&#200;

È
+

&#201;

É
+

&#202;

Ê
+

&#203;

Ë
+

&#204;

Ì
+

&#205;

Í
+

&#206;

Î
+

&#207;

Ï
+

&#208;

Ð
+

&#209;

Ñ
+

&#210;

Ò
+

&#211;

Ó
+

&#212;

Ô
+

&#213;

Õ
+

&#214;

Ö
+

&#215;

×
+

&#216;

Ø
+

&#217;

Ù
+

&#218;

Ú
+

&#219;

Û
+

&#220;

Ü
+

&#221;

Ý
+

&#222;

Þ
+

&#223;

ß
+

&#224;

à
+

&#225;

á
+

&#226;

â
+

&#227;

ã
+

&#228;

ä
+

&#229;

å
+

&#230;

æ
+

&#231;

ç
+

&#232;

è
+

&#233;

é
+

&#234;

ê
+

&#235;

ë
+

&#236;

ì
+

&#237;

í
+

&#238;

î
+

&#239;

ï
+

&#240;

ð
+

&#241;

ñ
+

&#242;

ò
+

&#243;

ó
+

&#244;

ô
+

&#245;

õ
+

&#246;

ö
+

&#247;

÷
+

&#248;

ø
+

&#249;

ù
+

&#250;

ú
+

&#251;

û
+

&#252;

ü
+

&#253;

ý
+

&#254;

þ
+

&#255;

ÿ
+

&#338;

Œ
+

&#339;

œ
+

&#376;

Ÿ
+

&#710;

ˆ
+

&#732;

˜
+

&#8192;

 
+

&#8193;

 
+

&#8194;

 
+

&#8195;

 
+

&#8196;

 
+

&#8197;

 
+

&#8198;

 
+

&#8199;

 
+

&#8200;

 
+

&#8201;

 
+

&#8202;

 
+

&#8208;

‐
+

&#8209;

‑
+

&#8210;

‒
+

&#8211;

–
+

&#8212;

—
+

&#8216;

‘
+

&#8217;

’
+

&#8218;

‚
+

&#8220;

“
+

&#8221;

”
+

&#8222;

„
+

&#8226;

•
+

&#8230;

…
+

&#8239;

 
+

&#8249;

‹
+

&#8250;

›
+

&#8287;

 
+

&#8364;

€
+

&#8482;

™
+

&#9724;

◼
+

&#64257;

fi
+

&#64258;

fl
+
+
+ + +
+
+ + +
+ +
+ +
+
+
+

Installing Webfonts

+ +

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

+ +

1. Upload your webfonts

+

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

+ + + +@font-face{ + font-family: 'MyWebFont'; + src: url('WebFont.eot'); + src: url('WebFont.eot?#iefix') format('embedded-opentype'), + url('WebFont.woff') format('woff'), + url('WebFont.ttf') format('truetype'), + url('WebFont.svg#webfont') format('svg'); +} + + +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

+

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+
+ +
+
+

Troubleshooting
Font-Face Problems

+

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

+ +

Fonts not loading in iPhone or iPad

+ +

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

+ +

Fonts not loading in Firefox

+ +

The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

+ +

Fonts not loading in IE

+ +

Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+
+
+
+ +
+ +
+ +
+ + diff --git a/media/fonts/Vera/verait-webfont.woff b/media/fonts/Vera/verait-webfont.woff new file mode 100644 index 0000000..224da68 Binary files /dev/null and b/media/fonts/Vera/verait-webfont.woff differ diff --git a/media/fonts/Vera/verait-webfont.woff2 b/media/fonts/Vera/verait-webfont.woff2 new file mode 100644 index 0000000..7ba253b Binary files /dev/null and b/media/fonts/Vera/verait-webfont.woff2 differ diff --git a/media/fonts/Vera/veramobd-webfont.woff b/media/fonts/Vera/veramobd-webfont.woff new file mode 100644 index 0000000..589b923 Binary files /dev/null and b/media/fonts/Vera/veramobd-webfont.woff differ diff --git a/media/fonts/Vera/veramobd-webfont.woff2 b/media/fonts/Vera/veramobd-webfont.woff2 new file mode 100644 index 0000000..507a201 Binary files /dev/null and b/media/fonts/Vera/veramobd-webfont.woff2 differ diff --git a/media/fonts/Vera/veramobi-webfont.woff b/media/fonts/Vera/veramobi-webfont.woff new file mode 100644 index 0000000..1b69819 Binary files /dev/null and b/media/fonts/Vera/veramobi-webfont.woff differ diff --git a/media/fonts/Vera/veramobi-webfont.woff2 b/media/fonts/Vera/veramobi-webfont.woff2 new file mode 100644 index 0000000..1389913 Binary files /dev/null and b/media/fonts/Vera/veramobi-webfont.woff2 differ diff --git a/media/fonts/Vera/veramoit-webfont.woff b/media/fonts/Vera/veramoit-webfont.woff new file mode 100644 index 0000000..f91ddc0 Binary files /dev/null and b/media/fonts/Vera/veramoit-webfont.woff differ diff --git a/media/fonts/Vera/veramoit-webfont.woff2 b/media/fonts/Vera/veramoit-webfont.woff2 new file mode 100644 index 0000000..150ff00 Binary files /dev/null and b/media/fonts/Vera/veramoit-webfont.woff2 differ diff --git a/media/fonts/Vera/veramono-webfont.woff b/media/fonts/Vera/veramono-webfont.woff new file mode 100644 index 0000000..e6b001e Binary files /dev/null and b/media/fonts/Vera/veramono-webfont.woff differ diff --git a/media/fonts/Vera/veramono-webfont.woff2 b/media/fonts/Vera/veramono-webfont.woff2 new file mode 100644 index 0000000..5f31ef4 Binary files /dev/null and b/media/fonts/Vera/veramono-webfont.woff2 differ diff --git a/media/fonts/Vera/verase-webfont.woff b/media/fonts/Vera/verase-webfont.woff new file mode 100644 index 0000000..ee9dd62 Binary files /dev/null and b/media/fonts/Vera/verase-webfont.woff differ diff --git a/media/fonts/Vera/verase-webfont.woff2 b/media/fonts/Vera/verase-webfont.woff2 new file mode 100644 index 0000000..ac687cf Binary files /dev/null and b/media/fonts/Vera/verase-webfont.woff2 differ diff --git a/media/fonts/Vera/verasebd-demo.html b/media/fonts/Vera/verasebd-demo.html new file mode 100644 index 0000000..7a2a59b --- /dev/null +++ b/media/fonts/Vera/verasebd-demo.html @@ -0,0 +1,620 @@ + + + + + + + + + + + + + Bitstream Vera Serif Bold Specimen + + + + + + +
+ + + +
+ + +
+ +
+
+
AaBb
+
+
+ +
+
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
+
+
+
+ + + + + + + + + + + + + + + + +
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
+ +
+ +
+ + + +
+ + +
+
◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body
body
body
body
+
+ bodyBitstream Vera Serif Bold +
+
+ bodyArial +
+
+ bodyVerdana +
+
+ bodyGeorgia +
+ + + +
+ + +
+ +
+

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+
+
+

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+ +
+ +
+ +
+
+

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+ +
+ +
+ +
+
+

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+ +
+ + + +
+
+

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+ +
+
+

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+ +
+
+ +
+ +
+
+

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+ +
+ +
+ +
+
+

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

+
+
+ +
+ + + + +
+ +
+ +
+ +
+

Lorem Ipsum Dolor

+

Etiam porta sem malesuada magna mollis euismod

+ +

By Aenean Lacinia

+
+
+
+
+

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + +

Pellentesque ornare sem

+ +

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+ +

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

+ +

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

+ +

Cras mattis consectetur

+ +

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

+ +

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

+
+ +
+ +
+

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ +

Maecenas sed diam eget risus varius.

+ +

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ + + +

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

+ +

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+ +
+
+ +
+ + + + + + +
+
+
+ +

Language Support

+

The subset of Bitstream Vera Serif Bold in this kit supports the following languages:
+ + Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo

+

Glyph Chart

+

The subset of Bitstream Vera Serif Bold in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

+
+ +

&#13;

+

&#32;

+

&#33;

!
+

&#34;

"
+

&#35;

#
+

&#36;

$
+

&#37;

%
+

&#38;

&
+

&#39;

'
+

&#40;

(
+

&#41;

)
+

&#42;

*
+

&#43;

+
+

&#44;

,
+

&#45;

-
+

&#46;

.
+

&#47;

/
+

&#48;

0
+

&#49;

1
+

&#50;

2
+

&#51;

3
+

&#52;

4
+

&#53;

5
+

&#54;

6
+

&#55;

7
+

&#56;

8
+

&#57;

9
+

&#58;

:
+

&#59;

;
+

&#60;

<
+

&#61;

=
+

&#62;

>
+

&#63;

?
+

&#64;

@
+

&#65;

A
+

&#66;

B
+

&#67;

C
+

&#68;

D
+

&#69;

E
+

&#70;

F
+

&#71;

G
+

&#72;

H
+

&#73;

I
+

&#74;

J
+

&#75;

K
+

&#76;

L
+

&#77;

M
+

&#78;

N
+

&#79;

O
+

&#80;

P
+

&#81;

Q
+

&#82;

R
+

&#83;

S
+

&#84;

T
+

&#85;

U
+

&#86;

V
+

&#87;

W
+

&#88;

X
+

&#89;

Y
+

&#90;

Z
+

&#91;

[
+

&#92;

\
+

&#93;

]
+

&#94;

^
+

&#95;

_
+

&#96;

`
+

&#97;

a
+

&#98;

b
+

&#99;

c
+

&#100;

d
+

&#101;

e
+

&#102;

f
+

&#103;

g
+

&#104;

h
+

&#105;

i
+

&#106;

j
+

&#107;

k
+

&#108;

l
+

&#109;

m
+

&#110;

n
+

&#111;

o
+

&#112;

p
+

&#113;

q
+

&#114;

r
+

&#115;

s
+

&#116;

t
+

&#117;

u
+

&#118;

v
+

&#119;

w
+

&#120;

x
+

&#121;

y
+

&#122;

z
+

&#123;

{
+

&#124;

|
+

&#125;

}
+

&#126;

~
+

&#160;

 
+

&#161;

¡
+

&#162;

¢
+

&#163;

£
+

&#164;

¤
+

&#165;

¥
+

&#166;

¦
+

&#167;

§
+

&#168;

¨
+

&#169;

©
+

&#170;

ª
+

&#171;

«
+

&#172;

¬
+

&#173;

­
+

&#174;

®
+

&#175;

¯
+

&#176;

°
+

&#177;

±
+

&#178;

²
+

&#179;

³
+

&#180;

´
+

&#181;

µ
+

&#182;

+

&#183;

·
+

&#184;

¸
+

&#185;

¹
+

&#186;

º
+

&#187;

»
+

&#188;

¼
+

&#189;

½
+

&#190;

¾
+

&#191;

¿
+

&#192;

À
+

&#193;

Á
+

&#194;

Â
+

&#195;

Ã
+

&#196;

Ä
+

&#197;

Å
+

&#198;

Æ
+

&#199;

Ç
+

&#200;

È
+

&#201;

É
+

&#202;

Ê
+

&#203;

Ë
+

&#204;

Ì
+

&#205;

Í
+

&#206;

Î
+

&#207;

Ï
+

&#208;

Ð
+

&#209;

Ñ
+

&#210;

Ò
+

&#211;

Ó
+

&#212;

Ô
+

&#213;

Õ
+

&#214;

Ö
+

&#215;

×
+

&#216;

Ø
+

&#217;

Ù
+

&#218;

Ú
+

&#219;

Û
+

&#220;

Ü
+

&#221;

Ý
+

&#222;

Þ
+

&#223;

ß
+

&#224;

à
+

&#225;

á
+

&#226;

â
+

&#227;

ã
+

&#228;

ä
+

&#229;

å
+

&#230;

æ
+

&#231;

ç
+

&#232;

è
+

&#233;

é
+

&#234;

ê
+

&#235;

ë
+

&#236;

ì
+

&#237;

í
+

&#238;

î
+

&#239;

ï
+

&#240;

ð
+

&#241;

ñ
+

&#242;

ò
+

&#243;

ó
+

&#244;

ô
+

&#245;

õ
+

&#246;

ö
+

&#247;

÷
+

&#248;

ø
+

&#249;

ù
+

&#250;

ú
+

&#251;

û
+

&#252;

ü
+

&#253;

ý
+

&#254;

þ
+

&#255;

ÿ
+

&#338;

Œ
+

&#339;

œ
+

&#376;

Ÿ
+

&#710;

ˆ
+

&#732;

˜
+

&#8192;

 
+

&#8193;

 
+

&#8194;

 
+

&#8195;

 
+

&#8196;

 
+

&#8197;

 
+

&#8198;

 
+

&#8199;

 
+

&#8200;

 
+

&#8201;

 
+

&#8202;

 
+

&#8208;

‐
+

&#8209;

‑
+

&#8210;

‒
+

&#8211;

–
+

&#8212;

—
+

&#8216;

‘
+

&#8217;

’
+

&#8218;

‚
+

&#8220;

“
+

&#8221;

”
+

&#8222;

„
+

&#8226;

•
+

&#8230;

…
+

&#8239;

 
+

&#8249;

‹
+

&#8250;

›
+

&#8287;

 
+

&#8364;

€
+

&#8482;

™
+

&#9724;

◼
+

&#64257;

fi
+

&#64258;

fl
+
+
+ + +
+
+ + +
+ +
+ +
+
+
+

Installing Webfonts

+ +

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

+ +

1. Upload your webfonts

+

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

+ +

2. Include the webfont stylesheet

+

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

+ + + +@font-face{ + font-family: 'MyWebFont'; + src: url('WebFont.eot'); + src: url('WebFont.eot?#iefix') format('embedded-opentype'), + url('WebFont.woff') format('woff'), + url('WebFont.ttf') format('truetype'), + url('WebFont.svg#webfont') format('svg'); +} + + +

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> + +

3. Modify your own stylesheet

+

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

+p { font-family: 'WebFont', Arial, sans-serif; } + +

4. Test

+

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

+
+ +
+
+

Troubleshooting
Font-Face Problems

+

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

+ +

Fonts not showing in any browser

+ +

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

+ +

Fonts not loading in iPhone or iPad

+ +

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

+ +

Fonts not loading in Firefox

+ +

The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

+ +

Fonts not loading in IE

+ +

Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

+ +

Fonts not loading in IE9

+ +

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

+
+
+
+ +
+ +
+ +
+ + diff --git a/media/fonts/Vera/verasebd-webfont.woff b/media/fonts/Vera/verasebd-webfont.woff new file mode 100644 index 0000000..12de778 Binary files /dev/null and b/media/fonts/Vera/verasebd-webfont.woff differ diff --git a/media/fonts/Vera/verasebd-webfont.woff2 b/media/fonts/Vera/verasebd-webfont.woff2 new file mode 100644 index 0000000..95aed1a Binary files /dev/null and b/media/fonts/Vera/verasebd-webfont.woff2 differ diff --git a/media/game3.png b/media/game3.png new file mode 100644 index 0000000..39f53fa Binary files /dev/null and b/media/game3.png differ diff --git a/media/gamebounce.mp4 b/media/gamebounce.mp4 new file mode 100644 index 0000000..b7705a1 Binary files /dev/null and b/media/gamebounce.mp4 differ diff --git a/media/gamedemo_small.mp4 b/media/gamedemo_small.mp4 new file mode 100644 index 0000000..62f1c46 Binary files /dev/null and b/media/gamedemo_small.mp4 differ diff --git a/media/img1.png b/media/img1.png new file mode 100644 index 0000000..0a156fc Binary files /dev/null and b/media/img1.png differ diff --git a/media/img2.png b/media/img2.png new file mode 100644 index 0000000..6c368eb Binary files /dev/null and b/media/img2.png differ diff --git a/media/style.css b/media/style.css new file mode 100644 index 0000000..995637e --- /dev/null +++ b/media/style.css @@ -0,0 +1,228 @@ +code { + white-space: pre-wrap; + background: #eee; + border-color: #eee; + border-radius: 6px; + border-style: solid; + border-left-width: 4px; + border-right-width: 4px; + border-top-width:1px; + border-bottom-width:1px; +} + +.title { + margin-top:18px; +} + +div.sourceCode { + background: #eee; + border-radius: 7px; +} + +pre code { + border-style: none; + background: none; +} + +code { + font-family: 'Bitstream Vera Sans Mono', 'Monospace', monospace; +} + +pre { + font-family: 'Bitstream Vera Sans Mono', 'Monospace', monospace; + background: #eee; + border-radius:6px; + padding: 0.7em; +} + +span.smallcaps { + font-variant: small-caps; +} span.underline { + text-decoration: underline; +} +div.column { + display: inline-block; + vertical-align: top; + width: 50%; +} + +dl { + padding-left:1.5em; +} + +dl dt { + font-size:0.6em; + font-weight:200; +} + +dl dd { + margin-bottom:0.7em; + + margin-left:0px; + +} + +dl dd a { + color:black; +} + +body { + font-family: 'Bitrstream Vera Sans', Helvetica Neue, Helvetica, sans-serif, sans; + font-size: 18px; +} + + +body .main_page p { + line-height:1.3em; +} + +.main_page li { + margin-top:0.3em; + margin-bottom:0.3em; +} + +img { + margin: auto; + max-width: 90%; + display: block; +} +dd { + margin-top: 5px; + margin-bottom: 7px; +} +h1 { + margin-bottom: 10px; + margin-top: 10px; +} + +h1, h2, h3, h4, h5, h6 { + font-weight:400; +} + + +a { + text-decoration:none; + color: #0066cc; +} + + +div.main_page { + padding-top: 0; +} + +hr { + border-style: solid; + color: #bbb; + border-width:0.1em; +} +pre.numberSource { + margin-left: 4; +} + +q { + quotes: "“" "”" "‘" "’"; +} + + +.grid-container { + display: grid; + grid-template-columns: 2fr 3fr 3fr 4fr; + grid-template-rows: 0.5fr repeat(0.5, 1fr); + gap: 1px 1px; + grid-template-areas: "header_group header_group header_group header_group" "menu_group main_page main_page table_of_contents" "menu_group main_page main_page table_of_contents"; +} + +.header_group { grid-area: header_group; } + +.menu_group { + grid-area: menu_group; + position:fixed; +} + +.table_of_contents { + grid-area: table_of_contents; + max-width: 100%; +} + +.main_page { + grid-area: main_page; + max-width:100%; +} + +.menu_item { + display:block; + padding:5px; + display: flex; + justify-content: space-between; +} + + +@media (max-width: 1200px) { + .grid-container { + display: grid; + gap: 1px 1px; + grid-template-areas: "header_group header_group header_group header_group" "menu_group menu_group menu_group menu_group " "table_of_contents table_of_contents table_of_contents table_of_contents" "main_page main_page main_page main_page"; + padding-left:10px; + padding-right:10px; + max-width: 45em; + margin:auto; + } + .menu_item { + display:inline-block; + } + + .menu_group { + position:inherit; + } + + .menu_group ul { + padding:0; + } + + .title { + margin-top:10px; + } + +} + + +blockquote { + border-left: #bbb; + border-left-style: solid; + border-left-width: 0.2em; + padding:0.6em; + padding-left:1em; +} + +blockquote p { + margin:0px; +} + + + +tr:nth-child(even) {background-color: #eee;} + +table { + border-collapse: collapse; + overflow:auto; + width:100%; +} + +.header th { + + text-align: left; + border-bottom-style:solid; + border-left:none; + border-right:none; + + border-bottom-width:1px; +} + +td { + padding:5px; +} + + +.date { + font-size:0.85em; +} diff --git a/notes/csse2002/csse2002.md b/notes/csse2002/csse2002.md new file mode 100644 index 0000000..613c0f5 --- /dev/null +++ b/notes/csse2002/csse2002.md @@ -0,0 +1,1193 @@ +--- +title: CSSE2002 +author: Alistair Michael + + +# Java Collections + + - Stack + - Vector + - List + - Set + - Map + +## Stack + + - Last in first out + - empty() + - empty stack + - peek() + - return reference to top of stack + - pop() + - return top of stack and remove from stack + - push(obj) + - can not store primitive types, there are wrapper classes + - automatically converted on construction + +### Generic Types + + - collections contain generic types. The specific type of a generic is + defined when the object is declared. +## Lists + + - grow and shrink automatically + - walk along + - insert anywhere + - remove an item + - check if an item is in the list + +### Different Implementatiosn + + - LinkedList + - adding and removing items in the middle + - ArrayList + - good for random access + - Vector + - for concurrency + +### Methods + + - size(); the number of elements in the list + +// literally just look up the documentation + +## Iterators + + - more flexible way of moving through the list than using `for each` loops + - Call .iterator() method on another collection to get the iterator. + - starts before the 1st element in the list + - `iterator.next()` returns the next element in the list + - `it.hasNext()` return true if there is another element in the list. + - they can manipulate the contents of the collection + - if you modify one iterator, other iterators on the same object will fail fast + +### Kinds + + - ListIterator; knows more about how to iterate lists `lists list.listIterator()` + - .add() method (at iterators current position) + +## Sets + + - orderless + +### TreeSet + +E needs to implement Comparable + + + +### HashSet + +E neeeds to have sensible hashCode() and equals() + +## Map + + - stores unordered key-value pairs + - `Map`; set type of key and value + - not good for iterating + - should not use mutable objects as keys although it works unless you change + the object after setting it as the key + - don't add a map inside of itself + +# Automated Testing + + - Testing procedures + - test frameworks + - test coverage + +## term + + - unit testing + - regressino testing + - black box + - white box + - test driven development + +# Procedures + + - unit testing + - each unit (class) works) + - integration testing + - components work together + - system testing + - does the whole program work + - acceptance testing + - do the users agree that the system does what it is supposed to + +# Frameworks : xUnit family JUnit for java + + - regression testing + - does new stuff work + - has it broken old things + - blackbox testing + - test the interface does what it is supposed to without knowledge of + the implementation + - does not test whether the implementation has like bad programming + - glass box testing + - knowledge of internal + - code coverage + - tests whether the complex parts of the internal is complex + +# TDD + + - write the tests before the code + - requirements drive the code more directly + - If you find a bug that is not caught by the tests, you can write a unit test, + and add it to the regression test suite + +# Junit4 Framework + + - Write a test class for each object + - all test methods have the `@Test` annotation. + - method names tell you what they do. + - use a piece of code, and use assert methods + - eg `Assert.assertEquals(val, val)` + - Each test method should only test one thing (conceptually / logically) + - `@Before` and `@After` labels put on each test, are used to setup and + tear-down the environment before and after each test. To ensure they don't + interfere with eachother. + +## Assert + + - assertEquals + - assertArrayEquals + - assertFalse / assertTrue + - assertSame / assertNotSame + - fail + - can import all these as static methods so they can be called without the + junit.etst.sjhda.Assert garbage. + +## Setup + + - need junit and hamcrest libraries + +## What to test + + - Input possibilities and features + - Should identify potential problem areas + - Should not be too big + + +## Things to test + + - boundary cases + - 0, negative numbers + - NULL, empty containers, sets lists + - Floating point extremities + - large datasets + - resource access denied, failed + - non-existent resources + +## Code Coverage + + - How much of the code is tested + - statement coverage + - the code is tested by being executed once + - branch coverege + - all possible branching paths that the logic creates are executed + - path coverege + - all paths thru the loop are tested + - for for loops + - init fails + - init test fails + - init test body fails + - init test body iterate fails + - eg recursion is also painful + +# Procedural Abstraction + +- interested in what the methods __do__ + - javadoc clearly explain functionality +- methods need to have one clear function + +Be suspicious of + +- control flow on parameter types +- long and complex methods +- repeated code +- methods that have more than one function +- can change the implementation without changing the specification + +## Specifications + +- javadoc +- allow the implementation to be changed without changing methods that use it +- draw attention to possible consequences of implementation details +- be sufficiently restrictive if implementation is limited. +- the information needed to use the method +- be precise to avoid incorrect implementations +- have **generality** to allow acceptable alternative versions +- have **clarity**, utilise formal languages, + +## Contract + +Meaning if the caller meets the precondition, the method guarantees that postcondition will be true. + +```java +/** +@require precondition +@ensure postcondition +*/ +``` +Can use `assert` to ensure this at compile time, and can also use it as a test system at runtime with special conditions. + +# Defensive Programming + +Assume that input is bad. + +- Explicitly check for invalid inputs + - Ensure that no dangerous behaviour results +- Always apply it to data coming from outside of the program, and treat things coming from inside the program as valid. + +## Null Problems + +- Always reject `null`, because it can easily appear inside the program. + + +# Substitution Principle, Specifications and Inheritance + +> An object of a subclass type can be used at any point where a super-class's method is expected + +- WRT to Contracts, the child is bound by the contracts with the parent. + - Parents contract must be sufficient for child's contract + - ONLY can be _weakening_ of the precondition + +# Miscellaneous Java + +## Instanceof + +expression `instanceof` type + +Returns true if the value of *expression* is an instance of type *type*. + +### Questionable Uses + +- Use it in conditionals to determine what methods should be used on that thing. + - Otherwise: use encapsulation + - Put the code in the classes themselves so you do not need to use a conditional to determine which class is being used + - use a generic interface + - use helper methods in the classes + +## Newlines + +- `println` will always use the correct newline character for the operating system (at runtine) + - Unix uses "\\n" + - Windows uses "\\r\\n" +- `System.lineSeparator()` and `String.format("%n")` will return the correct line separator. + + +## Pre / post increment + +- The same as C + + expression x= returns + ++x 1 1 + x++ 2 1 + x-- 1 2 + --x 0 0 + +## Ternary + + int a = (conditional) ? do if true : do if false; + +## Final keyword + +`final` has two meanings depending on its context. + +### Variables + +```java +public void stuff() { + final int x = 5; + x = 4; // compile error +} +``` + +In the case of member variables, they must be set *once* in the constructor, and nowhere else. + +```java +public class Chem { + public static final double AVAGADRO = 3.023e23; +} +``` + +### References + +It means that the reference value cannot be changed, *not* that the object it refers to cannot be changed. + +```java +final Test x = new Test(10); +x.q = 15; +``` + +Will compile, you can change the state of the object without changing it's identity. + +// What about the objects hash value, for maps etc. That would probably be weird. + +### Methods + +A method that is labelled final cannot be overwritten in a subclass. + +### Classes + +- Cannot create new classes that inherit from final classes +- Member variables cannot be changed once initialised + +## Abstract + +An abstract class is a *class* that it is not meaningful to create an object of, but is useful in the structure of the class heirachy. An abstract class does not have to have abstract methods. + +An abstract method has no implementation, it exists to be defined later. + +`public abstract void doStuff();` + +If a class contains abstract methods, the class must also be declared abstract. And abstract classes cannot be instantiated, although they can be extended. + +This is used for defining interfaces. + +## Short Circuit evaluation + +The entirety of a conditional statement is not computed if its value can be determined earlier. + +`True || f(x) || g(x)` will not execute f or g. + +`g(x) && False && g(x)`: `g(x)` will never get executed. + +# StringBuilder / StringBuffer + +`StringBuffer` is older and slower, but threadsafe. + +Strings are immutable so `+=` on strings requires re-allocating memory, doing it in a loop is very inefficient. + +`StringBuilder` is **not** threadsafe. + +```java +StringBuilder sb = new StringBuilder("starting text"); +for (int i = 0; i ++; i < 10) { + sb.append(i); +} +System.out.println(sb.toString()); // need to use toString() + //to get the string value +``` + +# Copying (`clone`) + +Objects are always manipulated by reference, by default. + +```java +Objext x = y // makes x refer to the same thing as y +``` + +Object class has a protected `.clone()` method, since it is protected some work is required to be able to use it. This is to ensure it is implemented properly for the classes you are truing to use it for, since reference members may also need to be copied. + +```java +public class MessageHolder implements Cloneable { // need to implement the + // Cloneable interface + private MessageBuilder msg; + //... + @Override + public Object clone() { + try { // have to catch CloneNotSupportedException + MessageHolder nm = super.clone(); + // we can call clone() here because this class has the + // Cloneable marker interface set, indicating it is + // allowed + nm.msg = new StringBuilder(msg.toString); + return nm; + } catch (CloneNotSupportedException e) { + } + return null; + } +} +``` + +- Typically you can just call `Object.clone()` +- Deep-copy is not a concern for immutable objects. +- Deep-copy is general expensive + +Note that: + +- `x.clone != x` +- `x.clone.getClass() == x.getClass()` +- `x.clone().equals(x)` should usually true, but there are practical exceptions + +# Properties of `.equals()` + +- reflexive +- symmetric (in terms of the same class type) +- transitive +- deterministic, should always give the same result, unless the objects' state changes +- `x.equals(null)` is false + +Be mindful of the comparability of the classes whose `.equals()` method you are calling. + +- If you override `.equals()` you also need to override `.hashCode()` +- `x.equals(y)` $\implies$ `x.hashCode() == y.hashCode()` +- `.equals()` can refer to object **state** or object **identity** + - you need to make a decision on whether to include the mutable parts of the class in computing the hashcode accordingly. + - including mutable state in the hashcode means changing the state + changes whether `.equals()` is true for a copy with different state. + +It is probably better to use `.equals()` for state, since the reference provides the object's identity. + +## Hash Codes + +Returns a numeric value for some given values. + +- has to be deterministic +- may not neccessarily uniquely identify an object + - collisions should be rare and able to be managed + - not as good for determining object identity +- `x.equals(y)` $\implies$ `x.hashCode() == y.hashCode()` +- Must be efficient, for fast lookup + - used for looking up items quickly + - comparing passwords without comparing the actual values +- if it is being used as a lookup key + - does changing the state make it a different object? + +# Input-Output + +## Scanners + +There is a collection of scanner object methods that can be used to get +specific items from these filetypes. + +[See Javadoc](https://docs.oracle.com/en/java/javase/13/docs/api/java.base/java/util/Scanner.html) + +```java +import java.util.Scanner; +// ... +Scanner input = new Scanner(System.in); +Scanner file = new Scanner(new File("filename.txt")); + +int total = 0; +while (true) { + total += input.nextInt(); +} +``` + +## Encoding + +Java uses unicode, chars are not neccessarily single bytes and there is no +single automatic way to translate between bytes and UTF-X chars. + +So I'm assuming their environment system is less of a tranwreck than C's. + +1. Binary + - More compact + - Sensitive to system differences + - Otherwise it is more direct +2. Text + - Human readable + - Requires parseing and markup delimiters etc. + - Not really efficient for machine-interpretation as a middle + abstraction + +## Streams + +Abstractions for input and output + +- Works with multiple origins of input; keyboard, disk, files, network +- Buffering +- Unified interface for different types of input/output data + +### `java.io.InputStream` + +- `FileInputStream`; for files +- `ByteArrayInputStream`; get bytes from an array in memory as an input + stream + +Methods that use InputStreams should ask for an object of the `InputStream` +class (interface style calss), not its children classes. + +Low-level `read()` + +### Buffered input + +`BufferedInputStream` is a class that wraps `InputStream` to provide buffering to improve performance. It can read a single character, a specific number of characters, or a line. For other methods see [javadoc](https://docs.oracle.com/en/java/javase/13/docs/api/java.base/java/io/BufferedReader.html) + +```java +try { + InputStream is = new BufferedInputStream(new FileInputStream("dat")); + String s = is.readLine(); +} catch (FileNotFoundException e) { + // fail +} finally { + is.close(); +} +``` + +You have to then parse the returned string with string-parsing functions. + + +### Readers + +`java.io.Reader` is a base class for objects which read `InputStreams`. + +`new FileReader("filename")` + +$\approx$ `new InputStreamReader(new FileInputStream("filename"))` + +### Try with Resources + +Readers and streams need to be closed. Can use `try` `catch` and `finally` to close files at the end, however `close()` can also throw exceptions hence Java provides `try catch` syntax that automatically handles file resources. + +```java +try (BufferedReader r = new BufferedReader(new FileReader("file"))) { + r.readLine(); +} catch (IOException e) { + // handle +} +``` + +### Parsers + +Each simple type (`int, char...`) has a wrapper class and these have string parsing methods. + +```java +int i = Interger.parseInt("1"); +``` + +Now $i = 1$. + +## Output + +For the most part just replace `Input` with `Output` and `Reader` with `Writer`. + +The standard output is `System.out`, standard error is `System.err`, it is a print stream that provides print methods. + +- `print()`, `println()` +- `flush()` flushes output buffer +- `printf(String format, Object args)` Use C-style format strings. +- `write(byte[] buf, int off, int len)` write `len` bytes from a byte array. + +### PrintWriter + +`PrintWriter` is a better tool for writing characters. It can write to any type of Stream or file. Look at the constructors in the javadoc. + +You often have to flush the output because otherwise it only gets sent once the output is full, or if it is closed. + +This is important for + +- interactive programs where you prompt for input +- debugging where you need outputs to be in order and up to date. + +## Serialisation + +Converting a java object to bytes. For a class to be serialisable it must: + +- Must implement `Serializable` interface +- Any objects referenced must also be `Serializable` +- Object streams can read and write to any type of `Stream`---to files, networks etc. +- Read using `ObjectInputStream` +- Write using `ObjectOutputStream` + +```java +ObjectOutputStream oos = new ObjectOutputStream(new FileOutputStream("file")); +oos.write(new Integer(5)); +oos.close(); +ObjectInputStream ois = new ObjectInputStream(new FileInputStream("file")); +Integer five = ois.readObject(); +``` + +### Limitations + +- If you change the class after saving a serialisable object and try to read it again it will produce an version error. +- Deserialising untrusted data is very unsafe / insecure + + +# Parsing Text Files + +Often need to + +- find delimiters +- split strings on delimiters +- convert strings to primitive types +- construct new objects based on parameters from a file + +## Split Strings + +```java +String[] splitstrings = "a b c".split("delimiter"); +String[] splitstrings = "a b c".split("delimiter"); + +String s = "lalala".substring(0, 2); +// s = la +``` + +## Regular Expressions + +Exist in java (`pattern`) + +## Converting Strings + +```java +Integer.parseInt() +Float.parseFloat() +Double.parseDouble() +Boolean.parseBoolean() // converts to false for anything other than true +``` + +All number types return `NumberFormatException` if the number format is wrong. + +## Objects + +Usually putting the parsing code in an initialiser is not appropriate, it doesnt separate IO classes from logic classes, and it requires files to be organised as one class to a file or other complexity. + +It is better to have another IO class that parses the file, then calls the objec initialisers. + +## File Objects + +Creating, renaming, moving etc; filsystem manipulations, not manipulating file objects (that is through the stream abstraction). + +`java.nio.File` package contains + +- `java.nio.file.Path` +- `java.nio.file.Files` + +## Exit + +`System.exit(1); // exit with an error code ` + +Default exit status is 0, which means success. + +# JavaFX + +Good example of Object Oriented, and event-driven programming. + +It has newer features than older GUI libraries, it automatically manages threads, etc. + +Need to add a java module through `VM options` in IntelliJ (to add jvm arguments). + +Create a class +- Extends `javafx.application.Application` +- Override the `start()` method + +## Stage + +A **stage** is the main window which displays a single **Scene** which holds all the widgets. + +The scene holds a heirachial scene-graph that holds GUI elements. + +## Layout Panes + +- groups nodes (GUI Elements) +- can use column, row ordering to place nodes within a grid + - `grid.add(new Label("hello"), col,row)` + +## Controls + +Buttons, labels, areas, textfields etc + +## Panes + +Boxes that hold groups of nodes and can be laid out as nodes themselves. + +`BorderPane()`: a pane with borders + +## Canvas + +Draw shapes and things in a space. + +Look at examples its not very complex. + +## EventHandlers + +Interactions with the gui generate events, and program functions also generate events. + +We only consider `ActionEvent` in `javafx.event` for handling gui events. + +For something to happen as a result of an Event, there needs to be an `EventHandler` associated with that event. + +`EventHandler` is an interface which we use to implement our event handlers. + +They can be connected to buttons with `setOnAction` + +```java + +// package private class, can be in the same file as ButtonDemo +// note that package private classes still generate .class files so +// you have to be careful of name conflicts in the package scope still +class ButtonDoer implements EventHandler { + public void handle(ActionEvent e) { + System.out.println("Send to console"); + } +} + +public class ButtonDemo extends javafx.application.Application { + ... + public void start() { + ... + Button button = new Button("useless button"); + button.setOnAction(new ButtonDoer()); + ... + } +} +``` + +### Better Design + +- link the events and what they do more loosely, + - to avoid putting application logic in event handlers + - use inner classes instead of package private classes for event handlers for better encapsulation + +```java +public class ButtonDemo extends javafx.application.Application { + private Stage stage; + + public static void main(String[] args) { + Launch(args); + } + + public void start(Stage stage) { + this.stage = stage; + Button button = new Button("useless button"); + button.setOnAction(new ButtonDoer()); + + GridPane grid = new GridPane(); + grid.add(button, 0,0); + Scene scene = new Scene(grid); + + stage.setScene(scene); + stage.show(); + } + + public void respondToButton() { + // do stuff + } + + // no one else can do actions that aren't tied to events + // logic is encapsulated with the gui interactions + private class ButtonDoer implements EventHandler { + public void handle (ActionEvent e) { + repondToButton(); + } + } +} +``` + +- can use a single handler for many buttons, make buttons private memebers and switch over `event.getSource() == button1`. + +- nested classes are non-examinable + + +### Anonymous Classes + +Allows you to create an event handler immediately to do the things that you want the button to do. + +```java +button.setOnAction(new EventHandler() { + public void handle(ActionEvent e) { + respondToButton(); + } + }// end of class +button2.setOnAction(new EventHandler() { + public void handle(ActionEvent e) { + respondToButton2(); + } + }// end of class +); +``` + +## TextFields + +For entering text + +```java +tf = new TextField(); +String text = tf.getText(); +tf.setText("Hello World") + +``` + +## Dialogs + +For confirmation prompts etc, there are pre-designed dialogue types. + +```java + +public void doButton() { + TextInputDialog inputDialog = new TextInputDialog(); + inputDialog.initStyle(StageStyle.DECORATED); + inputDialog.setHeaderText("Hello World"); + + ImageView iv = new ImageView(new Image("photo.png")); + iv.setFitHeight(40); + iv.setPreserveRatio(true); + inputDialog.setGraphic(iv); + + Optional result = inputDialog.showAndWait(); + if (result.isPresent()) { + System.out.println(result.get()) + } +} + +``` + +### FileChooserDialog + +```java +public class FileChooserDemo extends javafx.application.Application { + private Stage stage + private FileChooser fileChooser = new FileChooser(); + + private void respondToButton() { + File file = fileChooser.showOpenDialog(stage); + if (file != null) { + openFile(file); + } + } + + private void openFile (File file) { + // do stuff + } +} + +``` + +# Design Quality + +## Cohesion + +- Does a class/object make sense as a single entity +- Do all the data and methods fit together for a single purpose or abstract + concept + - minimises extraneous ideas to understand + - simpler unit to test + - modification is easier + +## Coupling + +- How strongly a class depends on another class + - How much of the internal state is passed to another class through + methods? + - How many methods of other classes are called? + - Can another object influence the flow of control in this object? +- Low coupling is preferable + - highly coupled classes are harder to write and test in isolation + - high coupling can indicate that a class has been split when it + shouldn't have been + +### Law of Demeter + +The target of a message can only be one of the following objects: +- The methods object (`this`) +- An object passed as a parameter +- An object referred to by an attribute of the object + - Weak form of Demeter: and anything in that collection o +- An object created by the method +- Object referred to by a global variable + +Avoid chained messages `a.getB().getC().doSomething()` +- this increases coupling + +## Mindless Classes + +- A class should manage its own flow of control + - restrict other classes from accessing its state + - data members are private + - minimise accessor methods +- The logic that is applied to the classes data should be within the class, + not in other classes that access the data through getters +- These tend to have low cohesion and high coupling + +## God Classes + +- Classes that do everything within their context and contain all the data +- High coupling and low cohesion + +## Mitigation + +A class should only depend on the public interface of another class. + +- Attributes should only belong to one class. + - This is often violated when classes have many accessors +- A class should represent a single abstract concept + - Unrelated data and functionality should be factored out to other + classes +- system logic should arise from the classes working to gether to implement + behaviour, it should be shared between classes uniformly + +## Fragile Super Class + +- Inheritance creates strong coupling between the superclass and the + subclass +- Does the design rely on the knowledge of the private methods of the + superclas; changing the privates in the superclass should not change + behaviour or cause problems for the subclasses. +- Public or protected methods should only change behaviour if the + specification of their functionality changes + - should usually be overridden in the subclasses + +### Downcall + +- Calling a method from a childs class + +# GUI Design + +- Model + - Conceptual things: entities, in the system + - State + - invariants + - methods that enforce the invariants +- View + - A presentation of the state, and a way to interact with it + +## Why MVC? + +- Decompose the task +- Separate interface from model + - Can change the UI independently of the model + - Might want to support multiple interfaces + - GUIs, web, mobile screenreaders +- Responsibility for enforcing invariants should be in only one place + +## How MVC: Challenges + +View and Model need to communicate +- find current state +- may need to notify the interface for when state changes + +- The user has to get information and send commands +- The interface needs to know if the model has changed + +We want them to be loosely coupled, so the model shouldn't know about the view. + +- one way access from interface to model is satisfactory only for a small model and interface. It is generally not safe to assume that the model is synchronous with the view. + +- Dont want to make the user wait for the model to sort itself out +- Multiple interfaces being connected could easily make a deadlock +- Model generally is updated independently to the actions happening in the interface, from things like external input, network input, or just calculating results of requested functions + +## Callbacks and Observers + +- User Interfaces implement an `interface` that the model knows about, and which it uses to tell the interface that the model has changed, and details about what has changed + - The interface can then ask the model for further information only when there is new information available, without having to poll constantly to ask + - So UI updates are driven by events sent by the model + +## Input Processing + +1. Getting Values from UI components to assemble a method call + - maybe the processing to generate the call to the model, needs to be in a separate class if it is very complex +2. Making changes to the model based on that call + - belongs in the model + +## Model View Controller + +- View: + - sends messages to the controller based on User interaction + - recieves callbacks from the model and queries details about state +- Controller: + - recieves requests from the view and figures out what to do to the model in response +- Model: + - Stores state, does program logic, and implements functionality + - Tells the view when it has changed + +### Model View Adapter + +Isolate the view from the model using an adapter + +- View + - interacts with user + - sends events to an adapter + - recieves updates from adapter +- Adapter + - reads state from model + - manipulates model + - recieves callbacks from model about state + - sends updates to the view +- Model: + - Stores state, does program logic, and implements functionality + - Tells the adapter when it has changed + +An example of an Adapter might be a REST API to a server-side functionality + +### Model View Presenter + +Same as MVA except the view and presenter is more tightly coupled. Every view +class has its own presenter class. + +Presenter manages the display, not just bridging between view requests and the +model, so it can do more complex things with the view to allow it to be more +responsive and intelligent, without having a lot of that complexity in the +actual UI code. + +### Model View ViewModel + +ViewModel: +- encapsulates the state (of the model) that is displayed by the view +- tight coupling with the view: two way binding +- user changing state immediately updates viewmodel, +- Is provided by libraries + - less boilerplate code required for implementing event-sending between the + view and controller and model + +- the most restricted version here + - Cannot easily have different views + +# Generic Programming + +- Using `Object` is bad because it has no type safety. +- Generic types solve this, since you can use parameterised types. + - still has compile-time type checking + - don't need to cast in and out + +```java +public class X Boo { + private T myFirstVariable; + // T is the type of myFirstVariable + // ... constructor goes here ... + ... +} +``` + +You can now instantiate the class and give it a specific type. + +```java +Boo = new Boo<>(); +``` + +You can an arbitrary number of type parameters in clases. + +There is a naming convention. + +- E: Element (in collections) +- K: Key +- N: number +- T: Type +- V: Value +- S,U,V... Additional types + +## Generic Methods + +Do not have to be in a generic class + +```java +public static int count(T[] array, T value) { + for (T item : array) { + ; + + } +} +``` + +## Bounded Type Parameters + +- Types can be restricted to being a subset of classes. + +```java +public class {...} +``` + +This allows anything that is a sub-class of Number. + + +## Generic Inheritance + +```java +class X extends class Y {} +class X extends class Y {} +``` + +- note that using a subclass as a generic parameter, does not imply that the + classes themselves have an inheritance relationship. + +## Wildcards + +`?` Represents an unknown type, but not a specific unknown type. They are useful +when generic types are needed but they do not need to be named and referenced. + +`?` - any type +`? extends Type` - any subclass of `Type` +`? super Type` - any superclass of `Type` + +## Implementation + +Type Erasure: + +Generics are handled at compile time by replacing the generic types with `Object`, +replacing bounded generics with the bounding `Type` and adding casts and +bridging methods. + +Java only knows that types are at runtime, not at compile time. + +## Restrictions on Generics + +- Cannot be primitives +- Cannot instantiate generics: `new T()` +- Cannot be static +- Cannot have arrays of generic types +- No generic exceptions +- There are restrictions on overloading + +# Object Oriented Design + +## Textual Analysis + +Considering the description of the system + +Identify elements to be modelled. +- nouns -> data, categories -> attributes, classes +- verbs -> processes -> methods + +Be mindful of relevance, relatedness, and relationships between the nouns in the +model. + +## Common Class Patterns + +Find candidate classes using classification theory: + +- Concepts +- Events +- Organisation +- People +- Place + +are all class-candidates. + +## Class-Responsibilities-Collaborators + +After identifying candidate-classes, consider the behaviour and interactions +between classes. + +Using humans, roleplay to model how the classes should deliver the system +behavoir. + +For pinning down the responsibilities of a class, and defining the collaborators +that facilitate their interaction. + +This helps develop a shared understanding of the system design. + +[Reading](https://c2.com/doc/oopsla89/paper.html) + +### OOPSLA89 Paper Summary + +Responsibilities are problems to be solved. The responsibilities of an object +are active verb phrases. + +All objects exist in relationships to other objects. Collaborators are objects +that send messages, or are sent messages, in order to satisfy their +responsibilities. + +Make cards like this + +![Image: 3 index cards showing a model, view and controller. The top of the card is the +Class name and below it a list of responsibilities](http://c2.com/doc/oopsla89/fig2.gif) + +The first line is the class name, followed by a list of responsibilties. + +Design the model by role playing the execution of the model from some starting +point in the model: + +> start with only one or two obvious cards and start playing "what-if". If the +> situation calls for a responsibility not already covered by one of the objects +> we either add the responsibility to one of the objects, or create a new object +> to address that responsibility + +Only create objects to address the immediate need, not a hypothetical future +need. If they are needed in the future, then they will be created in the future. + + + + + diff --git a/notes/csse2002/csse2002.pdf b/notes/csse2002/csse2002.pdf new file mode 100644 index 0000000..748789d Binary files /dev/null and b/notes/csse2002/csse2002.pdf differ diff --git a/notes/csse2002/fig2.gif b/notes/csse2002/fig2.gif new file mode 100644 index 0000000..a19750c Binary files /dev/null and b/notes/csse2002/fig2.gif differ diff --git a/notes/csse2002/index.md b/notes/csse2002/index.md new file mode 100644 index 0000000..096ff70 --- /dev/null +++ b/notes/csse2002/index.md @@ -0,0 +1,1632 @@ +--- +title: CSSE2002 +author: Alistair Michael + +--- + +[pdf version](https://alistairmichael.com/notes/csse2002/csse2002.pdf) + +The markdown source for this page is available +[here](https://git.topost.net/alistair/csse2002-notes/src/branch/master). + +Contributions are welcome. + + +--- + +# Language + +## Variables + +- Primitives vs Classes +- References +- Stack vs Heap + +All local variables (references and primitives) are stored on the stack. + +Heap memory exists independently of the callstack, and all objects are stored on +the heap. Hava has a garbage collector which deletes objects when they are no +longer being held. + +### References + +This means _all objects in java are held by reference_. + +So for objects equality has this meaning: + +`a = b` : `a` now refers to the same thing as `b` + +`a == b` : Does `a` refer to the same piece of memory as `b`? + +While for primitive types `a = b` assigns a the value of b, and `a == b` +compares the value of `a` and `b`. + +If you want to compare the value of objects you use `a.equals(b)`. + +So objects are always passed by reference and primitives are always passed by +value. + +Note: To compare floating point values always use `Math.abs(a - b) < threshold `. + +### Mutability + +Strings are immutable, for efficiency, the code + +```java +String a = "AAA"; +String b = "AAA"; +``` + +Will produce two variables which both reference the same string. + +In general, string-modification methods return a new reference to a new string. + +Meanwhile, arrays and Lists are mutable, their contents can be changed. + +## Classes + +Inheritance represents a specialisation relationship between parent and child, +while interfaces separate implementations of a similar abstraction. + +Interfaces define how a to interact with a class or object. + +- when and why would you define an interface instead of a superclass and vice + versa +- What is the purpose of `@override`-ing a method. +- What is the benefit of polymorphism and dynamic binding for design. + +### Overloading + +Methods are resolved at compile-time so for the following code: + +```java +public class A { + public int foo(Object o) { + return 1; + } +} + +public class B extends A { + public int foo(Object o) { + return 2; + } + + public int foo(int i) { + return 3; + } +} +``` + +Running the following code will return `2`, not `3`. + +```java +Object o = new A(); +A a1 = new A(); +A a2 = new B(); // B is implicitly upcast to A +a2.foo(20); // resolves to B.foo(Object) +``` + +Because `a2` is declared as type `A`, the compiler only knows about the method +that takes an object. + +Java will only let you access part of an object if it is sure it exists, at +__compile time__. However an objects type is computed at compile time will +determine what you can do with it. + +When executing a method, java finds the closest up the class heirachy, according +to the type it thinks that object is, (according to cast or declaration) that +matches the method signature (name + argument types and order). Then when +calling the method, it calls whatever function reference is contained in the +object actually stored by that variable. + +### Interfaces + +Defines which methods a class must implement. + +### Casting + +Casting changes how the compiler interprets a specific object, ie what type it +thinks it is. + +Upcasts can be implicit, but downcasts cannot. This means you can pass a `String` +to a method that expects `Object` without explicitly casting, for example. + +You can implicitly cast from `float` to `double`, since a float +has less precision and they have a common super-class. + +## Exceptions + +Exceptions are used to recover from unexpected problems or bad state. + +_Checked Exceptions_ (`IOException`) are checked for at compile time so are +mandatory to handle if it is possible for a method to cause them. They can be +handled either by adding them to the method signature to be handled elsewhere, +or catching them in a try-catch block. + + +| Exception Kind | Parent | Cause | +|---------------------------|------------------|--------------------------------------------------| +| Error | Throwable | An error in the program execution, unrecoverable | +| IOException | Exception | Input-output Error | +| FileNotFoundException | IOException | Cannot find a file | +| RuntimeException | Exception | An exception at runtime | +| ArithmeticException | RuntimeException | Divide by 0, and FP errors | +| NullPointerException | RuntimeException | Doing something with an unintialised reference | +| IllegalArgumentException | RuntimeException | A method is invoked with wrong arguments | +| IllegalStateException | RuntimeException | A method invoked at the wrong time | +| IndexOutOfBoundsException | RuntimeException | Accesing an array element with an invalid index. | +| ClassCastException | RuntimeException | Performing an impossible cast | + + +See also: [Try With resources](#try-with-resources) + + +# Java Collections + + - can not store primitive types, there are wrapper classes to use + - `Integer`, `Boolean`, `Byte`, `Double`, `Character`, `Short`, `Long`, + `Double` + - automatically converted on construction + +## Stack + + - Last in first out + - empty() + - empty stack + - peek() + - return reference to top of stack + - pop() + - return top of stack and remove from stack + - push(obj) + +### Generic Types + + - collections contain generic types. The specific type of a generic is + defined when the object is declared. + +## Lists + + - grow and shrink automatically + - walk along + - insert anywhere + - remove an item + - check if an item is in the list + +### Different Implementatiosn + + - LinkedList + - adding and removing items in the middle + - ArrayList + - good for random access + - Vector + - for concurrency + +### Methods + + - size(); the number of elements in the list + +// literally just look up the documentation + +## Iterators + + - more flexible way of moving through the list than using `for each` loops + - Call .iterator() method on another collection to get the iterator. + - starts before the 1st element in the list + - `iterator.next()` returns the next element in the list + - `it.hasNext()` return true if there is another element in the list. + - they can manipulate the contents of the collection + - if you modify one iterator, other iterators on the same object will fail fast + +### Kinds + + - ListIterator; knows more about how to iterate lists `lists list.listIterator()` + - .add() method (at iterators current position) + +## Lists + +- ArrayList LinkedList et al +- Can store duplicates +- Automatically grows and shrinks depending on what you do to it +- Ordered +- Iterable + +## Sets + +- An orderless collection of objects +- Every value must be unique + +### TreeSet + +E needs to implement Comparable + +### HashSet + +E neeeds to implement hashCode() and equals(), and have the label. + +## Map + + - stores unordered key-value pairs + - `Map`; set type of key and value + - not good for iterating + - should not use mutable objects as keys although it works unless you change + the object after setting it as the key + - All _keys_ must be unique, but not the values. + +# Automated Testing + +## Terms + + - unit testing + - regression testing + - black box + - white box + - test driven development + +## Procedures + + - unit testing + - each unit (class) works) + - integration testing + - components work together + - system testing + - does the whole program work + - acceptance testing + - do the users agree that the system does what it is supposed to + + - regression testing + - does new stuff work + - has it broken old things + - blackbox testing + - test the interface does what it is supposed to without knowledge of + the implementation + - does not test whether the implementation has like bad programming + - glass box testing + - knowledge of internal + - code coverage + - tests whether the complex parts of the internal is complex + +## Test Driven Design + + - write the tests before the code + - requirements drive the code more directly + - If you find a bug that is not caught by the tests, you can write a unit test, + and add it to the regression test suite + +## Junit4 Framework + + - Write a test class for each object + - all test methods have the `@Test` annotation. + - method names tell you what they do. + - use a piece of code, and use assert methods, for example + `Assert.assertEquals(val, val)` + - Each test method should only test one thing (conceptually / logically) + - `@Before` and `@After` labels put on each test, are used to setup and + tear-down the environment before and after each test. To ensure they don't + interfere with eachother. + +## Assert + + - assertEquals + - assertArrayEquals + - assertFalse / assertTrue + - assertSame / assertNotSame + - fail + - can import all these as static methods so they can be called without the + junit.etst.sjhda.Assert garbage. + +## Setup + + - need junit and hamcrest libraries + +## What to test + + - Input possibilities and features + - Should identify potential problem areas + - Should not be too big + + +## Things to test + + - boundary cases + - 0, negative numbers + - NULL, empty containers, sets lists + - Floating point extremities + - large datasets + - resource access denied, failed + - non-existent resources + +## Code Coverage + + - How much of the code is tested + - statement coverage + - the code is tested by being executed once + - branch coverege + - all possible branching paths that the logic creates are executed + - path coverege + - all paths thru the loop are tested + - for for loops + - init fails + - init test fails + - init test body fails + - init test body iterate fails + - eg recursion is also painful + +## Procedural Abstraction + +- interested in what the methods __do__ + - javadoc clearly explain functionality +- methods need to have one clear function + +Be suspicious of + +- control flow on parameter types +- long and complex methods +- repeated code +- methods that have more than one function +- can change the implementation without changing the specification + +### Specifications + +- javadoc +- allow the implementation to be changed without changing methods that use it +- draw attention to possible consequences of implementation details +- be sufficiently restrictive if implementation is limited. +- the information needed to use the method +- be precise to avoid incorrect implementations +- have **generality** to allow acceptable alternative versions +- have **clarity**: utilise formal languages, + +## Contract-driven design + +Meaning if the caller meets the precondition, the method guarantees that +postcondition will be true. + +```java +/** +@require precondition +@ensure postcondition +*/ +``` + +Can use java boolean expressions to formally and precisely specify conditions as +well as using the following mathematical signifiers. + +- `\result` return value +- `a ==> b` implication +- `a <==> b` if and only if +- `\old(x)` the value of `x` before the method +- `\forall C c` for all objects c in class `C` +- `\exists C c` there exists an object of class `C` + +Can use `assert` to ensure this at compile time, and can also use it as a test +system at runtime with special conditions. These can be checked at runtime +using `java -ea ClassName`. + +## Defensive Programming + +Assume that input is bad. + +- Explicitly check for invalid inputs + - Ensure that no dangerous behaviour results +- Always apply it to data coming from outside of the program, and treat things +- coming from inside the program as valid. + +- Always reject `null`, because it can easily appear inside the program. + +## Substitution Principle + +> An object of a subclass type can be used at any point where a super-class's +> method is expected + +- WRT to Contracts, the child is bound by the contracts with the parent. + - Parents contract must be sufficient for child's contract. + - The child contract can only be a _weakening_ of the parent's precondition, + that is, the pre-condition may be weaker and the post-condition stronger, + but the precondition cannot be stronger, nor the post-condition weaker. + - the child must not reject any states the parent would allow + (precondition) + - the child must not have a result that the parent does not ensure + +Contracts are 'inherited': if you are overriding a sub-class's method, it must +still follow the contracts of the parent, and the original version it is +overriding. + + + + +# Miscellaneous Java + +## Instanceof + +expression `instanceof` type + +Returns true if the value of *expression* is an instance of type *type*. + +### Questionable Uses + +- Use it in conditionals to determine what methods should be used on that thing. + - Otherwise: use encapsulation + - Put the code in the classes themselves so you do not need to use a + conditional to determine which class is being used + - use a generic interface + - use helper methods in the classes + +## Newlines + +- `println` will always use the correct newline character for the operating + system (at runtine) + - Unix uses "\\n" + - Windows uses "\\r\\n" +- `System.lineSeparator()` and `String.format("%n")` will return the correct + line separator. + + +## Pre / post increment + +- The same as C + +Starting with x = 0: + +``` +expression x = returns +++x 1 1 +x++ 2 1 +x-- 1 2 +--x 0 0 +``` + +## Ternary + + int a = (conditional) ? do if true : do if false; + +## Final keyword + +`final` has two meanings depending on its context. + +### Variables + +```java +public void stuff() { + final int x = 5; + x = 4; // compile error +} +``` + +In the case of member variables, they must be set *once* in the constructor, and nowhere else. + +```java +public class Chem { + public static final double AVAGADRO = 3.023e23; +} +``` + +### References + +It means that the reference value cannot be changed, *not* that the object it refers to cannot be changed. + +```java +final Test x = new Test(10); +x.q = 15; +``` + +Will compile, you can change the state of the object without changing it's identity. + +// What about the objects hash value, for maps etc. That would probably be weird. + +### Methods + +A method that is labelled final cannot be overwritten in a subclass. + +### Classes + +- Cannot create new classes that inherit from final classes +- Member variables cannot be changed once initialised + +## Abstract + +An abstract class is a *class* that it is not meaningful to create an object of, but is useful in the structure of the class heirachy. An abstract class does not have to have abstract methods. + +An abstract method has no implementation, it exists to be defined later. + +`public abstract void doStuff();` + +If a class contains abstract methods, the class must also be declared abstract. And abstract classes cannot be instantiated, although they can be extended. + +This is used for defining interfaces. + +## Short Circuit evaluation + +The entirety of a conditional statement is not computed if its value can be determined earlier. + +`True || f(x) || g(x)` will not execute f or g. + +`g(x) && False && g(x)`: `g(x)` will never get executed. + +# StringBuilder / StringBuffer + +`StringBuffer` is older and slower, but threadsafe. + +Strings are immutable so `+=` on strings requires re-allocating memory, doing it in a loop is very inefficient. + +`StringBuilder` is **not** threadsafe. + +```java +StringBuilder sb = new StringBuilder("starting text"); +for (int i = 0; i ++; i < 10) { + sb.append(i); +} +System.out.println(sb.toString()); // need to use toString() + //to get the string value +``` + +# Copying (`clone`) + +Objects are always manipulated by reference, by default. + +```java +Objext x = y // makes x refer to the same thing as y +``` + +Object class has a protected `.clone()` method, since it is protected some work +is required to be able to use it. This is to ensure it is implemented properly +for the classes you are truing to use it for, since reference members may also +need to be copied. + +```java +public class MessageHolder implements Cloneable { // need to implement + // Cloneable interface + private MessageBuilder msg; + //... + @Override + public Object clone() { + try { // have to catch CloneNotSupportedException + MessageHolder nm = super.clone(); + // we can call clone() here because this class has the + // Cloneable marker interface set, indicating it is + // allowed + nm.msg = new StringBuilder(msg.toString); + return nm; + } catch (CloneNotSupportedException e) { + } + return null; + } +} +``` + +- Typically you can just call `Object.clone()` +- Deep-copy is not a concern for immutable objects. +- Deep-copy is general expensive + +Note that: + +- `x.clone != x` +- `x.clone.getClass() == x.getClass()` +- `x.clone().equals(x)` should usually be true, but there are practical + exceptions + +# Properties of `.equals()` + +- reflexive +- symmetric (in terms of the same class type) +- transitive +- deterministic, should always give the same result, unless the objects' state changes +- `x.equals(null)` is false + +Be mindful of the comparability of the classes whose `.equals()` method you are calling. + +- If you override `.equals()` you also need to override `.hashCode()` +- `x.equals(y)` $\implies$ `x.hashCode() == y.hashCode()` +- `.equals()` can refer to object **state** or object **identity** + - you need to make a decision on whether to include the mutable parts of the class in computing the hashcode accordingly. + - including mutable state in the hashcode means changing the state + changes whether `.equals()` is true for a copy with different state. + +It is probably better to use `.equals()` for state, since the reference provides the object's identity. + +## Hash Codes + +Returns a numeric value for some given values. + +- has to be deterministic +- may not neccessarily uniquely identify an object + - collisions should be rare and able to be managed + - not as good for determining object identity +- `x.equals(y)` $\implies$ `x.hashCode() == y.hashCode()` +- Must be efficient, for fast lookup + - used for looking up items quickly + - comparing passwords without comparing the actual values +- if it is being used as a lookup key + - does changing the state make it a different object? + +# Input-Output + +## Scanners + +There is a collection of scanner object methods that can be used to get +specific items from these filetypes. + +[See Javadoc](https://docs.oracle.com/en/java/javase/13/docs/api/java.base/java/util/Scanner.html) + +```java +import java.util.Scanner; +// ... +Scanner input = new Scanner(System.in); +Scanner file = new Scanner(new File("filename.txt")); + +int total = 0; +while (true) { + total += input.nextInt(); +} +``` + +## Encoding + +Java uses unicode, chars are not neccessarily single bytes and there is no +single automatic way to translate between bytes and UTF-X chars. + +So I'm assuming their environment system is less of a tranwreck than C's. + +1. Binary + - More compact + - Sensitive to system differences + - Otherwise it is more direct +2. Text + - Human readable + - Requires parseing and markup delimiters etc. + - Not really efficient for machine-interpretation as a middle + abstraction + +## Streams + +Abstractions for input and output + +- Works with multiple origins of input; keyboard, disk, files, network +- Buffering +- Unified interface for different types of input/output data + +### `java.io.InputStream` + +- `FileInputStream`; for files +- `ByteArrayInputStream`; get bytes from an array in memory as an input + stream + +Methods that use InputStreams should ask for an object of the `InputStream` +class (interface style calss), not its children classes. + +Low-level `read()` + +### Buffered input + +`BufferedInputStream` is a class that wraps `InputStream` to provide buffering to improve performance. It can read a single character, a specific number of characters, or a line. For other methods see [javadoc](https://docs.oracle.com/en/java/javase/13/docs/api/java.base/java/io/BufferedReader.html) + +```java +try { + InputStream is = new BufferedInputStream(new FileInputStream("dat")); + String s = is.readLine(); +} catch (FileNotFoundException e) { + // fail +} finally { + is.close(); +} +``` + +You have to then parse the returned string with string-parsing functions. + + +### Readers + +`java.io.Reader` is a base class for objects which read `InputStreams`. + +`new FileReader("filename")` + +$\approx$ `new InputStreamReader(new FileInputStream("filename"))` + +### Try with Resources + +Readers and streams need to be closed. Can use `try` `catch` and `finally` to +close files at the end, however `close()` can also throw exceptions hence Java +provides `try catch` syntax that automatically handles file resources. + +```java +try (BufferedReader r = new BufferedReader(new FileReader("file"))) { + r.readLine(); +} catch (IOException e) { + // handle +} +``` + +### Parsers + +Each primitive type (`int, char...`) has a wrapper class and these have string +parsing methods. + +```java +int i = Interger.parseInt("1"); +``` + +`parseInt()` will throw a number format exception if the format is invalid. + +Now $i = 1$. + +## Output + +For the most part just replace `Input` with `Output` and `Reader` with `Writer`. + +The standard output is `System.out`, standard error is `System.err`, it is a print stream that provides print methods. + +- `print()`, `println()` +- `flush()` flushes output buffer +- `printf(String format, Object args)` Use C-style format strings. +- `write(byte[] buf, int off, int len)` write `len` bytes from a byte array. + +### PrintWriter + +`PrintWriter` is a better tool for writing characters. It can write to any type of Stream or file. Look at the constructors in the javadoc. + +You often have to flush the output because otherwise it only gets sent once the output is full, or if it is closed. + +This is important for + +- interactive programs where you prompt for input +- debugging where you need outputs to be in order and up to date. + +## Serialisation + +Converting a java object to bytes. For a class to be serialisable it must: + +- Must implement `Serializable` interface +- Any objects referenced must also be `Serializable` +- Object streams can read and write to any type of `Stream`---to files, networks etc. +- Read using `ObjectInputStream` +- Write using `ObjectOutputStream` + +```java +ObjectOutputStream oos = new ObjectOutputStream(new FileOutputStream("file")); +oos.write(new Integer(5)); +oos.close(); +ObjectInputStream ois = new ObjectInputStream(new FileInputStream("file")); +Integer five = ois.readObject(); +``` + +### Limitations + +- If you change the class after saving a serialisable object and try to read it again it will produce an version error. +- Deserialising untrusted data is very unsafe / insecure + + +# Parsing Text Files + +Often need to + +- find delimiters +- split strings on delimiters +- convert strings to primitive types +- construct new objects based on parameters from a file + +## Split Strings + +```java +String[] splitstrings = "a b c".split("delimiter"); +String[] splitstrings = "a b c".split("delimiter"); + +String s = "lalala".substring(0, 2); +// s = la +``` + +## Regular Expressions + +Exist in java (`pattern`) + +## Converting Strings + +```java +Integer.parseInt() +Float.parseFloat() +Double.parseDouble() +Boolean.parseBoolean() // converts to false for anything other than true +``` + +All number types return `NumberFormatException` if the number format is wrong. + +## Objects + +Usually putting the parsing code in an initialiser is not appropriate, it doesnt separate IO classes from logic classes, and it requires files to be organised as one class to a file or other complexity. + +It is better to have another IO class that parses the file, then calls the objec initialisers. + +## File Objects + +Creating, renaming, moving etc; filsystem manipulations, not manipulating file objects (that is through the stream abstraction). + +`java.nio.File` package contains + +- `java.nio.file.Path` +- `java.nio.file.Files` + +## Exit + +`System.exit(1); // exit with an error code ` + +Default exit status is 0, which means success. + +# JavaFX + +Good example of Object Oriented, and event-driven programming. + +It has newer features than older GUI libraries, it automatically manages threads, etc. + +Need to add a java module through `VM options` in IntelliJ (to add jvm arguments). + +Create a class +- Extends `javafx.application.Application` +- Override the `start()` method + +## Stage + +A **stage** is the main window which displays a single **Scene** which holds all the widgets. + +The scene holds a heirachial scene-graph that holds GUI elements. + +## Layout Panes + +- groups nodes (GUI Elements) +- can use column, row ordering to place nodes within a grid + - `grid.add(new Label("hello"), col,row)` + +## Controls + +Buttons, labels, areas, textfields etc + +## Panes + +Boxes that hold groups of nodes and can be laid out as nodes themselves. + +`BorderPane()`: a pane with borders + +## Canvas + +Draw shapes and things in a space. + +Look at examples its not very complex. + +## EventHandlers + +Interactions with the gui generate events, and program functions also generate events. + +We only consider `ActionEvent` in `javafx.event` for handling gui events. + +For something to happen as a result of an Event, there needs to be an `EventHandler` associated with that event. + +`EventHandler` is an interface which we use to implement our event handlers. + +They can be connected to buttons with `setOnAction` + +```java + +// package private class, can be in the same file as ButtonDemo +// note that package private classes still generate .class files so +// you have to be careful of name conflicts in the package scope still +class ButtonDoer implements EventHandler { + public void handle(ActionEvent e) { + System.out.println("Send to console"); + } +} + +public class ButtonDemo extends javafx.application.Application { + ... + public void start() { + ... + Button button = new Button("useless button"); + button.setOnAction(new ButtonDoer()); + ... + } +} +``` + +### Better Design + +- link the events and what they do more loosely, + - to avoid putting application logic in event handlers + - use inner classes instead of package private classes for event handlers for better encapsulation + +```java +public class ButtonDemo extends javafx.application.Application { + private Stage stage; + + public static void main(String[] args) { + Launch(args); + } + + public void start(Stage stage) { + this.stage = stage; + Button button = new Button("useless button"); + button.setOnAction(new ButtonDoer()); + + GridPane grid = new GridPane(); + grid.add(button, 0,0); + Scene scene = new Scene(grid); + + stage.setScene(scene); + stage.show(); + } + + public void respondToButton() { + // do stuff + } + + // no one else can do actions that aren't tied to events + // logic is encapsulated with the gui interactions + private class ButtonDoer implements EventHandler { + public void handle (ActionEvent e) { + repondToButton(); + } + } +} +``` + +- can use a single handler for many buttons, make buttons private memebers and + switch over `event.getSource() == button1`. + +- nested classes are non-examinable + + +### Anonymous Classes + +Allows you to create an event handler immediately to do the things that you want +the button to do. + +```java +button.setOnAction(new EventHandler() { + public void handle(ActionEvent e) { + respondToButton(); + } + }// end of class +button2.setOnAction(new EventHandler() { + public void handle(ActionEvent e) { + respondToButton2(); + } + }// end of class +); +``` + +A similar effect can be achieved with lambdas. + +```java +button1.setOnAction((ActionEvent event) -> respondToButton()); +``` + +## TextFields + +For entering text + +```java +tf = new TextField(); +String text = tf.getText(); +tf.setText("Hello World") + +``` + +## Dialogs + +For confirmation prompts etc, there are pre-designed dialogue types. + +```java +public void doButton() { + TextInputDialog inputDialog = new TextInputDialog(); + inputDialog.initStyle(StageStyle.DECORATED); + inputDialog.setHeaderText("Hello World"); + + ImageView iv = new ImageView(new Image("photo.png")); + iv.setFitHeight(40); + iv.setPreserveRatio(true); + inputDialog.setGraphic(iv); + + Optional result = inputDialog.showAndWait(); + if (result.isPresent()) { + System.out.println(result.get()) + } +} +``` + +### FileChooserDialog + +```java +public class FileChooserDemo extends javafx.application.Application { + private Stage stage + private FileChooser fileChooser = new FileChooser(); + + private void respondToButton() { + File file = fileChooser.showOpenDialog(stage); + if (file != null) { + openFile(file); + } + } + + private void openFile (File file) { + // do stuff + } +} + +``` + +# Design Quality + +The most fundamental design guidelines are + +1. Every class and method has a single clearly defined purpose and reason for + existing. +2. Classes encapsulate all their _own_ state and actions. + +## Cohesion + +- Does a class/object make sense as a single entity +- Do all the data and methods fit together for a single purpose or abstract + concept + - minimises extraneous ideas to understand + - simpler unit to test + - modification is easier + +## Coupling + +- How strongly a class depends on another class + - How much of the internal state is passed to another class through + methods? + - How many methods of other classes are called? + - Can another object influence the flow of control in this object? +- Low coupling is preferable + - highly coupled classes are harder to write and test in isolation + - high coupling can indicate that a class has been split when it + shouldn't have been + +### Law of Demeter + +The target of a message can only be one of the following objects: + +- The methods object (`this`) +- An object passed as a parameter +- An object referred to by an attribute of the object + - Weak form of Demeter: and anything in that collection o +- An object created by the method +- Object referred to by a global variable + +Avoid chained messages `a.getB().getC().doSomething()`, since this increases +coupling + +## Mindless Classes + +- A class should manage its own flow of control + - restrict other classes from accessing its state + - data members are private + - minimise accessor methods +- The logic that is applied to the classes data should be within the class, + not in other classes that access the data through getters +- These tend to have low cohesion and high coupling + +## God Classes + +- Classes that do everything within their context and contain all the data +- High coupling and low cohesion + +## Mitigation + +A class should only depend on the public interface of another class. + +- Attributes should only belong to one class. + - This is often violated when classes have many accessors +- A class should represent a single abstract concept + - Unrelated data and functionality should be factored out to other + classes +- system logic should arise from the classes working to gether to implement + behaviour, it should be shared between classes uniformly + +## Fragile Super Class + +- Inheritance creates strong coupling between the superclass and the + subclass +- Does the design rely on the knowledge of the private methods of the + superclas; changing the privates in the superclass should not change + behaviour or cause problems for the subclasses. +- Public or protected methods should only change behaviour if the + specification of their functionality changes + - should usually be overridden in the subclasses + +### Downcall + +- Calling a method from a childs class + +## Further Reading + +- [Abstraction and Encapsulation](https://www.freecodecamp.org/news/object-oriented-programming-concepts-21bb035f7260/) +- [SOLID OO](https://alanbarber.com/post/solid-principles-five-principles-of-objectoriented-programming-and-design/) +- [Papers by Bob Martin](https://condor.depaul.edu/dmumaugh/OOT/Design-Principles/) + +# GUI Design + +- Model + - Conceptual things: entities, in the system + - State + - invariants + - methods that enforce the invariants +- View + - A presentation of the state, and a way to interact with it + +## Why MVC? + +- Decompose the task +- Separate interface from model + - Can change the UI independently of the model + - Might want to support multiple interfaces + - GUIs, web, mobile screenreaders +- Responsibility for enforcing invariants should be in only one place + +## How MVC: Challenges + +View and Model need to communicate +- find current state +- may need to notify the interface for when state changes + +- The user has to get information and send commands +- The interface needs to know if the model has changed + +We want them to be loosely coupled, so the model shouldn't know about the view. + +- one way access from interface to model is satisfactory only for a small model and interface. It is generally not safe to assume that the model is synchronous with the view. + +- Dont want to make the user wait for the model to sort itself out +- Multiple interfaces being connected could easily make a deadlock +- Model generally is updated independently to the actions happening in the interface, from things like external input, network input, or just calculating results of requested functions + +## Callbacks and Observers + +- User Interfaces implement an `interface` that the model knows about, and which it uses to tell the interface that the model has changed, and details about what has changed + - The interface can then ask the model for further information only when there is new information available, without having to poll constantly to ask + - So UI updates are driven by events sent by the model + +## Input Processing + +1. Getting Values from UI components to assemble a method call + - maybe the processing to generate the call to the model, needs to be in a separate class if it is very complex +2. Making changes to the model based on that call + - belongs in the model + +## Model View Controller + +- View: + - sends messages to the controller based on User interaction + - recieves callbacks from the model and queries details about state +- Controller: + - recieves requests from the view and figures out what to do to the model in response +- Model: + - Stores state, does program logic, and implements functionality + - Tells the view when it has changed + +### Model View Adapter + +Isolate the view from the model using an adapter + +- View + - interacts with user + - sends events to an adapter + - recieves updates from adapter +- Adapter + - reads state from model + - manipulates model + - recieves callbacks from model about state + - sends updates to the view +- Model: + - Stores state, does program logic, and implements functionality + - Tells the adapter when it has changed + +An example of an Adapter might be a REST API to a server-side functionality + +### Model View Presenter + +Same as MVA except the view and presenter is more tightly coupled. Every view +class has its own presenter class. + +Presenter manages the display, not just bridging between view requests and the +model, so it can do more complex things with the view to allow it to be more +responsive and intelligent, without having a lot of that complexity in the +actual UI code. + +### Model View ViewModel + +ViewModel: + +- encapsulates the state (of the model) that is displayed by the view +- tight coupling with the view: two way binding +- user changing state immediately updates viewmodel, +- Is provided by libraries + - less boilerplate code required for implementing event-sending between the + view and controller and model + +- the most restricted version here + - Cannot easily have different views + +# Generic Programming + +- Using `Object` is bad because it has no type safety. +- Generic types solve this, since you can use parameterised types. + - still has compile-time type checking + - don't need to cast in and out + +```java +public class X Boo { + private T myFirstVariable; + // T is the type of myFirstVariable + // ... constructor goes here ... + ... +} +``` + +You can now instantiate the class and give it a specific type. + +```java +Boo = new Boo<>(); +``` + +You can an arbitrary number of type parameters in clases. + +There is a naming convention. + +- E: Element (in collections) +- K: Key +- N: number +- T: Type +- V: Value +- S,U,V... Additional types + +## Generic Methods + +Do not have to be in a generic class + +```java +public static int count(T[] array, T value) { + for (T item : array) { + ; + + } +} +``` + +## Bounded Type Parameters + +- Types can be restricted to being a subset of classes. + +```java +public class {...} +``` + +This allows anything that is a sub-class of Number. + + +## Generic Inheritance + +```java +class X extends class Y {} +class X extends class Y {} +``` + +- note that using a subclass as a generic parameter, does not imply that the + classes themselves have an inheritance relationship. + +## Wildcards + +`?` Represents an unknown type, but not a specific unknown type. They are useful +when generic types are needed but they do not need to be named and referenced. + +`?` - any type +`? extends Type` - any subclass of `Type` +`? super Type` - any superclass of `Type` + +## Implementation + +Type Erasure: + +Generics are handled at compile time by replacing the generic types with `Object`, +replacing bounded generics with the bounding `Type` and adding casts and +bridging methods. + +Java only knows that types are at runtime, not at compile time. + +## Restrictions on Generics + +- Cannot be primitives +- Cannot instantiate generics: `new T()` +- Cannot be static +- Cannot have arrays of generic types +- No generic exceptions +- There are restrictions on overloading + +# Object Oriented Design + +## Textual Analysis + +Considering the description of the system + +Identify elements to be modelled. +- nouns -> data, categories -> attributes, classes +- verbs -> processes -> methods + +Be mindful of relevance, relatedness, and relationships between the nouns in the +model. + +## Common Class Patterns + +Find candidate classes using classification theory: + +- Concepts +- Events +- Organisation +- People +- Place + +are all class-candidates. + +## Class-Responsibilities-Collaborators + +After identifying candidate-classes, consider the behaviour and interactions +between classes. + +Using humans, roleplay to model how the classes should deliver the system +behavoir. + +For pinning down the responsibilities of a class, and defining the collaborators +that facilitate their interaction. + +This helps develop a shared understanding of the system design. + +[Reading](https://c2.com/doc/oopsla89/paper.html) + +### OOPSLA89 Paper Summary + +Responsibilities are problems to be solved. The responsibilities of an object +are active verb phrases. + +All objects exist in relationships to other objects. Collaborators are objects +that send messages, or are sent messages, in order to satisfy their +responsibilities. + +Make cards like this + +![3 index cards showing a model, view and controller. The top of the card is the +Class name and below it a list of responsibilities](fig2.gif) + +The first line is the class name, followed by a list of responsibilties. + +Design the model by role playing the execution of the model from some starting +point in the model: + +> start with only one or two obvious cards and start playing "what-if". If the +> situation calls for a responsibility not already covered by one of the objects +> we either add the responsibility to one of the objects, or create a new object +> to address that responsibility + +Only create objects to address the immediate need, not a hypothetical future +need. If they are needed in the future, then they will be created in the future. + + +# Functional Abstractions in Java + +## Lambdas + +- Anonymous methods +- Do not have a name +- Do not belong to a class, analagous to a c function +- Do not have return type + +(`MathOperation` is an interface defining one method.) + +```java +MathOperation addition = (int a, int b) -> a + b; +MathOperation subtraction = (a, b) -> {return a - b}; +``` + +It is also a more clear expression for attaching event handlers. + +```java +button.setOnAction((ActionEvent event) -> respondToButton()); +``` + +### Functional Interfaces + +The idea is they work like a single function, outside of a class. This allows +passing functions and logic to methods as an attribute. + +- They contain one (1) interface with a single abstract method and potentially +default methods, static methods or overridden methods inherited, to support the +core function. +- need the `@FunctionalInterface` label. + +```java +@FunctionalInterface +interface MathOperation { + int operation(int a, int b); +} +``` + +### For Each loop + +For each loops can be simplified to use an iterator to apply a passed lambda +function to each element of a collection. + +```java +list.forEach(thing -> System.out.println(thing)) +list.forEach(thing -> thing.toUpperCase()) +``` + +Be careful, strings are immutable so the second line does not actually modify +the string in the list, it only returns a reference to a new string. + +### Method References + +A reference to a member of a `FunctionalInterface`, static method, instance +method, constructor, an arbitrary instance method, by using the syntax +`ClassName::methodName` to refer to a specific method. + +```java + +@FunctionalInterface +interface Doable { + void do(); +} + +class MethodReference { + + public void method(String message) { + System.out.println(message); + } + + public static void staticMethod(String message) { + System.out.println(message); + } + + public static void main(String[] argv) { + Doable memberExample = MethodReference::method; + Doable staticMemberExample = MethodReference::staticMethod; + memberExample.do("hello"); // prints "hello\n" + staticMemberExample.do("world"); // prints "world\n" + } +} +``` + +Another example: + +```java +list.forEach(System.out::println); +``` + +It is possible to reference the constructor with `Classname::new`. + +### Standard Functional Interfaces + +```java +Consumer :: void accept(T t) + +Function :: R apply(T t) + +Predicate :: boolean test(T t) + +Supplier :: T get() + +UnaryOperator T apply(T t) +``` + +See javadoc on `java.util.function`. + +## Streams + +(monads) + +A stream of data (different to IO streams), that aggregate functions can work on +in a chain from source to an output. + +- doesn't hold data +- doesn't modify the data source + +Aggregate Operations + +- functions that use the stream contents + +Pipelining + +- Operations can be daisy-chained together + +Automatic Iteration + +- Iteration is performed in the stream, over the data source +- Can process data that doesn't fit in memory +- Enables lazy invocation (compiler only calling a function when neccessary) + +See `java.util.streams` + +### Intermediate Streams + +- Processes elements in a stream +- Returns another stream so they can be pipelined +- `map`, `filter`, `sorted` are examples + +### Terminal Streams + +The end of a stream that returns a result. + +For example, `forEach`, `collect`, `reduce` + +```java +List students = new ArrayList<>(); // and add students to a list + +// print failing students +students.stream() + .filter(student -> student.getGpa() < 4.0) + .forEach(System.out::println) +``` + +# Recursion and Sort Algorithms + +The basic case of recursion is a function calls itself, reducing the size of +the problem at each subsequent call, to progress towards a base case. +``` +function { + if (base case) { + return; + } + else (reduction cases) { + return function(); + } +} +``` +This has the risk of stack overflows, because each call adds to the callstack. + +Recursion is more elegant for some types of problems, which are naturally +expressed in recurrent logic. + +*Recursion is 'easier'* + +To read, write, and for who. More understandable code that is harder to write is +often valueable. + +## Java Sorting + +Java by default uses Timsort algorithm. `List.sort`. + +### Merge Sort + +Sorts bottom-up, by recursively halving an array and sorting the halves until +the base case of 1 element is reached, and then merging the sub-arrays together +by repeatedly choosing the smallest and adding it to the result array. + +### Quick Sort + +First find a `partition`, the position of one element that is already +in the correct position for the sorted result, such that everything to the +left of it is $<$ and everything to the right is $>$ it. + +Then, repeatedly, a value in the left partition that is greater than the middle +value is found, and a value to the right partition that is greater than the +central value is found, and they are swapped, until everything to the right +is greater than the middle value, and everything to the left is less than the +central value. + +This process is then recursively applied to the left and right sub-arrays. + +- The partition scheme is central to the performance, the array needs to be + divided evenly while maintaining the requirements. + +https://en.wikipedia.org/wiki/Quicksort#Algorithm + +## Which is Better? + +- merge is easier to understand +- merge has better worst-case performance + +- quicksort has better average performance +- quicksort has lower average memory requirements +- quicksort requires the data to fit in memory + +Visualisation Sites: + +- [visualgo.net](https://visualgo.net/bn/sorting) +- [usfca](https://www.cs.usfca.edu/~galles/visualization/ComparisonSort.html) +- [sorting.at](http://sorting.at) + + diff --git a/notes/index.md b/notes/index.md new file mode 100644 index 0000000..58dbe81 --- /dev/null +++ b/notes/index.md @@ -0,0 +1,11 @@ +--- +title: Uni Notes +notemplate: + +I might start keeping some uni notes here on the offchance someone else finds them useful. + +- Computer Systems and Software Engineering 2: Programming in The Large + [CSSE2002](csse2002) [(pdf)](csse2002/csse2002.pdf) +- Calculus + [MATH1052](math1052) + diff --git a/notes/math1052/index.md b/notes/math1052/index.md new file mode 100644 index 0000000..7863559 --- /dev/null +++ b/notes/math1052/index.md @@ -0,0 +1,57 @@ +--- +title: Solving ODEs + +1. Consider the following homogeneous linear second order ODE with + constant coefficients: + + $$ay'' + by' + cy = 0$$ + + The characteristic equation is $a \lambda ^2 + b\lambda + c = 0$. + +2. If $a \lambda ^2 + b\lambda + c = 0$ has two real and distinct + roots, $\lambda_1$ and $\lambda_2$, then + $y(t) = c_1e^{\lambda_1 t} + + c_2e^{\lambda_2t}$. + + If $\lambda _1 , \lambda _2 < 0$, $y \to 0$ as $t\to \infty$. + + If $\lambda _1$ or $\lambda _2 > 0$, $y \to \pm \infty$ as + $t\to \infty$, depending on the values of the coefficients. + +3. If $a \lambda ^2 + b\lambda + c = 0$ has one root, $\lambda$, then + $y(t) = (c_1 + c_2t)e^{\lambda t}$. + + Reduction of order. + +4. If $a \lambda ^2 + b\lambda + c = 0$ has complex roots, + $a \pm i\beta$, then + $y(t) = e^{at}( A \cos\beta t + B\sin(\beta t))$. + +5. Now consider the following inhomogeneous linear second order ODE + with constant coefficients: + + $$ay'' + by' + cy = r(x)$$ + + The general solution is $y = y_H + y_p$, where $y_H$ is the solution + to the homogeneous ODE $ay'' + by' + cy' = 0$, and $y_p$ is a + particular solution to the inhomogeneous ODE. $y_p$ may be found + using the method of underdetermined coefficients. + + Examples of $r(x)$ | Choice for $y_p$ + -----------------------|--------------------------------- + $2x + 3$ | $ax + b$ + $e^{2x}$ | $Ae^{2x}$ + $\sin(x)$ | $A\sin(x) + B\cos(x)$ + $\cos(x)$ | $A\sin(x) + B\cos(x)$ + $2\sin(x) + 3\cos(x)$ | $A\sin(x) + B\cos(x)$ + $xe^x$ | $(ax + b)e^x$ + $e^x \sin (2x)$ | $e^x (A\sin(2x) + B\cos(2x))$ + $e^{2x} + \sin (x)$ | $Ae^{2x} + B\sin(x) + C\cos(x)$ + +6. Simple Harmonic Motion & Damped Oscillations ($m$ is the mass of the + weight attached to the spring, $k$ is the spring constant, and + $\beta$ is the dampinc constant) + + Simple Harmonic Motion (Undamped): $mx'' + kx = 0$ + + Damped Oscillation: $mx'' + \beta x' + kx = 0$ diff --git a/notes/style.css b/notes/style.css new file mode 100644 index 0000000..44cea18 --- /dev/null +++ b/notes/style.css @@ -0,0 +1,36 @@ +body{ + margin:1em auto; + max-width:40em; + padding:0 .62em; + font:1.02em/1.2 sans-serif; +} +h1,h2,h3 { + line-height:1.2; +} + +h1 { + font-size: 1.5em; +} +h2 { + font-size: 1.3em; +} +h3 { + font-size: 1.2em; +} +h4 { + font-size: 1.02em; +} +@media print{ + body{ + max-width:none + } +} + +blockquote { + font-style: italic; + border-left: solid; + border-color: lightgrey; + padding-left:1em; +} + + diff --git a/pages/about.md b/pages/about.md new file mode 100644 index 0000000..3f09159 --- /dev/null +++ b/pages/about.md @@ -0,0 +1,9 @@ +--- +title: Me + +### Contacts + +- email: mail at alistairmichael.com +- matrix: alistair@thonk.space +- git: [git.topost.net/alistair](https://git.topost.net/alistair/) + diff --git a/posts/about.md.draft b/posts/about.md.draft new file mode 100644 index 0000000..a962338 --- /dev/null +++ b/posts/about.md.draft @@ -0,0 +1,14 @@ +--- +title: About +date: 5-10-2019 +... + +Hi, + +My name is alistair and this is my website. It exists mainly because around 2016ish I wanted to buy my domain name _alistairmichael.com_ and then felt that having it lying around doing nothing was a bit of a waste. + +I like playing with computers to learn new software tools and seeing what I can do with them, so really this is part of that and I'm not sure what actual content to put here. For the most part my waking mind is occupied by Linux and Open Source software, a tiny bit of computer gaming and whatever is on the front page of hackernews[^1]...so probably that. Meanwhile, this site is easily discoverable given my email address uses this domain so I have to be a bit nervous about it quite possibly being someone's (like a prospective employer's) second impression of me. Nothing like early 2010s cyber-fearmongering as a generation of millenials grew up to discover their teenage blogs are deeply cringeworthy to make me hesitant to post things online. + +I have wanted to do a blog properly for a few years now. Part of it is because I really _want_ to engage with Internet culture but don't possess the chaotic energy to do social media well. More importantly, it is because of all the times some random guy's blog post about his pet project has helped me solve an obscure technical problem I was having, or to learn about a new software tool or exciting toy. I want to be that dude. I have also felt inspired by the fantastic blogs I've come across, like codinghorror, 2bithistory, and the mozilla hacks blog. + +[^1]: [news.ycombinator.com](https://news.ycombinator.com) diff --git a/posts/cowsay.md b/posts/cowsay.md new file mode 100644 index 0000000..bc0b6b5 --- /dev/null +++ b/posts/cowsay.md @@ -0,0 +1,59 @@ +--- +title: Cowsay C +date: 10-06-2020 +... + +Back in February I was bored on an aeroplane so I decided to re-write the classic +`cowsay` by Tony Monroe. I wrote it in C, as a sort of private joke about premature +optimisation, I guess, and because for some reason puzzling over twiddly text-formatting +problems in C is good at keeping me awake after getting up at 4am to go to the +airport. + +The trickiest part of this was text-wrapping. The trivial solution is to loop +through the input string and replace every whitespace with a newline character, +but that doesn't allow breaking on `'\t'` or `-`, or other printing characters. I +tried to get it as close as possible to the real Cowsay, which uses the Perl +text wrapping function, but there are still some divergences that I can't explain. +There also proved to be some edge cases with attempting to put the wrapped text +into a box but I think I got them worked out in the end[^1]. + +It does not support multiple cow types or changing the features of the cow, +(`$eyes`) it might be nice to add that at some point but I'm not sure how much +time I really want to spend on this program. + +[^1]: I have just discovered that it doesn't understand tabs, so I either have to +fix that or live with this dissatisfaction now. + +Anyway it was a good bit of fun for the down moments in my trip to Melbourne. +I cannot attest to the code quality, I remember being extremely tired and +bleary when I wrote it. + +``` + _________________________________________ +/ `How do you feel?' he asked him. \ +| `Like a military academy,' said Arthur, | +| `bits of me keep | +| passing out.'" .... | +| `We're safe,' he said. | +| `Oh good,' said Arthur. | +| `We're in a small galley cabin,' said | +| Ford, `in one of the | +| spaceships of the Vogon Constructor | +| Fleet.' | +| `Ah,' said Arthur, `this is obviously | +| some strange usage of | +| the word "safe" that I wasn't | +| previously aware of.' | +| | +| - Arthur after his first ever teleport | +\ ride. / + ----------------------------------------- + \ ^__^ + \ (oo)\_______ + (__)\ )\/\ + ||----w | + || || +``` + +[source link](https://git.topost.net/alistair/c-cowsay) + diff --git a/posts/email.md b/posts/email.md new file mode 100644 index 0000000..b003938 --- /dev/null +++ b/posts/email.md @@ -0,0 +1,22 @@ +--- +title: Email Isn't Actually Impossible +date: 12-12-2019 +... + +A couple of months ago, Gilles, who writes the blog at poolp.org and works on the OpenBSD mail server OpenSMTPD wrote a post claiming that "Email is Hard" is an inadequate reason for not- self-hosting an email server. If you are reasonably technical, have patience and have minimal consequences for potential email downtime, then the only thing stopping you running your own email server is the doing the work to set it up. After following the [excellent guide](https://poolp.org/posts/2019-09-14/setting-up-a-mail-server-with-opensmtpd-dovecot-and-rspamd/) he wrote to setting up OpenSMTPD I'm inclined to agree. + +This is partly because of the OpenBSD project, who are resposible for OpenSMTPD, and their focus on simplicity and correctness in the implementation. They provide a very straightforward setup process for the basic use case. After playing with the config files for a couple of days they really make sense and seem quite elegant and terse. + +Having searched "how to set up an email server" I found a massive ars-technica series on doing it with Postfix, the "standard" SMTP server implementation and it does not look fun, I can say. However it is likely more powerful than OpenSMTPD. There are also several blog posts warning of the inevitable blacklisting and undeliverability issues with hosting your own main which I'm so glad to see didn't appear when I set up my server. + +Straight away, with a 1 day old domain name and after spending maybe 4 hours following Gilles guide to set up DNS records, SPF, DKIM, an DMARC, I had an email server with spam filtering, and that I could connect to from my phone and send emails to the inbox of GMail and Zoho (my usual free mail provider). Unfortunately Office365 mail does deliver me to the spam folder. Hopefully that will improve once the address has existed for a while and gained reputation, but it may just be something I have to accept. + +The hardest part of the setup process was compiling OpenSMTPD and the filter plugins from source on Ubuntu[^1], because the repository version was too old to support the nice spam-filter syntax in the config file. Thankfully the documentation provided with the source was good, and I was able to install all the dependencies without too much trouble. + +At any rate this was more of an experiment, so I am happy. I have not set up a backup server to take over in case of downtime and I'm not sure I will, since it is only for me. So doing that was a fun couple of days, and I agree with the claim that it would be "better" in an abstract sense, if more people used smaller mail providers to so that one of the few truly decentralised methods of communcation stays that way. It is a service that has always been "unmediated" by technology, the protocol is just the messenger and not the "platform". The mail transfer protocol does not carry all the responsibilities that _platforms_ like GMail, Outlook and Yahoo do have and maybe that is why it has been safe for the past 30 years. + +Of course, it is forever moving the other way: Gmail and company own so much of the market that if they decide your email-reputation is not up to scratch they can singlehandedly make your service worthless, [as with their other platforms](https://www.youtube.com/watch?v=DIssymQvrbU). + +All hope is not lost though, just this week Jack Dorsey, Twitter CEO, announced plans to invest a team in developing an open Social Network standard that would be interoperable with twitter. Despite however cynical you can be about this, it is at least interest in the idea of platform-agnostic communication. Perhaps more substantially, the ActivityPub protocol, the open Social Network communication standard used by Plemora, Mastodon, Peertube, Plume, Pixel fed et cetera, reached W3C Recommended status in November last year. This essentially makes it a "Web Standard" like HTML5, and SSL. Personally, I am quite excited about ActivityPub, and I hope it helps open protocols triumph over commercial services more broadly. + +[^1]: A choice I made because I want to be able to run obscure self-hosted web applications like [shiori](https://github.com/go-shiori/shiori) that I don't have the know-how to port to BSD. diff --git a/posts/index.md b/posts/index.md new file mode 100644 index 0000000..250b5c6 --- /dev/null +++ b/posts/index.md @@ -0,0 +1,7 @@ + +--- +title: Posts +... + +${postlist:.} + diff --git a/posts/new-blog.md b/posts/new-blog.md new file mode 100644 index 0000000..c137dae --- /dev/null +++ b/posts/new-blog.md @@ -0,0 +1,66 @@ +--- +title: The World's Ugliest Static Site Generator +date: 3-10-2019 +... + +Here we are again. + +I rewrote my blog generator, because I decided not to try to deal with the ugly python I wrote last year instead opting to try and keep it as _minimalist_ and as possible: no more than a makefile, a 200MB markdown parser... and in the end a hundred lines of python to help tie it together. I think the purpose of this project was to learn more of the standard gnu utilities for text manipulation, but I ended up copying and pasting so much Makefile syntax off stack I think that purpose was lost in the midst, which was when I gave up and started using python again. + +It still does less than the old one, which is quite something. It _does_ support pandoc[^2] markdown by calling pandoc directly, which is some improvement over python's markdown[^1] that I was trying to wrangle before. + +### Pandoc + +Pandoc is the markdown parser that I use for all of my Uni notes and just about any writing that doesn't require LaTeX. It is phenomenal, not only being able to convert between a [dizzying array](https://pandoc.org/diagram.jpg) of document formats, but offering one of the most featureful and well-defined markdown dialects available. + +Markdown itself is the very simple plaintext markup language that is partially supported by just about every messaging app, and notably social networks like Reddit, for at least basic things like bold, italic and lists. However it is capable of a lot more than that, and there exist many many, different iterations on basic markdown syntax that allow for more complex formatting like tables, code blocks, embedded maths, audio, vidoes and everything possible on the web. + +Since markdown was designed for web publishing, Pandoc is notable because it provides extra functionality specific to paper document generation. It can convert markdown to PDF via LaTeX to produce really beautiful looking documents. + +Anyway, all that really means is I can have nice-looking code blocks and footnotes. + +## Functionality + +Regardless, my site generator works much the same as before. + +1. Listing everything in the `/posts` directory, passing it to a python script to make a markdown formatted list of posts that is sorted by date, adding a header and footer and sending it to pandoc to build `index.html`. +2. Listing everything in `/posts` and `/pages` and sending it to pandoc to convert to html and plonk them in an 'out' directory. + +[^1]: Yes, I could have achieved this by calling pandoc from python, but I don't know. No. +[^2]: [pandoc.org](https://pandoc.org) + +## Missing Functionality + +- RSS feed generation, but even I only really _pretend_ to use that, I don't know of anyone outside of 90s UNIX programmers on hackernews who still do[^3]. +- Post tagging or categorisation +- Fine control of included content on each page +- Search + +[^3]: Don't @ me! + +To address these in reverse order: + +### Search + +- Hey man, I won't be writing that much. + +### Fine Control of Included Content + +Other static site generators allow complex substitutions of text and html elements in individual pages through linking to different files and templating. I would like to support some kind of templating, and the ability to substitute a piece of text for a given variable at any point. That would require me to make the Makefile more generalised however... + +### Post Tagging and Categorisation + +Ah the tree, truly a transcendent representation of related data. One day, my makefile should be able to recursively traverse a filetree and generate the content for all the markdown documents it contains allowing categorisation of content by the folders it is placed in. + +### RSS + +I'm not very hyped about RSS right now [^4]. It has low usage outside of podcast publishing and I'm not sure it's worth it. More importantly, I am also not sure how to do it outside of using a python module and giving the python script all the posts. + +[^4]: Yes, that does imply I've been hyped about RSS in the past. [Link](https://twobithistory.org/2018/12/18/rss.html) for you if you don't know what RSS is (and are prepared to read for half an hour). + +That is about all I can say really. I was supposed to do Uni work today but instead was more productive than I have ever been this week working on my poor little webserver. + +Oh well. + + + diff --git a/posts/quick-masto-poster.md b/posts/quick-masto-poster.md new file mode 100644 index 0000000..9ca66fb --- /dev/null +++ b/posts/quick-masto-poster.md @@ -0,0 +1,97 @@ +--- +title: The World's Ugliest Mastodon Client +date: 07-10-2019 +... + +Or How To Send a Mastodon Post Using `curl` + +The idea behind this is that one could easily make a [Mastodon](https://joinmastodon.org/) post from a Linux terminal without having to really interact with a UI. Yes, I mainly wrote this because I was bored, but I do feel that a pure "command-line" mastodon client: where you don't have to memorise a million keyboard shortcuts to ninja mode-switch through an ncurses-style text-interface is quite elegant[^1]. It is programs that can interact through arguments and `stdin`/`stdout` that make scripting languages really powerful. + +Of course, with that comes the ugliness of small programs that require many, many dependencies. The universality of bash on Linux systems seems attractive, until you realise how many people use zsh or fish or whatever terminal is cool right now, how its non-standard on BSD systems and how the need to call out to other software means you have to be aware of various dependencies' availability and versions. Yet this script does so little it could really just be a couple of lines in a `.bashrc` profile. I am making a note of this because availability is the only real reason to use bash given how lacking in abstraction and readability it is. Although perhaps I just haven't learnt the idioms yet. + +More importantly, I've never really worked with JSON APIs before and its surprisingly easy and jq seems like a really cool tool for working with JSON. + +```bash +#!/bin/bash + +# Simple bash script that will send all its arguments as a mastodon +# post. +# On first run it will ask for a username and password and +# generate an API key which it will store at the end of this file. + +# Dependencies: +# +# bash +# jq : JSON Parser +# curl : API requests and POSTs + +## config +mastoinstance="mastodon.social" +defaultstatusvis="public" # change to "direct" or "unlisted" +statuslang="eng" +storepassword="True" +## end of config + +THISFILE=$(pwd)/toot.sh + +# Check whether the api key has already been generated +if [ $(tail -1 $THISFILE | grep "ACCESSTOKEN") ] +then + accesstoken=$(tail -1 $THISFILE | cut -d':' -f2) +else + # Otherwise generate a new key with username and password + printf "Please enter your email: " + read email + printf "Please enter your password: " + read pass + + # Register the app as per + # https://docs.joinmastodon.org/api/rest/apps/#post-api-v1-apps + + meta=$(curl -X POST -sS "https://$mastoinstance/api/v1/apps"\ + -d "client_name=tinyscript&redirect_uris=urn:ietf:wg:"\ + "oauth:2.0:oob&scopes=write follow read") + + # Use jq to parse the json response + key=$(echo "$meta" | jq '.vapid_key'| cut -d'"' -f 2) + client_id=$(echo "$meta" | jq '.client_id'| cut -d'"' -f 2) + client_secret=$(echo "$meta" | jq '.client_secret'| cut -d'"' -f 2) + key=$(echo "$meta" | jq '.vapid_key'| cut -d'"' -f 2) + + # Login with Oauth2 to get an api key + login=$(curl -X POST -d "scope=read follow write&client_id=$client_id"\ + "&client_secret=$client_secret&grant_type=password&username="\ + "$email&password=$pass" -Ss https://mastodon.social/oauth/token) + + # Use jq again to extract the access token + accesstoken=$(echo "$login" | jq '.access_token'| cut -d'"' -f 2) + + if [ storepassword == "True" ] + then + # Store the access token at the end of this file + # Security: 100 + printf "#ACCESSTOKEN:$accesstoken" >> $THISFILE + fi + + echo "Logged in (probably) successfully :)" +fi + +# Check there is actually a message +if [ "$1" != "" ] +then + # Actually send the message + statustext="$@" + header="Authorization: Bearer $accesstoken" + url="https://$mastoinstance/api/v1/statuses" + response=$(curl --header "$header" -sS $url -X POST \ + -d "status=$statustext&language=$statuslang&visibility="\ + "$defaultstatusvis" | jq '.content') + echo "Sent toot: $response" +else + echo "Nothing to write :(" +fi + + ### Below Here your access token is stored in one line ### +``` + +[^1]: To be clear, this is a statement about my general overwhelment at command line GUIs. I haven't used any mastodon terminal program. diff --git a/posts/staticgen-update.md b/posts/staticgen-update.md new file mode 100644 index 0000000..421f97f --- /dev/null +++ b/posts/staticgen-update.md @@ -0,0 +1,41 @@ +--- +title: My Very Basic Site Generator +date: 13-12-2019 +... + +I took a few hours today to rework the experimental Makefile and Python script into just a python script which works somewhat solidly, albeit still for a small set of features compared to full-blown static site generators like Hugo. + +I'm quite satisfied with it, it does the core job I need it to do and does it well enough. + +The site generator's behaviour is very simple, it recurses through each directory in `src/` and builds what it sees. Anything that it does not understand is copied to the output directory, unless the config file explicitly tells it not to. + +This time the source is online: [git.topost.net](https://git.topost.net/alistair/blog/src/branch/master) + +## Features + +### Configuration File + +TOML and YAML are silly and overcomplicated so config is done through a JSON file (see `src/generator/config.json`). + +`ignorexts`, `ignorefiles`, and `ignoredirs` provide file extensions, file names, and _specific_ directories respectively, to not copy to the destination directory. + +The same labels in the `dir_index` context specify things to be ignored by the directory-index-page generator. + +### Templates + +It has very basic support for templating, any file can have a `.template` appended to its filename, and the script will read it and try to substitute any variables in the file. Current supported substitutions are: + +- Any variable name in root of the config file, for example `${baseurl}` evaluates to `https://alistairmichael.com` +- The `${include:relative/file/path}` function inserts the context of the provided file. +- The `${postlist:relative/file/path}` function generates a list of posts as seen on the front page. This can be done for any directory on the site. + +The file generated from `filename.ext.template` is then written to `filename.ext` so the program can continue processing it, for example generating html from it. Anything ending in `.template` is not copied to the public directory. + +### Markdown + +It utilises Pandoc, which has a very extensive dialect with useful things like code highlighting, footnotes, tables-of-contents. These days I use pandoc for everything that doesn't need Latex, it really is fantastic. + +### Pandoc HTML Templates + +The `pandoc` command is always provided with a pandoc template, the script chooses the one closest to the file it is currently processing by walking up the file tree. These are named `template.html`. For bonus templating make a `template.html.template` which can use the python scripts substitution, and pandoc's substitution. This is how I structure and style the website. + diff --git a/projects/index.md b/projects/index.md new file mode 100644 index 0000000..ecb713d --- /dev/null +++ b/projects/index.md @@ -0,0 +1,11 @@ +--- +title: Projects + +Some brief write-ups of my programming projects. + +{{postlist:.}} + +### Game + +{{postlist:/game}} + diff --git a/projects/markov-bot.md b/projects/markov-bot.md new file mode 100644 index 0000000..f30f79a --- /dev/null +++ b/projects/markov-bot.md @@ -0,0 +1,70 @@ +--- +title: Another Ebooks Bot For Telegram +date: 01-08-20 + +Yes, I've written another markov chain bot. A markov chain was one of the first +things I attempted when I was trying to learn python years ago. I made another +one last year and have again used a markov chain project to help me learn a +language: C++. + +[code](https://git.topost.net/alistair/telegram-text-bot-markov) + +This one is a bot for the messaging app _Telegram_. You can add it to a group and +it will listen to the conversation to build its markov chain databse[^2]. It will +reply periodically to a random message using its last word as the seed. It looks +like a reallly basic form of keyboard autocomplete. + +It can also import plain-text files. This is useful if you want it to loosely +imitate the prose of a specific author. + +But this one does support arbitrary order markov chains and uses an SQLite +database instead of json save-files like the last one. It is also structured to +(theoretically) allow you to swap the SQLite database for say... a posgtres +databse. Because performance is what C++ is about. + +If it seems over-engineered it's because I tried to ram in as many c++ +features as possible in order to help me learn the language. +My main method of learning has just been reading the +first third of _A Tour of C++_ by Bjarne Stroustrup, watching random C++ +conference talks[^1], searching online, and referring to +[cppreference.com](https://en.cppreference.com/w/cpp). Its not the worst way of +learning a language, and I have to say I prefer textbooks to videos or tutorials +just thanks to the pacing, but I started to wish my University did an "Intro To +Software Engineering in C++" course, like they do for Java. Having a lecturer +guide you through the main bases of the language over 13 weeks is immensely +helpful. + +Anyway, there is still some design and debugging work to do with this project. +The more significant problems are the structure of the SQL generation and binding +code, and the structure of the queries. The former because its a mess and hard +to maintain, and the latter because queries cannot be batched in transactions +I dont know of a way of doing it without just gitting gud at SQL. I also kind of +regret using this C++ sql library. It _is_ very nice, but the plain C SQL +library also seems good enough, and would let me practice RAII. + +Theres plenty of work I can do on it to make it a more useable meme robot, but I +don't know if I will. I've already had 1 year of having a robotic talking parrot +in our groupchat and I don't know if I should instantiate another. + +This Program Is Bad, but it did teach me some valuable lessons like: + + - How bad ld linker errors are + - How ugly C++ syntax is + - The sheer number of footguns present in the C++ language + - How to properly declare then define classes + - The hellscape that is build systems + - The hellscape that is libraries + - I didnt even use that many libraries really... +- How slow the c++ compiler (and linting tools) are compared to C. +- I wish I had time to learn Go. + +In all seriousness though, C++ is a pretty scary language, but still a very +interesting one. + +I really need to think of more creative projects though. + +[^1]: I did solve _one_ bug because I remembered it for a talk so it wasn't + _just_ exam-study-procrastination when I watched them last semester. + +[^2]: It does not store verbatim messages only word-pairs, word-triplets... + depending on the order of the markov chain; and how many times they occurred. diff --git a/projects/powdersim.md b/projects/powdersim.md new file mode 100644 index 0000000..79c1033 --- /dev/null +++ b/projects/powdersim.md @@ -0,0 +1,54 @@ +--- +title: A Simple Falling Sand Simulation +date: 07-12-2020 + +Having spent considerable time away from C++ due to university and general busyness I decided +it was time to have another go at learning it, and promptly discovered I'd forgotten +everything I'd ever known about initializers, RAII and OOP. + +```{=html} + +``` + +After wasting too much time trying to find a UI toolkit that I could tolerate +learning for fun I stumbled upon +[this nice video](https://www.youtube.com/watch?v=VLZjd_Y1gJ8) about writing +a simple sand physics game and thought it would be much more fun to work on +something conceptually simple and satisfying, compensate for C++'s induced headaches. +Inspired by the wonderful work _Nolla games_ did on +[Noita's sand physics engine](https://youtu.be/prXuyMCgbTc) I set to work +with a SDL2 texture and array of `Uint32` pixels. + +The basic idea is wonderfully simple: its a cellular automaton where you update +each particle each frame, according to a simple set of rules. +This gets complicated when you want to say, swap the position of two particles +so that less dense particles float up through the more dense ones, but it worked +out okay in the end. + +After about 5 hours of fighting C++ I was wishing I'd written it in C. _Oh, it +it would be so much simpler if everything was just arrays: the grid an array +of `(int)enum Particle;`'s, the update functions an array of function pointers: +`void (update*)(enum Particle**, int x, int y)`, +the particles an array of pointers to struct's with state and a function pointer: +I could change a particle's type simply by rewriting the update function pointer and +the Particle's type flag. Who needs inheritance? I could cleanly separate the +physics state and Particle properties from my logic and define the interaction +between particles purely with their data: I could even read it from a text file!._ + +Anyway I eventually figured out how to inherit initializers and destructors +correctly. Particle behaviour can be defined via inheritance relations, and the +colour palettes, default physics values, et cetera, are still separated from the +actual class definitions so I can easily serialise them to and from the disk if +I want to implement that some time (I probably won't). I do really enjoy having +RAII and overloading. Perhaps mosst, I appreciate the greater expressiveness of +C++ code over C, where I often find myself off yak-shaving something to do with +`char *` arrays. + +At the moment I think my goal is to just write enough C++ +that most of the time I can spot my stupid mistakes so I can use it instead of C +or Java without it being a huge pain. Maybe that is too ambitious. At any rate, +its probably the best option for working on games, and I like pointers too much +now. + diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..60ed3d0 --- /dev/null +++ b/robots.txt @@ -0,0 +1,3 @@ +User-agent: * +Disallow: + diff --git a/stgen.json b/stgen.json new file mode 100644 index 0000000..4966ec8 --- /dev/null +++ b/stgen.json @@ -0,0 +1,9 @@ +{ + "author": "alistair michael", + "date-in-format": "%d-%m-%y", + "date-out-format": "%a, %b %d, %Y", + "name": "alistairmichael.com", + "publish_root": "/home/alistair/Documents/programming/stgen3/build/alistairmichael", + "source_root": "/home/alistair/Documents/programming/stgen3/build/alist", + "url": "http://localhost:8080" +} \ No newline at end of file