#webpack crash course | Explore Tumblr posts and blogs

t-baba · 6 years ago

Photo

Regular expressions, React 16.8, and Vue.js 2.6

#423 — February 7, 2019

Read on the Web

JavaScript Weekly

New JavaScript Features That Will Change How You Write Regular Expressions — ES2018 introduced some new features for regular expressions that will come in handy if you’re doing certain types of text processing and manipulation, such as lookbehind assertions and named capture groups.

Faraz Kelhini

React v16.8 Released: It's The One With Hooks — While hooks have been in React in an experimental form for a few months, they’re now truly official. Hooks, you say? Here’s a great ‘at a glance’ view of what they’re about.

Dan Abramov

Learn a Thing or Two (Or Three) About Building Apps on Slack — Whether you’re new to Slack or an expert app builder, there’s something for everyone at Frontiers. New this year: 3 tracks filled with speakers, sessions and workshops — including one designed just for you. Register today to reserve your spot.

Slack sponsor

What Hooks Mean for Vue — Hooks aren’t just for React users, you know. Vue got its own proof of concept equivalent quickly thereafter (a final version is due in Vue 3.0) - here’s why, and how they work.

Sarah Drasner

Pika/Pack: A New Approach to npm Package Building — Pack connects pre-configured plugins (e.g. Babel and Rollup) to build and optimize your package for you. It’s a bit like a webpack or Parcel but specifically for building npm packages.

Fred K. Schott

Vue 2.6 Released — Also known as “Macross”, Vue 2.6 includes new syntax for scoped slots, improved error handling, and more.

Evan You

What's Coming in V8 Release v7.3 — Coming to future releases of Node and Chrome near you, the latest version of the popular JavaScript engine includes async stack tracks by default, improved performance for await, and some new ES2019 features including Object.fromEntries and String.prototype.matchAll.

Clemens Hammacher

▶ A Node.js Crash Course in 90 Minutes — An up to date ‘crash course’ covering Node fundamentals including several core modules, building an HTTP server, deployment, etc. Even if this isn’t useful for you, it could be handy to pass on to anyone ready to learn Node in one hit.

Traversy Media

💻 Jobs

JavaScript Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.

X-Team

Sr. Fullstack Engineer (Remote) — Sticker Mule is looking for passionate developers to join our remote team. Come help us become the Internet’s best place to shop and work.

Sticker Mule

Try Vettery — Vettery specializes in developer roles and is completely free for job seekers.

Vettery

📘 Articles, Tutorials and Opinions

A One-Page Guide to Regular Expression Techniques in JavaScript — Dr. Axel has opened up another chapter of his JavaScript for Impatient Programmers book.

Dr. Axel Rauschmayer

Seven Problems You Can Avoid by using Nuxt.js for Your Next Vue App — Nuxt.js is a framework for building universal Vue.js apps.

Gregg Pollack

Certified Kotlin Training — Spots remain for New York and Chicago classes.

Big Nerd Ranch sponsor

Diving Deeper into JavaScript Objects

Arfat Salman

Using TensorFlow.js to Automate the Chrome Dinosaur Game — A two-part (so far) series on using machine learning techniques to play the dinosaur jumping game Chrome shows when you’re offline. Part 2, just out, leans on genetic algorithms instead.

Aayush Arora

First Thoughts on Deno, the JavaScript/TypeScript Runtime — Deno is an interesting alternative runtime for V8 created by the original creator of Node - it’s worth keeping trying or at least keeping an eye on.

James Garbutt

Deobfuscating a Scammer's Naughty JavaScript — The rather lengthy, but interesting, tale of a scam email and one developer’s quest to deobfuscate the scammer’s JavaScript.

JonLuca DeCaro

The Evolution of Testing: Live Broadcast with Gleb Bahmutov of Cypress

Nrwl.io sponsor

JavaScript Regular Expressions for Regular People — Our third and final regex-related link of the issue - promise! - is aimed more at beginners or for if regex prove a little intimidating.

Aaron Arney

Garbage Collection in Redux Applications — This won’t apply to most of you, but SoundCloud’s Xbox (yes, Xbox) app is a React and Redux app that runs in a native web view wrapper and due to Xbox related limitations a ‘memory leak’ (of sorts) was causing issues.

Jan Monschke (SoundCloud)

🔧 Code and Tools

TypeIt: A Versatile Fake-Typing Effect — Bills itself as ‘the most versatile JavaScript typewriter utility on the planet’. The demo on the homepage is pretty versatile, that’s for sure.

Alex MacArthur

ImmortalDB: A 'Relentless' Key-Value Store for The Browser — Data is redundantly stored in cookies, IndexedDB, LocalStorage, and SessionStorage, and 'self heals' as needed.

Ansgar Grunseid

Shop Like a Developer – Discover and Experiment with Hot New Cloud Services 🔥 — Start building your application with Manifold and save time integrating and deploying cloud native applications.

Manifold sponsor

Uppy: A Next-Gen File Uploader for Web Browsers

Transloadit

x-spreadsheet: A JS and Canvas-Powered Spreadsheet Control

myliang

timetable-fns: Fast Date and Time Utility Functions — aimed specifically for working with timetables.

Flightplan

by via JavaScript Weekly http://bit.ly/2t9ZfJK

#Javascript Branding #Javascript Weekly

0 notes

alamantus · 8 years ago

Link

I just found and improved a PhaserJS boilerplate that uses ES2016/ES2015 (ES7/ES6) with Webpack to create a nice JavaScript game development codebase! Webpack takes all code and assets for your game (including images under 25kb!) and shoves it all into a single “game.bundle.js” file that gets loaded! It’s pretty awesome.

You can fork/download and use my boilerplate for your own games if you’d like! If you don’t know anything about ES2015 (ES6) or ES2016 (ES7), check out this little guide I like: ES6 for Humans

PS: If you’ve ever worked with Phaser and Webpack before, you know that it’s crazy hard to figure out how to get it working at all. If you want to hook it up yourself, check out how I did it in my boilerplate here. Doing it this way allows you to set it and forget it, not needing to require or import any Phaser files into your code! Much nicer than what I had to do before.

PPS: If enough people ask for help getting started, I’ll try to whip up a crash course in NodeJS and command line control so you can understand what you need to do with this boilerplate!

