Danny Brown dannyrb

Animated Lock Opening - Fixed

Graduating from Bootstrap with help from Atomic Design

Bootstrap defines itself as "... the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web." and it's not wrong. At 105,000 stars, and over 48,000 forks on GitHub, it comes in as the second most popular repository of all time. Bootstrap is an amazing tool, but it's not without it's problems. Have you ever found yourself overriding a default Bootstrap style? Including CSS or JS for components you don't use? Or maybe you're just tired of your website looking like everyone else's? We put up with this technical debt because of the wins Bootstrap provides, but what if we could keep the benefits without all of the headache? Enter Atomic Design.

In this discussion, we will start by exploring the problems Atomic design solves, how it promotes consistency/cohesion, easily traverses from abstract to concrete, and provides methodology for crafting an effective design system. Next we will get our hands dirty by diggi

Creating Hybrid Mobile Apps That Don't Stink

Level: 200 - Category: Web

Tags: Style, Design, UI

More Info

Recently when refactoring a Vue 1.0 application, I utilized ES6 arrow functions to clean up the code and make things a bit more consistent before updating to Vue 2.0. Along the way I made a few mistakes and wanted to share the lessons I learned as well as offer a few conventions that I will be using in my Vue applications moving forward.

The best way to explain this is with an example so lets start there. I'm going to throw a rather large block of code at you here, but stick with me and we will move through it a piece at a time.

<script>

// require vue-resource...

new Vue({

BroadcastChannel Polyfill

BroadcastChannel is a new communication API proposed in the HTML Standard but not yet widely implemented. It allows messages to be sent to all other BroadcastChannel instances sharing the same channel name within the same browsing context and origin.

var bc = new BroadcastChannel('name');

bc.postMessage(payload);

	<!-- Update your html tag to include the itemscope and itemtype attributes. -->
	<html itemscope itemtype="http://schema.org/Article">

	<!-- Place this data between the <head> tags of your website -->
	<title>Page Title. Maximum length 60-70 characters</title>
	<meta name="description" content="Page description. No longer than 155 characters." />

	<!-- Schema.org markup for Google+ -->
	<meta itemprop="name" content="The Name or Title Here">
	<meta itemprop="description" content="This is the page description">


	<div class="container">
	<div class="night-sky"></div>
	<div class="stars"></div>
	<div class="stars2"></div>
	<div class="stars3"></div>
	<div class="mountains">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" preserveAspectRatio="xMaxYMin meet" viewbox="0 0 110 160">
	<!-- Where the magic happens -->
	<defs>

	## Resources
	## Original: https://library.octopusdeploy.com/step-templates/21a2ae12-e721-42c1-901d-d6ed08007ca7/actiontemplate-slack-notify-deployment

	## Slack API JSON
	## https://api.slack.com/docs/messages/builder

	## Octopus Variables
	## http://docs.octopusdeploy.com/display/OD/System+variables

	import axios from "axios";

	async function getMediumFeed() {
	try {
	const mediumRssFeed = "https://medium.com/feed/coffee-driven-dev";
	const rssToJsonApi = "https://api.rss2json.com/v1/api.json";
	const data = { params: { rss_url: mediumRssFeed } };
	return await axios.get(rssToJsonApi, data);
	} catch (error) {
	console.error(error);

	<template><!-- Business as usual --></template>

	<script>
	export default {
	name: 'BasicForm',
	data() {
	return {
	// Default setup uses 'form' object in
	// data as cache target and restore cache target
	form: {