html – Como estilizar texto dentro da tag code?

Eu gostaria de deixar um trecho de código estilizado assim como é nas ide mas não sei como fazer isso, procurei aqui e não encontrei nada a respeito, eu gostaria de deixar algo parecido com o que está na imagem abaixo com os nomes das variáveis, função, parâmetros, etc. com uma cor definida, ao invés de só o texto com a cor preta padrão da tag code.

inserir a descrição da imagem aqui.

html – Please critique proposed page design change

Here’s the current product page.

Current page

And here’s the page design that’s being proposed. Ignore the actual words in the text, and focus only on the look and feel. Also imagine that the fully justified 3 blocks of bold text are aligned left and right (I had trouble doing this in my image editing software).

Proposed page

Please let me know your criticisms of either the old or the new design.

Also, note that in the new design, “Instead of a coupon” has a capital “I”. It is important for me to know whether you think a lower case or upper case initial “I” is most appropriate.

html – Como detectar uma palravra na url atual do meu site com PHP

Resumindo, tenho um site.com, quando o cliente acessar site.com/page/2, quero que quando tiver o “page/2” ele me mostre outra coisa, usando por exemplo o if, porem não sei como identificar isso na url atual.

Label de boton se sobrepone al mismo HTML y CSS

Comence hace poco a hacer front-end y estoy desarrollando el login que ven en la imagen.
Mi problema es que el boton redondo para recordar el login se me sobrepone junto al label del mismo.
Adjunto imagen de referencia

Link de pastebin con el codigo HTML, debido a la restriccion de caracteres de stackoverflow
https://pastebin.com/LSdPFsiC


.center{
    width: 10%;
    height: 10%;
    size: 20%;

}

.roundedCheckbox {
    position: relative;
    margin-bottom: 2%;
    
  }
  .roundedCheckbox label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #fcfff4;
    background: #f5f5f5 40%;
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
    border-radius: 100%;
    font-family: Bahnschrift;
    font-weight: 600;
    font-size: 0.55rem;
    color: #00C9FF;
  }
  .roundedCheckbox label:after {
    content: '';
    width: 9px;
    height: 5px;
    position: absolute;
    top: 5px;
    left: 4px;
    border: 3px solid rgb(8, 250, 0);
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    transform: rotate(-45deg);
  }

  .roundedCheckbox label:hover::after {
    opacity: 0.3;
  }
  .roundedCheckbox input(type=checkbox) {
    visibility: hidden;
  }
  .roundedCheckbox input(type=checkbox):checked + label:after {
    opacity: 1;
  }

html – How can i make anchor tags clickable when using the function z index

the nav is set absolute to the headerContainer. And in motion it works fine.
It needs to drop from behind the headerContainer over the main content of the page. This way the content dissapears and the menu is on top.
I have done so by setting my main class to relative and a negative z-index: 2; because the nav is set to negativ -1;

Right now everything works and it looks good. The only problem is that the anchor tags inside my nav are not clickable anymore.

I have been searching for the answer but could not find anything related.
Is there anyone who can tell me why this occurs? I have yet to find a good solution for this.

What i want to happen seems so simple.. it needs to drop down from behind or at least create the idea its coming from behind the header..

I have tried setting the height of the nav to 0 and on click set it to 100%. That wil drop the menu as if it comes from behind. but gave me other problems like the anchors would come in later or sooner then the actual nav background.

Here is the code.

