It seems that everyone is trying to learn how to code these days. But where can you go to get some programming help? We’ll help by giving you reasons why programming is beneficial to your career and provide advice on where you can get the assistance you need.
Learning the basics of coding a computer is a popular topic that spans across multiple industries. Children as young as four are being taught on how to program computers and adults are encouraged to pick up the coding skills regardless of your career.
Steve Jobs states, “I think that everyone in the country should know how to program because it will teach everyone how you think.”
The government is also doing a bit as well. Even children as young as 11 years old are starting to learn how to code. So the question is, why is there a rush to start coding? In this post, we’ll find out why there is a push to get everyone coding and learn why you should code.
Are you ready?
Then let’s begin!
Where Can I Gain Programming Help?
Most coders tend to communicate via online forums, websites, and social platforms. We suggest that you look at the following sites if you’re trying to get better at programming. Sometimes you’ll find that most of your questions have been answered before!
Stack Exchange
Stack exchange has a Q&A community where people can ask and answer questions. Professionals and experts make sure that the helpful answers tend to be easier to find. It has over 149 communities such as:
Programming Puzzles: Where people can solve, play, and program puzzles.
Super User: A discussion form for power PC users.
Web Applications: A group for web applications of developers.
Code Project
Code project is a website that gives coders helpful information, news and source codes. Additionally, it has discussion forums for software developers to share thoughts with like-minded coders within the community.
And it has a Quick Answers section to ask and receive some specific technical assistance. Code Project allows users to ask questions, speak in discussion boards, and obtain weekly updates.
Having a community of over 11+ users, this is the general programming forums that are classified using tags based on development platforms, web services, and programming languages. Some of the best programming forums and that’s classified having tags based on development platforms, web services, and web services.
Quora
Quora has informative content that’s shared and created by users. Although it works with a variety of topics and most of the answers you’ve found are from expert opinions. It proves to become a valuable resource for software development information and programming.
After signing up, users can ask questions by pressing “Ask Question” and answer questions when pressing the “Write” button on the top bar. Some of the supported topics found on Quora to find any important info are
Python
Android
CSS
JavaScript
Ruby
Why Is Coding Beneficial to my Career?
When you’re starting off, it can be difficult at first. But trust us, once you’ve taken time to select a dedicated language and you continue to work on it, you’ll start to see positive results over time. Here are some career benefits that are open to people who are willing to learn how to code and use it effectively.
Opens Your World to Possibilities
Whether it’s for personal development and growth, career change, career advancement, or have a desire to enhance your digital literacy, knowing how you configure and contribute to software means that there’s no limit on your impact within the tech world.
I’ve seen people create apps for family weddings, games and apps that have been used as gifts for birthdays, and people have given huge salary increases by taking responsibility of your company’s mobile or web presence.
Quite literally, you can have the ability to help the world and help solve problems with others. And what could be better than that?
Improves Digital Literacy
Digital Literacy measures your ability to process and manage your information correctly using technology. Knowing how to code will help you become naturally in tune with your PC or Mac. You’ll explore more applications and tools that you’ll use during daily basis than the average home user, and this will translate your improvement in digital literacy.
To show a real-world demonstration of this, think about the touch screen order systems that the majority of fast food chains are using in their restaurant. Having familiarity and comfort with smartphones and tablets allows us to utilize and experiment with them with relative ease, even if we’ve never used this application before.
It’s a Skill That’s Always Relevant
Every company has a technology sector to it. Knowing the mechanics behind how software works mean that the industry is that can benefit from the knowledge acquired. Regardless of your background, the ability to make and advance their technology will help you stand out from non-technical savvy and stay on the cutting edge of innovation.
Helps Your Internet Creation Skills
Have you ever felt that you were limited by the software are your computer, then knowing how to code is one of the easiest way to remove yourself due to that negative perception.
Not only does learning how to program means that you’re able to solve problems and create solutions to your needs and standards, but this also means that you’ll have the ability to create solutions for people.
Based on Nikola Tesla, the great inventor in 1896, “I don’t think there’s a thrill that can go through your human heart like that of an inventor as he finds more creation of your brain unfolding success.
“Having the ability to code makes you an investor and stakeholder within the tech industry, in technology, instead of an average consumer.”
Conclusion
It doesn’t matter if you’re interested in learning HTML 5 or machine learning through Python. Getting the help you need on your preferred subject is the fastest way to improve your programming skills. Thus, make sure you find the right communities to help you on your programming journey so you can become a better developer.
Now that you know what a progressive web app is, you’re probably wondering if your organization would benefit from one. To determine if it makes sense for your organization, ask yourself two questions:
Does your organization have a website? If so, you would probably benefit from a progressive web app. This may sound flippant, but it’s true: nearly every website should be a progressive web app, because they represent best practices for the web.
Does your organization make money on your website via ecommerce, advertising, or some other method? If so, you definitely need a progressive web app, because progressive web apps can have a significant impact on revenue.
This doesn’t mean that your site needs to have every possible feature of progressive web apps. You may have no need to provide offline functionality, push notifications, or even the ability for people to install your website to their homescreen. You may only want the bare minimum: a secure site, a service worker to speed up the site, and a manifest file—things that benefit every website.
Of course, you may decide that your personal website or side project doesn’t warrant the extra effort to make it into a progressive web app. That’s understandable—and in the long run, even personal websites will gain progressive web app features when the underlying content management systems add support for them. For example, both Magento and WordPress have already announced their plans to bring progressive web apps to their respective platforms. Expect other platforms to follow suit.
But if you’re running any kind of website that makes money for your organization, then it would behoove you to start planning for how to convert your website to a progressive web app. Companies that have deployed progressive web apps have seen increases in conversion, user engagement, sales, and advertising revenue. For example, Pinterest saw core engagement increase by 60 percent and user-generated ad revenue increase by 44 percent (Fig 2.1). West Elm saw a 15 percent increase in average time spent on their site and a 9 percent lift in revenue per visit.
Desktop apps have been around for a while — since the beginning of the personal computing revolution. They’ve weathered the transition from floppy disks to DVD’s. Survived the internet era and the mobile revolution. The question is — why?
I’m here to argue that the humble and unloved desktop app is here to stay. In this article I’m going to make a case for desktop apps by focusing on two technologies in particular that have been lauded as desktop app killers - Mobile /apps and web apps.
Would be assassin #1 — The mobile app revolution
Recently, Apple made a really interesting announcement. No, not the iPad pro (but we’ll come to that), or the MacBook Air. I’m talking about the 1st of November, during Apple’s fourth quarter earnings call. Apple announced that it will no longer be reporting unit sales of the iPhone. The reason? Certainly not what Apple had to say:
“A unit of sale is less relevant today than it was in our past,” Maestri said, adding that the number of units sold does not necessarily represent the relative health of a product’s underlying business.
The real reason is that iPhone sales have fallen flat. The smartphone market is saturated, and new hardware simply isn’t innovative enough to convince people they need to buy a new phone. Apple shares fell by 7% on the news. Not even the mighty iPhone X has made a difference. For me, this marks the end of the mobile revolution. And that’s not a bad thing.
“Whatever you’re doing, do mobile first” Google’s Eric Schmidt declared from the stage at mobile world congress in 2010. “The smartest developers start with the presumption of location, locality, connection and interactivity.” And who could have disagreed? Mobile was eating the world. And developers were switching to mobile in droves. The writing was firmly etched on the wall. The PC era was over — mobile would be the new computing paradigm.
And so it came to pass. It affected me personally. In 2013, my partner and I were looking for funding for a desktop app. And it was hard! Most seed stage investors simply didn’t want to know about desktop software. This made no sense to me. People were still using PC’s, right?
Mobile has always been one breakthrough away, but has never quite hit the mark. For example, despite Apples’ objections, it became clear that the screen on your phone simply wasn’t large enough to do anything truly useful or productive. Their initial response was the iPad. If you want to create rather than consume, you should buy an iPad! Slate declared the following
“Apple killed the netbook, more or less single-handedly, and we should all be grateful for it”.
The author then reluctantly added “True, the iPad, unlike the netbook, doesn’t come with a keyboard or a pointing device. But you can buy a keyboard for it.” Turns out keyboards are important. A tablet and a keyboard is just a bad laptop.
It’s now 2018 and look no further than the most recent version of the iPad Pro to see that Apple are still trying to convince us mobile is the future. It’s got a chip, Apple says, that is 92% faster than all laptops released in 2018, including those containing intel’s flagship i7 processor. To reinforce this point, they brought Adobe on stage to demo Photoshop. Photoshop! on an iPad! Looks like my laptop is headed to the recycle bin. But even now, Photoshop on the iPad is a heavily compromised experience. I won’t go into examples — you should head over to this excellent article written by the Verge’s Nilay Pattel for his thoughts on Photoshop for iPad.
Despite Apple’s (and others) best efforts, I still need my PC. New hardware form factors alone are not going to kill the desktop app.
Would be assassin #2 — Web apps
We have finally reached the point where web technologies can compete with native technologies. Feel free to debate the pros and cons of developing for the web vs. the desktop in the comments. But technology has very little to do with it. In my opinion, both desktop and web can provide a pretty decent user experience. Just look at the similarities between design tool rivals Sketch(desktop) and Figma (web). But native desktop apps have one considerable advantage. They are treated by the OS as a first class citizen.
Operating systems are designed to be containers for programs. So they do a really good job of allowing us to find, launch, use and switch desktop apps.
Finding
Windows, Mac and Linux all have app stores that allow you to easily discover, find and install the software. Yes, I could use Google. But that’s one extra step, and friction really matters. Chances are, if you are reading this, you are a techie. And we do love a simple UI. A flick, a swipe or a scroll in the right place can make all the difference in the world. Just ask Tinder.
One of my favourite bloggers, Ben Thompson of Stratechery puts it like this:
Finding and installing apps is trivial, easily accomplished on the bus, on the couch, or on the can. And it’s great for developers, as a set; the ease with which apps are installed via app stores likely means exponentially more apps have been installed in the last five years than in the thirty-five years that preceded the App Store.
Launching
This is important but subtle. The ability to pin a program to your desktop or launch and app from the dock/task bar is everything. It puts an important task a mere one click away. No user name or password screen. I click, and I’m there. Again, it’s all about Friction, or the lack thereof.
Switching
When using my browser, I normally have about 15 tabs open at any given time. And I find flicking between them is a royal PITA. Especially if it’s something intensive that requires interaction with other pages or applications. We use Zendesk at Hiri, which, for the most part, is excellent. But replying to users isn’t always straight forward. I may have to involve someone else on the team or copy and paste from another ticket. That means flicking between (even more) tabs and to make things worse, Zendesk has its own tabbed UI. Tabs within tabs.
Same goes for this blog post. Although Medium provide a perfectly adequate UI for writing, I wrote this in notepad and copy/pasted. That way, regardless of what tab I was using for research, I could easily flick back to my article via the glorious alt-tab. It removes a tiny piece of bothersome friction.
Using
I could cover some well worn territory here and say Apps on Operating Systems tend to be consistent with the UI of the OS. Or ‘what happens if you need to use it offline’. I could also argue that native apps are faster (Sketch above uses Apple’s Metal framework to good effect). But that’s not it. I like using desktop apps because they feel more substantial.
In his excellent book Thinking, Fast and Slow, Dr. Daniel Kahneman breaks the brain down into two decision making systems. System 1 is how we ‘feel’ about something, is unconscious, intuitive, automatic and fast. System 2 is conscious, rational, deliberate and slow. Guess which system is responsible for the vast majority of our decisions?
Rationally, I know that there is not much difference between a web based app or a desktop app. But I feel that a desktop app is a more substantial thing. I feellike it should work better because of its relationship with the OS. And how I feel is how it is — that is my reality. And I doubt I’m alone.
It’s complex.
I’m not wedded to desktop apps. Some things are just better online. I don’t feel there’s a need for a dedicated app to book a flight or read the news. But for some reason, I don’t like doing substantial things online. For example, design.
I’m really impressed with Figma, and maybe I just need to get over it, but I prefer that Sketch is doing its own thing, in a separate compartment that is not my browser. I like that it asks me if I would like to update rather than force it down my neck like most online SaaS stuff. I like that when I open a file I’m not uploading it to someone else’s server. I like that I feel that I’ve paid for, rather than rented the tool I’m using.
The reality is, as long as Operating Systems — and let’s be honest here, we’re talking about Windows and Mac OS- exist they are always going to favour the tools that utilise their respective desktop environments. Apple have doubled down on their app store with a recent redesign and the vertical integration of hardware and software using bespoke languages and deeper hooks into the OS. Microsoft have followed suit with their own app store and Surface hardware.
Kevin Kelly discusses the evolution of technology in his book — “What technology wants”. He makes the case that if the conditions are right, some technologies are inevitable:
“Science-fiction guru Isaac Asimov made the astute observation that in the age of horses many ordinary people eagerly and easily imagined a horseless carriage.”
The basic form factor of a PC is the product of natural and obvious evolution. It’s difficult to imagine a PC or laptop being useful without a screen a keyboard and a mouse. And the operating system/desktop app combination is the inevitable consequence of this technology. It has endured because we haven’t found the next step. iPads with keyboards are a just a bad laptop. Web apps are a bad facsimile of desktop apps. They are not the strongest branch in the evolutionary tree that is our interaction with computers.
Flutter, Google’s toolkit for building cross-platform applications, hit version 1.0 today. Traditionally, the project always focused on iOS and Android apps, but as the company announced today, it’s now looking at bringing Flutter to the web, too.
That project, currently called Hummingbird, is essentially an experimental web-based implementation of the Flutter runtime.
“From the beginning, we designed Flutter to be a portable UI toolkit, not just a mobile UI toolkit,” Google’s group product manager for Flutter, Tim Sneath, told me. “And so we’ve been experimenting with how we can bring Flutter to different places.”
Hummingbird takes the Dart code that all Flutter applications are written in and then compiles it to JavaScript, which in turn allows the code to run in any modern browser. Developers have always been able to compile Dart to JavaScript, so this part isn’t new, but ensuring that the Flutter engine would work, and bringing all the relevant Flutter features to the web was a major engineering effort. Indeed, Google built three prototypes to see how this could work. Just bringing the widgets over wasn’t enough. A combination of the Flutter widgets and its layout system was also discarded and in the end, the team decided to build a full Flutter web engine that retains all of the layers that sit above the dart:ui library.
“One of the great things about Flutter itself is that it compiles to machine code, to Arm code. But Hummingbird extends that further and says, okay, we’ll also compile to JavaScript and we’ll replace the Flutter engine on the web with the Hummingbird engine which then enables Flutter code to run without changes in web browsers. And that, of course, extends Flutter’s perspective to a whole new ecosystem.”
With tools like Electron, it’s easy enough to bring a web app to the desktop, too, so there’s now also a pathway for bringing Flutter apps to Windows and MacOS that way, though there is already another project in progress to embed Flutter into native desktop apps, too.
It’s worth noting that Google always touted the fact that Flutter compiled to native code — and the speed gains it got from that. Compiling to the web is a bit of a tradeoff, though. Sneath acknowledged as much and stressed that Hummingbird is an experimental project and that Google isn’t releasing any code today. Right now, it’s a technical demonstration.
“If you can go native, you should go native,” he said. “Think of it as an extension of Flutter’s reach rather than a solution to the problem that Flutter itself is solving.”
In its current iteration, the Flutter web engine can handle most apps, but there’s still a lot of work to do to ensure that all widgets run correctly, for example. The team is also looking at building a plugin system and ways to embed Flutter and into existing web apps — and existing web apps into Flutter web apps.
From now on, I won’t be building any more native apps. All my apps going forward will be progressive web apps.
Progressive web apps are web applications which are designed to work even more seamlessly on mobile devices than native mobile apps.
What do I mean by “more seamlessly?” I mean that most web traffic comes from mobile devices, and that users install between 0–3 new apps per month, on average. That means that people aren’t spending a lot of time looking for new apps to try out in the app store, but they are spending lots of time on the web, where they might discover and use your app.
Progressive web applications start out just like any other web app, but when a user returns to the app and demonstrates through usage that they’re interested in using the app more regularly, browsers will invite the user to install the app to their home screens. PWA’s can also benefit from push notifications, like native apps.
This is where it gets interesting. Just like any native app, the progressive web app will have its own home screen icon, and when you click on it, the app will launch without the browser chrome. That means no URL bar and no web navigation UI. Just the phone’s usual status bar and your app in all its almost-full-screen glory.
This has been a long time coming. None of the technology is particularly new — with the notable exception of the emerging cross-platform standard.
Some History
In the early days of the iPhone, there was no app store. Steve Jobs wanted developers to build iPhone apps using standard web technologies.
Sometimes visionaries are spot on, but they’re 10 years ahead of their time. Looking back from 2 years ago, Steve Jobs’ recommendation to build web apps for iPhone was called his “biggest mistake” by Forbes, because native apps became a smashing success.
Looking back today, it seems obvious that he was really onto something — just way ahead of the capabilities of the existing web standards of the day.
A decade later, mobile web standards now support many of the features developers looked for with native apps, and Steve Jobs’ original vision for mobile web applications is now being pursued seriously by the rest of the world. Apple has supported “apple-mobile-web-capable” web apps that you can add to your home screen almost since the beginning using meta tags that help iOS devices find things like suitable icons.
Other vendors followed suit, each creating their own collection of meta tags to declare mobile web app capabilities, but recently, a cross-platform specification was introduced, and now, cross-platform mobile web apps are finally becoming a real thing.
The apps implementing the standard are called progressive web applications, not to be confused with confusingly similar terms like progressive enhancement or responsive apps.
What Are Progressive Web Apps?
Progressive web apps are just web applications designed to be mobile friendly. If the browser sees that the user wants to keep using the app, it may prompt the user to install it to their home screen, dock, etc… In order to qualify though, they have to meet a specific criteria:
Must be HTTPS (see let’s encrypt)
Valid manifest with required properties (Web Manifest Validator)
Must have service worker
Manifest start_url must always load, even offline (using service worker)
Must supply its own navigation
Should be responsive to different screen sizes and orientations
Of course, using HTTPS and a service worker for offline users is just good practice for any modern app.
What many app builders seem to forget is that if you build a progressive web application, you must be able to navigate the application without the browser chrome and browser navigation gestures. The mobile devices assume that you’ve built your own navigation into the app.
For example, if you have an about page, that page must have a link back to the app UI, or the users will have to close and reopen the app to get back to your main app UI.
Progressive Web Apps How-To
There’s a lot of information about building progressive web applications spread all over the web, but many of them are out of date, and lots of them contain only a fraction of what you need to know to build one. Let’s fix that.
Enable HTTPS
To enable HTTPS, you’re going to need:
A web server (I recommend DigitalOcean)
An SSL certificate
A strong Diffie-Hellman group (sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048)
TLS/SSL config for your web server (instructions for Nginx on Ubuntu)
The Manifest
The manifest file is called manifest.json and it’s pretty simple. It consists of the name (short_name for the home screen icon, and an optional name for a more complete name), a start url, and a large list of icons so you can support the large range of different icon sizes needed for various platforms. For Android + iOS, you’ll need:
36x36
48x48
60x60 (Apple touch icon iPhone)
72x72
76x76 (Apple touch icon iPad)
96x96
120x120 (Apple touch icon iPhone retina)
152x152 (Apple touch icon iPad retina)
180x180 (Apple touch icon for iOS 8+)
192x192
512x512
I singled out the Apple touch icons because they have the well-known names:
apple-touch-icon-180x180.png
Where 180x180 can be replaced by whatever the specific resolution is. Using the well-known names is not required, but if you forget to include the tags, iOS can still find the icons by searching for them in your web app’s root directory if you use the well-known names.
There are some features you should know about. The theme_color sets the color of the status bar and the window header bar used when switching between apps on Android.
The background_color sets the color used on the splash screen. On Android, a splash screen will be composed from the name property (the long name), and a large icon on top of the background_color.
Manifest isn’t Everywhere
The first time I built a progressive web application, I was thrilled that it worked as expected on Chrome for Android, but when I looked at it in Safari/iOS, it didn’t seem to work. The reason is that mobile Safari, in spite of supporting these features using custom tags for a decade or so doesn’t yet support the web manifest spec.
So, in addition to the manifest file for supported browsers, you’ll also need special meta tags for iOS, beginning with this one, which will launch the app without the browser chrome:
There are lots of tags to remember, though, and there may be another way to do it. There’s a web manifest polyfill that will read your manifest.json file and add the vendor-specific tags for older mobile browsers, iOS, and even Windows phone and Firefox OS.
Service Worker
Service Worker is a recent web platform specification that allows you to cache resources locally in order to make sure that your app still works, even if the user is not connected to the internet.
It works by hijacking your network requests and serving responses from a local cache when the user is offline. There’s a lot more to it than that, though. It’s a fairly sophisticated low-level API, which allows you to do a lot to optimize your user’s experience whether they’re online or offline.
To get started, I’m going to recommend a very simple higher-level abstraction. A little script called UpUp. Using UpUp is really simple. Here’s an example from the UpUp docs:
The content-url is the URL to load when the user is offline. I just use the app’s root URL for this, and it works fine.
The assets are files that need to be cached locally in order for the app to function properly. Remember to make sure that all your images, icons, CSS, and even default AJAX request responses are included. As you can see, any file type should work.
Eventually, you may want more control over your offline resource caching than UpUp provides. When that day comes, here are some great educational resources to get you started:
Free Google Udacity course
Service Worker Cookbook for in-depth coverage.
Testing
Debugging the physical device with Chrome inspect
Plug your device into a USB cable. Turn on USB debugging on your Android device. See remote debugging instructions. You may need to Google around to figure out how to put your Android phone in developer mode to enable remote debugging.
Once you turn on developer mode, you may see developer options show up in your settings mode. Open that and make sure that USB debugging is turned on.
Visit chrome://inspect#devices. Hit the inspect button and you’ll get the full dev tools for your app.
Verify your service worker
Visit chrome://inspect/#service-workers to verify that your service worker is working properly.
Verify install to homepage
If you want to skip the user engagement checks and always get the install to homepage option, turn on “Bypass user engagement checks” in Chrome flags:
chrome://flags/
To test on a desktop, you should also flip “Enable add to shelf”.
Native Apps are Not Dead Yet
Progressive Web Apps now have most of the capabilities of native apps, the install friction promises to be lower than native apps, you’ll no longer need to worry about the app store gatekeepers, and you won’t have to pay anybody a 30% tax on app sales for the privilege of being in an app store.
But native apps still have a few capabilities that mobile web apps will not have for a potentially long time.
Notably, most of the sensor and hardware integration specs have limited or no support in most browsers and even basic features like the device orientation API have undergone breaking changes, with multiple versions of the spec live in various browsers, requiring some tricky logic or polyfills to use safely.
Ironically, even though Apple pioneered many of the progressive web application technologies, iOS seems to be the only major obstacle to progressive web app adoption. They don’t currently support service workers, but they are in development.
Thankfully, there’s a Cordova plugin that adds service worker support to hybrid apps on iOS.
That said, I don’t trust all web browser vendors to implement install prompts in a particularly user-friendly way. Using the spec today, users may or may not be prompted to install your app, and if they go searching for it in the app store, they won’t find it unless you also publish a hybrid app through the traditional app store process.
For the short-term, we may be stuck using Cordova or something like it to fill the gaps on iOS devices, but good support for the spec is quickly rolling out on Android devices. If you have a recent Android phone running Chrome, there’s a good chance your app will work without resorting to a Cordova build.
If you think the lack of Apple support should hold you back, remember that Android is now 86% of the global mobile OS market. It may be worth the effort to build a PWA even if you have to polyfill iOS with Cordova in order to take advantage of lower install friction for 86% of the world.
Conclusion
In the short term, you may still want to produce a hybrid app that can take advantage of some device APIs that are still not available using web standards.
After building my first progressive web application, I’m hopeful for the future, but I’m also conscious that it isn’t perfect. Getting everything to work smoothly across all the device platforms does take a while. You also have to remember that you’ll miss out on the discoverability features and well-known installation procedures that users are familiar with in the app stores.
Hopefully browser vendors will catch up with the vision, and eventually, there will be a much better install experience for progressive web applications than there is for native apps. It looks like things are going that way.
Certainly, native apps will survive for a while longer, but if you’re busy learning Swift or Java so you can build native apps, you may want to consider learning JavaScript, instead.
Want to give some progressive web apps a try? Check out pwa.rocks.
Modern culture is a ‘now culture’. We don’t want things tomorrow, or even in a minute, we want them now.
It’s not surprising then that every step you put between your potential users and your product/service reduces your onboarding rate by 20%! And then there are the potential blockers beyond your control, such as a user forgetting their Apple ID or Google Play login or a user’s phone running out of storage space. Anything and everything that hamstrings completions is a problem, which is why Progressive Web Apps (PWA) are so exciting. They skip the critical download step from the onboarding process, and in so doing, also skip a bunch of blockers that were previously beyond your control. PWA are one way you can hack growth and gain an edge on your competitors.
Progressive Web Apps 101
Progressive Web Apps are websites with the capabilities of apps. This is accomplished using the latest technologies and techniques, such as HTML5. Google describes these apps as progressive, discoverable, linkable, responsive and app-like.
Progressive Web Apps have several advantages on traditional apps, with discoverability and linkability being the most apparent. Discoverability and linkability simply mean the app can be discovered on search engines and linked to on devices with an internet connection. Factor in progressive and responsive and potential users should be able to open the app on any device by clicking on a link. While there are things PWA cannot do, this is something only they can do.
Progressive Web Apps vs. Traditional Mobile Apps
App development can be slow and expensive, but Progressive Web Apps should be less so than traditional apps. This is partly because they are web based, which means they have access to the wider web ecosystem of plugins and APIs. Being coded to work on browsers also helps with cross-device compatibility.
But it’s not all rainbows and sunshine. Progressive Web Apps also have disadvantages. While they have an edge on traditional apps during onboarding, the reverse is true when it comes to retention.
Localytics reports that 52% of users will opt-in to push messages and that these users have an 88% higher engagement rate. Overall, push notifications lead to higher retention rates.
The problem is, although new APIs allow websites to send push notifications to mobile, users are three times more likely to reopen an app than a website.
Also, because apps run directly on the mobile device, rather than on a browser, they can be better optimised and consume less online data. However, as it is still early days, it’s likely the limitations and disadvantages that are holding Progressive Web Apps back will be overcome.
Android Instant Apps
It’s perhaps no surprise that Google, who coined the term Progressive Web App, is making the biggest waves in this space. Google has recently begun limited testing of Android Instant Apps (AIA): which could seamlessly combine PWA and traditional, native apps.
App owners will not need to develop and maintain a Progressive Web App separate to its native app, instead, Google will allow users to discover the app on Google Play and either download the native app or instantly access the PWA.
Android Instant Apps have the potential to make the best of both worlds. Users can easily discover an app using a search engine or a link and drive straight into engaging with its core service or product offering with the additional option to download a native app.
Where are we now, where are we going
Overall, it’s still early days for Progressive Web Apps and Android Instant Apps, but there’s a lot of promise here. I'm certainly excited.
Android Instant Apps shows a sweet spot melding of Progressive Web Apps and traditional apps. Where an app can be discovered on Google or in a Facebook message, accessed once without a download and then, later, saved to the mobile's home screen or (in the case of Android Instant Apps) even downloaded.
2019 is set to see ecommerce sales increase by 19.5% globally, offering an opportunity to savvy brands who are up to speed on the latest web design trends and developments to drive significant additional market share.
But what do brands need to bear in mind in 2019 to ensure that they continue to deliver relevant standout online design, and therefore sales?
Mobile First
It’s vital to implement mobile first design in 2019. In 2015 mobile searches overtook those on desktop, making mobile search the highest search form worldwide. In accordance with this, Google has changed which sites they index first — they now prioritise mobile sites over those that aren’t mobile friendly.
However, it’s worth bearing in mind that this push toward mobile first design isn’t just based on ranking factors or SEO, the visual result must enhance the user’s experience on the device that they will most likely be searching from.
This focus on mobile first requires a fundamental shift in the way that websites are designed. It used to be that a site would only be created for a desktop or laptop computer and a mobile-friendly or mobile responsive design might be added as well. Today, it’s critical to design the site for the mobile user first, before creating a version that will also standout for those on desktops.
Micro-animations/movement
Using moving micro-animations along with feedback loops - that deliver movement when hovering over an icon - help make websites more usable and engaging. The details of the micro-interactions: the button clicks and the page transitions can greatly improve a user’s experience on your site, meaning they are far more likely to return. It’s this meaningful motion, connecting an action with a reaction, that satisfies a user’s desire for interactivity. And with touch interfaces, especially on small screens, it has never been more important to deliver motion in micro-animations and feedback loops to make the interaction smooth and guide users on their journey to checkout.
Custom and classic fonts
Expect a move back to custom and classic font design - clean but formal – with bigger and bolder typefaces, and a move away from humanist fonts as brands aim to standout against the proliferation of humanist typefaces.
Colour
Bright colours should be used more liberally in 2019 to deliver greater standout. The last two years has seen an explosion of big, bold colour across the internet with an increasing number of brands choosing to use their core packaging brand colours as backing for their graphics, with clashing tones moving away from the edgy start-ups into the mainstream. Those who have embraced arresting colours include The Premier League, Sky and eBay. Though bear in mind a classic font design and bright colours won’t be suitable for all. The choice of font and colours has to be right for the values of the brand and resonate with the audience they are targeting.
Optimise for search
As is always the case, making sure the design of your website is optimised for search algorithms is vital. Developments in web design will be driven by what Google’s constantly evolving search algorithm looks for. To this end, make sure that the content being communicated is relevant to your target audience and written as naturally as possible. Google looks for honest, human generated content. Of course, this must be quality content to encourage others to have weblinks back to your site to aid your SEO efforts. If users want to share your copy this highlights to Google that you are a valuable resource and the reward for your efforts will be an improved organic search ranking.
Speed
With research revealing over half of consumers leave a website if it takes more than three seconds to load, websites must be designed with speed in mind. Also, the faster your site loads the better it will rank in search results, particularly in Google search. This is not to say that websites should be sparse affairs with limited content and imagery for the purposes of speed. With better broadband it’s much easier to have image and content heavy sites that can load quickly. However if you have an app it’s seriously worth considering hosting it on a Progressive Web App (PWA) for speed purposes. A PWA can be launched from a home screen and can be ready in less than a second, often beating native apps in load times.
All brands need to constantly evolve their web design to continue to standout and deliver an engaging experience to their users that generates sales. By recognising and having these six web design points front of mind, brands will be well placed for a profitable 2019 online.
Tools and techniques to help you deliver content quicker.
Agencies and website owners can be slow to adapt to changes in technology, often because the latest fad can fall out of favour as fast as it emerges. We have a tendency to rely on more tried-and-tested solutions, which aren’t always the fastest and therefore don’t always deliver the best user experience. So if you've ended up in a rut with your web design processes, here are some top web design tools and techniques that could help you speed up your sites and apps, and improve UX.
01. Use a JavaScript framework
Using a JavaScript framework is one way to improve the speed of your web apps. This approach has risen in popularity over the last few years in particular and wider industry support exists for most packages. Using a JavaScript frameworkwill often enable you to build the site as a single-page application (SPA), which loads only the minimum content required to your browser.
A word of caution: this will improve speed but (unless you're willing to add a lot of customisation and server work) isn't that SEO-friendly. So keep it to web apps rather than websites.
02. Try progressive web apps
Progressive web apps (PWAs) adapt websites or web apps to make them functional offline when added to mobile home screens. They typically use web browser features to store data offline – perfect for patchy internet connections. If you want users to return to your application often, consider a PWA. You can prompt mobile users to add these sites to their home screens for quick access and immediate loading.
03. Explore AMP
A Google-led working group released AMP in February 2016 to load pages submitted in the correct format instantly from Google’s global network. The technology, like Facebook’s Instant Articles, requires businesses to maintain additional codebases and gives access to fewer design features but offers better search engine visibility and usability. It’s particularly good for media producers with topical content.
04. Consider a CDN
Content delivery networks (CDNs) aren’t new, but plenty of websites still don’t use them. CDNs let you move the job of delivering a website and its assets from the server itself to a global distribution network, which is faster. CDNs enable sites to run much quicker, as the user isn’t waiting for the end server to do all the work. They’re especially helpful for sites built for design over functionality.
05. Add a caching plugin
Caching plugins are offered with many CMSs, but are often ignored. WordPress, for example, offers many. Within the software, your server will store snapshots of pages rather than compiling a new page for every request. This means end users get the same speed impact as if you were serving them a static website. Businesses can couple caching with CDNs to improve site speed significantly.
This article was originally published in net, the world's best-selling magazine for web designers and developers. Buy issue 311 or subscribe.
Today we will introduce you to some of the popular and commonly used developer tools for Node.js.
With the introduction of Node.js, it has become easier for application developers to create a fast, reliable, and scalable web application with much fewer lines of code. Node.js was created by Ryan Dahl in 2009 using the Google Chrome V8 JavaScript runtime environment.
Software development is continuously evolving with the emergence of new technologies, trends, and programming languages. But with the implementation of Node.js and its modules, the development of applications has simplified a lot. The best thing about Node.js is that it allows developers to create an application on both the client and server at the same time.
Today we will introduce you to some of the popular and commonly used developer tools for Node.js.
Express.js
Socket.io
Meteor
Keystone
Koa.js
PM2
Electrode.js
Babel
Broccoli
Webpack
1. Express.js
Express is a powerful and flexible Node.js web application framework that offers an effective set of features for creating mobile and web applications. It also enables users to create a robust API in a much simpler and easier manner. With the combination of Node.js and Express.js, you can easily design an entire website. Node.js will help you to develop the server part, while the applications can be published over the website using Express.js. It contains several powerful features such as the ability to integrate database, simplified multiple routing, and template engines in order to develop powerful and robust applications.
2. Socket.io
Socket.io has the ability to facilitate bi-directional and event-based communication in real-time. It is among the quickest and most reliable real-time engines. It provides real-time analytics along with counters, logs, and charts. It is also suited for most chatting applications and widely implemented by companies like Microsoft, Zendesk, Trello, and some small start-ups as well. It offers much better debugging, scalability, integration, and binary support. It simply speeds up everyday work and is easy to use for both novices as well as experienced programmers.
3. Meteor
Meteor can be defined as a framework that is based on Node.js. It has the potential to script cross-platform code including Android, iOS, and web. It is integrated with MongoDB and can be easily implemented with any JavaScript UI widget library. This tool has the ability to shorten 1000 lines of code into just 10. You can develop faster and easy-to-use applications with this platform as compared to any other. You can do your work seamlessly on this Node.js tool including accessing database to server business logic to rendering to the client.
4. Keystone
If you are looking for the easiest ways to learn and start developing applications with Node.js, then Keystone is the perfect place for you. Keystone, based on Express, is an open source and full stack framework. It uses MongoDB as the database. It is a better option for creating database-driven websites, applications, and APIs in Node.js. The coolest feature of this tool is its auto-generated user interface with which you can easily handle your website. Both Express and MongoDB together provide a robust CMS framework. So, download this tool now to start learning how to code in Node.js.
5. Koa.js
Koa.js is a next generation web framework for Node.js. It is designed by the team of Express. Within a few years, it has proved to be more expressive, smaller in size, and robust especially for creating web applications and APIs. It requires Node v7.6.0 or higher for ES2015 and async function support.
It does not depend on middleware, unlike other similar frameworks. It has built-in plugin packages that provide support for operations like routing, compression, caching etc. It also has the ability to remove the callbacks and reduces the errors.
6. PM2
Whenever we talk about the easiest and simplest developer tools that are used in Node.js, PM2, one of the well-known names, comes in mind. It actually serves as a process manager, especially for Node.js applications. It comes with a set of features that are ideal for a production environment. It also has support for the community of developers and enterprises from all over the world. Its list of features includes the following:
Behavior configuration
Source map support
Container integration
Watch & reload
Log management
Monitoring
Max memory reload
Cluster mode
Hot reload
Development workflow
Startup scripts
Deployment workflow
PaaS-compatible
Key metrics monitoring
It has the ability to monitor and reload the application without any downtime in case of a sudden crash. The finance software companies like Intuit, and the online payment gateway PayPal use PM2.
7. Electrode.js
Electrode.js is a powerful developer tool created by WalmartLab. This tool is widely popular and suitable for React.js and Node.js applications. It’s not only a set of best practices, standardized structure, and modern technologies – it also includes Electrode Explorer and Electrify. This tool will ensure the reusability of the components, good performance, and deployment of the applications to the cloud. The user of any skill level can easily learn and perform coding practices. Try installing and working on it.
8. Babel
Babel can be viewed as a toolchain that is widely implemented in order to transform ECMAScript 2015+ code into a backward compatible version of JavaScript. It is commonly used as a front-end development tool. It also provides support for JavaScript latest version.
Let us have a look at some of the interesting and powerful features of Babel. The main features of Babel are listed below:
Ability to transform the syntax. It also tries to use the least code as possible.
Supports features like polyfill and source code transformations.
Offers support map so that you can debug the code easily.
Does not contain any built-in plugin. You can create your own plugin and then use it.
9. Broccoli
Broccoli can be termed a Node.js development tool that is based on the ES6 module. It is a fast, reliable asset, supporting constant-time rebuilds and compact build definitions. The build specification lies in the Brocfile.js file in the project root. You can easily use this tool. Click on the link below the image to download it from the GitHub.
10. Webpack
Webpack is widely used along with Node.js as it has the ability to bundle and serve assets much easier and faster than other development tools. It actually simplifies the overall process of deployment of applications and makes the development process easy.
However, it is also used to bundle the JavaScript pages to get further implemented in a browser. As a result of this, the overall initial loading time is minimized.
When you use eight values specifying border-radius in CSS, you can create organic looking shapes. WOW. No time to read it all ? — we made a visual tool for you.
During this year’s Frontend Conference Zurich Rachel Andrew talked about Unlocking the Power of CSS Grid Layout. At the end of her talk, she mentioned something about an old CSS property that got stuck in my head:
The Image is set round just by using the well-supported border-radius. Don’t forget that old CSS still exists and is useful. You don’t need to use something fancy for every effect.
— Rachel Andrew
Shortly after I heard this talk, I thought that you certainly could create more than just circles and started to dig deeper into what can be done using border-radius.
Mastering Border-Radius
SINGLE VALUE
Let’s start with the basics. Hopefully this will not bore you. You are probably familiar with CSS, and you also know border-radius. It has been around for some years now, mostly used with a single value like this: border-radius: 1em and was maybe one of the most discussed/loved CSS3 features back in 2010 when css3please.com was your best friend.
Whenever you only use a single value, all corners are rounded by this value:
As you can see in the example above, next to fixed length values like px, rem or em you can also use percentages. Those are mostly used to create a circle by setting border-radius to 50%. The percentage value is based on the width and height of the given element. So when you use it on a rectangle, you will no longer have symmetrical corners. Here’s an example showing the difference between border-radius: 110px and border-radius: 30%applied to a rectangle.
Notice that the corners on the right side are not symmetrical and keep that in mind. We’ll come back to this later.
FOUR DIFFERENT VALUES
When you use more than one value, you start setting values for each corner, beginning in the top left corner and then moving clockwise. Again you can also use percentages, and you could also mix percentages with fixed-length values.
EIGHT VALUES SEPARATED BY A SLASH (THIS IS WHERE IT GETS INTERESTING)
I think most of you have already done everything I explained above. Now we get to the exciting part. What happens, if you separate values with a slash and specify up to eight values? Let’s see, what the spec says about that:
If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally.
— W3C
So, values before the slash are responsible for horizontal distances whereas values after the slash define the vertical lengths. But what does that mean? Remember percentage values on rectangular shapes? We had different absolute values for vertical and horizontal distances and asymmetrically rounded corners, and that is precisely what you get when you use the slash syntax.
So when you compare border-radius: 4em 8em to border-radius: 4em / 8emthe results are quite different.
The symmetrical corners on the left form quarter of a circle, whereas the asymmetrical corners on the right are part of an ellipsis.
The shapes that you get with this look a little odd, to be honest. But remember the circles you create with border-radius: 50%. You get a circle because both values defining one side add up to 100% (50% + 50% = 100%) and there is no straight line left, that reminds you of the original square. If you apply the same logic to the full eight value border-radius syntax, you can create a shape that looks a little like a plectrum or an organic cell:
In the end it is four overlapping ellipses that build the final shape. Easy ha!
DON’T PANIC…WE MADE A VISUAL GENERATOR FOR YOU
It took me some time to get used to this syntax. Somehow it is not that intuitive. To make things a little easier for you, we built a little tool, that helps you create your very own organic shape.
Do(n’t) Cross The Streams
Now that you know about the 8 values in total, you might feel a little sad, because our border-radius-tool doesn’t give you the option to set each value separately…Sit tight, here is the 8-POINT-FULL-CONTROL version.
If you’re old enough, you might remember this quote from the 1984 Ghostbusters movie:
“Don’t Cross The Streams.” — “Why?” — “It would be bad.”
There is something similar going on here: If you cross the handles on one side, the shape behaves…let’s say unpredictably. But see for yourself, after all, it’s not going to end up in total protonic reversal or something, but don’t say, that I didn’t warn you.
PS. Many Thanks to simurai. Back in 2010, he created some CSS3 BonBon Buttons. Even though they look a little outdated, it is the only place I ever encountered and learned about the slash syntax.
Squoosh helps websites cut image file sizes and helps Google promote its WebP image-compression format.
Google Chrome Labs has released Squoosh, a web app that can compress and reformat images to make lighter web pages.
The tool is aimed at helping web developers quickly compress images and reduce image quality to an acceptable level, with the aim of making web apps that are light and fast.
However, it will also help Google promote its WebP image lossy and lossless image-compression format, which until recently was only supported by Chrome.
WebP aside, Squoosh is a progressive web app (PWA) that works with any browser on desktop and mobile, and offers several "best-in-class codecs" to compress and compare images within the browser.
Since it is a PWA, ChromeOS users and Windows 10 users with the latest version of Chrome will be able to use Squoosh like a native app. And with Windows 10 1809 now rolling out again, Edge users should be able experience it as a native app too.
Users can drag and drop an image onto the interface or select a file and then pick the optimal image format, resize the image, set a certain browser quality, and reduce the palette.
The idea is to help developers pick an optimal image format and make edits to minimize the size of the image file used for the web without sacrificing image quality too much.
Image formats that can be selected and compared include Google's Webp, Mozilla's mozjpeg, BMP, JPEG, GIF, TIFF, JPEG 2000, and PDF.
The presenters who took the wraps off Squoosh at the Chrome Dev Summit this week highlighted several examples where WebP reduced the image file size more than other formats.
The timing of the new app likely isn't an accident. Until recently only Chrome supported Webp, but the format has been given a major boost this month via Edge support in the Windows 10 October 2018 Update. Firefox 65, due out early next year, will add WebP support too.
Each time an adjustment to the image is made, the app displays how much smaller or larger the file is as a result of the change.
Users can also compare the difference each change makes to the image quality using a slider that shows the edited and original image. Once the optimal image has been determined it can be downloaded in the chosen format.
Assuming WebP does a good job on this front, it could mean more images in Google's format will start appearing on the web.
Why manually transfer playlists you have on Apple Music or Spotify to another music service when it can be done with justs a few clicks. iDB shows you how.
Transferring playlists between multiple music services is easy until you attempt to do it manually. Instead of having to painstakingly recreate your personal, carefully curated Apple Music playlists on another music-streaming service like Spotify or YouTube, or vice versa, you can just use an app to get the job done.
And the free TuneMyMusic web app delivers. The browser-based software makes the complicated, convoluted process dead simple. With TuneMyMusic, you can transfer your music library from any music service to any other you want with just a few clicks.
How to move music playlists between services
1) Point your browser at tunemymusic.com and click the purple button labeled Let’s Start.
2) On the next screen, select your source music platform.
TuneMyMusic supports Spotify, Apple Music, YouTube, Deezer, Google Play Music, Amazon Music, Pandora, Tidal, Apple Music and more. You can even upload your playlists as a file. For those wondering, yes the XML format that iTunes uses to export playlists is supported.
3) You will now need to log in to your chosen music service with your access credentials.
4) Select the playlists you’d like to move and click your preferred destination music platform on the next screen. Don’t worry about the wording: the playlist gets copied, not moved.
5) As the final step, on the last screen click the button labeled Start Moving My Music.
And that’s all there’s to it.
Log in to the destination music service to verify that everything looks good. Definitely try playing a couple of songs from these playlists. If some of the songs are missing from your playlists, that’s because the destination music service doesn’t have them in its catalog.
When switching from one music service to another, don’t leave all your precious playlists behind. With TuneMyMusic, finding your favorite Spotify songs on, say, Deezer is a no-brainer.
My Shazamed Apple Music playlist, on YouTube
I particularly like how TuneMyMusic lets me take my personal YouTube Music playlists (there’s a ton of great playlists on YouTube) to Spotify and listen to the songs there.
We have the ability to easily make immersive fullscreen websites and applications, but like anything on the web there are a couple of ways to do it.
This is especially important now that more browsers are supporting an "installed web app" experience which launch fullscreen.
Getting your app or site fullscreen
There are several ways that a user or developer can get a web app fullscreen.
Request the browser go fullscreen in response to a user gesture.
Install the app to the home screen.
Fake it: auto-hide the address bar.
Request the browser go fullscreen in response to a user gesture
Not all platforms are equal. iOS Safari doesn't have a fullscreen API, but we do on Chrome on Android, Firefox, and IE 11+. Most applications you build will use a combination of the JS API and the CSS selectors provided by the fullscreen specification. The main JS API's that you need to care about when building a fullscreen experience are:
element.requestFullscreen() (currently prefixed in Chrome, Firefox, and IE) displays the element in fullscreen mode.
document.exitFullscreen() (currently prefixed in Chrome, Firefox and IE. Firefox uses cancelFullScreen()instead) cancels fullscreen mode.
document.fullscreenElement (currently prefixed in Chrome, Firefox, and IE) returns true if any of the elements are in fullscreen mode.
Learn how to adapt your company to the new General Data Protection Regulation that will be applied from the 25th of May 2018 and take advantage of GDPR. GO!
A nice tool to use when checking if your product is GDPR complaint!
In this distro-agnostic article we will discuss the traditional methods to auto execute commands or scripts at reboot, logon, and logout in Linux
I am always fascinated by the things going on behind the scenes when I boot a Linux system and log on. By pressing the power button on a bare metal or starting a virtual machine, you put in motion a series of events that lead to a fully-functional system – sometimes in less than a minute. The same is true when you log off and / or shutdown the system.
What makes this more interesting and fun is the fact that you can have the operating system execute certain actions when it boots and when you logon or logout.
In this distro-agnostic article we will discuss the traditional methods for accomplishing these goals in Linux.
Note: We will assume the use of Bash as main shell for logon and logout events. If you happen to use a different one, some of these methods may or may not work. If in doubt, refer to the documentation of your shell.
Executing Linux Scripts During Reboot or Startup
There are two traditional methods to execute a command or run scripts during startup:
Method #1 – Use a cron Job
Besides the usual format (minute / hour / day of month / month / day of week) that is widely used to indicate a schedule, cron scheduler also allows the use of @reboot. This directive, followed by the absolute path to the script, will cause it to run when the machine boots.
However, there are two caveats to this approach:
a) the cron daemon must be running (which is the case under normal circumstances), and
b) the script or the crontab file must include the environment variables (if any) that will be needed (refer to this StackOverflow thread for more details).
Method #2 – Use /etc/rc.d/rc.local
This method is valid even for systemd-based distributions. In order for this method to work, you must grant execute permissions to /etc/rc.d/rc.local as follows:
# chmod +x /etc/rc.d/rc.local
and add your script at the bottom of the file.
The following image shows how to run two sample scripts (/home/gacanepa/script1.sh and /home/gacanepa/script2.sh) using a cron job and rc.local, respectively, and their respective results.
script1.sh:
#!/bin/bash DATE=$(date +'%F %H:%M:%S') DIR=/home/gacanepa echo "Current date and time: $DATE" > $DIR/file1.txt
script2.sh:
#!/bin/bash SITE="Tecmint.com" DIR=/home/gacanepa echo "$SITE rocks... add us to your bookmarks." > $DIR/file2.txt
Run Linux Scripts at Startup
Keep in mind that both scripts must be granted execute permissions previously:
To execute a script at logon or logout, use ~.bash_profile and ~.bash_logout, respectively. Most likely, you will need to create the latter file manually. Just drop a line invoking your script at the bottom of each file in the same fashion as before and you are ready to go.
Summary
In this article we have explained how to run script at reboot, logon, and logout. If you can think of other methods we could have included here, feel free to use the comment form below to point them out. We look forward to hearing from you!
The best JavaScript frameworks make coding faster and easier, so you can focus on designing the perfect website layout – instead of becoming bogged down in code. A number of great ones have popped up on the market in recent years.
In this article, we'll take a look at the biggest and best JavaScript frameworks around, and explore how to get the best out of them for your next projects. We'll look at Vue.js, React, AngularJS, Polymer and Aurelia – you can use the drop-down menu above to jump to the framework you want to explore first.
Most of these frameworks are open source projects, too, so you can dig in and see how they work – or even contribute yourself.
Vue.js
Best for:
Beginners
Lightweight applications with a small footprint
Vue.js is a progressive JavaScript framework for building user interfaces. An open source project (see the GitHub repo here), its ideal for beginners. The main library is focused on the view layer and all templates are valid HTML, making it easy to pick up. In the following two mini-tutorials, we'll walk through how to use Vue to manage multiple data stores, and speed up the first load to improve your site's performance.
01. Manage state with Vue
As with any component-based library, managing state in Vue can be tricky. While the application is small, it’s possible to keep things in sync by emitting events when values change. However, this can become brittle and prone to errors as the application grows, so it may be better to start out with a more centralised solution.
If you’re familiar with Flux and Redux, Vuex works in much the same way. State is held in one centralised location and is linked to the main Vue application. Everything that happens within the application is reflected somewhere within that state. Components can select what information is relevant to them and be notified if it changes, much like if it was part of its internal state.
A Vuex store is made up of four things: the state, getters, mutations and actions. The state is a single object that holds all the necessary data for the entire application. The way this object gets structured depends on the project, but would typically hold at least one value for each view.
Getters work like computed properties do inside components. Their value is derived from the state and any parameters passed into it. They can be used to filter lists without having to duplicate that logic inside every component that uses that list.
The state cannot be edited directly. Any updates must be performed through mutation methods supplied inside the store. These are usually simple actions that perform one change at a time. Each mutation method receives the state as an argument, which is then updated with the values needed to change.
Mutations need to be synchronous in order for Vuex to understand what has changed. For asynchronous logic – like a server call – actions can be used instead. Actions can return Promises, which lets Vuex know that the result will change in the future as well as enabling developers to chain actions together.
To perform a mutation, they have to be committed to the store by calling commit()and passing the name of the mutation method required. Actions need to be dispatched in a similar way with dispatch().
It’s good practice to have actions commit mutations rather than commit them manually. That way, all updating logic is held together in the same place. Components can then dispatch the actions directly, so long as they are mapped using the mapActions() method supplied by Vuex.
To avoid overcomplicating things, the store can also be broken up into individual modules that look after their own slice of the state. Each module can register its own state, getters, mutations and actions. State is combined between each module and grouped by their module name, in much the same way as combineReducers() works within Redux.pport.
02. Explore lazy load routes
By default, the entire contents of the application end up inside one JavaScript file, which can result in a slow page load. A lot of that content is never used on the first screen the user visits. Instead it can be split off from the main bundle and loaded in as and when needed.
Vue makes this process incredibly simple to set up, as vue-router has built-in support for lazy loading.
Vue supports using dynamic imports to define components. These return Promises, which resolve to the component itself. The router can then use that component to render the page like normal. These work alongside code splitting built in to Webpack, which makes it possible to use features like magic comments to define how components should be split.
React
Best for:
Sites and applications with complex view logic
Quick prototypes with a low barrier to entry
Launched in 2013, React is maintained by Facebook and Instagram, alongside a community of developers. It's component-based and declarative, and you can also use it to power mobile apps via React Native.
Here, we'll explain how to keep your code clean by separating your concerns, move contents outside of the root component, and ensure errors don't destabilise your application.
Use container and presentational components
As with any project, it's important to keep a separation of concerns. All React applications start off simple. As they grow, it can be tempting to keep adding logic to the same few components. In theory, this simplifies things by reducing the number of moving parts. When problems arise, however, these large components become prone to errors that are difficult to debug.
React and JSX encourage the creation on multiple small components to keep things as simple as possible. While breaking the interface down into smaller chunks can help with organisation, having a further separation between how a component works and what it looks like provides greater flexibility.
Container and presentational components are special names given to this separation. The container's job is to manage state and deal with interfacing with other parts of the application such as Redux, while the presentational component deals solely with providing the interface.
A container component will often be in charge of a small section of the UI, like a tweet. It will hold all the workings of that component – from storing state, like the number of likes, to the methods required for interaction, such as a mechanism for liking that tweet.
If the application makes use of external libraries, include at this point. For example, Redux's connect method would provide the container with a way of dispatching actions to the store without worrying the presentational component.
Containers will never render their own UI and will instead render another component – the presentational component.
This component will be passed props that detail all the information needed to render the view. If it needs to provide interactivity, the container will then pass down methods for this as well, which can be called like any other method.
Having this separation encourages developers to keep things as simple as possible. If a container is starting to grow too large, it makes it easy to break off into a smaller set of components.
If the inner workings of a component, such as its state, needs to change, this technique allows the presentational component to remain unaffected. This also means this component can be used somewhere else in the application without needing to adjust how it functions. As long as it keeps getting served the same data it will continue to work.
Render with portals
React 16 introduced the ability to return lots of different types of data from a component. While previously it had to be either a single component or 'null', the latest version allows strings, numbers, arrays and a new concept called 'portals'.
The return value of a render() method decides what React displays, which is shown at that point in the component hierarchy. Portals allow React to render any of these return types outside of the component they were called from.
These can be other parts of the page completely separate from the main application. They still form part of React and work just the same as any component, but are able to reach outside of the normal confines of the root container.
A typical use case of this technique would be to trigger modal windows. To get correct positioning, overlay and accessibility requirements out of a modal it ideally needs to sit as a direct descendant of the <body>. The problem is, the root of a single page application will likely take up that position. Components managing modals will either need to trigger something in the root component, or render it out of place.
Here the Modal component returns a portal. The create function for it takes two arguments – what needs to be rendered and where it should render it. The second parameter is a regular DOM node reference, rather than anything specific to React.
In this example, it references a <div> at the top of the DOM tree that is a sibling of the main app container. It is possible to target any node, visible or not, as with any JavaScript. To use it, another component can summon Modal just like any other component. It will then display its contents in the targeted node.
Because React events are synthetic, they are capable of bubbling up from the portal contents to the containing component, rather than the DOM node they are rendered in. In the modal example, this means that the summoning component can also handle its state, such as its visibility or contents.
Establish error boundaries
Unhandled errors can cause havoc in a JavaScript application. Without catching them as they happen, methods can stop executing half way. This can cause unpredictable behaviour if the user continues and is a bad experience all around.
Previous versions of React did not cope with these situations well. If an error occurred in a nested component, it would leave its parents in limbo. The component state object would be stuck in the middle of performing an operation that could end up locking up the interface.
As of version 16, the way React handles errors has changed. Now an error inside any component would unmount the entire application. While that would stop issues arising with an unstable state, it doesn't lend itself well to a good user experience.
To avoid this, we can create a special component called an error boundary to ring-fence parts of the application from the rest. Any errors that happen inside children of the boundary will not cause issues to those outside of it.
Error boundaries work a lot like typical catch blocks in JavaScript. When an error occurs somewhere inside the component tree, it will be caught by the componentDidCatch() method, which receives the error thrown along with a stack trace. When that gets called it is an opportunity to replace the tree with a fresh interface – typically an error message.
Since it only renders its children, this component can wrap others to catch any errors that happen within it. The components chosen for this will vary by application, but error boundaries can be placed wherever they are needed, including inside other boundaries.
Error boundary components shouldn't be too complicated. If an error occurs inside of a boundary, it will bubble up to the next boundary up. Failing that, it will unmount the whole application as usual.
AngularJS
Best for:
Large projects in need of structure
Applications with lots of changing data
AngularJS is an open source frontend web application framework developed by Google. It offers declarative templates with data-binding, MVW, MVVM, MVC, and dependency injection, all implemented using pure client-side JavaScript.
Here, we'll show you how to use AngularJS to create reusable code blocks known as custom decorators, serve content to your users quicker, and create performant and easy to control animations with ease.
Create custom decorators
TypeScript is a superset that sits on top of JavaScript. It supplies features such as static typing, classes and interfaces that are lacking in the native language. This means that when creating large applications developers can get feedback on how best to work with external code and avoid unnecessary bugs.
Angular is built exclusively on top of TypeScript, so it is important to understand how to utilise it correctly. Combining the strengths of both provides a solid foundation for the application as it grows. There are not many better techniques to demonstrate this than with decorators.
Decorators are special functions designed to supply behaviour to whatever it is applied to. Angular makes extensive use of them to provide hints to the compiler, like with @Component on classes or @Input on properties.
The aim is to make these functions as reusable as possible and are often used to provide utility functions, such as logging. In the example above, @ClassLogger is supplied to a component to log to the console when certain lifecycle hooks are fired. This could be applied to any component to track its behaviour.
The ClassLogger example above returns a function, which enables us to customise the behaviour of the decorator as it is created. This is known as the decorator factory pattern, which is used by Angular to create its own decorators.
To apply a decorator, it needs to be positioned just before what it is decorating. Because of the way they are designed, decorators can be stacked on top of each other, including Angular's own. TypeScript will chain these decorators together and combine their behaviours.
Decorators are not just limited to classes. They can be applied to properties, methods and parameters inside of them as well. All of these follow similar patterns, but are slightly different in their implementations.
This is an example of a plain method decorator. These take three arguments – the object targeted, the name of the method, and the descriptor that provides details on its implementation. By hooking into the value of that descriptor we can replace the behaviour of the method based on the needs of the decorator.
Build platform-level animations
Animations are a great way to introduce a friendly side to an interface. But trying to control animations in JavaScript can be problematic. Adjusting dimensions like height is bad for performance, while toggling classes can quickly get confusing. The Web Animations API is a good approach, but working with it inside Angular can be tricky.
Angular provides a module that enables components to be animated by integrating with the properties already within the class. It uses a syntax similar to CSS-based animations, which gets passed in as component metadata.
Each animation is defined by a 'trigger' – a grouping of states and transition effects. Each state is a string value that, when matched, applies the associated styles to the element. The transition values define different ways the element should move between those states. In this example, once the value bound to hidden evaluates to true, the element will shrink out of view.
Two other special states are also defined: void and *. The void state relates to a component that was not in the view at the time and can be used to animate it in or out. The wildcard * will match with any state and could be used to provide a dimming effect while any transition occurs.
Inside the template, the trigger is bound to a value within the component that represents the state. As that value changes, as does the state of the animation.
That bound value can be supplied either as a plain property or as the output of a method, but the result needs to evaluate into a string that can be matched against an animation state.
These animations also provide callbacks such as when they start or stop. This can be useful for removing components that are no longer visible.
Serve content quicker with server rendering
HTML parsers struggle with JavaScript frameworks. Web crawlers are often not sophisticated enough to understand how Angular works, so they only see a single, blank element and not the whole application.
By rendering the application on the server, it sends down an initial view for the users to look at while Angular and the rest of the functionality downloads in the background. Once the application arrives, it silently picks up from where the server left off.
The tools needed to achieve this in Angular are now a native part of the platform as of version 4. With a bit of set up, any application can be server rendered with just a few tweaks.
Both server and browser builds need their own modules, but share a lot of common logic. Both need a special version of BrowserModule, which allows Angular to replace the contents on-screen when it loads in. The server also needs ServerModule to generate the appropriate HTML.
Servers also need their own entry points where they can bootstrap their unique behaviours as necessary. That behaviour depends on the app, but will also likely mirror much of the main browser entry point.
If using the CLI, that also needs to be aware of how to build the project for the server by pointing to the new entry point. This can be triggered by using the "--app" flag when building for the server.
The application is now ready to be server rendered. Implementations will vary based on the server technology used, but the base principles remain the same. For example, Angular provide an Express engine for Node, which can be used to populate the index page based on the request sent. All the server needs to do is serve that file. Server rendering is a complex subject with many edge cases (look here for more information).
Polymer
Best for:
Combining with other platforms and frameworks
Working with JavaScript standards
Polymer is a lightweight library designed to help you take full advantage of Web Components. Read on to find out how to use it to create pain-free forms, bundle your components to keep requests low and sizes small, and finally how to upgrade to the latest Polymer release: 3.0.
Work with forms
Custom elements are part of the browser. Once they are set up they work like any native element would do on the page. Most of the time, Polymer is just bridging the gap between now and what custom elements will be capable of in the future, along with bringing features like data binding.
One place where custom elements shine is their use as form inputs. Native input types in browsers are limited at best, but provide a reliable way of sending data. In cases where a suitable input isn't available – such as in an autocomplete field, for example – then custom elements can provide a suitable drop-in solution.
As their work is performed within the shadow DOM, however, custom input values will not get submitted alongside regular form elements like usual. Browsers will just skip over them without looking at their contents.
One way around this is to use an <iron-form> component, which is provided by the Polymer team. This component wraps around an existing form and will find any values either as a native input or custom element. Provided a component exposes a form value somewhere within the element, it will be detected and sent like usual.
In cases where a custom element does not expose an input, it's still possible to use that element within a form, provided it exposes a property that can be bound to.
If <my-input> exposes a property like "value" to hook into we can pull that value out as part of a two-way binding. The value can then be read out into a separate hidden input as part of the main form. It can be transformed at this point into a string to make it suitable for form transmission. Forms not managed by Polymer that would need to make use of these bindings, the Polymer team also provide a <dom-bind>component to automatically bind these values.
Bundle components
One of Polymer's biggest advantages is that components can be imported and used without any need for a build process. As optimised as these imports may be, each component requires a fresh request, which slows things down. While HTTP/2 would speed things up in newer browsers, those who do not support it will have a severely degraded experience. For those users, files should be bundled together.
If a project is set up using the Polymer CLI, bundling is already built in to the project. By running polymer build, the tool will collect all components throughout the project and inline any subcomponents they use.
This cuts down on requests, removes unnecessary comments and minifies to reduce the file size. It also has the added benefit of creating separate bundles for both ES5 and ES2015 to support all browsers.
Outside of Polymer CLI, applications can still be bundled using the separate Polymer Bundler library. This works much like the CLI, but is more of a manual process. By supplying a component, it will sift through the imports of the file, inline their contents, and output a bundled file.
Polymer Bundler has a few separate options to customise the output. For example, developers can choose to keep comments or only inline specific components.
Upgrade to Polymer 3.0
The philosophy behind Polymer is to 'use the platform': instead of fighting against browser features, work with them to make the experience better for everyone. HTML imports are a key part of Polymer 2, but are being removed from the web components specification moving forward.
Polymer 3.0 changes the way that components are written to work with more established standards. While no breaking changes are made with the framework itself, it's important to know how the syntax changes in this new version.
First thing to note is that Polymer is migrating away from Bower as a package manager. To keep up with the way developers work, npm will become the home of Polymer, as well as any related components in the future.
To avoid using HTML imports, components are imported as JavaScript modules using the existing standardised syntax.
The major difference inside a component is that the class is now exported directly. This enables the module import <script> tag to work correctly. Any other components can be included by using ES2015 import statements within this file.
Finally, templates have been moved into the class and work with template literals. A project by the Polymer team called lit-html is working to provide the same flexibility as <template> tags along with the efficiency of selective DOM manipulation.
Aurelia
Best for:
Simple applications with little setup
Developing alongside web standards
Aurelia is a JavaScript client framework for web, mobile and desktop. It's written with next-gen ECMAScript, integrates with Web Components and has no external dependencies.
Read on for two mini-tutorials, showing you how to change how properties display value and function, and how to use Aurelia to check values in forms.
01. Use value converters
Sometimes, when developing components, the values being stored do not lend themselves well to being displayed in a view. A Date object, for example, has an unhelpful value when converted to a string, which requires developers to make special conversion methods just to show values correctly.
To get around this problem, Aurelia provides a mechanism to use classes to change values, known as value converters. These can take any kind of value, apply some kind of processing to it, and output that changed value in place of the original.
They work similar to pipes in Angular or filters in template languages like Twig.
Most will be one way – from the model to the view. But they can also work the other way. The same logic applies, but by using fromView instead of toView, values can be adjusted before they are returned back to the model.
A good use-case for this would be to format user input directly from the bind on the element. In this example, it will capitalise every word that is entered, which may be useful for a naming field.
They can also be chained together, which encourages the creation of composable converters that can have different uses across the application. One converter could filter an array of values, which then passes to another that sorts them.
Converters can also be given simple arguments that can alter the way they behave. Instead of creating different converters to perform similar filtering, create one that takes the type of filter to be performed as an argument. While only one argument is allowed, they can be chained together to achieve the same effect.
02. Try framework-level form validation
Validation is an important part of any application. Users need to be putting the correct information into forms for everything to work correctly. If they do not, they should be warned of the fact as early as possible.
While validation can often be a tricky process, Aurelia has support for validating properties built right into the framework. As long as form values are bound to class properties, Aurelia can check that they are correct whenever it makes sense to the application.
Aurelia provides a ValidationController, which takes instructions from the class, looks over the associated properties and supplies the template with any checks that have failed.
Each controller requires a single ValidationRules class that defines what's to be checked. These are all chained together, which enables the controller to logically flow through the checks dependant on the options that are passed.
Each ruleset begins with a call to ensure(), which takes the name of the property being checked. Any commands that follow will apply to that property.
Next are the rules. There are plenty of built-in options like required() or email() that cover common scenarios. Anything else can use satisfies(), which takes a function that returns either a Boolean or a Promise that passes or fails the check.
After the rules come any customisations of that check, for example the error message to display. Rules provide default messages, but these can be overridden if necessary.
Finally, calling on() applies the ruleset to the class specified. If it is being defined from within the constructor of the class, it can be called with this instead.
By default, validation will be fired whenever a bound property's input element is blurred. This can be changed to happen either when the property changes, or it can be triggered manually.
Constant worry and doubts can nag at you daily and increase your stress levels. These emotions and high-stress levels can hinder you from doing or enjoying things you love to do.
With a little refocusing of your mind, you can be nonchalant and not let a thing get to you. You're made of strong stuff and no one can bring you down. "Let It Go" isn't your theme song, it's about you!
Getting in the Mindset
Find a comedic angle to everything.
The benefit of being nonchalant isn't about not being happy – it's about not easily getting upset, angry, or stressed. And how might one do that? Well, when everything is comical is a good start. Just like most things have a silver lining, most things have a comedic edge to them, too.
Though it's a simple example, let's say you trip onstage at some award ceremony. Instead of turning bright red in shame, you either brush it off like you meant it to happen and accept your award from the floor, or you put up your arms in a "tada" moment and embrace the spotlight. Let the hooting and hollering commence.
Pretend you don't have the "shame gene.
" All of us have that little voice in our head that's telling us to look cool and to act socially acceptable. This is generally a smart voice in our heads – it makes us friends, gets us connections, and makes life a little easier. But sometimes it halts us in our tracks, keeps us from growing, and just makes us worried, emotionally erratic, and anxious. Instead, pretend for a moment that you don't have it. How do you act? What is your body telling the world? That's nonchalance.
So much of what we do is to avoid shame and to feel accepted. If that urge wasn't within you, what might you do differently? Would you really care if Joel liked your shoes or if Marcia texted you back? Probably not. Start out by focusing on this just for a few minutes a day until it becomes naturally nearly all the time.
Worry less about what you can't change.
The world is going to end at some point. Do you worry about that? Probably not. Your mom sometimes wears the ugliest sweaters. Do you worry about that? Nope. If you can't change it, there's no point in worrying about. What can you do? Worry about it...and then just worry some more? Yep. There's no point.
So when your teacher announces a pop quiz? No reaction from you. There's no point in worrying about it – the only thing you can worry about is doing well. And when your crush doesn't text you back? Moving on – you were just feeling it out anyway.
Don't take yourself (or anything) too seriously.
All of life becomes infinitely easier when you come to the conclusions that nothing is that big of a deal. We are all well-oiled specks of dust on this amazing blue planet, and if today isn't going our way, well, that's just how the cookie crumbles. Bad things will happen and good things will happen. Why get worked up about it?
You've probably met someone who takes themselves way more seriously than they should. They're wound up, constantly caring what other people think of what they're doing, saying, and what they look like. In reality, others aren't really thinking about them at all. Just watching them is exhausting because they're wound up so tight. Be the opposite of that person, and the nonchalance will come.
Do yoga.
Along with yoga being a decent way to burn calories and tone your muscles, it's also fantastic at getting rid of all that mind-chatter so many of us have. Many studies have shown that "yogis" suffer from less stress, less anxiety, and even lower blood pressure rates.
If you're having trouble changing your thinking patterns, yoga may be able to do it for you.
Another good idea is doing deep breathing exercises. Concentrating on your body and your breathing takes you out of your mind and into the here and now. You focus on more tangible realities, like how the chair you're on feels on your skin and the temperature of the room – and not on whatever's been worrying you lately.
Acting Nonchalant
Be the adult version of you.
When we get worried and anxious, we also get self-righteous and selfish. All of a sudden, it's about
me, me, me
and whatever you're demanding needs to be met and
now
– in other words, we become children.
Recognize this part of you (we all have it), and instead opt for the adult in you (we all have that, too). How would the older, more mature side of you react?
Let's say you just sent a text to your boyfriend or girlfriend. They haven't responded yet. The clock is ticking, minutes are passing, and they still haven't responded. The child in you wants to go, "What are you doing? Why aren't you responding?! Is something wrong?! Why are you being mean?!" Nope. You're not gonna do that. Instead, you're gonna pick up a book. If they don't text back, fine. You can't really remember what you texted them anyway.
Don't show a wide range of emotions.
The very definition of nonchalant is to be calm and relaxed, pretty much 24/7. You can show mild interest or happiness – or even a little disappointment or frustration – but underneath it all, you're still cool as a cucumber. It's not about being cold and emotionless, it's about being chill.
Let's say your crush told you to back off. Dang. That sucks. You have the urge to cry and whine and eat your feelings, but the calmer side of you knows better. And you're not just going to say, "okay," and move on like it never happened, because it did. When talking about it with your friends, you say something like, "Man, this stinks. Wish it didn't work out this way, but totally glad I didn't ask him/her out on a date!"
Don't invest in others' opinions.
You know what are opinions are like, right? Everybody has 'em. Trying to please everyone and getting everyone to like you is a lost cause, because it just won't happen. Others' opinions of you don't matter; live will go on no matter what. What's more, will you remember what Katie said about your hair in two weeks' time? Nope. So don't stress it. You're doing your own thing and
that's
what matters.
When only your opinion counts, you'll find it easier to stay more relaxed and stress-free. In other words, nonchalant. You control all of the opinions that matter. How awesome of a feeling is that? Everything else isn't on your radar and isn't worth stressing.
Watch your body language.
Even if we say the calmest, coolest things, sometimes our bodies give us away. Your voice says, "It's okay. No worries," when steam is rolling out of your ears and your hands are clenched in fists. No breaking news here: everyone can see through it. So when you're speaking nonchalantly, make sure your body backs it up, too.
How your body is positioned will be determined by the situation you're in. The main way to come off as worried and anxious (and not nonchalant) is if your muscles are tensed. If you think your body might give you away, go through your body from head to toe, consciously checking if each part is relaxed. If it's not, let it loose. The mental nonchalance may come from there.
Develop the perfect "shrug.
" When someone comes up to you with a hot piece of gossip, this is your go-to response. It doesn't have to be an actual shrug, but it's essentially the equivalent. "Oh, that's nice. Where did you hear that from?" is a good verbal shrug when the other person is expecting you to say, "Ohmigod, are you serious?!" You're essentially letting everything in one ear and out the other.
It's good to have a sort of "mental shrug" attitude, too. The milk spilled? Shrug. Guess you should probably clean that up, huh? You gained a few pounds? Shrug. More salad tomorrow.
Living a Nonchalant Lifestyle
Pursue your own path.
Those individuals out there who are not nonchalant (chalant, if you will), are busy with molding their lives to what others say is okay. They try so hard to make it so everything is just so in order to be accepted and feel loved. In short,
they care far too much. And about things that don't matter to boot. Don't copy this lifestyle or anyone else's – pursue your own. You don't care about what anyone else says – you're gonna do what makes you happy.
This helps for a number of reasons. It keeps you busy, it makes you tons of different friends, and it keeps you happy and feeling fulfilled. The bigger your world, the littler everything gets. That one person that could upset you before, can't anymore because you know a dozen other people just like them.
Realize that you have many seeds.
Let's use this example: say you want to start a garden, but you only have one seed. You plant that seed so carefully, watching it day in and day out, worrying that it'll amount to nothing and maybe even smothering it in the process. Luckily, in real life, this isn't your garden. You have so many seeds you barely know what to do with them! You can scatter a few here, a few there, and see what turns up. How much do you care? Well, some. You want your garden to be successful. But are you gonna stay up all night, worrying about one little seed? No way.
This is a fancy way of saying that you have plenty of going on in your life. If one thing is going wrong, oh well. You have a thousand other things going on in your life that are going just fine, thanks. No need to worry. If that "seed" doesn't work out, you'll plant another one.
Let others initiate most of the plans.
Another way to come off as not-so-nonchalant is to be overeager. You're always the one excited and bustling with ideas and trying to get people to do things. Slow down there, tiger. To be nonchalant, let everyone else come to you most of the time. You're a willing participant, but you're just along for the ride. You're not captain of the ship.
That is, most of the time. You don't want to be a dull dud that mooches off of everyone else's good ideas, and you want your friends to know you value them. When you are invited, let them know that you had fun and that the party can be at your house next time, for example. Friendships are two-way streets, after all.
Let it slide.
When Idina Menzel sang, "Let it go, let it go" she wasn't kidding. Whenever your mood pendulum feels the urge to swing left or right, stop for a second. Count to 10, and let it pass. Concentrate on being calm, cool, and collected. You got this. Sure, you're happy, or sure, you're sad – but you're not gonna let it get to you. What would be the point in that?
If you're struggling with something really bothering you, try telling yourself that you'll worry about it tomorrow. But it off in your mind, knowing that you'll get to it in under 24 hours. Then what happens? Tomorrow comes and either you don't remember to worry about it, or you feel much better (or at least more in control) about what happened.
