The 6 Best Mac Markdown Editors for Everyone

Markdown is a lightweight markup language that makes it easy to format and present content for the web. It uses plain text and simple syntax to keep everything straightforward—we have a handy Markdown cheat sheet you can print for reference. While any plain text editor will work for Markdown, there are also dedicated Markdown editors for displaying and converting your writing into beautiful HTML, PDF, and beyond. Some of these are free, others are cheap, and some work with other tools to make Markdown more appealing. Here are six of the best Markdown editors and tools for Mac users. 1….

Read the full article: The 6 Best Mac Markdown Editors for Everyone

Markdown is a lightweight markup language that makes it easy to format and present content for the web. It uses plain text and simple syntax to keep everything straightforward—we have a handy Markdown cheat sheet you can print for reference.

While any plain text editor will work for Markdown, there are also dedicated Markdown editors for displaying and converting your writing into beautiful HTML, PDF, and beyond. Some of these are free, others are cheap, and some work with other tools to make Markdown more appealing.

Here are six of the best Markdown editors and tools for Mac users.

1. MacDown

MacDown Markdown Editor

MacDown is a free and open source Markdown editor based on Mou. It surfaced when Mou’s developer ceased work on the project, sparking the idea to create a free editor that mimicked much of Mou’s features and functionality. The two projects are separate ventures, with MacDown steaming ahead in terms of development.

This is a Markdown editor that isn’t so much focused on code as it is writing. It uses a simple two-pane code view and rendered Markdown view to display changes in real-time. There’s the usual syntax highlighting you’d expect from an editor of its kind, and the editor offers a surprisingly good amount of customization.

This includes changes to the core functionality, allowing you to toggle non-standard Markdown extensions like tables, strikethroughs, and fenced code blocks. There are a ton of light and dark themes to choose from. Plus it has the ability to tweak editor appearance including line spacing and base font.

You can also change rendering style by picking from the included CSS or installing your own stylesheets. Rendering options are limited to HTML and PDF, with a handy Copy HTML feature for pasting directly into your projects.

Download: MacDown (Free)

2. Typora

Typora Markdown Editor

If you’re not keen on the two-pane approach of most Markdown editors, check out Typora. It’s an editor that makes working with Markdown more visually appealing, using a seamless live preview rather than a separate window. Syntax converts into formatted text as you type, so what you see is what you get.

Typora supports basic Markdown, GitHub Flavored Markdown, and some interesting additional elements like sequence, flowchart, and mermaid diagrams. You can configure your choice of syntax via the preferences menu, which provides plenty of opportunity to tweak the editor to your liking.

There’s very little on-screen while you’re composing your masterpiece. That makes this ideal for those who enjoy distraction-free writing experiences. Building on this there’s also a typewriter mode (which always keeps the cursor in the middle of the screen) and focus mode (which dims paragraphs you’re currently not working on).

Choose from six included styles, or add your own by copying the relevant stylesheets into the themes folder. In addition to the usual HTML and PDF export, Typora can also convert to Microsoft Word, OpenOffice, RTF, ePub, LaTeX, and image formats (among others).

There’s no online sync, so if you use multiple platforms you’ll need to provide your own cloud solution. Typora is currently free while in beta, and it’s available for macOS, Windows, and Linux.

Download: Typora (Free)

3. Atom

Atom text editor

Atom is GitHub’s own plain text editor for scripting, coding, and writing GitHub Flavored Markdown. It’s a fairly simple app with Markdown support out of the box, albeit a little barebones for writers. It takes the standard two-pane preview window approach, with a Markdown Preview option found under the Packages menu.

Out of the box you’d be forgiven for discounting Atom, but there’s a lot more potential when you pair it with the right add-ons. A quick search of the package repository yields a healthy number of extensions that make Atom a force to be reckoned with when working with Markdown.

These include conversion tools to HTML, PDF, and image formats. You’ll also find support for other flavors beyond GitHub Flavored Markdown, toolbar plugins, table of contents generators, better image support, and tools for improved tables.

