DEV Community: lorrydriveloper

Solving the Challenge of Connecting Stimulus Controllers Inside Shadow DOM

lorrydriveloper — Fri, 21 Jun 2024 10:10:40 +0000

Introduction

As web development evolves, combining powerful frameworks and technologies can lead to interesting challenges. Recently, I encountered such a challenge when trying to connect a Stimulus controller to an element within a Shadow DOM. After some troubleshooting, I found a solution and I’d like to share how I made it work.

What is Stimulus?

Stimulus is a modest JavaScript framework designed to enhance static HTML by adding behaviors through controllers. It allows you to create controllers that connect JavaScript behavior to HTML elements using data attributes. Think of it as the "HTML first" approach, where you keep most of your application's state and behavior in the HTML.

Here's a simple example of a Stimulus controller in action:

HTML

<div data-controller="hello">
  <button data-action="click->hello#greet">Click me</button>
</div>

JavaScript

// hello_controller.js
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  greet() {
    alert("Hello, Stimulus!");
  }
}

// application.js
import { Application } from "@hotwired/stimulus";
import HelloController from "./hello_controller";

const application = Application.start();
application.register("hello", HelloController);

Key Concepts of Stimulus

Data Attributes:
- data-controller: Specifies the controller name to attach to the element.
- data-action: Specifies the event to listen for and the method to call. The format is event->controller#method.
Controller Methods:
- Methods in the controller are called in response to events. In the example above, the greet method is called when the button is clicked.
Target Elements:
- You can define target elements within your controller using the data-target attribute and access them in your controller code.

For more information on Stimulus, you can refer to the official documentation.

The Challenge: Integrating Stimulus with Shadow DOM

When integrating Stimulus with Shadow DOM, the main challenge is that Stimulus typically operates within the light DOM. By default, it tries to get the element by a selector using querySelector or another strategy, assuming the root is the HTML unless specified otherwise.

Here’s a simplified version of the problem:

HTML

<!-- Other HTML -->
<greeting-component>
  #shadow-dom
  <div id="root" data-controller="hello">
    <button data-action="click->hello#greet">Click me</button>
  </div>
</greeting-component>
<!-- Other HTML -->

When Stimulus tries to find the element, it effectively runs this.element.querySelectorAll(selector). However, since the controller's selector is inside a Shadow DOM, it’s not visible from the top level, and thus, the controller never gets connected.

The Solution

The solution is to register the Stimulus application within your web component's Shadow DOM. Here’s how you can do it:

Web Component Definition

import { Application } from "@hotwired/stimulus";
import HelloController from "./hello_controller";

class GreetingComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });

    // HTML structure of the shadow DOM
    this.shadowRoot.innerHTML = `
      <div id="root" data-controller="hello">
        <button data-action="click->hello#greet">Click me</button>
      </div>
    `;
  }

  connectedCallback() {
    const application = Application.start(this.shadowRoot.querySelector("#root"));
    application.register("hello", HelloController);
  }
}

customElements.define('greeting-component', GreetingComponent);

Explanation

Import Dependencies: We import the Application from Stimulus and our custom controller.
Define the Web Component: We create a class for our web component extending HTMLElement.
connectedCallback Lifecycle Hook:
- We start the Stimulus application within the Shadow DOM by querying the root element inside the Shadow DOM (this.shadowRoot.querySelector("#root")). This is important as this.shadowRoot itself is not a valid node for the Stimulus application.
- We then register our controller with the Stimulus application.

This approach ensures that the Stimulus controllers are connected to elements within the Shadow DOM, making them accessible and functional.

Considerations

The setup and lifecycle of your web component might affect how you access and manage the Stimulus application and controllers.
Ensure that your custom elements are properly defined and attached to the DOM before trying to start the Stimulus application and register controllers.

Conclusion

Stimulus controllers are a powerful way to add behavior to your HTML in a clean, modular fashion. By understanding the basics of controllers, data attributes, actions, and targets, you can create interactive web applications. Integrating Stimulus with Shadow DOM requires some additional steps, but it allows you to leverage the benefits of both technologies effectively.

I hope this solution helps you as much as it helped me. Feel free to share your experiences or any improvements you discover along the way!

Mastering Fundamentals

lorrydriveloper — Wed, 09 Sep 2020 09:20:55 +0000

I know this title can be a bit of click-bait, but this post is for references to myself as well to force me to dig more on the fundamentals of programming but wait...

