Skip to content

Commit e4fe6cd

Browse files
committed
first post and about changes
1 parent 06950c9 commit e4fe6cd

File tree

10 files changed

+261
-176
lines changed

10 files changed

+261
-176
lines changed

_config.yml

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@
1313
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
1414
# You can create any custom variable you would like, and they will be accessible
1515
# in the templates via {{ site.myvariable }}.
16-
title: Hyperstart blog
17-
email: username@example.com
16+
title: Building with Hyperapp
17+
email: contact@hyperstart.io
1818
description: >- # this means to ignore newlines until "baseurl:"
19-
Write an awesome description for your new site here. You can edit this
20-
line in _config.yml. It will appear in your document head meta (for
21-
Google search results) and in your feed.xml site description.
19+
Blog for Hyperstart, a productive development environment focused on Hyperapp.
20+
Here we will post guides, tutorials and best practices to make powerful and
21+
simple web apps using Hyperapp.
2222
baseurl: "/blog" # the subpath of your site, e.g. /blog
23-
url: "" # the base hostname & protocol for your site, e.g. http://example.com
24-
twitter_username: jekyllrb
25-
github_username: jekyll
23+
url: "https://hyperstart.io" # the base hostname & protocol for your site, e.g. http://example.com
24+
twitter_username: hyperstartJS
25+
github_username: hyperstart
2626

2727
# Build settings
2828
markdown: kramdown