It’s a great solution if you already use Atom, or are looking for a plaintext editor you can also use for scripting or other programming purposes. Atom also enjoys great theme support, so you can get your editor looking just the way you like it. Just search for and install themes within the editor.

Atom is completely free as part of GitHub’s efforts to provide a tool that makes coding accessible to all. It might not be the most user-friendly approach, but it’s a robust and powerful tool in the right hands. Visual Studio Code is another great free alternative to Atom that’s also worth checking out.

Download: Atom (Free)

4. Caret

Caret Markdown editor

Caret is another minimal Markdown editor, with a clean interface and emphasis on productivity. It uses tabs to keep all relevant documents close at hand, with a main editor that displays both the syntax and the resulting formatted text. It’s a great way to learn Markdown, since your syntax is always visible, but you can also enable a preview pane if you want.

Caret officially supports GitHub Flavored Markdown, including tables, math blocks, and indented code blocks. It also packs a few unique features, like the thematic break accessible with three spaces and three identical dashes or asterisks.

The sidebar displays a folder’s contents, with your active documents appearing along the top edge of the editor. There’s a macOS Spotlight-like Go To tool for quickly jumping to a file or section of your document, a dark mode, and typewriter mode too.

Caret’s developers built it with speed in mind. It features assistance for building tables, auto-completion of file paths, emoji, and HTML. You also get spelling correction and multiple cursors—a feature normally reserved for powerful text editors.

Caret exports to HTML and PDF, and the beta version is free (though it’s not clear what the limitations to this version are). You can buy a license for $29 to continue to use Caret and support development efforts.

Download: Caret (Free trial, $29)

5. Ulysses

Ulysses for Mac

Ulysses is a full-fat writing app, with some seriously powerful features. It’s the sort of app you’ll want to use if writing is your livelihood, with its distraction-free and minimal approach to producing prose. It uses Markdown in a bid to make writers more productive, removing the need to take your eyes off the text to apply formatting or create headers.

Like Caret, Ulysses takes a hybrid approach to markup. Your syntax is still visible while writing, but so too is the formatting that this markup applies to your text. Links appear in-line, and bold and italics are both emphasized. You have the ability to customize how these elements appear in the app’s preferences.

For working with Markdown, you can choose from regular Markdown and what Ulysses calls Markdown XL. This adds additional syntax for elements like videos, annotations, comments, block quotes, and more. Some themes let you change how the editor displays your elements, plus you have the opportunity to create your own themes.

Ulysses really comes into its own when it comes to exporting your writing. There are themes available for exporting beautiful HTML and PDF documents, but also support for ePub and Microsoft Word. Cloud support via iCloud or Dropbox means you can work on the same documents using different devices (including iOS devices). Versioning support ensures you can revert to a backup if needed.

As a pure writing and publishing tool, Ulysses has the most to offer of all apps featured here. However, you might not need everything Ulysses offers, so a free option might suit you just as well. Ulysses uses a subscription model with a 14-day free trial, then $5 per month. You can also get Ulysses as part of the Mac app subscription service Setapp.

Download: Ulysses (Free trial, $5 monthly/$40 yearly)

6. Marked 2

Marked for Mac

Marked 2 isn’t actually an editor, but a Markdown preview tool. That means you won’t use Marked to create documents, but it can turn just about any other text editor into a Markdown editor. The preview the app generates updates every time you save your file, or you can use it as a proofreading tool for files you’ve already created.

The app includes a wide array of processing and rendering options for getting the look you want. You can customize Marked with your own CSS to match your blog, so you know how your articles will look as you write them. You can also use the built-in readability, spellcheck, and link validation tools to make sure your work is up to scratch.

Marked also includes a table of contents panel for working with especially long documents, generated using your headings. The app is compliant with Markdown, GitHub Flavored Markdown, and even includes support for custom processors so coders can use the app with their own syntax.

Export options are extensive, with support for nine built-in themes (with the option of adding your own). Formats include PDF, RTF, Microsoft Word, and OpenOffice. You can try Marked for free before you buy, then pay $14 for the full version. It’s also available on Setapp.

Download: Marked 2 (Free trial, $14)

