Skip to content

Instantly share code, notes, and snippets.

@chlab
chlab / README.md
Last active April 28, 2021 09:48
vue webpack boilerplate: how to add env-specific build targets

When using the vue-webpack-boilerplate, you will have only a production build by default (besides dev and test setups). My team often has at least another environment we call "staging" where the client can test new features before we move them to production. Oftentimes, these environments will have env-specific config values, like a different API URL.

With the changes outlined below, you can create a separate config per environment. This assumes you've created a Vue.js project with vue-webpack-boilerplate.

  1. Apply the changes to the corresponding files in your project as outlined below
  2. Now, when you run npm run build staging it will build your project with the config values specific to your staging environment. You can easily add any number of other environments and build them the same way. npm run build or npm run build production will still build your production environment.
@keirwhitaker
keirwhitaker / srcset.liquid
Created July 12, 2017 14:42
An example of how to use srcset in Shopify themes
{% for product in collection.products %}
<a href="{{ product.url | within: collection }}">
{% assign image = product.featured_image %}
<img src="{{ image.src | img_url: '480x' }}" alt="{{ image.alt | escape }}"
srcset="
{% if image.width > 640 %}{{ image.src | img_url: '640x' }} 640w{% endif %}
{% if image.width > 720 %},{{ image.src | img_url: '720x' }} 720w{% endif %}
{% if image.width > 900 %},{{ image.src | img_url: '900x' }} 900w{% endif %}
"
sizes="(min-width: 960px) 450px, (min-width: 720px) 50vw, 100vw"
@hectorlorenzo
hectorlorenzo / Main.md
Last active November 13, 2020 11:09
Learning React when coming from Vue

Learning React the Vue way

componentDidMount

Part of the component lifecycle, similar to created/mounted.

componentWillUnmount

Part of the component lifecycle, similar to destroyed

Mobile Safari's 100% Height Dilemma

Whether you're developing a web application with native-ish UI, or just a simple modal popup overlay that covers the viewport, when it comes to making things work on iDevices in Mobile Safari, you're in for a decent amount of pain and suffering. Making something "100% height" is not as easy as it seems.

This post is a collection of Mobile Safari's gotchas and quirks on that topic, some with solutions and fixes, some without, in good parts pulled from various sources across the internets, to have it all in one place. Things discussed here apply to iOS8, iOS9 and iOS10.

The Disappearing Browser Chrome

Screen real estate on smartphones is limited, so Mobile Safari collapses the browser chrome (address bar and optional tab bar at the top, and tool bar at the bottom) when the user scrolls down. When you want to make something span exactly the height of the viewport, or pin something to the bottom of the screen, this can get tricky because the viewport changes size (or

@plasticbrain
plasticbrain / gulpfile.js
Last active February 13, 2024 14:31
gulp.js task to deploy code to remote servers
/*******************************************************************************
* Description:
*
* Gulp file to push changes to remote servers (eg: staging/production)
*
* Usage:
*
* gulp deploy --target
*
* Examples:
textarea,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="search"] {
-webkit-appearance: none;
border-radius: 0;
}
@kkirsche
kkirsche / Install Composer to use MAMP's PHP.md
Last active January 30, 2024 02:30
How to install Composer globally using MAMP's PHP

##Create an alias to MAMP's PHP installation

To do this, we can simply create an alias for our bash profile. We'll be doing this is nano, though you can do it in vim or a number of other editors as well.

Within the terminal, run:

nano ~/.bash_profile

This will open nano with the contents, at the top in a blank line add the following line: