 Your new post is loading...
Your new post is loading...
|
Scooped by
Mickael Ruau
December 30, 2021 1:57 AM
|
The Right Amount of Opinion
For me, what it boils down to is that I feel like Astro brings the right degree of opinion to its framework. It knows that there are widespread preferences for lower-level tooling, and so it leaves options. But it provides a solid framework for implementing those options.
Now, granted, I've only built a few proofs of concept, but these are the five reasons I'm so excited about Astro:
Static-first, with progressive enhancement
Supporting multiple component frameworks
Native markdown support
A foundation for styling
Reduced boilerplate code
Let's take a quick look at each of these ideas.
|
|
Scooped by
Mickael Ruau
December 28, 2021 1:53 AM
|
In this tutorial, you will learn how to build JAMSTACK apps with a feature to upload images. You will use Cloudinary to power the upload functionality and Auth0 for authentication. This can come in handy when building photo albums, e-commerce applications, and business websites. For a brief introduction to Vue.js, you can check out this article, Getting Started with Vue JS: The Progressive JavaScript Framework. Prerequisites -
A machine with Node.js and npm) installed. -
Basic familiarity with JavaScript, and ES6 and Vue.js). -
A text editor. E.g. Sublime Text, Visual Studio Code, Atom, etc. -
A Cloudinary account. You can sign up for a Cloudinary account for free. -
An Auth0 account. You may create a free Auth0 account here.
|
|
Scooped by
Mickael Ruau
December 27, 2021 1:02 AM
|
One of the most popular speakers from Jamstack Conf will be sharing an update on Teespring’s journey to the Jamstack, including their new explorations with Next.js.
|
|
Scooped by
Mickael Ruau
December 24, 2021 2:12 AM
|
Curated list of resources: books, videos, articles, speaker decks, tools about using the Jamstack.
|
|
Scooped by
Mickael Ruau
December 23, 2021 1:54 AM
|
Everything you need to build a great landing page / marketing website for your startup. Great SEO metrics, Green WebVitals, � Performance, Clean & Pragmatic Codebase out of the box.
� Features
⚡ Next.js - React framework for static rendering
� Best SEO setup - Meta Tags, JSON-LD and Open Graph Tags
✅ Optimized for Web Vitals
� Blog with MDX
� Mailchimp Integration - for newsletters
� Sendgrid Integration - for sending emails
� Dark mode - and customizable themes!
� No UI library - just styled components, so you don't have to learn any new syntax
� One click deployment - with Vercel or any other serverless deployment environment
� Eslint - with Next.js's recommended settings and imports sorting rule
� Prettier
|
|
Scooped by
Mickael Ruau
December 21, 2021 5:52 AM
|
With physical stores closed by the pandemic, Universal Standard, the most size inclusive apparel company, migrated to the Jamstack on Shopify with Nuxt.js. This talk covers the impact of the pandemic, the signs they outgrew the monolith, the tools chosen, their incremental migration process, and the hybrid Jamstack approach that blended the best of dynamic data with static pages. The new Jamstack site lifted mobile conversion rate by 200%, improved team velocity, and saved the day.
Attendees will learn:
• Jamstack isn’t just for small sites and right now the ecosystem is looking for case studies of how larger sites have managed it. Universal Standard has thousands of pages and needs to blend dynamic with static to be performant while exceeding business requirements.
• This Jamstack case study will feature both the technical leader and business leader from an ecommerce company. This is important because it means this case study will speak to audiences on both the technical and business side about the benefits of migrating to the Jamstack.
|
|
Scooped by
Mickael Ruau
December 20, 2021 2:03 AM
|
Headless CMS
Pour que le contenu géré dans un CMS puisse apparaître sur différents médias, l’affichage sur le site Web (l’aperçu) est inclus dans un headless CMS. Le CMS est pour ainsi dire privé de sa tête, d'où son nom. À la place, une API est intégrée à laquelle les sites Web et les applications peuvent accéder. Les différents médias ont accès aux contenus, mais réglementent la manière dont ils sont présentés individuellement. Le backend et le frontend sont donc détachés l'un de l'autre.
Schéma du fonctionnement d’un headless CMSDans un headless CMS, le frontend est séparé du système.
|
|
Scooped by
Mickael Ruau
December 17, 2021 1:53 AM
|
What you’ll learn
Create cutting-edge full stack applications while enhancing your developer experience using the JAMstack
Implement a comprehensive e-commerce architecture with real-time inventory, favorites, reviews, and subscriptions
Streamline performance, security, and accessibility plus programmatically create pages with our static site generator Gatsby
Easily manage content and automatically serve it through an API to drastically simplify backend development with our headless CMS Strapi
Serve customers with a completely custom cart and checkout system powered by Stripe, allowing users to save payment methods and access order history
Integrate a JWT authentication workflow with sign up/login, forgot/reset password, and social media integration
Adopt modern React best practices by using functional components, React Hooks, and the React Context API
Leverage the power of GraphQL with native support from both Strapi and Gatsby to seamlessly interact with backend data
Deploy our project from development to a live production application on AWS and Netlify
Breathe life into your applications by adding animations with react-spring & react-lottie
Extend your reach and enhance performance with Search Engine Optimization (SEO) and powerful, automatic Image Optimization
Access components from a vast component library, apply a powerful JSS styling solution, consolidate common styles in a theme, and layouts based on screen size with responsive design – all using Material-UI
Requirements
Basic JavaScript Knowledge
Basic React Knowledge (components, props, state)
|
|
Scooped by
Mickael Ruau
December 15, 2021 1:13 AM
|
Back in 2018, I read an article from Harry's on how they used Gatsby to build a blazingly fast e-commerce site - the end result was their stunning site, Flamingo, that serves over 1 million female customers.
|
|
Scooped by
Mickael Ruau
December 14, 2021 1:48 AM
|
The migration went swimmingly. Smashingly? Er… it went well. Smashing wasn’t penalized for its own success — when a popular article came along, they could serve the content consistently, no longer bailing over large loads. Along with this, the movement to a JAMstack infrastructure brought better performance and security.
Markus Seyfferth, former CEO of Smashing Magazine, noted:
“The time to first load is so much faster than before… before we had to wait for the HTML file being served for 800ms and now it’s 80ms.”
This process was successful and like any great engineering project, lessons were learned along the way. In this next article in this series, we’ll run through a tutorial and demo for what we would recommend given what we’ve learned. If you’d like to modernize your WordPress development and reap the performance and security benefits of JAMstack, stay tuned!
|
|
Scooped by
Mickael Ruau
December 13, 2021 1:13 AM
|
Making the move to JAMstack can be a tricky affair if you aren’t prepared. Here’s a short but effective checklist to help you transition to JavaScript, APIs, and Markdown as the backbone of your digital presence.
|
|
Scooped by
Mickael Ruau
December 10, 2021 2:45 AM
|
In this post, we’ll set up a demo site and tutorial for headless WordPress, including a starter template! We’ll use the WordPress dashboard for rich content editing, while migrating the front-end architecture to the JAMstack to benefit from better security, performance, and reliability. We’ll do this by setting up a Vue application with Nuxt, pulling in the posts from our application via the WordPress API.
|
|
Scooped by
Mickael Ruau
December 9, 2021 2:20 AM
|
WordPress & Jamstack can be united to surprising results. Read this complete guide to getting started with WordPress static site generators!
|
|
|
Scooped by
Mickael Ruau
December 29, 2021 8:50 AM
|
The Jammies Awards recognize individuals, companies, projects and initiatives that are pushing forward the modern web and Jamstack ecosystem. Final voting is now open.
|
|
Scooped by
Mickael Ruau
December 27, 2021 1:51 AM
|
Tech Stack
Jamstack is unique because it allows you to integrate several technologies to create a full-stack application. You will use the following technologies to create this scrapbook:
Next.js is a React framework that extends the amazing powers of React for creating multiple page apps easily. Without using any backend frameworks like Express, you may use Next.js and its serverless functions to develop your app's frontend and backend.
Chakra-UI provides a plethora of stylish and accessible react components for styling your web application.
You'll be using Airtable as a database solution for this application. Airtable is a spreadsheet/database hybrid with a fantastic API for integrating it into your application.
Cloudinary is a cloud media management platform where you'll upload photos of your scrapbook.
Auth0 enables you to integrate a user authentication system into your app. It uses OAuth 2.0 and provides a secure OAuth layer for your app.
Auth0 and Cloudinary both offer free plans. You can create an account and use it for free to develop this application.
|
|
Scooped by
Mickael Ruau
December 24, 2021 11:04 AM
|
Check out a showcase of a variety of Jamstack-drive web properties and examples. Get inspired about building your next web project on the modern web architecture.
|
|
Scooped by
Mickael Ruau
December 23, 2021 7:58 AM
|
Don’t over-architect a site to make it fit into Jamstack paradigm as you may find such the solution brittle and difficult to maintain. Don’t offload the majority of your content display to client-side API calls as you’ll find this can negate some of the benefits of Jamstack’s static, CDN-based approach. These are guidelines, not hard and fast rules, but they can help you evaluate if the benefits of Jamstack outweigh the drawbacks for your project. For most projects, I’m certain they will, but in some cases they may not.
Now that we understand some of the benefits of choosing to use the Jamstack you might be asking yourself how you can use it.
The nature of the Jamstack means that there’s no easy answer to that question. A myriad of combinations of tools and services that you can use to create a site that qualifies as “Jamstack.” This is why many books and tutorials about Jamstack tend to gravitate towards a single solution. The goal of The Jamstack Book, however, is to give you the information and “real-world” usage to be able to evaluate what tools and services best meet your specific needs. Let’s get coding!
|
|
Scooped by
Mickael Ruau
December 22, 2021 6:17 AM
|
Most likely candidates to use Jamstack for their eCommerce?
Brands that have anything between a few hundred to two thousand pages and brands with products that don’t need to be updated regularly. Only when the stock or the product’s prices change.
|
|
Scooped by
Mickael Ruau
December 20, 2021 6:07 AM
|
Combine the power of Crystallize, our open source Jamstack eCommerce boilerplate using Next JS and React with serverless hosting on Vercel to launch fast headless commerce in just a few minutes.
|
|
Scooped by
Mickael Ruau
December 17, 2021 2:12 AM
|
Many businesses decide to go with Jamstack to start building their online businesses or develop them, and they have strong arguments for that. Among them are:
Page speed – websites created with Jamstack amaze users with their page load speed. In other words, you will stop losing clients because your website’s performance is poor.
SEO efficiency – getting high rankings in Google means getting more organic traffic which means more clients. Jamstack helps you achieve better positions because Google favours static pages (aka Jamstack pages) as they are fast, light and easy to scan.
Omnichannel – since Jamstack websites work on any device, you can convert both web and mobile users.
Rich user experience – Jamstack means freedom of creating front-end the way you always wanted, without any limitations or compromising the speed or the features
Future-proof – stop using out-dated technologies and become innovative by starting to use Jamstack.
Security – more and more people are aware of the importance of cybersecurity. As Jamstack websites have no direct connection to the database, user data or any other sensitive information, it makes your website bullet-proof like Robocop.
These are the benefits of Jamstack in general, but there are still many benefits that we could call “dedicated” for eCommerce.
|
|
Scooped by
Mickael Ruau
December 16, 2021 6:16 AM
|
Shopify launched a new React-based web development framework, called Hydrogen. Here's how it fits into the JavaScript framework ecosystem.
|
|
Scooped by
Mickael Ruau
December 15, 2021 12:51 AM
|
Learn why designing your website with headless architecture to create a commerce site is vital in keeping your customer at the center of your business.
|
|
Scooped by
Mickael Ruau
December 13, 2021 1:14 AM
|
Are you comparing these popular technology stacks? Well, we've asked the experts to explain the differences between JAMstack, LAMP Stack, MEAN and .NET.
|
|
Scooped by
Mickael Ruau
December 10, 2021 2:48 AM
|
This repository was created as a follow-along companion for my Smashing Magazine article: How To Migrate From WordPress To The Eleventy Static Site Generator.
|
|
Scooped by
Mickael Ruau
December 10, 2021 2:09 AM
|
Pour ce premier épisode de Génération Statique, nous recevons Nicolas Goutay suite à la publication de son article Vers une Jamstack plus légère, qui détaille comment il a développé le nouveau site d'... – Écoutez Vers une Jamstack légère et performante, avec Nicolas Goutay par Génération statique instantanément sur votre tablette, téléphone ou navigateur, sans téléchargement.
|
![A Complete Guide To The JAMstack And React E-Commerce [2021] | Bonnes Pratiques Web & Cloud | Scoop.it](https://img.scoop.it/6lNCbhsApx96LQ6qRuI5HTl72eJkfbmt4t8yenImKBVvK0kTmF0xjctABnaLJIm9)
Astro lets you build your website with modern front-end component frameworks, like React and Vue, but it doesn't assume you want to run JavaScript in the browser.
That's my struggle with frameworks like Gatsby and Next.js. They are super powerful, but they assume interactivity and always include JavaScript files in your built site.
Astro assumes the opposite. It makes you, the developer, tell it when you need interactivity. Otherwise it renders static HTML. That means that even though there is some magic that happens during the build, you are still in control of your HTML code for the most part.