Don’t Forget Your Favorite Mac Text Editors

You don’t need a fancy Markdown editor to work with Markdown. A plain text editor works too. Your favorite editor will do, whether it’s Sublime Text, Visual Studio Code, or Vim. Check out our favorite plaintext editors for Mac if you’re looking for inspiration.

Read the full article: The 6 Best Mac Markdown Editors for Everyone

A new CSS-based web attack will crash and restart your iPhone

A security researcher has found a new way to crash and restart any iPhone — with just a few lines of code. Sabri Haddouche tweeted a proof-of-concept webpage with just 15 lines of code which, if visited, will crash and restart an iPhone or iPad. Those on macOS may also see Safari freeze when opening […]

A security researcher has found a new way to crash and restart any iPhone — with just a few lines of code.

Sabri Haddouche tweeted a proof-of-concept webpage with just 15 lines of code which, if visited, will crash and restart an iPhone or iPad. Those on macOS may also see Safari freeze when opening the link.

The code exploits a weakness in iOS’ web rendering engine WebKit, which Apple mandates all apps and browsers use, Haddouche told TechCrunch. He explained that nesting a ton of elements — such as <div> tags — inside a backdrop filter property in CSS, you can use up all of the device’s resources and cause a kernel panic, which shuts down and restarts the operating system to prevent damage.

“Anything that renders HTML on iOS is affected,” he said. That means anyone sending you a link on Facebook or Twitter, or if any webpage you visit includes the code, or anyone sending you an email, he warned.

TechCrunch tested the exploit running on the most recent mobile software iOS 11.4.1, and confirm it crashes and restarts the phone. Thomas Reed, director of Mac & Mobile at security firm Malwarebytes confirmed that  the most recent iOS 12 beta also froze when tapping the link.

The lucky whose devices won’t crash may just see their device restart (or “respring”) the user interface instead.

For those curious, you can see how it works without it running the crash-inducing code.

The good news is that as annoying as this attack is, it can’t be used to run malicious code, he said, meaning malware can’t run and data can’t be stolen using this attack. But there’s no easy way to prevent the attack from working. One tap on a booby-trapped link sent in a message or opening an HTML email that renders the code can crash the device instantly.

Haddouche contacted Apple on Friday about the attack, which is said to be investigating. A spokesperson did not immediately respond to a request for comment.

The 10 Best Beginner Projects for New Programmers

beginner-projects-programmers

The world of programming seems endless in every direction. If you’re not mastering PHP, you’re looking to Python. If it’s not a language, it’s a framework. You’ve got to start somewhere. Yet when there’s so much to learn, where should you begin? While you’ll hear programmers stress the need to find creative projects, you’ll need something small to build your confidence. Here are the best beginner programming applications you can create in a few hours, start to finish. Where to Begin as a New Programmer? If you’re an absolute beginner, and don’t have to skills necessary to attempt a project,…

Read the full article: The 10 Best Beginner Projects for New Programmers

beginner-projects-programmers

The world of programming seems endless in every direction. If you’re not mastering PHP, you’re looking to Python. If it’s not a language, it’s a framework.

You’ve got to start somewhere. Yet when there’s so much to learn, where should you begin? While you’ll hear programmers stress the need to find creative projects, you’ll need something small to build your confidence.

Here are the best beginner programming applications you can create in a few hours, start to finish.

Where to Begin as a New Programmer?

If you’re an absolute beginner, and don’t have to skills necessary to attempt a project, here’s a primer of the bare-bone basics regarding two basic markup languages: HTML and CSS.

If you’re comfortable with the basics, you can then venture out and create projects. While programming allows for a seemingly endless array of projects, the best projects end up being crash courses in coding themselves. That means they push the boundaries of what you already know, allowing you to consider a language, or a bit of code, in a new light.

The following projects are simple by design, even if they’re not exactly easy. While you aren’t going to end up with a beautiful UI or completed web app, you will walk away from the project with two things: a portfolio piece you can show to prove your ability, and a better understanding of just how wide-ranging programming can be!

1. Make Your Own Chess Game

