Menusifu

menusifu

In this tutorial, I will show you how to build a fully mobile responsive restaurant website using Next.js and Cosmic Headless CMS. The Figma template can be found on ui8.net. Bonus features include deploying to Vercel and setting up automatic static content revalidation using Cosmic Webhooks. Let’s get started. Tools we’ll be using - A React framework for production that makes it easy to spin up a full-stack application. Next.js - A Headless CMS enables the independence of the data (content) layer and gives us the ability to quickly manage website content. Cosmic -  A stable, and powerful professional-grade CSS extension language. Sass TL;DR Check out the code View the live demo Install the App Template Quick Introduction is a complete suite to build blazing fast React apps. It is developer-friendly and intuitive to use. With the release of , things are only going to get better with new features including performance optimization, middleware, React 18 support, on-demand ISR, expanded support for SWC, and more. Next.js Next.js 12.1 is a great headless CMS that gives us the ability to fully manage and store our website content and media and update them quickly. Cosmic Explore 4 new killer features of Next.js and use them to template Let's app that includes tooling and configurations. For this tutorial, you'll need 12.22.0 or a later version. Open the terminal, paste or type install a new Next.js Node.js npx create-next-app@latest nextjs-restaurant-website-cms
# or
yarn create next-app nextjs-restaurant-website-cms Install dependencies from the app folder: cd nextjs-restaurant-website-cms
npm i
# or
cd nextjs-restaurant-website-cms 
yarn You can now start the app in the development mode with: npm run dev
# or
yarn dev Open in your browser to see the ascetic home page. http://localhost:3000/ 1. Rust compiler One of the key features of Next.js 12 is performance optimization. To boost performance, Next.js replaced the Babel compiler with an extensible Rust compiler and enabled Next.js 12,  the is built on top of — — which stands up for . It does consume TypeScript/JavaScript and emits JavaScript code that can be executed on old browsers. it by default using compiler SWC Speedy Web Compiler SWC is 20x faster than Babel on a single thread and 70x faster on four cores. 2. Middleware This is one of the most exciting features. Middlewares enable us to use code over configuration. This means you can run code before a request is completed, and based on the request, you can modify the response by rewriting, redirecting, adding headers, setting cookies, etc. With middlewares, you can implement things like , and more. authentication, bot protection, redirects and rewrites, server-side analytics, logging, and handling unsupported browsers Middleware is created and it will run on all routes within the directory. What does a file look like? Let’s see that through our template for example. /pages/_middleware.ts /pages _middleware.js // pages/_middleware.js

import { NextResponse } from 'next/server';

export async function middleware( request ) {
  // create an instance of the class to access the public methods.
  //This uses next(),

  let response = NextResponse.next();

  const country = request.geo.country || 'US';
  const city = request.geo.city || 'San Francisco';
  const region = request.geo.region || 'CA';

  // get the cookies from the request
  let cookieFromRequest = request.cookies['location-cookie'];

  if(!cookieFromRequest) {
    // set the `cookie`
    response.cookie('location-cookie', `${country|city|region}`);
  }

  return response;
} 3. On-demand Incremental Static Regeneration ISR Next.js now exposes a function allowing you to revalidate individual pages that use . Inside , you don’t need to specify revalidate to use on-demand revalidation, only revalidate the page on-demand when is called. unstable_revalidate() getStaticProps getStaticProps unstable_revalidate() // pages/api/revalidate.js

export default async function handler(req, res) {
  try {
    await res.unstable_revalidate('/menu/' + req.body.data.slug)
    return res.json({ revalidated: true })
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating')
  }
} 4. Faster Image Optimization and Smaller images using AVIF The built-in has been updated to support the same pattern as pages, where images are served stale and revalidated in the background. It also supports AVIF images enabling 20 percent smaller images compared to WebP. Image Optimization API ISR This feature is opt-in and can be enabled by modifying the image. format property in the file: next.config.js // next.config.js

const nextConfig = {
  reactStrictMode: true,
  images: {
        formats: ['image/avif', 'image/webp'],
        domains: ['imgix.cosmicjs.com'],
    },
}