#Phaser #phaserJS #javascript #es6 #es7 #es2015 #es2016 #gamedev #boilerplate #code #webpack #codebase #nodejs #node #game development

5 notes · View notes

xitricite · 8 years ago

Text

Bunch of links For FrontEnd Dev, UI/UX

V - - - This is basically this for 2017- - - V 🎈🎉 The Complete List of User Experience (UX) Resources & Tools 🎉🎈

Edit: Did *card sorting. *Sample size of 1. :b

(Fig 1. If Satan was a web developer. Source: ?)

Book IT 📖🏃

100 Things Every Designer Needs to Know About People

Don’t Make Me Think, Revisited - A Common Sense Approach to Web Usability by Steve Krug

Eloquent javascript

Javascript eBook

The Design of Everyday Things - by Donald A. Norman

Practice Online 💻🖱️🖥️

Codecademy - learn html + css

Codecademy - learn javascript

Codepen.io

Codek.tv - Javascript - videos

JS Fiddle

The New Boston - videos

The Odin Project - course

w3schools - css

w3schools - html

w3schools - javascript

Webpack Bin - editor

General 👍👀👌

52 Weeks of UX

aFarkas - html5shiv

🎨 A curated list of Awesome Creative Portfolio Websites

Alex Devero

An HTML5 FAQ

autoprefixer

CSS-Tricks

Chrome Experiments - Workshop

color adobe kuler

Colour Contrast Analyser (accesibility)

Colorsupplyyy - palette app

Creative Cloud blog

dailyui.co

Deep Background

Design Pattern Library - YDN

Dive Into HTML5

Dark Patterns

Fonts In Use

Free Code Camp

GV Library

Google Material Design Guidelines

Google Developers - Web Fundamentals

Hotjar

HSL Picker

Inspired UI

Interaction Design is dead. What now?

JavaScript Examples

javascriptweekly

jQuery DrawSVG

JSHint, a JavaScript Code Quality Tool

Little Big Details

Media Temple

Modularscale

Moz SEO

NN Group - articles

parallax.js

particles.js

Plunker

Psychologist World

Pttrns

r/Frontend/

r/web_design

React

Scotch

Smashing Magazine

State of JS

stackexchange.com

Signal v. Noise

Site5

The Three Types of Projects you can work on

TinyJPG – Compress JPEG images intelligently

TinyPNG – Compress PNG images while preserving transparency

Tympanus - CoDrops

UI Patterns

UX Archive

UX is not UI

ux mag

UX Myths

UX Planet

UX Project Checklist

uxdesign.cc

uxdesign.cc - ux-resources

UXmatters

UX for the masses

W3C code validator

webkit.org

Wirify – The web as wireframes

Wordpress.org

ZURB - Motion UI

ZURB - PatternTap

Tutorials + References

100 Spam Filter Trigger Words

3 Mistakes Software Developers Must Avoid

7 Rules for Creating Gorgeous UI (Part 1) – Medium

7 Rules for Creating Gorgeous UI (Part 2) – Medium

A Crash Course in Typography: The Basics of Type - noupe

A guide to successful Design Handoffs

A Study Plan To Cure JavaScript Fatigue

A Web Designer’s Guide to Pricing Strategies

Aerotwist - Getting Started with Three.js

Blame the implementation, not the technique - TimKadlec.com

Bret Victor - Inventing on Principle from CUSEC

Case study - How to Make a Vesper

Case Study: Page Flip Effect from 20thingsilearned.com - HTML5 Rocks

Crash Course: UI Design – HH Design – Medium

Design Tip: Never Use Black | Ian Storm Taylor

Design apps for the Windows desktop - Windows app development

Digital Telepathy - The return on investment of UX (infographic)

Form Design for Complex Applications

How to land a top-notch tech internship — and a tech job — while you’re still in school

JavaScript Snow: DHTML Snowstorm. Making it snow on the internets since 2003.

Ken Burns Effect fullscreen without js

Lessons From My Post-bootcamp Job Search in London

Luke Wroblewski Part 1 - Conversions@Google 2014

Mobile Firefox and Designing Without Modal Overlays « Aza on Design

OS X Human Interface Guidelines: Designing for Yosemite

Roll and scroll tracking

Motionographer - web animation learning by doing - an interview with Rachel Nabors

Nifty Modal Window Effects

Simple Donut Progress Bar

Smashing Magazine - Create An Animated Bar Graph With HTML, CSS And jQuery

Smashing Magazine - Setting Weights And Styles With The @font-face Declaration

Smashing Magazine Social Media Is A Part Of The User Experience

Typography for User Interfaces

The 100% correct way to do CSS breakpoints

User Testing – Make WordPress Core

UX Fundamentals Course - The Gymnasium

UXM - Tips for bringing UX to the Agile party

UXM - Example UX docs and deliverables

Vue.js - SVG Graph

Why Windows 98's User Onboarding is Better Than Yours - Usersnap Blog

Your Ultimate Guide to CSS Units - Alex Devero

YT Channels

Adobe Creative Cloud

Create n Process

Design Course

DevTips

Front-Trends

Frontendconf Zürich

Matt Borchert

Michael Thomas

Museum für Gestaltung Zürich

Photoshop Tutorials by PHLEARN

Seb Lester

Shawn Barry, Creative

Simple Programmer

Ste Bradbury Design

Swerve Designs

Thomas Bradley

Tuts+ Design - bit old

Tuts+ Illustration - 2015

tutvid

UX Mastery

#ux #ui #frontend #webdevelopment #masterpost #idk what im doing so im hoping someone has better links #casey's #inspiration

6 notes · View notes

rafi1228 · 5 years ago

Link

Master JavaScript with the most complete course on the market! Projects, challenges, quizzes, ES6+, OOP, AJAX, Webpack

What you’ll learn

Go from a total beginner to an advanced JavaScript developer

Code 3 beautiful real-world apps with both ES5 and ES6+ (no boring toy apps)

JavaScript and programming fundamentals: variables, boolean logic, if/else, loops, functions, arrays, etc.

Complex features like the ‘this’ keyword, function constructors, prototypal inheritance, first-class functions, closures

Asynchronous JavaScript: The event loop, promises, async/await, AJAX and APIs

Modern JavaScript for 2018: NPM, Webpack, Babel and ES6 modules

A true understanding of how JavaScript works behind the scenes

What’s new in ES6: arrow functions, classes, default and rest parameters, etc.

Practice your new skills with coding challenges (solutions included)

Organize and structure your code using JavaScript patterns like modules

Get friendly and fast support in the course Q&A

Downloadable lectures, code and design assets for all projects

Requirements

No coding experience is necessary to take this course! I take you from beginner to expert!

Any computer and OS will work — Windows, macOS or Linux. We will set up your text editor the course.

A basic understanding of HTML and CSS is a plus, but not a must! The course includes a 5-minutes HTML and CSS crash course.

Description

*** The #1 bestselling JavaScript course on Udemy! ***

“Excellent course. Jonas explains the core concepts in javascript that are usually glossed over in other courses. And he does it in a manner that is clear and concise.” — John Collins

…

Do you want to learn the number #1 programming language that powers the internet?

Are you tired of wasting your time and money on random youtube videos or JavaScript courses that are either too simple, or too difficult to follow?

Or are you struggling to deeply understand and apply JavaScript to real projects?

If your answer is a big YES… Then this is exactly the course you are looking for!

…

So what is the course about?

This is a truly complete JavaScript course, that goes beyond what other JavaScript courses out there teach you.

I will take you from a complete JavaScript beginner to an advanced developer. You will not just learn the JavaScript language itself, you will also learn how to program. How to solve problems. How to structure and organize code using common JavaScript patterns.

Come with me on a journey with the goal of truly understanding the JavaScript language. And I explain everything on the way with great detail!

You will learn “why” something works in JavaScript, not just “how”. Because in the modern JavaScript world of today, you need more than just knowing how something works. You need to debug code, you need to understand code, you need to be able to think about code.

To achieve our goal together, the course contains coding sessions, coding challenges, theory lectures, real-world projects and a final course exam.

This course is different because it’s not just about writing code, it’s also about how and why code works the way it does. Because it’s the perfect mix between theory and practice. Because it focuses not only on small coding examples, but also on real-world projects and use cases.

So, by the end of the course, you will be a capable JavaScript developer, able to write, understand and debug JavaScript code using all the powerful features the language offers to us.

…

Here is exactly what we cover in this course:

• All the JavaScript and programming fundamentals: things like variables, data types, boolean logic, if/else statements, loops, functions, objects, arrays, and more.

• Everything you need to know in order to gain a deep understanding of how JavaScript works behind the scenes: execution contexts, hoisting, scoping, the ‘this’ keyword, and more.

• How to make JavaScript code interact with webpages: DOM manipulation. Learn how to select and change webpage elements, create new elements and handle DOM events.

• Complex JavaScript features such as function constructors, prototypal inheritance, first-class functions, closures, the bind and apply methods, and more.

• We are going to code 3 beautiful real-world apps to apply our knowledge and learn new concepts (I provide the starter HTML and CSS code for these projects).

• Learn how to organize and structure your code using modules and functions, how to create data privacy and encapsulation, and why that’s so important.

• What’s new in the most modern version of JavaScript: new features of ES6 / ES2015.

• Asynchronous JavaScript: the event loop, promises, async/await, AJAX calls and APIs.

• Modern JavaScript in 2018: Learn how to set up a modern development workflow with NPM, Webpack, Babel and ES6 modules.

…

Let’s now find out if this course is for you. It’s a perfect fit if…

Student #1: You want to gain a deep understanding of the most popular programming language in the world: JavaScript.

Student #2: You have taken other JavaScript courses but: 1) still don’t really understand JavaScript, or 2) still don’t feel confident to code real-world apps. This course is perfect for you!

Student #3: You are interested in using popular libraries/frameworks like React, Angular or Node.js.

Student #4: You want to get started with programming in general: JavaScript is a great language to learn how to code.

…

Now it’s your turn to decide. This is what you get:

• Lifetime access to HD quality videos. No monthly subscription. Learn at your own pace, whenever you want.

• English closed captions (not the auto-generated ones provided by Udemy).

• All videos are downloadable. Learn wherever you want, even without an internet connection!

• Downloadable starter code and final code for each section.

• Free helpful support in the course Q&A when you have questions or get stuck.

• Multiple coding challenges to practice your new skills (solutions included).

• A final course exam with 30 questions to test your JavaScript knowledge.

Sounds great? Then start this adventure today by clicking the “Take this course” button, and join me in the only JavaScript course that you will need!

Who this course is for:

Take this course if you want to gain a deep understanding of the most popular programming language in the world: JavaScript.

Take this course if you have taken other JavaScript courses but: 1) still don’t really understand JavaScript, or 2) still don’t feel confident to code real-world apps. This course is perfect for you!

Take this course if you’re interested in using popular libraries/frameworks like React, Angular or Node.

Take this course if you want to get started with programming in general: JavaScript is a great language to learn how to code.

Created by Jonas Schmedtmann Last updated 5/2019 English English

Size: 13.89 GB

Download Now

https://ift.tt/2i6MKKq.

The post The Complete JavaScript Course 2019: Build Real Projects! appeared first on Free Course Lab.

#IFTTT #Blogger

0 notes

2bitornot2bit · 5 years ago

Video

youtube

Liked on YouTube: Webpack Crash Course https://youtu.be/lziuNMk_8eQ

#IFTTT #YouTube

0 notes

topicprinter · 6 years ago

Link

