Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/adoc-article-app/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const articlesFolderPath = path.resolve(process.cwd(), 'assets/articles');
const extension = path.extname(file.name).split('.')[1];
if ( extension === 'adoc') {
const content = await fs.readFile(`${articlesFolderPath}/${folder.name}/${file.name}`, 'utf8');
const htmlContent = await asciidoctor.convert(content);
const htmlContent = await asciidoctor.convert(content, {attributes: {imagesdir: `assets/articles/${dirName}`}});
if (!fs.existsSync(`apps/valor-software-site/src/assets/articles/${dirName}`)) {
await fs.mkdir(`apps/valor-software-site/src/assets/articles/${dirName}`).catch(() => {return;});
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ performance geral do website: analisamos se o Scully foi capaz de ajudar, e como
Scully a pontuação do Lighthouse foi de 56 para 99-100. Esse indicador inclui performance, acessibilidade, SEO e
boas práticas, como pode ver na imagem abaixo.

image::assets/articles/como-o-scully-nos-ajudou-a-atingir-99-pontos-no-lighthouse-para-uma-plataforma-b2c/60b0d1d54875f90c19c209ea_Eh8d9dD7OkG3ODiudMJ8UHZs2OmC87O3sYL3GsMQlcbPmGie0fNi_uqTD3o05BoOmwbb_DbUBxlKjfKUVq2e9FZw9AH_UGHmk73U2wDWOMi3jLABRRX1UjfDqCtWBxzLXvNQx79b.png[]
image::60b0d1d54875f90c19c209ea_Eh8d9dD7OkG3ODiudMJ8UHZs2OmC87O3sYL3GsMQlcbPmGie0fNi_uqTD3o05BoOmwbb_DbUBxlKjfKUVq2e9FZw9AH_UGHmk73U2wDWOMi3jLABRRX1UjfDqCtWBxzLXvNQx79b.png[]

==== *Melhor indexação no Google - Como localizar a empresa no topo*

Expand Down Expand Up @@ -81,7 +81,7 @@ visível e ajudou novos usuários a encontrarem o site. Você pode ver o antes e
parte vermelha, ela mostra momentos após a publicação, onde não éramos capazes de rastrear as atividades dos
usuários).

image::assets/articles/como-o-scully-nos-ajudou-a-atingir-99-pontos-no-lighthouse-para-uma-plataforma-b2c/60b0d1d5b45c99179c4dad71_pjjkxhvVDowJElf_ztEvzjnkmRdeziJG6VYbO_Zr6mjvUxUgnOTH7GhDc_tu7Hkh05N31S0L-f6HMf5LJ9901a3_ff5oQmMGZYGqqsEfrQ3Ui3OfDIDFkt1EDC0BhTv5H1onWPRg.png[]
image::60b0d1d5b45c99179c4dad71_pjjkxhvVDowJElf_ztEvzjnkmRdeziJG6VYbO_Zr6mjvUxUgnOTH7GhDc_tu7Hkh05N31S0L-f6HMf5LJ9901a3_ff5oQmMGZYGqqsEfrQ3Ui3OfDIDFkt1EDC0BhTv5H1onWPRg.png[]

*Como resultado*, a partir do momento que lançamos a nova plataforma, as vendas duplicaram.

Expand Down Expand Up @@ -127,7 +127,7 @@ construir essa conexão e adicioná-la sem nenhuma modificação:
Utilize https://developers.google.com/tag-manager/quickstart[estas instruções^] para implementar
o Google Tag Manager no seu site. Lá você encontrará o seguinte pedaço de código:

image::assets/articles/como-o-scully-nos-ajudou-a-atingir-99-pontos-no-lighthouse-para-uma-plataforma-b2c/60bf4e6e2cdce6412d434a78_Screenshot%202021-06-08%20at%2013.58.26.png[]
image::60bf4e6e2cdce6412d434a78_Screenshot%202021-06-08%20at%2013.58.26.png[]

E https://www.analyticsmania.com/post/google-tag-manager-id/[esse artigo] te mostrará como obter seu Google Tag Manager ID.

Expand All @@ -139,7 +139,7 @@ package.json. Claro, o arquivo gerado é o default, então ainda existem algumas
fazer. https://medium.com/ngconf/a-guide-to-custom-scully-plugins-5558993fd3f8[Esse guia sobre
plugins no Scully] dá uma boa ideia sobre customização de plugins.

