27 May

12 Favorite Atom Tips and Shortcuts to Improve Your Workflow

Atom is the code editor released and maintained by the GitHub team. Released in 2014, the “Sublime Text killer” has over 1.1 million monthly users, and it’s no surprise: easily expandable, customizable and hackable, the IDE has become the favorite of many developers.

Despite its wide use, I often see competent developers taking the long way around to do things, or not knowing about its true potential. This post explores some tricks for improving your Atom workflow. I’m hoping that, by the time you’ve finished, you'll have learned at least one new trick you can't live without.

Note: Although this post is for Atom users, a lot of these tips and shortcuts also work in Sublime Text.

Tips

The first stop is some general Atom tips. There options you can enable, features the IDE has, and menu settings you never knew existed. It's worth having a look through all the menu options --- as you might spot something you never knew was there!

Multiple Cursors

On of the most impressive features of Atom is its multiple cursor support. This enables to you type many things at once, on multiple lines, anywhere in the document. Just hold cmd and click in every place you want to type. There are also other ways to get multiple cursors --- but we'll cover them later with keyboard shortcuts.

Auto Indent

One annoyance I have is when I copy code from somewhere and the indentation is all over the place. Luckily, Atom has you covered. Select the code and head to Edit > Lines > Auto Indent. This should copy the current indentation on the file to correct your code.

To speed this up, I’ve created a custom keyboard shortcut, enabling me to use Ctrl + Cmd + ] at any point. To do the same, go to Atom > Keymap and paste the following:

'atom-text-editor': 'ctrl-cmd-]': 'editor:auto-indent'
Show invisibles

To make sure the document and all lines are using the correct indentation, I've enabled invisibles in my editor. This shows ··· for space indentation, » for tab and ¬ for new line characters. This helps you see exactly where you have mixed tabs and empty news filled with spaces.

Although it makes your screen feel "busy" to begin with, you soon get used to it, and I now find it invaluable.

To do this, go to Atom > Preferences > (Scroll Down) Show Invisibles.

Soft wrap

I despise having to scroll left and right and up and down, so to make sure there's only one direction, I've enabled soft wrap in Atom. This makes sure nothing goes off the edge of the screen but wraps around. If it has wrapped the line, it indents it to the same level as the previous line and replaces the line number in the gutter with a ·.

To enable this option, it’s a few checkboxes down from the Show invisibles option in Atom > Preferences > (Scroll Down) Soft Wrap.

Character case convert

Sometimes you have text that's the in wrong case. You might want all uppercase, or you may need to convert a SHOUTY SENTENCE to all lowercase. Located in the Edit > Text menu is some clever text manipulation tools, including Upper Case and Lower Case functions.

Continue reading %12 Favorite Atom Tips and Shortcuts to Improve Your Workflow%

27 May

Phinx – the Migration Library You Never Knew You Needed

You're building an application, and you need to share the database's structure with your team. After all, you want everyone to be up and running as soon as possible. What do you do? SQL dumps of table structures? You could... but that's so very primitive - and can be time consuming to import, too! More often than not, database migrations are the answer.

In this tutorial, we'll go through a framework-agnostic package for building and executing database migrations called Phinx.

Bootstrapping

First, let's install Phinx into the project with Composer:

composer require robmorgan/phinx

The Phinx binary will be installed into the vendor/bin folder, as per Composer's default values. It can then be executed by running:

php vendor/bin/phinx

Phinx needs a phinx.yml file from which to read the database configuration before it can do anything meaningful. To generate it, we run:

php vendor/bin/phinx init
Configurations

The generate file will look something like this:

paths: migrations: %%PHINX_CONFIG_DIR%%/db/migrations seeds: %%PHINX_CONFIG_DIR%%/db/seeds environments: default_migration_table: phinxlog default_database: development production: adapter: mysql host: localhost name: production_db user: root pass: '' port: 3306 charset: utf8 development: adapter: mysql host: localhost name: development_db user: root pass: '' port: 3306 charset: utf8 testing: adapter: mysql host: localhost name: testing_db user: root pass: '' port: 3306 charset: utf8

Phinx supports an arbitrary number of "databases", though these should be considered version of one database rather than several different ones. Sometimes, the need may arise to use a completely different database, however.

Such is the case, for example, with nofw, which in a previous version still uses Gatekeeper - a secure but clumsily developed user authorization package. Gatekeeper demands its own phinx.yml file (with a custom migration path) and does not provide an option to change which one is used, while at the same time requiring its own user database. That throws a wrench into the whole "let's use Phinx in a project already using Gatekeeper" idea.

For cases like these, Phinx offers the -c option which tells the launcher which phinx.yml file to use. Note that Phinx supports json and php file formats, too, but we'll focus on the default yml one here and create a separate file for our example database.

Continue reading %Phinx – the Migration Library You Never Knew You Needed%

27 May

inStyle (Modifying the Current Selector `&` in Sass)

The following is a guest post by Filip Naumovic. Filip has built a Sass tool to help with an issue I know I've experienced many times. You're happily nesting in Sass. You're maybe a level or two deep, and you need to style a variation based on some parent selector. You need to either break out of the nesting and start a new nesting context, or go nuclear with @at-root. I'll let Filip tell the story of his

inStyle (Modifying the Current Selector `&` in Sass) is a post from CSS-Tricks

27 May

Web Development Reading List #139: Finding Your Passion, Autofilling Forms And ES6 Tricks

  

Finding our passion is a big challenge for all of us as human beings. At some point in life, we try to figure out what our purpose in this world is, what our future will look like. And for some of us, the answers we find to these questions are constantly changing.

