One learns the basics of Vue.js by building a product page in the great (and free) introductory course of Vue Mastery. The demo app includes typical web-shop features, like variations, availability, reviews, etc. And it is possible to add items to the cart too.

The app lacks a cart content display however. So I thought it would be great to create a component for that as an exercise in what has been learned by the course.

See the finished demo here: https://vue-store-page-demo.netlify.app/

Let’s dive in: create the new Vue component

The first step is creating the new component. Let’s do that in main.js.

Vue.component('cart-content', {
template: `…

In a recent project I wanted to use the Tippy.js library in the custom Drupal 8 theme I was working on. While I knew most of the things needed to do this in theory I did not know how I should do it step by step in practice.

Unfortunately, I did not find one resource which would have told me what to do. But I found several different resources with partial information and by using them I was able to figure out a working solution. Here it is:

Add the third-party JS lib to your theme.
You can use your…


The thing: as a web developer you want to use a certain technology but you have to support IE — which has never heard about that fancy solution…

To give you an example: modern browsers can place items below each other in the same CSS Grid column creating implicit grid rows. Although IE supports ( the early version of ) CSS Grid, it can’t do that.

Fortunately, Autoprefixer can help a lot in making a CSS Grid layout work in IE. But it doesn’t do everything. For example, it can’t solve the placing problem mentioned above: “The most important thing…


Szubjektív összefoglaló az európai konferencia legemlékezetesebb pillanatairól

Számomra a konferencia legjelentősebb momentuma az, hogy — különféle szakmai eseményeken tartott előadásokkal a hátam mögött — Bécsben sikeresen debütáltam DrupalCon előadóként is! A CSS Grid-ről és CSS Variables-ről tartott bemutatómra csordultig telt a 200 fős terem, és nem csak az érdeklődés maradt meg, de a (nyilvános és privát) visszajelzések is szívet melengetően pozitívak voltak!


Automatic Ribbon Cutting Scissors by jayahimsa from https://www.flickr.com/photos/49822796@N00/4928869326

No long introduction, no long explanation just the steps in a short list as a reminder (and maybe as a little help for others).

  1. Install and enable Crop and Image Widget Crop Drupal modules.
  2. Create a new crop type (/admin/config/media/crop) based on the image style you want to add the crop to.
  3. Add a manual crop effect to your image style (/admin/config/media/image-styles/manage). Select the crop type you’ve just created and after adding it set the manual crop as the first effect applied to the image!
  4. Add the crop type you’ve just created to the list of the available crop types…

https://www.flickr.com/photos/kecko/15174912056/

Displaying different dates here and there in a site is a common task. Let’s see some examples how to handle it in Drupal 8 Twig!

During this tutorial we will work in the page.html.twig file. Of course I do not have to say that you have to have your own custom theme and your own page template there… :)

Display copyright message with auto updating end date

Let’s start with a simple task: display a copyright message in which the end date updates automatically. All we have to do is adding this short code to the template.

Let’s see what happens here! The first part is just…


https://www.flickr.com/photos/dopefishjustin/4895486029/

Twig templates of Drupal 8 makes our life much easier when we want to customize the HTML output. But when the goal is to change a Drupal 8 menu we have to use the menu.html.twig template which is not the most friendly one and it’s customization can be tricky because of several reasons. So I wanna show you how I did it.

Goal

Change the HTML output from this…

HTML output sample of a Drupal 8 menu without using any template / base theme

…to this…

Drupal 8 menu HTML has BEM style CSS classes when we use our own menu.html.twig template

…so we can keep our CSS specificity low and our CSS component easy to write and maintain.

Let’s start it!

Originally I published this article here on Medium. But later I decided to move it to my own blog. You can continue reading at thamas.hu!


https://www.flickr.com/photos/pepej/15264250329/in/pool-drupalconamsterdam

If you wonder that I call myself this name you have not seen Dries’s Amsterdam keynote yet probably. Being “George” means to be an active contributor of Drupal. And being a mentor is a special case of contributing when you help others become “George”. That is what I did first time at DrupalCon Amsterdam.

Preparing

After signing up but before DrupalCon I just collected some information about this “mentoring thing”. The real “work” started in Amsterdam at the mentor orientation session. …


https://www.flickr.com/photos/borisbaldinger/15368972256/in/pool-drupalconamsterdam/

That feeling! Walkin’ through the square in front of Amsterdam RAI, the venue of this year’s DrupalCon (Europe). Getting closer to the entrance by every step and to know that I’m part of a good thing! This was my morning treat today.

I do not want to be pathetic, but it is really great.

While our CEO, @Kulcsi attended the business summit we (@juhasz, @csakiistvan and me) joined to the sprints. I seated in the front-end group, as I used to do in other Drupal events.

Postponed

The first result of my sprinting was an issue I had to write in…


Based on the practice I have formulated through my own work, I have compiled a quick checklist on the tasks and settings that need to be performed or are worth checking before going live after completing the development of a website.

  • Setting the (non-)usage of www prefix – htaccess
  • Setting the file upload limit if necessary
  • Setting the regular database backup (e.g Backup & Migrate)
  • File system settings (public / private – B&M requires it too)
  • Performance (caching, CSS / JS aggregation)
  • Turning off PHP error messages
  • Turning off unnecessary UI modules
  • Turning off modules only used for development, if…

Tamás Hajas

Dad. Husband. Guitar Player. Front-end Developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store