teleren/devto huggingface dataset:
TB mega menu implementation with a demonstration (Part 2)
Tags: webdev, discuss, devops, drupal
Published: 2019-06-03 07:06:44

---
title: TB mega menu implementation with a demonstration (Part 2)
published: true
description:This is the second part of the blog where we demonstrate how to configure the TB mega menu, with examples. 
tags: webdev,discuss,devops,drupal
---
In the first part of this blog, we had completed the installation and had also created blocks for custom block types. In this part, we will see how to configure the TB mega menu so that we can get the structure of the menu ready as per our design.


Configuring the TB mega menu and placing the TB mega menu block in a region are two separate things.


The TB mega menu can be configured for an existing menu. So, you need to ensure that you have a complete hierarchy of menu ready before you begin the configuration. However, you can modify the links later on from the TB mega menu configuration page.

Defining a menu structure
 
If you already have a menu that you want to use then you are already a step ahead! If not, then go to /admin/structure/menu and click on the Add menu. Create the menu as you normally would.


For demonstration purposes, we will be using the below menu structure. Let the name of this menu be Example menu:


Parent 1

    -Child (1)

        -Child (1) content

    -Child (2)

        -Child (2) content

        -Sub child (1)

            -Sub child (1) content (This content will be displayed over the child (2) content)

        -Sub child (2)

            -Sub child (2) content (This content will be displayed over the child (2) content)

    -Child (3)

    -Child (4)

Parent 2

    -Child (1)

    -Child (2)

        -Sub child (1)

            -Sub child (1) content (This content will be displayed over the child (2) content)

        -Sub child (2)

            -Sub child (2) content (This content will be displayed over the child (2) content)

    -Child (3)

