Faster loading googlefonts

Sometimes when you use googlefonts, the external/CDN could be the bottleneck (especially if you live in a country where the hop to next country is slow, like in Indonesia). This article give a good tips how to load your page faster. Just replace the $CSS on this snippet to your googlefont's CSS:

<!-- Preemptively warm up the fonts’ origin -->
<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

<!-- Initiate a high-priority, asynchronous fetch for the CSS file. Works in
     most modern browsers -->
<link rel="preload"
      as="style"
      href="$CSS&display=swap" />

<!--  Initiate a low-priority, asynchronous fetch that gets applied to the page
      only after it’s arrived. Works in all browsers with JavaScript enabled. -->
<link rel="stylesheet"
      href="$CSS&display=swap"
      media="print" onload="this.media='all'" />

<!-- In the unlikely event that a visitor has intentionally disabled
     JavaScript, fall back to the original method. The good news is that,
     although this is a render-blocking request, it can still make use of the
     preconnect which makes it marginally faster than the default. -->
<noscript>
  <link rel="stylesheet"
        href="$CSS&display=swap" />
</noscript>

State of Svelte UI Libraries

Awesome list of Svelte component libraries, which is CSS Framework that have Svelte integration. Here's the comparison among them all:

Component	SvelteStrap 3.2.8	Svelma	Bulma Components	Svelte-MUI	Svelte-Chota	Smelte
Based on	https://getbootstrap.com/	https://bulma.io/	https://bulma.io/	https://material.io/	https://jenil.github.io/chota/	https://material.io/
URL	https://bestguy.github.io/sveltestrap/	https://c0bra.github.io/svelma/install	http://svelte-bulma-components.surge.sh/	https://svelte-mui.ibbf.ru/	https://alexxnb.github.io/svelte-chota/	https://smelte.netlify.com/
Layout	Container, Row, Col	div.tile			Container, Row, Col
Alert/Flash/Toast	Alert, Toast	Message, Notification, Snackbar.(), Toast.()		Snackbar		Snackbar
Breadcrumb	Breadcrumb
Buttons	Button			Button, ButtonGroup	Button	Button
Card	Card	article.media			Card	Card
Animation	Collapse, Fade	Collapse		Ripple	Details
Dropdown	Dropdown		Dropdown			Select
Forms	Form, FormGroup, Label, Input	Field, Input, Switch		CheckBox, Datepicker, Datefield, Textfield, Radio	Input, Field, Radio, Checkbox	TextField, SearchBar
Jumbotron/Hero	Jumbotron	section.hero
List	ListGroup					List
Modal/Dialog	Modal	Dialog.(), Modal	Modal	Dialog	Modal	Dialog
Nav/Tabs/Pills/Acordion	Nav	Tabs	TabsContainer	ExpansionPanel, Menu	Nav, Tabs	Tabs, Menu
NavBar with Mobile	NavBar		Navbar	Sidepanel		NavigationDrawer
Pagination	Pagination		Pagination
Progress	Progress, Spinner	Progress				PorgressLinear, ProgressCircular
Table	Table	table.table				DataTable
Icon		Icon	.fa	Icon	icon*=mdi*, Icon
Tag/Label					Tag	Chip
Media	Media					Image
Tooltip						Tooltip
Treeview						Treeview

There's also many CSS Framework that doesn't use Javascript such as: TentCSS, Milligram, Mustard, MiniCSS, Bulma, and Chota (on the table).

Update 2020: there's SvelteMaterialUI and IBM Carbon Svelte

Update 2021: Svelte Materialify

Bootstrap Alternative

Today we're gonne see more alternative of css framework such as Bootstrap (and JQuery UI)

Semantic UI

Pure.css (by Yahoo)

Foundation

UIKit


How about a nice Editor for CSS?

EnjoyCSS (web based)

Stylizer (mac, 79$)

MacRabbit Expresso (mac, 75$)

Responsive Site Designer (windows, mac, 189$)

SimpleCSS (windows, mac)

Koala (windows, mac, linux)
if you have trouble running, do this:
sudo ln -s /lib64/libudev.so.1 /lib64/libudev.so.0

StyleMaster (windows, mac, 59$)

Rapid CSS Editor (windows, 29$)

EnginSite CSS Editor (windows, 109$)

HTML Pad (windows, 35$)


Forget about bootstrap, how about if I don't know anything about CSS at all?

CSS Reference

CSS Almanac

Flexbox CheatSheet

Learn CSS Layout

How to Learn CSS in 24 Hours


But what if I want more than just CSS Framework? I demand GUI! (warning: mostly slow load)

Qooxdoo

DHTMLX

Dojo Toolkit

KendoUI

WebIX

WinJS

W2UI

ExtJS ($4000+)

VueJS Components

ReactJS Components


B-b-but I like Bootstrap, is there any GUI Builder?

LayoutIt

BootPly

Brix.io (14$)

JetStrap

PineGrow (desktop,  25$+)

Pingendo (desktop)

BootstrapStudio (25$)

Bootstrap Website Builder (windows, mac)

Lavish (customize color theme from a picture)

BootsWatchr or BootstrapMagic or Cluckles (bootstrap realtime preview)

BootUI (mac, windows, 49$)

Frontenda

Mobirise Website Builder (windows, mac, 145$)

BootstrapEditor (templates)

CodePly

BootTheme

well, that's it for now.. btw here's a comic about fullstack~