25 JavaScript tools
Moment.js
momentjs.com
Work ing with dates and
times can be challenging.
The native Date object
provides little functionality
to help format and manage time zones.
Moment creates special objects that
enable devs to parse and format dates and
times any way that’s required. The size
can be kept small by only including the
locales needed for each project.
Anime.js
animejs.com
More sites are embracing
subtle animations. A small
animation is a great way to
catch the user’s eye and
create interest. CSS animations are ideal
for simple transitions that are known
ahead of time but what if the targets and
values change based on user input?
Anime.js is a tool that makes
animations easier to work with.
Everything starts with a call to ‘anime’, which defines everything about the animation
including the target, duration and any transitions to apply. Targets can be anything
from a DOM node to a JavaScript object, which can transition values inside of itself.
One great feature of Anime.js is the ability to create a path for an element to follow
based on a
to be used as a value for X/Y positioning for other animations. These can be stacked or
strung together to create a timeline without the need for specified offset values.
Pell
github.com/jaredreich/pell
A lot of projects make use of
a rich text editor. That might
be for a comments section
where styling options are
limited but load times are important, or
in a CMS where a large feature set is
essential. While there are a multitude of
WYSIWYG options out there, they can be
large, rely on outdated dependencies or
produce non-semantic markup.
Pell is a simple text editor weighing in at just over 3kB minified, making it smaller
than options like TinyMCE or Facebook’s Draft.js. There are also no dependencies to
rely on, which makes Pell a drop-in replacement for any existing editor.
While others may provide a bigger feature set, Pell focuses on doing the basics well.
Actions such as links, lists and images are present out of the box but custom features
can be added to suit the needs of any project. The look and feel can also be customised,
with Pell providing a SCSS variable file to overwrite as necessary.
Semantic UI
semantic-ui.com
Semantic UI is a set of
common components that
can be enabled as necessary
within any project. Common
patterns like breadcrumb navigations and
toggle buttons encourage are first created
with semantic HTML, which the library
enhances. Integrations for frameworks
like Vue and Angular are available to drop
into apps that simplify interface creation.Above There are plenty of examples of what is possible in
Anime.js on CodePen at codepen.io/collection/XLebemAbove By limiting the feature set, Pell can produce
semantic HTML that can be used anywhereCASE STUDY
BLOOMBERG
As Hillary Clinton became the
first female nominee in the 2016
presidential election, Bloomberg put
together a timeline of milestones in the
American feminist movement that led
to the historic moment.
To create the timeline, Bloomberg
used D3 to pull in the data and start
rendering dates. Each year created a
<section> element, with subsections to
hold information about Hillary Clinton
and the Women’s Movement.
Data is entered into a CSV file that
can be updated through its CMS. D3
can then read that information with a
dedicated csv() method and expose the
data to manipulate as necessary.
The CSV also includes supplementary
information about the numbers of
women in Congress, professional
occupations and the pay gap at the
time. This data gets held in an object
alongside each date. As the user scrolls
through the timeline, callbacks update
the charts to link all the information
together. D3 will make the updated
elements flash to indicate the change
to the user.
This meant Bloomberg was able to
show how two stories interacted in a
visually appealing timeline, with D3
doing the heavy lifting.Left As the screen
narrows, D3 enables CSS
to reflow the content to fit
the screenAbove As the user scrolls through the timeline
the chart data stays up to date