What are the Programming fundamentals?

I know that this can be a silly question if you don't think deeply on it. I have been thinking about this for a while because the main advice for junior devs over and over is to learn and Master fundamentals but, is there a clear view which the fundamentals are?

What I mean is that the fundamentals in javascript are the same as the fundamentals in Python or C#. I don't think so, of course, they all have a lowest common denominator, and that is what I will try to achieve during this series of posts focused to those concepts that you may have a clear overall vision but do you understand them deeply?

What this series will focus?

From my understanding and I'm more than happy to hear your opinions and talk about it, at the end this post is more about to learning than to teach so, please feel free to comments if you think my vision is incorrect.

I will focus on the three languages I know Javascript, Python, and Ruby.

Variables and the difference between languages
Conditional code.
Loops, what is happening underneath and its types.
Built Data types on each language.
Functions/Methods release all its power.
Programing Paradigms.

I think this is more or less what all languages have in common, so I think those are the Programming Fundamentals.

Are you Agree? Should I add, delete something? Please comment and help me to understand and structure this series for future references.

Flatiron Network

lorrydriveloper — Thu, 02 Jul 2020 14:55:28 +0000

My Bootcamp Final Project

Github Repo

LIVE DEMO

Today's post is about the last project for Flatiron Bootcamp can you believe how far I have arrived in that short amount of time?
You might remember my last post, where I talked about the idea I had in mind and the partial solution.
Today I'm presenting to the community a starting point to an app for the community by the community. This is an MVP because, as you can understand, the time to finish this project is shorter that the app will need to become something awesome and beneficial.

The Problem I Trying to solve.

You might remember that I talked about the problem in my previous post. I have noticed that the problem may is deep that only connect people on social media, what about networking where is important, in tech meetups and meetings near you. I think that it can be overwhelming for some people to go to these events by themself, but what about if you can find someone near you that you share the fact that both are in Flatiron? You will be more likely to go with somebody that is in the same situation as you and no feeling to be all on one's own.

The App

For this app, I have use material UI it's not a kind of preference or anything like that. I just wanted to learn something new at the same time as creating a well-know design. A good starting point to the Design community a plain start point to deploy its creativity.
Yes, I said the Design community because I would love to see all the branches of the Flatiron community involved in this project, Engineers, designers, data scientists, and cybersecurity. There is a space for everyone in this project, and I would like to see implemented that new awesome features, infographics and data visualizations with the users' data or have an eye-catching design, protect the user's data ...etc

CSS on React, YES or NO?

I haven't a strong opinion on this, but I thought for the project can be comfortable that everything is isolated, so if you want to do something with a component style, you don't have to fight with side effects on other ones. Still, I'm open to discussing this if needed.

What I have implemented so far.

As I said, I have myself a lot of good ideas to implement, the ones I have implemented are:

The Home page

Here I have implemented basic features using the dev.to API to display the most popular articles on the last week and with the coordinates of the user a basic weather widget.

The Map page

Thanks to the good habits I have acquired of making code reusable I was able to bring the map class from my previous project to speed up the project with minor change but some of them interesting like:

or the new way to filter by cohort, campus, or course that was a good challenge me:

Tip: Do you know that setState() can take a callback when it finishes setting the state.

The Networking page

This is just a concept in progress for two main reasons:
CORS and because the Meetup API is a paid one, so I haven't had the chance to spend a lot of time trying to solve this because time is something I haven't had to finish everything.
I have tried to find alternatives, but there aren't solid ones out there.

The results I'm displaying are the ones that the API Console returns when you play with it.

The Profile page

Here is where the user can add its social media and update its information. The Company is still something to implement as I would like to display companies on the map with its employee, but it is something that, but I have to give another thought.

Final Conclusion

This is a good start point to start contributing to the open-source community. You don't have to try to improve React or other complicated things. This app and me, I'm here to make you comfortable and no to blame or point you; we all have been in the same position, so I will be on your side.

And that's it, my Bootcamp has come to an end, and I hope it is returning something to this magnific community. See you all on the Open Source Community.

𝙏𝙝𝙚 𝙀𝙣𝙙 𝙤𝙛 𝙩𝙝𝙚 𝙛𝙞𝙧𝙨𝙩 𝙨𝙩𝙚𝙥 𝙤𝙛 𝙖 𝙡𝙤𝙣𝙜 𝙡𝙚𝙖𝙧𝙣𝙞𝙣𝙜 𝙟𝙤𝙪𝙧𝙣𝙚𝙮.

