👋 hi, I noticed that many of the images are missing accessible names via alt text. This is a problem for screen reader users, and in some cases dictation users. Rather than enumerate all the locations here, I'll open a PR here.

Please add JAMstack Toulouse to https://jamstack.org/community/

First meetup scheduled in March with @philhawksworth from @netlify and @pixelastic from @algolia. (to be confirmed).

Cheers! 🥂

Discussion: Tech choices for jamstack.org v2

Goals of this issue

• Share the current suggested tooling for the next iteration of jamstack.org
• Invite comments from the community to help steer some of the decisions
• Together, identify an approach which best serves the functional needs of the site, and also presents the most efficient and accessible approach to including content and implementation contributions from the community

High level requirements

• Generation of a site using suitable static site generator or similar build automation
• A development pipeline which can be simply and confidently replicated by contributing developers
• A resultant site which embodies sound JAMstack principles:
  • Complete, viable views generated at build-time
  • No dependency on client-side JavaScript for core content
  • A Progressive Enhancement approach to any additional feature requiring client-side JavaScript
  • A site deployable entirely to a CDN (provided for the project by Netlify)
• A low barrier to participation in terms of technical expertise

Suggested tools

SSG: Eleventy

Eleventy has the following properties which I think make it a good candidate for this project:

• Simple to bootstrap. Since it is entirely JavaScript and easily provisioned via an npm install developers do not have to leave the comfort of node and local JavaScript to configure their environments.
• Framework-free. Eleventy does not yield or require a JavaScript framework as part of its output. This mean that there are fewer concepts to understand and maintain than with other, more functionally powerful, but complex options.
• Explicit and straightforward. Eleventy only outputs what is explicitly defined meaning that it can be more approachable and maintainable for a broader group of developers.
• Templating options. Support for many templating syntaxes makes it more likely that we can select one that has good community appeal.
• Compilation speed. Although this site is not likely to have thousands of pages, compilation speed can still impact developer experience and deployment optimisations. Eleventy has speedy build times.

Templating: Nunjucks or Liquid

Both of these options are:

• Popular and well documented.
• Expressive enough to support the site features we might want. But not too complex.
• Have useful template inheritance.
• Extensible through Eleventy.
• Relatively simple to read and comprehend.

My personal preference is for Nunjucks, just because I really like its syntax. But more people might be familiar with Liquid which could make it a more obvious choice.

CSS: TailwindCSS

Potential hot-drama in this recommendation!

Approaches to structuring and maintaining CSS vary differently. And maintaining CSS over a long period of time and with a disparate group of contributors can quickly become difficult. With TailwindCSS we have the ability to build on utility classes which transcend not only projects, but also entire development teams. I submit that using this will bring:

• Fewer reasons for people to need to write any CSS at all as part of their code contributions
• A basis for good structural conventions by default
• A simple build pipeline yielding optimized, purged CSS
• A more intuitive development experience when adding visual components for those familiar with TailwindCSS

Possible resistance to using Tailwind might be:

• It adds lots of css classes into your markup. (this can be mitigated, but still..!)
• Not everyone knows it, but people know CSS
• and probably more

Onwards

...I'm keen to discuss these things and get opinions here in this issue. I feel it would be a good choice, but anticipate some debate.

Any strong feelings or suggestions to voice? Your contribution to the discussion is much valued.

This blog post in an in-depth Jamstack guide for beginners - it covers the foundations, history and understanding of the Jamstack architecture. It also provides a step-by-step tutorial on how to build a website with Jamstack using Hugo for Markup and ButterCMS API.
https://buttercms.com/blog/what-is-jamstack

Please update the button design to include the arrow as shown in the figma doc https://www.figma.com/file/7nBwzGu2tnmFqNCbUUzdor/Jamstack.org?node-id=0%3A1

When the team at Netlify first created the branding for the jamstack.org site, its needs were rather different. In the time since then, jamstack has grown to include:

• Dozens of community meetup groups
• JAMstack Conferences
• Adoption into the parlance of many services and organisations
• References in technical writing
• A community slack

...and much more.
As the category scales, so too should the identity.

This issue exists to:

• Share the criteria and requirements for an updated logo and branding for JAMstack.
• Share some of the design iterations and thinking
• Invite feedback
• Show the current work in progress

Logo mark requirements and considerations

1. Logo artwork needs to be versatile, and hold up at a variety of sizes and applications (digital, print, embroidery, screen printing, etc)
2. Logo color considerations:
   • Logo needs to work in flat color (no gradients or halftones)
   • Logo needs to have both a two-color version with a one-color alternate.
   • Logo should also support knockout applications (white logo on dark backgrounds)
