Making Embedded Content Work In A Responsive iFrame

You have an iframe:

<iframe src="https://www.youtube.com/embed/wnJ6LuUFpMo" frameborder="0" gesture="media" allowfullscreen></iframe>

It’s not responsible. Put a div around it:

<div class="video-container">
<iframe src="https://www.youtube.com/embed/wnJ6LuUFpMo" frameborder="0" gesture="media" allowfullscreen></iframe>
</iframe>
</div>

Now format the div by adding this css:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}

.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

Result: the iframe is now responsive, sort of. See:

Source: Making Embedded Content Work In A Responsive iFrame

Filed under: CSS

Differences between goals, requirements and deliverables

What is a goal?

A goal is an overarching statement that is meant to provide overall context for an outcome of a project. (Mochal) This outcome is a summary statement of the business value of the project.

An example of a goal within a company would be: “To make all warranty documents and all technical service processes related to warranties electronic.”

A goal differs from a requirement in its complexity and audience. The goal is defined at the beginning of the project while a requirement is meticulously collected by the project manager to meet that goal afterwards in the planning phase.

What is a requirement?

A requirement is a detailed requisite collected by a project manager from stakeholders through surveys, questionnaires, analysis and other tools to meet a project goal.

An example of a requirement for an electronic warranty project would be the existence of a workflow which allows documents to be signed by various stakeholders electronically instead of through mail.

A requirement is usually a component of a project activity that meets a project goal. It is more complex in its definition and lays the ground work for a project deliverable.

What is a deliverable?

A project deliverable is the intended outcome of an approved task stemming from a project requirement. Project deliverables are developed in the implementation phase of the project and are made available for stakeholders to verify whether they meet pre-defined acceptable criteria for the intended goal. (McConnell, 2010)

An example of a project deliverable would be a database and workflow which hosts warranty documents and allows warranties to be emailed in a workflow via a signing application like DocuSign. If this deliverable meets the requirements acceptable criteria, it will lead in aiding the success criteria of the overall goal of the project.

References:

McConnell, E. (2010, July 2). Boundaries, Deliverables and Requirements as Key Components of Project Scope. Retrieved October 22, 2017, from http://www.mymanagementguide.com/project-boundaries-project-deliverables-and-project-requirements-as-key-components-of-project-scope/

Mochal, T. (n.d.). Defining Project Goals and Objectives. Retrieved October 22, 2017, from https://kidasa.com/defining-project-goals-and-objectives/

Filed under: NotesTagged with: , , ,

Scribe Workbench: Conversion failed when converting date and/or time from character string.

Problem:

During an insert step in Scribe Workbench, I wanted to populate a CreatedDateTime field with the current time. This field is a datetime2 in the SQL server. So I put in NOW( ) like this:

image

But, instead of capturing a timestamp and putting it in, I got the following error in the execution log:

image

Solution:

Change NOW( ) to the following: TEXT( NOW( ), “MM-dd-YYYY hh:mm:ss”)

Like this:

image

This will take the value captured from the NOW( ) as a string and convert it into type datetime2. No more errors! 🙂

Filed under: ETL

How to insert data from Excel to MS SQL quickly

I have used this tool a few times and honestly, its a lot quicker than the “Import and Export Data” tool or the “Generate Scripts” option under Tasks. This is a tool built by Perceptus Consulting to import data from Excel into an existing SQL table quickly. It just gives you the import script and you can modify it as you like. You can modify the script to make the transaction explicit, or simple add more statements to the script. It’s simple and a lot safer than running unreliable wizards.

Here is the tool:

http://tools.perceptus.ca/text-wiz.php?ops=7

Filed under: Tools

Redirect to different sites based on subdomains

Before I get to the meat of this post, you should know that when you want to simply redirect a site from http to https and you are using IIS, you can use one of two solutions:

  1. Add the following to the head:
    <meta http-equiv="refresh" content="0;URL='https://sarfraz.pro/'" />
  2. Use HTTP redirect in the site settings.