Rails API and JS Flatiron Project

lorrydriveloper — Thu, 28 May 2020 14:23:01 +0000

Flatiron Network

Github Repo

Video Demostration

Today's blog is about the last project I have created for the Flatiron Curriculum. It's the first time I have worked with JS more in deep more than a few DOM manipulations in previous projects, and I have to say I fell in love with it. I don't know why people blame the language when it is compelling and powerful. I love the functions as first-class they are powerful, the Prototypal inheritance, and the closures and its implication. Most of us feel like JavaScript is "Weird" and all those things. Still, when we start to learn Ruby and later Ruby on Rails when we have a doubt or something, it was entirely reasonable that you went to the documentation and looked at what do you want to accomplish. I guess that you don't even know that there is an official documentation/specification for JavaScript apart of if you even use, the MDN that it is an excellent resource.
With all that say, I'm going to introduce my project.

The Problem

I always thought that it is not easy to find Flatiron Grads
to share its knowledge and advice. There are a lot of social media with different habits for each individual, some like more Facebook over Twitter (or vice versa), or they prefer Instagram or Slack, or they are Strong on LinkedIn or YouTube. Still, none are on the same page, and you don't know who was doing the same path as you some the advice of a Data Science sure doesn't apply for aUX/UI designer and so on.

The Partial Solution

