Skip to content

Instantly share code, notes, and snippets.

@macx
Last active January 10, 2020 16:04
Show Gist options
  • Select an option

  • Save macx/e45f207229f2a0ccc489 to your computer and use it in GitHub Desktop.

Select an option

Save macx/e45f207229f2a0ccc489 to your computer and use it in GitHub Desktop.
These are the libraries and tools I am using.

The answer of: What are you using?

Often my students and followers ask me, what tools and libraries I am using and why. Here is a small but growing list of some of them.

Shortlink: bit.ly/what-are-you-using

General Questions My Answer
Are you using a CSS preprocessor? Yes, I'm using Sass
Isn't a CSS postprocessor better? Depends. I'm using Sass and PostCSS together
Which IDE do you use?  Visual Studio Code, see list below
Do you using a toolchain? Depending on a projects it's Webpack, Grunt or Gulp

IDE

Visual Studio Code (VSC) is the one and only – in terms of look and feel, speed, expandability. For years I used SublimeText 3, bofore VSC. And I tried Atom, but was horrible slow.

Plugins I'm using in SVC

General Questions My Answer
Auto Rename Tag Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
EditorConfig for VS Code EditorConfig Support for Visual Studio Code

Coding Guidelines

I strongly believe in meaningfull markup (HTML) and classes (Styles, CSS). Therefore I'm using my own Methodology on BEM. Example:

// block module
.m-card {...}

// element
.m-card__image {...}

// modifier
.m-card--compact {...}

// or as a state
.m-card {
  &.is-opened {...}
}  

Layouts

Slider & Helper

Responsive Gallery

  • My favourite is Magnific Popup but requires jQuery. MIT-Licence
  • baguetteBox is build in pure JavaScript. MIT-Licence
  • PhotoSwipe can handle them as well. MIT-Licence
  • is also coded in vanilla. MIT-Licence
  • For Inline use I use slick. MIT-Licence

Recommentations

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment