Algolia | CSS-Tricks
Strategy

Algolia | CSS-Tricks


Algolia is for search. Literally any website can take advantage of Algolia-powered search. You put JSON data (“records”) in, and then you can search them at lightning speed. The magic of Algolia is that they help you with both of those things: getting data in and getting search results out.

As far as getting data in, there are all sorts of ways. The most likely situation is that you already have data somewhere and you just need to give it to Algolia. They’ve got great docs on that. You basically write an integration that updates Algolia as you update your own data. There are so many things to help with this though. Got a WordPress site? They’ve got a PHP API client and people have built plugins around it.

Got a Rails site? They have integrations for you. What about a Jamstack site? No problem, they’ve got a Netlify build plugin. So, for example, your Jekyll site can have great search.

One way, and I’ve used this myself plenty of times, is literally entering records manually. While manually typing in records isn’t particularly scalable, I like that it’s possible.

So that’s all the “getting data in” part. Now the fun part: building a search UI experience. Great news here too: there is lots of help to make this awesome.

The core of it is InstantSearch.js, which Algolia provides directly. That native version also has versions in React, Vue, and Angular (you could make it work with anything). Wanna see it work super quickly? Try their Create InstantSearchApp flow, which will spin up a search UI super quickly for you.

While you don’t have to use any particular library, I find them very easy to use, very flexible configuration-wise, and no problem to style. Wanna see? CDNjs has everything on it in an Algolia index, so here’s a Pen that connects to that and provides a search UI:

You can see in the code how I’m controlling the number of results, the template and styles the results are shown in, and what happens when a search result is selected. That’s powerful stuff.

This is just the surface of Algolia though. Algolia is a very mature platform with all kinds of bells and whistles you can take advantage of. You can tweak algorithms, you can dig into analytics, you can take advantage of AI, you can use it on native mobile apps… and all with real customer support along the way.



Source link

This is a terminal screenshot with a dark purple background with text in white green and blue. The content shows the final build after compiling.
Strategy

Lazy Load Routes in Vue with webpack Dynamic Comments


The way routing works in JavaScript is usually that you specify which relative URL pattern you want for which component to render. So for /about you want the <About /> component to render. Let’s take a look at how to do this in Vue/Vue Router with lazy loading, and do it as cleanly as possible. I use this little tip all the time in my own work.

A repo that includes everything covered in this post is available on GitHub.

You’ve probably seen Vue routes (URLs) like this:

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  { path: "https://css-tricks.com/", name: 'Home', component: Home },
  { path: "https://css-tricks.com/about", name: 'About', component: About },
  { path: '/login', name: 'Login', component: Login }
]

const router = new VueRouter({
  routes
})

export default router

That will load the <Home /> component at the / route, the <About /> component at the /about route, and the <Login /> component at the /login route.

That doesn’t do a very good job of code splitting though, since all three of those components will be bundled together rather than loaded dynamically as needed.

This is a terminal screenshot with a dark purple background with text in white green and blue. The content shows the final build after compiling.

Here’s another way to do the same, only with code splitting with dynamic import statements and webpack chunk names:

const routes = [
  {
    path: "https://css-tricks.com/",
    name: 'Home',
    component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
  },
  {
    path: "https://css-tricks.com/about",
    name: 'About',
    component: () => import(/* webpackChunkName: "About" */ '../views/About.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "Login" */ '../views/Login.vue')
  }
]

This is perfectly fine and doesn’t have any major downsides, other than being a bit verbose and repetitive. Since we’re awesome developers, let’s do a bit of abstraction to help, using an array that we’ll .map over.

const routeOptions = [
  { path: "https://css-tricks.com/", name: 'Home' },
  { path: "https://css-tricks.com/about", name: 'About' },
  { path: '/login', name: 'Login' }
]

const routes = routeOptions.map(route => {
  return {
    ...route,
    component: () => import(`@/views/${route.name}.vue`)
  }
})

const router = new VueRouter({
  routes
})

Now we’ve reduced the use of the component key by using the route name as param in the import function.

But what happens if we want to set the chunk name?

As far as I know, you can’t have dynamic comments in JavaScript without some kind of build step. So, we are sacrificing comments (webpackChunkName) in favor of having to write less code in this case. It’s entirely up to you which you prefer.

Just kidding, let’s fix it.

As of webpack 2.6.0 , the placeholders [index] and [request] are supported, meaning we can set the name of the generated chunk like this:

// ...

const routeOptions = [
  { path: "https://css-tricks.com/", name: 'Home' },
  { path: "https://css-tricks.com/about", name: 'About' },
  { path: '/login', name: 'Login' }
]

const routes = routeOptions.map(route => {
  return {
    ...route,
    component: () => import(/* webpackChunkName: "[request]" */ `../views/${route.name}.vue`)
  }
})

const router = new VueRouter({
  routes
})

Nice! Now we have all the power, plus dynamically loaded routes with named chunks. And it works with Vue 2 and Vue 3. You can check it out by running npm run build in the terminal:

This is the same terminal screenshot as before, but with three of the JavaScript built files highlighted with the words "Named Chunks" annotated beside them.
See that? Now the components are chunked out… and the build did all the naming for us!

Buuuuut, we can still take this one step further by grouping the lazy loaded routes into named chunks rather than individual components. For example, we can create groups that group our most important components together and the rest in another “not so important” group. We merely update the webpack chunk name in place of the [request] placeholder we used earlier:

const routes = [
  {
    path: "https://css-tricks.com/",
    name: "Home",
    component: () =>
      import(/* webpackChunkName: "VeryImportantThings" */ "../views/Home.vue")
  },
  {
    path: "https://css-tricks.com/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "VeryImportantThings" */ "../views/About.vue")
  },
  {
    path: "/login",
    name: "Login",
    component: () =>
      import(/* webpackChunkName: "NotSoImportant" */ "../views/Login.vue")
  },
  {
    path: "/contact",
    name: "Contact",
    component: () =>
      import(/* webpackChunkName: "NotSoImportant" */ "../views/Contact.vue")
  }
];

Now our four components are groups into two separate chunks.

The same terminal with different compiled JavaScript files.

There you have it! A technique for lazy loading routes in Vue, plus some ideas for how to name and group them together at build.



Source link

r/webdev - Suggestions on developing a multi directional selection table?
Strategy

Suggestions on developing a multi directional selection tabl…


I have to build some kind of multi direction table from the below design image:

r/webdev - Suggestions on developing a multi directional selection table?

How would you guys build it? Are there some kind of proven implementations how to best achieve this?

Or is it just straight out of the book a table with multiple checkboxes, e.g.

<table>
  <tr>
    <td></td>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>0</td>
    <td><input type="checkbox" name="item1" value="0" /></td>
    <td><input type="checkbox" name="item2" value="0" /></td>
    <td><input type="checkbox" name="item3" value="0" /></td>
  </tr>
  <tr>
    <td>1</td>
    <td><input type="checkbox" name="item1" value="1" /></td>
    <td><input type="checkbox" name="item2" value="1" /></td>
    <td><input type="checkbox" name="item3" value="1" /></td>
  </tr>
  <tr>
    <td>2</td>
    <td><input type="checkbox" name="item1" value="2" /></td>
    <td><input type="checkbox" name="item2" value="2" /></td>
    <td><input type="checkbox" name="item3" value="2" /></td>
  </tr>
</table>



Source link

Yo I just wanna share my recent T-shirt design for Kong vs Godzilla :>
Strategy

Yo I just wanna share my recent T-shirt design for Kong vs G…


Yo I just wanna share my recent T-shirt design for Kong vs Godzilla :>

submitted by /u/babulousbab
[comments]



Source link

Differences between single page application and multi-page application.
Strategy

What Is a Single-page Application (SPA)?


Single-page application technology has become the de facto standard for creating modern web applications today due to the numerous benefits related to loading times and user experience. Industry giants of the digital space that have already adopted this approach to web development include Facebook, Gmail, Google Maps, LinkedIn, and Netflix.

But is a single-page application framework the right one for your upcoming web project? In this blog post, I’ll set out what a single-page application is, its benefits, and when you should use it.

What Is a Single-page Application?

A single-page application (SPA) is a JavaScript framework for distributing application functionality over the web. The three most popular SPA tools are:

  • Angular: developed by Google and now almost ten years old);

  • React: created by Facebook a few years later;

  • Vue: developed by an ex-Google employee and which has enjoyed a surge in popularity over the past few years.

Prior to the introduction of single-page apps, applications were built and rendered on the server-side and delivered — fully formed — to the client device: as the user navigated through the application, each page was created from scratch and so required to be constantly refreshed, leading to a ‘flickery’ screen. Data-intensive web apps, which pulled data from multiple different sources, could also be slow to load.

With single-page applications, presentation logic is rendered on the client-side and the visual structure of the web app remains consistent for the duration of the session, with newly requested data being refreshed in the background. This provides a much smoother experience for the user.

Advantages of Single Page Applications

Here are some of the advantages of single-page apps that make this type of application so popular:

1. Loading Speed

The biggest single advantage of the SPA is speed. Numerous studies from Google and others have shown that slow load times will hurt user satisfaction, causing shoppers to abandon carts and reducing the willingness of visitors to come back to your site. Once the single page app is loaded, the amount of data traveling between the client device and the server is very small, so load times are minimized.

