My boss at CodeKoalas asked that we each read Dale Carnegie’s book “How to Win Friends and Influence People.” As my blog is usually only about code, I won’t go into full detail about the book, but there were several key points I wanted to mention.
According to Dale Carnegie, this is how to win friends and influence people:

  • Be genuinely nice to people
  • Look them in the eye and smile when talking to them
  • Don’t always talk about yourself
  • If you are confronting someone about an issue, don’t begin by criticizing them or even talking about your issue. Begin by lifting them up and encouraging them. This lowers their guard and gives you a better chance at getting your issue resolved.

I know from expereince that if you follow these principles, you will have success in making friends and influencing people.

Drupal has a built-in email system that sends out emails by default. However, there are modules such as “Mimemail” that allow you to send out emails using HTML templates rather than Drupal’s default plain-text emails.

Sometimes an issue can occur while using Mimemail that sends out emails in HTML format that are too large for Gmail viewers. This causes an unpleasant user experience because the email is clipped and you would have to click a link to view the entire email.
The email would read as follows: “[Message clipped] View entire message for gmail user” with a read more link below.
A client of ours was experiencing this issue, so I did some digging. I found from reading through this Drupal.org discussion and the documentation for the MimeMail module how to fix this issue.

First, you need a mail.css in the theme of your Drupal site.
Second, you need to enable a side that comes with MimeMail. It’s called Mime Mail CSS Compressor. What this does is convert your mail.css into inline CSS in the HTML emails MimeMail sends out. With this enabled, the Gmail truncated messages are no longer an issue.

Better Exposed Filters (BEF)

Because your filters are lame or your client wants something crazy

In Drupal Views, there are things called filters. Filters do just that, they filter content. In other words, you can determine what content (or type of content) should be shown on your webpage. One example of this could be a site with a page for their blogs and a page for their events. Obviously, you wouldn’t want your events to show up as blogs or vice versa, which is why you would use a filter to determine that blogs go on the blogs page and the same goes for events.

What if you wanted to give the visitors to your site an option to filter results even further? Say, they go to the blog page but they only want to see blogs about dogs rather than cats, which is just crazy I know but people ask for these things! In this case, you would want an “exposed filter”. An exposed filter allows the end-user to choose how they want to filter the content on the page, so instead of seeing blogs about dogs and cats, they could see one or the other with your exposed filter. An example of this could be an online store; you can filter out products that are too high or low, etc.

Drupal Views comes with a basic exposed filter but it’s not very easy to use. So, in comes the module: Better Exposed Filters. Yes, it is better! It Provides a better user experience than the default option.

How on earth do you use BEF?

Allow me to show you

Prerequisites

Have a content type

Have a view set up (View Page or View Block)

Step 1: Install and Enable the module

Using Drush or

Install the module to /modules directory

Step 2: Taxonomy Terms

Navigate to Structure > Taxonomy

Add vocabulary (This will be your taxonomy grouping title)

Click on “List Terms” in your new Vocabulary

Add your terms (this will be the categories or terms you sort by in your view)

Step 3: Term reference field in your content type

Navigate to your Content Type

(If you don’t have one already) Add a field with type of “Term”

It will prompt you to configure your field.

Under field settings, change number of values to 1 if you don’t want them to choose multiple taxonomy terms

Point the Vocabulary to your Vocabulary your just created.

Save settings

Step 4: Create filter in the view

Under Filter Criteria, Click add - “Has taxonomy term”

Select your taxonomy Vocabulary

Selection type should be Dropdown

Expose the filter to anon users

Select “Single filter” and change the filter Label to what you want or remove it

Select “Is one of” and select the terms you want selected. (If all, leave terms unselected)

Step 5: Enable BEF in the view

Under Exposed form, change Basic to Better Exposed Filters

Check the option for “Autosubmit” and Make sure “Hide submit button” is checked as well

At the bottom, you should see the your taxonomy term field. You can change it from “Default select list” to “Checkboxes”, “Links” or “Hidden”

Miscellaneous

“Exposed form in block: No” will add your filter(s) above your view page.

“Exposed form in block: Yes” allows your to place your filters as a block wherever you want.

BEF must be used with a View Page UNLESS you turn on AJAX in the advanced settings of your view. Then you can use it with your View Block

However, if there is a custom view.tpl.php, BEF block may not work on a Block View. You will need to have a Default or normal view.tpl.php for your specific view for it to work.

