Front end Tips Tricks & Tools

May 1, 2015Download as PPTX, PDF0 likes923 views

This is a presentation on Front-end Tools Tips and Tricks by Sandeep Ramgolam, for the Developers Conference Mauritius 2015

1
Front-end Development Tools Tips & Tricks
Tools, Tips & Tricks
for
Front-endDevelopment
Starting @ 14:30
RAMGOLAM Sandeep
24 April 2015, Bagatelle, Mauritius

2
Front-end Development Tools Tips & Tricks
Who am I
• I make things for the web
• HTML/CSS guy
• I work at Prodigious.
- Front-end Developer
- Research & Development
• I also enjoy Music & Gaming
• I am a very lazy person

3
Front-end Development Tools Tips & Tricks
Agenda
• The Web
• Tools to Improve your workflow in
• HTML
• CSS
• General Purpose Tools

4
Front-end Development Tools Tips & Tricks
The Web
Browsers• Core Developers
• DNS Systems
• NSA
• The Internet
• Users
• Designers
• Backend Devs
• DB Admins
and….

5
Front-end Development Tools Tips & Tricks
The Web
HTML/CSS Guy!

6
Front-end Development Tools Tips & Tricks
The Web
New HTML/CSS/jQuery/UI/UX/Angular/Ember/NoSQL
Localstorage/SVG Animator/etc..

7
Front-end Development Tools Tips & Tricks
The Web
Lets try to make sense out of all that..

8
Front-end Development Tools Tips & Tricks
HTML
Writing html can be boring
It’s a pain..

9
Front-end Development Tools Tips & Tricks
HTML
Let’s think again…
How do we really write html?

10
Front-end Development Tools Tips & Tricks
HTML
Emmet! (Zen-Coding)

11
Front-end Development Tools Tips & Tricks
HTML
Zen Coding Demo

12
Front-end Development Tools Tips & Tricks
CSS
• Preprocessors
• Refresh CSS Plugin
• *SourceMaps(edit scss in chrome)

13
Front-end Development Tools Tips & Tricks
CSS
• Preprocessors
• extends css and gives it additional features
• SASS
• LESS
• Stylus

14
Front-end Development Tools Tips & Tricks
CSS
SASS vs LESS

15
Front-end Development Tools Tips & Tricks
SASS/SCSS
• How to install
$ gem install sass
$ gem install compass
• Prerequisites
• ruby
• rubygems

16
Front-end Development Tools Tips & Tricks
SASS/SCSS
Features of Preprocessors
• import anywhere
• nesting
• variables
• maths
• functions/mixins

17
Front-end Development Tools Tips & Tricks
SASS/SCSS
SASS Demo

18
Front-end Development Tools Tips & Tricks
CSS
CSS Reloader Plugin
https://chrome.google.com/webstore/detail/css-
reloader/dnfpcpfijpdhabaoieccoclghgplmpbd?hl=en

19
Front-end Development Tools Tips & Tricks
General Purpose Tools
• Prerequisites
• Nodejs
• Node Package Manager (npm)

20
Front-end Development Tools Tips & Tricks
-- httpster
-- bower
-- js task runner(gulp)
-- autoprefixr*
General Purpose Tools

21
Front-end Development Tools Tips & Tricks
General Purpose Tools
$ npm install –g httpster
• Httpster
• Super Simple web server
Purpose : saves lives!
Purpose : provides a quick web environment without
wamp/xampp/mamp/lamp/apache/sql/virtualhost hassle

22
Front-end Development Tools Tips & Tricks
Httpster demooo!
General Purpose Tools

23
Front-end Development Tools Tips & Tricks
General Purpose Tools
$ npm install –g bower
• Bower
• web package manager.
need a framework? a library? Its right here.

24
Front-end Development Tools Tips & Tricks
Bower demooo!
General Purpose Tools

25
Front-end Development Tools Tips & Tricks
General Purpose Tools
$ npm install –g gulp
• gulpjs
• JavaScript task runner
Purpose : Automate simple repetitive tasks

26
Front-end Development Tools Tips & Tricks
• copying files
• renaming files
• removing files
• compress css or javascript
• optimize images
• packaging files
• send file over ftp
• so much more!
gulpjs
• Repetitive tasks?

27
Front-end Development Tools Tips & Tricks
gulpjs
your project manager be like...

28
Front-end Development Tools Tips & Tricks
GulpJS demo
gulpjs

29
Front-end Development Tools Tips & Tricks
Thank You! Questions?

30
Front-end Development Tools Tips & Tricks
Contact Me
Email: Sandeep.Ramgolam@gmail.com
Twitter : @ _ _ sun _ _

- This document provides ground rules and an agenda for an introduction to web development session. Participants are asked to mute themselves and use the chat for questions. - The session will cover why web development, how the web works, HTML vs CSS vs JavaScript, HTML, CSS, Bootstrap, and JavaScript. There will also be hands-on activities and a project. - Contact information is provided for the student organization hosting the session.

Nginx, PHP and Node.jsHarald Zeitlhofer

The document discusses Nginx, PHP, and Node.js and how Dynatrace helps make them ready for enterprise use. It provides an overview of each technology, including how Nginx is a lightweight HTTP server, Node.js uses JavaScript for server-side applications, and PHP is an emerging language. It also explains how Dynatrace helps with integration and monitoring by loading agents to provide full transaction visibility across applications, databases, and technologies.

WordPress translation & Localisation : Avoid common mistakes by Makarand ManeMakarand Mane