2. Straightforward Development

When developing a single page application, the server-side code is re-used and is effectively decoupled from the front-end UI. This means back-end and front-end teams can focus on doing their jobs without worrying about what’s being developed elsewhere.

3. Easy to Debug

It’s very easy to test and debug single page apps using the Dev Tools provided by Google in their Chrome browser.

4. Can Be Distributed As a Progressive Web App

Once created, the SPA can easily be distributed as a progressive web application (PWA) to deliver a very similar experience to a mobile app but with a massively reduced footprint. 

Single-page Application Vs. Multi-page Application

Differences between single page application and multi-page application.

Differences between single page application and multi-page application.

The traditional multi-page app (MPA) approach requires no JavaScript expertise within your development teams (although the coupling of front and back-end means that sites tend to take longer to build). You can scale the content as much as you want to simply by adding another page and, because the content on each page is static, Search Engine Optimization (SEO) is generally straightforward. On the downside, MPAs are much slower in operation as every new page is loaded from scratch. However, if your web content is (largely) read-only, then MPA may provide you with all you need.

As for single-page apps, their primary advantage is their speed, as I’ve already noted. In addition to that, SPAs are much better suited to exposing rich functionality than MPAs and they also cache information so the application can be used offline. The biggest downside of SPAs is that the dynamic nature of their content does make SEO and discoverability more complex. However, as more companies adopt SPAs, crawlers and search engines have been evolving to better deal with this type of app.

That said, it’s not really a case of single-page apps being better than multi-page apps or vice versa. Both approaches have their merits. It’s important to note, though, that as the web crawler and indexing issues traditionally associated with single-page apps are resolved, the advantages of MPAs over SPAs will start to fade, and the latter will indeed become the de facto standard for modern web apps.



Source link

BDMS.BK Quote
Strategy

Creating Custom Widgets Displayed in the Jupyter Notebook


Widgets are eventful python objects that have a representation in the browser such as sliders, Google charts, and Plotly charts. Widgets can be used to build interactive GUIs for your notebooks, synchronize information between Python and JavaScript, and display HTML elements in the Jupyter notebook. Jupyter notebook allows us to develop custom widgets to be presented in the Jupyter notebook.

In addition to Python and web technologies (HTML, CSS, and JavaScript) knowledge, there are three main things that we need to know before developing custom widgets.

1. Built-in Magic Commands

Magic commands are supported by the IPython kernel. They are prefixed by the % or %% characters. These magic commands are designed to solve common problems in data analysis and control the behavior of IPython itself. The magic command used to create custom widgets are:

  • %%html is used to render and define HTML templates and cascading style sheets for widgets
  • %%javascript is used to run the cell block of JavaScript code for widgets. Typically, it is used to create JavaScript modules and views for the widget front-end components

2. Traitlets

Traitlets is a framework that allows attributes in Python classes to support type checking, default values, and change events (observer pattern). Widgets use Traitlets to notify changes of the Python classes’ properties to JavaScript. Then JavaScript will update the HTML elements according to the changes.

3. Backbone.js

Backbone.js is a lightweight JavaScript library designed for developing single-page web applications. It is based on the MVC (model–view–controller) framework. The IPython widget framework relies heavily on Backbone.js for the front-end components. 

In the next section, I will use this knowledge including CSS bootstrap and jQuery to create a Quote widget displaying real-time financial data in the Jupyter notebook.

Quote Widget

Quote Widget is a widget that displays real-time financial data in the Jupyter notebook. 

BDMS.BK Quote

There are three steps to implement this quote widget. All code is written in the Jupyter notebook (QuoteWidget.ipynb). 

1. Python Widget Class

The first step is defining a Python class inheriting from the DOMWidget base class. The DOMWidget class defined in the ipywidgets package represents a widget that is displayed on the page as an HTML DOM element. 

The QuoteWidget class contains several traitlets properties. The _view_module, _view_module_version, and _view_name properties define the Backbone.js view class for the model. The payload, status, and name are the properties of the model. The name property contains the unique name of the quote widget. It represents a unique ID in the HTML DOM element. The status property contains a text representing the status of the quote widget. The payload property contains real-time financial data in the field list format.

 The data in the quote widget will be updated when the value of the payload property has been changed. The sync=True keyword argument tells the widget framework to synchronize the value to the Backbone.js front end. 

2. HTML Template

The next step is using the %%html built-in magic command to define an HTML template and styles of the quote widget. The template is defined inside the script tag with the text/template type. The ID of the template is quote-template. This template will be loaded by the Backbone.js front end. It uses the Bootstrap CSS framework to create a layout of the widget. 



Source link