James Wilson

Web developer. Drupal enthusiast. Surfer and musician. I craft bespoke websites at Bluespark.

Some useful Keyboard Shortcuts for Developers on Mac

At Bluespark we use KnowYourCompany.com to ask interesting questions of team members every week.

This week’s internal team question was a particularly interesting one for me so I decided to share it more widely:

What are some of your most-used keyboard shortcuts (Mac or Windows)?

I use keyboard shortcuts on Mac a lot so prepare yourself for my very liberal interpretation of “some” because most of these I do use on a daily basis.

macOS/OSX Standard shortcuts:

These shortcuts come standard on all Apple Macintosh machines running OSX or macOS.

Shortcut Description
⌘⇧3 Take a fullscreen screenshot (I have screenshots setup to save to a custom folder in Bluespark Dropbox).
⌘⇧4 Cross-hairs to select a screen area for a non-fullscreen screenshot.
⌘SPACE Open Spotlight; used as an app launcher.
⌥⌘SPACE Open Finder search.
⌥⌘→/← Depends on application, but usually switches tabs within an application.
⌘TAB Switch applications (I hide my dock and use this to switch between apps).
^⇧↓ Show all windows of current app, then use right/left arrows to navigate through and select a window with space bar.
^⇧↑ Shows all windows on current desktop.
⌘Q Quit current app.
⌘W Close current window (or tab) without quitting app.
⌘N Open new item (depends on app).
⌘T Open new tab (depends on app; works on Finder, Chrome, Terminal).
⌘, Open current app preferences.

macOS/OSX custom curated shortcuts:

Custom global shortcuts can be added via  › System Preferences › Keyboard › Shortcuts › App Shortcuts › All Applications. You need to save the title of the menu item. More information can be found in this KB article on support.apple.com.

Shortcut Description
⌥⌘, Open System Preferences. Store the menu item as System Preferences...
^⇧SPACE Change keyboard language. 🇺🇸🇪🇸🇫🇷
⌥⌘V Paste from Flycut clipboard manager. (Configured directly in app).

Word processing (standard macOS/OSX shortcuts):

Note these work in any word processing app, including Terminal, Notes, Mail, Evernote, Chrome, etc.

Shortcut Description
^A Goto beginning of current line. (⌥↑ sometimes also works).
^E Goto end of current line. (⌥↓ sometimes also works).
^⇧A Select text from current position to beginning of line.
^⇧E Select text from current position to end of line.
⇧↑ Select the line above.
⇧↓ Select the line below.
⌥→/← Goto start/end of current word. (Doesn’t work consistently in all applications).
⌥⇧→/← Select text from current position to start/end of current word. (Doesn’t work consistently in all applications).
Delete previous letter.
fn⌫ Delete next letter.
⌥⌫ Delete text from current position to beginning of line.
^K Delete text from current position to end of line.

Google Chrome (standard shortcuts):

Shortcut Description
⌘⇧⌫ Delete browser cache.
⌥⌘I Open Chrome Developer Tools panel, then once launched, Fn+F1 opens settings panel to disable Javascript.
⌘⇧N Open Private Browsing window; useful for testing unauthenticated version of sites while logged in on normal browser session.

Google Chrome (custom URL bar shortcodes):

Add/edit these in Settings › Manage search engines. The %s in URLs will be used as substitution for the search string in <CODE>.

Keycode Description / Query URL
j <ISSUE_ID> Goto JIRA Issue page.
https://<yourcompany>.atlassian.net/browse/%s
j <PROJECT_ID> Goto JIRA Issues listing for project.
https://<yourcompany>.atlassian.net/browse/%s
jpi <PROJECT_ID> <some string> Execute a JIRA contextual project text string search.
https://<yourcompany>.atlassian.net/secure/QuickSearch.jspa?searchString=%s
c <PROJECT_ID> Open Confluence space for specified project.
https://<yourorg>.atlassian.net/wiki/display/%s
dn <ISSUE_ID> Open the specified Issue on drupal.org.
https://www.drupal.org/node/%s
da <FUNCTION> Search for function name on api.drupal.org.
https://api.drupal.org/%s
dp <MODULE> Goto module page on Drupal.org.
https://www.drupal.org/project/%s
dpi <MODULE> Goto issue queue on Drupal.org.
https://www.drupal.org/project/issues/%s
ghb <REPO> Open Repo on your organization’s Github account.
https://github.com/<yourorg>/%s