_posts/2018-04-11-welcome-to-jekyll.markdown

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ layout: post
33
title: "Welcome to Jekyll!"
44
date: 2018-04-11 19:34:47 +0200
55
categories: jekyll update
6+
published: false
67
---
78
You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
89

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
layout: post
3+
title: "Resources to Learn Hyperapp"
4+
date: 2018-04-19 12:32:47 +0200
5+
categories: hyperapp tutorial resources learning snippets recipes
6+
---
7+
[Hyperapp](https://github.com/hyperapp/hyperapp) is a tiny JavaScript framework for building web applications. It's been optimised for perfomance and simplicity, while still allowing for complex web applications. Given its reduced size and architecture, Hyperapp is also ideal for creating Progressive Web Applications (PWA), a topic we will be covering in a later post.
8+
9+
Since it is a new development and requires a different paradigm than many of the most popular frameworks, it may feel daunting to look at a Hyperapp project at first. However, Hyperapp is actually one of the simplest frameworks to learn and develop with. The resources linked here can be a valuable first step, but as with any programming exercise, the best approach is to try it yourself. You can fork Hyperapp from the Github link above and try out any of the examples below. Alternatively, you can use [Hyperstart](https://www.hyperstart.io/), an online development framework optimised for Hyperapp, which deploys pre-configured projects and already includes many of the examples mentioned here.
10+
11+
Whatever way you choose to code using Hyperapp, the first step should be to understand the documentation, available at [Github](https://github.com/hyperapp/hyperapp/blob/master/README.md). You can follow up with more texts from Jorge Bucaran, Hyperapp's creator, at [this Sitepoint article](https://www.sitepoint.com/hyperapp-1-kb-javascript-library/) and on [Github](https://gist.github.com/JorgeBucaran/8dc33b7947f3193eb2ea3d5700e27036).
12+
13+
## Code Examples
14+
15+
For a more complete and constantly updated list of projects built with Hyperapp, including boilerplates and utilities, check [Awesome Hyperapp](https://github.com/hyperapp/awesome-hyperapp).
16+
17+
There is also an ongoing community effort to document resources and examples at [Learn Hyperapp](https://github.com/LearnHyperapp). You can also find recipes to follow at [Hyperapp Recipes](https://github.com/LearnHyperapp/hyperapp-recipes), a collection of code snippets to teach basic and intermediary how-to functionality using Hyperapp.
18+
19+
### Basic Examples:
20+
21+
* [Counter](https://www.hyperstart.io/projects/NYAw2ak7y3R75uHzHWydyk5cViH3-ZB0sSq0VviHwE3PK).
22+
23+
* [Todo List](https://www.hyperstart.io/projects/NYAw2ak7y3R75uHzHWydyk5cViH3-D1WPCuSI9lseef96).
24+
25+
* [Using the style attribute](https://www.hyperstart.io/projects/NYAw2ak7y3R75uHzHWydyk5cViH3-x6HI0o8Q2jYAZvK8).
26+
27+
### Intermediate Examples:
28+
29+
* [Router](https://www.hyperstart.io/projects/NYAw2ak7y3R75uHzHWydyk5cViH3-mXXHQq4S06S2Uo7u).
30+
31+
* [How to call actions from other slices](https://www.hyperstart.io/projects/NYAw2ak7y3R75uHzHWydyk5cViH3-SCMgWopKZGsi3Sm6).
32+
33+
If you're a more advanced user looking for an example of a complex project, just check out the code for our website, [Hyperstart.io](https://github.com/hyperstart/hyperstart.io). It's an entirely open-source online development platform and probably one of the biggest projects being built using Hyperapp.
34+
35+
## Reading
36+
37+
Lastly, we should mention two blogs that deal with Hyperapp-related matters: [Hypercraft](https://zaceno.github.io/hypercraft/) and [Hyperapp Vox Populi](https://medium.com/hyperapp). We will also provide more examples and tutorials on this blog, so make sure to check it out as well!
38+
39+
Lastly, if you have any questions about Hyperapp, you can ask them on [Slack](https://hyperapp.slack.com/messages), [Twitter](https://github.com/HyperappJS), or [Reddit](https://www.reddit.com/r/hyperapp).

about.md

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,6 @@ title: About
44
permalink: /about/
55
---
66

7-
This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](https://jekyllrb.com/)
7+
We are two developers who truly believe in Hyperapp's capacity to change the JavaScript landscape. We built Hyperstart because we saw a lot of potential to develop ways to make programming faster and easier, by using this new framework and building devtools on top of our development platform.
88

9-
You can find the source code for Minima at GitHub:
10-
[jekyll][jekyll-organization] /
11-
[minima](https://github.com/jekyll/minima)
12-
13-
You can find the source code for Jekyll at GitHub:
14-
[jekyll][jekyll-organization] /
15-
[jekyll](https://github.com/jekyll/jekyll)
16-
17-
18-
[jekyll-organization]: https://github.com/jekyll
9+
Here in this blog you will find tips, best practices, tutorials, and ramblings on JavaScript, start-up life, progressive web applications, and what's next on the world of tiny frameworks.

docs/404.html

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@
33
<meta charset="utf-8">
44
<meta http-equiv="X-UA-Compatible" content="IE=edge">
55
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.4.0 -->
6-
<title>Hyperstart blog | Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</title>
6+
<title>Learn Hyperapp for PWAs | Blog for Hyperstart, a productive development environment focused on Hyperapp. Here we will post guides, tutorials and best practices to make powerful and simple web apps using Hyperapp.</title>
77
<meta name="generator" content="Jekyll v3.7.3" />
8-
<meta property="og:title" content="Hyperstart blog" />
8+
<meta property="og:title" content="Learn Hyperapp for PWAs" />
99
<meta property="og:locale" content="en_US" />
10-
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
11-
<meta property="og:description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
12-
<link rel="canonical" href="/blog/404.html" />
13-
<meta property="og:url" content="/blog/404.html" />
14-
<meta property="og:site_name" content="Hyperstart blog" />
10+
<meta name="description" content="Blog for Hyperstart, a productive development environment focused on Hyperapp. Here we will post guides, tutorials and best practices to make powerful and simple web apps using Hyperapp." />
11+
<meta property="og:description" content="Blog for Hyperstart, a productive development environment focused on Hyperapp. Here we will post guides, tutorials and best practices to make powerful and simple web apps using Hyperapp." />
12+
<link rel="canonical" href="http://localhost:4000/blog/404.html" />
13+
<meta property="og:url" content="http://localhost:4000/blog/404.html" />
14+
<meta property="og:site_name" content="Learn Hyperapp for PWAs" />
1515
<script type="application/ld+json">
16-
{"description":"Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.","@type":"WebPage","url":"/blog/404.html","headline":"Hyperstart blog","@context":"http://schema.org"}</script>
16+
{"description":"Blog for Hyperstart, a productive development environment focused on Hyperapp. Here we will post guides, tutorials and best practices to make powerful and simple web apps using Hyperapp.","@type":"WebPage","url":"http://localhost:4000/blog/404.html","headline":"Learn Hyperapp for PWAs","@context":"http://schema.org"}</script>
1717
<!-- End Jekyll SEO tag -->
18-
<link rel="stylesheet" href="/blog/assets/main.css"><link type="application/atom+xml" rel="alternate" href="/blog/feed.xml" title="Hyperstart blog" /></head>
18+
<link rel="stylesheet" href="/blog/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/blog/feed.xml" title="Learn Hyperapp for PWAs" /></head>
1919
<body><header class="site-header" role="banner">
2020

21-
<div class="wrapper"><a class="site-title" rel="author" href="/blog/">Hyperstart blog</a><nav class="site-nav">
21+
<div class="wrapper"><a class="site-title" rel="author" href="/blog/">Learn Hyperapp for PWAs</a><nav class="site-nav">
2222
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
2323
<label for="nav-trigger">
2424
<span class="menu-icon">
@@ -62,19 +62,19 @@ <h1>404</h1>
6262

6363
<div class="wrapper">
6464

65-
<h2 class="footer-heading">Hyperstart blog</h2>
65+
<h2 class="footer-heading">Learn Hyperapp for PWAs</h2>
6666

6767
<div class="footer-col-wrapper">
6868
<div class="footer-col footer-col-1">
6969
<ul class="contact-list">
70-
<li class="p-name">Hyperstart blog</li><li><a class="u-email" href="mailto:username@example.com">username@example.com</a></li></ul>
70+
<li class="p-name">Learn Hyperapp for PWAs</li><li><a class="u-email" href="mailto:contact@hyperstart.io">contact@hyperstart.io</a></li></ul>
7171
</div>
7272

73-
<div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/jekyll"><svg class="svg-icon"><use xlink:href="/blog/assets/minima-social-icons.svg#github"></use></svg> <span class="username">jekyll</span></a></li><li><a href="https://www.twitter.com/jekyllrb"><svg class="svg-icon"><use xlink:href="/blog/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">jekyllrb</span></a></li></ul>
73+
<div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/hyperstart"><svg class="svg-icon"><use xlink:href="/blog/assets/minima-social-icons.svg#github"></use></svg> <span class="username">hyperstart</span></a></li><li><a href="https://www.twitter.com/hyperstartJS"><svg class="svg-icon"><use xlink:href="/blog/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">hyperstartJS</span></a></li></ul>
7474
</div>
7575

7676
<div class="footer-col footer-col-3">
77-
<p>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</p>
77+
<p>Blog for Hyperstart, a productive development environment focused on Hyperapp. Here we will post guides, tutorials and best practices to make powerful and simple web apps using Hyperapp.</p>
7878
</div>
7979
</div>
8080

docs/about/index.html

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@
33
<meta charset="utf-8">
44
<meta http-equiv="X-UA-Compatible" content="IE=edge">
55
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.4.0 -->
6-
<title>About | Hyperstart blog</title>
6+
<title>About | Learn Hyperapp for PWAs</title>
77
<meta name="generator" content="Jekyll v3.7.3" />
88
<meta property="og:title" content="About" />
99
<meta property="og:locale" content="en_US" />
10-
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
11-
<meta property="og:description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
12-
<link rel="canonical" href="/blog/about/" />
13-
<meta property="og:url" content="/blog/about/" />
14-
<meta property="og:site_name" content="Hyperstart blog" />
10+
<meta name="description" content="Blog for Hyperstart, a productive development environment focused on Hyperapp. Here we will post guides, tutorials and best practices to make powerful and simple web apps using Hyperapp." />
11+
<meta property="og:description" content="Blog for Hyperstart, a productive development environment focused on Hyperapp. Here we will post guides, tutorials and best practices to make powerful and simple web apps using Hyperapp." />
12+
<link rel="canonical" href="http://localhost:4000/blog/about/" />
13+
<meta property="og:url" content="http://localhost:4000/blog/about/" />
14+
<meta property="og:site_name" content="Learn Hyperapp for PWAs" />
1515
<script type="application/ld+json">
16-
{"name":"Hyperstart blog","description":"Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.","@type":"WebSite","url":"/blog/about/","headline":"About","@context":"http://schema.org"}</script>
16+
{"name":"Learn Hyperapp for PWAs","description":"Blog for Hyperstart, a productive development environment focused on Hyperapp. Here we will post guides, tutorials and best practices to make powerful and simple web apps using Hyperapp.","@type":"WebSite","url":"http://localhost:4000/blog/about/","headline":"About","@context":"http://schema.org"}</script>
1717
<!-- End Jekyll SEO tag -->
18-
<link rel="stylesheet" href="/blog/assets/main.css"><link type="application/atom+xml" rel="alternate" href="/blog/feed.xml" title="Hyperstart blog" /></head>
18+
<link rel="stylesheet" href="/blog/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/blog/feed.xml" title="Learn Hyperapp for PWAs" /></head>
1919
<body><header class="site-header" role="banner">
2020

21-
<div class="wrapper"><a class="site-title" rel="author" href="/blog/">Hyperstart blog</a><nav class="site-nav">
21+
<div class="wrapper"><a class="site-title" rel="author" href="/blog/">Learn Hyperapp for PWAs</a><nav class="site-nav">
2222
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
2323
<label for="nav-trigger">
2424
<span class="menu-icon">
@@ -42,16 +42,9 @@ <h1 class="post-title">About</h1>
4242
</header>
4343

4444
<div class="post-content">
45-
<p>This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at <a href="https://jekyllrb.com/">jekyllrb.com</a></p>
46-
47-
<p>You can find the source code for Minima at GitHub:
48-
<a href="https://github.com/jekyll">jekyll</a> /
49-
<a href="https://github.com/jekyll/minima">minima</a></p>
50-
51-
<p>You can find the source code for Jekyll at GitHub:
52-
<a href="https://github.com/jekyll">jekyll</a> /
53-
<a href="https://github.com/jekyll/jekyll">jekyll</a></p>
45+
<p>We are two developers who truly believe in Hyperapp’s capacity to change the JavaScript landscape. We built Hyperstart because we saw a lot of potential to develop ways to make programming faster and easier, by using this new framework and building devtools on top of our development platform.</p>
5446

47+
<p>Here in this blog you will find tips, best practices, tutorials, and ramblings on JavaScript, start-up life, progressive web applications, and what’s next on the world of tiny frameworks.</p>
5548

5649
</div>
5750

@@ -63,19 +56,19 @@ <h1 class="post-title">About</h1>
6356

6457
<div class="wrapper">
6558

66-
<h2 class="footer-heading">Hyperstart blog</h2>
59+
<h2 class="footer-heading">Learn Hyperapp for PWAs</h2>
6760

6861
<div class="footer-col-wrapper">
6962
<div class="footer-col footer-col-1">
7063
<ul class="contact-list">
71-
<li class="p-name">Hyperstart blog</li><li><a class="u-email" href="mailto:username@example.com">username@example.com</a></li></ul>
64+
<li class="p-name">Learn Hyperapp for PWAs</li><li><a class="u-email" href="mailto:contact@hyperstart.io">contact@hyperstart.io</a></li></ul>
7265
</div>
7366

74-
<div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/jekyll"><svg class="svg-icon"><use xlink:href="/blog/assets/minima-social-icons.svg#github"></use></svg> <span class="username">jekyll</span></a></li><li><a href="https://www.twitter.com/jekyllrb"><svg class="svg-icon"><use xlink:href="/blog/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">jekyllrb</span></a></li></ul>
67+
<div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/hyperstart"><svg class="svg-icon"><use xlink:href="/blog/assets/minima-social-icons.svg#github"></use></svg> <span class="username">hyperstart</span></a></li><li><a href="https://www.twitter.com/hyperstartJS"><svg class="svg-icon"><use xlink:href="/blog/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">hyperstartJS</span></a></li></ul>
7568
</div>
7669

7770
<div class="footer-col footer-col-3">
78-
<p>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</p>
71+
<p>Blog for Hyperstart, a productive development environment focused on Hyperapp. Here we will post guides, tutorials and best practices to make powerful and simple web apps using Hyperapp.</p>
7972
</div>
8073
</div>
8174

0 commit comments

Comments
 (0)