This document provides guidance for translating WordPress into Indian languages. It outlines common mistakes to avoid, such as relying solely on Google Translate or including multiple translations for the same word. The document recommends using glossaries and translation guidelines, and communicating with other translators via forums and Slack channels. It also lists resources for Hindi, Marathi, and Gujarati translations on WordPress.org and ways to connect with those language communities.

Intro to webzgohr

The document introduces Rails web development by covering goals, the syllabus, and key concepts. It discusses what the web is made of (HTTP, HTML, CSS, JavaScript) and how requests work. Frameworks are introduced as a way to share functionality among websites. Rails is presented as a popular Ruby-based framework, and Nitrous.io and Heroku are demonstrated as tools for setting up environments and deploying Rails apps.

Top front-end techniques for OutSystemsRuben Goncalves

How do front-developers that have started testing or working with OutSystems generally view the Platform, before they get to fully harness its power? They usually say it's more restrictive than they're used to and that it doesn't allow them to do what they need to do. Fear no more! We're here to debunk that myth and show you that behind all its nuances, OutSystems has a truly powerful Platform that can enable you to build pretty much anything. In this presentation, you will: > Slay a dragon named "You can't do that with OutSystems!" > Understand (some of) the inner workings of the Platform. > Get some tips on how to organize your front-end code in a better way. > Learn how you can become much more productive doing front-end work with OutSystems. > Become an awesome front-end developer. It's all up to you, but we're giving you all the tools! This was an OutSystems webinar presented. Video @https://youtu.be/B_puSsNDgbg

Front End Tooling and Performance - Codeaholics HK 2015Holger Bartel

User eXperience & Front End Developmentandreafallaswork

Frontend SPOFPatrick Meenan

The document discusses the frontend single point of failure (SPOF) problem caused by blocking JavaScript and CSS files. It provides examples of popular websites, code libraries, widgets, and content management systems that contribute to frontend SPOFs. The document recommends solutions for browsers, widget owners, CMS developers, and site owners to address this issue through asynchronous loading of resources and better monitoring of frontend performance.

Sinau Bareng Frontend Web Development @ DiLo MalangMoch. Zamroni

Webinar: Front End Web Development - Trendy Web Designs Using HTML5Edureka!

Frontend automation and stabilityMáté Nádasdi

This document discusses frontend automation and stability. It recommends: 1. Writing unit tests using Mocha and Chai for efficient testing of separated layers and dependencies. 2. Performing UI testing using CasperJS for browser/DOM interaction or DalekJS for real browser support. 3. Integrating testing, code quality tools, and standards into a continuous integration system to catch errors and ensure code quality across contributors.

Architecting your FrontendRuben Teijeiro

Grunt js for the Enterprise Vol.1: Frontend Performance with PhantomasDavid Amend

建立前端开发团队 (Front-end Development Environment)Joseph Chiang

Wrangling Large Scale Frontend Web ApplicationsRyan Roemer

Web applications are massively shifting to the frontend, thanks to exciting new JavaScript / CSS technologies, expanding browser capabilities (visualizations, real-time apps, etc.) and faster perceived user experiences. However, client web applications can be a nightmare to maintain at scale, even for seasoned software architects and operations engineers. Deployment and production infrastructures are complex and rapidly changing. And, frontend JavaScript / CSS code ships to browsers worldwide, where errors and issues are notoriously difficult to systematically detect and diagnose. In this talk, we will tackle the wild west of the frontend with pragmatic steps and seasoned advice from helping organizations from startups to Fortune 500 companies create some of the largest frontend web applications on the Internet. In particular, we will examine the many hard lessons gleaned from leading frontend application development and education for a team of 50+ engineers rearchitecting a top-five e-commerce site. Some of the topics we will cover include: * Managing and building very large (500K+ line) frontend application / test code bases. * Surviving production traffic and errors on the frontend and handling spikes like Black Friday / Cyber Monday for one of the highest traffic e-commerce websites in existence. * How, where, and why your frontend application is likely to fail. * Monitoring, logging, and debugging frontend web applications out in the wild. * Automating checks, tests, and code introspection to protect your code in production. * Creating an effective, fast, and engineer-friendly development-test-deployment frontend pipeline. Whether your frontend application already supports millions of transactions a day or you are about to launch your first single-page-application, our aim is to prepare teams of all sizes for the most critical challenges and solutions facing modern frontend web applications.

A modern front end development workflow for Magnolia at AtlassianMagnolia

This talk was given by Nicolas Barbé, Magnolia, and William Paoli, Atlassian, at Magnolia Conference 2015 in Foster City, California. The recommended development process for Magnolia is based on a Java stack and its ecosystem. It provides the best foundations to customize the back-end or create new content applications. However, implementing a new template or modifying an existing theme with standard front-end practices can be a challenging task. In this talk, William and Nicolas describe how Atlassian, the creator of JIRA and Confluence, has built a modern front-end development workflow with Magnolia. How they decouple the back-end and front-end release process to deliver incremental changes to the user.

Frontend technologiesJose Ramon Roblero Ruiz

This document discusses different aspects of JavaScript including backend frameworks like MongoDB, ExpressJS, AngularJS and NodeJS. It also covers bundling tools like Browserify and Webpack for ES6 JavaScript as well as transpiling with Babel. Finally, it mentions frontend component libraries like ReactJS, Polymer and Web Components for building user interfaces with nested and reusable components.

How to Build Front-End Web Apps that Scale - FutureJSPhil Leggetter