Chess is a game as old as time, and has always followed the same rules (deviations aside). The logic of chess, however, matches up very nicely with the same logic you would use to program a game. Additionally, Chess makes for a fantastic starter piece—pun intended—towards a programming career.

You’ll start by mapping out both your board and your pieces. Then, you’ll go on to giving specific movements for your pieces. From brainstorm to final product, you’ll be forced to think of chess as less of a physical game and more of data-driven mental gymnastic! Click on the video above to begin learning how to maneuver your way through creating your very own chess program (and how to modify it to create your own version of chess).

While the video above isn’t exactly a step by step tutorial to create the program, it is an absolutely necessary insight into how programmers think and code in order to create a final product.

2. Program a Soundboard

If a blinking cursor gets your stomach in knots, know that there are other, simpler alternatives to text-based coding that can assist in understanding how programs operate. MIT App Inventor, an adult alternative to the kid-friendly and highly popular Scratch, allows users to create an Android app using a simple and understandable UI.

Creating a soundboard is highly educational for a variety of reasons. For example, you are forced to understand how sound files and user interactions mesh together. Individual files, pieced together, become the immersive audio environments you enjoy when playing your favorite games!

3. Build Your Own Calculator

Inputs are absolutely vital to learn as a programmer. Creating a calculator allows users to perform simple tasks using simple operations like multiplication and division.

It may not be the most exciting application, but you can rest assured it’s absolutely necessary for a beginning programmer.

 4. Create a To-Do List App

Building a to-do list app is how you know you’ve gotten somewhere. It involves most of what you would need to create a simple UI: buttons, animation, user interaction, and events.

Because the above video uses the big three—HTML, CSS, and Javascript (learn more about JavaScript)—you can then upload it to a portfolio of your choice for showcasing, or integrate it into a website instantly.

5. Develop a Weight Conversion Tool

Along the same lines as a to-do list, you can also add a few simple formulaic operations to create a great looking weight conversion tool. Keep in mind that with projects like these you can add or subtract as much functionality as you’d like.

The above example integrates Bootstrap toolkit into your project as well, which some would consider an absolutely crucial experience for modern web development.

6. Code a Rock, Paper, Scissors Game

Rock, Paper, Scissors is kind of a catch all. It requires both user input and a randomizing element. You’re essentially playing against a robot, which you created, in a game you also created.

Additionally, it provides beginner coders with a tangible, interactive product you can pick up and play immediately. Since there are various graphic objects to interact with, you can be as personal and creative as you’d like!

7. Build Your Own Tic Tac Toe

Whereas a successful Rock, Paper, Scissors app can be created using randomized parameters, Tic Tac Toe requires a bit of strategy. Using HTML, CSS, Javascript, and a little math knowhow, you can learn how to create an unbeatable Tic Tac Toe bot.

You can even use the program as a Tic Tac Toe teacher of sorts, expanding the amount of teachable moments you can achieve with this project.

8. Web Scraping With Python

Python is famous for automating boring things, and the above project is no different. You can use Python, along with a Python library called Beautiful Soup, to extract data from HTML and XML documents, even if you’re a complete newcomer to python.

The above example exports data you’ve scraped into a CSV file, so you can even use a program like Excel to create charts, graphs, plots, and so on from your data.

You will have to download a Python distribution named Anaconda before you undertake this project, as it’s not present on your PC by default. This is the case with many programming languages, so it’s best to get used to the process early on.

9. Build a Basic HTML5 Website

Few projects will teach you as much as a basic HTML and CSS website. From learning simple design principals, file linking, and web hosting, creating a simple website is always a great way to either begin, or further, a programming portfolio.

The complexity and general impressiveness of your website will grow the more you learn. Most other programming languages you learn in your coding journey can also be applied to websites, making them a fantastic go-to when flexing your programming skills.

10. Code Snake With JavaScript

After you’ve been coding for a while, you gain an almost intuitive sense of the logical progression of an application. A game as simple as Snake, for example, is not a complete chunk. It’s a sequence of logical pieces.

The above video perfectly exhibits an actual programmer undertaking a casual project (which I wouldn’t try coding along with in real time). With a thorough understanding of the language you’re coding in, along with a mental coding library developed through practice, you too can recreate in parts what always previously seemed like a solid chunk.

While a game of Snake isn’t the most impressive project you’ll undertake, the workflow exhibited in the above example is what you’re aiming for as an amateur programmer.

Start Small, Think Big

Programming projects bleed into each other. Pick up a project with HTML and CSS. Next thing you know, you’ll be playing with JavaScript. Before long, you’ll be creating Python games in your sleep. It’s miraculous what a steady, consistent flow of projects can do for your programming knowledge.

Now you have ten to pick apart and piece together. Or rather, a starting ten. Choose one, two, or all, but whatever you do: get coding!

Read the full article: The 10 Best Beginner Projects for New Programmers

RapidWeaver 8 for Mac arrives: building your dream website just got easier

RapidWeaver 8 for Mac is here, implementing many feature requests while bringing significant improvements and refinements in almost every area.

Realmac Software, a Brighton, England-based makers of productivity Mac software, Tuesday announced availability of RapidWeaver 8, a major iteration to the popular web design app.... Read the rest of this post here


"RapidWeaver 8 for Mac arrives: building your dream website just got easier" is an article by iDownloadBlog.com.
Make sure to follow us on Twitter, Facebook, and Google+.

8 Awesome CodePen Features for Programming and Web Development

codepen-features

Getting started with JavaScript web development can be a frustrating process, but there are tools out there which make it easier. CodePen.io is an in-browser coding environment designed for both learning to code and to quickly prototype ideas with minimal hassle. In this article, we look at some of the site’s features and how they can help you become a better programmer. What Is CodePen? CodePen provides something called a pen, which comprises three different windows for HTML, CSS, and JavaScript, plus a preview pane that updates in real-time as you type. While it is frequently used for web developers…

Read the full article: 8 Awesome CodePen Features for Programming and Web Development

codepen-features

Getting started with JavaScript web development can be a frustrating process, but there are tools out there which make it easier.

CodePen.io is an in-browser coding environment designed for both learning to code and to quickly prototype ideas with minimal hassle.

In this article, we look at some of the site’s features and how they can help you become a better programmer.

What Is CodePen?

These CodePen features will help you improve your coding

CodePen provides something called a pen, which comprises three different windows for HTML, CSS, and JavaScript, plus a preview pane that updates in real-time as you type.

While it is frequently used for web developers to showcase ideas for websites, it is also a great place to learn the basics of front-end web development. Here are the most notable features you need to know when using CodePen.

1. Preprocessors

Preprocessors are interpreted or compiled languages designed to simplify coding. They can add features to a language for convenience, and make code easier to read. In web development, a combination of preprocessors for HTML, CSS, and JavaScript are used to create clean code quickly.

If you are learning web development and want to try out different preprocessors, CodePen allows you to switch preprocessors on the fly, and see the code it compiles down to in real time. Each of the three panes on the CodePen app has a dropdown menu in the top right. Select View Compiled HTML/CSS/JS to see how the code will be interpreted.

These CodePen features will help you improve your coding

In this pen, we’ve created a simple site using Haml and Sass to style some header text. Selecting View Compiled shows the standard HTML and CSS. In this example the difference is minimal. While learning a new language, however, it can be useful to see how the preprocessed code looks once compiled.

2. External Resources

Alongside native support for preprocessors, CodePen supports external scripts. This makes it the perfect place to get hands-on experience with libraries for your personal projects, or to brush up on popular web app libraries like React.

To add an external library, open the Settings pane on your pen, and head to the JavaScript tab. There are two ways to add resources, either by adding the resource URL manually, or by searching.

These CodePen features will help you improve your coding

We used this feature in our article covering web animation with mo.js, along with Babel preprocessing.

See the Pen Mojs MUO example by Ian (@Bardoctorus) on CodePen.

Yes, CodePen pens can be embedded! Go ahead and click on the preview pane above to see the results of the Mo.js tutorial!