image::assets/articles/como-o-scully-nos-ajudou-a-atingir-99-pontos-no-lighthouse-para-uma-plataforma-b2c/60b0d1d51c5fb97963e98cc3_2a4JxNNsn40mrnC1FODeMj6l1fsgYR2oCnVhykr7yvcjcZBmfMtmY3I-yFsuobT3RGRW17sQyEg2iIbhSVGs3RRhbyywxzM30dSuEBSCJ8jFRhBGgMTsnsOr6SfF0r6I9pi_FIVu.png[]
image::60b0d1d51c5fb97963e98cc3_2a4JxNNsn40mrnC1FODeMj6l1fsgYR2oCnVhykr7yvcjcZBmfMtmY3I-yFsuobT3RGRW17sQyEg2iIbhSVGs3RRhbyywxzM30dSuEBSCJ8jFRhBGgMTsnsOr6SfF0r6I9pi_FIVu.png[]

==== *Sumário*

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ Here is the problem: both Sketch and Figma tools have vertical alignment setting
text frame. If you have a text frame with a default line height, you won't notice the issue. You will bump into it
when you set a line height, which is essential when you work with text styles.

image::assets/articles/figma-vs-sketch-text-alignment-comparison/5c4edc047c1ca4b81406e86c_C5WfyuShFIOmXjh1p4zTfprlg2s_NuAOx2RAxqikxdR6f1QkbBif1bgs-s25qxp_0rvFIZt5klAiYhTQDcsK4MLU3NQv5fxVunwU_29YGib5BR-7qOBimSaNv5Vx3GbApt6Ntu8H.png[The problem #1: both Sketch and Figma tools have vertical alignment settings for a text frame.]
image::5c4edc047c1ca4b81406e86c_C5WfyuShFIOmXjh1p4zTfprlg2s_NuAOx2RAxqikxdR6f1QkbBif1bgs-s25qxp_0rvFIZt5klAiYhTQDcsK4MLU3NQv5fxVunwU_29YGib5BR-7qOBimSaNv5Vx3GbApt6Ntu8H.png[The problem #1: both Sketch and Figma tools have vertical alignment settings for a text frame.]

Let's see what happens with the text frame when you set a line height.

image::assets/articles/figma-vs-sketch-text-alignment-comparison/5c4edc04348539202fcb8066_4bueN9KXUju5VRs-R_Rl8qwMUhcb3cImyAnxTlyaCAneY4tKCu394R2X8u3zLO3muwCyD8xR8NiqZ1FPcJy4ME677KsDfik8kuiuo3HD4ceFaPG_RyGNLb8cpaCozX7OA6H5brDl.png[What happens to the text frame when you set the line height]
image::5c4edc04348539202fcb8066_4bueN9KXUju5VRs-R_Rl8qwMUhcb3cImyAnxTlyaCAneY4tKCu394R2X8u3zLO3muwCyD8xR8NiqZ1FPcJy4ME677KsDfik8kuiuo3HD4ceFaPG_RyGNLb8cpaCozX7OA6H5brDl.png[What happens to the text frame when you set the line height]

As you can notice, the Figma text frame behaves differently from Sketch and Web. The typeface is
stuck to the top of the text frame. Meanwhile, the Sketch typeface is aligned by the middle of the text frame,
Expand All @@ -26,12 +26,12 @@ which seems to be correct because the way it behaves on the Web is the same.
As a solution, you can
manually align the typeface in the middle. It may seem you are done.

image::assets/articles/figma-vs-sketch-text-alignment-comparison/5c4edc047c1ca46dc006e86d_ET_6LcJOj2gMhxb6Yyo6thcpHOiO9aRA3f_QxczPXEMFAB88v1gwTahl9BBddEuashKBZhy_-cicics4k4oZKUMV2Nz4_bADqOzjsqE9_6WwMOromTtKtk_yW57M2gQh86L9fsaG.png[The Figma text frame behaves differently from Sketch and Webflow]
image::5c4edc047c1ca46dc006e86d_ET_6LcJOj2gMhxb6Yyo6thcpHOiO9aRA3f_QxczPXEMFAB88v1gwTahl9BBddEuashKBZhy_-cicics4k4oZKUMV2Nz4_bADqOzjsqE9_6WwMOromTtKtk_yW57M2gQh86L9fsaG.png[The Figma text frame behaves differently from Sketch and Webflow]

However, let's have a look at the following example and see how it affects you while you're
working on a component. Just a reminder, you can't change element positioning inside an instance in Figma.

image::assets/articles/figma-vs-sketch-text-alignment-comparison/5c4edc04dfbd6ca7a8277245_fVGdQ2Ujp3zEIyuarEBAjTsXuIdgsu8TV3d-BWHDiq8gQyynOMaNa0GJicnKmrrFWcCLJCAUGg8yjR4yDjhKDOVLZhQwJK29yiuwFX8ijPCkxrlpi6OxVfEtklltfamA2LWXtMSd.png[The following example how it affects you while you are working with a component.]
image::5c4edc04dfbd6ca7a8277245_fVGdQ2Ujp3zEIyuarEBAjTsXuIdgsu8TV3d-BWHDiq8gQyynOMaNa0GJicnKmrrFWcCLJCAUGg8yjR4yDjhKDOVLZhQwJK29yiuwFX8ijPCkxrlpi6OxVfEtklltfamA2LWXtMSd.png[The following example how it affects you while you are working with a component.]

In the example, we have the master component on the left side where we applied the solution. So it looks like it works correctly, but when you start working with an instance, and you have more than one line of text, you will face this issue.

Expand All @@ -45,7 +45,7 @@ the height first, and only then you will be able to play around with the alignme
know that you've changed the height of the text frame so now you can customize the alignment inside your text
frame with fixed dimensions.

image::assets/articles/figma-vs-sketch-text-alignment-comparison/5c4edc04e346b768bfb24eec_tHswHVEs9uvxlA7YEmKemsf53RDPf4bLcvE2ora2pec9pr3COaZJEaK8HBWm3iLWuUIIVl1A0jJZ3i_3jHOyMfifiKQqt8Nf-CmqjEsCPFwSVAdaXrmgw60etKJ4qjy6MFDhOTUY.png[Sketch text-frame]
image::5c4edc04e346b768bfb24eec_tHswHVEs9uvxlA7YEmKemsf53RDPf4bLcvE2ora2pec9pr3COaZJEaK8HBWm3iLWuUIIVl1A0jJZ3i_3jHOyMfifiKQqt8Nf-CmqjEsCPFwSVAdaXrmgw60etKJ4qjy6MFDhOTUY.png[Sketch text-frame]

So, if we look at how a Sketch text frame behaves and how it perfectly maps to the Web after
markup, it's not clear to me, and I'm sure for other experts, why a Figma's text frame works differently. It
Expand All @@ -59,7 +59,7 @@ but makes me a little annoyed. To select a text frame you can't just click on th
have to target the typeface inside. As a workaround, you can make a small selection inside the frame but,
anyway, to move the text frame you have to pull the typeface.

image::assets/articles/figma-vs-sketch-text-alignment-comparison/5c4edc04dfbd6c9cd1277246_yTBfpVSA4SncK_CeOQhA_nQc27o88-Bv9i8_cHUb6ExzOY4ofDALulU6JjSMstB7XTuxMWttxcN5iQ_rKB-PXAfBc41EpB-YwQuqnIgE5XalzoLVoQ4JJcHQNwoHN63HX7V_M_gp.png[You can't just click on the entire text-frame area, you have to target the typeface inside.]
image::5c4edc04dfbd6c9cd1277246_yTBfpVSA4SncK_CeOQhA_nQc27o88-Bv9i8_cHUb6ExzOY4ofDALulU6JjSMstB7XTuxMWttxcN5iQ_rKB-PXAfBc41EpB-YwQuqnIgE5XalzoLVoQ4JJcHQNwoHN63HX7V_M_gp.png[You can't just click on the entire text-frame area, you have to target the typeface inside.]

==== Conclusion: Sketch or Figma

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ build into two different instances (two different URLs)

This plan can be visually presented as a timeline:

image::assets/articles/cypress-testing-running-tests-in-parallel/5cacae969ffb28e551a5ff58_Screenshot%20from%202019-04-09%2017-38-54.png[The plan presented as a timeline^]
image::5cacae969ffb28e551a5ff58_Screenshot%20from%202019-04-09%2017-38-54.png[The plan presented as a timeline^]

We're going to describe parallelization implementation in two phases: green and yellow.

Expand Down Expand Up @@ -120,13 +120,13 @@ finally kills all processes when they are finished. For these needs you can also

After adding parameters for parallelization, our Travis config looks like:

image::assets/articles/cypress-testing-running-tests-in-parallel/5cab18d1f8e0122074e675cd_f7xbhesGwc6bnK96npjdBOHv30bhgOxPp1Zvrjugs5BvMIs80tptMSQRq5Sfd8iOgyabnt48zlXbtoEaiwz2pH4r-sRw4miJAZIvRjcgPW_68KUlniyBv7EIIHuDZjSrpZZRgAe7.png[Travis config]
image::5cab18d1f8e0122074e675cd_f7xbhesGwc6bnK96npjdBOHv30bhgOxPp1Zvrjugs5BvMIs80tptMSQRq5Sfd8iOgyabnt48zlXbtoEaiwz2pH4r-sRw4miJAZIvRjcgPW_68KUlniyBv7EIIHuDZjSrpZZRgAe7.png[Travis config]

In this case, the number of our threads will be three. So we need to have three machines on Travis
for running all these tests. When our CI run finishes, we'll see list of scripts which we've ran and amount of
time spent by each Travis machine during start, test run, and kill:

image::assets/articles/cypress-testing-running-tests-in-parallel/5c98b78cd784214e809596d7_dDlLB0L_DjPrGd-SOAebWu5jcTfFvMbt4EcpiUxDhZSBJT06QmcGS8jxw7cyxpBHZ9o60JjIyRcSj3kLeBuTbYDkzy3ckAjwHdnlbD4BrUrYRgGjDGFmb4jHJNrGHuE1MV_NJVIJ.png[The list of scripts which we've ran and amount of time spent by each Travis machine during start, test run, and kill]
image::5c98b78cd784214e809596d7_dDlLB0L_DjPrGd-SOAebWu5jcTfFvMbt4EcpiUxDhZSBJT06QmcGS8jxw7cyxpBHZ9o60JjIyRcSj3kLeBuTbYDkzy3ckAjwHdnlbD4BrUrYRgGjDGFmb4jHJNrGHuE1MV_NJVIJ.png[The list of scripts which we've ran and amount of time spent by each Travis machine during start, test run, and kill]

Time, which is displayed on Travis, was spent on starting the machine, installing development
packages, building the library and Demo application, and running test.
Expand All @@ -135,12 +135,12 @@ It looks like there's no
problem at all, but on the CI Dashboard we'll see that only two machines took part in the test run. The
Dashboard also shows us time, which was spent for the direct test run: 2:26 minutes.

image::assets/articles/cypress-testing-running-tests-in-parallel/5c98b78c6929126465bb7749_5jJAhf0_shpDqdSn5RoXQHSQjoxJgYqInP2mS6QlMp-JAW-selWm2CuF37meAav1-vICO4nryz75ihbtEa_T1VbeAsa6X9O6fM3E2x9TKDRcKFVg_bgJTgUI9Ws8SZ-P_EgupHNo.png[The Dashboard shows time, which was spent for the direct test run.]
image::5c98b78c6929126465bb7749_5jJAhf0_shpDqdSn5RoXQHSQjoxJgYqInP2mS6QlMp-JAW-selWm2CuF37meAav1-vICO4nryz75ihbtEa_T1VbeAsa6X9O6fM3E2x9TKDRcKFVg_bgJTgUI9Ws8SZ-P_EgupHNo.png[The Dashboard shows time, which was spent for the direct test run.]

If we dive deeper into the job on the third Travis machine, we'll see that the job actually has
started, but not in time:

image::assets/articles/cypress-testing-running-tests-in-parallel/5ca7390f89cf383d85edc1a7_9ZBi8xYYrDUZCPkf3fWQpZVhYtVVxmhvvzJhqwkiMPDfw2j9XDapV9pmQ1XFoWAcrRfmcF4qoAB43Uhu7bFjzmXtO6k8JBnU4kneguPRkMMuTJ9jK_kn0Jiw_jFRvRYEv5gELRel.png[Screen. The job actually has started, but not in time]
image::5ca7390f89cf383d85edc1a7_9ZBi8xYYrDUZCPkf3fWQpZVhYtVVxmhvvzJhqwkiMPDfw2j9XDapV9pmQ1XFoWAcrRfmcF4qoAB43Uhu7bFjzmXtO6k8JBnU4kneguPRkMMuTJ9jK_kn0Jiw_jFRvRYEv5gELRel.png[Screen. The job actually has started, but not in time]

What happened?

Expand Down Expand Up @@ -225,7 +225,7 @@ ____
_"The run you are attempting to access is already complete and will not accept new groups."_
____

image::assets/articles/cypress-testing-running-tests-in-parallel/5c98b78c544edd8398605408_TkxUBkM5og4kOIbqBEqQhXxo4ICR9yi7_u6oPMscqTWXrcLkbaSuIpszjavnieBG1zjx0IJXP3Vm2Yv7zOzZtFr1V-GX_FWognMnu6LTRNPmYdm2s1yIauaOxnbNmNYg6m4wj_X-.png[The Error]
image::5c98b78c544edd8398605408_TkxUBkM5og4kOIbqBEqQhXxo4ICR9yi7_u6oPMscqTWXrcLkbaSuIpszjavnieBG1zjx0IJXP3Vm2Yv7zOzZtFr1V-GX_FWognMnu6LTRNPmYdm2s1yIauaOxnbNmNYg6m4wj_X-.png[The Error]

What is the reason for this mess?

Expand All @@ -242,14 +242,14 @@ Another way to solve this issue is to set a "run completion delay" - the time th
groups before completing (in seconds). All you need is to go to the Dashboard =&gt Project =&gt Settings and
set this time into "Parallelization"section:

image::assets/articles/cypress-testing-running-tests-in-parallel/5cadabdc417d96b167228524_Screenshot%20from%202019-04-10%2011-33-22.png[Set this time into &quot Parallelization&quot section]
image::5cadabdc417d96b167228524_Screenshot%20from%202019-04-10%2011-33-22.png[Set this time into &quot Parallelization&quot section]

However, when we thought that we were done, an unpredictable phase of stabilization emerges.

In our case, when the number of tests reached 400+, we were greeted with a "FATAL ERROR: CALL_AND_RETRY_LAST
Allocation failed - JavaScript heap out of memory" issue.

image::assets/articles/cypress-testing-running-tests-in-parallel/5ca738fe04fdce4d0e9235c9_YREV9zf5eOjr4GFXmy76Z3ms9_-sgH_GixYnLGgjifRO6rZTaFWYCeAI9qAY91ZC9q0yjB5RqQUwrqZWMXqwCHCyRbVa9P62-uSbk94s8k_egn2GpjTEmtU8gYlN3R9Gr7rlG4Qn.png[Greeted with a FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory issue.]
image::5ca738fe04fdce4d0e9235c9_YREV9zf5eOjr4GFXmy76Z3ms9_-sgH_GixYnLGgjifRO6rZTaFWYCeAI9qAY91ZC9q0yjB5RqQUwrqZWMXqwCHCyRbVa9P62-uSbk94s8k_egn2GpjTEmtU8gYlN3R9Gr7rlG4Qn.png[Greeted with a FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory issue.]

To deal with this issue, we've checked https://github.com/cypress-io/cypress/issues/2316[Cypress GitHub bug tracker^] and found a solution there! According to provided information, we need to add an extra option for ts-loader, like so:

Expand All @@ -262,20 +262,20 @@ To deal with this issue, we've checked https://github.com/cypress-io/cypress/iss

And magic happens.. It a.c.t.u.a.l.l.y works, phew!

image::assets/articles/cypress-testing-running-tests-in-parallel/5c98b78cd784213e1e9596d8_2TLQijarlStUBS8zl89d5nPI-ODRPKvhOmXojaArDa5jTjkcFGE6Q4O7R-dg1ZwYZIizTBLNYRXCZ6ijSmbWyj9TO1zkpCeOOe03qaBWrONlCEjLpwab_xE-qyWU8c20COgMCe9C.png[add an extra option for ts-loader]
image::5c98b78cd784213e1e9596d8_2TLQijarlStUBS8zl89d5nPI-ODRPKvhOmXojaArDa5jTjkcFGE6Q4O7R-dg1ZwYZIizTBLNYRXCZ6ijSmbWyj9TO1zkpCeOOe03qaBWrONlCEjLpwab_xE-qyWU8c20COgMCe9C.png[add an extra option for ts-loader]

According to our results from the following screenshot, our 522 tests took about 10 minutes. Note
that the biggest specs were run first and the smallest were latest.

image::assets/articles/cypress-testing-running-tests-in-parallel/5c98b78d544edde73b605409_l1PcV6xixQCMNa1M0l3Qs_Vdw5Lzyw4UuRP2wPUBw556P79s3Rf_Meq3otSupxU2out5Gf_tjj513ojmrsZfnWziLFtmXONFnzhw7Kqf6FnWcrVAnOU84wPoR37P-mtZwLuNGkBh.png[The results]
image::5c98b78d544edde73b605409_l1PcV6xixQCMNa1M0l3Qs_Vdw5Lzyw4UuRP2wPUBw556P79s3Rf_Meq3otSupxU2out5Gf_tjj513ojmrsZfnWziLFtmXONFnzhw7Kqf6FnWcrVAnOU84wPoR37P-mtZwLuNGkBh.png[The results]

*Results*

While we were implementing parallelization, the number of our
tests increased several times. However, let's count the average time (in minutes) that it takes to run them
(this statistic actual for the period from February to March of 2019).

image::assets/articles/cypress-testing-running-tests-in-parallel/5c98eff8de94e85e2807f5c5_rh1xcaXL1IYqJQNMxZTQbEdKKd63SX9HCxVbj3bI9AgYwwUIj4DO1KRo0N2Qz_AdoEVoiYC-TyF1kCtlMu2VFJZTisC7rJcBOqiNYehCF7oSIRaLRjgyRJmQwTTRJoUT2wGF_-tz.png[The statistic actual for the period from February to March of 2019).]
image::5c98eff8de94e85e2807f5c5_rh1xcaXL1IYqJQNMxZTQbEdKKd63SX9HCxVbj3bI9AgYwwUIj4DO1KRo0N2Qz_AdoEVoiYC-TyF1kCtlMu2VFJZTisC7rJcBOqiNYehCF7oSIRaLRjgyRJmQwTTRJoUT2wGF_-tz.png[The statistic actual for the period from February to March of 2019).]

These are just words. Where is the proof?

Expand Down
Loading