Skip to content

Instantly share code, notes, and snippets.

View letswritetw's full-sized avatar
🎯
Focusing

Let's Write - August letswritetw

🎯
Focusing
View GitHub Profile
@letswritetw
letswritetw / fb-sdk-share-sample-click.js
Last active July 25, 2018 08:35
fb sdk share sample
// 2. onclick事件
$(function() {
$(".js-fbshare").each(function() {
$(this).on("click", function(e) {
e.preventDefault();
var card = $(this).closest(".card");
FB.ui({
method: "share_open_graph",
@letswritetw
letswritetw / m-lazyload.sass
Created August 2, 2018 04:07
像Medium的漸近式圖片加載
.lazy-image
text-align: center
// img 先把透明度調成 0,才有淡入的效果
img
opacity: 0
transition: opacity 1s linear
// 將區塊等比例撐開
.small
@letswritetw
letswritetw / m-lazyload.html
Created August 2, 2018 04:11
像Medium的漸近式圖片加載
<!-- 16:9 -->
<div class="lazy-image w16-9">
<figure>
<!--
.js-get-img 用js抓原始大圖資訊
style 裡的 background-image 放 placeholder 作用的小圖
data-img 放原始大圖的路徑
-->
<div
class="small js-get-img"
@letswritetw
letswritetw / m-lazyload.js
Created August 2, 2018 04:14
像Medium的漸近式圖片加載
$(window).on('load', () => {
// 自由尺寸,先處理 padding-bottom
if($('.w-free').length > 0) {
$('.w-free').each(function() {
const w = $(this).find('.js-get-img').data('width'),
h = $(this).find('.js-get-img').data('height'),
pd = (h / w) * 100;
$(this).find('.js-get-img').css('paddingBottom', pd + '%');
});
}
@letswritetw
letswritetw / gcloud-config-command.js
Last active August 28, 2018 09:09
gcloud config command
// 看到所有接了GCP的專案
gcloud config configurations list
// [NAME]替換成專案的名字
gcloud config configurations activate [NAME]
// 看所有config的指令碼
gcloud config configurations --help
@letswritetw
letswritetw / gcloud-package.json
Last active August 28, 2018 09:58
gcloud-package
{
"name": "gcp-test",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "node NAME.js"
},
"author": "",
"license": "ISC",
@letswritetw
letswritetw / gcloud-app.js
Last active August 28, 2018 10:03
gcloud-app
// 引用express、path
const express = require('express');
const app = express();
const path = require('path');
// port的部份
const PORT = process.env.PORT || 8080;
app.listen(PORT);
// 開放的靜態檔放在public的資料夾裡
@letswritetw
letswritetw / extensions.json
Last active September 7, 2020 06:52
VSCode's Settings - Syncing
[
{
"id": "JakeWilson.vscode-cdnjs",
"name": "vscode-cdnjs",
"publisher": "JakeWilson",
"version": "0.14.3"
},
{
"id": "QassimFarid.ejs-language-support",
"name": "ejs-language-support",
@letswritetw
letswritetw / extensions.json
Last active February 5, 2021 02:25
VSCode's Settings - Syncing
[
{
"id": "A-Hjerpe.hacky-es6-template-strings",
"name": "hacky-es6-template-strings",
"publisher": "A-Hjerpe",
"version": "0.0.3"
},
{
"id": "alefragnani.project-manager",
"name": "project-manager",
@letswritetw
letswritetw / gradient-hover-effect-btn-after.sass
Last active September 28, 2018 08:26
gradient-hover-effect-btn-after.sass
.btn-linear
position: relative
&::after
content: ''
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1