Developing large apps is difficult. Ensuring that code is consistent, well structured, tested, maintainable and has an architecture that encourages enhancement is essential. When it comes to large server-focused apps, solutions to this problem have been tried and tested. But, with the ongoing dramatic shift of functionality into the browser, how do you achieve this when building Front-End Web Apps? In this talk we’ll cover the signs to watch out for as your HTML5 SPA grows and provide examples of some of the tooling types that can contribute-to - as well as ease - the growing pains. Finally, we’ll demonstrate how tooling can be used to support a set of conventions, practices and principles that enable a productive developer workflow where the first line of code is feature code, features can be developed in isolation, code conflicts are avoided by grouping assets by feature and features are composed into apps. The demonstrations will use the BladeRunnerJS open source developer toolkit, but the concepts are widely applicable.

W3 conf hill-html5-security-realitiesBrad Hill

Frontend at Scale - The Tumblr StoryChris Miller

Modern Frontend TechnologyShip Hsu

TechTalk #85 : Latest Frontend Technologiesbincangteknologi

In the last few years, there has been a trend towards shifting the business logic of web apps from the backend to the frontend, with the backend being delegated to a simple API. This makes the choice of a frontend framework that much more important. In 2015 we've seen a vast amount of new innovation in web development. We'll discuss the trends in this techtalk. source : http://survivejs.github.io/frontend-in-2015/#/

Front End Development Workflow ToolsAhmed Elmehri

This document discusses various tools used in the front end development workflow including scaffolding tools like Yeoman to prepare a project structure, package managers like npm and Bower to manage dependencies, and build tools like Grunt to build the project. It provides examples of how each tool is used and highlights key differences between front end and back end development as well as JavaScript and Java projects.

The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...Prasid Pathak

Over the past several years, as the role of the browser has grown, rich desktop-like apps have emerged built entirely in the browser. To enable this movement, a new generation of powerful JavaScript frameworks have emerged including EmberJS, AngularJS, BackboneJS, and React. In this 30 minute crash course on front end frameworks, Bloc co-founder and CTO Dave Paola will cover the history of front end web development, the recent emergence of these new Javascript frameworks, and go over some of the pros and cons for learning them. We'll hear from Bloc co-founder and CTO Dave Paola and Bloc Developer Christian Schlensker. Prior to Bloc, Dave was a developer at Kontagent, has over 15 years of software development experience, and has founded numerous other companies. Christian comes to Bloc from Pinchit and TAG where he was a developer. Prior to that, Christian was also a graphic designer. In our experience, beginners are often overwhelmed by buzz words like "HTML5," "JavaScript," and "Ruby." Without an experienced guide, they can spend months going down rabbit-holes drilling into specific languages, and emerge frustrated that they can't build a real website. Dave will start by helping you visualize the front end web development landscape. Comparing Angular, Ember, Backbone, and React 2 Once you understand the landscape, Dave will introduce the four major front end frameworks that have emerged over the past two years. He'll discuss the pros and cons of learning each one, from the point of view of a beginner. These four frameworks are: AngularJS, EmberJS, BackboneJS, and ReactJS.

engage 2015 - Domino App Development - Where should I go now?René Winkelmeyer

This document provides an overview of René Winkelmeyer as the head of development at midpoints GmbH. It includes information about his professional experience and qualifications, the services offered by midpoints, and his contact information across various social media and collaboration platforms. The bulk of the document consists of slides from a presentation given by René on the topics of stateless versus stateful application architectures, common web technologies, programming languages for application development, and mobile application capabilities.

Front End Development - Beyond Javascript (Robin Cannon)Future Insights

Session slides from Future Insights Live, Vegas 2015: https://futureinsightslive.com/las-vegas-2015/ Front-End Development is more than just a Javascript layer. Just because everything is single page apps and you’ve got Bootstrap to back up your Backbone, Ember or Angular, doesn’t mean you’re truly developing a presentation layer. Something that’s a truly great interface between the user and the back end requires the three pillars of front end web; javascript sure, but HTML and CSS are vital too. In this talk Robin redefines what it means to be a front-end developer, and explores frameworks that will help us to build things that users love. He'll cover the de-emphasis of HTML and CSS versus Javascript skills in front end web development, and the benefits of a broader approach that's only going to increase in importance as the Javascript MVC model matures.

Modern front end developmentTomislav Mesić

The document discusses the history and modern state of front-end development. It describes how front-end roles have evolved from C programmers to UX designers. Modern front-end uses HTML for content, CSS for design, and JavaScript for behavior. Key technologies include HTML5, CSS3, and JavaScript frameworks. The future of front-end development includes single page apps, native-like experiences, and further JavaScript optimization.

Scaling Front-End Performance - Velocity 2016Patrick Meenan

The document discusses strategies for improving front-end performance, especially for users on slow connections or mobile devices. It recommends dynamically adjusting content like images, scripts, and ads based on connection speed. Both client-side techniques using JavaScript and service workers as well as server-side methods like analyzing request headers and response times can help optimize the experience. Browsers are also intervening more aggressively to prioritize resources and content loading. The goal is to make websites faster and more usable for all users regardless of their network conditions.

Freelancer Weapons of mass productivityGregg Coppen