Parent 3

    -Child (1)

    -Child (2)

    -Child (3)

 Source Original: [Click Here!](https://www.innoraft.com/blogs/tb-mega-menu-implementation-demonstration-part-2)

Part 1 Link: https://www.innoraft.com/blogs/tb-megamenu-implementation-bean-module-part-1
Review of VeeroTech SSD Micro based on first hand experience
Tags: webhosting, cheaphosting, sharedhosting
Published: 2019-06-18 07:35:43

---
title: Review of VeeroTech SSD Micro based on first hand experience
published: true
tags: web hosting,cheap hosting,shared hosting
canonical_url: https://kevinhq.com/review-of-veerotech-ssd-micro-based-on-first-hand-experience/
---

Short term review based on the first-hand experience with VeeroTech SSD Micro plan, one of their cheapest shared hosting plan which price is close to

[Continue reading review of VeeroTech SSD Micro based on the first-hand experience](https://kevinhq.com/review-of-veerotech-ssd-micro-based-on-first-hand-experience/)

The post [Review of VeeroTech SSD Micro based on the first-hand experience](https://kevinhq.com/review-of-veerotech-ssd-micro-based-on-first-hand-experience/) appeared first on [kevin's tech blog](https://kevinhq.com).
TB Megamenu Implementation with Bean Module (Part 1)
Tags: webdev, discuss, devops, opensource
Published: 2019-06-03 06:48:11

---
title: TB Megamenu Implementation with Bean Module (Part 1)
published: true
description: Mega menu implementations that require you to have images, videos or texts for each of the respective links can be quite challenging. In this blog we discuss how to achieve this with TB mega menu.
tags: webdev,discuss,devops,opensource
---
**The world before TB mega menu**

The world as we know it did not always come with the TB mega menu for Drupal 7. Traditional menu implementations included writing the entire HTML and designing it as per the needs or using default drupal menu parallelly with other contrib modules to support different requirements This would often take days or even weeks to implement. Even after completion, the client may ask you to make changes and things may go haywire. Changing every HTML element is a daunting task! Another approach may be to use certain modules offered by Drupal to create a menu. The problem with this approach is that, though the menu might look simple, it would be a daunting task to make it completely configurable within a small time frame.


This is where TB mega menu comes in to save the world!


“TB Mega Menu allows you to create a mega menu with an innovative back-end user interface and synchronized with Drupal core menu.” - drupal.org

 

The TB mega menu gives the user an option for a completely configurable approach in terms of building a menu from scratch. Today we are going to discuss this implementation over Drupal 7. It allows the user to create a mega menu with images, text, video, using a block.


There is one dependency though that these things can be inserted via a block.


The installation and implementation are pretty straight forward but there are certain hairpins that can be the cause of a car crash if not carefully configured.

Original Source: [Click Here!](https://www.innoraft.com/blogs/tb-megamenu-implementation-bean-module-part-1)

Part 2 Link: https://www.innoraft.com/blogs/tb-mega-menu-implementation-demonstration-part-2
Angular Library with ng-packagr
Tags: angular, library, package, typescript
Published: 2019-06-03 06:31:58

---
title: Angular Library with ng-packagr
published: true
description: 
tags: angular, library, package, typescript
---


When you have a small application with three or more components, and they do not share a relationship among themselves when it comes to sharing data through component communication. For such components, we have seen the usage of services. Services come to be of great help when we have to use the same data in more than one components. This data is then used inside the component by using dependency injection.

This is when we have the components inside one module which contains the service. However, if we want to use the data from the service in multiple modules, a better idea is to put this data inside the service somewhere, from where you can actually import it in whichever module and component you wish to.

Now, this is about one application, what if you want maximum applications to use the same data and you definitely do not want to copy paste the code for each of your applications. Also, you do not want any of the applications to communicate with each other, but just share some data from an external source to all the applications.

That is when Libraries and packages come into the picture. In this blog post, we will see how to create an Angular library and what are the requirements to create one. When researching more about Angular libraries, I came across this great talk Create and publish Angular libs like a Pro by Juri Strumpflohner wherein he explains the need for a library with this image.

Read more here: https://nishugoel.wordpress.com/2019/05/12/angular-library-with-ng-packagr/
I just got a full-time position as a front-end webdev at the age of 35 in a broken corrupted banana country. Ask Me Anything :)
Tags: ama, frontend
Published: 2019-06-03 06:09:35

---
title: I just got a full-time position as a front-end webdev at the age of 35 in a broken corrupted banana country. Ask Me Anything :)
published: true
description: It's been made official!
tags: #ama # #frontend
cover_image: https://thepracticaldev.s3.amazonaws.com/i/jswh2s1tf45nw8uu81np.jpg
series: Career and other thoughts on working in the IT industry
---

As some of you know, I've been working as a front-end webdev for several months. And because it's my first time doing that work, there was kind of a "trial" period to see if everything works out... I'm happy to say that it did and that I'm now *officially* a regular full-time front-end dev, so - Yay! 🤗 ⠀
⠀
One of the (several) reasons why this is more of a big deal for me personally than it would be for, perhaps, some other people, is that I'm 35 years old. So, they are definitely right when they say that there's no such thing as a wrong time to do something!⠀

Another one is that, in my country (Serbia), having any kind of job is pretty hard, let alone a job you actually enjoy.
⠀
Looking forward to hearing from you, have a great day! 👋 ⠀
⠀
C# DateTime Subtract
Tags: csharp, tutorial, beginners
Published: 2019-06-18 15:19:42

---
title: C# DateTime Subtract
published: true
tags: csharp,tutorial,beginners
series: C# for Beginners
cover_image: https://wellsb.com/csharp/wp-content/uploads/sites/2/2019/04/beginners-datetime-subtract-min-1.png
---

Suppose you want to get the number of days between two dates, or the number of seconds between two times. In C#, you can use the method to compute the difference between dates and times. The method will determine the duration between two dates or times. More specifically, it will return a object which represents the difference between two objects. The syntax for using follows: In this case...

[Source](https://wellsb.com/csharp/beginners/csharp-datetime-subtract/)
What Is DOM
Tags: javascript, html
Published: 2019-06-09 10:28:17

---
title: What Is DOM
published: true
tags: javascript, html
canonical_url: https://maksimivanov.com/posts/what-is-dom/
---

DOM (Document Object Model) is a programming api for your HTML (or XML) documents. Basically it is an object representing parsed code of your page.

It has tree-like structure and allows you to traverse, access and modify its nodes.

You are probably familiar with DOM API methods:

```
document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)

// ... etc.
```

## Why Updating DOM Is Expensive

When you update DOM it can cause browser to run two expensive operations: **reflow** and **repaint**.

**Reflow** happens where there is a change to DOM layout. It calculates dimensions and positions of page elements. And it does it for every element and it’s children.

**Repaint** goes through elements and determines visual changes (opacity, color, outline, visibility) and then updates pixels on the screen.

> Because of how updating DOM is expensive - React is using technique called [Virtual DOM](https://maksimivanov.com/posts/virtual-dom).
Discussion on personal developer websites with large padding on desktops
Tags: discuss, webdev
Published: 2019-06-03 04:16:01

Hi all,

I was going through lot of developers personal sites. In most of them, I have observed that while browsing the site in desktop it has lot of padding on both sides, so much that even though I am browsing it on the desktop, I feel like I am reading it on a mobile device.

I understand now the whole web works on mobile-first approach. But I wanted to understand if it's a consequence of following mobile first approach or an intentional behavior.

If it is an intentional behavior, what could be the rationale behind it?

Please comment below
What challenges do you face with sketching? 
Tags: discuss, sketching, frontend, visualcommunication
Published: 2019-06-03 04:04:30

---
title: What challenges do you face with sketching? 
published: true
description: 
tags: discuss, sketching, front-end, visual communication
cover_image: https://images.pexels.com/photos/196646/pexels-photo-196646.jpeg

---

It can be a challenge to sketch in person or gain the confidence to sketch in front of others just to name a few. What are some of the challenges you face with sketching?
Why WordPress is for your project
Tags: internet, wordpress
Published: 2019-06-18 07:35:16

---
title: Why WordPress is for your project
published: true
tags: internet,WordPress
canonical_url: https://kevinhq.com/why-wordpress-is-for-your-project/
---

A long time ago, I wrote about When WordPress is not for your project. I explained several conditions and reasons why you can use alternatives…

[Continue reading why WordPress is for your project](https://kevinhq.com/why-wordpress-is-for-your-project/)

The post [Why WordPress is for your project](https://kevinhq.com/why-wordpress-is-for-your-project/) appeared first on [kevin's tech blog](https://kevinhq.com).
Why I move from WordPress to Netlify
Tags: internet, wordpress
Published: 2019-06-07 08:17:54

---
title: Why I move from WordPress to Netlify
published: true
tags: internet,WordPress
canonical_url: https://kevinhq.com/why-i-move-from-wordpress-to-netlify/
---

It’s not because WordPress is bad, or I hate it. In fact, I am a huge fan of WordPress, and I still consider it one…

[Continue reading why I move from WordPress to Netlify](https://kevinhq.com/why-i-move-from-wordpress-to-netlify/)

The post [Why I move from WordPress to Netlify](https://kevinhq.com/why-i-move-from-wordpress-to-netlify/) appeared first on [kevin's tech blog](https://kevinhq.com).
When WordPress is not for your project
Tags: internet, wordpress
Published: 2019-06-18 07:33:52

---
title: When WordPress is not for your project
published: true
tags: internet, WordPress
canonical_url: https://kevinhq.com/when-wordpress-is-not-for-your-project/
---

WordPress is currently the most popular CMS platform on earth. Not only use it as CMS or blogging, people often use it as a tool…

[Continue reading when WordPress is not for your project](https://kevinhq.com/when-wordpress-is-not-for-your-project/)

The post [When WordPress is not for your project](https://kevinhq.com/when-wordpress-is-not-for-your-project/) appeared first on [kevin's tech blog](https://kevinhq.com).
Website Feedback Request: Dark Mode vs. Light Mode 
Tags: css, html, webdev
Published: 2019-06-03 02:29:37

Hey all!


This is my maiden voyage here on Dev.to, and with it I'd love to gather some feedback from the community! I'm a freelance writer, and I maintain my own web presence in accordance. That website houses my portfolio, an introductory bio, and my qualifications. 

With the popularity of dark-interface design rising, I've decided to experiment with building a dark mode for my site. We're still in the concept phase, but I do think I have a great foundation here. That's where you all come in.

This site is very much copy driven, and thus readability is very important. I know white text on black can be visually jarring - thus the background isn't pure black, and the body text is a lighter gray. Hopefully this alleviates that issue. 

I'm not certain if there are better forums for this, but I'd really appreciate it if y'all could sound off in the comments!

*I'd like to pose two main questions:*

1) Do you have any specific feedback to make Dark Mode more user friendly?
2) Do you prefer **Light Mode** or **Dark Mode?**

Currently, I use `@media (prefers-color-scheme: dark)` to detect the system preferences. It's the easiest way thus far for me to design a working dark mode. Accordingly, the site will automatically load the appropriate design based on detected preferences. 

Here are two links to Imgur albums with the appropriate screenshots. If I'm totally butchering this posting process, also feel free to let me know (as this is the internet, after all):

[Website Light Mode](https://imgur.com/a/muxP91t)
[Website Dark Mode](https://imgur.com/a/3v1ITv1)

Thanks a ton! I look forward to hearing everyone's thoughts, and building an awesome user experience. 

Cheers, 
Tyler
Google had major outages on Sunday
Tags: news, google, devops, cloud
Published: 2019-06-03 01:35:07

## [👉 Google’s Cloud outage is resolved, but it reveals the holes in cloud computing’s atmosphere](https://techcrunch.com/2019/06/02/googles-cloud-outage-is-resolved-but-it-reveals-the-holes-in-cloud-computings-atmosphere/)

> Five hours after Google  publicly announced that it was working to resolve an outage in its Cloud computing network that had taken out a large chunk of Google services as well as Shopify, Snap,  Discord and other popular apps, the problem seems to be resolved.

Major hug ops to the folks at Google debugging and working hard on the weekend to resolve the issues. I can only imagine the difficulties of working through infrastructure problems of this magnitude.
Let's ACE them interviews!
Tags: discuss
Published: 2019-06-03 01:20:03

---
title: Let's ACE them interviews!
published: true
description: Wanna do mock interviews for practice?
tags: discuss
---

Just wrapped up a job interview and frankly, It couldn't have gone worse!

Two weeks ago, I decided that its time for another round of interviews. I like to do interviews even if I am not looking for a change. It gives me some confidence, keeps my head in the game and you never know, maybe I will find something better or learn something new.

Anyways, I got this technical phone interview with a problem-solving coding challenge. I noticed that I suck at those types of interviews the most! I feel like even the easiest coding challenge can be hard for me while someone is on the phone waiting for my answer and criticizing my every move!

Do you guys feel the same? Please let me know. Which part do you feel needs improving for you?

After I got over the interview. Now I am thinking **Practice makes perfect, right?** So I googled `Software development Mock/Practice Interviews`, But unfortunately I couldn't find any service that does that for free. All I could find were experts that offer it professionally.

Then I thought of the dev community, Maybe interviewers want to practice interviewing applicants, Maybe you just want to do it to keep your head in the game. Others have to prepare for their next interview or boost self-confidence. Maybe we can help each other.

What do you guys think? We could do it over discord or any other VOIP application. Please if you are interested, Let me know in the comments. Totally open to any suggestions on how to do this!

**Happy coding** 🔥🔥
The Best RSpec Extension for VSCode
Tags: ruby, vscode
Published: 2019-06-03 15:09:57

---
title: The Best RSpec Extension for VSCode
published: true
tags: ruby, vscode
canonical_url: https://vnbrs.com/best-rspec-extension-for-vscode/
---

Some months ago I used VSCode to write Go code and specs. The default Go extension for VSCode ships with a neat text explorer feature. Unfortunately, at that time, I searched for something similar for Ruby, but I couldn’t find anything.

Many thanks to [Connor Shea](https://github.com/connorshea), VSCode now has a similar extension working with RSpec and Minitest.

![](https://github.com/connorshea/vscode-ruby-test-adapter/raw/master/img/screenshot.png)

It’s built on top of the [Test Explorer UI extension](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-test-explorer), by [Holger Benl](https://github.com/hbenl). This extension provides an interface for running and visualizing your test suite directly from the editor. There are plenty of adapters for JavaScript, C, C++, Python and now Ruby.

I have been using the Ruby adapter for some time now, and it’s really improving my workflow. For me, it required a little bit of tweaking to make it work, but it was rewarding.

* * *

You can install this extension [here](https://marketplace.visualstudio.com/items?itemName=connorshea.vscode-ruby-test-adapter). And to save you some time, here’s my configuration for RSpec:

```
{
    "rubyTestExplorer.logpanel": true,
    "rubyTestExplorer.testFramework": "rspec",
}
```
Using GraphQL with Gatsby
Tags: gatsby, react, graphql, beginners
Published: 2019-06-03 14:18:58

---
title: Using GraphQL with Gatsby
description: In this video, we explore how GraphQL works and practice using it with Gatsby to query our content.
tags: gatsby, react, graphql, beginners
canonical_url: https://michaeluloth.com/gatsby-using-graphql/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/778pspncz5rvm7ke2w4z.png
series: Up & Running with Gatsby
published: true
---

This is the tenth video in our [beginner series](https://www.youtube.com/watch?v=jAa1wh5ATm0&list=PLHBEcHVSROXQQhXpNhmiVKKcw72Cc0V-U) exploring GatsbyJS and how to use it to easily build performant apps and websites.

In this video, we explore how GraphQL works and practice using it with Gatsby to query our content.

Check out the video below or [view the entire playlist](https://www.youtube.com/watch?v=jAa1wh5ATm0&list=PLHBEcHVSROXQQhXpNhmiVKKcw72Cc0V-U) on YouTube. 

Enjoy! 🎉📺

{% youtube IaorT4-efuU %}
Video: Learning what to ignore 📹
Tags: attention, focus, time, goals
Published: 2019-06-02 22:40:46

---
title: Video: Learning what to ignore 📹
published: true
description: With so much "stuff" competing for our attention, learning what to ignore can be a valuable skill. Instead of trying to do or learn everything, identifying what's important, focussing on that and ignoring the rest can make for more productivity and less stress.
tags: #attention #focus #time #goals
cover_image: https://thepracticaldev.s3.amazonaws.com/i/95ann91y70iahczixtyc.png
---
JavaScript30 coding challenge.The Road travelled.
Tags: javascript, html, css3, beginners
Published: 2019-06-02 21:56:36

---
title: JavaScript30 coding challenge.The Road travelled.
published: true
description: 
tags: JavaScript, HTML5, CSS3, beginners
---

Now my frontpage with GitHub Pages for JavaScript30 coding challenge looks like this:[vanillaJS-30days](https://dmitryvdovichencko.github.io/vanillaJS-30days/). 

![](https://thepracticaldev.s3.amazonaws.com/i/aajeoubnukyzmcf7cnxd.png)

Halfway passed. 15 challenges finished.For me, the most useful challenges were: 

[Type Ahead](https://dmitryvdovichencko.github.io/vanillaJS-30days/06-Type-Ahead/index.html) - knowledges for `fetch` API and `RegExp`

[Array Cardio](https://dmitryvdovichencko.github.io/vanillaJS-30days/07-Array-Cardio-2/index.html) - how to work with arrays in JS and use their methods.

[Custom Video Player](https://dmitryvdovichencko.github.io/vanillaJS-30days/11-Custom-Video-Player/index.html) - how to work with `video` API from JS

[Local Storage and Event Delegation](https://dmitryvdovichencko.github.io/vanillaJS-30days/15-Local-Storage-Event-Delegation/index.html) - how to work with local storage in JS, in the case of storing some data from page.
iPod Touch 7th Gen - Made for Devs?
Tags: ios, swift, xcode, flutter
Published: 2019-06-02 21:49:21

I don't know why I'm talking about the iPod in 2019. Since WWDC is tomorrow and the recent refresh of the iPod lineup I thought this would be the best time to talk about it.

TL;DR
The iPod is a great, cheap, throwaway iOS development device

![](https://thepracticaldev.s3.amazonaws.com/i/0btmp1jrisce1t65j7t2.png)
*Yeah... It looks pretty ugly (source: 9to5mac)*

If you haven't heard about iPod 7, I don't blame you. It's a cheap device that runs and will run the latest version of iOS for the next few years. And no, it's not $750 cheap, it's dirt cheap. Starting at only $199 (even cheaper with promos) you get the flagship iPhone like experience .... from 2016. Yes, in 2016. It features the same A10 Fusion chip which is also featured on the iPhone 7. But hold up, all this makes sense. Especially for iOS and Flutter devs. Flutter, unlike iOS devs, might not own an iPhone themselves but now they do. The iPod touch isn't fast in any means but who cares when it's only going to run a few of your development app builds anyway. Sales charts from the statista.com show that iPhone sales are declining presumably because most consumers are using older iPhones since they still work perfectly fine. It is important to note the whole smartphone market is noticing this downtrend Apple isn't alone. And since the iPod touch features older internals, you can test your app in a way many of your users will use it in the real world. 

What are your thoughts on this? Are you a Flutter dev who uses Android? Leave your thought down below!

P.S: This was kinda a thought experiment, I never knew I would actually write up a post

Sources:
https://www.statista.com/statistics/263401/global-apple-iphone-sales-since-3rd-quarter-2007/