ProdJuan
ProdJuan
PostsComments
KPCKevin Powell - Community
Created by ProdJuan on 7/22/2024 in #back-end
RewriteCond clarification - looking for how to implement RewriteRule Condition Pattern in bulk
Platform: Apache .htaccess file Reference Link: https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritecond Case: I have a series of pages that I want all of them routed to a single page, but only what matches the specified condition pattern should land there (e.g. passing the filter). Typically, I handle un-suffixed URIs to route to the corresponding hosted file for execution in this way: 
RewriteRule ^home(/?)$ /pages/home.php [L]
RewriteRule ^home(/?)$ /pages/home.php [L]
This will only match /home and not /sub/home. ✅ In this case, there is a sizeable list of URI's I'd like to all route to a specific page at this stage of the build using the RewriteCond statement: 
RewriteCond %{REQUEST_URI} (apples|oranges|bananas)(/?)$ [NC]
RewriteRule .* /pages/fruitbasket.php [L]
RewriteCond %{REQUEST_URI} (apples|oranges|bananas)(/?)$ [NC]
RewriteRule .* /pages/fruitbasket.php [L]
This works except it treats www.mysite.com/sub/apples the same as www.mysite.com/apples. When I try to add ^ in front of the CondPattern, it doesn't match anything and no rewrite happens. #doesn't work 
RewriteCond %{REQUEST_URI} ^(apples|oranges|bananas)(/?)$ [NC]
RewriteRule .* /pages/fruitbasket.php [L]
RewriteCond %{REQUEST_URI} ^(apples|oranges|bananas)(/?)$ [NC]
RewriteRule .* /pages/fruitbasket.php [L]
How can I construct a CondPattern in RewriteCond that's equivalent to a CondPattern in RewriteRule that has ^ in the filter expression?
12 replies
KPCKevin Powell - Community
Created by ProdJuan on 6/10/2024 in #back-end
shell script to create file with latest mod time of any other files in directory
My VPS running Plesk, in git settings of a repository on the site, offers an 'enable additional deployment actions' with a box to put shell command statements line-by-line. I'd like to have it create a file in a directory via touch with the mod time of any other file with specific extension (e.g. '.js' /'.css') in that directory so an outside script can examine that (e.g. latest.js / latest.css) for comparison by other code. If this isn't possible or convenient, I must to resort to a frequent 'scheduled task' to do this operation. Thanks for any help! 🙂
3 replies
KPCKevin Powell - Community
Created by ProdJuan on 4/20/2024 in #os-and-tools
How to split editor in VSC (within pane, not separate pane)
No description
7 replies
KPCKevin Powell - Community
Created by ProdJuan on 4/18/2024 in #front-end
Text overflows shrinking containers as browser is narrow, how to fix?
Here is the PEN: https://codepen.io/prodjuan/full/qBwJNjB I have a nice layout with a grid of cells on the right column, but the description text spills out past the parent container. How can I fix this to look better? Smaller font? shorter line-height? Any other options? Thanks!
6 replies
KPCKevin Powell - Community
Created by ProdJuan on 4/3/2024 in #front-end
Why Don't Absolute-Positioned Elements Remain Aligned to Background Image when Browser Widens/Nar?
I put an image on the page to cover 3/4 the browser width (per design). The image is inside a parent <div> with position relative. Also within that div is a container <div class="pins-wrapper"> that I put a few 'pin' elements as <i> elements with display:block; ... here are some snippets: 
<map-holder><img src="/map-image.png" alt="Its a map!" />
  <div class="pins-wrapper">
    <i id="pin1" class="material-icons">place</i>
    <i id="pin2" class="material-icons">place</i>
    <i id="pin3" class="material-icons">place</i>
  </div>
</map-holder>
<map-holder><img src="/map-image.png" alt="Its a map!" />
  <div class="pins-wrapper">
    <i id="pin1" class="material-icons">place</i>
    <i id="pin2" class="material-icons">place</i>
    <i id="pin3" class="material-icons">place</i>
  </div>