Crear un sitio multi-idioma con Drupal 8

Esto es un guía que se puede utilizar para instalar Drupal en multiples idiomas. Fue creado originalmente para un taller de 1 hora en DrupalCamp Ecuador el 16 de Octubre de 2015 en Quito, Ecuador.

Para crear un sitio multi-idioma en Drupal 7 revisa mi post del año pasado: Los ABC de Multi-idioma en Drupal 7.

Puedes encontrar los diapositivos aquí: /slides/multilenguaje-drupal-8.html.

  1. Crear un Sitio

    • Abrir una cuenta en Pantheon.io.
    • Crear un sitio en el Dashboard de Pantheon.
    • Instalar Drupal 8 RC-1.
  2. Instalar Drupal

    • Selecciona español como lenguaje predeterminado.
    • Crear cuenta de Administrador.
  3. Agregar idioma

    • Ingresar como Administrador.
    • Administrar > Configuración > Regional e idioma > Idiomas
      URL: admin/config/regional/language
    • Click botón: Agregar idioma y selecciona el inglés.
  4. Detección y selección

    Qué idioma utilizar y cuándo?

  • Administrar > Configuración > Regional e idioma > Idiomas: Detección y selección
  • Habilitar “URL” como método principal de detección.
  1. Alternador de idiomas

    Colocar el bloque del alternador de idiomas en la primera barra lateral del sitio.

  • Administrar > Estructura > Diseño de bloques
    URL: admin/structure/block
  • En la region de la Primera barra lateral, aplasta el botón: Colocar bloque.
  • Buscar y colocar el bloque Alternador de idioma.
  • Deshabilitar la opción: Mostrar título y cliquear Guardar el bloque.
  • Regresar al sitio para visualizar el Alternador.
  1. Configurar fecha y hora

    Por defecto Drupal usa mes/día/año (el format común del ingles) lo que hay que cambiar a día/mes/año.

URL: /admin/config/regional/date-time

