Brian Zelip brianzelip

For minimalist ❤️ ers

Settings > Core Settings > Title Bar: hidden
Settings > Packages > Tabs > Always Show Tab Bar: false
Settings > Themes > UI Theme: Apex https://atom.io/themes/apex-ui
Settings > Themes > Syntax Theme: Apex https://atom.io/themes/apex-syntax

Just you, your code and nothing else.... :meditatingbuddha:

Today, single page web apps are driving many websites that we use each and every day. Instead of having your browser request a new web page for each and every action you perform on a web page, single page web apps may load all in one request to smoothly and quickly transition with every action you perform.

When building single page web apps, you may decide to retrieve all of the HTML, CSS and Javascript with one single page load or dynamically load these resources as the user moves about your site. Either way, it can be a pain to bundle all of these assets together for the end user to download from your web server. This is where webpack comes into play.

webpack does all of the heavy lifting bundling all of your HTML, CSS and Javascript together. If you write your site all from scratch or depend on dependencies from npm, webpack takes care of packaging it all together for you. It has the ability to take your single page web app, cut out all of the code you don't need, then packa

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

SUIT CSS naming conventions + SUIT CSS design principles;
PostCSS + CSSNext. Future CSS syntax like variables, nesting, and autoprefixer are good enough;
Flexbox is awesome. No need for grid framework;
Normalize.css, base styles and variables are solid foundation for all components;

This document has moved!

It's now here, in The Programmer's Compendium. The content is the same as before, but being part of the compendium means that it's actively maintained.

Enable tab completion for JSX with Emmet in Atom

This guide assumes you have the emmet and language-babel packages already installed in Atom

Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
Add these lines of code to your keymap:

'atom-text-editor[data-grammar~="jsx"]:not([mini])':

How not to scale css

Several years ago I got curious about how css worked at scale. When I first started out, there weren’t nearly as many learning resources as there are now. CSS zen garden was amazing, at the time it showed how much you could change a design without altering the html.

In the beginning, that’s what people sold me as a feature. By writing css, you could make a change one place and have it propagate everywhere. In principle this sounds pretty good. I’m lazy so I like doing things one time. But eleven years later, my experience on both large and small teams is that this is the most terrifying thing about css.

https://twitter.com/thomasfuchs/status/493790680397803521

In the past few years a lot of very smart people have been thinking more about CSS and this has lead to some fascinating discussions around how to build ‘scalable’ ui and how that relates to CSS. When I first started to think about scalability I naturally started to read every blog post and watch every tech talk I could get

	function getNameWithLetAndConst(options) {
	// `name` scoped to its nearest parent block (here: the function-block)
	let name = 'Jill'

	if (options.test) {
	// `combined` is scoped to its nearest parent block (here: the if-block)
	// because of how block-scoping works, `name` is also available here
	const combined = `${name}-tested`

	if (options.someCondition) {

	<?php
	/**
	* Update Post Title from an ACF field value on post save.
	*
	* Triggers on save, edit or update of published posts.
	* Works in "Quick Edit", but not bulk edit.
	*/
	function sync_acf_post_title($post_id, $post, $update) {

	$acf_title = get_field('my_acf_field_name', $post_id); // NOTE: enter the name of the ACF field here

	import { EventEmitter } from 'events'
	import Firebase from 'firebase'

	// ENTER YOUR FIREBASE URL BELOW
	const db = Firebase.initializeApp({
	apiKey: 'YOUR_FIREBASE_APP_SECRET',
	databaseURL: 'https://YOUR_FIREBASE_APP.firebaseio.com/',
	});
	const categoriesRef = db.database().ref().child('categories')
	const bookmarksRef = db.database().ref().child('bookmarks')