module.exports = nextConfig Cosmic Features overview : Build out the schema, models, and controllers for API from the editor. Cosmic offers both a API for our convenience. Customizable API REST and GraphQL content management system and API toolkit. Globally fast and secure Call back anywhere you need, to get the functionality you want, out of the box with Cosmic API. Webhooks is included which allows you to do powerful image processing for dynamic apps optimized for cross-platform experiences. Integration Imgix Cosmic integration The first step making a . Let's select the "Start from scratch" option. free Cosmic account Great! Now let's organize our content into groups, that share the same content model using Object Types. For example, you have sections with similar properties like section name, title, introduction, and picture and want to reuse this module to create content for different sections. Create Section Object Type and add section properties to define the "Metafields" in the "Content Model". Now you could create an Object Type model for sections and you can fill content like this. In a similar way, you can define modules and creates Object Type following the current data model, schema design Singleton for a unique model, Multiple reusable models. Time to get values for the Next.js app Install the Cosmic module to your Next.js app. npm i cosmicjs
# or
yarn add cosmicjs Then go to Cosmic Dashboard and find your Bucket slug and API read key. Your Bucket > Settings > API Access Awesome! Add this Bucket slug and API read key into your Next.js app .env //.env
COSMIC_BUCKET_SLUG=your_cosmic_slug
COSMIC_READ_KEY=your_cosmic_read_key To use the template UI you need to clone it in . Open the terminal, paste or type this code to install all dependencies, and run it. GitHub git clone https://github.com/cosmicjs/nextjs-restaurant-website-cms.git
cd nextjs-restaurant-website-cms

npm install
#or
yarn install

npm run dev
#or
yarn dev Function request to the that we create earlier in Cosmic Dashboard and get our created content from the Cosmic by the type. getDataFromBucket bucket params // src/lib/api.js

import Cosmic from 'cosmicjs';

const BUCKET_SLUG = process.env.COSMIC_BUCKET_SLUG
const READ_KEY = process.env.COSMIC_READ_KEY

const bucket = Cosmic().bucket({
  slug: BUCKET_SLUG,
  read_key: READ_KEY,
});

export async function getDataFromBucket(preview) {
  const params = {
    type: 'header',
    props: 'title,slug,metadata,created_at',
    sort: '-created_at',
    ...(preview && { status: 'all' }),
  }
  const data = await bucket.getObjects(params)
  return data.objects
} Let's display our content, integrate it with our UI, and render some elements to the home page. For that, you need to add this to . index.js // pages/index.js

import Head from 'next/head';
import Home from 'components/Home';
import Layout from 'components/Layout';
import Footer from 'components/Footer';
import AboutUs from 'components/AboutUs';
import SpacialMenu from 'components/Menu';
import Introduction from 'components/Introduction';
import VideoIntro from 'components/VideoIntro';
import Gallery from 'components/Gallery';
import Contacts from 'components/Contact';

import { getDataFromBucket } from 'lib/api';
import chooseByType from 'utils/chooseValueByType';

function Template({ data }) {
  return (
    <>
      <Head>
        <title>Next.js Restaurant CMS</title>
        <meta name="description" content="Create template using cosmic.js CMS" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Layout navbar={chooseByType(data, 'navigation')}>
        <Home info={chooseByType(data, 'header')}/>
        <AboutUs info={chooseByType(data, 'about')}/>
        <SpacialMenu info={[chooseByType(data, 'drink'), chooseByType(data, 'food')]}/>
        <Introduction info={chooseByType(data, 'history')}/>
        <Gallery info={[chooseByType(data, 'gallery'), chooseByType(data, 'food')]}/>
      </Layout>
      <Footer>
        <VideoIntro url={chooseByType(data, 'video')}/>
        <Contacts info={chooseByType(data, 'contact')}/>
      </Footer>
    </>
  )
}

export async function getStaticProps({ preview }) {
  const data = (await getDataFromBucket(preview)) || [];
  return {
    props: { data },
  }
}

export default Template; The function filters data by Object Type , which we created in the Cosmic Dashboard. chooseByType slug // src/utils/chooseValueByType.js

const chooseByType = (data, slugName) => {
  if( data && slugName ) {
    const chooseBySlug = data?.filter(content => Object.values(content).includes(slugName));
    return chooseBySlug ? chooseBySlug[0] : [];
  }
}

export default chooseByType; Congrats you're almost there! Making Menu Item Page In Next.js you can create a dynamic route. For creating individual menu item page and dynamic route, consider the following page : pages/menu/[slug].js // pages/menu/[slug].js

import Head from 'next/head';
import { useRouter } from 'next/router';

import Layout from 'components/Layout';
import Footer from 'components/Footer';
import Contacts from 'components/Contact';
import MenuIntro from 'components/MenuIntro';
import VideoIntro from 'components/VideoIntro';
import Gallery from 'components/Gallery';

import { getAllDataWithSlug,getDataFromBucket } from 'lib/api';
import chooseByType from 'utils/chooseValueByType';

function Menu({ data }) {
  const {
    query: {slug},
  } = useRouter();

  return (
    <>
      <Head>
        <title>Next.js Restaurant CMS</title>
        <meta name="description" content="Create template using cosmic.js CMS" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Layout navbar={chooseByType(data, 'navigation')}>
        <MenuIntro info={[chooseByType(data, 'food'), chooseByType(data, 'drink')]} slug={slug} />
        <Gallery info={[chooseByType(data, 'gallery'), chooseByType(data, 'food')]}/>
      </Layout>
      <Footer>
        <VideoIntro url={chooseByType(data, 'sushi')}/>
        <Contacts info={chooseByType(data, 'contact')}/>
      </Footer>
    </>
  )
}