También se recomienda crear formatos más comunes en español como:

  • Long: admin/config/regional/date-time/formats/manage/long
    “Lunes el 19 de Octubre de 2015 a las 11:15 pm”
    l \e\l j \d\e F \d\e\l Y \a \l\a\s h:g a
  • Medium: admin/config/regional/date-time/formats/manage/medium
    “Lunes 19 de Octubre 2015 - 11:15 pm”
    l j \d\e F Y - h:g a
  • Short: admin/config/regional/date-time/formats/manage/short
    “19/10/2015 - 11:15 pm”
    d/m/Y - h:i a
  1. Habilitar módulos para traducción

    • Administrar > Extender
      URL: admin/modules
      • Dejar deshabilitado Configuration Translation. 1
      • Seleccionar los siguientes módulos:
    • Content Translation
    • Interface Translation (se habilita este modulo automáticamente cuando se instala Drupal en español).
      • Entender la diferencia entre traducción de Contenido y traducción de la Interfaz de usuario.
        • La interfaz del usuario
    • Son cadenas de texto traducible en el núcleo de Drupal y sus módulos.
    • localize.drupal.org: Contribuir, descargar, y actualizar las traducciones.
    • Gestionar (buscar, traducir, exportar, importar, actualizar) a través de una sola interfaz: admin/config/regional/translate - El contenido (o sea entidades y campos)
    • Son datos y textos almacenados dentro del contenido creado para tu sitio a través del sistema de entidades y campos en Drupal.
    • No se puede compartir ni exportar las traducciones de contenido con Drupal core.
    • No hay un solo lugar para ver todas las traducciones de contenido. La gestión se encuentra como pestaña en la configuración de cada entidad creado en tu sitio.
  2. Habilitar traducción de Entidades

    • Administrar > Configuración > Regional e idioma > Content language and translation
      URL: admin/config/regional/content-language
    • Seleccionar las siguientes entidades:
      • Contenido
      • Bloque personalizado
      • Enlace de menú personalizado
      • Término de taxonomía
    • Habilitar las siguientes opciones para todas las entidades seleccionadas:
      • Traducible. (Dejar seleccionados los campos predeterminados.)
      • Muestra el selector de idioma al crear y editar paginas.
      • Idioma predeterminado: Interface text language selected for page.
    • Click botón: Guardar configuración
  3. Crear página con enlace de menú y traducirlo

    • Administrar > Contenido: Agregar contenido: Página básica
      URL: node/add/page
    • Titulo: Acerca de
    • Cuerpo: Cuerpo de texto para la pagina de Acerca de.
    • Proporciona un enlace de menu en la barra lateral: Opciones del Menú
    • Click botón: Guardar y publicar
    • Click pestaña: Editar
    • Click pestaña: Translate
    • Agregar traducción para inglés.
      • Title: About us
      • Body: Body text for the About us page.
      • No tocar la traducción del menú.
    • Administrar > Estructura > Menus > Main navigation > Edit menu
      URL: admin/structure/menu/manage/main
    • Seleccionar operación: Traducir para el enlace de “Acerca de” y proporcionar una traducción al inglés: About us
  4. Crear artículo con categoría e imagen y traducirlo

    • Administrar > Contenido: Agregar contenido: Página básica
      URL: node/add/article
      • Titulo: Un artículo
      • Cuerpo: Un artículo en español.
      • Etiquetas: Noticias
      • Proporcionar una imagen con texto alternativo Drupal Ocho en español.
      • Click botón: Guardar y publicar
    • Click pestaña: Editar
    • Click pestaña: Translate
    • Agregar una traducción en inglés.
      • Titulo: An article
      • Cuerpo: An article in English.
      • Deja las Etiquetas tales como están.
      • Alternative Text: Drupal Eight.
  5. Traducir etiqueta ‘Noticias’ al inglés

    • Administrar > Estructura > Taxonomía
      Cliquear Lista de términos para el vocabulario Etiquetas.
      URL: admin/structure/taxonomy/manage/tags/overview
    • Cliquear la operación Traducir para el termino ‘Noticias’.
    • Agregar una traducción en inglés: News y Guardar.
    • Regresar al sitio y busca la version en inglés del artículo para verificar que esta traducido.
  6. Agregar un bloque personalizado

    • Administrar > Estructura > Diseño de bloques
      URL: admin/structure/blocks
    • Colocar bloque > Añadir bloque personalizado
      • Descripción del bloque: Un bloque lateral
      • Cuerpo: Hola! Esto es un sitio de prueba para mostrar la funcionalidad de traducción de Drupal 8.
      • Click botón: Guardar
      • Seleccionar region: Primera barra lateral
      • Click botón: Guardar el bloque
    • Regresar al sitio, encuentra el bloque en la barra lateral y haz click en la opción de Traducir.
    • Agregar una traducción en inglés:
      • Block description2: A sidebar block
      • Body: Hello! This is a test site to demonstrate the translation functionality in Drupal 8.
      • Click botón: Save
  7. Personalizar y traducir el nombre del sitio y slogan

  • Abrir: admin/config/system/site-information
    • Nombre de sitio: D8 Multilenguaje
    • Lema: Instalando Drupal 8 en varias idiomas
    • Guardar configuración.
  • Habilitar el modulo Configuration Translation 3.
  • Abrir: admin/config/regional/config-translation
  • Buscar ‘System information’ y click Traducir.
  • Agregar traducción al inglés.
    • Site name: D8 Multilanguage
    • Slogan: Installing Drupal 8 in various languages
    • Guardar traducción.

Extras

  1. Alternador de idiomas como menú desplegable

OJO: parece que esta funcionalidad está fallando en Pantheon.

  • Buscar en la página del proyecto Language Switcher Dropdown un enlace para el archivo zip del modulo para Drupal 8.
  • Copiar el enlace al portapapeles.
  • Abrir Administrar > Extender > Instalar nuevo modulo.
  • Pegar el enlace y hacer click en Instalar.

Subir el módulo descomprimido dentro de la carpeta /modules mediante SFTP o GIT (dependiendo de tu configuración en Pantheon). Ambas requiere una aplicación


Notas al pie:

1, 3. Actualmente hay un error del PHP Runtime en la gestión de tipos de contenido cuando instalas Drupal en español y habilitas el modulo de Configuration Translation. Ver Issue #2584603.

  1. El campo de la Descripción del bloque tiene un problema en la traducción y por lo tanto la versión traducido del cuerpo del bloque siempre saldrá con el título en el idioma original. </sub>