vikrantnegi

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

vikrantnegi

<?php if (have_posts()) : while (have_posts()) : the_post(); $post_type = get_post_type( get_the_ID() );

    if ($post_type == 'case_study') ?>
    <div class="col-sm-4 col-xs-12">
      <a href="<?php the_permalink(); ?>" class="gallery-box">
        <figure>
          <?php the_post_thumbnail('medium', array('class' => 'gallery__img')); ?>
          <figcaption class="gallery__caption">
            <div class="gallery__caption-in">
              <h3 class="gallery__tag"><?php the_title(); ?></h3>

vikrantnegi

function determineDropDirection(){
  $(".dropdown-menu").each( function(){

    // Invisibly expand the dropdown menu so its true height can be calculated
    $(this).css({
      visibility: "hidden",
      display: "block"
    });

    // Necessary to remove class each time so we don't unwantedly use dropup's offset top

vikrantnegi

react-native init location-tracking

vikrantnegi

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import RNLanguages from 'react-native-languages';
import i18n from 'i18n-js';

import en from './translations/en.json';
import fr from './translations/fr.json';
import de from './translations/de.json';

type Props = {};

vikrantnegi

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Use for caching/memoize for better performance

import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,

vikrantnegi

const translationGetters = {
  // lazy requires (metro bundler does not support symlinks)
  ar: () => require("./src/translations/ar.json"),
  en: () => require("./src/translations/en.json"),
  fr: () => require("./src/translations/fr.json")
};

const translate = memoize(
  (key, config) => i18n.t(key, config),
  (key, config) => (config ? key + JSON.stringify(config) : key)

vikrantnegi

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // set initial config
  }

  componentDidMount() {
    RNLocalize.addEventListener("change", this.handleLocalizationChange);
  }

vikrantnegi

INSERT GRAPHIC HERE (include hyperlink in image)

Repository Title Goes Here

Subtitle or Short Description Goes Here

vikrantnegi

const BookCardComponent = props => {
  const { thumbnail, title, authors, onPress } = props;

  return (
    <View style={styles.shadow}>
      <TouchableOpacity
        onPress={onPress}
        style={{
          flexDirection: "row",
          padding: 8