ajmalafif

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    location ~ ^/.well-known {
        root /var/www/ghost;
    }

    location / {
        return 301 https://$server_name$request_uri;

ajmalafif

Make it real

Ideas are cheap. Make a prototype, sketch a CLI session, draw a wireframe. Discuss around concrete examples, not hand-waving abstractions. Don't say you did something, provide a URL that proves it.

Ship it

Nothing is real until it's being used by a real user. This doesn't mean you make a prototype in the morning and blog about it in the evening. It means you find one person you believe your product will help and try to get them to use it.

Do it with style

ajmalafif

import FontFaceObserver from './fontfaceobserver'
 
;(function (w) {
  // if the class is already set, we're good.
  if (w.document.documentElement.className.indexOf('fonts-loaded') > -1) {
    return
  }
  var openSansFont = new w.FontFaceObserver('Open Sans', {
    weight: 200
  })

ajmalafif

" Two env variables must be added to TravisCI settings:
" AWS_SECRET_ACCESS_KEY
" AWS_ACCESS_KEY_ID

before_deploy:
  pip install --user awscli
deploy:
  provider: script
  script: ~/.local/bin/aws s3 sync dist s3://MY_BUCKET_NAME --region=us-west-2 --delete
  skip_cleanup: true

ajmalafif

#MAIN_1 {
    box-sizing: border-box;
    color: rgb(4, 4, 2);
    cursor: default;
    display: flex;
    height: 2526.08px;
    max-width: 100%;
    text-decoration: none solid rgb(4, 4, 2);
    text-size-adjust: 100%;
    width: 960px;

ajmalafif

#DIV_1 {
    bottom: 0px;
    box-sizing: border-box;
    color: rgb(4, 4, 2);
    cursor: default;
    display: flex;
    height: 646.75px;
    left: 0px;
    min-height: auto;
    min-width: auto;

ajmalafif

.DottedBox {
  margin: 40px;
  border: 5px dotted pink;
}

.DottedBox_content {
  font-size: 15px;
  text-align: center;
}

ajmalafif

import React from 'react';
import styles from './DashedBox.css';

const DashedBox = () => (
  <div className={styles.container}>
    <p className={styles.content}>Get started with CSS Modules style</p>
  </div>
);

export default DashedBox;

ajmalafif

Pagination 101

Article by Faruk Ateş, [originally on KuraFire.net][original] which is currently down

One of the most commonly overlooked and under-refined elements of a website is its pagination controls. In many cases, these are treated as an afterthought. I rarely come across a website that has decent pagination, and it always makes me wonder why so few manage to get it right. After all, I'd say that pagination is pretty easy to get right. Alas, that doesn't seem the case, so after encouragement from Chris Messina on Flickr I decided to write my Pagination 101, hopefully it'll give you some clues as to what makes good pagination.

Before going into analyzing good and bad pagination, I want to explain just what I consider to be pagination: Pagination is any kind of control system that lets the user browse through pages of search results, archives, or any other kind of continued content. Search results are the o

ajmalafif

// There's two ways to use Tachyons together with styled-components
// Both are valid, which one you use depends if you want to always apply a tachyons class when a certain component
// is rendered or if you want to apply it for specific instances.

// 1. Use .attrs to define classNames that should always be applied to a styled component
//    Whenever you use <Component /> now it'll have both the styled-components as well as the Tachyons class
//    See the docs for more info: https://www.styled-components.com/docs/basics#attaching-additional-props
const Component = styled.div.attrs({
  className: 'bw0-l',
})`