Drupal views are great! However, the order in which your content prints out isn’t as easy to control. You can sort ascending or descending based on the post date, the title, etc. But what if you had a specific order you wanted them to print out? With Draggableviews you can set the order your content will print out with an easy drag-and-drop gui. Setting draggable views up is a little complex, so let’s walk through the process.

Let’s assume you already have a view set up…

Setting up your Draggable Display

  1. Enable the module
  2. Navigate to your view
  3. Add a new Page to your view
  4. Set a page source - I usually use something like /draggable-blog
  5. Set your format to Table
  6. Make sure your fields includes Content: Title
  7. Add DraggableViews: Content to your fields
  8. Add DraggableViews: Weight (ascending) to your sort criteria

Setting your original view to use your draggable order

  1. Navigate to your original view
  2. Add DraggableViews: Weight (ascending) to your sort criteria and remove the default sort criteria - (should be Post Date)
  3. You’ll be asked to Display Sort as: and you will select your View in the dropdown. In this case my view name is Test View:

Once you have all this setup, navigate to your /draggable page. Once you are on that page, you will see a list of your content with the draggable icon on the left side. Order them in the way you like and click save. Now your view is sorted in such a way that you can easily manage.

In HTML, sometimes you need to be very specific with your selectors. You can actually select elements based on their attributes rather than their class or ID.

CSS [attribute] Selector

This is used to target any element that has a certain html attribute (in the example, we are targeting the “download” attribute).
The selector a[download] selects an anchor tag with a download attribute.

1
2
3
a[download] {
background-color: blue;
}

will select <a href="#" download>Click me!</a>

The [attribute=”value”] Selector

This selects an html element with a specific attribute and a specific value. For example:
a[target="_blank"]
selects any element with a target attribute whose value is "_blank".

1
2
3
4
a[target="_blank"] { 
color: blue;
font-weight: bold;
}

will select <a href="#" target="_blank"></a>

The [attribute~=”value”] Selector

This selector is similar to the previous selector but it selects a specific attribute and value but the value must be a space-separated word. For example:
[title~="namespace"]
selects any element with a title that contains the word “namespace”. It can contain other words, but the word namespace must be separated from any other words by a space rather than a hyphen.

1
2
3
4
[title~="namespace"] {
color: white;
font-weight: 200;
}

This selects <a href="#" title="namespace">Click me!</a> but not <a href="#" title="namespace-top">Click me!</a>

The [attribute|=”value”] Selector

This selector selects an element with a specific attribute but the value begins with a specific word. For example:
[class|="top"]
will select an element whose class begins with the word top. The value has to be a whole word, either alone or separated by a hyphen. So, this will select an element with a class of "top", "top-bar" and "top-stuff" but will not select an element with a class of "topbar" because it is not separated by a hyphen.

1
2
3
a[class|="top"] {
background: #CCCCCC;
}

will select <a href="" class="top top-bar">Click me!</a> but will not select <a href="#" class="topbar">Click me!</a>

The [attribute^=”value”] Selector

This is just like the last selector, however the value does not have to be a whole word. For example:
[class^="top"]
will select will select any element whose class begins with the word “top”, but it does not have to be separated by a hyphen, so “topbar” would be selected by this selector.

1
2
3
h2[class^="top"] {
background: red;
}

will select <a href="#" class="topbar">Click me!</a>

The [attribute$=”value”] Selector

This selector is the exact opposite as the last two because it selects an element with a specific attribute that ends with a specific value, rather than beginning with that value. For Example:
[class$="test"]
will select any element with a class that ends in the word “test”. This value does not have to contain a full word, so you won’t need to worry about hyphens.

1
2
3
a[class$="te"] {
background: green;
}

Will select <a href="#" class="greatest">Click me!</a>

The [attribute*=”value”] Selector

This selector is like the last three, but will select any html element that has a specific attribute and contains a string of textanywhere in the value, so it does not need to begin or end with it as long as it contains the value. For example:
[class*="te"]
will select any html element that has a class that contains the string "te" inside it, so in your example below, the class is "state" so our CSS selector will style that div.

1
2
3
a[class*="te"] {
background: blue;
}

Will select <a href="#" class="state">Click me!</a>

Styling Forms

This is what CSS Attribute selectors are most used for. Rather than putting a class or ID on form inputs, you can just select the elements based on their type.
input[type="text"] will select a form input and
input[type="button"] will select a form button