3. Logo needs to have both a jewel (think) and the wordmark (think the world "Apple").
4. Logo needs to be designed to allow for three variations when considering the jewel of the logo and the wordmark of the logo:
   • Jewel to the left, wordmark to the right (horizontal version)
   • Jewel centered above the wordmark (vertical version)
   • Jewel alone, independent of the wordmark (simple "favicon" version)
5. Jewel of the logo should allude in some manner to a stack of three components
6. Logo needs to be vector shapes only, to support SVG format for web / digital and EPS format for print applications.
7. Logo should feel modern, as JAMstack is a modern approach to building web applications
8. Logo should feel at home alongside jamstack ecosystem logos as well as logos for enterprise services like AWS.
9. Logo shape should not be confusingly similar to other logos in the general ecosystem
10. Logo colors should be fairly unique in the space. (In our ecosystem research, blues, greens, purples, and reds seemed to be the most widely used among ecosystem partners.)

While scrolling, the header seems to be distorted.
Please see the image.

Attempting to yarn start with node 12 and I ran into errors. I dropped down to node 10.0.0 and it worked. Just an FYI.

jamstack.org git:(master) ✗ yarn start              
yarn run v1.17.3
$ gulp server
[16:00:25] Failed to load external module @babel/register
[16:00:25] Requiring external module babel-register
fs.js:27
const { Math, Object } = primordials;
                         ^

ReferenceError: primordials is not defined

https://www.infoq.com/presentations/jamstack-enterprise/

its a good talk

Hi team! The nav on secondary pages of the site appears broken:

This is a awesome organization and your content too. Do you think it may be interesting to translate the website to facilitate the access of the brazilian community?

Seeing references to incomplete pages on https://jamstack.org/what-is-jamstack/

With the markup and other user interface assets of Jamstack sites...

^ for example markup page is there, yet incomplete.

Seeing a few references like this throughout and some missing links, etc. that we should work through.

Hey Guys,

Just checking if you guys are looking for someone to look over the prs and merge new ones.

Will be happy to help. Have one open as we speak.

All the best :)

Please update the glossary entry page layout to match the figma. Happy to work with you to merge the two layouts. https://www.figma.com/file/7nBwzGu2tnmFqNCbUUzdor/Jamstack.org?node-id=0%3A1

