Frontend: HTML, CSS, JS

What is this rubbish ?

About Me πŸ™‹πŸ»β€β™‚οΈ!

my photo

Yet, another underachiever πŸ‘».

But hey, I have my own blog πŸŽ‰.

A page is a document consist of:

  • HTML Tag: Structure and Formatting
    (structure = elements in hierarcy fashioned)
  • Stylesheet: Presentation
    (rule = selector + declaration)
    (box model, position)
    (layout: flex, grid, float+calc, table)
  • Javascript: Behaviour
  • Text and Image: Content

Reference: va_lesson4.pdf

Issue in oldschool CSS Development πŸ™ˆ

  • Reinvent the wheel.
    Different stylesheet for each project.
    In need of code reuse.
  • Debugging. Most of the time.
    The horror while testing in different browser.
  • No standard for teamwork.
    Waste of time, thinking of nice name for classes.
  • Can we have a generic one πŸ€”?

Why CSS Framework πŸ€”?

  • Save man hours.
    Deliver preview quickly.
  • Reduce debugging and test.
    Already well tested. Hence reduce bug.
  • Ready to read, official documentation
  • Community Friendly
    Known solution for recurring case.
  • Modularity
    Built on top of CSS preprocessor: Sass, Less, or Stylus,
    Tailwind on top of PostCSS even more modular.

Direct advantage to developer 🀠

  • Easy to layout
  • Ready to use:
    reset, element, component, helper
  • Predefined properties:
    color, and such

Disadvantage πŸ™ˆ

  • Another learning time
  • Bloated
    unless utilize modular feature.
    exclude unneeded artefact
  • Feels like witchery.
    This things work, and nobody knows why.

Disadvantage for beginner πŸ™ˆ

  • Basic Design Provided:
    Every site made, will have similar looks.

When not Using CSS Frameworks πŸ€”?

  • You want to write your own
    This is technically make sense, for custom design.
    To make something that suitable for your need.
  • You step into a team with legacy project.
  • AMP:
    that require embedded stylesheet.

Step by Step Examples 🀠?

Tool: Preprocessor 🀠!

What is this CSS prepocessor rubbish πŸ€”?

  • In short: CSS with superpowers ✊!
    Just the tool we desire.

The CSS Frustration πŸ€•

  • CSS code get ugly from time time.
    Nomore clean code.
    Hard to read.
    Hard to maintain.
  • Always rewrite, for any changes
    No variables in old browser.
  • Modularization affect HTTP perfomance. 🀧
    Multiple files require more HTTP requests.

In short:
Developing with CSS without tools is not scalable for large project.

Why CSS prepocessor πŸ€”?

Sass, Less or Stylus

  • Modularity
    Let's get organized.
    Cleaner code.
  • Easier to maintain stylesheet
  • Basic coding:
    import partials, variables, interpolation, mixins, function arguments
  • Made for developer.
    Simplified declaration.
    While compiled css is made for machine (web browser).

Direct advantage to developer 🀠

  • Modify custom properties:
    color, and such
  • Ready to alter:
    reset, element, component
  • You can claim yourself as a coder.
    This is a joke. βœ‹πŸΌπŸ€‘πŸ€šπŸ½
    Yes, there is a compilation process.

When not Using CSS Preprocessor πŸ€”?

  • You want to use unmodifed version CSS Frameworks.
    Such as using CDN.
  • Else, I'm still thinking...

Current 2019 State 🀠

  • SASS has wide implementation in many language
    Most common are: dart-sass, node-sass, and deprecated ruby-sass
    Supported in both Gulp and Grunt.
  • PostCSS with Tailwind CSS is a rising star.
    PostCSS itself is more than just Preprocessor.
  • LESS is less used.
  • I do not know about this one:
    Stylus

Which One πŸ€”?

  • Choose what works for you πŸ™πŸ½!
  • I don't know. I'm just a blogger.
  • Learning:
    @css_tools_id

Preprocessor Examples 🀠?

Respect 🀠!

Special thank you for the smart guys/girls,
behind these CSS preprocessor project.

Not Covered Yet πŸ€”?

More about CSS supporting Technologies

  • PostCSS:
    Along with their plugins.
  • Task Runner:
    Gulp, Grunt, Brunch, Broccolli
  • Bundler:
    Webpack, Parcel, Rollup

Just like you. I'm still learning.

Summary πŸ€”?

Along with local communities 🀠.

What is Next πŸ€”?

Leverage to SSG!

Introduction to SSG for beginner.
Learn to make a fully mature website
without the burden of complicated backend.

Questions πŸ€”?

Don't be shy πŸ™‹πŸ»β€β™‚οΈ!

The End

πŸ™‡πŸ»

Thank You for Your Time.