Buckle up cause this is a long one. A lot of the stuff might sound a bit unbelievable, but it's all true. The original story has a tonne of pictures and videos, which might help explain. So perhaps, read over at https://thekanyestory.com and come back here for the discussion. Anyways Enjoy, I'll be around in the comments.IntroIt’s Friday night, 1 am. I’m lying in bed scrolling twitter. Reading the usual shit. Getting my dopamine fix. “The Backstreet boys are back with a brand new sound”. Yeah, whatever. I read another headline. Then another. “There’s a dating site for straight Trump supporters”. The mob’s getting angry. As you’d imagine the media are loving it. It’s the perfect fodder to pump to the masses.But forget Donald Trump. There something here. Free audience. Free attention. Embrace the controversy. Elon Musk sold flamethrowers and made a million. Supreme sold bricks and made a million. You’ve got to think like the little kid who hasn’t had his imagination beaten out of him. Companies splash thousands on “growth hacking” goon squads but having one mind like Bart Simpson on your team is more valuable.I jump out of bed and start writing down ideas. Dating is a good starting spot. It’s funny and simple. Now I just need something controversial. Brexit Dating, Harry Potter Dating, Kanye West Dating. Yes Kanye West, I’m a fan. I know the audience. How about — KanyeWestDating.com. Doesn't pop. Maybe Yeezy.Dating. Bingo! Add to Basket.ViralI wake up late the next morning and cook some eggs. I want to start building the dating site, but let’s be realistic. The chances are no-one will use it and I’ll end up spending 3 months locked in my bedroom, deprived of sunlight, going insane.So, instead, I open up Instagram, change my username from @harrydry to @yeezydating, delete my old posts and upload a picture with the caption “Yeezy.Dating — Coming this March”. Bamn. We’re cooking.Time to build my blogger hit list. I don’t really know what I’m doing so I start googling. 10 minutes later I come across this website called Buzzstream Discovery.Turns out I’ve hit the jackpot. Buzzstream is amazing. You enter a search term and it spits back the names of all the bloggers who have written stories about that search term. So I enter “Kanye West”, filter “within the last 30 days” and Buzzstream gives me a list of all 440 bloggers who have written stories about Kanye West over the last month. These bloggers are my perfect audience. It’s their job to pump out, simple, funny, digestible stories about Kanye West and I’m about to spoon feed them a classic.Getting the names is only half the battle though. I’ve also got to get email addresses. I find this website called Hunter.io where you type the name of any company and it tells you the correct email format which that company uses. Four hours later 220 emails are locked away in an excel doc.I type up the following message:Hey, I just made a dating site for Kanye fans called Yeezy.Dating. Going crazy on Reddit atm. Any questions please let me know :)wack on my headphones, and play through Kanye’s whole discography, whilst I send email after email after email after email after email. Go to sleep, wake up, and then I'm back commuting into London for a day's work.My phone rings during a meeting. I turn it to silent. It rings again. I turn it off. As soon as I get out of the meeting I check the database. 9,100 email address’. Surely this can't be real. I click refresh. Now 9,109. My mind freezes. I type Kanye's name into google and Yeezy Dating is everywhere. I check analytics. 250 people online. 65 unread emails. Then lunch break is over and I’m being called back in for another meeting.It’s 10pm when I arrive back from work. The press momentum is still rolling on. It feels good to know that my big plan worked. 25 news anchors coast to coast are discussing my imaginery dating site and I’m just in my bedroom, in my pyjamas with an old Macbook pro making the whole thing up as I go along. I start a big Yeezy Dating group chat, and invite everyone from my email list.7:40 am the next day and I get a text from my pal saying, “Tune into BBC Radio 1. They’re talking about Yeezy Dating right now and they want to speak to you”. Guess where I am? On a two hour train from Portsmouth to London for another day of meetings. I try and dial into Radio 1 but there’s no signal. I’m cooped up on this train carriage and I’m stressing out. The database has over 13,000 emails now. I’ve told the media the dating site is “Coming This March”, its now 17th March and I haven’t written a line of code. And to top it all off, I’ve got no idea how to make a dating site.I get back that evening, call my boss and tell him that I’m going to be out of action for a few months. He asks why. So I tell him I'll be making a dating site for Kanye West fans. He bursts out laughing, wishes me luck and that’s that. I'm a free man.ViralIt’s time to build a dating site. First things first I scout other dating sites looking for something I can copy. The whole Tinder / Bumble swiping thing is too complex. I find a Jewish Dating site called J Date which looks promising. All user profiles are displaying on one long infinite scroll page. A few months earlier I did Wes Bos’ “Learn Node” course where he does a similar thing with restaurants. I start merging J Date with some lessons from Wes’ course and I'm up and running.At this point, there isn’t much to tell you. There’s no secret ingredient. Just long days laying bricks. 10 months ago I hadn’t written a line of code before and it was too hard. One week into Yeezy Dating it’s still too hard. Webpack is a mess and I don’t know how to save geoJSON data. Boo-hoo. Nobody cares. I don't care. Figure it out. Everyone else figured it out.I write I AM HARRY DRY on a sheet of paper, buy some Blu Tack and pin it to my wall. Every time I get stuck I look up at the words and snarl. It’s Street Fighter II. I’m coding like Diego Costa plays football. No technique. No Barcelona academy. Rampaging from obstacle to obstacle.Problem after Problem. Forum after forum. I'm becoming the most hated man on Stack Overflow. And I'm loving every second of it.LaunchI wake up one fine spring morning and it’s all done. I’m a couple of weeks late, but that’s ok. I fix the final bug from the lab at 3 pm and post on Instagram to build some hype.Then I cycle to town and walk into Vodafone. I tell the store manager I’m “just browsing” whilst I test the site on all their different devices. iPhone’s are zooming in on my input fields and it’s looking wierd. Damn. I pitch up in Starbucks next door, grab a croissant, and start googling. Turns out my font size needs to be 16px on iOS to the stop auto zoom. I head back into Vodafone, “more browsing” I tell the store manager, and the problems solved. Happy Days.The Yeezy Dating group chat still has a buzz about it. Several hundred messages a day. They’re like my army of ultra fans. My plan is to launch with them first to test the site works. I’m back at home, dotting i's crossing t’s. Suddenly I have 10 mentions in Telegram. The ultras have found the site and have started making profiles.10 profiles are up. Now 20. Now 30. Shit. It’s happening. Beautiful profile photos appearing up on my screen. Real people are on the site. Real people are matching each other. Real people are messaging. It’s working. And I made all of this! Hahaha. Look at me go. I post on Instagram saying that Yeezy.Dating is open for business. Suddenly 200 people flood to the site.Now, legend says that the fisherman on shore only sees a tsunami a couple of seconds before it hits.Capow! Left, right, center, profile images start disappearing. 5 pictures vanishing every second. I refresh the page, images disappearing everywhere. Time slows down. I can’t think straight. 3 minutes later the site is stripped bare. 350 profiles. No images. I load up Heroku. 6,700 critical errors. Dad potters in from the kitchen to see how the big launch is going. Not great I tell him.I woke up Steve Jobs. I'm ending the day Steve Harvey. The site's properly crashed now. I’m trying to put out fires everywhere but nothing’s working. I can’t do this anymore. I apologise to my followers on Instagram, I apologise to the ultras on Telegram, and I fall into bed.RebornNext day I wake up and do nothing. Eat some cereal. Watch some Peep Show. I’m still at a low ebb. I manage to write a post on the Indie Hackers forum explaining the site crashing and what went wrong with the images.Quite remarkably developers start giving me their email address, offering me help. I’m blown away by their generosity. Within 24 hours there are five pro developers digging through my code. Several changes later they give it the all clear. “Good luck”, one texts me from Singapore.A few days later Yeezy.Dating launches again. The feeling is different this time. The first time it felt like the biggest thing in my universe. This time around I’ve got perspective. There a bigger things in life. If it crashes, it crashes.Testing with the ultras goes well so I start emailing my big list. 1,500 users join within 10 hours. 2,500 within 24 hours. Then 4,200. But growth is slowing. My intuition is telling me that the parties going to end soon. Where’s the next 4,000 coming from?There’s no marketing budget, no development team, it’s just me. Replying to all the emails, fixing all the bugs, trying to keep the momentum up and I’m tired. We need an app. I’m not an app developer. We need ten thousand users for dating to work. I don't know how to get ten thousand more users. The novelty is starting to wear off. I’m thinking 5 moves ahead and I can see cheque mate on the horizon.There’s only one way out the water tank. I've got to get Kanye West involved.BillboardsSo I’m back in the lab. Emailing away. Managers, ex-managers, stylists, PR relations, anyone who has ever worked for YEEZY on Linkedin. But nothing. No replies. I can’t get through.I ask my Dad for advice. “You’ve got to think on a bigger scale son”, he tells me. So now I’m thinking what if I make a video, or a mixtape, or a magazine or a painting, or I rent a plane and fly a banner. Then it hits me. I’m going to rent Billboards. YEEZY is opening offices in Calabasas, New York, London, Wyoming. Four locations. Four billboards.Ten minutes later I’m on the phone with Billboard companies. Quizzing them. What’s your pricing like? What type of Billboard would you recommend? How quickly can we do this? What’s the shortest time each Billboard can stay up for? And in my head, the billboards are already in the sky.But, the next day, I wake up with cold feet. Two halves of my mind in deep discussion:"Two months wages. On three billboards. You’re crazy." “Don’t use money as an excuse. You know that’s not the reason.” “Why don’t I want to do it then?” “Cause you’re scared. Your afraid of what people might think.” “But …” “No, don't give me no buts. Relax your mind. You're not going to let the mob control you. Let's do it.”So I draft my Dad onto the campaign team and it starts to come together. He’s in his element. We take over my brother's bedroom and set up basecamp. Dad buys three alarm clocks, sets one to New York time, one to LA time and one to Wyoming time. “You’ve got to know your timezone, son,” he tells me.The sun goes down once more and now it's the day of the Billboards. I'm working like an Octopus, organising photographers, drafting emails, teeing up interviews and everything starts coming together. London. New York. Wyoming. All confirmed. There’s less than an hour to go, and suddenly WACK. 8:11 pm an email drops into my inbox from Lamar, the Billboard provider, and my head spins like I’ve walked onto Tyson Fury's right hand. (The email essentially says, "we can't run the ads because of legal reasons of you using Kanye West's name") See the actual site for an actual photo)Lamar's supposed to be covering both New York and Wyoming. Without them, I’m left with just one Billboard in London and that’s not enough. I’m calling this whole thing off. The game’s up. It’s over. I’m safe again. Life’s comfortable. No billboards. No problems.I walk downstairs to show Dad the email. He looks up at me, smiles like it’s nothing, and says “Don’t worry. We’ll find a way”. And maybe that’s why you need a team because in that moment I wanted an excuse to give up but the old man wasn’t blinking so we fought on.Phone calls start flying everywhere. On one phone I’m hammering the account manager. On the other Dad’s posing as a BBC journalist, throwing jab after jab at their legal department, “The kid spent two days clearing this with intellectual property lawyers”, “We’ve got a camera crew waiting outside Times Square as we speak”.It’s 9 pm now. A wonderful soul called Candice is waiting in the New York rain eyes glued to the Billboard ready to take the photo, but she isn’t going to wait all day.Suddenly Dad’s beckoning me over. If we change, “Kanye West” for “Mr. West” the legal department will approve it. My gut tells me it’s good enough. I export the new text and send to the account manager in Times Square. 5 minutes later the Billboards are live. Candice takes the photo. It appears in my inbox. And I take a deep breath. [See https://thekanyestory.com for the photos and interviews]Soon after, the Wyoming and London Billboard’s go up. I start attaching the photos to the drafts we prepped, sending out our emails, hoping to get lucky again.A couple of stories start breaking, journalists start requesting interviews and back down into the depths of the Maelström we descend. The phone rings and rings and it could be anyone on the line. I’m wished luck, sold insurance, thrown onto live radio, taunted by youths, offered jobs, reunited with old school friends.I check twitter. Kanye's name is trending. My heart jumps. Surely not. Have I made it? I click. My heart sinks. “Kanye West has just said 400 years of slavery sounds like a choice”. And from there on in I’m dead in the water. A tadpole in a shark tank. The media is at Kanye saturation. Journalists have bigger fish to fry and my little story is left on the shelf.Ok, one last try. I track down Yeezy Headquarters on Google Maps, find the phone number of some offices nearby and start dialing. I start telling this receptionist about the dating site, about the Billboards, and I can’t believe it but she’s actually listening to me.“Funnily enough my best friend A***** works at Yeezy” “If I send you an email could you forward it on?” “Sure” And that's that. Now I can go to bed, wake up the next day and get on with my life.A few weeks pass and, lo and behold, an email from A****** drops into my inbox. [See "The Kanye Story" website for the actual email from Kanye's team. It basically says they love the idea and the CFO of YEEZY wants to talk with me] And a few hours I get sent a screenshot from Kanye's office chat.[Again, see website. This is basically Kanye's office people talking about site and saying, "direct email Kendall, bcc Chris Jenner. Tell Kanye."]I can't help but smile. After all my efforts emailing journalists, practicing for radio interviews, writing press releases, retouching images, all it took was a simple phone call to the company whose office was next door.YEEZYAnd that’s how we got to now. It’s 9:52 pm, Thursday 24th May. In ten minutes time, I’ll be on the phone with the CFO of Kanye West’s Billion Dollar company.I remember sitting round with my uni housemates last year talking about what the future would hold for all of us. They were all saying, “I’m applying for a finance job” or “I’ll do a masters ”, stuff like that. And it came to me and I said, “I’m going travel to Nazareth, learn to code, come back to England, finish my book, learn about business and start my own stuff.”They were used to my spiel now and started groaning, “None of this shit's going to happen Dry. The real world’s going to chop you up and spit you out. You're going to be stuck in the rat race, clocking in, clocking off, packed onto the tube, just like all of us.”I smiled. “Tell me that again”. So they did. “Reality is going to grind you down. You’re going to be clock watching, Monday to Friday. There’s nothing you can do about it. And you know it.”“Tell me that that one more time”, I said. So they did. And I smiled even more.I’m not saying I’ve done anything yet cause I haven’t. But at least I've stuck to my word. I've tried and given it a go.So there we go. Thanks for reading and making it all the way to the bottom. I'm @harrydry on Twitter. I also write an email newsletter about startups, marketing and breaking free which you can find over on the main website. Thanks again and peace out!

#/r/entrepreneur #reddit

0 notes

mbaljeetsingh · 8 years ago

Text

Progressive Web Apps: A Crash Course

Progressive Web Apps (PWAs) try to overlap the worlds of the mobile web apps and native mobile apps by offering the best features of each to mobile users.

They offer an app-like user experience (splash screens and home screen icons), they're served from HTTPS-secured servers, they can load quickly (thanks to page load performance best practices) even in low quality or slow network conditions, and they have offline support, instant loading and push notifications. The concept of PWAs was first introduced by Google, and is still supported by many Chrome features and great tools, such as Lighthouse, an open-source tool for accessibility, performance and progressiveness auditing which we'll look into a bit later.

Throughout this crash course, we'll build a PWA from scratch with ES6 and React and optimize it step by step with Lighthouse until we achieve the best results in terms of UX and performance.

The term progressive simply means that PWAs are designed in a such a way that they can be progressively enhanced in modern browsers where many new features and technologies are already supported but should also work fine in old browsers with no cutting-edge features.

Native vs Mobile = Progressive

A native app is distributable and downloadable from the mobile OS's respective app store. Mobile web apps, on the other hand, are accessible from within a web browser by simply entering their address or URL. From the user's point of view, launching a browser and navigating to an address is much more convenient than going to the app store and downloading, installing, then launching the app. From the developer/owner's point of view, paying a one-time fee for getting an app store account and then uploading their apps to become accessible to users worldwide is better than having to deal with the complexities of web hosting.

A native app can be used offline. In the case of remote data that needs to be retrieved from some API server, the app can be easily conceived to support some sort of SQLite caching of the latest accessed data.

A mobile web app is indexable by search engines like Google, and through search engine optimization you can reach more users. This is also true for native apps, as the app stores have their own search engines where developers can apply different techniques --- commonly known as App Store Optimization --- to reach more users.

A native app loads instantly, at least with a splash screen, until all resources are ready for the app to execute.

These are the most important perceived differences. Each approach to app distribution has advantages for the end user (regarding user experience, availability etc.) and app owner (regarding costs, reach of customers etc.). Taking that into consideration, Google introduced PWAs to bring the best features of each side into one concept. These aspects are summarized in this list introduced by Alex Russell, a Google Chrome engineer. (Source: Infrequently Noted.)

Responsive: to fit any form factor.

Connectivity independent: progressively-enhanced with service workers to let them work offline.

App-like-interactions: adopt a Shell + Content application model to create appy navigations & interactions.

Fresh: transparently always up-to-date thanks to the service worker update process.

Safe: served via TLS (a service worker requirement) to prevent snooping.

Discoverable: are identifiable as “applications” thanks to W3C Manifests and service worker registration scope allowing search engines to find them.

Re-engageable: can access the re-engagement UIs of the OS; e.g. push notifications.

Installable: to the home screen through browser-provided prompts, allowing users to “keep” apps they find most useful without the hassle of an app store.

Linkable: meaning they’re zero-friction, zero-install, and easy to share. The social power of URLs matters.

Lighthouse

Lighthouse is a tool for auditing web apps created by Google. It's integrated with the Chrome Dev Tools and can be triggered from the Audits panel.

You can also use Lighthouse as a NodeJS CLI tool:

npm install -g lighthouse

You can then run it with:

lighthouse https://sitepoint.com/

Lighthouse can also be installed as a Chrome extension, but Google recommends using the version integrated with DevTools and only use the extension if you somehow can't use the DevTools.

Please note that you need to have Chrome installed on your system to be able to use Lighthouse, even if you're using the CLI-based version.

Building your First PWA from Scratch

In this section, we'll be creating a progressive web app from scratch. First, we'll create a simple web application using React and Reddit's API. Next, we'll be adding PWA features by following the instructions provided by the Lighthouse report.

Please note that the public no-authentication Reddit API has CORS headers enabled so you can consume it from your client-side app without an intermediary server.

Before we start, this course will assume you have a development environment setup with NodeJS and NPM installed. If you don't, start with the awesome Homestead Improved, which is running the latest versions of each and is ready for development and testing out of the box.

We start by installing Create React App, a project boilerplate created by the React team that saves you from the hassle of WebPack configuration.

npm install -g create-react-app create-react-app react-pwa cd react-pwa/

The application shell architecture

The application shell is an essential concept of progressive web apps. It's simply the minimal HTML, CSS and JavaScript code responsible for rendering the user interface.

This app shell has many benefits for performance. You can cache the application shell so when users visit your app next time, it will be loaded instantly because the browser doesn't need to fetch assets from a remote server.

For building a simple UI we'll use Material UI, an implementation of Google Material design in React.

Let's install the package from NPM:

npm install material-ui --save

Next open src/App.js then add:

import React, { Component } from 'react'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import AppBar from 'material-ui/AppBar'; import {Card, CardActions, CardHeader,CardTitle,CardText} from 'material-ui/Card'; import FlatButton from 'material-ui/FlatButton'; import IconButton from 'material-ui/IconButton'; import NavigationClose from 'material-ui/svg-icons/navigation/close'; import logo from './logo.svg'; import './App.css'; class App extends Component { constructor(props) { super(props); this.state = { posts: [] }; } render() { return ( <MuiThemeProvider> <div> <AppBar title={<span >React PWA</span>} iconElementLeft={<IconButton><NavigationClose /></IconButton>} iconElementRight={<FlatButton onClick={() => this.fetchNext('reactjs', this.state.lastPostName)} label="next" /> } /> {this.state.posts.map(function (el, index) { return <Card key={index}> <CardHeader title={el.data.title} subtitle={el.data.author} actAsExpander={el.data.is_self === true} showExpandableButton={false} /> <CardText expandable={el.data.is_self === true}> {el.data.selftext} </CardText> <CardActions> <FlatButton label="View" onClick={() => { window.open(el.data.url); }} /> </CardActions> </Card> })} <FlatButton onClick={() => this.fetchNext('reactjs', this.state.lastPostName)} label="next" /> </div> </MuiThemeProvider> ); } } export default App;

Next we need to fetch the Reddit posts using two methods fetchFirst() and fetchNext():

fetchFirst(url) { var that = this; if (url) { fetch('http://ift.tt/1sZr1Ax' + url + '.json').then(function (response) { return response.json(); }).then(function (result) { that.setState({ posts: result.data.children, lastPostName: result.data.children[result.data.children.length - 1].data.name }); console.log(that.state.posts); }); } } fetchNext(url, lastPostName) { var that = this; if (url) { fetch('http://ift.tt/1sZr1Ax' + url + '.json' + '?count=' + 25 + '&after=' + lastPostName).then(function (response) { return response.json(); }).then(function (result) { that.setState({ posts: result.data.children, lastPostName: result.data.children[result.data.children.length - 1].data.name }); console.log(that.state.posts); }); } } componentWillMount() { this.fetchFirst("reactjs"); }

You can find the source code in this GitHub Repository.

Before you can run audits against your app you'll need to make a build and serve your app locally using a local server:

npm run build

This command invokes the build script in package.json and produces a build in the react-pwa/build folder.

Now you can use any local server to serve your app. On Homestead Improved you can simply point the nginx virtual host to the build folder and open homestead.app in the browser, or you can use the serve package via NodeJS:

npm install -g serve cd build serve

With serve, your app will be served locally from http://localhost:5000/.

You can audit your app without any problems, but in case you want to test it in a mobile device you can also use services like surge.sh to deploy it with one command!

npm install --global surge

Next, run surge from within any directory to publish that directory onto the web.

You can find the hosted version of this app from this link.

Now let's open Chrome DevTools, go to Audits panel and click on Perform an audit.

From the report we can see we already have a score of 45/100 for Progressive Web App and 68/100 for Performance.

Under Progressive Web App we have 6 failed audits and 5 passed audits. That's because the generated project already has some PWA features added by default, such as a web manifest, a viewport meta and a <no-script> tag.

Under Performance we have diagnostics and different calculated metrics, such as First meaningful paint, First Interactive, Consistently Interactive, Perceptual Speed Index and Estimated Input Latency. We'll look into these later on.

Lighthouse suggests improving page load performance by reducing the length of Critical Render Chains either by reducing the download size or deferring the download of unnecessary resources.

Please note that the Performance score and metrics values can change between different auditing sessions on the same machine, because they're affected by many varying conditions such as your current network state and also your current machine state.

Continue reading %Progressive Web Apps: A Crash Course%

via SitePoint http://ift.tt/2iO5w94

#IFTTT #Feedly

0 notes

mrrolandtfranco · 8 years ago

Text

React Redux: Building Modern Web Apps with the ArcGIS JS API

I would like to share my experience building a React Redux app with the ArcGIS API for JavaScript (ArcGIS JS API). It is exciting how well these work together. I will also share some boilerplate source code to help you get started with your own React Redux ArcGIS application.

There are a number of reasons to take a closer look at the React Redux framework:

It’s hot (both literally and figuratively speaking). More on Hot Module Replacement below.

There’s total separation of data and presentation.

Redux makes state management more predictable (fewer bugs!)

React provides reusable UI components, blazing fast performance, and support for mobile (React Native) and server side rendering.

Crash Course: React + Redux

Before we start, here is a very quick intro to React and Redux.

The Redux Store keeps the application state. This state can be updated by dispatching actions. An action is nothing more than a JSON object with a type and some parameters (e.g., { type: ‘SET_DATE’, date: ’2017-03-15T13:24:00.000Z’ }). The store has a reducer, which, taking into account the action and the previous state, will produce the next state.

React lets you build components that react to changes of the application state. Components affected by a state change are re-rendered with the new data. Components also dispatch actions, for example when a button is clicked.

Learn more: React, Redux

The Demo App

To demonstrate the basics, I created a demo app that lets users sign in with their ArcGIS Online account and open a scene. I added a simple selection tool (Ctrl to select multiple features) and a simple sun position slider.

The source code and installation instructions are available on GitHub.

Software Architecture

The application is a textbook React Redux app as you would find in many tutorials. It has the usual structure of components and reducers. To make this possible, I have encapsulated the ArcGIS JS API in a middleware. I have implemented one middleware for the ArcGIS Online authentication, and another one for the SceneView.

The middleware intercepts actions, interacts with the ArcGIS JS API if necessary, then forwards the action or dispatches new actions. This pattern provides a nice encapsulation for store behavior that does not form part of the data. In other words, it keeps non-data objects out of the store (e.g., instances of esri/views/SceneView) and makes testing a lot easier.

Learn more: You Aren’t Using Redux Middleware Enough.

The Magic Sauce

What is the magical part of the configuration that makes the Esri modules directly accessible in the project? On one hand, we have a pure React Redux app; on the other hand, we are loading Esri modules as if they are right there in the project structure.

This works because we compile and pack the React Redux app with all its dependencies into a single AMD module. However, all Esri modules are automatically marked as external and skipped in this process. The ArcGIS JS API then runs the resulting AMD module as the main application, which makes the Esri dependencies available to the app.

Redux Dev Tools Extension

One of the greatest things about Redux is the Dev Tools Extension. This extension lets you inspect the application state live as it updates, and it lets you dispatch actions from the console. This is great for rapid prototyping: you don’t have to build a UI to test a feature.

For example, when developing the sun position slider, I first implemented the SET_DATE action, and added the corresponding environment updates in the SceneView middleware. I could then try to change the sun position by dispatching SET_DATE actions from the console, and see the state update accordingly. Once that was working correctly, I implemented a range slider component to dispatch those same actions.

Hot Module Replacement

Hot Module Replacement exchanges, adds, or removes modules while an application is running, without a full reload. This has numerous benefits for development:

Application state is retained, which is lost during a full reload.

You save development time by only reloading part of the application (e.g., don’t wait for the SceneView to reload).

The UI can be tweaked quickly, in real time (fast prototyping).

How it works: when a module is updated, the front end is notified and downloads the changes. For components, the application DOM is refreshed with the updated component. For reducers, the application store replaces its reducer with the updated reducer.

Looking closer, refreshing the DOM would inevitably reload the SceneView after each component update. To prevent this from happening, the SceneView is created and stored in the middleware. In fact, the middleware stores both a SceneView object and its container element. On refresh, the existing container is automatically attached to the refreshed React component.

Learn more: Hot Module Replacement

Testing

React makes front end testing a breeze. Components can be tested using Jest and Enzyme. Jest is an awesome testing tool developed by Facebook. Enzyme sits on top and is a testing utility for React developed by Airbnb. The combination of React and Enzyme is a game changer.

You can do shallow tests to check if everything is rendered OK and the right actions are dispatched when clicked. You can do deep tests to check if several components are loaded together correctly. It allows for an unprecedented level of front end testing.

To get you started, I have added some Jest and Enzyme tests to every module of the boilerplate.

Learn More: Writing Tests – Redux, Jest, Enzyme

Build Process

Building the application has been a challenge due to the ArcGIS JS API‘s dependency on Dojo. Nevertheless, there exists a very elegant solution.

The React Redux app is compiled and packed into an AMD module, which fits into the Dojo toolkit. We use Babel to transpile ES6 to regular JavaScript, and then Webpack to bundle the application into a single AMD module. However, we use a regular expression to exclude all Esri modules from this build process.

The ArcGIS JS API loads the resulting module as the main application (as defined in dojoConfig.js). This makes the Esri dependencies available to the app and allows everything to run smoothly.

Resources

React Redux JS4 Boilerplate on Github

Credits

To code this boilerplate application, I have used this work by Rene Rubalcava as a starting point.

from ArcGIS Blog http://ift.tt/2xaP4YF

0 notes

rafi1228 · 5 years ago

Link

Angular (Angular 2 or 4), React or Vue? Get a Crash Course on each of them and a detailed comparison!

REACT DEVELOPER

Created by Maximilian Schwarzmüller, Academind by Maximilian Schwarzmüller Last updated 2/2019 English English [Auto-generated]

What you’ll learn

Choose their favorite JavaScript framework and dive deeper into it

Understand the JavaScript world and its many packages and tools better

Take their JavaScript apps to the next level

Requirements

Basic JavaScript knowledge is a must

Advanced JavaScript knowledge is a plus but not required

No prior JavaScript framework or library experience is required

Description

REACT DEVELOPER

After learning the basics about JavaScript, the JavaScript world can be very intimidating. There are lots of different frameworks like Angular, React or Vue, libraries and other packages (like webpack).

You’ll quickly see yourself ask these questions:

What do all these packages, tools, libraries and frameworks do?

What IS a library and what’s the difference to a framework?

Which framework should you learn? Angular, React.js or Vue.js?

What about jQuery?

This course will help you with that!

You’ll get an introduction into the three most important JavaScript frameworks (Angular, React.js and Vue.js) and you’ll also get a detailed comparison! This will then allow you to pick other resources or courses to dive super-deep into your chosen framework whilst having a solid foundation already.

Throughout the course, we’ll dive into the basics of these frameworks but we’ll also have a look at why we use them to begin with. The role of jQuery and how these frameworks differ from jQuery will be clarified, too!

Which framework should you learn?

Not only are we going to dive into the basics of the three most popular JavaScript frameworks, this course will also draw a detailed comparison. A couple of different dimensions will be considered to find out which framework might be the perfect tool for the job you have at hand!

REACT DEVELOPER

This course won’t stop at this point though!

We’ll also have a look at Webpack and “Build workflows” in general. You’ll learn which role these (and the respective packages like Webpack) play and why we need them. You will also understand which role ES6 and TypeScript play.

Here’s a detailed overview over what you’ll get!

An introduction to today’s JavaScript world and an immediate overview over the different roles of the individual pieces

A practical example showing you why vanilla JavaScript (=without any libraries or frameworks) might NOT be all you need

An overview what JavaScript frameworks are and where to use them

Detailed introductions to the three most relevant JavaScript frameworks as of today: Angular (2, 4), React.js and Vue.js

An introduction to Webpack and why we use it (and build workflows in general)

A detailed comparison of the three frameworks shown in this course – when could you pick which?

A detailed understanding of the JavaScript world as it is today

Is this course for you?

Now that you learned what this course offers, let’s find out if it’s the right choice for you. It’s definitely the right choice if you can answer at least one of the following questions with “YES”:

You have basic JavaScript experience and want to learn how to use libraries or frameworks to “do more with JavaScript“

You’re not sure which JavaScript (frontend) framework you should learn

You already know something about JavaScript frameworks but want to get a basic introduction to the three most important ones

You already know either Angular, React.js or Vue.js but also want to get an overview over the other two frameworks

You’re totally confused by the many terms the JavaScript world throws at you

I’d be very happy to welcome you on board of this course!

Who this course is for:

Everyone who’s interested in diving deeper into JavaScript and wants to learn a JavaScript framework

Anyone who isn’t sure which JavaScript framework to choose

Anyone confused by the many options, packages and tools JavaScript development offers

Size: 1.4 GB

DOWNLOAD TUTORIAL

The post ANGULAR, VUE JS & REACT DEVELOPER – QUICKSTART & COMPARISON appeared first on GetFreeCourses.Me.

#IFTTT #Blogger

0 notes

rafi1228 · 6 years ago