let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
    menu.classList.toggle("show");
    icon.classList.toggle("fa-times");
}
* {
    margin: 0;
    padding: 0;
}
body {
    background: #F5F5F5;
    color: #1F1F1F;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
}
a {
    text-decoration: none;
    color: #1F1F1F;
}
/* --- HEADER --- */
header {
    width: 100%;
    height: auto;
    background: #FFF;
}
.headerContainer, .container {
    width: 90%;
    max-width: 1140px;
    margin: auto;
    padding: 15px;
}
.headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
/* --- Logo --- */
.headerBrand a {
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}
.headerBrand img {
    padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
    z-index: -1;
    /* display: none; */
    padding: 15px;
    width: calc(100% - 30px);
    position: absolute;
    top: -100px;
    left: -1px;
    background: #ffffff;
    transition: top 2s;
}
header nav.show {
    top: 100%;
}
header nav ul.mainMenu {
    list-style: none;
}
header nav ul li a:hover {
    color: red;
}
.menuBtn {
    width: 35px;
    height: 35px;
    text-align: center;
    background: red;
    font-size: 25px;
    border-radius: 5px;
    cursor: pointer;
    color: #FFF;
}
/* --- MAIN --- */
main {
    position: relative;
    z-index: -2;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
 <!-- header-->
        <header>
            <div class="headerContainer">
                <!-- Logo or Brandname -->
                <div class="headerBrand">
                    <a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
                </div>
                <!-- END Logo -->
                <!-- Nav -->
                <nav>
                    <ul class="mainMenu">
                        <li><a href="#">First link</a></li>
                        <li><a href="#">Second link</a></li>
                        <li><a href="#">Thirth link</a></li>
                        <li><a href="#">Fourth link</a></li>
                    </ul>
                </nav>
                <div class="menuBtn"><i class="fas fa-bars"></i></div>
                <!-- END Nav -->
            </div>
        </header>
        <!-- END header-->
        <!-- Main -->
        <main class="container">
            <section>
                <h1>This is a header</h1>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
            </section>
        </main>
        <!-- END Main-->

html – Criar um função em javascript para que receba um parâmetro que será um JSON

Então eu devo criar uma função que recebe um parâmetro que será um JSON com as configurações de criação de um formulário. essa função então deve ser genérica para processar qualquer JSON que seja enviado a ela que respeite o mapeamento campos.

O arquivo JSON e esse:

var user = {
               "name": "alunos",
               "method": "get",
               "action": "ok.html",
               "autocomplete": true,
               "items": (
                   {
                       "element": "input",
                       "type": "text",
                       "value": " ",
                       "name": "nome",
                       "placeholder": "Digite seu nome"
                   },
                   {
                       "element": "input",
                       "type": "text",
                       "value": "",
                       "name": "email",
                       "placeholder": "Digite seu e-mail:"
                   },
                   {
                       "element": "select",
                       "name": "gender",
                       "children": (
                           {
                               "element": "option",
                               "value": "F",
                               "innerhtml": "Feminino"
                           },
                           {
                               "element": "option",
                               "value": "M",
                               "innerhtml": "Masculino"
                           }
                       )
                   },
                   {
                       "element": "input",
                       "type": "button",
                       "value": "Enviar",
                       "name": "enviar"
                   }
               )
         }

Comecei a construir o arquivo HTML para criar o formulário, mas estou com duvida na lógica do JavaScript para conseguir abstrair as informações desse arquivo JSON

  <html>
    <head>
      <meta charset="UTF-8"/>
         <title>Basico json</title>
    </head>
    <body>
       <div id="users">
           <form name="alunos" action="ok.html" method="get" autocomplete="true">

              <input type="text" name="nome" placeholder="Digite seu nome" value=" "></input>        
    
          </form>
       </div>  
      <script type="text/javascript">
          user_update = function () {
                  var formJ = document.createElement("user");

          if(user.name){
               formJ.setAttribute("name",formJ.name)
          }

      </script>
   </body>

301 redirect – Old HTML Site to WordPress – Loss of SEO Rankings

I have moved an old HTML site which had over 250 pages, nearly all of those pages were using the old trick of duplicating every page but just changing text to match the area where ranking was important.

The new site has been completed and been live for over a month now, this is what i have done:

  1. Created necessary 301 redirects for ALL 250 pages, confirmed working.
  2. Submitted sitemap to Google successfully
  3. Checked for errors within the search console

The issue is that after a month of the site going live, the rankings from the old site seemed to have dramatically dropped, if not a total loss.

It became apparent that the new site seemed to have got infected with some rouge pages that had links to torrents, i fixed this pretty much as soon as i noticed but perhaps too late where google see this and rankings dropped because of it.

Is it just a case of waiting for Google to crawl the site again and be patient for rankings to come back up after the html to wordpress move?

I just want to find out if there’s anything obvious I’ve done wrong here or perhaps forgot to do?

Thank you.

safari – HTML button not being clicked with applescript

So I have a script that uploads a video to tiktok and then presses the post button. I am trying to automate this process. I have automated up to pressing the post button. For some reason, I cannot get any click events to work on this site. Heres my code below:

set ClickCaption to "var myCaption = document.getElementByClassName('jsx-884924262 jsx-1861105885 jsx-536802048 jsx-2447936694')(0); myCaption.dispatchEvent(new MouseEvent('mousedown')); myCaption.dispatchEvent(new MouseEvent('mouseup'));"
set WriteCaption to "document.getElementsByClassName('notranslate public-DraftEditor-content')(0).innerHTML = 'tester' ;"

----------------------------------------------------------

set ClickInput to "document.getElementsByName('upload-btn')(0).click();"

set ClickInput2 to "document.querySelector('.upload-btn-input').click();"

-------------------------------------------

set ClickPostBtn to "document.getElementByClassName('jsx-352266594 button btn-post primary')(0).parentElement.click();"
set ClickPostBtn2 to "document.querySelector('.jsx-352266594 button btn-post primary').click();"
set ClickPostBtn3 to "var myPostBtn = document.getElementByClassName('jsx-352266594 button btn-post primary')(0); myPostBtn.dispatchEvent(new MouseEvent('mousedown')); myPostBtn.dispatchEvent(new MouseEvent('mouseup'));"
set ClickPostBtn4 to "var myPostBtn = document.querySelector('.jsx-352266594 button btn-post primary'); myPostBtn.dispatchEvent(new MouseEvent('mousedown')); myPostBtn.dispatchEvent(new MouseEvent('mouseup'));"





activate application "Safari"

tell application "Safari"
    
    open location "https://www.tiktok.com/upload/?lang=en"
    
    set theTab to current tab of window 1
    
    -- wait until page loads
    repeat while document 1's source = ""
        delay 0.5
    end repeat
        
    
    delay (3)
    
    -- click the caption input
    do JavaScript ClickCaption in theTab
    
    delay (3)
    
    -- write the caption
    do JavaScript WriteCaption in theTab
    
    delay (3)
    
   -- click the file input 
    do JavaScript ClickInput in theTab
    
    delay (2)
    
    -- add file to upload section
    tell application "System Events"
        keystroke "G" using {command down, shift down}
        delay 1
        keystroke "FILE PATH"
        delay 5
        keystroke return
        
        delay 5
        keystroke return
        
    end tell
    
    delay 10
    
    display notification "wait done"
    
    -- press upload file
    do JavaScript ClickPostBtn4 in theTab
    
    delay 5
    
    display notification "done"
    
    delay (3)
    
    -- close theTab
    
end tell

Here is the HTML Element I am trying to click:

<button type="button" class="jsx-352266594 button btn-post primary">Post</button>

This is the HTML around that button:

<div class="jsx-3439957416 op-part">
    <button type="button" class="jsx-352266594 button btn-cancel">Discard</button>
    <button type="button" class="jsx-352266594 button btn-post primary">Post</button>
</div>

Here is what I have tried so far:

  • document.getElementByClassName('jsx-352266594 button btn-post primary')(0).parentElement.click();
  • document.querySelector('.jsx-352266594 button btn-post primary').click();
  • var myPostBtn = document.getElementByClassName('jsx-352266594 button btn-post primary')(0); myPostBtn.dispatchEvent(new MouseEvent('mousedown')); myPostBtn.dispatchEvent(new MouseEvent('mouseup'));
  • var myPostBtn = document.querySelector('.jsx-352266594 button btn-post primary'); myPostBtn.dispatchEvent(new MouseEvent('mousedown')); myPostBtn.dispatchEvent(new MouseEvent('mouseup'));

Here is what might be the problem:

so the script runs like this

  1. open upload URL
  2. write caption for post
  3. upload video into post
  4. post to the account

When there is no file in the video input (steps 1-2), the post button is disabled.
However, when there is a file in the video input (steps 3-4) the post button is enabled.

maybe the source html applescript is working with still thinks the post button is disabled? I am not sure.

Please let me know if I am unclear about anything. Thanks!

html – ¿Cómo insertar una imagen en el medio de un texto sin tapar su contenido y manteniendo márgenes adecuados?

Estoy aprendiendo HTML y CSS de manera autodidacta, siguiendo y aplicando lecciones de internet, así como ésta.

Estoy intentando centrar una imagen en medio de un texto, aplicando una regla CSS, pero me arroja los siguientes problemas:

  • Interrumpe el texto en el sitio exacto donde la pongo.
  • No mantiene espacios izq. derecho, arriba, abajo, afectando su elegancia y quedando pegado al texto.
  • En lugar de intercalarse “en” el texto, se interpuso “sobre” el texto tapándolo.

Quisiera sus buenos oficios para mejorar el código que seguidamente expongo, y que igual que yo, otros lectores sabrán darle la utilidad que corresponde. De antemano gracias. Anexo código y texto simulado.

node.js – Inject content into html served by nodejs expressjs

I have an Express server. It serves a static HTML file that uses Vue.

I don’t want to render the HTML in NodeJS (e.g., using Pug), Vue already renders it on the client side and spares my server’s resources. But it requires some dynamic data. Instead of polling the server for this data after the DOM is loaded, I’m injecting it into the HTML file in NodeJS:

const htmlFile = await fs.promises.readFile('htmlFile', 'utf8'),
    myData = (object1, object2, object3, etc),
    // Try to sanitize my data only by replacing <>
    myDataLazilySanitized = (JSON.stringify(myData)).replace(/(<>)/g, (char) => char === '<' ? '&lt;' : '&gt;');

// I now add myData to a custom element, right after the <body> tag
res.send(htmlFile.replace(/<body>/i, '<body><x-server-data id="x-server-data" class="hidden">' + myDataLazilySanitized + '</x-server-data>'));

Nothing in myData has < or >, so I can safely replace them for HTML entities.

The browser then parses this data:

myData = JSON.parse(document.getElementById('x-server-data').innerHTML);

I have 2 questions:

  • Is it safe what I’m doing? (i.e., is this lazy sanitizing enough)
  • Is there an easier way to do this?

Realted:
https://stackoverflow.com/questions/58264703/nodejs-how-to-insert-an-element-in-a-html-document-using-javascript