Other pens can be imported much like external libraries. This means you can take elements from previously written pens to use like modules in your new pens. CodePen user Adam’s Simple Poll pen is a good example of this.

3. Templates

When you are learning new concepts or testing out new ideas, you frequently use similar components and retread the same steps getting started. CodePen allows the creation of template pens which can cut out the repetition, and let you get straight to the point.

To create a template, open a new pen, make your changes, and select the Template slider in the settings menu.

Until recently, free users could only make three templates, but now all users can have as many templates in their account as they want. Perfect for getting started on a new idea with the minimum delay!

4. Collaboration Mode

The ability to collaborate and teach with CodePen may be its greatest asset. There are already a wealth of great collaboration tools for programmers, but CodePen’s approach is simple and intuitive.

Pro users of CodePen can create a new pen, and open it to collaboration under the Change View menu. This changes the pen’s link into a shareable invitation accommodating a scaling number of people depending on your CodePen Pro plan.

In this instance, I wrote HTML while a friend updated the CSS in real-time, with a labelled cursor identified where they were working.

These CodePen features will help you improve your coding

Anyone with the link can join and use the in-browser chat function, regardless of whether they are a pro user or even have a CodePen account. Provided autosave is off only the owner of the pen can save any changes, making it a safe way to open your code to others without risk.

The open-ended nature of this mode is beneficial for beginners as you can invite almost anyone into your pen to guide you through a difficult concept. It is also a handy mode to know your way around as it is perfect for interviewing potential employees, and has already been used professionally in this way!

5. Professor Mode

Professor mode allows one Pro user to host a room in which only they can edit the code. Between 10-100 users can watch and chat depending on the Pro plan of the host.

These CodePen features will help you improve your coding

The Professor mode allows flexibility between classroom learning and distance learning, or a combination of the two. Using Professor mode will enable people at the back of the class to have the same experience of those at the front, and for the teacher to show bugfixes which will update in real time.

6. Presentation Mode

Presentation mode is designed, unsurprisingly, with presenting code in mind. The app displays in a simplified view, designed to work with overhead projectors. CodePen has optimized Presentation mode for use on lower speed internet connections and weaker hardware.

These CodePen features will help you improve your coding

Shrewd readers may have already realized that the free version of CodePen would provide precisely this function, though the Pro mode does have a few useful features. Layout, font size, and themes can be quickly changed on the fly to suit almost any setting, and showing the link to the pen brings up a jumbo-sized shortened URL making sharing the project easier.

These CodePen features will help you improve your coding

These small changes, along with being able to scale the preview window to fit whatever you are showing off, make presentation mode perfect for both teachers, and developers presenting ideas to colleagues. Presentation mode is also a clean-looking, and simple way to present code if you find yourself interviewing for a programming position.

7. Patterns

Searching for inspiration is made much easier with CodePen’s collections of Design Patterns.

Each category is a collection of example code provided by CodePen users for specific tasks. Are you looking for a way to create dynamic buttons for your site? Accordioning menus? There are a wealth of categories to fit almost any example.

These CodePen features will help you improve your coding

These patterns are also a great way to learn how interactive buttons work, and the different ways dynamic user interfaces can function.

8. Emmet

Emmet, previously known as Zen Coding, is widely regarded as the greatest time saver for HTML and CSS development. The plugin takes some of the code you find yourself writing a lot and converts them into simple shortcuts.

Seeing it in action is better than explaining it, so take the usual setup for an HTML document:

These CodePen features will help you improve your coding

Adding this to every HTML document has been reduced to two actions. Using Emmet, type ! and hit the Tab key. Magic!

These CodePen features will help you improve your coding

Emmet is active as standard on CodePen and is especially useful if you are trying to learn a new concept in JavaScript and need to create the supporting HTML and CSS quickly.

Develop With CodePen for a Better Experience

CodePen is an excellent tool for web developers, and the field is continuously growing. JavaScript is a great language to learn for a future in web development.

There are some great tutorials and courses available for people wanting to get started with JavaScript, and CodePen is a great environment to test out your new skills.

Read the full article: 8 Awesome CodePen Features for Programming and Web Development