Read the thoughts and musings of a cultured redneck here
At DNN Summit I learned of a new tool created by Kelly Ford called “DNN Prompt”. I first saw it in a session that Peter Donker gave and it immediately caught my attention. Since then I’ve learned more about it and want to share some initial thoughts on it.
Peter was demoing something related to the persona bar in his session on React.js when he mentioned that he was going to try a “new trick” he’d just learned from Kelly Ford. He then opened a panel up and a command line was visible. He typed in something like “new-extension” and voila, just like that a new extension was created. He closed the panel and moved on with this session, while I was left in amazement wondering what had just happened.
As one of the hosts of DNN Summit I was in and out of rooms all day, taking pictures and tweeting them, and just busy helping out in general. It was hard for me to pay attention to things, but whatever Peter had just done definitely caught my eye. I turned to the person beside me and asked them what was that panel he just used. I thought it may have been some Powershell script or something. The person to my left didn’t know either.
Enter DNN Prompt After asking around and nagging enough people I learned that this new feature was called “DNN Prompt”. Prompt is the latest and greatest from Kelly Ford who most of the DNN Community knows as being the creator of XMod
Thinking back on it I think I remember hearing whispers around the DNN Community that Kelly had been working on something that was really cool, but yet I never heard any details. Now I’d seen it in action and was connecting the dots. At first glance I thought it was black magic of sorts.
In the time since DNN Summit I’ve been able to connect with Kelly and the team of people working on DNN Prompt and actually use the tool. It is definitely neat. In this blog I want to provide a quick intro video on DNN Prompt and relevant links for those who are interested.
The Return to the Command Line It seems there’s been a recent trend going back to the command line among developers. If you look around at NPM, Node.js, etc. you’ll find the command line being used more and more. Even Kelly’s recent presentation to the Southern Fried DNN User Group here in Charlotte referred to this notion as his title was “How Something Old Can Make DNN New Again”.
Although the user interface for the command line is not as “user friendly” as a wizard based approach it does allow for faster execution of tasks. When you think about it, it really makes sense because the users of this kind of tool are typically admins or developers… not content editors… and they love this kind of power at their fingertips. Don't get me wrong though, this tool is more than just about speed. The vision Kelly has for the tool is very forward thinking and one to get excited about.
DNN Prompt is a Game-Changer From my first few times using DNN prompt and from seeing people's reactions at the Southern Fried DNN User Group meeting (both in-person and online) I think it’s a game changer for DNN. Everyone's minds were spinning and it didn't take developer's long to see what this could mean for DNN as the tool is extensible. I think Prompt will be a DNN Administrator’s best friend. Normal DNN administrators will now be “Power Administrators” once they use DNN Prompt enough to know the commands by heart. At conferences in the future you’ll see everyone having Prompt installed, using, and referencing it. I plan on using it a lot in my own DNN sites and think that you will end up using it too! Kelly's goal is to get this into the core of DNN Platform and I hope he is successful with that goal.
As you saw in the video, DNN Prompt has the potential to be a game changer for DNN. It will impact the DNN platform, community, and ecosystem. Also, just as Kelly’s earlier DNN creation (XMOD) has done, I believe Prompt could follow a similar path and potentially spawn a new sub-ecosystem for DNN developers and administrators. DNN Prompt could open a new era for development within the DNN ecosystem as the possibilities are endless. Imagine doing all your daily tasks via the command line or imagine modules and other extensions having their own hooks into Prompt. What if you could instantly shut down registrations across 100 portals with one single command or script out batch commands to do whatever you want within your site… it could get interesting quickly!
Get Involved Kelly ended his presentation with asking people to get involved. He wants to know your feedback, how you envision using the tool, the commands that would be important to you, etc. The good news is taht DNN Prompt is open source and active on GitHub! I know that the team of people developing the solution would love to have more people contributing to the code base and pushing the solution forward.
Here are some links for those of you interested in participating and knowing more:
It’s DNNCon week! The DNN Community is ramping up with excitement about the conference this upcoming weekend. I know that our Carolina based crew is looking forward to the road trip to the DC/Baltimore area, the convos/sessions/parties at the conference, and most of all the fellowship with everyone in the community.
That said, if you’re still on the fence about attending I think you should give a go and here are 3 reasons why:
Once you choose a font you can click to the “Type Tester” section to see how any specific words you type will look in your selected font. You can easily increase or decrease the font with the slider and you can also view how the font looks in various browsers on the “Browser Samples” tab as shown in the screenshot below.
Typekit uses “kits” to organize fonts for usage by designers. It’s really easy to create a new kit. Simply hover the kit section and click “Add New Kit”. As you can see from the screenshot below, I've created a kit for each site on which I use custom fonts. You can see how to add a new kit in the below screenshot.
Now that the "kit" is ready I need to add some fonts to it. Once you decide on a font you simply hover over the font and click “Add to Kit” and the font will be added to the kit for which you are currently viewing as denoted in the below image.
After you add a font to a kit you can go into the "kit editor" to further customize. Once you’re inside the kit editor you can customize various settings and styles that make the custom fonts appear on your site. You can simply add the CSS selectors that you’re using on your site & they will then render showing the custom font that you've just selected in Typekit. Notice in the below screenshot where I'm adding " .ANewSelector " class in Typekit's editor.
Now at this point you’re probably wondering what is linking your site & Typekit together so that the selectors know which font face to use. In the kit editor Typekit gives you 2 lines of JavaScript that you need to include in order to make things work. Just copy and paste that script (shown in the below screenshot) into your code and you’ll be ready to rock.
If you wanted to access specific weights & styles via your skin.css file you can click on the “Using weights & fonts in your CSS” option which will give you the below screen allowing you to copy the CSS necessary for your specific font & weight.
Now if you did click the “Copy CSS” option you would end up with some CSS that resembled the below:
font-family: "atrament-web",sans-serif; font-style: normal; font-weight: 400;
Once you click publish you will be ready to go. I should also mention that if you want to develop or test out styles locally you can also enter “localhost” in your kit editor settings and that will make your local sites work with the new custom fonts.
If you were concerned about how your styles would display on mobile devices you can click into the "Mobile Settings" section of the Typekit editor as seen in the below screenshot.
Now to make all of this active we need to click the big green “Publish” button at the bottom right hand corner of the kit editor screen which you can see in the below screenshot.
At this point we’ve successfully chosen our fonts and published them linking the custom fonts to our site. Now we just need to reference them in our skin's .ascx file, the skin.css or specific modules. In my skin’s .ascx file I’ve added the 2 lines of JavaScript to reference TypeKit.
Then in my HTML Module I simply referenced the CSS classes that I specified earlier in the Typekit selectors area.
And that's all it takes to get everything lined up. You can see an example of the redesigned home page (running locally) using the custom font “Atrament web” that I selected earlier.
Typekit makes it extremely easy to use custom fonts in your site. If you’re a Creative Cloud member you should check it out. I hope this blog has been helpful to you with integrating custom fonts in your DotNetNuke sites.
Regards,
Clint
If you ever need to put some custom styles in the Telerik Rad Editor of DotNetNuke HTML module it can be a little frustrating if you don't know exactly where to put the files. It's actually a simple process. I cut a quick video walking through this process and wanted to post here in hopes of helping someone who may encounter this same issue.
I also blog on other sites...
And contribute to OSS Documentation...
See my pics on UnSplash