In the battle to stay organized, efficient, sane and maximize on billable time it helps to have systems in place to help deal with the daily business processes and management that make sure that you are working on what you should be and that projects, budgets and timelines stay on track. In particular, when you work on your own, its critical to have things like billing, time tracking and project management as a natural and seamless part of your workflow. This session aims to be a whistle stop tour of some useful open source tools and subscription solutions I have found to be well worth their costs - including how they can be used effectively together to allow you to make the most efficient use of your time designing and developing Drupal sites. I work as a remote contractor & consultant and my clients are drupal shops and companies needing web sites and systems designed, built, themed and/or maintained. These tools and services work for me to help stay organized and on top of my workload and help me to manage my responsibilities across multiple clients and timezones effectively. The material in this session is geared more towards individual freelancers although much of it will be relevant for larger drupal shops and teams too. A few of the topics I intend to cover will include * Project Management with Redmine - an overview of this powerful open source project management system and a demo of some of the plugins that extend its functionality and integrate well with Drupal, Dropbox, Github, Chrome and others. * Simplifying getting paid and easy record keeping - Easy invoicing, credit card processing and automatic importing of expenses using Freshbooks & Stripe * Design to theme tricks and up and coming in-browser design tools and workflows using Styletiles, CSS Hat, SASS, Typekit, Typecast & Livestyle * Faster Drupal development tips using Alfred & Sublime Text * Rapid protoyping using Bootstrap/Zenstrap * Site building strategies using install profiles and drush make files * Deployment and Maintenance using Aegir * Server monitoring using New Relic & load testing using Blazemeter * Hosting and managing your site in the cloud It is my aim to introduce ( in some cases briefly) tools and services that have made a difference to me that may have the potential to add to and improve your existing workflows.

How Open Source / Open Technology Could Help On Your ProjectWan Leung Wong

More Related Content

Viewers also liked (20)

Sinau Bareng Frontend Web Development @ DiLo MalangMoch. Zamroni

Webinar: Front End Web Development - Trendy Web Designs Using HTML5Edureka!

Frontend automation and stabilityMáté Nádasdi

Architecting your FrontendRuben Teijeiro

Grunt js for the Enterprise Vol.1: Frontend Performance with PhantomasDavid Amend

建立前端开发团队 (Front-end Development Environment)Joseph Chiang

Wrangling Large Scale Frontend Web ApplicationsRyan Roemer

A modern front end development workflow for Magnolia at AtlassianMagnolia

Frontend technologiesJose Ramon Roblero Ruiz

How to Build Front-End Web Apps that Scale - FutureJSPhil Leggetter

W3 conf hill-html5-security-realitiesBrad Hill

Frontend at Scale - The Tumblr StoryChris Miller

Modern Frontend TechnologyShip Hsu

TechTalk #85 : Latest Frontend Technologiesbincangteknologi

Front End Development Workflow ToolsAhmed Elmehri

The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...Prasid Pathak

engage 2015 - Domino App Development - Where should I go now?René Winkelmeyer

Front End Development - Beyond Javascript (Robin Cannon)Future Insights

Modern front end developmentTomislav Mesić

Scaling Front-End Performance - Velocity 2016Patrick Meenan

Sinau Bareng Frontend Web Development @ DiLo MalangMoch. Zamroni

Webinar: Front End Web Development - Trendy Web Designs Using HTML5Edureka!

Frontend automation and stabilityMáté Nádasdi

Architecting your FrontendRuben Teijeiro

Grunt js for the Enterprise Vol.1: Frontend Performance with PhantomasDavid Amend

建立前端开发团队 (Front-end Development Environment)Joseph Chiang

Wrangling Large Scale Frontend Web ApplicationsRyan Roemer

A modern front end development workflow for Magnolia at AtlassianMagnolia

Frontend technologiesJose Ramon Roblero Ruiz

How to Build Front-End Web Apps that Scale - FutureJSPhil Leggetter

W3 conf hill-html5-security-realitiesBrad Hill

Frontend at Scale - The Tumblr StoryChris Miller

Modern Frontend TechnologyShip Hsu

TechTalk #85 : Latest Frontend Technologiesbincangteknologi

Front End Development Workflow ToolsAhmed Elmehri

The Frontend Developer Landscape Explained and the Rise of Advanced Frontend ...Prasid Pathak

engage 2015 - Domino App Development - Where should I go now?René Winkelmeyer

Front End Development - Beyond Javascript (Robin Cannon)Future Insights

Modern front end developmentTomislav Mesić

Scaling Front-End Performance - Velocity 2016Patrick Meenan

Similar to Front end Tips Tricks & Tools (20)

Freelancer Weapons of mass productivityGregg Coppen

How Open Source / Open Technology Could Help On Your ProjectWan Leung Wong

Branding office 365 with front end toolingThomas Daly

This document discusses branding Office 365 using front end tooling. It begins with an introduction of the presenter and defines the discussion topics. It then describes branding assets, current deployment methods, challenges with Office 365 versus on-premises, and Microsoft guidance. The bulk of the document demonstrates setting up a project with Node, Gulp, and other tools to deploy branding assets like master pages, styles, and page layouts in a faster, more automated way compared to traditional methods. It highlights pros and cons of the approach and potential for hybrid scenarios. Key takeaways emphasize Office 365 branding changes and guidance to use alternative methods to custom master pages when possible.

What Multisite can do for You - Anthony Cole - WordCamp Sydney 2012WordCamp Sydney

- WordPress Multisite allows managing multiple sites from one WordPress install, providing centralized administration and upgrades. It can be an efficient and cost-effective solution for agencies managing multiple client sites. - The presenter initially set up Multisite for his agency to more easily upgrade and manage ten client sites. He discusses hosting considerations and recommends a VPS for Australian sites. - Key aspects of his Multisite implementation include using Git for version control, Pingdom for monitoring, and custom scripts for backups to S3. He advocates keeping implementations simple to ensure stability.

Branding Office 365 w/ Front End Tools + SharePoint PnPThomas Daly

Node.js 101FITC