export async function getStaticProps({ params, preview = null }) {
  const data = (await getDataFromBucket(preview)) || [];
  return {
    props: { data },
  }
}

export async function getStaticPaths() {
  const dataWithSlug = (await getAllDataWithSlug()) || [];

  return {
    paths: dataWithSlug.map((menu) => `/menu/${menu.slug}`),
    fallback: true,
  }
}

export default Menu; the function is used to get the data from Cosmic each time this route is called. In we use function to revalidate the page on-demand when is called and if there was an error, Next.js will continue to show the last successfully generated page. getServerSideProps pages/api/revalidate.js unstable_revalidate unstable_revalidate() After deploying your codebase on you can enable the revalidation of content updates by going to the Cosmic Dashboard and navigating to . The event to be triggered when editing content is . The Webhook URL endpoint will look like . Vercel Bucket Settings > Webhooks object.edited.published ${YOUR_VERCEL_DEPLOYMENT_URL}/api/revalidate This also makes it easier to update your site when content from your headless CMS is created or updated. Time to test it out, edit your content in Cosmic Dashboard, and see the static content updated instantly! Conclusion Congrats! Now you have a dynamic, customizable, and fully integrated template with new Next.js and Cosmic features, you can customize it for other types of businesses and use it how you prefer.

Build a Production Ready Restaurant Website with Next.js 12 and Cosmic

