List of websites resource

From CSS-tricks

Compress and uncompress files and folders in the Terminal in macOS

ZIP – Cross Platform

to compress:

zip -r archive_name.zip folder_to_compress

to extract:

unzip archive_name.zip

TAR.BZ2 – Cross Platform

to compress:

tar -jcvf archive_name.tar.bz2 folder_to_compress

to extract:

tar -jxvf archive_name.tar.bz2

source

What Input?

Javascript Library.
A global utility for tracking the current input method (mouse, keyboard or touch).

source

CSS Tools

Free tools for CSS:

• media queries
• units
• vendor prefixes
• image filters
• clip-paths
• minify
• breakpoints

source

Animista

http://animista.net/

css animations

Fluid Type

Fluid type examples

source

Entity Metadata Wrapper Tutorial

Drupal EMW is way much easier for manipulate node or any drupal entity.

Tutorial

Local Domain Names for MAMP

In order to use multiple local dev site on one MAMP directory, using Mac Apache host and virtual host. Then I can enter http://local-site.dev into my browser and it will respond as if it had its own domain.

The first source is not end, because it's need to work on other pages but front

but adding this code

DocumentRoot "/Users/mac/Documents/GIT/ok.mine"
ServerName ok.mine
ServerAlias www.ok.mine

everything is fixed.

Drupal module to note

Chosen uses the Chosen jQuery plugin to make your <select> elements more user-friendly.

module

Patch on MAC

I have to research every time. so here my note:

$ patch < example.patch

If you are patching core then remember to patch from the drupal root directory and use the -p0 parameter to patch. This will stop patch from asking you which file you wish to patch:

$ patch -p0 < example.patch

If your patch is patching files that mention a & b directories in the patch, you can use the -p1 parameter to get rid of the a/b directories.

$ patch -p1 < example.patch

source

Installing Drush on MAMP

This is the procedure I used. If I need cache the PHP version remember it's in the bash_profile file.

source

MINDS

https://www.minds.com/mineminelli

Image Slider JavaScript gallery

One more on the list. Caption, share and fullscreen buttons, tap to toggle controls

Very good job. I have to try soon, after Slick last project

PhotoSwipe - JavaScript gallery, no dependencies.

and the Drupal module

Range Inputs Styling

If I need for next project. Input range CSS Generator.
http://danielstern.ca/range.css

Carousel

slider/carousel with source article

Telegraph

My first post: http://telegra.ph/It-sound-really-interesting-12-04

sandwich menu icon

Three line menu navicon from CSS-Tricks

source

Only CSS

Javascript not anymore
How to make some interesting tools only with CSS (Sass) and HTML
modal, form validation, scroll indicator, accordion, tabs, lightbox.

YOU MIGHT NOT NEED JAVASCRIPT

Adaptive Image

A drupal module https://www.drupal.org/project/adaptive_image

Send emails from localhost

Useful tutorial on how to setup your mac in order to send emails via Gmail.
This tutorial is about how to configure Postfix for Mac OS X El Capitan.

http://www.developerfiles.com/how-to-send-emails-from-localhost-mac-os-x...

Drupal 7 execute javascript code after a ajax call

You save my life!!!

http://www.maged.me/blog/drupal-7-execute-javascript-code-after-ajax-call

100% w in limited width parent

https://css-tricks.com/full-width-containers-limited-width-parents/

Graffiti 2

Graffiti

Remove has_js cookie

Smart way for remove Drupal cookie has_js for anonymous users

stackoverflow source

Drupal su server Aruba.it

Il problema del "Internal Server Error" dato dai file .htaccess creati da Drupal

http://andypanix.com/articoli/hosting-di-piccoli-siti-drupal-7-su-aruba

favicon Generator

https://realfavicongenerator.net/

Apache, MySQL, phpMyAdmin and MAMP

Get Apache, MySQL, PHP and phpMyAdmin working on OSX 10.11 El Capitan... (and MAMP)

https://coolestguidesontheplanet.com/get-apache-mysql-php-and-phpmyadmin...

Element Queries

It'd be nice

https://www.smashingmagazine.com/2016/07/how-i-ended-up-with-element-que...