OK, OK, I know this is just a partial solution, but it has a good reason for that. I only implemented some of the solutions that a more sophisticated app will need, and this is just proof of concepts for a maybe multidisciplinary and complex App, where more Ux/UI could be involved(I want to seek collaboration some of the UX/UI Design London's students to work together)

The implementation so far.

As I said, this is more a Playground project where I worked
to get used to new technologies. Like Geolocation and Geode coding, JavaScript and Google Maps and Google Dev Console, and my loved Ruby on Rails as API, if before I was in love now, I'm married with a mortgage, three children and a dog, hahaha.

First, as always, Rails make things super easy and quick,
set up a new API backend only cost you a few seconds and a line on the terminal to make it alive.

rails new {Your project name} --api --database=postgresql

The second flag --database=postgresql is to use as DB
PostgreSQL as by default Rails use SQLite3 what is perfect for Development, but it can be a pain when it is time to Deploy, for that reason I always recommend go with PostgreSQL because it will be easier to deploy when is time to so.

In the beginning, I got overwhelmed by the problem and its
magnitude. I always feel like that when I start a project and even more when
new technology where I'm not confident is involved, so my friend Impostor
Sindrome still appears, but I had been taught well, so I always break down the problem in small pieces, and easy to accomplish.

I would like to explain how I solve the Geolocation problem,
and it's integration with Google Maps. First, the gem I used is called Ruby
Geocoder and can be used with ActiveRecord what it makes super convenient for our problem. Early in your model migration, you should have a column for
Latitude and Longitude and, of course, the pieces for an address. For this
project, I just use the user given address for the Geolocation. Still, it can
use IP, or event the 'Plus Code' that Google Maps provides you for any location.

You don't need to configure lots of things to make it work, but you can use different lookups providers; to keep it simple, I don't go to dive on it. what you need next is to geolocate by the given address, and that is done easily with ActiveRecord:
in your #app/models/YourModel.rb you should have this code.

geocoded_by :address
before_validation :geocode
validates :latitude, :presence :true

The documentation says after_validation :geocode, but I
noticed that it can end on lots of no geolocated addresses in your DB. What is
not really what we want, so I think it is better to be sure that only
well-formatted data is saved on DB, if not alert to your user to use a more
general address that can be geolocated.
But wait, geocode_by :address what that comes. Well, it is a method you should create for your class instance to join all the pieces of and address to a searchable string like this:

  def address
    [street, city,postcode, state, country].compact.join(', ')
  end

We are now sure that we are saving our well-formatted data
on the DB, so it's time to move to the Frontend and the Google Maps.

The Map

To be honest, I was scared to work with google maps, and it's API as I have the mental model that it will be difficult and you have to be a professional developer to do so, far from reality.
First, I create a module on my frontend/modules/ called map.js where after I create a class method to display the map on the DOM.

Before anything, you should have config your Goggle Dev console and enable Maps JavaScript API and have a valid API and add this script to your HTML

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>

First, I create a module on my frontend/modules/ called map.js, where I created a class Map and its methods to display the map on the DOM.

  class Map {
  static map;
  static markers;
  static init(gradsArray) {
    this.map = new google.maps.Map(document.getElementById("map"), {
      center: { lat: 35, lng: -50 },
      zoom: 3,
    });

    this.markers = gradsArray.map(this.createMarker);

  }

  static closeMarkers(map, markers) {
    markers.forEach(function (marker) {
      map.zoom = 7;
      marker.infowindow.close(map, marker);
    });
  }
  static createMarker(grad) {
    let icon = {
      url:
        "https://coursereport-s3-production.global.ssl.fastly.net/rich/rich_files/rich_files/999/s200/flatironschool.png", // url
      scaledSize: new google.maps.Size(18, 18), // scaled size
      origin: new google.maps.Point(0, 0), // origin
      anchor: new google.maps.Point(0, 0), // anchor
    };
    const infowindow = new google.maps.InfoWindow({
      content: HTMLBuilder.gradCard(grad),
    });
    let marker = new google.maps.Marker({
      position: {
        lat: grad.latitude,
        lng: grad.longitude,
      },
      map: Map.map,
      title: grad.name,
      infowindow: infowindow,
      icon: icon,
    });
    marker.addListener("click", function () {
      Map.closeMarkers(this.map, Map.markers);
      infowindow.open(this.map, marker);
    });
    return marker;
  }
}

export default Map;

It's less code that what I expect to make it works and I going to break down and explained.
First, the class only have three methods and two class variables.

The method init is the responsibility to create the new instance map with nothing on it as you can see here

this.map = new google.maps.Map(document.getElementById("map"), {
      center: { lat: 35, lng: -50 },
      zoom: 3,
    });

The first parameter the Map constructor takes is where to render the new map instance, and the second is an object of options. Where I just centre the map on with the coordinated of the middle of the Atlantic ocean to be able to see America and Europe and the zoom that is valued from 1 (all world) to 15 (street) and then creates the markers for the given array of objects passed as an argument whit the class method createMarker

 static createMarker(grad) {
    let icon = {
      url:
        "https://coursereport-s3-production.global.ssl.fastly.net/rich/rich_files/rich_files/999/s200/flatironschool.png", // url
      scaledSize: new google.maps.Size(18, 18), // scaled size
      origin: new google.maps.Point(0, 0), // origin
      anchor: new google.maps.Point(0, 0), // anchor
    };
    const infowindow = new google.maps.InfoWindow({
      content: HTMLBuilder.gradCard(grad),
    });
    let marker = new google.maps.Marker({
      position: {
        lat: grad.latitude,
        lng: grad.longitude,
      },
      map: Map.map,
      title: grad.name,
      infowindow: infowindow,
      icon: icon,
    });
    marker.addListener("click", function () {
      Map.closeMarkers(this.map, Map.markers);
      infowindow.open(this.map, marker);
    });
    return marker;
  }

This method looks complicated but is straight if you think about it:
First, the method takes as a parameter and object which should have latitude and longitude if we don't want to use a custom icon either have a window that opens when clicking you only have to create a new marker instance.


  let marker = new google.maps.Marker({
      position: {
        lat: grad.latitude,
        lng: grad.longitude,
      },
      map: Map.map});

and return it, but because we want to customize a bit, we can add these options to the object marker:


   title: grad.name,
   infowindow: infowindow,
   icon: icon

the title can be a string that in my case is the name of the grad name the icon is created here:

  let icon = {
  url:"YOURURLIMAGE",
  scaledSize: new google.maps.Size(18, 18),
  origin: new google.maps.Point(0, 0), 
  anchor: new google.maps.Point(0, 0)};

You can use the same code and only change the Url and the size to make your icon bigger or smaller, and the InfoWindow is created here previously like this:

const infowindow = new google.maps.InfoWindow({
      content: HTMLBuilder.gradCard(grad),
    });

Where content can be a plain string or a template string with HTML inside, what is what I did to display the grads cards on it.

   marker.addListener("click", function () {
     Map.closeMarkers(this.map, Map.markers);
     infowindow.open(this.map, marker);
    });

Finally, we add an Event listener with this build method, that on click opens the infowindow. Ant that's it you have working a beautiful map with custom markers and highly reusable as you only have to pass an array of object to render a new map with new markers on it.

Thanks for reading and Happy Coding.

SINATRA at The MVC stadium

lorrydriveloper — Tue, 10 Mar 2020 17:37:46 +0000

This is my first full-stack project I ever I did, well I notice that from now on I will have a lot of first times as when more a learn more I see what little I know, and I love it because I always liked the challenges and be out of my comfort zone.

This project has been really challenging to me in the V of the MVC, and I will explain later why and what V means.

You can watch a demostratrion YouTube video
and the code at GitHub

Let' start with the M

M from Model and the first pillar of useful web and the internet itself on, in other words, THE DATA

This part is the one I enjoyed the most, where I feel more comfortable and what I like the most. For that reason and how you can see I create a complex relationships between 6 different models and it is open to extension and ask data between models but that wasn't the project requirements, so I kept it as simple as my brain let me.

I used custom validations, ActiveRecord ones, has many, belong to, many to many, and so on.

C from Controller or the part of the web that connects the M with the V with some validations and other stuff.

This part has been fun too I always thought have hacker soul of at least I like to believe that hahaha.

So y tried to protect my View and data from people that are not allowed to do things in my app and not only from the front-end part, if not as well sending PATCH, POST, DELETE from external sources like POSTMAN.

I broke and fixed my app at least a hundred times, and I'm not 100% sure that is right but as I say before, when more I learn more I see what little I know.

One Controler to rule them all,
one Controller to find them,
One Controller to bring them all
and in the View bind them.

Well, I needed four, but in the end, all goes to the ApplicationController so ...

And I add I little bit of salt with flash messages and two easter eggs I hope you can find (they are not difficult).

V for View or how a letter can give you a lot of headaches

The views itself are not a problem, and I like to think about how to render what depends on the actual user but...

I have never been a person who has been good at drawing or creativity, I am not able to distinguish two types of blue if they are close in the RGB range, so I always knew it is going to be the most challenging part and where all my effort has to be the max to make the best I can.

Whit that says I make A LOT of mistake, every time a change something somewhere breaks, I write A LOT of bad CSS and repeating my self. I am not happy with my code at all, but I HAVE LEARN SO MUCH, so I'm pretty sure I am going to be able to implement that new knowledge and experience in the future projects and my life in general.

Learn How to Learn to Code (part 2)

lorrydriveloper — Tue, 21 Jan 2020 13:39:02 +0000

More about Diffuse and Focus Mode

To have new ideas and resolve problems is crucial not only concentrate at the beginning, if not as well leave to have attention to what we are learning. I know it is strange and could sound not appropriate, but you will understand when to do it and why it is essential.

For the most, the change between diffuse mode and focus mode occurs naturally, when getting distracted and leaves past a small-time.
Walk, going to the gym o any activity that liberates the conscient brain part. This can take even hours(if don't use specific tips) o what I like to call BDW, Bed, Drive, Walk (this differs for each person) but basically any relaxing activity than help you start your autonomous mode(more about this soon).

Maybe after that relaxing session, you may see how quick and easy the solution appears, of course, not without a previous work in focus mode.
That "EUREKA" moment is one of the small pleasures of life(at least for me).

But don't expect that walking, going to the gym, or sleeping to teach you something. It is the alternation between both modes that will finally give you the expected result.

To maximize your learning, do small study sessions instead of long and tedious ones, even when you are resting o doing other things your diffuse mode is still working in what you were concentrating/studying. Don't worry if you think you are never in that mode. Everyone does; It is the default mode of the brain.

Making a simile between study and the gym, lifting weight all day is not going to help you to grow your muscles, as those muscles need time and rest between sessions to develop bigger and stronger in a long way. The persistence in time is the key to everything!

General triggers of the diffuse mode:

Go to the gym.
Play football, basket or any similar sport.
Run, walk, swim.
Dance.
Go by car or public transport (driving or as a passenger).
Draw or paint.
Have a shower or bath.
Listen to music, especially instrumental
Play songs that you know well.
Meditate or pray.
Sleep (the diffuse mode definitive!)

Other general triggers of the diffuse mode to use with caution or as a reward(max 10 min). Because it can take you to a new focus mode.

Play videogames.
Surf the web.
Talk/messaging friends.
Read a book.
Watch Tv.
Help others in a simple problem (in my case help my daughter with homework.. the easy ones Jajaja).

Tip

Do not compare yourself with others; take the time that you need to understand the new concepts. If you want to put yourself at the same level of others, you won't dedicate enough time to dominate the matter, and you will finish even more lagging, or simply you will finish leaving because of your frustration and the feeling that you are not good at this.

Everyone has its own pace!

Aprende ha aprender como programar.

lorrydriveloper — Sun, 12 Jan 2020 21:45:01 +0000

Quiero compartir algunas ideas sobre el libro que leí recientemente, Abre tu mente a los numeros y su Curso en Coursera, y consejos útiles para aprender a programar o cualquier cosa que re propongas.

En primer lugar, esta publicación es un vistazo rápido a asuntos y conceptos complejos. Consejo
La lectura previa de cualquier lección o artículo (1 a 2 minutos) en busca de encabezados, preguntas o información antes de leerlo más en profundidad lo ayudará a crear una estructura que luego se llenará con el contenido. Introducción a los modos enfocado y difuso

Permítanme hacer una analogía entre el cerebro y una computadora con un navegador web.
Digamos que el modo Enfocado es el historial del navegador web de su cerebro, si realiza la consulta correcta, le devolverá un montón de enlaces a sitios web de "Asi se hace" ... Siempre que ya conozcas esos sitios web.

En cambio, el modo difuso es más como navegar por la Web haciendo clic a en aqui y alla enlaces y banners a otros sitios web y quedandose el tiempo suficiente para hacer clic e ir a otro sitio web ... tal vez su cerebro ya haya visitado el sitio con esa respuesta mágica ... Pero todavía no sale los primeros resultados cuando haces tu búsqueda en el historial.

Efecto Einstellung

El efecto Einstellung es el efecto negativo de la experiencia previa al resolver nuevos problemas.
Manteniedo la analogía cuando buscas en tu historial los primeros resultados siempre son los que ya conoce y en los que tienes mas comodo, no los mejores que quizás conozca, por eso siempre usa los primeros resultados de tu historial(simple repeticion). El primer enfoque para los nuevos problemas puede ser engañoso debido a este efecto. Tienes que deshacerte de las viejas ideas cuando aprendes nuevas.

Ser creativo

El modo difuso es el modo innovador de tu cerebro, el que crea/inventa nuevas estructuras neuronales que luego podras seguir el modo enfocado para repetir o recrear esos pensamientos, pero no para crearlos.
Por esa razón, cuando más piense en ser creativo, menos originales serán sus ideas ya que intentaras seguir patrones que ya conoce y no crearlos.

Alternar entre ambos modos es vital para su aprendizaje, uno sin el otro no sirve de nada.

Más en la próxima publicación sobre estos conceptos y cómo alternar modos y cómo ayudan en su aprendizaje.

Learn how to learn code.

lorrydriveloper — Sun, 12 Jan 2020 21:44:12 +0000

I want to share some thoughts about the book I have read recently Mind for numbers and its Coursera Course, and helpful tips for learning code or anything you want.

First of all, this post is a quick look at complex matters and concepts. TIP

Pre-read any lecture or article (1 to 2 minutes) looking for headings, questions, or before you read it more in deep will help you to create a structure than you later will be filled with the contents.

Introduction to the Focused and Diffuse Modes

Let me make an analogy between the brain and a computer running an Internet browser.
So the Focused mode is the web browser history of your brain, if you make the right query, it will return a bunch of links to websites of "how-to"…. Whenever you already know those websites.
The diffuse mode instead is more like surfing the Web fast clicking links and banners to other websites and stay enough time to click and move to another…..maybe your brain already has visited the site with that magical answer…. But still isn't the first result when you do your search in the history.

Einstellung effect

The Einstellung effect is the negative effect of previous experience when solving new problems.
Keeping with the analogy when you search the first's results are always the ones you already know and are confident at, not the bests you maybe know, but you always use the first's results from your history. The first approach to new problems can be misleading due to this effect. You have to get rid of old ideas when you learn new ones.

Be creative

The diffuse mode is the innovative mode of your brain, the one who create/invent new neural structures that later your focused mode can follow to repeat or recreated those thoughts but not to create them.
For that reason, when more you think about being creative, the fewer originals your ideas will be as you are trying to follow patterns you already know and not create them.
Alternate between both modes is vital to your learning, one without the other is useless.

More in the next post about these concepts an how to alternate modes and how they help in your learning.