CMS Development

jedthehumanoid
Member

New to HUBL - Which languages should I learn

SOLVE

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!

0 Upvotes
1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

New to HUBL - Which languages should I learn

SOLVE

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. 😉 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

 

Anton Bujanowski Signature

View solution in original post

11 Replies 11
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

New to HUBL - Which languages should I learn

SOLVE

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.

0 Upvotes
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

New to HUBL - Which languages should I learn

SOLVE

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. 😉 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

 

Anton Bujanowski Signature
jedthehumanoid
Member

New to HUBL - Which languages should I learn

SOLVE

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

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

New to HUBL - Which languages should I learn

SOLVE

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

Anton Bujanowski Signature
0 Upvotes
jedthehumanoid
Member

New to HUBL - Which languages should I learn

SOLVE
 
0 Upvotes
jedthehumanoid
Member

New to HUBL - Which languages should I learn

SOLVE

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.

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

New to HUBL - Which languages should I learn

SOLVE

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

Anton Bujanowski Signature
0 Upvotes
jedthehumanoid
Member

New to HUBL - Which languages should I learn

SOLVE

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

 

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

New to HUBL - Which languages should I learn

SOLVE

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

Anton Bujanowski Signature
0 Upvotes
jedthehumanoid
Member

New to HUBL - Which languages should I learn

SOLVE

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!

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

New to HUBL - Which languages should I learn

SOLVE

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

Anton Bujanowski Signature
0 Upvotes