But what do you do if it is getting more complex that this, and you are presented with a scenario where:

    • http://sub1.example.com needs to go to https://sub1.example.com
    • http://sub2.example.com needs to go to https://sub2.example.com
    • http://example.com needs to go to http://www.example.com

With a little javascript, you can easily take care of this on the client side. Here is what you do.

Add the following to the head:

<script type="text/javascript">
function codeRedirect() {
if (window.location.hostname == "sub1.example.com" &&
window.location.pathname== "/" ) {
ref = 'https://sub1.example.com';
}
if (window.location.hostname =="sub2.example.com" &&
window.location.pathname== "/" ) {
ref = 'https://sub2.example.com';
}
else if (window.location.hostname =="example.com" &&
window.location.pathname== "/" ) {
ref = 'http://www.example.com';
}
window.location.href = ref;
}
</script>

Modify the body tag as such:

<body onload="codeRedirect()">

That’s it.

If you want to add more redirects into the function, just copy one of the “if” statements and paste them before “else if”. Then modify the hostname and ref with the new addresses. The hostname is what you want to direct from, and the ref is where you want to redirect to.

Filed under: JSTagged with: , ,

Modifying the height and width of CSS pseudo element content

If you want to add an image before or after an html element, you most often use the pseudo-elements :after and :before. For example, when you want to add an image before a link, you can write it like this:

a:before {
url(image.png);
}

But you can’t control the width or height of this image this way. If it is absolutely necessary for you to control the dimensions of this pseudo element, the following is what you do:

  1. Move the image to the background image property.
  2. Define the height and width of the pseudo element. These are the dimensions of the image.
  3. Make the content an empty string.
  4. Give the background-size the same dimensions as the image.

This is how you would do it in CSS:

a:before {
background-image: url(image.png);
background-size: 40px 40px;
display: inline-block;
width: 40px;
height: 40px;
content: "";
}

Filed under: CSS

CSS for DIVs as shadowed curved boxes in a line

CSS for the shadowed box. You don’t need anything beyond this to create a shadowed box. The rest just shows you how to line it all up.

.box {
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
-webkit-box-shadow: 3px 3px 3px 3px #ABABAB;
box-shadow: 3px 3px 3px 3px #ABABAB;
resize: both;
overflow: auto;
min-width: 50px; /*suggest a min-width & min-height*/
min-height: 50px;
background-color:#FFFFFF;
text-align: center;
margin: 20px;
}

How to line the boxes up. I am copying this from Jonathan Snook’s page with slight modifications.

#container {
display: table;
border-collapse: separate;
border-spacing: 10px 50px;
}
#row {
display: table-row;
}
#left {
display: table-cell;
padding:20px;
}
#right {
padding:20px;
display: table-cell;
}
#middle {
padding:20px;
display: table-cell;
margin: 60px; /* Not needed. Don't know why I put it here */
}

This is for mobile. If the resolution goes below 797px, the rows go into block mode.
@media all and (max-width:797px) { #row {
display: block;
text-align:center;
}
}

Filed under: CSS

Clean up ScribeInternal DB for Scribe Insight to reduce disk size

If the hard drive on your Scribe Insight integration server gets full, conduct the following operation to reduce the size of the ScribeInternal DB. This database will get full approximately once every 2-3 months.

Procedure:

  1. Run scribemaintenance.sql
  2. Run the following command:
    USE  master
    GO
    EXEC sp_clean_db_free_space @dbname= N'ScribeInternal';
  3. Go to the Object Explorer pane in SSMzS and right click on the database in question. Choose tasks -> shrink -> files. Change the file type option to Log, click the “Reorganize pages before releasing unused space” option, and set the value to 1 MB. Hit OK.

If this doesn’t work, check to see if your database is set up with a Full database recover model. Right click the database and go to properties. Choose Options, and check the Recover model option. Set to simple (if you can!!!), then shrink the logs.

Filed under: ETL