</map-holder>
map-holder, .pins-wrapper i { display:block; }
map-holder { position:absolute; width:75%; right:0px; top:0px; bottom:0px; overflow:hidden; }
map-holder img { height:100%; width:100%; display:block; pointer-events:none; }
.pins-wrapper { position:absolute; top:0px; left:0px; bottom:0px; right:0px; }
map-holder i.material-icons { position:absolute; font-size:64px; transform-origin:center bottom; transform:translate(-50%,-100%); }
#pin1 { top: 25.000%; left:30.000%; }
#pin2 { top: 40.000%; left:75.000%; }
#pin3 { top: 80.000%; left:50.000%; }
map-holder, .pins-wrapper i { display:block; }
map-holder { position:absolute; width:75%; right:0px; top:0px; bottom:0px; overflow:hidden; }
map-holder img { height:100%; width:100%; display:block; pointer-events:none; }
.pins-wrapper { position:absolute; top:0px; left:0px; bottom:0px; right:0px; }
map-holder i.material-icons { position:absolute; font-size:64px; transform-origin:center bottom; transform:translate(-50%,-100%); }
#pin1 { top: 25.000%; left:30.000%; }
#pin2 { top: 40.000%; left:75.000%; }
#pin3 { top: 80.000%; left:50.000%; }
The container for the pins is edge-anchored to the container holding the map image which is full-sized to that container. When the browser width changes, the precision placed pins creep off their target points so they no longer align to the map behind them. The creep is significant (15px) when the browser width changes from, say, 1400px wide to 1600px wide. Those pins should NOT creep at all due to all the anchoring!! What is causing them to malign?? I need those pins to remain stable above their respective targets no matter what width the browser has. Thanks for any help offered!
27 replies
KPCKevin Powell - Community
Created by ProdJuan on 4/5/2023 in #front-end
HTML5 input type="date" tag ignoring assigned value in script-triggered picker in Firefox
Can someone offer a workaround for this problem? Objective: allow date picker to appear when wrapper element is clicked for a date element which does not allow direct access. 
<form name="dates" method="post" action="">
  Start: <span><input type="date" name="start" value="2023-09-01" /></span><br />
  End: <span><input type="date" name="end" value="2023-09-07" /></span>
</form>
<form name="dates" method="post" action="">
  Start: <span><input type="date" name="start" value="2023-09-01" /></span><br />
  End: <span><input type="date" name="end" value="2023-09-07" /></span>
</form>
span{ position:relative; }
span::after{ content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-color:#EEE1; }
span{ position:relative; }
span::after{ content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-color:#EEE1; }
In Firefox, the picker that appears when input is clicked presents the current date rather than the value on the tag. When the user selects a date, that becomes the value of the input and is what the picker presents on the next click of the input. I use JavaScript to trigger picker and retrieve/assign the date value for the date inputs: 
document.forms.dates.addEventListener('click', elem => {
  if(elem.tagName == 'SPAN') { elem.firstElementChild.showPicker(); }
});
document.forms.dates.start.addEventListener('change', elem => {
  var dateValue = elem.valueAsDate;
  dateValue.setDate( dataValue.getDate() + 6 );
  document.forms.dates.end.value = dateValue.getFullYear() + '-' + ('0'+(dateValue.getMonth()+1)).slice(-2) + '-' + ('0'+(dateValue.getDate())).slice(-2);
});
document.forms.dates.addEventListener('click', elem => {
  if(elem.tagName == 'SPAN') { elem.firstElementChild.showPicker(); }
});
document.forms.dates.start.addEventListener('change', elem => {
  var dateValue = elem.valueAsDate;
  dateValue.setDate( dataValue.getDate() + 6 );
  document.forms.dates.end.value = dateValue.getFullYear() + '-' + ('0'+(dateValue.getMonth()+1)).slice(-2) + '-' + ('0'+(dateValue.getDate())).slice(-2);
});
Example: User clicks start date, the picker appears and user selects 10/1/2023 date. Result is the value for start date becomes 2023-10-01 and the change function updates the end date input value to 10/7/2023 and the input value reflects the new value. In Firefox, when the user clicks on the end date input for the first time, the picker appears with "today's date" selected, not the value assigned to the end date input. I have resorted to a JS Datepicker plugin library to offer users a consistent cross-browser experience since the Firefox date picker is deficient until fixed.
1 replies