evalica / risherry Goto Github PK

Have the site working for:
https://www.risherry.ro
https://risherry.ro

Support several ColorThemes. Initial implementation and some ColorThemes examples.

Being in development, these files are updated at each change, flooding the commits.

The dist/ files should be updated only on releases.

References:

• http://hellohappy.org/beautiful-web-type/
• http://femmebot.github.io/google-type/
• http://www.google.com/fonts/

https://internetdevels.com/blog/configuring-grunt-for-compiling-sass-less-to-css

Findings:

• Replacing compiler. Careful on sourcemap and style output differences
• Transforming LESS @ variables to Sass $ notation, careful on the @media queries
  -- Using the correct variable interpolation method for Sass #{$var}, translated from the @{var} used in LESS
• Careful on LESS mixins, they need to be rewritten
• Adding Sass files to .gitignore

Be able to display a limited number of entries and expand in order to see more.

Locally

• npm version
• node -v
  • v.4.2.1 > v.8.10.0
• npm -v
  • v.3.3.9 > v.5.6.0

Package

• grunt -version
  • grunt-cli v.1.2.0
  • grunt v.0.4.5 > v.1.0.2

Libraries

• Handlebars
  • v3.0.1 > v.4.0.11
• JQuery
  • v.2.1.3 > v.3.3.1
• Bootstrap
  • v.3.3.4 > v.3.3.7
• FontAwesome
  • v.4.3.0 > v.4.7.0

• Provide gradient mixins
• Have a theme example using gradients

Provide fallback with @support tag for pre-grid browsers

Testing Google Analytics to conduct A/B experiments.

Sources:
Bordo.zip

• CSS Diagnostic https://css-tricks.com/snippets/css/css-diagnostics/
• Total Validator https://www.totalvalidator.com/
• JSON Lint http://jsonlint.com/

Findings:

• Transform col-xs-* to col-*
  • Grid col-* needs to be properly nested under row
• Transform hidden to d-none

TODO: Provide a fallback on Flexbox

In order to reduce bloat: divitis, unused classes, etc.

• Layout areas:

|   |   A   |   B   |   |   |   | .navigation
|   | C |     D     |   |   |   | .about
|   | E | F | G | H |   |   |   | .work
|   |     I     | J |   |   |   | .talks
|   |       K       |   |   |   | .footer

• Layout 8 (4+4) columns:

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 
|   |   2   |   2   |   |   |   | A B
|   | 1 |     3     |   |   |   | C D
|   |   2   |   2   |   |   |   | E F
|   |     3     | 1 |   |   |   | I J
|   |       4       |   |   |   | K

• Layout 12 / 16 columns:
  • LG (1440px - the margin spacing can be added with a 12 + 4 columns layout)
  • MD (1024px - Laptop)

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | 1 | 2 |
|           6           |           6           | A B
|     3     |                 9                 | C D
|     3     |     3     |     3     |     3     | E F G H
|                 9                 |     3     | I J
|                       12                      | K

• SM (767px - Tablet)

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | 1 | 2 |
|           6           |           6           | A B
|       4       |             8                 | C D
|       4       |       4       |       4       | E F G
|             8                 |       4       | I J 
|                       12                      | K

• XS (480px - Mobile)

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | 1 | 2 |
|                       12                      | A
|                       12                      | B
|                       12                      | C
|                       12                      | D
|           6           |           6           | E F
|                       12                      | I
|                       12                      | J
|                       12                      | K

Add social buttons, see https://gist.github.com/evalica/8ec9db6f3c61c46a81a1

Add the needed elements and make them customisable.

• Idea: Invert the links color for active / hover states on the WORK section

Sources:
Bliss.zip

Since it's currently pixelated and produce some bugs with links inside heading's colors.
Currently affected the "About" and "Talks" headers.

Make the configurations

Resources:

• http://tympanus.net/Development/HoverEffectIdeas/index2.html
• http://tympanus.net/Tutorials/CircleHoverEffects/index2.html
• http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index5.html
• http://tympanus.net/Tutorials/ShapeHoverEffectSVG/index3.html
• http://tympanus.net/Tutorials/CaptionHoverEffects/index7.html
• http://tympanus.net/Tutorials/BorderAnimationSVG/
• http://tympanus.net/Development/ClickEffects/

Currently we only list links for Talks, but some of them have video. Showcase a preview. See prototype.

Before

After

Adding Animations and Effects to different Themes

https://web.dev/measure

https://lighthouse-dot-webdotdevsite.appspot.com/lh/html?url=http://risherry.ro

Sources:
Moss.zip

Based on Rain theme, see #31

• Find a name for the new theme [Default]
• Change typography from "Gentium Basic" to [Open Sans]

Before

After

Resources:

• http://stackoverflow.com/questions/21128478/run-grunt-build-command-on-travis-ci
• http://manuel.manuelles.nl/blog/2012/06/22/integrate-travis-ci-into-grunt/
• https://gist.github.com/travishorn/5869188
• http://lint.travis-ci.org/
• http://docs.travis-ci.com/user/languages/javascript-with-nodejs/

Implement the 'Work' section

Sources:
Rain.zip

Added in #5

Initial online values:

• Slow 3G - 22.76s

• Fast 3G - 6.41s

Resources:

• https://www.maxcdn.com/one/visual-glossary/page-load-time/
• https://developers.google.com/web/tools/chrome-devtools/network-performance/

And replace the current one.
Make sure the CONTACT details are more visible.

Create a Grunt task to minify the source JS.

• https://www.erianna.com/using-grunt-to-minify-and-compress-assets

Fix various issues related to different resolutions

• In order to reiterate rapidly on the Color Themes
• Make sure the CSS variables are mapped to the Design System's Local Styles

In order to reduce the themes variables and delete duplication

In order to optimise the loading performance

• http://danburzo.ro/grunt/chapters/handlebars/

Use <nav>, <footer>, <section>, etc.

In order to be manage categories background in a separate manner.

Starting with the 1st of July 2023, the Universal Analytics (analytics.js) implementation is deprecated, so we should migrate to the new (gtag.js), see https://developers.google.com/analytics/devguides/migration/ua/analyticsjs-to-gtagjs

This issue affects the source files from the master, like:

• index.html
• generate.html
• src/data/config.json
• src/js/templates.js
• dist/js/risherry.js

Instead of having the whole Font Awesome, provide a custom font or SVG sprite, just with the needed icons.

Before

After

grep "\$font-family-base" . -R --exclude-dir={".sass-cache","dist"}

Advantages:

• Reusable variables instead of defining new ones for new values, because of dynamicity of CSS variables compared to static Sass variables

Limitations:

• CSS Variables need to be inside a :root {} declaration, while the Sass vars have an 'Undefined variable' error
• Background-image URLS, $img-path, $theme-path
• Media queries breakpoints, $screen-sm
• Problematic for color functions, like transparencies
• Problematic for calculations that go between units