Sass Cheatsheet


$white: #FFF;

body {
  color: $white;


Example 1

@mixin font-size($times) {
  font-size: $times * 1.2px;

.highlight {
  @include font-size(3);

Example 2

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;

.box {
  @include border-radius(10px);


%button {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;

.white-button {
   @extend %button;
  background-color: #FFF;

.green-button {
   @extend %button;
  background-color: #00FF00;

 ReactJS: JSX Patterns for New React Developers

I’ve been working with ReactJS for a while now and here are a few things I’ve known that makes it easier for new ReactJS developers to work with ReactJS.

1. Lists

  render() {
    const { taskItems } = this.props;
    return => {
      return (
        <div key={}>

2. Shortcut validation and render

render() {
  {hasContent(taskItems) && <TaskItemsModal />

3. Ternary conditions

render() {
    ? <TaskItemsModal
        taskItems={taskItems} />
    : ""}

4. Transferring props

<Parent value="honesty" />

class Parent extends React.Component {
  render () {
    return <Child {...this.props} />

5. Managing States

Initializing state

constructor(props) {
  this.state = {
    name: "Eric"

Setting state

this.setState({ name: 'Nick' })

Using the state

render () {
  const { name } = this.state;

Default State

class People extends React.Component {
  constructor (props) {
    this.state = { loading: false }

See: ReactJS States

6. ReactJS synthetic events

class UserForm extends React.Component {
  constructor() {
    this.onChange = this.onChange.bind(this);
    this.state = {
      value: ''

  onChange (event) {
    this.setState({ value: })

  render () {
    <input type="text"
        onChange={this.onChange} />

Reference: ReactJS Events

 ActiveModel::ForbiddenAttributesError in ActiveAdmin

Active Admin is one of the most famous Rails gems built to create instant administration pages. Active Admin is a highly recommended gem. I have known a lot of production-ready sites that are using this particular gem.

There are a few things you need to learn while working with Active Admin. Aside from your typical Rails application, you will also have to learn Active Admin DSL.

Here’s a problem often encountered by Ruby on Rails developers working with Active Admin.


This particular error informs us that strong parameters is being used and you will need to define the parameters your form is submitting. Here’s the particular fix:

ActiveAdmin.register Topic, as: "News" do
  # Add the following
  permit_params :event_date, :title, :body

You will need to replace event_date, title and body with your parameters.

and voila! fixed!

Screen shot 2018 02 13 at 9.55.16 pm

 How to center text in HTML

HTML is considered the language of the internet. It is primarily used for creating web pages that is easily understood by browsers. CSS are files used to format web pages.

We are now going to use CSS to format our text.

Deprecated way

This is the old way of doing this. This method has been deprecated in favor of the recommended way below:

<center>Your text</center>

Recommended way

The recommended way is to use the rule:

text-align: center;

Screen shot 2018 01 31 at 11.58.02 pm