The constant search to find answers lets us stay curious, creative, vital — and if that’s missing, we need to find our passion again by exploring what things we like in our world, what makes us happy. Searching takes time, and we should invest that time — maybe by cutting down watching TV by an hour a week.

The post Web Development Reading List #139: Finding Your Passion, Autofilling Forms And ES6 Tricks appeared first on Smashing Magazine.

27 May

A Look At The Modern WordPress Server Stack

  

Editor's Note: Today marks a special day for WordPress. Powering many websites (and yes, Smashing Magazine is one of them), it celebrates its 13th birthday today. Happy birthday, dear WordPress! Here's to many more!

Do you remember when you could run a “fast” WordPress website with just an Apache server and PHP? Yeah, those were the days! Things were a lot less complicated back then.

Now, everything has to load lightning-fast! Visitors don’t have the same expectations about loading times as they used to. A slow website can have serious implications for you or your client.

The post A Look At The Modern WordPress Server Stack appeared first on Smashing Magazine.

27 May

Fullscreen Background Videos with Bideo.js

Advertise here via BSA

Fullscreen background videos that autoplay right when the webpage loads (above the fold) has become quite a popular trend these days. Rishabh has built Bideo.js, which is an easy-to-use JS based plugin that works over HTML5 video element and does the right job of showing a background video inside a container basically. He has put […]

The post Fullscreen Background Videos with Bideo.js appeared first on WebAppers.

Sponsors

Professional Web Icons for Your Websites and Applications

26 May

Make a Simple JavaScript Slideshow without jQuery

"I just want to make a simple JavaScript slideshow without jQuery."

The slideshow --- also known as the image carousel, the slider, or the rotating banner --- is a commonly requested tutorial among people who are learning JavaScript.

In this tutorial, we'll cover the following topics:

make a basic slideshow without any external libraries like jQuery understand UX and accessibility issues, including whether you should use a slideshow at all add controls to your slideshow.

The main benefits of not using a library for your slideshow are that your page performs better --- due to less code --- and you can use the slideshow anywhere without worrying about loading any extra files.

This tutorial assumes you know some JavaScript, including functions, click events, and style changes. For anyone who'd find it helpful, I've written a quick roadmap of which things to learn to do practical things with JavaScript as soon as possible.

Make a Basic Slideshow The HTML

For the HTML, we'll need a container for the slides, and the slides themselves. Here's how that will look:

<ul id="slides"> <li class="slide showing">Slide 1</li> <li class="slide">Slide 2</li> <li class="slide">Slide 3</li> <li class="slide">Slide 4</li> <li class="slide">Slide 5</li>
</ul>
The CSS

The core CSS will need to accomplish these things:

define a container for the slides position the slides on top of each other in their container define what a slide should look like when it's showing or hiding transition the opacity for a fade effect.

Before looking at the CSS, remember you might need to change the class and id names to avoid conflicts in your own sites. The names in this article were picked to be short and readable.

Here's how the core CSS will look:

  #slides { position: relative; height: 300px; padding: 0px; margin: 0px; list-style-type: none;
} .slide { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; z-index: 1; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s;
} .showing { opacity: 1; z-index: 2;
}

Now, you can add other styles to change how the slideshow looks. I used the following for this demo:

  .slide { font-size: 40px; padding: 40px; box-sizing: border-box; background: #333; color: #fff;
} .slide:nth-of-type(1) { background: red;
}
.slide:nth-of-type(2) { background: orange;
}
.slide:nth-of-type(3) { background: green;
}
.slide:nth-of-type(4) { background: blue;
}
.slide:nth-of-type(5) { background: purple;
}
The JavaScript

The JavaScript has one job: hide the current slide and show the next one. To accomplish this, we just have to change the classes of the slides in question.

Here's how the JavaScript will look:

var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000); function nextSlide() { slides[currentSlide].className = 'slide'; currentSlide = (currentSlide+1)%slides.length; slides[currentSlide].className = 'slide showing';
}

Let's break down what's happening here.

First, we're using querySelectorAll to get the slides from our container. Next, we're setting a variable to keep track of the current slide. Then we're creating an interval to show the next slide every two seconds (expressed as 2000 ms).

Let's take a deeper look at what's happening inside the nextSlide function:

First, we change the current slide's class so it's not showing. The CSS transition handles the fade out automatically. Then we add one to the current slide, but we use the % operator to cycle back to zero if we've reached the end of the slides. As a quick reminder, the % operator divides two numbers and spits out the remainder. This is great for cases where you have to do math with cycles like a clock or a calendar. In this case, we have 5 slides, so here's what happens with each number: 1%5=1, 2%5=2, 3%5=3, 4%5=4, and 5%5=0. Once we have the new slide's number, we change that slide's class so that the slide is showing. Once again, our CSS opacity transition handles the fade effect automatically.

Congrats! Now you have a basic slideshow.

Continue reading %Make a Simple JavaScript Slideshow without jQuery%

26 May

Building Extensions for Microsoft Edge

[author_more]

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

Extensions have been the top-requested end-user feature of Microsoft Edge since we launched, and we're excited to be previewing extensions in Edge starting with Windows Insider Preview build 1429. In this talk we'll walk through how we're working to build a trustworthy extensions ecosystem, while making it easy for developers to easily write interoperable extensions that enhance the browsing experience.

This article is part of the web development series from Microsoft tech evangelists and engineers on practical JavaScript learning, open source projects, and interoperability best practices including Microsoft Edge browser and the new EdgeHTML rendering engine.

We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.microsoftedge.com, including F12 developer tools — seven distinct, fully-documented tools to help you debug, test, and speed up your webpages. Also, visit the Edge blog to stay updated and informed from Microsoft developers and experts.

Continue reading %Building Extensions for Microsoft Edge%