…and how to use a BootStrap Theme is an HTML/CSS/JS framework to make it quick and easy to build a responsive website. Bootstrap uses a grid layout system that breaks the page into rows and 12 columns inside each row. This now allows you to structure your markup up in a consistent way. Bootstrap Note: This tutorial is an excerpt from a chapter in my upcoming book . The book guides you from humble beginnings through deploying an app to production. The book is now in pre sale, and you can grab a free chapter right now! Build A SaaS App in Rails 6 Also, the beta for my new project is has been released. If you’re losing track of pull requests, have old ones lingering around or would just love a dashboard that aggregates these requests over multiple services (Github, Gitlab, and Bitbucket), . Pull Manager check it out Also, the beta for my new project is almost ready. If you’re losing track of pull requests, have old ones lingering around or would just love a dashboard that aggregates these requests over multiple services (Github, Gitlab, and Bitbucket), . Pull Manager check it out Bootstrap, now being around for many years has developed an ecosystem of themes as well. There are both premium and free themes available. Personally, I like to use as a premium theme or as a free theme when building a SaaS application. Inspinia AdminLTE For the purpose of the post, and due to its open source and free nature we will use the AdminLTE theme. Feel free to use any other themes. Though class names and markup structure may change specific to the theme you are using. This post will also assume you have generated a new Rails app with and running a on the default port 3000. rails new app_name rails server Quick overview of Grid Let’s dig into the grid system in a little more detail before integrating Bootstrap into your application. As a note before, the grid is a 12 column system that is responsive to the viewport or device width. When you create a row in the grid with you will be able to fill that row with columns. For example, if you wanted a three column layout it would look like... <div class="row"></div> <div class="row"><div class="col-lg-3"><h1>One</h1></div><div class="col-lg-3"><h1>Two</h1></div><div class="col-lg-3"><h1>Three</h1></div></div> In the example, you may notice the column class name contains the letters . This stands for large and means the columns are referencing the large viewport size. There are four sizes, each corresponding to the greatest pixel width. Extra small devices Phones (<768px). Small devices Tablets (≥768px). Medium devices Desktops (≥992px). Large devices Desktops (≥1200px). lg You can use multiple column declarations within the class name to instruct the grid what to do depending on the size of the viewport. <div class="row"><div class="col-xs-12 col-md-8">One</div><div class="col-xs-6 col-md-4">Two</div></div> <div class="row"><div class="col-xs-6 col-md-4">One</div><div class="col-xs-6 col-md-4">Two</div><div class="col-xs-6 col-md-4">Three</div></div> To go deeper on the grid system and other CSS functionality of Bootstrap you can visit the . documentation First Controller, Views If this is a new app, before you begin implementing the layout, we will need to implement a route and controller to bypass the default welcome page. You will be using the controller in the application as you go along. Let’s also pause to mention that Rails comes with built-in command line generators to generate controllers, models, mailers. As well as generating database migration file or even generating a scaffold of all of those combined. In our case, let’s focus on the controller generator. The general format for this generator is . Thus, our controller generate command will look like: rails generate controller NAME [action action] [options] rails generate controller Activity mine feedcreate  app/controllers/activity_controller.rbroute  get 'activity/feed'route  get 'activity/mine'invoke  slimcreate    app/views/activitycreate    app/views/activity/mine.html.slimcreate    app/views/activity/feed.html.sliminvoke  rspeccreate    spec/controllers/activity_controller_spec.rbcreate    spec/views/activitycreate    spec/views/activity/mine.html.slim_spec.rbcreate    spec/views/activity/feed.html.slim_spec.rbinvoke  helpercreate    app/helpers/activity_helper.rbinvoke    rspeccreate      spec/helpers/activity_helper_spec.rbinvoke  assetsinvoke    coffeecreate      app/assets/javascripts/activity.coffeeinvoke    scsscreate      app/assets/stylesheets/activity.scss Lets make one quick edit to the route file to define a default route. We will add to the bottom of the route file, as follows: root to: 'activity#mine' Rails.application.routes.draw doget 'activity/mine' get 'activity/feed' root to: 'activity#mine'end Application layout If you are using the AdminLTE Bootstrap theme, and following along, you should download them if you have not already. You can download it from or from the support page on the . this link theme preview Once you have downloaded and unzipped the folder you will want to copy some files into your Rails application. You can run the following commands or copy the files through your OS’s file system GUI. cp ~/Downloads/AdminLTE-2.3.11/dist/css/AdminLTE.css app/assets/stylesheets/ The download location may vary based on your machine. Also, the version number in the path for AdminLTE may change based on the time you download the theme. Use the folder you have downloaded. That command will copy the main AdminLTE CSS styles. The AdminLTE theme also comes with different colored skins. For this post, I will use the light blue, but you can use any of the included colors. The following command will move the skin CSS styles into your application. mkdir app/assets/stylesheets/skinscp ~/Downloads/AdminLTE-2.3.11/dist/css/skins/skins-light-blue.css \app/assets/stylesheets/skins Now that the required files are present, you will now instruct the Rails application to use the files. You will first change the file to only require itself and a new file. assets/stylesheets/application.css style.scss /***= require style*= require_self*/ The new file will then include the bootstrap base CSS files and the AdminLTE files. style.scss "bootstrap-sprockets"; "bootstrap"; @import @import "AdminLTE"; "skins/skin-blue-light"; @import @import If you reload you will now see that the styling of the default page for the page has an updated styling. It should now look more like the following image: http://localhost:3000 activity#mine As you can see while there is no full layout, the styles have updated. We are going to need to do a bit more to implement the whole layout. First, let’s update the application layout to use a slim template(replacing the file) and some basic Bootstrap styles: .erb #app/views/layouts/application.slimdoctype htmlhtmlheadtitle Standup App= csrf_meta_tags= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'= stylesheet_link_tag [href=" " ] https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css body.fixed.skin-blue-light.wrapper= render 'layouts/navigation/layout'.content-wrapper= yield= render 'layouts/navigation/footer' #app/views/layouts/application.erb<!DOCTYPE html><html><head><title>Standup App</title><%= csrf_meta_tags %><%= stylesheet_link_tag ‘application’, media: ‘all’, ‘data-turbolinks-track’: ‘reload’%><%= javascript_include_tag ‘application’, ‘data-turbolinks-track’: ‘reload’), false %><%= stylesheet_link_tag href=" " %></head><body class="fixed skin-blue-light"> https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css <div class="wrapper"><%= render 'layouts/navigation/layout'%> <div class="content-wrapper"><%= yield %></div><%= render 'layouts/navigation/footer' %> </div></body></html> There are a few things to note here. Firstly, you may notice the lines that begin with in the section. This is slim templates' way of included ruby to have output. Which is different than using in a template. The single hyphen is used to include ruby but has no output, like an if statement. The output in the head is including Rails asset javascript and CSS. We are also including FontAwesome icons through the last stylesheet inclusion helper. = head - You may also notice some very specific markup in the body. Here, you will be using the AdminLTE specific classes and HTML hierarchy to style your application in the AdminLTE theme. Lastly, you will see two other helpers. helpers, to include other slim files. Then, which is the Rails' template method for including the template from the controller and action called. = render = yield The last thing in the section to do before digging into specific sections in the layout is to modify the to include necessary javascript needed for the theme to work. You will be copying another file from the theme's folder and then making sure it is referenced in your project. application.js To copy the javascript file you can use the following command or use your machine’s file GUI: cp ~/Downloads/AdminLTE-2.3.11/dist/js/app.js app/assets/javascripts/ Additionally, you will need a third party javascript file from the theme folder as well: cp ~/Downloads/AdminLTE-2.3.11/plugins/slimScroll/jquery.slimscroll.min.js \vender/assets/javascripts/ You may notice this file gets copied to a different location. It is considered best practice in a Rails app to have third party javascript in the folders. vender Now, to make sure the newly copied javascript files are included into the project itself you will modify the file: application.js //= require jquery//= require jquery_ujs//= require turbolinks//= require bootstrap//= require jquery.slimscroll.min//= require_tree . The first three lines were included by default when generating the new Rails app. These lines include the basic included jQuery, tools and Turbolinks. The lines you will add include Bootstrap from the gem. And also includes the slimscroll plugin the AdminLTE theme uses. The last line is another Rails default. Meaning the file will include any javascript file in the folder and its children folders. This line is how the copied file and others got included. bootstrap-sass app/assets/javascripts app.js Top Navigation In regards to the navigation within this application, there will be two main sections. The navigation bar across the top, and a navigation sidebar on the left side of the screen. From the application file, the navigation files were included by rendering a slim template in a folder ( ). In this file, you are then including the top navigation and side navigation templates: navigation = render 'layouts/navigation/layout' #app/views/layouts/navigation/_layout.slim= render "layouts/navigation/header"= render "layouts/navigation/sidebar" #app/views/layouts/navigation/_layout.erb<%= render "layouts/navigation/header" %><%= render "layouts/navigation/sidebar" %> One thing to note here is the use of the underscore in the template file’s name. In Rails, partial template files are designated with an underscore at the beginning of the file name. What are partials? Partials are simply a way to break down templates into smaller chunks. This comes into far greater play in situations such as looping over a collection of items. There, you would make the template chunk to display item information a partial. The first partial included is the or top navigation bar template. The approach taken in this post with the layout will be to include example markup. Later you will add, remove or change the markup to meet the expectations of the application being built. Here is the header partial: header # app/views/layouts/navigation/_header.slimheader.main-headera.logo href="/"| Standup App  nav.navbar.navbar-static-top role="navigation".navbar-custom-menuul.nav.navbar-navli.dropdown.messages-menua.dropdown-toggle data-toggle="dropdown" href="#"i.fa.fa-envelope-ospan.label.label-success 4ul.dropdown-menuli.header You have 4 messagesliul.menulia href="#".pull-leftimg.img-circle [ alt=("User Image")src=" " ]h4| Sender Namesmalli.fa.fa-clock-o| 5 minsp Message Excerpt| \...li.footera href="#"  See All Messagesli.dropdown.notifications-menua.dropdown-toggle data-toggle="dropdown" href="#"i.fa.fa-bell-ospan.label.label-warning 10ul.dropdown-menuli.header You have 10 notificationsliul.menulia href="#"i.ion.ion-ios-people.info| Notification title| \...li.footera href="#"  View allli.dropdown.tasks-menua.dropdown-toggle data-toggle="dropdown" href="#"i.fa.fa-flag-ospan.label.label-danger 9ul.dropdown-menuli.header You have 9 tasksliul.menulia href="#"h3| Design some buttonssmall.pull-right 20%.progress.xs.progress-bar.progress-bar-aqua [ aria-valuemax="100"aria-valuemin="0" aria-valuenow="20" role="progressbar"style=("width: 20%") ]span.sr-only 20% Complete| \...li.footera href="#"  View all tasksli.dropdown.user.user-menua.dropdown-toggle data-toggle="dropdown" href="#"img.user-image alt=("User Image") src=" "span.hidden-xs Alexander Pierceul.dropdown-menuli.user-headerimg.img-circle [ alt=("User Image")src=" " ]p| Alexander Pierce - Web Developersmall Member since Nov. 2012li.user-body.col-xs-4.text-centera href="#"  Followers.col-xs-4.text-centera href="#"  Sales.col-xs-4.text-centera href="#"  Friendsli.user-footer.pull-lefta.btn.btn-default.btn-flat href="#"  Profile.pull-righta.btn.btn-default.btn-flat href="#"  Sign out http://placehold.it/160x160 http://placehold.it/160x160 http://placehold.it/160x160 # app/views/layouts/navigation/_header.erb<header class="main-header"><a class="logo" href="/">Standup App</a><nav class="navbar navbar-static-top" role="navigation"><div class="navbar-custom-menu"><ul class="nav navbar-nav"><li class="dropdown messages-menu"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-envelope-o"></i><span class="label label-success">4</span></a><ul class="dropdown-menu"><li class="header">You have 4 messages</li><li><ul class="menu"><li><a href="#"> </a><div class="pull-left"><img class="img-circle" alt="User Image" src=" "> </img></div><h4>Sender Name<small><i class="fa fa-clock-o"></i>5 mins</small></h4><p>Message Excerpt</p></li></ul></li><li class="footer"><a href="#"> See All Messages</a></li></ul></li><li class="dropdown notifications-menu"> http://placehold.it/160x160 <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-bell-o"></i><span class="label label-warning">10</span></a><ul class="dropdown-menu"><li class="header">You have 10 notifications</li><li><ul class="menu"><li><a href="#"><i class="ion ion-ios-people info"></i>Notification title</a></li></ul></li><li class="footer"><a href="#"> View all</a></li></ul></li><li class="dropdown tasks-menu"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-flag-o"></i><span class="label label-danger">9</span></a><ul class="dropdown-menu"><li class="header">You have 9 tasks</li><li><ul class="menu"><li><a href="#"></a><h3>Design some buttons<small class="pull-right">20%</small></h3><div class="progress xs"><div aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" class="progress-bar progress-bar-aqua" role="progressbar" style="width: 20%"> <span class="sr-only">20% Complete</span> </div></div></li></ul></li><li class="footer"><a href="#"> View all tasks</a></li></ul></li><li class="dropdown user user-menu"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><img alt="User Image" class="user-image" src=" " /><span class="hidden-xs">Alexander Pierce</span></a><ul class="dropdown-menu"><li class="user-header"><img class="img-circle" alt="User Image" src=" "> </img><p>Alexander Pierce - Web Developer<small>Member since Nov. 2012</small></p></li><li class="user-body"><div class="col-xs-4 text-center"><a href="#"> Followers</a></div><div class="col-xs-4 text-center"><a href="#"> Sales</a></div><div class="col-xs-4 text-center"><a href="#"> Friends</a></div></li><li class="user-footer"><div class="pull-left"><a class="btn btn-default btn-flat" href="#"> Profile</a></div><div class="pull-right"><a class="btn btn-default btn-flat" href="#"> Sign out</a></div></li></ul></li></ul></div></nav></header> http://placehold.it/160x160 http://placehold.it/160x160 As you can see in the header partial. The base Bootstrap navigation markup and styles are applied. Then, AdminLTE applies styles over the top of that to give your application a dashboard feel. Within the header navigation bar is the application’s title, dropdowns for messages/notification, and a dropdown to access other parts of the application. Sidebar Navigation The second template being included is the or side navigation bar template. This partial will take the same example markup approach. sidebar # app/views/layouts/navigation/_sidebar.slim.main-sidebar.sidebar.user-panel.pull-left.imageimg.img-circle alt=("User Image") src=" " /.pull-left.infop User Namea href="#"i.fa.fa-circle.text-success| Onlineform.sidebar-form action="#" method="get".input-groupinput.form-control name="q" placeholder="Search..." type="text" /span.input-group-btnbutton#search-btn.btn.btn-flat name="search" type="submit"i.fa.fa-searchul.sidebar-menuli.header HEADERli.activea href="#"span Link http://placehold.it/160x16 lia href="#"span Another Linkli.treeviewa href="#"span Multileveli.fa.fa-angle-left.pull-rightul.treeview-menulia href="#"  Link in level 2lia href="#"  Link in level 2 # app/views/layouts/navigation/_sidebar.erb<div class="main-sidebar"><div class="sidebar"><div class="user-panel"><div class="pull-left image"><img alt="User Image" class="user-image" src=" " /></div><div class="pull-left info"><p>User Name</p><a href="#"><i class="fa fa-circle text-success"></i>Online</a></div></div><form action="#" class="sidebar-form" method="get"><div class="input-group"><input class="form-control" name="q" placeholder="Search..." type="text" /><span class="input-group-btn"><button class="btn btn-flat" id="search-btn" name="search" type="submit"><i class="fa fa-search"></i></button></span></div></form><ul class="sidebar-menu"><li class="header">HEADER</li><li class="active"><a href="#"><span>Link</span></a></li><li><a href="#"><span>Another Link</span></a></li><li class="treeview"><a href="#"><span>Multilevel</span><i class="fa fa-angle-left pull-right"></i></a><ul class="treeview-menu"><li><a href="#"> Link in level 2</a></li><li><a href="#"> Link in level 2</a></li></ul></li></ul></div></div> http://placehold.it/160x160 As you see, the sidebar partial is a bit smaller and simpler. It contains a little bit of user information, a search input, and links to other parts of the application that you will change later. Footer The last major piece of the layout will be the footer. It will be simple and it will be short. Again, it will be another partial. Again the partial will be located in the folder. Here is the slim markup: navigation # app/views/layouts/navigation/_footer.slimfooter.main-footer.pull-right.hidden-xs| Anything you wantstrong| Copyright © 2016a href="#"  Company| All rights reserved. # app/views/layouts/navigation/_footer.erb<footer class="main-footer"><div class="pull-right hidden-xs">Anything you want</div><strong>Copyright © 2016<a href="#"> Company</a></strong>All rights reserved.</footer> By going to you should now see a page that looks like this, or similar if you have deviated on theme or layout style: http://localhost:3000 That’s it. That is all of the files to copy, files to create and markup to add to give your application a layout that your individual controller action templates will render into. That wasn’t so bad, was it?

