Bianca rochabianca

a Front-end developer who also know a little bit of design and love to make gifs

rochabianca / meta_tags.html

Created November 29, 2018 20:31

Meta Tags for SEO

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Title of your page</title>
	<meta name="description" content="description of the contents of your website">
	<meta property="og:type" content="website"/>
	<meta property="og:title" content="Title of your website"/>
	<meta property="og:description" content="can be the same description as meta description"/>
	<meta property="og:url" content="http://url_of_your_website.com"/>

rochabianca / reset.scss

Created November 29, 2018 20:34

CSS Reset for browser's styles

	/* http://meyerweb.com/eric/tools/css/reset/
	v2.0 \| 20110126
	License: none (public domain)
	*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,

rochabianca / icon_animation.html

Created November 29, 2018 20:58

jQuery icon animation on hover. You can get a better view here: https://codepen.io/rochabianca/pen/pQQmWd?editors=1111

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>
	<body>
	<svg class="icon__book" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 45.1">

rochabianca / pixel_to_em.scss

Created December 5, 2018 20:54

	// $pixel - number to be converted on em
	// $context: font-size base (most browsers use 16px)

	@function em($pixel, $context: 16) {
	@return $pixel / $context + em;
	}

rochabianca / easy_media_queries.scss

Created December 5, 2018 20:57

	$l-device: 1200px;
	$m-device: 760px;
	$s-device: 480px;

	@mixin d($size) {
	@if $size == l {
	@media screen and (min-width: #{$l-device}) {
	@content;
	}
	}

rochabianca / gettingDownWithStyle.html

Created December 17, 2018 12:14

slower and way more cool scroll to an section in the page. It needs jQuery

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>
	<body>
	<a href="#reference" class="styled-down">Click Me</a>

rochabianca / gettingDownWithStyleVanilla.js

Created December 17, 2018 17:50

a animated scroll down, this time with vanilla js

	function scrollIt(destination, duration = 200, easing = "linear", callback) {
	const easings = {
	linear(t) {
	return t;
	},
	easeInQuad(t) {
	return t * t;
	},
	easeOutQuad(t) {
	return t * (2 - t);

rochabianca / numberFormatter.js

Created January 23, 2019 12:56

format a number without putting decimals (something like that)

	let num = 24674
	const formattedNum = num.toFixed(0).replace(/(\d)(?=(\d{3})+$)/g, "$1.") // if you want to use commas instead of dots, you can
	// replace the "$1." to "$1,"

	console.log(formattedNum) // 24.674

rochabianca / example_threads.py

Created March 2, 2019 15:47

a simple example of how to make threads on python

	import threading # essa é a biblioteca responsável pela crianção das threads
	from datetime import datetime # biblioteca usada para pegar o tempo do sistema


	def nao_passou_dois_segundos(tempo_inicial, tempo_final):
	# verifica se o tempo no sistema agora é igual ao tempo inicial + o tempo que eu quero (nesse caso seria o tempo inicial + 2 segundos)
	if(datetime.now().second == (tempo_inicial + tempo_final)):
	# caso sim, retorna falso e para a thread
	return False
	else:

rochabianca / Example.vue

Created August 19, 2019 12:57

Function to map fields direct on vuex

	<template>
	<form>
	<label for="email">Email</label>
	<input type="email" id="email" name="email" v-model="email" />

	<label for="senha">Senha</label>
	<input type="password" id="senha" name="senha" v-model="senha" />
	</form>
	</template>