Angular Directives

How to create an Angular directive to write and parse markdown to HTML using Stackedit.js

The Stackedit Editor inside a Web Application

Why use Stackedit?

Stackedit is a popular and widely trusted in-browser markdown editor. It is an open-source and full-featured editor based on PageDown, the WYSIWYG-style Markdown library used by Stack Overflow.

As it is a Progressive Web Application (PWA) that you can download and use as a desktop application.

Here are its’ main features…

WYSIWYG controls

The WYSIWYG controls come in the form of some formatting buttons and shortcuts. This is thanks to PageDown.

Live Preview with Scroll Sync

StackEdit’s Scroll Sync feature accurately binds the scrollbars of the editor panel and the preview panel. This helps you to keep an eye on the output while writing.

Rich Markdown editor

StackEdit’s Markdown syntax…


Headless Chrome

A fast and simple way to interact with browsers supporting the Chrome DevTools Protocol in Go.

Photo by NASA on Unsplash

An easy, performant web scraper, crawler, pre-rendering solution, or screenshotting tool

What is Chromedp?

Chromedp is a fast, simpler way to interact with the Chrome DevTools Protocol without any external dependencies, such as selenium or phantomjs, that you’d find in other implementations.

It is a lightweight Go implementation.

All you need is Chrome installed.

Why use chromedp?

To show you how it works, we’ll be using it to scrape the github.com and retrieve some text from an element on the page.

Things you should know about chromedp


Here are the concurrency best practices for predictable, reliable, and bug-free Go code.

Gopher in a fire
Gopher in a fire
A Gopher not abiding by the rules

Concurrency in Go

Go is well-known and loved for its concurrency. The go runtime manages lightweight threads called goroutines. Goroutines are quick and simple to write.

You just type go before the function you want to execute asynchronously, in another thread.

Sounds easy enough?

Goroutines are Go’s way of writing asynchronous code.

It’s important to understand how a goroutine, and concurrency more generally, works. Go provides ways to manage goroutines and make them more manageable and predictable in a complex program.

Because goroutines are so easy to use, they are so easy to misuse.

1) Don’t make assumptions about execution order during asynchronous routines

When scheduling concurrent tasks in Go, it is important…


Angular

Angular doesn’t have a learning curve, it has a learning cliff. But which parts are the hardest to grasp?

Sitting on the Angular Learning Cliff

“Angular is beginner friendly”

— Not a single person

A Complete JavaScript Web Framework

What makes Angular different?

Angular is one of the most popular JavaScript frameworks. Developed and maintained by Google, it is used to build modern Single-Page Application’s (SPA’s), and Progressive Web Application’s (PWA’s).

As a complete framework, it has everything you need for a JavaScript web application.

It provides opinionated architecture enabling full separation of concerns by dividing application structure between components, services, directives, pipes & modules. These are different types of class that provides unique characteristics and functionality. This architecture enables development that scales & works well in a large team.

It provides the full…


Golang

A simple walkthrough on creating an API with a server, written in Go, to deploy to Google App Engine.

Why Google App Engine?

Google App Engine is Platform as a Service (PaaS). It aims to make deployment easier. It is fully managed, pay-as-you-go, high availability, it ensures a fast time to market, and supports a wide variety of programming languages.

App Engine allows you to build scalable web and mobile back-ends with traffic splitting and firewall capabilities.

Standard vs Flexible Environment

You have two options when creating an App Engine environment:


What does it mean for the network, building on it, and crypto mining?

hills highlighted by the sun rising behind them
hills highlighted by the sun rising behind them
Photo by Wes Hicks on Unsplash

The Bitcoin and Monero (XMR) communities remain some of the most committed to the concept of proof-of-work.

Ethereum’s Long-Awaited Upgrade

It feels like it has been coming for ages. That’s because it has. It has been in the works for years and discussed since 2018. Ethereum 1.0 had concerns over scalability and security. These are set to be improved with the planned upgrades to the system.

This massive upgrade involves re-engineering the entire Ethereum platform, which will result in the launch of this new, more scalable version. …


An easy way to automate the creation of sitemap.xml files, using Firebase Firestore data, that reflects our growing web content.

Reading your Firestore data

Modern Sitemaps Need Automation

The sitemap.xml file is one of the most important files for search engine robots and spiders. It provides information about the pages and the relationships between them. It is the first thing that robots look at when it comes to your site.

Not usually for human consumption, robots (crawlers) look for this file to understand the structure of your site and which pages to crawl. It provides an immediate representation of the layout of your content.

Search engines such as Google and Bing use the sitemap to index your site more effectively and determine where to start crawling. Therefore, if…


Angular Tips

Understanding the right way to pass data to Dumb Angular components through NgOnChanges and Input bindings.

A dumb dog being dumb
A dumb dog being dumb
Dumb

How Components Interact in Angular

Angular components have multiple ways to share information with other parts of the application. Developing a complex Angular app will involve a lot of data, and subsequently a lot of interaction between components.

Once you learn the methods that are used to handle data in components, it becomes easy to replicate for different use cases.

However, there are three main ways to intercept data changes and it's easy to assume that all methods are equal. In simple circumstances, such as when you just need to listen to the updated value, they can act pretty similar.

But there are circumstances where…


TypeScript Refactoring

Optional Chaining offers a new way to refactor our TypeScript and JavaScript code. TypeScript 3.7 presents Elvis (?.)

Photo by Michèle Eckert on Unsplash

The optional chaining operator is supported all popular browsers except IE, Firefox for Android, Opera for Android and Samsung Browser.

The Elvis Operator ?. (AKA Optional Chaining)

More shorthand JavaScript notation for cleaner code

JavaScript moves fast and, as a result, TypeScript moves fast with it to push new features and innovations in the way we write JavaScript.

All with the aim to increase developer productivity and improve the developer experience.

Enter TypeScript 3.7…

TypeScript 3.7 gave us the optional chaining operator ( ?. ) that has the ability to shrink our, otherwise long and complex, code. The refactoring possibilities with this operator become obvious as soon as you start to use it.

Having learned Swift, it…

Lewis Fairweather

Software Engineer | Co-Founder @ tripapt.com | Hire Me https://www.fiverr.com/share/0evE0A

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store