Skip to content

Instantly share code, notes, and snippets.

View carlosazaustre's full-sized avatar
:octocat:
JavaScript all the things!

Carlos Azaustre carlosazaustre

:octocat:
JavaScript all the things!
4.1k followers · 250 following
View GitHub Profile
@w3cj
w3cj / youtube-live-chat-messages-api.md
Last active April 2, 2024 14:47
@IgnaciodeNuevo
IgnaciodeNuevo / scroll-to-top.html
Last active July 19, 2019 16:59
Scroll to top
<main class="main post" id="anchor" role="main">
Content...
</main>
<a id="topBtn" class="btn-fixed" href="#anchor">
Lleva a la parte superior de la página.
</a>
<script>
// When the user scrolls down 500px from the top of the document, show the button
@julianduque
julianduque / baal.theme.bash
Created March 31, 2019 13:10
Baal Bash-It theme by Julián Duque
#!/usr/bin/env bash
#
SCM_NONE_CHAR=''
SCM_THEME_PROMPT_DIRTY="⚡"
SCM_THEME_PROMPT_CLEAN=""
SCM_THEME_PROMPT_PREFIX="${cyan}[${green}"
SCM_THEME_PROMPT_SUFFIX="${cyan}] "
SCM_GIT_SHOW_MINIMAL_INFO=true
@julianduque
julianduque / cloud-modified.zsh-theme
Created March 31, 2019 13:06
# Modified version of Cloud theme by Julián Duque
ZSH_THEME_CLOUD_PREFIX="⬢"
PROMPT='%{$fg_bold[cyan]%}$ZSH_THEME_CLOUD_PREFIX %{$fg_bold[green]%}%p %{$fg[green]%}%c %{$fg_bold[cyan]%}$(git_prompt_info)%{$fg_bold[blue]%} % ($(node -v)) %{$reset_color%}'
ZSH_THEME_GIT_PROMPT_PREFIX="%{$fg[green]%}[%{$fg[cyan]%}"
ZSH_THEME_GIT_PROMPT_SUFFIX="%{$reset_color%}"
ZSH_THEME_GIT_PROMPT_DIRTY="%{$fg[green]%}] %{$fg[yellow]%}⚡%{$reset_color%}"
ZSH_THEME_GIT_PROMPT_CLEAN="%{$fg[green]%}]"
@sators
sators / arrayToCsv.js
Last active January 3, 2023 18:10
Convert Array of Objects to CSV with Javascript
/**
* Take an array of objects of similar structure and convert it to a CSV.
* @source https://halistechnology.com/2015/05/28/use-javascript-to-export-your-data-as-csv/
* @modifiedBy sators
* @param {Array} options.data Array of data
* @param {String} options.columnDelimiter Column separator, defaults to ","
* @param {String} options.lineDelimiter Line break, defaults to "\n"
* @return {String} CSV
*/
export default ({data = null, columnDelimiter = ",", lineDelimiter = "\n"}) => {
@ultimagriever
ultimagriever / migrate.js
Created August 26, 2016 15:33
Migrate Mongo -> Firebase
/**
* Migrate MongoDB database to Firebase.
* Syntax: node migrate.js [-c || --collection=]<MongoDB Collection> [ [-h || --host=]<MongoDB URI>]
* If no args are provided, the MONGODB_URI
* env variable declared in the .env file
* will be used instead.
*/
const env = require('dotenv');
const firebase = require('firebase');
@javivelasco
javivelasco / reactive-2016.md
Last active January 10, 2023 19:45
Proposal for lightning talk at Reactive Conf 2016

Please star ⭐️ the gist to help! This is a proposal for a ⚡️ talk at Reactive Conference.

Styling Components in React Toolbox 2

I wrote react-toolbox and presented it almost a year ago in lighning talk at Reactive Conf 2015 in Bratislava. At first it was just a proof of concept of a component library styled with CSS Modules and SASS. Now the project has grown quite a bit, and during this year there has been tons of changes and lessons learned.

Theming and customization is one of the most difficult and interesting problems to solve. For the first version we needed a custom Webpack loader to generate themes and doing simple style overrides was very painful. Today I'm working on a new playground that will allow you try CSS Modules live, and to create React Toolbox themes on the f

@puf
puf / index.html
Last active January 15, 2023 19:41
Zero to App: Develop with Firebase (for Web - Google I/O 2016)
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/3.0.0/firebase.js"></script>
<title>ZeroToApp</title>
<style>
#messages { width: 40em; border: 1px solid grey; min-height: 20em; }
#messages img { max-width: 240px; max-height: 160px; display: block; }
#header { position: fixed; top: 0; background-color: white; }
.push { margin-bottom: 2em; }
@keyframes yellow-fade { 0% {background: #f2f2b8;} 100% {background: none;} }
@yang-wei
yang-wei / note.md
Last active April 19, 2021 14:49
Vue.js tips and tricks

Notes: All the examples below are only tested on Vue.js 1.0 (above).

Notes: The examples below use ES6 so it's recommended to use browserify or webpack to easily integrate babel.

when or where can we use this.$el

When you need to access DOM attribute, be careful with the lifecycle. Vue.js has a few useful lifecycle hooks.

Let's say we want to scroll our component to the bottom (imagine it's a long list with overflow-y: auto) once it's instantiate.

@javivelasco
javivelasco / reactive-2015.md
Last active October 2, 2022 16:36
Proposal for lightning talk at Reactive Conf 2015

I’m amazed by React and how it’s bringing happiness to our developer lives. I specially like the workflow that integrates Webpack + React + CSS Modules + Babel among other tools and preprocessors. That’s why Javier Jiménez and I are working together in a library called React Toolbox that we would like to show in a lightning talk at Reactive Conference.

The main idea is to create a set of React components implementing Material Design guidelines. There are already some libraries that solve a similar problem but our project is mostly focused on the workflow and best practices to create a tool everybody would want to use. Also, we are sticking to the design guidelines proposed by Google and embracing minimalism by generating the minimum possible amount of HTML and styles to get the best result. Our workflow includes among others:

  • Webpack.
  • ES6 with Babel
  • Unit t