All the the videos seen here should be on JAMstack.org (and active ingredients once they're ready). @eliwilliamson @rafaelconde

This is due to a jQuery call prior to the script being loaded on the resources.html page.

$.get(
       ...
 );

https://jamstack.org/sitemap.xml referencing DEPLOY_PRIME_URL as base url for the site and subdirectory pages, causing invalid <loc> throughout the sitemap file.

Sitemap isn't formatted correctly for submission to tools like Google Search Console and crawl-ability then broken for bots trying to follow these referenced paths.

Generated sitemap file markup:

Discussion: Information architecture for jamstack.org v2

A new version of the jamstack.org site is coming. There is already discussion about the planned technical approach which you may be interested in

Goals of this issue

• Share the proposed IA for the next iteration of jamstack.org
• Invite comments from the community to help steer the work and not miss any good insights.
• Decide the high-level content structure for the next release
• Identify any longer term content aspirations

High level content requirements

jamstack.org should:

• Give a clear, concise definition of what jamstack is
• Describe benefits of jamstack
• Pave the way for people to start using jamstack architectures
• Present well organised and discoverable content and resources from the community
• Help people discover and engage with local jamstack communities
• Provide resources to people looking to start a jamstack community group in their own area
• Present a recognisable identity for jamstack which can be easily adopted by all

Proposed high-level content structure

• home
• resources
• examples
• community
  • existing meetups
  • creating a meetup
• Glossary
• Code of conduct

Page purposes

A short description of the purpose of each page in the site structure to help define the requirements for each page type.

Home (/)

• "Onesheet" definition and explantation of what JAMstack is.
• Quickly summarise the primary benefits of jamstack
• Surface recent or highlighted content and resources
• Demonstrate an active community and make it easy to participate
• callout upcoming regional and international events

Resources (/resources)

• Show curated resources from the community
• Demonstrate that there is regularly new content being generated by the community to grow confidence in the adoption
• Publicise visible companies in the ecosystem?

Examples and case studies (/examples)

• showcase examples of jamstack sites
• show both high volume of sites, and also notable implementation, brands, capabilities
• surface tools and technologies used in example sites
• invite contributions from those building jamstack sites and services

Community (/community)

• Inform about the number, and locations of, active meetups
• Give guidance on creating a new meetup. Inform about support for groups
• Advertise upcoming meetup events
• Distribute content from recent meetups
• Promote the community slack to help grow the conversation

Glossary (/glossary)

• Gather definitions of common relevant terms
• Provide clarity and references
• Help combat FUD
• Provide easy process for additional contributions and amends

Code of conduct (/code-of-conduct)

• publish a code of conduct for participant at meetups, and in the slack
• inform participants how to report issues

At least the one from Mathias https://www.youtube.com/watch?v=uWTMEDEPw8c&index=4&list=PLzlG0L9jlhEOwdVv4nJZW6c_MCLbmfs4z

Hi all!

I was looking into this and it seems like server-side rendering is pretty much eschewed by JAMstack:

Any project that relies on a tight coupling between client and server is not built with the JAMstack. This would include:

A single page app that uses isomorphic rendering to build views on the server at runtime.

How do you reconcile this with the "Better Performance" claim on the JAMstack manifesto? Or is JAMstack not intended for sites with a lot of dynamic content on the first render?

Do you guys think it's possible to reconcile loosely-coupled client/server architectures, with server-side rendering? Maybe using some kind of thin layer to do the initial render but still expose all of the data via apis?

On browsing the site https://jamstack.org/examples it retuns with a 404

Cheers

Sadly, the JAMstack Dallas meetup has disbanded. Let's remove it from the listing on the /community page since the Meetup link 404s, and over the coming months I'll gauge local interest in reviving the group!

Please update the glossary entry page layout to match the figma. Happy to work with you to merge the two layouts. https://www.figma.com/file/7nBwzGu2tnmFqNCbUUzdor/Jamstack.org?node-id=0%3A1

This comes a lot when I mention JAMstack as a thing, but there is not a place to point a person to view a "JAMstack" site or their source code.

Please update the mobile menu behavior to slide in on mobile.

JavaScript is a trend, we all know. But we must not forget that it is possible to use functional language to implement practically the same functions that JavaScript performs for headlessCMS and SSG's. So the name given to architecture is not wrong? I'm a scientist and I'm dedicating my monograph to explaining how this new platform works.

"With a JAMstack project, anyone should be able to do a git clone , install any needed dependencies with a standard procedure (like npm install), and be ready to run the full project locally. No databases to clone, no complex installs. This reduces contributor friction, and also simplifies staging and testing workflows."

What?

Well you'd have to install whatever runs the API, including any DB? This doesn't sound like a consequence of the "JAM stack", but as a side effect of connecting your local environment to an external API, hence not having the whole project.

In the examples page, the Story breeding example uses crytpo mining.

Hi folks! I'm one of the organizers of the Seattle JAMstack event and I've been looking for a decent code of conducts for our events. I thought it'd be great to host it on this site so that other events could easily link to it.

I opened #186 for this purpose. Feedback is welcome! Cc @PerrySetGo @biilmann

Use existing asset pipeline and tools like ImageOptim to optimize user-provided images for the Web. See #72 for example of performance with a very large PNG using pngquant.

As number of examples increases, apply lazyloading with something like lazysizes to limit bandwidth consumption for data capped users. Example implementation: gohugoio/hugoThemesSite#32

For SVGs the network is usually the bottleneck. WRT raster images law of diminishing returns apply.

Orthogonal: Git is not good at storing large blobs. Git LFS helps mitigate the large blob problem and BFG Repo Cleaner can help remove large blobs from history in a performant way.

Olá! Another day, another meetup. This time it's Lisbon!

Edit: here is the meetup link: https://www.meetup.com/JAMstack-Lisbon/

We need the standard assets for Lisbon - here are the landmarks Nuno has suggested for the graphics. He says:

In terms of landmarks check the Torre de belem,
https://en.wikipedia.org/wiki/Belém_Tower

the bridge
https://en.wikipedia.org/wiki/25_de_Abril_Bridge

and the main square
https://en.wikipedia.org/wiki/Praça_do_Comércio#/media/File:Lisbon_main_square_(36622604910).jpg

He is organizing a meetup in january so we have a little bit of time for this.

Muito obrigado!

header styles update

Just another stupid "stack" created by kids who they know better than people who have been around since the start of the internet!

what do you think about this?

now contributors can add their show cases with ease without manually capturing & cropping their screen-shots.

you can automatically get thumbnails of the example websites, always up-to-date (by our specific period) screenshots, without stale

e.g.

https://api.letsvalidate.com/v1/thumbs?url=http://www.sphero.com/&width=596&height=396

Result:

<img src="https://api.letsvalidate.com/v1/thumbs?url={{ .link }}&width=596&height=396"/>

you can learn more about the api at the github repo

When clicking the link on the footer at jamstack.org to join the slack, the link is expired.

Expected behavior: the link should be active so folks who want to join the slack can sign up.

Hi,

I have a question about working with an oAuth powered API that requires the following info provided by the client in order to get an access token and be able to make any API requests:

• For "public endpoints":
  • Client ID
  • Client Secret
• For private (user-specific) endpoints:
  • Username
  • Password

This is a pretty standard way to control the API access, Client ID and Secret are always required to get a token (even if a user is not authenticated).

So in the case of JAMStack, you would have to distribute Client ID and Secret together with your JS code. Do you find this problematic? Is there's any "best practice" to deal with this?

Thanks!

Given then strength, weaknesses and focuses of the different CMSs, it would be useful to know what features are supported by each site-generator and headless CMS.

As an example, to have an indicator as to whether multi-lingual support is provided by each and in what form.

Thinking this would be via keywords added to the front-matter. The keywords could be free-form or limited to a set of recognised keywords, such that if an unsupported keyword is provided, then it would not be displayed on the page.

Going further, the keywords could be broken down into "strongly supported" and "supported", to have an indication as to how well that functionality is provided for.

Would this be of interest and in what form does the team think it should take?

Hello:

I hope this message finds you well.

I am unable to find on the pages at jamstack.org any information about the organization.

1. Who founded Jamstack and in which country and year?
2. Beyond advancing adoption of this new development paradigm ("The Jamstack"), what is the organization's mission?
3. Where does the organization receive its funding?

Pardon me if this this issue tracker is not the correct place to ask a FAQ-style question; I did not see any other means of contact.

—James

Need to update the current top banner since state of the jamstack survey is now closed.

New banner:
Join the first Jamstack Conf Virtual on May 27-28. Registration is Free!

Discussion: jamstack word treatment

Note to the reader:

This issue discusses how we write "JAMSTACK". I'm going to have to write the word itself a number of times in the issue as a result... which is bound to result in LOLs. So I'll normalise on jamstack for a while. This is not a statement of intent!

Goals of this issue

• Gather thoughts from the community about the best way to present the word jamstack when written
• Minimize confusion, maximize clarity
• Seek consensus on the best way to avoid confusion when communicating what jamstack is
• It would be useful to be able to be consistent ourselves, and offer a place to find the "generally accepted" word written as a reference.

Current challenges and observations

• Naming things is hard!
• The word was derived from JavaScript, APIs and Markup, but you don't have to use all 3 when adopting this architectureal model. So right away, by writing "JAMstack", we introduce confusion when explaining what this is.
• Most people using the term regularly tends to be using the form "JAMstack"
• The wider community currently use various ways of presenting the word, and we would like to be consistent
• I (Phil 👋) quietly experimented with a revised treatment on jamstack.org without discussing it or announcing it first. This created more confusion and discussion than I anticipated! My bad. Apologies!
• Chris Coyier observered and commented on our flux nicely: https://css-tricks.com/jamstack-vs-jamstack/
• If we feel it appropriate to follow the lead of things like "LAMP", then we might note that this is generally referred to as "LAMP stack"
• If we would take inspiration from things like "AJAX", then we might note that this is generally referred to as "Ajax" (see below)
• Naming things is hard!

Proposal and justification

My opinion is that we should adopt "Jamstack" as our norm.

• It avoids the common first question of "what does that stand for?", more often instead prompting, "what is that?"
• It's easier to avoid well-intentioned consistencies than are common with "JAMstack" (JAM Stack, JAM stack, JAMStack)
• and as I mentioned on the jamstack slack:

I'd just offer this one comparison: Ajax.

When I first started using Ajax, it was always called "AJAX" and stood for Async JavaScript And XML. Over time, JSON became more popular than XML with this pattern, but we still called it the same thing. And these days we'd refer to it as "Ajax" (if at all, lol) because what it stands for is more than what the acronym consists of.

Over the last 5 years since the term was coined, the ecosystem which enables the jamstack has evolved and matured so much. The term needs to not divert attention away from that fact, and towards the original acronym. — I believe that jamstack stands for so much more than using JavaScript, APIs and Markup. I think it stands more for:

• Pre-rendering as much as possible
• Serving a site with static assets, without the need for a webserver executing logic to create responses on demand
• Enhancing with JavaScript and leveraging browser APIs where appropriate
• Feasting on the flourishing API economy, and decoupling our own services into APIs which our UIs can consume.

...but I'm keen on wider perspectives about the word.

For discussion

So... how should we normalise how we write this word?

I think having the example sites ordered by their traffic rank would encourage visitors more towards JAMstack, by having them look at more familiar/popular websites.

If this is acceptable, I would love to sort them
@philhawksworth @eliwilliamson

Jamstack.org has a banner advertising JAMstack_conf, which took place earlier this week (I was lucky enough to attend, and had a great time!):

Learn more about the JAMstack at JAMstack Conf, San Francisco — 29-30 October, 2018

This should probably be removed or updated.

Just pointing it out :)

Description

The link to the API economy in "Supercharging with services" section of what is jamstack page is not working.

Expected Behaviour

The link should redirect to the API Economy page

With a11y and more in mind, we need to adjust the contrast of the tools underneath example listings.

https://jamstack.org/examples/

Example - current view:

Hi, it will be useful to sort generator cards by programming language.
Example attached below, text names can be replaced with logos