Free AI web copilot to create summaries, insights and extended knowledge, download it at here

Abstract

was an issue remaining. The document used dark theme and the content in the external page used white background.</p><p id="0afe"><b>Hack 2: </b>Use dark-reader to automatically generate css for your external page</p><p id="f222">You can use <a href="https://darkreader.org/">dark-reader</a> to automatically apply dark style to your page. There are two options. First is to use dark-reader in your project via npm and apply dark theme automatically. For my case, this was a bit overkill and I choose the second option. Second option is to generate and export css file corresponding to dark theme of your external page and then adding that style-sheet to our <code>iframe</code>.</p><p id="df41">First install the <a href="https://darkreader.org/">dark-reader</a> add-on/extension to your browser. I have done it on Firefox. Then open your external page in that browser and enable the dark-mode in dark-reader add-on.</p><figure id="54a0"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*akq4Mmrutw6XTVdZMY9VBQ.png"><figcaption>dark-reader add-on in Mozilla Firefox</figcaption></figure><p id="ded5">When you enable dark-mode, the dark-reader has generated and applied appropriate styling to make your page dark-themed. It works great. You can also tweak around and set brightness, and contrast as well as use developer tools to further customize the design. Once you are happy with the design, click on the dark-reader browser-action button to open the popup menu and click on settings.</p><figure id="af34"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*B_-rTeDGalYJ-Ci6nyyapg.png"><figcaption></figcaption></figure><p id="0ea2">This will open up the settings view as displayed below.</p><figure id="bac9"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*dqdeQaWkTj38obrpRLEoVg.png"><figcaption></figcaption></figure><p id="1b63">Click on Manage settings and then on <b>Export Dynamic Theme</b>.</p><figure id="504a"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*eoK7sNZcYxZF-xWQ3NjEIg.png"><figcaption></figcaption></figure><p id="2bb4">Great job! This will download a css file that you can add to your page to apply the styles for dark theme. Hmmm… So far so g

Options

ood. I believe most of you would do the rest of the stuff on your own, but for the sake of completeness let us add a few lines of code to the event-listeners that we created in Hack1.</p><p id="2a64">Save the css file that was downloaded by the dark-reader as <code>dark-theme.css </code>in the <code>/public</code> directory of your Next.js app. Now, add following lines inside the <code>"load"</code> event-listener.</p><div id="d14f"><pre>const link <span class="hljs-operator">=</span> doc.createElement(<span class="hljs-string">"link"</span>)<span class="hljs-comment">;</span></pre></div><div id="e451"><pre><span class="hljs-attr">link.rel</span> = <span class="hljs-string">"stylesheet"</span><span class="hljs-comment">;</span></pre></div><div id="d811"><pre><span class="hljs-attr">link.href</span> = <span class="hljs-string">"/dark-theme.css"</span><span class="hljs-comment">;</span></pre></div><div id="214b"><pre>doc.head.appendChild(link)<span class="hljs-comment">;</span></pre></div><p id="caa5">Next time when you do this, you will be able to add existing HTML files to your project with custom themes in much lesser time than the time you spent reading this document.</p><p id="3a9a">Wish you all the best and happy coding!</p><p id="ad6f">Interested in building career in web development? Checkout E-degree in JS Frameworks</p><div id="2976" class="link-block"> <a href="https://www.eduonix.com/javascript-frameworks-mini-edegree/UHJvZHVjdC00NDExNjgw"> <div> <div> <h2>JavaScript Mini E-Degree: Master JS Frameworks To The Core!</h2> <div><h3>A perfect mini-e-degree suitable for everyone who wants to master JavaScript effectively without wasting any time…</h3></div> <div><p>www.eduonix.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*OBLf0FHe3Jrk8Lbg)"></div> </div> </div> </a> </div><p id="79c1">Or my course on <a href="https://www.udemy.com/course/react-and-next-js-with-typescript/?referralCode=7202184A1E57C3DCA8B2">React + Next.js with TypeScript</a>.</p></article></body>

Template format error: Every Parameters member must be an object.

This error is not clear. Let me try to help …

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

⚙️ Check out my series on Automating Cybersecurity Metrics. The Code.

🔒 Related Stories: AWS Security | Application Security | CloudFormation

💻 Free Content on Jobs in Cybersecurity | ✉️ Sign up for the Email List

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

PSA: Check the web for plagiarism of anything you publish online. Now onto our blog post…

Techspec [dot] Online and Attackfeed [dot] com are copying my posts word for word

I would like them to stop

medium.com

This error occurred in a template I was deploying recently. It’s the tiniest of errors that causes a deployment to fail and in this case the error message is absolutely unclear. I immediately figured it out but for a newer programmer I would guess this error makes no sense. In fact, it really doesn’t make sense to me but I get why the person who wrote it might have written it the way they did.

When you are writing error messages you should not write them from the perspective of the code you are working with behind the scenes. You should write them from the perspective of the person who gets the error message and tell them exactly how to fix the problem.

It seems to me that the person writing the error should be able to get a handle on the parameter name causing the error. Then, if there is not a properly formatted line that indicates the type of the parameter, give the exact syntax that will resolve the problem.

In this case I had written an AWS CloudFormation template parameter like this:

Parameters:
  UserNameParam:
    Type:String

Can you spot the error?

Does “Template format error: Every Parameters member must be an object” provide a clear description of the problem and how to fix it? Yes, you might have quickly figured it out if you are an experienced programmer like me, but consider what a better description of this problem might be.

I would think it would be something like this:

The parameter UserNameParam is missing the “Type” property or the line setting the type is not properly formatted. The proper formatting is an indentation followed by “Type: [Your type here]”.

The problem in my code above is one little space missing after the colon. The fix for the code looks like this:

Parameters:
  UserNameParam:
    Type: String

Follow for updates.

About Teri Radichel:
~~~~~~~~~~~~~~~~~~~~
⭐️ Author: Cybersecurity Books
⭐️ Presentations: Presentations by Teri Radichel
⭐️ Recognition: SANS Award, AWS Security Hero, IANS Faculty
⭐️ Certifications: SANS ~ GSE 240
⭐️ Education: BA Business, Master of Software Engineering, Master of Infosec
⭐️ Company: Penetration Tests, Assessments, Phone Consulting ~ 2nd Sight Lab

Need Help With Cybersecurity, Cloud, or Application Security?
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
🔒 Request a penetration test or security assessment
🔒 Schedule a consulting call
🔒 Cybersecurity Speaker for Presentation

Follow for more stories like this:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
❤️ Sign Up my Medium Email List
❤️ Twitter: @teriradichel
❤️ LinkedIn: https://www.linkedin.com/in/teriradichel
❤️ Mastodon: @teriradichel@infosec.exchange
❤️ Facebook: 2nd Sight Lab
❤️ YouTube: @2ndsightlab