New to HUBL - Which languages should I learn

SOLVE
Regular Contributor

Which languages should I learn so I can master HUBL? Is it Python? Or Javascript?

 

I'm trying to create custom modules and although I understand Adding the fields and copying the snippets I'm struggling to make the pages work. I'm new to this and although I've got a great HTML and CSS understanding I'm a bit lost when it comes to the coding side. Thanks!

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Advisor

Hi  @jedthehumanoid

I've struggled the same way as you a few month ago. Personally I don't think that you'll need something like Python. If you can learn some basic Javascript/jQuery it should be "enough".

 

Beside that you should(if you haven't already) do the HubSpot Design Certification which you can find in the learning center of your/every portal. If you know HTML and CSS you'll pass it with ease. Smiley Wink It's really helpful to understand the way like HubSpot design manager works and "how to use what".

 

 

I've "learned" the "custom module coding" by the hard way after I did the certification(try&error, looking up everything in the docs and combining them). 

With the new design manager it's much easier to write greate modules. 

 

 

regards,

Anton

 








check Did my post help answer your query? Help the Community by marking it as a solution
11 Replies 11
Highlighted
Advisor

Hi  @jedthehumanoid

I've struggled the same way as you a few month ago. Personally I don't think that you'll need something like Python. If you can learn some basic Javascript/jQuery it should be "enough".

 

Beside that you should(if you haven't already) do the HubSpot Design Certification which you can find in the learning center of your/every portal. If you know HTML and CSS you'll pass it with ease. Smiley Wink It's really helpful to understand the way like HubSpot design manager works and "how to use what".

 

 

I've "learned" the "custom module coding" by the hard way after I did the certification(try&error, looking up everything in the docs and combining them). 

With the new design manager it's much easier to write greate modules. 

 

 

regards,

Anton

 








check Did my post help answer your query? Help the Community by marking it as a solution
Regular Contributor

Hi Anton

 

Thanks! That's really useful (and reassuring!) as I'm struggling with it at the moment. I've done the HubSpot Design Certification but it's not really helping me with creating custom modules.

 

In Design Manager I can create the various fields and copy the snippets, but I still can't work out which bits of the snippets should be used in the HTML+HUBL window. For example - {% inline_text field="text.header" value="{{ module.text.header }}" %}, I'm guessing I just need the module.text.header bit? I'm very confused

 

Thanks

Mike

Reply
0 Upvotes
Advisor

Hi @jedthehumanoid

you're doing right by creating a "field" in the right sidebar and copy-pasting it into the HTML+Hubl section. 

It depents when you're using what. In the most cases it will be enough to just use the 

{{module.text.header}}

part. But you need some kind of "skeletal structure". As HubSpot is based on Bootstrap2(you can add other frameworks), you can build your structure by using Bootstrap2 css commands and pasting the "field"-snippet(they're calling widgets or modules) into the structure. 

 

The most basic structure is

 

<div class="row">
<div class="container">
<div class="span12">YOUR CODE/SNIPPET GOES HERE</div>
</div>
</div>

 

the code for a basic equal two column structure would be

 

<div class="row">
<div class="container">
<div class="span6">YOUR CODE/SNIPPETS FOR THE LEFT COLUMN GOES HERE</div>
<div class="span6">YOUR CODE/SNIPPETS FOR THE RIGHT COLUMN GOES HERE</div> </div> </div>

 

You can add your own CSS classes everywhere you want.

 

The "only" thing that is important:

if you want to change some CSS inputs via the module, you have to add the CSS part to the HTML+Hubl Section

 

Expample:

<style>
.your-awesome-class{
background:rgba({{PASTED COLOR SNIPPET}});
}
</style>

 

When you want to add some choice fields to the CSS you can do it, too. 

 

Example:

<style>
.your-awesome-class{
{% if module.background-color == "blue" %}
background:#0000ff;
{% elif module.background-color == "red" %}
background:#ff0000;
{% endif %}
}
</style>

with this you can use the "choice field" option inside the module(while using the page builder) to use the same module on a single page without needing many different module clones

 

 

regards,
Anton








check Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Regular Contributor

Hi Anton.

 

Thanks! Yes that makes sense. I totally understand the Bootstrap2 css commands and it should be really easy. I think I'm just getting confused by some of the snippets that are being produced, where some have some extra code, i.e:

 

{% inline_text field="text.header" value="{{ module.text.header }}" %}

...has extra elements, but

 

{{ module.text.header_border_color.color }}

...hasn't.

 

And also where some of the code has some additions, like the '|convert_rgb' bit below. Where has that come from?

module.background.background_color.color|convert_rgb

Thansk again for your help!

Mike

 

Reply
0 Upvotes
Advisor

Are you copying the snippet or the value?

If you copy the snippet, you get a code like the first one, if only the snippet then you get something like the second code. 

 

I can't say where the "|convert_rgb" comes from. Usually you have to add it manually. Maybe HubSpot changed something in the last days/weeks(which would be great, if |convert_rgb would be always there). 

 

You can look up all of the filters here

 

 

regards,

Anton








check Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Regular Contributor

Thanks Anton, that makes sense. So you add in the snippet and than add in the filter at the end? Looks like |convert_rgb is there on the list!

Reply
0 Upvotes
Advisor

yes.

Here's a screenshot of a possible color-switcher Hubl usecase

 

color-switcher.JPG

I've copied the snipet for this one and wrote it inside a rgba() value of the background-color.(Don't forget the comma between the both values)

 

regards

Anton








check Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Regular Contributor
 
Reply
0 Upvotes
Regular Contributor

Thanks! That makes sense. 

 

Can you clarify what you meant in the previous post about having the CSS within the HTML+HUBL window, rather than in the CSS window? The modules I'm working on have the majority of the styling in the CSS window.

Reply
0 Upvotes
Advisor

sure.

When you write a "static" CSS which isn't changeable with widgets/modules you write it into the CSS part(or your main CSS file).

 

If you wnat to change the CSS with widgets(like in the example above) you write it into 

<style>
/* YOUR CODE GOES HERE */
</style>

inside the HTML+Hubl section. 

Same works for jQuery/Javascript codes(yes, you can affect them with widgets/modules too)

 

 

regards,

Anton








check Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Top Advisor | Gold Partner

The |pprint filter is your best friend when it comes to seeing how dicts are structured... sometimes a value can sit at module.body.value and other times it's image.src. use the pprint filter to see the nested dicts.

Reply
0 Upvotes