Integrating Bootstrap into Rails 5

Story so far, Apple and other options Apple I have been a happy Apple consumer for the last 7 years (2 laptops, upgrades, some accessories). Wonderful customer service once I needed it. Decided not to get another one from them for the following reasons: Repairability: Internal WiFi broke. Found out that (1) it is extremely rare and (2) difficult to fix. Repairability was not an issue in the past, but currently decided to keep laptops for as long as possible so it became a factor to consider. Closed systems and aggressive lock in. What I did not like from Microsoft in the 90s, Apple is forcing now (custom screws, screen sharing limited to apple TVs are two examples). Started getting fed up with the even changing charger adapters and having to spend lots of money for an adapter. The fact that you do not “own” the software but are licensed to use it (as I read it in the visualised terms and conditions here: , here for more: ) was the last straw. http://itunestandc.tumblr.com/image/132727649660 http://itunestandc.tumblr.com/ (negating the arguments above) having a machine already. I will keep the original machine so it can be used if necessary. Used Laptop Another option suggested by a hardware techie friend was to buy a cheap used Windows laptop and install my favourite distribution on top or dual boot. I did not want to try this because (1) there are no actual compatibility guarantees and (2) there are battery/hibernation issues. The compatibility argument (1) is a weak one because hardware is more or less supported these days, specially if not on the bleeding edge. There is the possibility though of something not working or not being supported well enough. Linux Something very common with this option is the battery/hibernation issues . It seems that — although I am no expert on the subject — hibernation and battery consumption is technically difficult and not all hardware plays well with Linux kernels. Having a laptop that needs charging every 2 to 3 hours, instead of saying 4, 5 or more is something that wastes electricity, strains the battery and also beats the rationale of having a laptop. For this reason the buy and install option was rejected. All these led me to look out for a Linux specific vendor. System 76 and other distributors was another consideration. Currently they ship to UK but was unsure of the possibility of having the shipment stopped at customs. Maybe a partnership with a local dealer or something like Amazon would help? System 76 Dell: I had investigated this option in the past. Generally I found Dell’s Ubuntu laptops pricey. Did not like the fact that being a generally available and popular brand, there was no place where I could touch a machine lift it and get a feel of it. This levels the field compared to other companies a lot since you buy in both cases something that you do not exactly know how it is until unbox time. After some months someone wrote a of the Dell XPS 15 experience here: . http://arstechnica.co.uk/information-technology/2016/03/dells-skylake-xps-13-precision-workstations-now-come-with-ubuntu-preinstalled/ review https://peteris.rocks/blog/my-dell-xps-15-review/ : Very nice idea, might consider them if a local (UK) manufacturer was not available. The idea of fixing the BIOS is a very clever one. Ministry of freedom Additionally: I was willing to pay more for a Linux first / Linux friendly computer. Needed a thin laptop which I could sit with in a sofa or take with me in a trip. Preferred to buy from a UK firm if possible circulating as much money as I could within the country and also giving a kudos to the local industry. I do not remember how the company surfaced to my attention, I think from this list: while evaluating all available UK options. http://linuxpreloaded.com/ Let’s hold our breath a bit Took a bit to be delivered. This is not a minus; From the order updates I understood that a person assembled the laptop then handled it over to someone else to install the software. After I saw the email explaining the handover to the delivery I remembered that Entroware’s site mentions that they ship within 5–7 business days not that the order should arrive within 5–7 business days. To make the story short, the machine arrived after 13 days. I did not need it immediately so the waiting did not cause any disruption. In the meantime I compiled a migration list from my previous machine: https://gist.github.com/dimitrismistriotis/f7a84f724a173640b30a Other things to do while waiting for your computer to arrive Looking around on the Internet was wondering which version of Ubuntu would be installed, what would the hardware experience be if I downgraded (it must be a version behind) to the latest .HOand do nothing. A factor that assisted me in this decision is reading the probably latest stable elementaryOS’s iteration does not support the current motherboard. elementaryOS Home screen after configuration First days of usage I started using the laptop starting by migrating my files and configuring it from scratch (I do that in every new system so that clutter will not persist between installations). After a week or so, I found myself having migrated most of my stuff organically, using my Entroware laptop instead of my Macbook more and more. Have not finished yet as my list still involves some copying. At some point I forgot about writing this review post realised that I had immersed into an experience that was one step ahead from the desired *”it just works”*. It reaches beyond doing a great job. After using it for a week as my main computer at home, I realised that Entroware’s Apollo is the laptop I always wanted to have and honestly never thought I would. It supports a high screen resolution without any issues, I can plug the HDMI cable to my TV monitor and see a video there (full screen). It is possible to fold it, move to a different room and then open it without everything stalling, this happens because hibernate works as expected, while the machine has a very good (maybe not perfect but nevertheless very good) battery autonomy. I found myself doing some Udacity classes followed by some word processing. I was holding the machine for some hours in my lap without feeling the battery area getting warmer and warmer which was my Macbook Linux experience. The chassis design is good without a large fruit glowing at the back and it switches on without a big TADAAA sound that needs hackery to become disabled. Bonus points: I know that if I want to upgrade one of it’s components I can unscrew the screws in the back and that’s it… with a regular screwdriver if anyone from Apple is reading this. Cool underneath Back of the laptop with normal screws and it’s first sticker. The only thing that felt clunky was the trackpad experience. Initially it is configured to be both single and double button at the same time. It’s top is acting as like a single click trackpad, while the bottom does left and right clicks… Counter intuitive, specially when there is a key that brings up the menus.I found myself sometimes using my mouse which I had almost thrown away. This issue was solved on with elementaryOS so maybe I should wait a bit more or try to dig deeper into Ubuntu’s settings. Other users and reviewers also did not like the trackpad, so I am not alone in this one. Also some times I clicked the pad accidentally while typing popping the pointer of the text to where the mouse pointer was pointing at the time. PITA. Conclusion Concluding we have a resounding ” ”. If you are a UK resident interested into having an open source software machine, go Entroware. As simple as that. yes 1–10 rank: 9 while I was over excited. I waited a month before posting this just to see if the initial feeling would wear off but I'm still excited so . 9 Follow up thoughts Is it too late for a Linux laptop? Probably. People have started shifting away from desktops, even laptops and the focus shifting towards modern tablets for creative work (Microsoft’s Surface, Apple’s latest iPads) and mobiles for consumption. Entroware might have entered an ever declining market in size. For what people like me that need to do web and general purpose programming with maybe some data wrangling or VMs/containers, it seems that most of the software needed has already been progressively ported to OS/X. Many people have migrated there probably without considering coming back. Remember reading recently that in some cases a Linux VM inside an OS/X host performs better with regards to energy consumption than an actual Linux installation. Obviously it has to do with Apple’s tight hardware/software integration but nevertheless for many people OS/X is their day to day OS and Linux if needed is a VMWare/Vagrant/docker stone throw away just to be closer to what their cloud provider uses. Maybe OS of choice for developers has shifted to OS/X creating an irreversible trend. The above opinion, is backed by StackOverflow’s 2016 data ( ). Specifically: *Last year, Mac edged ahead of the Linuxes as the number 2 operating system among developers. This year it became clear that trend is real. If OS adoption rates hold steady, by next year’s survey fewer than 50% of developers may be using Windows.* http://stackoverflow.com/research/developer-survey-2016#technology-desktop-operating-system The hope for local computer manufacturers, that old but not forgotten Linux promise. One promise of the open source movement that I had heard in the past is that by having a huge part of creating a general purpose computer — the OS — taken care of, it would be easier for local manufacturers to address needs specific to their audience. In other words produce machines that massmanufacturers could not do or are not willing to. We have seen some attempts failing such as FirefoxOS and some succeeding such as the Raspberry Pi. Although few have tried, Entroware’s attempts somehow revive this “dream”. Manufactured or at least assembled in UK, set-up with a EN/GB keyboard distributed and delivered locally. Probably there is a better value proposition for desktops or servers in SMBs that might need on-site support: what would be better for on-site support thanhaving the people that build the machines repairing them while being one phone call away? Things I would like to see Elementary OS and Recovery media. Got used to elementary, trying the latest Ubuntu at the moment. I actually do not know (I tried to ask the Entroware’s support) how to configure a machine from scratch, in case I ever want to change my hard drive or for any reason. Up to now I am not sure if a plain Ubuntu USB stick and a “click install” is enough or if something else is needed. Maybe a guide on the company’s blog would help. Would be good in case also for trying different distributions without risk. Other reviews http://www.jupiterbroadcasting.com/96836/entroware-apollo-linux-macbook-killer-las-406/ https://soundcloud.com/kevie-1/tuxjam-48-here-there-and-entroware e-shop link _With a brand new upgrade to Skylake, Apollo is better than ever. Grab your cutting edge Ubuntu laptop today!_www.entroware.com Apollo Top of machine against bank statement envelope — no glowing fruit… I am writing a book named “IT Archetypes” — a know thyself guide for the IT people, a know thy-friends guide for the ones that interact with them. Check it here: and sign up to the newsletter for updates on new chapters. http://www.itarchetypes.com

Stories, News & Mentions about MENUSIFU

Menusifu’s Stories on HackerNoon