A third of your visitors need glasses!

Font size conversion
A chart of font sizes stated in points, pixels, ems, percent and keywords.

https://websemantics.uk/articles/font-size-conversion/

Generate colors palette

Easy to use and smart idea for build a color palette

https://coolors.co

Design Tools

and many more again from CSS-trick.com

https://css-tricks.com/collaborative-engineering-design-tools/

Creative form input field design

https://medium.com/swlh/creative-form-input-field-design-examples-bfe5dd...

Vanish

http://www.iflscience.com/technology/a-step-by-step-guide-on-how-to-remo...

Cool styles and effects for button

Good example for many button styles.

http://tympanus.net/Development/CreativeButtons/

CSSgram

CSS library for image filters like Instagram.
https://una.im/CSSgram/

A tiny (<1kb gzipped!) library for recreating Instagram filters with CSS filters and blend modes.

Drupal 8 Base

Drupal 8 Base is a fresh and clean repo to begin with a new installation of Drupal 8 but with the Configuration Management based on the File and not the Database storage. It provide also a Robo build script to create a new Drupal 8 installation.

https://github.com/vincenzodibiaggio/drupal8_base

AMP and Drupal

Accelerated Mobile Pages AMP make web pages super fast on mobile

https://www.lullabot.com/articles/how-to-try-out-amp-with-drupal

Custom use of Google Analytics

Learning to Use Google Analytics More Effectively at CodePen

https://css-tricks.com/learning-use-google-analytics-effectively-codepen/

New way to create responsive emails without media queries

The solution involves the CSS calc() function and the three width, min-width and max-width properties.

https://medium.freecodecamp.com/the-fab-four-technique-to-create-respons...

SVG Links

Interesting collection of links about SVG: calendars, slider, icons, animation...

https://css-tricks.com/svg-funsville-links/

How to animate "box-shadow"

How do you animate the box-shadow property in CSS without causing re-paints on every frame...

http://tobiasahlin.com/blog/how-to-animate-box-shadow/

Vertical alignment

smart -or douchebag- way of vertical alignment.

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

source

Converter

Convert everything!!
free online file conversion

http://www.zamzar.com/

ASCII Art Generator

You can type any text and get it ASCIIed in 100+ styles.

Text to ASCII Art Generator

A Complete Guide to Flexbox

As always CSStricks

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Headroom.js

JS library for header scroll up/down animation. Hide your header until you need it.

http://wicky.nillia.ms/headroom.js/

Build a query

A tool to help build Quantity Queries for your CSS projects.

http://quantityqueries.com/

Free HQ photos

Sites with High Quality Photos You Can Use for Free.

https://css-tricks.com/sites-with-high-quality-photos-you-can-use-for-free

Mobile detect

One line function to detect mobile devices with JavaScript:

function isMobileDevice() {
    return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};

source

App

App app app
https://www.appgyver.com/

Staggering Beauty

http://www.staggeringbeauty.com/

Automatic page load progress bar

PACE

Automatic page load progress bar

Progress indicator for your page load and ajax navigation. Like in youtube
http://github.hubspot.com/pace/docs/welcome/

SimpleXML: Selecting Elements Which Have A Certain Attribute Value

still into PHP SimpleXML and XPath

this is the XML sample

<object>
  <data type="me">myname</data>
  <data type="you">yourname</data>
  <data type="me">myothername</data>
</object>

and this the XPath in order to get the element data with type="me":

$myDataObjects = $simplexml->xpath('/object/data[@type="me"]');

source

Commerce price table

Drupal Commerce

module allow different prices on different quantity per item.
https://www.drupal.org/project/commerce_price_table

Drupal Commerce

How to I get the Product SKU from a Commerce Line Item?

http://www.drupalcommerce.org/questions/3838/how-i-get-product-sku-comme...

CSS Arrows

HTML element arrow generator

http://www.cssarrowplease.com/

Mine tools

the Father: SuperMegaCalculator_IV (PowerBookG4 12')
the Son: Calculator Junior (MacBook Pro 15')

Continue...

https://plus.google.com/u/0/+mineminelli

G-plus was my first note book.