Node.js 101 with Rami Sayar Presented by FITC at Web Unleashed 2014 in Toronto on September 18 2014, 10:30 - 11:15am Node.js is a runtime environment and library for running JavaScript applications outside the browser. Node.js is mostly used to run real-time server applications and shines through its performance using non-blocking I/O and asynchronous events. This talk will introduce you to Node.js by showcasing the environment and its two most popular libraries: express and socket.io. TARGET AUDIENCE Beginner web developers ASSUMED AUDIENCE KNOWLEDGE Working knowledge of JavaScript and HTML5. OBJECTIVE Learn how to build a chat engine using Node.js and WebSockets. FIVE THINGS AUDIENCE MEMBERS WILL LEARN Node.js environment and basics Node Package Manager overview Web Framework, express, basics WebSockets and Socket.io basics Building a chat engine using Node.js

[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...DevDay Da Nang

SEO Fundamentals Outline Lecture 2Kalin Chernev

FITC - Bootstrap UnleashedRami Sayar

OVERVIEW Twitter Bootstrap is a wildly popular HTML and CSS framework for building websites and web applications. It is the number 1 project on GitHub. Bootstrap supports responsive web design, allowing the layout of your page to adapt to the device (desktop, tablet, mobile). This talk will introduce you to the basics of using Bootstrap and show you how to build responsive web layouts to build your own app. TARGET AUDIENCE Beginner web developers ASSUMED AUDIENCE KNOWLEDGE Working knowledge of HTML5 and CSS3. OBJECTIVE Learn how to use Twitter Bootstrap to quickly build a beautiful, responsive web app. FIVE THINGS AUDIENCE MEMBERS WILL LEARN Twitter Bootstrap basics Bootstrap CSS basics Bootstrap responsive layouts Bootstrap components JavaScript Bootstrap plugins

Learning to codeSara-Jayne Terp

Automated perf optimization - html5 dev confMatthew Lancaster

The document discusses automating performance optimization for modern web applications. It describes defining performance issues to address, using tools to solve them, and integrating optimizations into the development process. Key parts that can be automated include minifying JavaScript and CSS, optimizing images, inlining styles, and removing unused CSS. Integrating these tasks with build tools like Grunt and deployment with Jenkins can make performance part of daily development.

Release Management with Visual Studio Team Services and Office Dev PnPPetter Skodvin-Hvammen

Learn about the capabilities of Visual Studio Online Services: – how you can setup continuous builds whenever a change is committed to the source repository – how to setup scheduled builds and deploys – how to target deployments for your dev, test, uat and prod environments – how to manage release security and use approval workflows Also learn how you can use Office Dev PnP PowerShell to support rapid and automated deployments and about other alternatives out there

State of angular ecosystemGiovanni Cândido da Silva

This is an overview of tools, libraries, and initiatives around Angular and Frontend development. Each topic deserves a talk by its own, so don't be shy. Even the presenter doesn't know all this stuff, but if you as a team or individual wants to take a quick look at what is the possibilities of the framework and its community and is evaluating if it will attend your project needs, check this slide. It also shows some tools that are not directly related to angular, but influences on the architecture. This talk was presented on the Brazil meetup group AngularBH and the majority of content is English.

Automated perf optimization - jQuery ConferenceMatthew Lancaster

Hinting at a better webChristian Heilmann

This document discusses ways to improve how web developers learn best practices through browser and tooling improvements. It suggests that linting and inline insights directly in code editors could help prevent mistakes by flagging issues early. A tool called webhint is highlighted that provides one-stop checking and explanations of hints related to performance, accessibility, security and more. The document advocates for customizing hints based on a project's specific needs and environment. Overall, it argues for accelerated learning through context-sensitive, customizable best practices integrated into development workflows.

Notes From Velocity Conference EuropeSiriusWay

Overboard.js - where are we going with with jsconfasia / devfestasiaChristian Heilmann

This document summarizes a talk given by Chris Heilmann on the current state and future of JavaScript. It notes that while JavaScript has become incredibly versatile, developers have a tendency to over-engineer solutions and add unnecessary complexity. This bloat slows down sites and hurts users. The document advocates taking a step back to focus on fundamentals and cleanup. It highlights upcoming ES6 features that provide a cleaner baseline and encourages using them responsibly while also fixing existing broken code.

Tpr1dzdn

Drupal is a flexible open source content management system (CMS) that has evolved beyond traditional document-centric CMSs. It has a large community for support, but also has a steep learning curve. It is a good choice for projects needing extensibility, but its architectural complexity and unclear development model can also present challenges. Overall, Drupal 7 would be the author's choice today due to its functionality, though one must check that needed features are present before adopting it.

Browser tools that make web development easierAlan Seiden

What is quality code? From cruft to craftNick DeNardis

No one sets out to create crufty code, but too often the pressure to "push it out the door and we'll fix it later" gets the best of us all. Before you know it, it's three projects later, the sun is still shining and you're still getting a paycheck. So where is the incentive to go back and clean under the rug? Poor core quality isn't just a developer problem, either. It bleeds into team moral, deters decision agility, and ultimately prevents team members from getting into flow. Quality code isn't something that requires a complete rewrite either (which is likely impossible), but can be accomplished with style guides, code reviews and a devotion to team investment time. The pressure to ship will always be there, but starting (or maintaining) projects with an agreed upon foundation alleviates developers and designers from making potentially hundreds of decisions each day. This leaves room for the decisions that actually matter. Learn how to transform your team, regardless of your position, into a lean, mean standards machine. Develop a multi-tier style guide, workflow and practices that focus on knowledge and consensus building. Eliminate the mundane decisions and allow the team to focus on its craft.

Freelancer Weapons of mass productivityGregg Coppen

How Open Source / Open Technology Could Help On Your ProjectWan Leung Wong

Branding office 365 with front end toolingThomas Daly

What Multisite can do for You - Anthony Cole - WordCamp Sydney 2012WordCamp Sydney

Branding Office 365 w/ Front End Tools + SharePoint PnPThomas Daly

Node.js 101FITC

[DevDay2019] Web Development In 2019 - A Practical Guide - By Hoang Nhu Vinh,...DevDay Da Nang

SEO Fundamentals Outline Lecture 2Kalin Chernev

FITC - Bootstrap UnleashedRami Sayar

Learning to codeSara-Jayne Terp

Automated perf optimization - html5 dev confMatthew Lancaster

Release Management with Visual Studio Team Services and Office Dev PnPPetter Skodvin-Hvammen

State of angular ecosystemGiovanni Cândido da Silva

Automated perf optimization - jQuery ConferenceMatthew Lancaster

Hinting at a better webChristian Heilmann

Notes From Velocity Conference EuropeSiriusWay

Overboard.js - where are we going with with jsconfasia / devfestasiaChristian Heilmann

Tpr1dzdn

Browser tools that make web development easierAlan Seiden

What is quality code? From cruft to craftNick DeNardis

Recently uploaded (20)

How to track Cost and Revenue using Analytic Accounts in odoo Accounting, App...Celine George

Analytic accounts are used to track and manage financial transactions related to specific projects, departments, or business units. They provide detailed insights into costs and revenues at a granular level, independent of the main accounting system. This helps to better understand profitability, performance, and resource allocation, making it easier to make informed financial decisions and strategic planning.

To study the nervous system of insect.pptxArshad Shaikh

The *nervous system of insects* is a complex network of nerve cells (neurons) and supporting cells that process and transmit information. Here's an overview: Structure 1. *Brain*: The insect brain is a complex structure that processes sensory information, controls behavior, and integrates information. 2. *Ventral nerve cord*: A chain of ganglia (nerve clusters) that runs along the insect's body, controlling movement and sensory processing. 3. *Peripheral nervous system*: Nerves that connect the central nervous system to sensory organs and muscles. Functions 1. *Sensory processing*: Insects can detect and respond to various stimuli, such as light, sound, touch, taste, and smell. 2. *Motor control*: The nervous system controls movement, including walking, flying, and feeding. 3. *Behavioral responThe *nervous system of insects* is a complex network of nerve cells (neurons) and supporting cells that process and transmit information. Here's an overview: Structure 1. *Brain*: The insect brain is a complex structure that processes sensory information, controls behavior, and integrates information. 2. *Ventral nerve cord*: A chain of ganglia (nerve clusters) that runs along the insect's body, controlling movement and sensory processing. 3. *Peripheral nervous system*: Nerves that connect the central nervous system to sensory organs and muscles. Functions 1. *Sensory processing*: Insects can detect and respond to various stimuli, such as light, sound, touch, taste, and smell. 2. *Motor control*: The nervous system controls movement, including walking, flying, and feeding. 3. *Behavioral responses*: Insects can exhibit complex behaviors, such as mating, foraging, and social interactions. Characteristics 1. *Decentralized*: Insect nervous systems have some autonomy in different body parts. 2. *Specialized*: Different parts of the nervous system are specialized for specific functions. 3. *Efficient*: Insect nervous systems are highly efficient, allowing for rapid processing and response to stimuli. The insect nervous system is a remarkable example of evolutionary adaptation, enabling insects to thrive in diverse environments. The insect nervous system is a remarkable example of evolutionary adaptation, enabling insects to thrive

New Microsoft PowerPoint Presentation.pptxmilanasargsyan5

YSPH VMOC Special Report - Measles Outbreak Southwest US 5-3-2025.pptxYale School of Public Health - The Virtual Medical Operations Center (VMOC)

A measles outbreak originating in West Texas has been linked to confirmed cases in New Mexico, with additional cases reported in Oklahoma and Kansas. The current case count is 817 from Texas, New Mexico, Oklahoma, and Kansas. 97 individuals have required hospitalization, and 3 deaths, 2 children in Texas and one adult in New Mexico. These fatalities mark the first measles-related deaths in the United States since 2015 and the first pediatric measles death since 2003. The YSPH Virtual Medical Operations Center Briefs (VMOC) were created as a service-learning project by faculty and graduate students at the Yale School of Public Health in response to the 2010 Haiti Earthquake. Each year, the VMOC Briefs are produced by students enrolled in Environmental Health Science Course 581 - Public Health Emergencies: Disaster Planning and Response. These briefs compile diverse information sources – including status reports, maps, news articles, and web content– into a single, easily digestible document that can be widely shared and used interactively. Key features of this report include: - Comprehensive Overview: Provides situation updates, maps, relevant news, and web resources. - Accessibility: Designed for easy reading, wide distribution, and interactive use. - Collaboration: The “unlocked" format enables other responders to share, copy, and adapt seamlessly. The students learn by doing, quickly discovering how and where to find critical information and presenting it in an easily understood manner. CURRENT CASE COUNT: 817 (As of 05/3/2025) • Texas: 688 (+20)(62% of these cases are in Gaines County). • New Mexico: 67 (+1 )(92.4% of the cases are from Eddy County) • Oklahoma: 16 (+1) • Kansas: 46 (32% of the cases are from Gray County) HOSPITALIZATIONS: 97 (+2) • Texas: 89 (+2) - This is 13.02% of all TX cases. • New Mexico: 7 - This is 10.6% of all NM cases. • Kansas: 1 - This is 2.7% of all KS cases. DEATHS: 3 • Texas: 2 – This is 0.31% of all cases • New Mexico: 1 – This is 1.54% of all cases US NATIONAL CASE COUNT: 967 (Confirmed and suspected): INTERNATIONAL SPREAD (As of 4/2/2025) • Mexico – 865 (+58) ‒Chihuahua, Mexico: 844 (+58) cases, 3 hospitalizations, 1 fatality • Canada: 1531 (+270) (This reflects Ontario's Outbreak, which began 11/24) ‒Ontario, Canada – 1243 (+223) cases, 84 hospitalizations. • Europe: 6,814

Social Problem-Unemployment .pptx notes for Physiotherapy StudentsDrNidhiAgarwal

Unemployment is a major social problem, by which not only rural population have suffered but also urban population are suffered while they are literate having good qualification.The evil consequences like poverty, frustration, revolution result in crimes and social disorganization. Therefore, it is necessary that all efforts be made to have maximum. employment facilities. The Government of India has already announced that the question of payment of unemployment allowance cannot be considered in India

SCI BIZ TECH QUIZ (OPEN) PRELIMS XTASY 2025.pptxRonisha Das

Exploring-Substances-Acidic-Basic-and-Neutral.pdfSandeep Swamy

Exploring Substances: Acidic, Basic, and Neutral Welcome to the fascinating world of acids and bases! Join siblings Ashwin and Keerthi as they explore the colorful world of substances at their school's National Science Day fair. Their adventure begins with a mysterious white paper that reveals hidden messages when sprayed with a special liquid. In this presentation, we'll discover how different substances can be classified as acidic, basic, or neutral. We'll explore natural indicators like litmus, red rose extract, and turmeric that help us identify these substances through color changes. We'll also learn about neutralization reactions and their applications in our daily lives. by sandeep swamy

pulse ppt.pptx Types of pulse , characteristics of pulse , Alteration of pulsesushreesangita003

Metamorphosis: Life's Transformative JourneyArshad Shaikh

Niamh Lucey, Mary Dunne. Health Sciences Libraries Group (LAI). Lighting the ...Library Association of Ireland

Biophysics Chapter 3 Methods of Studying Macromolecules.pdfPKLI-Institute of Nursing and Allied Health Sciences Lahore , Pakistan.

This chapter provides an in-depth overview of the viscosity of macromolecules, an essential concept in biophysics and medical sciences, especially in understanding fluid behavior like blood flow in the human body. Key concepts covered include: ✅ Definition and Types of Viscosity: Dynamic vs. Kinematic viscosity, cohesion, and adhesion. ⚙️ Methods of Measuring Viscosity: Rotary Viscometer Vibrational Viscometer Falling Object Method Capillary Viscometer 🌡️ Factors Affecting Viscosity: Temperature, composition, flow rate. 🩺 Clinical Relevance: Impact of blood viscosity in cardiovascular health. 🌊 Fluid Dynamics: Laminar vs. turbulent flow, Reynolds number. 🔬 Extension Techniques: Chromatography (adsorption, partition, TLC, etc.) Electrophoresis (protein/DNA separation) Sedimentation and Centrifugation methods.

Introduction to Vibe Coding and Vibe EngineeringDamian T. Gordon

How to Subscribe Newsletter From Odoo 18 WebsiteCeline George

Sinhala_Male_Names.pdf Sinhala_Male_Namekeshanf79

Operations Management (Dr. Abdulfatah Salem).pdfArab Academy for Science, Technology and Maritime Transport

K12 Tableau Tuesday - Algebra Equity and Access in Atlanta Public Schoolsdogden2

Algebra 1 is often described as a “gateway” class, a pivotal moment that can shape the rest of a student’s K–12 education. Early access is key: successfully completing Algebra 1 in middle school allows students to complete advanced math and science coursework in high school, which research shows lead to higher wages and lower rates of unemployment in adulthood. Learn how The Atlanta Public Schools is using their data to create a more equitable enrollment in middle school Algebra classes.

Marie Boran Special Collections Librarian Hardiman Library, University of Gal...Library Association of Ireland

Geography Sem II Unit 1C Correlation of Geography with other school subjectsProfDrShaikhImran

Presentation of the MIPLM subject matter expert Erdem KayaMIPLM

The ever evoilving world of science /7th class science curiosity /samyans aca...Sandeep Swamy

The Ever-Evolving World of Science Welcome to Grade 7 Science4not just a textbook with facts, but an invitation to question, experiment, and explore the beautiful world we live in. From tiny cells inside a leaf to the movement of celestial bodies, from household materials to underground water flows, this journey will challenge your thinking and expand your knowledge. Notice something special about this book? The page numbers follow the playful flight of a butterfly and a soaring paper plane! Just as these objects take flight, learning soars when curiosity leads the way. Simple observations, like paper planes, have inspired scientific explorations throughout history.

How to track Cost and Revenue using Analytic Accounts in odoo Accounting, App...Celine George

To study the nervous system of insect.pptxArshad Shaikh

New Microsoft PowerPoint Presentation.pptxmilanasargsyan5

YSPH VMOC Special Report - Measles Outbreak Southwest US 5-3-2025.pptxYale School of Public Health - The Virtual Medical Operations Center (VMOC)

Social Problem-Unemployment .pptx notes for Physiotherapy StudentsDrNidhiAgarwal

SCI BIZ TECH QUIZ (OPEN) PRELIMS XTASY 2025.pptxRonisha Das

Exploring-Substances-Acidic-Basic-and-Neutral.pdfSandeep Swamy

pulse ppt.pptx Types of pulse , characteristics of pulse , Alteration of pulsesushreesangita003

Metamorphosis: Life's Transformative JourneyArshad Shaikh

Niamh Lucey, Mary Dunne. Health Sciences Libraries Group (LAI). Lighting the ...Library Association of Ireland

Biophysics Chapter 3 Methods of Studying Macromolecules.pdfPKLI-Institute of Nursing and Allied Health Sciences Lahore , Pakistan.

Introduction to Vibe Coding and Vibe EngineeringDamian T. Gordon

How to Subscribe Newsletter From Odoo 18 WebsiteCeline George

Sinhala_Male_Names.pdf Sinhala_Male_Namekeshanf79

Operations Management (Dr. Abdulfatah Salem).pdfArab Academy for Science, Technology and Maritime Transport

K12 Tableau Tuesday - Algebra Equity and Access in Atlanta Public Schoolsdogden2

Marie Boran Special Collections Librarian Hardiman Library, University of Gal...Library Association of Ireland

Geography Sem II Unit 1C Correlation of Geography with other school subjectsProfDrShaikhImran

Presentation of the MIPLM subject matter expert Erdem KayaMIPLM

The ever evoilving world of science /7th class science curiosity /samyans aca...Sandeep Swamy

Front end Tips Tricks & Tools

1. 1 Front-end Development Tools Tips & Tricks Tools, Tips & Tricks for Front-endDevelopment Starting @ 14:30 RAMGOLAM Sandeep 24 April 2015, Bagatelle, Mauritius

2. 2 Front-end Development Tools Tips & Tricks Who am I • I make things for the web • HTML/CSS guy • I work at Prodigious. - Front-end Developer - Research & Development • I also enjoy Music & Gaming • I am a very lazy person

3. 3 Front-end Development Tools Tips & Tricks Agenda • The Web • Tools to Improve your workflow in • HTML • CSS • General Purpose Tools

4. 4 Front-end Development Tools Tips & Tricks The Web Browsers• Core Developers • DNS Systems • NSA • The Internet • Users • Designers • Backend Devs • DB Admins and….

5. 5 Front-end Development Tools Tips & Tricks The Web HTML/CSS Guy!

6. 6 Front-end Development Tools Tips & Tricks The Web New HTML/CSS/jQuery/UI/UX/Angular/Ember/NoSQL Localstorage/SVG Animator/etc..

7. 7 Front-end Development Tools Tips & Tricks The Web Lets try to make sense out of all that..

8. 8 Front-end Development Tools Tips & Tricks HTML Writing html can be boring It’s a pain..

9. 9 Front-end Development Tools Tips & Tricks HTML Let’s think again… How do we really write html?

10. 10 Front-end Development Tools Tips & Tricks HTML Emmet! (Zen-Coding)

11. 11 Front-end Development Tools Tips & Tricks HTML Zen Coding Demo

12. 12 Front-end Development Tools Tips & Tricks CSS • Preprocessors • Refresh CSS Plugin • *SourceMaps(edit scss in chrome)

13. 13 Front-end Development Tools Tips & Tricks CSS • Preprocessors • extends css and gives it additional features • SASS • LESS • Stylus

14. 14 Front-end Development Tools Tips & Tricks CSS SASS vs LESS

15. 15 Front-end Development Tools Tips & Tricks SASS/SCSS • How to install $ gem install sass $ gem install compass • Prerequisites • ruby • rubygems

16. 16 Front-end Development Tools Tips & Tricks SASS/SCSS Features of Preprocessors • import anywhere • nesting • variables • maths • functions/mixins

17. 17 Front-end Development Tools Tips & Tricks SASS/SCSS SASS Demo

18. 18 Front-end Development Tools Tips & Tricks CSS CSS Reloader Plugin https://chrome.google.com/webstore/detail/css- reloader/dnfpcpfijpdhabaoieccoclghgplmpbd?hl=en

19. 19 Front-end Development Tools Tips & Tricks General Purpose Tools • Prerequisites • Nodejs • Node Package Manager (npm)

20. 20 Front-end Development Tools Tips & Tricks -- httpster -- bower -- js task runner(gulp) -- autoprefixr* General Purpose Tools

21. 21 Front-end Development Tools Tips & Tricks General Purpose Tools $ npm install –g httpster • Httpster • Super Simple web server Purpose : saves lives! Purpose : provides a quick web environment without wamp/xampp/mamp/lamp/apache/sql/virtualhost hassle

22. 22 Front-end Development Tools Tips & Tricks Httpster demooo! General Purpose Tools

23. 23 Front-end Development Tools Tips & Tricks General Purpose Tools $ npm install –g bower • Bower • web package manager. need a framework? a library? Its right here.

24. 24 Front-end Development Tools Tips & Tricks Bower demooo! General Purpose Tools

25. 25 Front-end Development Tools Tips & Tricks General Purpose Tools $ npm install –g gulp • gulpjs • JavaScript task runner Purpose : Automate simple repetitive tasks

26. 26 Front-end Development Tools Tips & Tricks • copying files • renaming files • removing files • compress css or javascript • optimize images • packaging files • send file over ftp • so much more! gulpjs • Repetitive tasks?

27. 27 Front-end Development Tools Tips & Tricks gulpjs your project manager be like...

28. 28 Front-end Development Tools Tips & Tricks GulpJS demo gulpjs

29. 29 Front-end Development Tools Tips & Tricks Thank You! Questions?

30. 30 Front-end Development Tools Tips & Tricks Contact Me Email: [email protected] Twitter : @ _ _ sun _ _

Front end Tips Tricks & Tools

Recommended

More Related Content

Viewers also liked (20)

Similar to Front end Tips Tricks & Tools (20)

Recently uploaded (20)

Front end Tips Tricks & Tools