The clip-path CSS property allows you to display a portion of an element rather than displaying the whole thing. In Photoshop, this could be called masking. This is mostly used to show or hide a portion of an image, but it can also be used on <p>s and <div>s as well. This could be used to shape divs, say if you have a crazy design to match and can’t just use a square-shaped element or you don’t want everything on your site to just be an image or SVG.

Note that there used to be a clip property, but that is mostly deprecated and clip-path is what should now be used

There are several different ways to use clip-path. The one I am most familiar with is clip-path: polygon(); This allows you to use different grid points to specify which part of the image or element you want to display.

You can think of the points you are using as the X and Y axis, so when you start and use
clip-path: polygon(0 0), your first point will be at left:0; and top:0;. You can pass percentages or pixel values into this. Also, you separate your points by using commas.
So, if I were to do
clip-path: polygon(0 0, 0 100px, 100px 100px, 100px 0);, that would display a box 100px wide and 100px tall.

Here is how to make a simple square:

See the Pen Clip-path Square by Chris Wright (@chreeswright) on CodePen.

Here is how to make a simple triangle:

See the Pen Clip-path Triangle by Chris Wright (@chreeswright) on CodePen.

Here is an Octagon:

See the Pen Clip-path Octagon by Chris Wright (@chreeswright) on CodePen.

And lastly, here is an example of a more complex use of clip-path:

See the Pen HTML 5 Logo in Pure CSS by Chris Wright (@chreeswright) on CodePen.

Building a polygon is not the only use of clip-path. You can also use the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* referencing path from an inline SVG <clipPath> */
clip-path: url(#c1);

/* referencing path from external SVG */
clip-path: url(path.svg#c1);

/* polygon */
clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

/* circle */
clip-path: circle(30px at 35px 35px);

/* ellipse */
clip-path: ellipse(65px 30px at 125px 40px);

/* inset-rectangle() may replace inset() ? */
/* rectangle() coming in SVG 2 */

/* rounded corners... not sure if a thing anymore */
clip-path: inset(10% 10% 10% 10% round 20%, 20%);

Browser Support

Any version of Chrome, Safari and Firefox is supported, Opera is 7+, IE is 8+, Android ? and IOS is 2+

When you think of coding, what’s the first thing that comes to mind? For some, it may be building a website. For others, you may only be able to picture someone hacking into the government’s mainframe computer. Either way, many of you have probably heard something about coding and have varying degrees of knowledge of it.

When I was a kid, my parents had an old school DOS computer. For those of you who don’t know what that is, it is a dinosaur of computers which could either play prehistoric games or run a command line that looked something like this:

DOS Command-line

I remember trying to type commands such as “Blow Up” or “Do Something” into my computer, but none of them did anything because I didn’t know the coding language and frankly didn’t know how to communicate with my computer.

It wasn’t until I was about 18 years old that I actually began to learn coding languages. I began with some basic languages for building websites such as HTML and CSS. HTML, or Hypertext Markup Language is used to build the structure of a webpage, application or software. Basically, if HTML didn’t exist, you wouldn’t be able to read what I’m writing right now unless I was using a typewriter. CSS, or Cascading Style Sheets is the language you use to style your webpage. Have you ever went to a webpage and all you saw was text on the left of the screen and everything looked broken? Chances are, the sites’ CSS was either broken or didn’t load correctly. That, or their IT guy really hates his boss… yikes!

Once I started to learn how websites are built and styled, I really began to grasp how to find things on the internet. I no longer typed complete sentences into Google because Google isn’t a person. Google finds key-words in your search and finds relevant information. Everything just started to make sense.

Let’s face it, how many times do you use technology? Let’s see… you wake up and check facebook, then you check your weather app and catch an Uber to work… And that’s before you even hit 9am! Everything revolves around technology and if you want to be relevant in tomorrow’s day and age, learning a bit of code couldn’t hurt.

If I could go back and learn coding languages earlier in life, I would have. Someone I look up to once said that everyone should learn a bit of code because then if your company’s website needs fixing, you can jump in and become an asset to your boss and the whole company. I’ve only touched on two coding languages and there are many out there. Languages that build, style, change what’s built, build what’s built. There is so much out there to learn, so parents, please… please put a computer in your kids’ hands and teach them to code. You are never too young or too old to learn to code. Here’s to you and your future in technology!