tag:blogger.com,1999:blog-61580489501256935102024-03-19T19:09:04.624+07:00Google Developers Indonesia BlogLocal blog covering the latest news, updates, and stories for Indonesian speaking developers. Unknownnoreply@blogger.comBlogger555125tag:blogger.com,1999:blog-6158048950125693510.post-7156888713981504142024-03-05T18:18:00.009+07:002024-03-15T18:20:01.981+07:00Memperkenalkan mesin Text-To-Speech baru pada Wear OS<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="http://android-developers.googleblog.com/2024/03/introducing-new-text-to-speech-engine-wear-os.html"/>
<meta name="original_url" content="http://android-developers.googleblog.com/2024/03/introducing-new-text-to-speech-engine-wear-os.html"/>
<style id="page-skin-1" type="text/css"><!--
body {
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
-webkit-font-smoothing: antialiased;
color: #202124
}
h1 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px
}
h2 {
font-size: 30px;
line-height: 40px
}
h2,
h3 {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500
}
h3 {
font-size: 24px;
line-height: 32px
}
h4 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 26px
}
h5 {
font-size: 16px;
line-height: 24px
}
h5,
h6 {
font-family: Roboto, sans-serif;
font-weight: 600
}
h6 {
font-size: 14px;
line-height: 22px
}
.display {
font-family: Roboto, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 67.2px
}
.hidden-text {
height: 1px;
overflow: hidden;
pointer-events: none;
position: absolute;
top: -10px;
width: 1px
}
img,
video {
border: 0;
height: auto;
max-width: 100%
}
body {
position: relative;
min-height: 100vh
}
body.no-scroll {
overflow: hidden
}
a {
color: #4184f3;
text-decoration: none
}
a:focus,
a:focus-visible {
outline-offset: -2px
}
.content-wrap {
padding-top: 200px;
max-width: 800px;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:915px) {
.content-wrap {
padding-top: 100px
}
}
.full-width {
width: 100%
}
.icon-link {
height: 42px;
width: 132px;
border-radius: 80px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: baseline;
-ms-flex-pack: center;
justify-content: baseline;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
background: transparent;
border: none;
color: black !important
}
.icon-link:hover {
background-color: hsla(213, 7%, 76%, .2)
}
.icon-link:focus {
background-color: hsla(213, 7%, 76%, .26)
}
.icon-link:active {
background-color: hsla(213, 7%, 76%, .32)
}
.adb-container {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto;
max-width: 1420px
}
@media only screen and (max-width:767px) {
.adb-container {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--large {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto
}
@media only screen and (max-width:767px) {
.adb-container--large {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--flex-horizontal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.section,
body {
margin: 0
}
.adb-card {
position: relative;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
margin: 40px 0;
padding: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: box-shadow .2s linear, opacity .2s linear;
transition: box-shadow .2s linear, opacity .2s linear, -webkit-box-shadow .2s linear
}
.divider {
border: none;
height: 1px;
color: #DADCE0;
background-color: #DADCE0;
margin: 0 20px;
}
.adb-card:first-child {
background-color: #d7effe;
border: none;
padding: 32px 24px 32px;
margin: 40px 20px 60px;
}
@media only screen and (max-width:850px) {
.adb-card {
max-height: unset;
padding: 0 20px
}
.adb-card:first-child {
margin-bottom: 40px;
}
}
@media only screen and (max-width:600px) {
.adb-card:first-child {
margin: 0 -20px 40px;
}
.adb-card {
border-radius: 0;
padding: 0;
}
.divider {
margin: 0;
}
.content-wrap {
padding-top: 54px;
}
}
.adb-card:focus-within,
.adb-card:hover {
-webkit-box-shadow: 0 0 36px rgba(0, 0, 0, .1);
box-shadow: 0 0 36px rgba(0, 0, 0, .1);
cursor: pointer
}
.adb-card__href {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.adb-card__image-wrapper {
overflow: hidden;
position: relative;
width: auto;
-webkit-flex-basis: 40%;
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.adb-card__content {
padding: 24px 0 0
}
.adb-card__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 600;
margin-bottom: 12px
}
.adb-card__info {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 24px
}
.adb-card__description {
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin-bottom: 48px
}
.adb-card:hover .adb-content__image-wrapper img,
.adb-card__href:focus~.adb-content__image-wrapper img {
-webkit-transform: scale(1.03);
transform: scale(1.03);
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease
}
.devsite-footer {
padding: 0 24px;
border-top: 1px solid #bdc1c6
}
.devsite-footer li {
display: block
}
.devsite-footer li a {
text-decoration: none;
font-size: 14px;
line-height: 16px;
color: #202124
}
.devsite-footer li a:focus,
.devsite-footer li a:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-linkboxes-list {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
padding: 24px 0;
border-bottom: 1px solid #bdc1c6
}
@media only screen and (max-width:767px) {
.devsite-footer-linkboxes-list {
grid-template-columns: 1fr;
padding-left: 0
}
}
.devsite-footer-linkbox {
display: block
}
.devsite-footer-linkbox-heading {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin: 0 0 4px
}
.devsite-footer-linkbox ul {
padding-left: 0
}
.devsite-footer-sites-list {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-utility nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 24px 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0
}
}
.devsite-footer-utility-button {
justify-self: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 20px;
margin-left: auto;
padding-left: 16px
}
.devsite-footer-utility-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 8px 0 0
}
.devsite-footer-utility-item:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.devsite-footer-utility-item:not(:first-child):before {
content: "|";
margin: 0 8px 0 0
}
}
.devsite-footer-sites {
border-bottom: 1px solid #bdc1c6;
padding: 24px 0 23px
}
.devsite-footer-sites-logo {
height: 32px;
margin-top: 5px;
width: 185px
}
.devsite-footer-sites-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0
}
.devsite-footer-sites-item {
margin: 0 0 0 40px
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-item {
margin: 0
}
}
.devsite-footer-sites-link {
display: block;
padding: 8px 0;
color: #202124
}
.devsite-footer-sites-link:focus,
.devsite-footer-sites-link:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-utility-link:focus {
text-decoration: underline
}
.devsite-footer-utility .devsite-footer-utility-button {
line-height: 20px;
font: 400 14px/16px Roboto, sans-serif
}
.devsite-footer-utility .devsite-footer-utility-button:before {
content: "";
margin: 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility .devsite-footer-utility-button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
margin: 18px 0 12px
}
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link {
border: 0;
background: #1a73e8;
color: #fff;
line-height: 36px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0 0 16px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px 0;
box-shadow: 0 1px 2px 0;
display: inline-block;
font: 500 14px/36px Roboto, sans-serif;
height: 36px;
letter-spacing: 0;
min-width: 36px;
padding: 0 24px;
text-align: center;
-webkit-transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s, -webkit-box-shadow .2s;
vertical-align: middle;
white-space: nowrap
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link:hover {
background: #1765cc
}
.adb-page__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px;
text-align: center;
color: #202124
}
.adb-detail hr {
border: 1px solid #dadce0;
margin: 40px 0
}
.adb-detail__title {
font-size: 40px;
font-weight: 600;
line-height: 48px
}
.adb-detail__info {
font-weight: 400;
font-size: 16px;
line-height: 24px
}
.adb-detail__content {
min-height: 200px
}
.icon-sidebar {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
top: 0;
left: -300px;
max-width: 220px;
gap: 8px
}
.icon-sidebar .share-text {
font-weight: 500;
margin-left: 4px
}
@media only screen and (max-width:1440px) {
.icon-sidebar {
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
left: 0;
margin-top: -20px;
margin-bottom: 40px;
}
.icon-sidebar .share-text {
display: none;
}
}
.copy-tooltip {
display: none;
position: fixed;
bottom: 16px;
left: 10px;
z-index: 100;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.copy-tooltip .copy-tooltiptext {
width: 200px;
background-color: #073042;
color: #fff;
text-align: center;
border-radius: 80px;
padding: 8px 16px;
}
.header__overlay {
height: 100vh;
left: 0;
position: fixed;
width: 100vw;
border: none;
background-color: rgba(0, 0, 0, .4);
-webkit-animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
opacity: 0;
top: 0;
z-index: -1;
display: none
}
.header__overlay.show {
display: block;
opacity: 1;
z-index: 800;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out
}
.social-icons__links {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
.social-icons__links path {
fill: #80868b
}
.social-icons__container-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin-right: 14px
}
@media only screen and (max-width:1000px) {
.social-icons__container-header {
display: none
}
}
.adb-blog-logo:focus,
.adb-blog-logo:hover {
opacity: .7;
text-decoration: none
}
.adb-blog-logo__image {
height: 32px;
margin-left: 0;
margin-top: 6px
}
@media only screen and (min-width:840px) {
.adb-blog-logo__image {
margin-left: 24px
}
}
.header {
position: fixed;
background: #fff;
z-index: 700;
top: 0;
width: 100%;
overflow: hidden;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
height: auto
}
.header .top-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 24px;
height: 50px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #e6e6e6
}
@media only screen and (max-width:839px) {
.header .top-row {
padding: 0 16px
}
}
.header .top-row__left,
.header .top-row__right {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 100%
}
.header .nav-row,
.header .top-row__left,
.header .top-row__right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.header .nav-row {
background: #fff;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.header .nav-items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 50px;
position: relative;
background-color: #fff
}
@media only screen and (max-width:839px) {
.header .nav-items {
display: none
}
}
.header .nav-items tab {
position: relative
}
.header .nav-items tab.active .header__nav-item:after,
.header .nav-items tab:hover .header__nav-item:after {
background: #1a73e8
}
.header .nav-items tab.active .header__nav-item,
.header .nav-items tab:focus-within a {
color: #202124
}
@media only screen and (max-width:839px) {
.header .header__cta,
.header .nav-items {
display: none
}
}
.header__search-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 6px 0 6px 24px;
overflow: hidden;
position: relative;
margin-right: 36px;
border-radius: 4px
}
@media only screen and (max-width:767px) {
.header__search-container:not(.mobile) {
display: none
}
}
.header__search-container.mobile {
margin: 0 0 20px
}
.header__search-container.mobile #searchform,
.header__search-container.mobile .searchbox {
width: 100%
}
.header__search-container .searchbox {
border-radius: 2px
}
.header__search-container .searchbox input {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
font-weight: 500;
color: #80868b;
border: 0;
margin: 0;
height: 20px;
outline: 0;
padding: 8px 8px 8px 40px;
width: 100%;
-webkit-transition: background .2s;
transition: background .2s
}
.header__search-container .searchbox input::-webkit-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input:-ms-input-placeholder,
.header__search-container .searchbox input::-ms-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input::placeholder {
color: #80868b
}
.header__search-container .searchbox input:hover {
background: #e8eaed
}
.header__search-container .material-icons {
color: #80868b;
left: 8px;
position: absolute;
top: 6px;
-webkit-transition: color .2s;
transition: color .2s
}
.header__cta {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #1a73e8 !important;
text-decoration: none
}
.header__cta.mobile {
padding: 18px 0
}
.header__cta:hover .cta-icon {
margin-left: 0;
margin-right: 12px
}
.header__cta .cta-icon {
-webkit-transition: margin-right .2s linear, margin-left .2s linear;
transition: margin-right .2s linear, margin-left .2s linear;
margin-left: 4px;
margin-right: 8px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.header__cta .cta-icon path {
fill: #1a73e8
}
.header__nav-item {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #80868b;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 18px;
height: 100%;
text-transform: none;
text-decoration: none
}
.header__nav-item:hover {
color: #202124
}
.header__nav-item.mobile {
font-weight: 500;
padding: 0
}
.header__nav-item:after {
bottom: 0;
border-radius: 3px 3px 0 0;
content: "";
display: block;
height: 3px;
left: 50%;
min-width: 20px;
position: absolute;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(100% - 24px)
}
.header__hamburger {
border: 0;
background: none;
outline: none;
padding: 0;
margin: 1px 8px 0 -4px;
padding: 8px;
color: rgba(0, 0, 0, .65);
cursor: pointer
}
@media only screen and (min-width:840px) {
.header__hamburger {
display: none
}
}
.header__side-menu {
background-color: #fff;
bottom: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
z-index: 900
}
.header__side-menu.is-open {
-webkit-transform: translateX(0);
transform: translateX(0);
width: 80%
}
.header__side-menu.is-open,
.header__side-menu__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%
}
.header__side-menu__content {
padding: 18px 16px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.header__side-menu__content .spacer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.header__side-menu__title {
font-family: Roboto, sans-serif;
font-size: 20px;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px
}
.header__side-menu__items {
list-style: none
}
.header__side-menu__items li {
padding: 12px 0
}
.header__side-menu__items tab {
position: relative
}
.header__side-menu__items tab.active .header__nav-item,
.header__side-menu__items tab:focus-within a {
color: #202124
}
.header__side-menu__bottom {
border-top: 1px solid #e6e6e6
}
.header__side-menu__logo-container {
background: #fff;
height: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 4px 16px;
border-bottom: 1px solid #e6e6e6
}
#nav .widget {
margin: 0
}
.featured__wrapper {
width: 100%;
border: 0;
background-color: #e8f0fe;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 80px 0
}
@media only screen and (max-width:767px) {
.featured__wrapper {
padding: 0
}
}
.featured__inner {
max-width: 1080px;
width: calc(100% - 24px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
padding: 48px
}
@media only screen and (min-width:768px) {
.featured__inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
padding: 12px 80px
}
}
.featured__href {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.featured__image {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
max-width: 100%;
}
.featured__content {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-top: 24px;
width: 100%
}
.featured__title {
font-size: 32px;
line-height: 44.8px;
font-weight: 500;
font-family: Android Euclid, Roboto, sans-serif;
margin-bottom: 15px
}
.featured__info {
font-family: Roboto Mono, monospace;
font-weight: 400;
font-size: 12px;
line-height: 160%;
margin-bottom: 24px
}
.featured__description {
margin-bottom: 48px
}
.preview.featured__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f1f3f4;
padding: 64px 0 120px
}
.preview.featured__wrapper h1 {
margin: 0 0 64px
}
.blog-label-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px
}
.blog-label-container .blog-label {
text-decoration: none;
z-index: 3
}
.blog-label-container .blog-label span {
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
background-color: #F1F3F4;
border-radius: 100px;
padding: 4px 16px;
color: #3c4043
}
.adb-card:first-child .blog-label span {
background-color: #fff;
}
.blog-label-container .blog-label span:focus,
.blog-label-container .blog-label span:hover {
background-color: #D7EFFE
}
.adb-card:first-child .blog-label span:focus,
.adb-card:first-child .blog-label span:hover {
background-color: #F1F3F4
}
.blog-label-container .blog-label span:focus-visible {
outline-offset: 0
}
#pagination-container {
display: none
}
.pagination {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.pagination .page-button {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: black;
background-color: #3DDC84;
padding: 16px 24px;
border-radius: 80px;
text-decoration: none
}
.pagination .page-button:focus,
.pagination .page-button:hover {
background-color: #3DDC8460;
}
.pagination .page-button.disabled {
color: #80868b;
background-color: #f1f3f4
}
--></style>
<style id="template-skin-1" type="text/css"><!--
--></style>
<style>
/** Blogger default styles **/
html, .Label h2, #sidebar .rss a, .BlogArchive h2, .FollowByEmail h2.title, .widget .post h2 {
font-family: Roboto, sans-serif;
}
.plusfollowers h2.title, .post h2.title, .widget h2.title {
font-family: Roboto, sans-serif;
}
pre, .post-content pre.prettyprint {
background-color: #f7f7f7;
border: 1px solid #ddd;
margin: 0 0 1em 0;
padding: 1em;
overflow: auto;
}
pre, code {
font-size: 9pt;
line-height: 125%;
font-family: monospace;
}
pre, code {
color: #060;
font: 13px/18px Consolas, 'Liberation Mono', Menlo, Monaco, Courier, monospace;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
/* Styles for https://github.com/google/code-prettify */
.com { color: #060; }
.kwd { color: #008; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.fb-custom img, .twitter-custom img, .gplus-share img, .email-custom img {
cursor: pointer;
opacity: 0.54;
}
.twitter-custom, .gplus-share, .fb-custom {
margin-right: 12px;
}
/** Blogger custom theme **/
.adb-header,
.searchBox input {
box-sizing: border-box;
}
.popout-nav {
background-color: white;
width: 280px;
height: 100%;
position: fixed;
z-index: 6;
left: -280px;
transition: left 0.2s;
}
.popout-search {
background-color: white;
width: 280px;
position: fixed;
z-index: 6;
right: -280px;
transition: right 0.2s;
top: 0;
}
.popout-search .widget {
margin: 0;
}
.popout-search #BlogSearch2_form .popout-options {
padding-right: 24px;
width: calc(100% - 48px);
}
.dropdown-nav {
display: none;
background-color: white;
width: 104px;
position: fixed;
padding: 4px 0px 3px 0px;
z-index: 4;
left: 352px;
top: 176px;
transition: top 0.2s;
box-shadow: 0 0px 2px 0 rgba(60,64,67,.3), 0 0px 6px 2px rgba(60,64,67,.15), inset 0 0px 6px -4px rgba(154,160,166,.5);
}
.dropdown-options {
align-items: center;
display: flex;
flex-wrap: wrap;
width: 94px;
height: 48px;
padding-left: 10px;
}
.dropdown-options:hover {
background-color: #f7f9fa;
}
.dropdown-options span {
color: #80868b;
}
.popout-options {
padding-right: 8px;
padding-left: 24px;
padding-top: 16px;
padding-bottom: 15px;
display: inline-block;
width: calc(100% - 32px);
border-top: 1px solid #ddd;
font-size: 13px;
font-weight: 700;
color: #80868b !important;
}
.popout-options:last-of-type {
border-bottom: 1px solid #ddd;
}
.popout-options:first-of-type {
border-top: 0;
}
#close-popout {
padding: 12px 12px 11px 20px;
}
#close-search-popout {
padding: 12px 20px 11px 12px;
text-align: right;
}
.popout-search-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
transition: opacity 0.2s;
}
.popout-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
z-index: 5;
transition: opacity 0.2s;
}
html {
background-color: #fff;
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
width: 100%;
position: absolute;
padding: 0;
/* This ensures that the scroll bar is always present, which is needed */
/* because render happens after page load; otherwise the header */
/* would 'bounce' in-between states. */
min-height: 150%;
}
h2 {
font-size: 130%;
}
h1, h2, h3, h4, h5 {
line-height: 1.5em;
margin-bottom: 1em;
}
html, h4, h5, h6 {
font-size: 14px;
}
a, a:visited {
color: #039be5;
text-decoration: none;
}
pre code {
display: block;
}
.cols-wrapper {
margin-top: 56px;
}
.header-outer, .cols-wrapper {
padding: 0 60px;
}
html, .header-inner a {
color: #212121;
color: rgba(0, 0, 0, .87);
}
/** Archive widget. **/
.BlogArchive {
font-size: 13px;
font-weight: normal;
}
.BlogArchive .widget- {
display: none;
}
.BlogArchive h2, .Label h2 {
color: #039be5;
text-decoration: none;
}
/* Specificity needed here to override widget CSS defaults. */
/* Months */
.Label {
font-size: 13px;
font-weight: normal;
}
.sidebar-icon {
display: inline-block;
width: auto;
vertical-align: middle;
height: 24px;
margin-right: 24px;
}
.sidebar-social-links {
align-items: center;
}
.sidebar-social-links .android-logo,
.android-logo {
height: 48px;
}
.sidebar-social-links a:last-child img {
margin-right: 0;
}
.Label .widget- {
display: none;
}
.searchBox input {
border: 1px solid #eee;
color: #212121;
color: rgba(0, 0, 0, .87);
font-size: 14px;
padding: 8px 8px 8px 40px;
width: 100%;
font-family: Android Euclid, Roboto, sans-serif;
background: url('https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png') 8px center no-repeat;
}
.searchBox ::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .54);
}
.section {
margin: 0;
padding: 0;
}
#sidebar-top {
border: 1px solid #eee;
}
#sidebar-top > div {
margin: 16px 0;
}
/*main post*/
.post {
margin-bottom: 30px;
}
#main .post .title {
margin: 0;
}
#main .post .title a {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: normal;
font-size: 24px;
}
.message, #main .post .post-header {
margin: 0;
padding: 0;
}
#main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption {
color: #444;
font-weight: 500;
}
#main .post .post-header .published {
font-size: 11px;
font-weight: bold;
}
.post-header .publishdate {
font-size: 16px;
font-weight: normal;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#main .post .post-footer {
font-size: 12px;
padding-bottom: 21px;
}
.label-footer {
margin-bottom: 12px;
margin-top: 12px;
}
#main .post .post-header .published {
margin-bottom: 16px;
}
.post .post- {
color: #545454;
color: rgba(0, 0, 0, .67);
font-size: 16px;
margin: 16px 0 36px 0;
line-height: 24px;
word-wrap: break-word;
}
.post-summary {
display: none;
}
/* Override all post images/videos to left align. */
@media (max-width: 712px) {
.post- img {
max-width: 100%;
height: auto;
width: auto;
}
}
.post- .tr-caption-container img {
margin-bottom: 12px;
}
.post- iframe, .post- embed {
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
}
.post- .carousel-container {
margin-bottom: 48px;
}
#main .post- b {
font-weight: 500;
}
/* These are the main paragraph spacing tweaks. */
#main .post- br {
: '';
display: block;
padding: 4px;
}
.post-content .space {
display: block;
height: 8px;
}
.post-content iframe+.space, .post-content iframe+br {
padding: 0 !important;
}
#main .post .jump-link {
margin-bottom: 10px;
}
.post-content img, .post-content iframe {
margin: 30px 0 20px 0;
}
.post-content > img:first-child, .post-content > iframe:first-child {
margin-top: 0;
}
.col-right .section {
padding: 0 16px;
}
#aside {
background: #fff;
border: 1px solid #eee;
border-top: 0;
z-index: 2;
}
#aside .widget {
margin: 0;
}
#aside .widget h2, #ArchiveList .toggle+a.post-count-link {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: 400 !important;
margin: 0;
}
#ArchiveList .toggle {
float: right;
}
#ArchiveList .toggle .material-icons {
padding-top: 4px;
}
#sidebar-top,
#sidebar {
background: #fff;
}
#sidebar .tab {
cursor: pointer;
}
#sidebar .tab .arrow {
display: inline-block;
float: right;
}
#sidebar .tab .icon {
display: inline-block;
vertical-align: top;
height: 24px;
width: 24px;
margin-right: 13px;
margin-left: -1px;
margin-top: 1px;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget-content > :first-child {
padding-top: 8px;
}
#sidebar .active .tab .arrow {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#sidebar .arrow {
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget h2 {
font-size: 14px;
line-height: 24px;
display: inline-block;
}
#sidebar .widget .BlogArchive {
padding-bottom: 8px;
}
#sidebar .widget {
border-bottom: 1px solid #eee;
box-shadow: 0px 1px 0 white;
margin-bottom: 0;
padding: 14px 0;
min-height: 20px;
}
#sidebar .widget:last-child {
border-bottom: none;
box-shadow: none;
margin-bottom: 0;
}
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style: none;
padding: 0;
}
#sidebar ul li a {
line-height: 32px;
}
#sidebar ul ul ul li a {
line-height: 24px;
}
#sidebar .archive {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC');
height: 24px;
line-height: 24px;
padding-left: 30px;
}
#sidebar .labels {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC');
height: 20px;
line-height: 20px;
padding-left: 30px;
}
#sidebar .rss a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII=');
}
#sidebar .subscription a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC');
}
#sidebar-bottom {
background: #f5f5f5;
border-top: 1px solid #eee;
}
#sidebar-bottom .widget {
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
text-align: center;
}
#sidebar-bottom > div:last-child {
border-bottom: 0;
}
#sidebar-bottom .text {
line-height: 20px;
}
/* Home, forward, and backward pagination. */
.blog-pager {
padding-top: 10px;
margin-top: 15px;
text-align: right !important;
}
#blog-pager {
padding: 40px 0 0;
}
#blog-pager a {
display: inline-block;
}
.blog-pager i.disabled {
opacity: 0.2 !important;
}
.blog-pager i {
color: black;
margin-left: 16px;
opacity: 0.54;
}
.blog-pager i:hover, .blog-pager i:active {
opacity: 0.87;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
.gplus-profile {
background-color: #fafafa;
border: 1px solid #eee;
overflow: hidden;
width: 212px;
}
.gplus-profile-inner {
margin-left: -1px;
margin-top: -1px;
}
/* Sidebar follow buttons. */
.followgooglewrapper {
padding: 12px 0 0 0;
}
.loading {
visibility: hidden;
}
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 40px !important;
}
/* ADB */
.adb-hero-area {
min-height: 104px;
background-color: #073042;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
z-index: 5;
position: fixed;
width: 100%;
}
.adb-hero-logo {
height: 80px;
position: absolute;
top: 12px;
left: 16px;
}
.adb-footer-btm {
display: flex;
margin: 0 24px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 40px;
}
.subscribe-btn {
color: black;
background-color: #3DDC84;
border-radius: 100px;
font: 500 16px/24px Android Euclid,Roboto,sans-serif;
padding: 12px 24px;
border: 0;
}
.adb-footer-info {
align-items: center;
display: flex;
padding: 0;
margin: 9px 0 0 -8px;
font-size: 13px;
}
.footer-list {
list-style: none;
padding: 0 8px;
}
.subscribe-info {
list-style: none;
padding: 0 8px 0 0;
font-size: 13px;
color: black;
}
.footer-newsletter {
display: flex;
align-items: center;
}
.adb-header-inner {
display: flex;
align-items: center;
}
.adb-header {
background-color: white;
color: #fff;
height: 48px;
left: 0;
overflow: hidden;
padding: 36px 24px;
right: 0;
top: 104px;
z-index: 4;
display: flex;
align-items: center;
position: fixed;
border-bottom: solid 1px #DADCE0;
}
.adb-shadow {
margin-top: 48px;
height: 1px;
width: 100%;
position: fixed;
background: white;
z-index: 2;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
}
.adb-logo-box {
display:inline;
}
.adb-burger-box {
display: none;
margin: 0 16px 0 0;
}
.adb-search-box {
display: none;
margin: 0 0 0 16px;
}
.adb-htag-box {
display: flex;
align-items: center;
}
.adb-header-tags {
padding: 0 24px 0 0;
}
.adb-header-tags ~ .atb-header-tags {
padding: 0 24px;
}
.adb-header-tags a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #5F6368;
}
.adb-header-tags a:hover {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #073042;
}
.more-dropdown {
display: none;
}
.dropdown-icon {
transition: all 0.3s;
}
.adb-header-logo {
display: inline-block;
vertical-align: -11px;
width: 134px;
height: 32px;
}
.adb-header-title {
color: #fff;
display: inline-block;
font-size: 20px;
font-weight: normal;
}
.adb-header-links {
border-left: 1px solid rgba(0, 0, 0, .1);
display: block;
left: 250px;
list-style: none;
margin: 0;
padding: 12px 0 12px 18px;
position: absolute;
top: 0;
}
.adb-header-link-item {
display: inline-block;
}
.adb-header-link, .adb-header-link:visited {
color: #fff;
display: inline-block;
font-weight: 500;
opacity: .7;
padding: 12px 9px;
text-transform: uppercase;
vertical-align: 2px;
}
.adb-header-link:hover, .adb-header-link:focus {
color: #fff;
opacity: 1;
}
.adb-header-console, .adb-header-console:visited {
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
color: #fff;
float: right;
font-size: 14px;
font-weight: 500;
line-height: 28px;
padding: 4px 10px;
position: relative;
text-transform: uppercase;
transition: box-shadow .2s;
z-index: 60;
}
.adb-header-console:hover {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
color: #fff;
}
.adb-header-console:focus {
background-color: rgba(63, 81, 181, .1);
color: #fff;
}
.adb-header-console-image {
vertical-align: -5px;
}
.adb-hero {
background-color: #dcedc8;
margin-top: 64px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
color: #414141;
display: inline-block;
font-weight: 500;
margin: 25px 25px 0;
}
.adb-hero-inner {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAc4AAADZCAMAAACenCAVAAAAvVBMVEXc7cjY68PT6bvR57fQ57bY6sPZ68TU6bvR6LfP5rTQ57XR57jW6r7b7cfa7MbS6LnS6Lrb7cbQ6Lfb7MbX6r/Z68PY6sLV6b7U6b3U6r3T6LnX68Da7MXP57Tb7Mfc7cfW6b/P57XS57nY68LY68HU6L3W6r/W6b7T6brX6sDV6rzQ57fa7MTV6b3T6Lra68TR57bX68HW6sDS57jU6bzO5rTP5rXZ7MXR6LbZ68XX6sHT6LvV6bzS6LjZ7MILrTuqAAAIyklEQVR4AezXhXEkUQwE0B6+Xhg8MzND/smZ4UsLBSb9Kr0UhI1vl6RZnqUFlnBl9Y+j8WQK4+qGr9oOi7iKr0YFTOt6vhsPmM81/FDAspafUszl/vNTXsOuFYZWMYfrRgyswa51hjLM4TYYGsOuTQpbgNO2dyjAroxCvgunpZT2YFZDaQKnlFRg1z6lgxpOOqS0CbtqKutwwhGVYxh2QqWGC/WUMlhWH1BK4QKnVFZh2hmVEh/cXk7pHLbt5pQafHCT6Jr9gsoR3riayiXMyyhd4Y27jDDHJVQu8MJdU7lBBBpKoz08c7eU8gERuKNyhiduhcopolBRqeGAMaV7xKE7eGzvThQTVZooAJdC1AM2qGg0BhdCrpnciVE0i9dZ3v+t/n2ZMBtJGpsu6nuCrNJddar4/gAnMmuP/GPk3JFwrL2QKw3FD26GyGmQNXbIGVHNKdfmYraDl/ZUcxO8NNtIW888bafDC7tP5R2qtQfL724N5AypxjbIGdseWHMV1VfP+rrnZvbTerMEhHb2Py4eA7KX9AwD5LSppi5ZdPTHEhv6cd5mSjZaeMW/Dc66TEpkO+Q0qIbUE5es6ke85FMN/YGXZs9yQLdXYGVASGJDBaMZXsQouzau/fzfitNsKvpUL1O8dFBksb+Q80C1coaco7RtLeYzO9tHCV7qUY0ckXPGribSoNpQB3Z1MbWtby1hiZwWw35CRjUReRx7Sg5ecqgmJiyHOxrIWVEtPDPNY/TMx4bmczq5T3jpSRELm1NWodVmlGY364tP4ZXvdw5u8jjDf8yQJJ7j+2HYfBh3d+l5HFB5RmyzjM3yh8iDUbb6M9y7j3idgxM+3BzTuPzyXmdOTARJaUc8tUmX7ekB7+aF7dV1a0G6pIx3CkxKmBBUreMfvS0086aTnZZf6kfG53mlN/0UnS2bW5Socz9OA737eM6JkZWu4uUiXfVcnIT34eZM6Yq9hcRKR0OpL7i9cHBi/udjrCOUuiFWsnc2/oKsfYAhXvM2lsj4S/7b2/L9y4cODDu0j8HbBzqSPvutOksqpDH+gorw1+dvHLcaEzv3r4+0BdmnBJXi9bL+G6qaEbFz98rF4sEwnKGKrrrxK3sOuzoMlM9i+ql47KPC/HX8inTxljgKUHBYI1g6qDx/HBct76XETfHF4v3hHpZwVgH9APc0TfFSyTwLZ7DJ9FYxmZvTv1h89DmBdbyHEX0rcuuTRB38fNuQ2vmw1GAYMSjv6ZwQbD0ksFlz9LPW7gMxNv3RBVtlDqz3cbWo32rmEXLGFExcsJBMnilGzk29pleT5gx8fLiq2XzyM2rllpiboEYGxF2UoD6+EntL1Ma+TkOP/LVqNJLM3yeqgayDmnjqKmIu3aNGDhlx1pqiZvyUuAqaqKGwRRwt1gnqqR0QO5ce6ms5J1ZGIWqtkxIf0QNqb7ohJjIXgFjPiYF4j38R2wbZTk1m+C/xqU9WSzv4hkgyVkcg0QvIUg0XEHleRjaK/gQb8g/a2EL8hHcky6zxC+JTQBa5c/BL4nBO1lgl+B2xJjv0QxQgnA1ZoOGhGHFNldedoShxMadKU/d4BeEEVGF3Ll5FJF+psm7Bh5xwHyDeoKeogvp7iDfpbKhyWgeIN/JSqpjbBOLtlqwq7qJNFdKGeKdQUUUEIcS7Df6iSngeQAPhtqgCWi60EElKxjUSsCFriK5nYEMuLDtoJSZk0BiaiaYsZGPlXnEqHoipIhOaKIW4WnD63xThgtP/pthHdFqfUCIRRvK/KZ+3VX1uiulc7puc3EstSOpD9d7+LYGTFfiQenyKkxE3VLLGI9iQkcH4CackzqlEwRYnJbwNlUb5ODHhBVSWHk5O+JFMLkh5qFYxLxnoPZ9BmJGRdrELNuTddNEAwhg34NSvFnvSqgth1ANpNEIZkhkYSg4dt9rHocCFXvvxWUD/ELR2TQ98hMOWon+Ks7YLrZI70iWETu6yT99Qt3uw4A4j+lY6hU4dVcloUFdR3tkA1kt29J1zHxr1SIsGNAoDnvGjMCj/CLmr3INzQj9x5sFm41Ns933c0PtNoc+O0bJNA9+Xryp14+zSL9x5PH6beS2vQrfP0exkQcMG08BdCn1SepeFc8KPijWs5MxPdzN4CipzR2nQb8wdnu0O5UKbkN7h/LQZ/a9Ms+pZNYp9kQt9Yvo9H3Yx8H15QSXm/qZUQMY0ybOCPtNKlIMuqYAogW1SKkBBoxW9SXSARoqKCGGbBRVxBY0C85V3h2mb/MrASGxIb3BnYlaxwXRmLwUMFxMc6NSlQvpM6nt5MXTylOl00JGKYTqxp6DVBb1SkECrlOmvs0HFGA7efjA0dwrLfKVC5tDLp1dpGHrGKFjm0tCZYEWvMTA0NrOBZVZUSMtoLn4I3T5RISnTZTGXJrea9BPotmU6QrqlQi6gXWx05V5MRTiwTaD/4aW5FN8y9pCJYZ2usSPBNRUzNfapNIZ1fGM7KQdUSMNYJyl6Ajh2yAKTBUYHpfCZruJ0jB3wCpVur1GSIf3G8yOPlG1ePDN46d2iJEmLR+86L4lNBRQTZXK/6UAxunMWDxC3Da6omXsoz5XiOa8/NfV9JYHRXVBXiudG8r0y9Jmzpl87oFSDFv3Qog2rDTb0Q6qJckX0K7coWTKkHxh1YLmkSz/Q6JjNKnVQOj+lnM0nMPDxmnLuPhjej5rhFLbjmP4nOF6BCXfdov8JLkPj+xcdnMjh03p3nWXLBwesuB/+GGbHXbc5wIkkSt7CwEmXU1lGbPX3OYVBt5y2Yoov9EN/QVhpJK9xZL/7P4Kw1LO8iIH7qxx8CEu5zG8pcldpQ1hrSjnBI4S9YnrpBsJiEzkIcfIkByFWUqkIcdKjb7kQdos49a3Fjv7vE4TlfPoflYAPuXoeIaw3pv+6h7CeQ/8RPYIP6XpegwGxknMtwxcqK7AgAqkhcDKkf3oAI9LE9sCDWGhf4S8M70peggnxQERTMCFcIjUDF+KOUrAhhvQANkT4dwEsPvJYWz4QAAAAAElFTkSuQmCC');
background-position: bottom right 70px;
background-repeat: no-repeat;
background-size: auto 100%;
margin: 0 auto;
max-width: 980px;
padding: 0 60px;
position: relative;
}
.adb-hero-back-icon {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.adb-hero-title {
font-size: 22px;
line-height: 28px;
padding: 24px 24px 0px 112px;
}
.adb-hero-title a {
color: #FFFFFF;
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500;
}
.adb-hero-summary {
font-size: 16px;
line-height: 24px;
padding: 8px 24px 8px 112px;
}
.adb-hero-summary a {
color: rgba(255, 255, 255, 0.9);
}
.adb-hero-description {
color: #6f7172;
font-size: 16px;
margin: 0;
max-width: 440px;
padding-bottom: 32px;
}
.adb-hero-search {
position: absolute;
top: 19.35%;
right: 1.94%;
}
.adb-hero-search .searchBox input {
border: 1px solid #80868B;
border-radius: 4px;
color: white;
}
.adb-hero-search .searchBox input::placeholder {
color: #F1F3F4;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
padding-left: 12px;
}
.adb-hero-link {
position: absolute;
right: 1.67%;
top: 64.52%;
}
.adb-hero-link a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #3DDC84;
letter-spacing: 1.4px;
}
.adb-hero-arrow {
display: inline-flex;
font-size: 24px;
vertical-align: middle;
}
.adb-socials-box {
display: flex;
position: absolute;
right: 1.67%;
}
.adb-socials-category,
.adb-socials-divider {
display: flex;
align-items: center;
}
.adb-socials-divider {
color: #DADCE0;
font-size: 40px;
font-weight: 100;
margin: 0 20px;
}
.adb-socials-category img,
.adb-footer-social-links img {
height: 24px;
}
.adb-footer-social-links-img {
margin-right: 20px;
}
.adb-hero-subscribe, .adb-hero-subscribe:visited {
background-color: #90c653;
color: #fff;
display: inline-block;
border-radius: 3px;
margin: 25px 0 60px;
padding: 13px 32px;
text-transform: uppercase;
}
.adb-hero-subscribe:hover, .adb-hero-subscribe:focus {
background-color: #333;
}
.adb-footer {
margin: 32px auto 64px;
}
.adb-footer-more {
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #f0f0f0;
padding: 30px 0;
}
.adb-footer-more a {
color: #000;
display: inline-block;
font-size: 20px;
font-weight: 300;
margin-right: 16px;
}
.adb-footer-social {
float: right;
margin-top: -62px;
}
.adb-footer-social a {
background-color: #ccc;
background-position: center;
background-repeat: no-repeat;
background-size: auto 16px;
border-radius: 50%;
display: inline-block;
height: 36px;
margin-left: 16px;
transition: background-color .1s;
width: 36px;
}
.adb-footer-social-youtube {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAQAAAAxWje/AAABLUlEQVQ4y6WUvUoDYRBFr42gCdhK8AV8BwsVC0FQfIQUgr5DIKJoGy1CfAaDq1hIGn8K2xDSaBc1wUJJEYmbkDXssdi1Mrvfst9tZ+bAzNwZSZLEAmvsUKTCBQ80eaWLyxiAMS5dXmhyT5UyBfIsM68/McM1aXRDJgCUSKsTSWQZpAa4ZMUmNtoSRxGhbd4TAI7F1eSIxBwVfAPgUtSjAJLEEk+xgLroxAEkpikyigS0RS8eIEks8hgB6ImhGSAxxS5fE9JGwksCkCRyOP/SfPFjC0jawl5UC9ZDbBvXuB+zxjezkZ5NRnJirHxmtLIjDq2O6UBsWJ3zut1D+WZWEqepAaVg0hlqqcpr4VMNbbpKngJlqtzRoMUnfTx8fDz6fNCiwS3n4VtfIRdU/gLTrSb7DGWLcQAAAABJRU5ErkJggg');
}
.adb-footer-social-youtube:hover {
background-color: #f44336;
}
.adb-footer-social-gplus {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAUCAQAAACpWpz6AAABJUlEQVQ4EZXBTUoCYQDH4X9hTS3Cja0Kyb2X6BCJoLlr1aKwK1QHCMMzWLiqTcuWXaAWQWIlU1DQh4QJ+Wt4X95x0hGn55FCeGzSpMUXXW45ocSC/oMiHUZ1KCgZZqkzyZaSoM7QgCd8BlgXLGo6ijgv7JJRgAxV3jjDUwwMOXh0sK5ZUQRZ5hQLQw4VrA/WlBCGHJpY+0oMQw5trLxCjNtTgFiij5VSiHFHChBL9LFSCjGurgCxRBsrrxA+Pj4+Pl2sQ0VgyKGJdaAYNLAqisCQQxnrk5xGkKOHlVUEhhw8HrFuWFUEaa6wLvUHhoYo4LxSZVkBlihzh7OuaagR9YzPD0PHmo5ZakzSIKVk2OCBUe/sMKPkmKfEKS16fHPPOduklcAvR50zMVwhTI4AAAAASUVORK5CYII=');
}
.adb-footer-social-gplus:hover {
background-color: #f44336;
}
.adb-footer-social-twitter {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAQAAAB0gUQ+AAABI0lEQVQ4EY3BQShDAQDH4f+zTSyJuLgoLlwclYOTHCwHu9ouiLRScpUmNwduDkpCSTs4LAeJhINoOTo4ctHkskyJtf20vWbe3tvb+z7JFUGibLHPMj0qoYEWSYzRKkdMkKbsm3m6WSRFuyQeuKNNNoTJU61ABL8kssAjvbKgiTR2V+ywJol3ijJMY+gP4zhLEpDEGWUpwvhUQgwnh/hURIT/3thjjmGWcBKViSCXeBWSiWdO+MGbPpm4watPfDIRxasLVXCANwuqwCDGK/V80akKGjnmmgLutmXFOvV80CUrAiRxNys7DCY5J4OzXdVCP7c4OcIvO5oJkSCHXZ5VDFkxwilP5HB2z6Cc0EGcF6plSTAqNxgMMEWcTTZYYYYhAqrpF0uh1zgYi1hVAAAAAElFTkSuQmCC');
}
.adb-footer-social-twitter:hover {
background-color: #55acee;
}
.adb-footer-social span {
display: none;
}
.adb-footer-related {
padding-top: 8px;
}
.adb-footer-related a {
color: #999;
font-size: 12px;
white-space: nowrap;
}
.adb-footer-related a:not(:last-child)::after {
content: '|';
cursor: default;
margin: 0 7px 0 10px;
}
.adb-footer-section {
margin: 48px auto;
max-width: 700px;
}
.adb-footer-title {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #3C4043;
margin-bottom: 24px;
}
.adb-footer-columns {
display: flex;
justify-content: space-between;
}
.adb-other-blogs-title img {
margin-right: 8px;
vertical-align: -12px;
}
.adb-footer-social-label {
display: flex !important;
align-items: center;
}
.adb-footer-column a,
.adb-footer-social-label,
#footer-subscribe .tab h2 {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
padding: .85em 0;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-btm a {
color: #000;
font-family: Android Euclid, Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.25px;
opacity: .7;
transition: opacity .1s;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-column a {
opacity: .7;
transition: opacity .1s;
}
.adb-footer-column a:hover {
opacity: 1;
}
.adb-footer-social-links {
margin: 0 0 20px;
}
#footer-subscribe .widget {
margin: 0;
}
#footer-subscribe .tab {
display: flex;
align-items: center;
}
#footer-subscribe .tab img {
height: 16px;
}
.adb-label-view-more-toggle {
cursor: pointer;
}
.adb-label-view-more-toggle::after {
content: '\00e5c5';
float: right;
font: 2em / .7 Material Icons;
opacity: .6;
}
.adb-label-view-more-toggle.active::after {
transform: rotate(180deg);
}
/** Desktop **/
@media (max-width: 900px) {
.col-right {
display: none;
}
.col-main {
margin-right: 0;
min-width: initial;
}
.cols-wrapper {
min-width: initial;
}
.adb-hero-inner {
background-image: none;
}
}
/** ADB header breakpoint **/
@media (max-width: 768px) {
.adb-header-links {
display: none;
}
.dropdown-nav {
display: none;
}
.adb-header {
padding: 12px;
text-align: center;
}
}
@media (max-width: 1196px) {
.breakpoint-hide {
display:none;
}
.more-dropdown {
height: 50px;
display: flex;
align-items: center;
}
}
@media (max-width: 915px) {
.adb-header {
height: 0;
margin: 0;
padding: 0;
display: none;
}
.adb-header-tags {
display:none;
}
.more-dropdown {
display:none;
}
.dropdown-nav {
display: none;
}
.adb-hero-summary,
.adb-hero-link,
.adb-socials-category {
display: none;
}
.adb-hero-title {
padding-left: 152px;
}
.adb-hero-logo {
height: 52px;
top: 12px;
left: 120px;
}
.adb-footer-section {
margin: 0 auto;
}
.adb-footer-btm {
margin: 0 24px 40px;
}
.adb-hero-area {
min-height: 76px;
}
.adb-burger-box {
display:inline;
position: absolute;
top: 17px;
margin-left: 24px;
font-size: 32px;
color: white;
}
.adb-hero-title a{
margin-left: 40px;
}
}
/** Tablet **/
@media (max-width: 712px) {
.header-outer, .cols-wrapper {
padding: 0 40px;
}
/* ADB */
.adb-hero-inner {
padding: 0 40px;
}
.adb-hero-title {
font-size: 16px;
padding-left: 132px;
}
.adb-hero-logo {
left: 100px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 36px;
}
.adb-other-blogs-list {
columns: auto;
}
.adb-other-blogs-title {
font-size: 20px;
}
.adb-other-blogs-title img {
height: auto;
vertical-align: -6px;
width: 32px;
}
.adb-footer-section {
margin: 0 24px;
}
.adb-footer-more {
padding-bottom: 75px;
}
.adb-footer-social {
float: none;
margin-bottom: 35px
}
.adb-footer-social .adb-footer-social-youtube {
margin-left: 0;
}
}
/** Small tablet **/
@media (max-width: 600px) {
.header-inner .google-logo {
top: 32px;
margin-top: 0;
}
.header-inner .google-logo img {
height: 56px;
width: auto;
/*
height: auto;
width: 188px;
*/
/* Override any optical adjustments at desktop size. */
top: 0 !important;
}
.header-left {
left: 0;
top: inherit;
bottom: 24px;
}
.adb-footer-columns {
display: block;
}
.adb-footer-column {
margin-bottom: 48px;
}
.adb-footer-column a {
opacity: 1;
}
.adb-footer-social-label {
padding: 0;
}
.adb-footer-column .widget a {
padding: 0;
}
.footer-newsletter {
margin-top: 16px;
}
.subscribe-btn {
width: 100%;
}
.adb-hero-search {
display: none;
}
.adb-search-box {
display:inline;
position: absolute;
top: 24px;
right: 24px;
font-size: 24px;
color: white;
}
}
/** Mobile **/
@media (max-width: 480px) {
.header-outer, .cols-wrapper {
padding: 0 16px;
}
.adb-hero-logo {
height: 28px;
top: 24px;
left: 76px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 16px;
}
.cols-wrapper {
margin-top: 0;
overflow-x: auto;
}
.post-header .publishdate, .post .post-content {
font-size: 16px;
}
.post .post-content {
line-height: 28px;
margin-bottom: 30px;
}
.post {
margin-top: 30px;
}
.byline-author {
display: block;
font-size: 12px;
line-height: 24px;
margin-top: 6px;
}
#main .post .title a {
font-weight: 500;
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
}
#main .post .post-header {
padding-bottom: 12px;
}
#main .post .post-header .published {
margin-bottom: -8px;
margin-top: 3px;
}
.post .read-more {
display: block;
margin-top: 14px;
}
.post .tr-caption {
font-size: 12px;
}
#main .post .title a {
font-size: 20px;
line-height: 30px;
}
.post-content iframe {
/* iframe won't keep aspect ratio when scaled down. */
max-height: 240px;
}
.post-content .separator img, .post-content .tr-caption-container img {
margin-left: -16px;
max-width: 100%;
}
.post-content table {
table-layout: fixed;
width: 100%;
}
/** List page tweaks. **/
.list-page .post-original {
display: none;
}
.list-page .post-summary {
display: block;
}
.list-page .comment-container {
display: none;
}
.list-page .label-footer {
display: none;
}
.list-page #main .post .post-footer {
border-bottom: 1px solid #eee;
margin: -16px 0 0 0;
padding: 0 0 20px 0;
}
.list-page .post .share {
display: none;
}
/** Detail page tweaks. **/
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 32px !important;
}
.detail-page .label-footer {
margin-bottom: 0;
}
.detail-page #main .post .post-footer {
padding-bottom: 0;
}
.detail-page #comments {
display: none;
}
/* ADB */
.adb-header-console {
display: none;
}
.adb-hero-inner {
padding: 0 16px;
}
.adb-hero-title {
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
font-weight: 500;
line-height: 30px;
padding-left: 80px;
}
}
/* Fixed-position sidebar for larger screens */
@media screen and (min-height: 700px) and (min-width: 1100px) {
.col-right .section {
max-height: calc(100vh - 197px);
overflow: auto;
}
.col-right.scroll-start {
left: 50%;
margin-left: 241px;
position: fixed;
top: 96px;
}
.col-right.scroll-end {
bottom: 485px;
position: absolute;
top: auto;
}
}
[data-about-pullquote], [data-is-preview], [data-about-syndication] {
display: none;
}
#imgFull {
display: block;
margin: 10px auto;
width: 90%;
border: 0;
padding: 0;
}
#imgHalf {
display: block;
margin: 10px auto;
width: 50%;
border: 0;
padding: 0;
}
#flexParent {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
#flexImg {
width: 90%;
margin: 0;
padding: 0;
border: 0;
}
#imgCaption {
text-align: center;
font-style: italic;
font-size: 85%;
margin: -5px 0 10px 0;
padding: 0;
border: 0;
}
#floatRight {
float: right;
width: 45%;
margin: 5px 0 5px 5px;
padding: 0;
border: 0;
}
#floatLeft {
float: left;
width: 45%;
margin: 5px 5px 5px 0;
padding: 0;
border: 0;
}
</style>
<style>
.loading {
visibility: visible;
}
</style>
</head><body>
<div class="adb-detail">
<div class="adb-detail__info">
</div>
<div class="adb-detail__title">
</div>
<hr>
<div class="adb-detail__content">
<div>
<meta content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz59FlzcTBW59NOVhyLb_vZd-ePuN6w-TMUiMvxaZDiofpQHayKQn8sPLmP-bmuj5-6kPS7wHUOTqpzOTwoRqBRO1zdnLE3EuqPaH97Cw0ezGgLFKIbX0dzXfI4xx0bPa8XLl6FyvhYKs3XKBowHEz2ambpEB1H5UypEtPrn-dXMXkGlJEKu7NdjMV/s1600/Android%20-%20Policy%20Updates-%20Improving%20Wear%20App%20Quality-social.png" name="twitter:image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz59FlzcTBW59NOVhyLb_vZd-ePuN6w-TMUiMvxaZDiofpQHayKQn8sPLmP-bmuj5-6kPS7wHUOTqpzOTwoRqBRO1zdnLE3EuqPaH97Cw0ezGgLFKIbX0dzXfI4xx0bPa8XLl6FyvhYKs3XKBowHEz2ambpEB1H5UypEtPrn-dXMXkGlJEKu7NdjMV/s1600/Android%20-%20Policy%20Updates-%20Improving%20Wear%20App%20Quality-social.png" style="display: none;">
<em>Diposting oleh Ouiam Koubaa – Product Manager dan Yingzhe Li – Software Engineer</em>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVviCwvyzix33x3GBKtuFuXHOivMjeQP5FrEX8df4khO7Y6KSKwdAqBIRmac1eN5T9EIMbwATiUxqjjnOoMZow-T458ZZadL0fpwy901_pNLayQ-wLUAm8w0W2OyNZk_6KAYPwHOLqKcu9bLnpoc8K-3RIQvNeRV11iSzBSL2U20bRnb89EXghEHBs/s1600/Android%20-%20Policy%20Updates-%20Improving%20Wear%20App%20Quality-header.png"><img border="0" data-original-height="800" data-original-width="1058" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVviCwvyzix33x3GBKtuFuXHOivMjeQP5FrEX8df4khO7Y6KSKwdAqBIRmac1eN5T9EIMbwATiUxqjjnOoMZow-T458ZZadL0fpwy901_pNLayQ-wLUAm8w0W2OyNZk_6KAYPwHOLqKcu9bLnpoc8K-3RIQvNeRV11iSzBSL2U20bRnb89EXghEHBs/s1600/Android%20-%20Policy%20Updates-%20Improving%20Wear%20App%20Quality-header.png"></a>
<p>Hari ini, kami sangat senang bisa mengumumkan perilisan mesin Text-To-Speech (TTS) baru yang berkinerja baik dan andal. Text-to-speech mengubah teks menjadi ucapan yang terdengar natural untuk lebih dari 50 bahasa yang didukung teknologi machine learning (ML) Google. Mesin text-to-speech baru pada Wear OS menggunakan model ML prosodi yang lebih kecil dan efisien untuk menghadirkan sintesis yang lebih cepat pada perangkat Wear OS.</p>
<p>Kasus penggunaan text-to-speech Wear OS dapat mencakup layanan aksesibilitas, panduan latihan untuk aplikasi olahraga, panduan navigasi, dan membacakan peringatan yang masuk dengan keras melalui speaker jam atau headphone yang terhubung melalui Bluetooth. Mesin ini diperuntukkan buat interaksi singkat, jadi sebaiknya tidak digunakan untuk membaca artikel panjang, atau ringkasan podcast berdurasi panjang.</p>
<h3>Cara menggunakan TTS Wear OS</h3>
<p>Text-to-speech telah lama didukung di Android. TTS baru Wear OS telah disempurnakan agar berkinerja baik dan andal pada perangkat dengan memori rendah. Semua API Android masih sama, jadi developer menggunakan proses yang sama untuk mengintegrasikannya ke dalam aplikasi Wear OS, misalnya, <span style="font-family: Courier;"><a href="https://developer.android.com/reference/android/speech/tts/TextToSpeech#speak%28java.lang.CharSequence,%20int,%20android.os.Bundle,%20java.lang.String%29" target="_blank">TextToSpeech#speak</a></span> bisa digunakan untuk mengucapkan teks tertentu. TTS tersedia pada perangkat yang menjalankan Wear OS 4 atau yang lebih tinggi.</p>
<p>Saat pengguna berinteraksi dengan TTS Wear OS untuk pertama kalinya setelah perangkat booting, mesin sintesis akan siap dalam waktu sekitar 10 detik. Untuk kasus tertentu ketika developer menginginkan agar jam <i><u>segera</u></i> berbicara setelah membuka aplikasi atau meluncurkan pengalaman, kode berikut bisa digunakan untuk melakukan pemanasan awal mesin TTS sebelum ada permintaan sintesis yang masuk.</p>
<div style="background: rgb(248, 248, 248); border: 0px; overflow: auto; width: auto;"><pre style="line-height: 125%; margin: 0px;">private fun initTtsEngine() {
<span style="color: #666666;">//</span> Callback when TextToSpeech connection is set up
val callback <span style="color: #666666;">=</span> TextToSpeech<span style="color: #666666;">.</span>OnInitListener { status <span style="color: #666666;">-></span>
<span style="color: green;">if</span> (status <span style="color: #666666;">==</span> TextToSpeech<span style="color: #666666;">.</span>SUCCESS) {
<span style="color: blue;">Log</span><span style="color: #666666;">.</span>i(TAG, <span style="color: #ba2121;">"tts Client Initialized successfully"</span>)
<span style="color: #666666;">//</span> Get default TTS locale
val defaultVoice <span style="color: #666666;">=</span> tts<span style="color: #666666;">.</span>voice
<span style="color: green;">if</span> (defaultVoice <span style="color: #666666;">==</span> null) {
<span style="color: blue;">Log</span><span style="color: #666666;">.</span>w(TAG, <span style="color: #ba2121;">"defaultVoice == null"</span>)
<span style="color: green;">return</span><span style="color: #19177c;">@OnInitListener</span>
}
<span style="color: #666666;">//</span> Set TTS engine <span style="color: green;">to</span> use default locale
tts<span style="color: #666666;">.</span>language <span style="color: #666666;">=</span> defaultVoice<span style="color: #666666;">.</span>locale
try {
<span style="color: #666666;">//</span> Create a temporary file <span style="color: green;">to</span> synthesize sample text
val tempFile <span style="color: #666666;">=</span>
File<span style="color: #666666;">.</span>createTempFile(<span style="color: #ba2121;">"tmpsynthesize"</span>, null, applicationContext<span style="color: #666666;">.</span>cacheDir)
<span style="color: #666666;">//</span> Synthesize sample text <span style="color: green;">to</span> our file
tts<span style="color: #666666;">.</span>synthesizeToFile(
<span style="color: #666666;">/*</span> text<span style="color: #666666;">=</span> <span style="color: #666666;">*/</span> <span style="color: #ba2121;">"1 2 3"</span>, <span style="color: #666666;">//</span> Some sample text
<span style="color: #666666;">/*</span> params<span style="color: #666666;">=</span> <span style="color: #666666;">*/</span> null, <span style="color: #666666;">//</span> No params necessary <span style="color: green;">for</span> a sample request
<span style="color: #666666;">/*</span> file<span style="color: #666666;">=</span> <span style="color: #666666;">*/</span> tempFile,
<span style="color: #666666;">/*</span> utteranceId<span style="color: #666666;">=</span> <span style="color: #666666;">*/</span> <span style="color: #ba2121;">"sampletext"</span>
)
<span style="color: #666666;">//</span> <span style="color: green;">And</span> clean up the file
tempFile<span style="color: #666666;">.</span>deleteOnExit()
} catch (e<span style="color: #666666;">:</span> Exception) {
<span style="color: blue;">Log</span><span style="color: #666666;">.</span>e(TAG, <span style="color: #ba2121;">"Unhandled exception: "</span>, e)
}
}
}
tts <span style="color: #666666;">=</span> TextToSpeech(applicationContext, callback)
}
</pre></div>
<p>Setelah selesai menggunakan TTS, Anda dapat menghentikan mesin dengan memanggil <span style="color: #0d904f; font-family: Courier;">tts.shutdown()</span> dalam metode <span style="color: #0d904f; font-family: Courier;">onDestroy()</span> aktivitas Anda. Perintah ini juga harus digunakan saat menutup aplikasi yang menggunakan TTS.</p>
<h3>Bahasa dan Lokalitas</h3>
<p>Secara default, TTS Wear OS memuat 7 bahasa bawaan dalam image sistem: Bahasa Inggris, Spanyol, Prancis, Italia, Jerman, Jepang, dan Mandarin. OEM dapat memilih untuk melakukan pramuat set bahasa yang berbeda. Anda bisa memeriksa bahasa apa saja yang tersedia dengan menggunakan <span style="font-family: Courier;"><a href="https://developer.android.com/reference/android/speech/tts/TextToSpeech#getAvailableLanguages%28%29" target="_blank">TextToSpeech#getAvailableLanguages()</a></span>. Selama pengaturan jam, jika pengguna memilih bahasa sistem yang bukan merupakan file suara pramuat, jam akan secara otomatis mendownload file suara yang sesuai saat pengguna pertama kali terhubung ke Wi-Fi saat mengisi daya jam mereka. </p>
<p>Ada beberapa kasus tertentu di mana output ucapan mungkin berbeda dari bahasa sistem pengguna. Misalnya, dalam skenario ketika aplikasi keamanan menggunakan TTS untuk memanggil petugas tanggap darurat, developer mungkin ingin menyintesis ucapan dalam bahasa lokal tempat pengguna berada, bukan bahasa yang digunakan jam. Untuk menyintesis teks dalam bahasa yang berbeda dari setelan sistem, gunakan <span style="font-family: Courier;"><a href="https://developer.android.com/reference/android/speech/tts/TextToSpeech#setLanguage%28java.util.Locale%29" target="_blank">TextToSpeech#setLanguage(java.util.Locale)</a></span></p>
<h3>Kesimpulan</h3>
<p>Aplikasi Wear OS Anda sekarang dapat berbicara, baik secara langsung <a href="https://developer.android.com/training/wearables/apps/audio" target="_blank">dari speaker jam atau melalui headphone yang terhubung dengan Bluetooth</a>. Pelajari lebih lanjut tentang <a href="https://developer.android.com/reference/android/speech/tts/TextToSpeech" target="_blank">penggunaan TTS</a>.</p>
<p>Kami sangat ingin melihat bagaimana Anda menggunakan mesin Text-to-speech untuk menciptakan pengalaman yang lebih bermanfaat dan menarik bagi pengguna Anda di Wear OS!</p><p><br></p>
<div style="background: #f8f8f8; overflow:auto;width:auto;border:0;"><pre style="margin: 0; line-height: 125%">Copyright <span style="color: #666666">2023</span> Google LLC<span style="color: #666666">.</span>
SPDX<span style="color: #666666">-</span>License<span style="color: #666666">-</span>Identifier<span style="color: #666666">:</span> Apache<span style="color: #666666">-2.0</span>
</pre></div>
</div>
<hr>
</div>
</div>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-19004021239179430422024-03-04T18:21:00.012+07:002024-03-15T18:25:02.219+07:00Menyambut Android 14: Adopsi Awal Meta yang Memberdayakan Pengalaman Pengguna yang Ditingkatkan<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="http://android-developers.googleblog.com/2024/03/android-14-meta-early-adoption-enhanced-user-experience.html"/>
<meta name="original_url" content="http://android-developers.googleblog.com/2024/03/android-14-meta-early-adoption-enhanced-user-experience.html"/>
<style id="page-skin-1" type="text/css"><!--
body {
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
-webkit-font-smoothing: antialiased;
color: #202124
}
h1 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px
}
h2 {
font-size: 30px;
line-height: 40px
}
h2,
h3 {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500
}
h3 {
font-size: 24px;
line-height: 32px
}
h4 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 26px
}
h5 {
font-size: 16px;
line-height: 24px
}
h5,
h6 {
font-family: Roboto, sans-serif;
font-weight: 600
}
h6 {
font-size: 14px;
line-height: 22px
}
.display {
font-family: Roboto, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 67.2px
}
.hidden-text {
height: 1px;
overflow: hidden;
pointer-events: none;
position: absolute;
top: -10px;
width: 1px
}
img,
video {
border: 0;
height: auto;
max-width: 100%
}
body {
position: relative;
min-height: 100vh
}
body.no-scroll {
overflow: hidden
}
a {
color: #4184f3;
text-decoration: none
}
a:focus,
a:focus-visible {
outline-offset: -2px
}
.content-wrap {
padding-top: 200px;
max-width: 800px;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:915px) {
.content-wrap {
padding-top: 100px
}
}
.full-width {
width: 100%
}
.icon-link {
height: 42px;
width: 132px;
border-radius: 80px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: baseline;
-ms-flex-pack: center;
justify-content: baseline;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
background: transparent;
border: none;
color: black !important
}
.icon-link:hover {
background-color: hsla(213, 7%, 76%, .2)
}
.icon-link:focus {
background-color: hsla(213, 7%, 76%, .26)
}
.icon-link:active {
background-color: hsla(213, 7%, 76%, .32)
}
.adb-container {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto;
max-width: 1420px
}
@media only screen and (max-width:767px) {
.adb-container {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--large {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto
}
@media only screen and (max-width:767px) {
.adb-container--large {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--flex-horizontal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.section,
body {
margin: 0
}
.adb-card {
position: relative;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
margin: 40px 0;
padding: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: box-shadow .2s linear, opacity .2s linear;
transition: box-shadow .2s linear, opacity .2s linear, -webkit-box-shadow .2s linear
}
.divider {
border: none;
height: 1px;
color: #DADCE0;
background-color: #DADCE0;
margin: 0 20px;
}
.adb-card:first-child {
background-color: #d7effe;
border: none;
padding: 32px 24px 32px;
margin: 40px 20px 60px;
}
@media only screen and (max-width:850px) {
.adb-card {
max-height: unset;
padding: 0 20px
}
.adb-card:first-child {
margin-bottom: 40px;
}
}
@media only screen and (max-width:600px) {
.adb-card:first-child {
margin: 0 -20px 40px;
}
.adb-card {
border-radius: 0;
padding: 0;
}
.divider {
margin: 0;
}
.content-wrap {
padding-top: 54px;
}
}
.adb-card:focus-within,
.adb-card:hover {
-webkit-box-shadow: 0 0 36px rgba(0, 0, 0, .1);
box-shadow: 0 0 36px rgba(0, 0, 0, .1);
cursor: pointer
}
.adb-card__href {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.adb-card__image-wrapper {
overflow: hidden;
position: relative;
width: auto;
-webkit-flex-basis: 40%;
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.adb-card__content {
padding: 24px 0 0
}
.adb-card__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 600;
margin-bottom: 12px
}
.adb-card__info {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 24px
}
.adb-card__description {
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin-bottom: 48px
}
.adb-card:hover .adb-content__image-wrapper img,
.adb-card__href:focus~.adb-content__image-wrapper img {
-webkit-transform: scale(1.03);
transform: scale(1.03);
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease
}
.devsite-footer {
padding: 0 24px;
border-top: 1px solid #bdc1c6
}
.devsite-footer li {
display: block
}
.devsite-footer li a {
text-decoration: none;
font-size: 14px;
line-height: 16px;
color: #202124
}
.devsite-footer li a:focus,
.devsite-footer li a:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-linkboxes-list {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
padding: 24px 0;
border-bottom: 1px solid #bdc1c6
}
@media only screen and (max-width:767px) {
.devsite-footer-linkboxes-list {
grid-template-columns: 1fr;
padding-left: 0
}
}
.devsite-footer-linkbox {
display: block
}
.devsite-footer-linkbox-heading {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin: 0 0 4px
}
.devsite-footer-linkbox ul {
padding-left: 0
}
.devsite-footer-sites-list {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-utility nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 24px 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0
}
}
.devsite-footer-utility-button {
justify-self: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 20px;
margin-left: auto;
padding-left: 16px
}
.devsite-footer-utility-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 8px 0 0
}
.devsite-footer-utility-item:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.devsite-footer-utility-item:not(:first-child):before {
content: "|";
margin: 0 8px 0 0
}
}
.devsite-footer-sites {
border-bottom: 1px solid #bdc1c6;
padding: 24px 0 23px
}
.devsite-footer-sites-logo {
height: 32px;
margin-top: 5px;
width: 185px
}
.devsite-footer-sites-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0
}
.devsite-footer-sites-item {
margin: 0 0 0 40px
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-item {
margin: 0
}
}
.devsite-footer-sites-link {
display: block;
padding: 8px 0;
color: #202124
}
.devsite-footer-sites-link:focus,
.devsite-footer-sites-link:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-utility-link:focus {
text-decoration: underline
}
.devsite-footer-utility .devsite-footer-utility-button {
line-height: 20px;
font: 400 14px/16px Roboto, sans-serif
}
.devsite-footer-utility .devsite-footer-utility-button:before {
content: "";
margin: 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility .devsite-footer-utility-button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
margin: 18px 0 12px
}
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link {
border: 0;
background: #1a73e8;
color: #fff;
line-height: 36px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0 0 16px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px 0;
box-shadow: 0 1px 2px 0;
display: inline-block;
font: 500 14px/36px Roboto, sans-serif;
height: 36px;
letter-spacing: 0;
min-width: 36px;
padding: 0 24px;
text-align: center;
-webkit-transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s, -webkit-box-shadow .2s;
vertical-align: middle;
white-space: nowrap
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link:hover {
background: #1765cc
}
.adb-page__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px;
text-align: center;
color: #202124
}
.adb-detail hr {
border: 1px solid #dadce0;
margin: 40px 0
}
.adb-detail__title {
font-size: 40px;
font-weight: 600;
line-height: 48px
}
.adb-detail__info {
font-weight: 400;
font-size: 16px;
line-height: 24px
}
.adb-detail__content {
min-height: 200px
}
.icon-sidebar {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
top: 0;
left: -300px;
max-width: 220px;
gap: 8px
}
.icon-sidebar .share-text {
font-weight: 500;
margin-left: 4px
}
@media only screen and (max-width:1440px) {
.icon-sidebar {
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
left: 0;
margin-top: -20px;
margin-bottom: 40px;
}
.icon-sidebar .share-text {
display: none;
}
}
.copy-tooltip {
display: none;
position: fixed;
bottom: 16px;
left: 10px;
z-index: 100;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.copy-tooltip .copy-tooltiptext {
width: 200px;
background-color: #073042;
color: #fff;
text-align: center;
border-radius: 80px;
padding: 8px 16px;
}
.header__overlay {
height: 100vh;
left: 0;
position: fixed;
width: 100vw;
border: none;
background-color: rgba(0, 0, 0, .4);
-webkit-animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
opacity: 0;
top: 0;
z-index: -1;
display: none
}
.header__overlay.show {
display: block;
opacity: 1;
z-index: 800;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out
}
.social-icons__links {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
.social-icons__links path {
fill: #80868b
}
.social-icons__container-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin-right: 14px
}
@media only screen and (max-width:1000px) {
.social-icons__container-header {
display: none
}
}
.adb-blog-logo:focus,
.adb-blog-logo:hover {
opacity: .7;
text-decoration: none
}
.adb-blog-logo__image {
height: 32px;
margin-left: 0;
margin-top: 6px
}
@media only screen and (min-width:840px) {
.adb-blog-logo__image {
margin-left: 24px
}
}
.header {
position: fixed;
background: #fff;
z-index: 700;
top: 0;
width: 100%;
overflow: hidden;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
height: auto
}
.header .top-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 24px;
height: 50px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #e6e6e6
}
@media only screen and (max-width:839px) {
.header .top-row {
padding: 0 16px
}
}
.header .top-row__left,
.header .top-row__right {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 100%
}
.header .nav-row,
.header .top-row__left,
.header .top-row__right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.header .nav-row {
background: #fff;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.header .nav-items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 50px;
position: relative;
background-color: #fff
}
@media only screen and (max-width:839px) {
.header .nav-items {
display: none
}
}
.header .nav-items tab {
position: relative
}
.header .nav-items tab.active .header__nav-item:after,
.header .nav-items tab:hover .header__nav-item:after {
background: #1a73e8
}
.header .nav-items tab.active .header__nav-item,
.header .nav-items tab:focus-within a {
color: #202124
}
@media only screen and (max-width:839px) {
.header .header__cta,
.header .nav-items {
display: none
}
}
.header__search-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 6px 0 6px 24px;
overflow: hidden;
position: relative;
margin-right: 36px;
border-radius: 4px
}
@media only screen and (max-width:767px) {
.header__search-container:not(.mobile) {
display: none
}
}
.header__search-container.mobile {
margin: 0 0 20px
}
.header__search-container.mobile #searchform,
.header__search-container.mobile .searchbox {
width: 100%
}
.header__search-container .searchbox {
border-radius: 2px
}
.header__search-container .searchbox input {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
font-weight: 500;
color: #80868b;
border: 0;
margin: 0;
height: 20px;
outline: 0;
padding: 8px 8px 8px 40px;
width: 100%;
-webkit-transition: background .2s;
transition: background .2s
}
.header__search-container .searchbox input::-webkit-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input:-ms-input-placeholder,
.header__search-container .searchbox input::-ms-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input::placeholder {
color: #80868b
}
.header__search-container .searchbox input:hover {
background: #e8eaed
}
.header__search-container .material-icons {
color: #80868b;
left: 8px;
position: absolute;
top: 6px;
-webkit-transition: color .2s;
transition: color .2s
}
.header__cta {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #1a73e8 !important;
text-decoration: none
}
.header__cta.mobile {
padding: 18px 0
}
.header__cta:hover .cta-icon {
margin-left: 0;
margin-right: 12px
}
.header__cta .cta-icon {
-webkit-transition: margin-right .2s linear, margin-left .2s linear;
transition: margin-right .2s linear, margin-left .2s linear;
margin-left: 4px;
margin-right: 8px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.header__cta .cta-icon path {
fill: #1a73e8
}
.header__nav-item {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #80868b;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 18px;
height: 100%;
text-transform: none;
text-decoration: none
}
.header__nav-item:hover {
color: #202124
}
.header__nav-item.mobile {
font-weight: 500;
padding: 0
}
.header__nav-item:after {
bottom: 0;
border-radius: 3px 3px 0 0;
content: "";
display: block;
height: 3px;
left: 50%;
min-width: 20px;
position: absolute;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(100% - 24px)
}
.header__hamburger {
border: 0;
background: none;
outline: none;
padding: 0;
margin: 1px 8px 0 -4px;
padding: 8px;
color: rgba(0, 0, 0, .65);
cursor: pointer
}
@media only screen and (min-width:840px) {
.header__hamburger {
display: none
}
}
.header__side-menu {
background-color: #fff;
bottom: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
z-index: 900
}
.header__side-menu.is-open {
-webkit-transform: translateX(0);
transform: translateX(0);
width: 80%
}
.header__side-menu.is-open,
.header__side-menu__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%
}
.header__side-menu__content {
padding: 18px 16px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.header__side-menu__content .spacer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.header__side-menu__title {
font-family: Roboto, sans-serif;
font-size: 20px;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px
}
.header__side-menu__items {
list-style: none
}
.header__side-menu__items li {
padding: 12px 0
}
.header__side-menu__items tab {
position: relative
}
.header__side-menu__items tab.active .header__nav-item,
.header__side-menu__items tab:focus-within a {
color: #202124
}
.header__side-menu__bottom {
border-top: 1px solid #e6e6e6
}
.header__side-menu__logo-container {
background: #fff;
height: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 4px 16px;
border-bottom: 1px solid #e6e6e6
}
#nav .widget {
margin: 0
}
.featured__wrapper {
width: 100%;
border: 0;
background-color: #e8f0fe;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 80px 0
}
@media only screen and (max-width:767px) {
.featured__wrapper {
padding: 0
}
}
.featured__inner {
max-width: 1080px;
width: calc(100% - 24px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
padding: 48px
}
@media only screen and (min-width:768px) {
.featured__inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
padding: 12px 80px
}
}
.featured__href {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.featured__image {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
max-width: 100%;
}
.featured__content {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-top: 24px;
width: 100%
}
.featured__title {
font-size: 32px;
line-height: 44.8px;
font-weight: 500;
font-family: Android Euclid, Roboto, sans-serif;
margin-bottom: 15px
}
.featured__info {
font-family: Roboto Mono, monospace;
font-weight: 400;
font-size: 12px;
line-height: 160%;
margin-bottom: 24px
}
.featured__description {
margin-bottom: 48px
}
.preview.featured__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f1f3f4;
padding: 64px 0 120px
}
.preview.featured__wrapper h1 {
margin: 0 0 64px
}
.blog-label-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px
}
.blog-label-container .blog-label {
text-decoration: none;
z-index: 3
}
.blog-label-container .blog-label span {
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
background-color: #F1F3F4;
border-radius: 100px;
padding: 4px 16px;
color: #3c4043
}
.adb-card:first-child .blog-label span {
background-color: #fff;
}
.blog-label-container .blog-label span:focus,
.blog-label-container .blog-label span:hover {
background-color: #D7EFFE
}
.adb-card:first-child .blog-label span:focus,
.adb-card:first-child .blog-label span:hover {
background-color: #F1F3F4
}
.blog-label-container .blog-label span:focus-visible {
outline-offset: 0
}
#pagination-container {
display: none
}
.pagination {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.pagination .page-button {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: black;
background-color: #3DDC84;
padding: 16px 24px;
border-radius: 80px;
text-decoration: none
}
.pagination .page-button:focus,
.pagination .page-button:hover {
background-color: #3DDC8460;
}
.pagination .page-button.disabled {
color: #80868b;
background-color: #f1f3f4
}
--></style>
<style id="template-skin-1" type="text/css"><!--
--></style>
<style>
/** Blogger default styles **/
html, .Label h2, #sidebar .rss a, .BlogArchive h2, .FollowByEmail h2.title, .widget .post h2 {
font-family: Roboto, sans-serif;
}
.plusfollowers h2.title, .post h2.title, .widget h2.title {
font-family: Roboto, sans-serif;
}
pre, .post-content pre.prettyprint {
background-color: #f7f7f7;
border: 1px solid #ddd;
margin: 0 0 1em 0;
padding: 1em;
overflow: auto;
}
pre, code {
font-size: 9pt;
line-height: 125%;
font-family: monospace;
}
pre, code {
color: #060;
font: 13px/18px Consolas, 'Liberation Mono', Menlo, Monaco, Courier, monospace;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
/* Styles for https://github.com/google/code-prettify */
.com { color: #060; }
.kwd { color: #008; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.fb-custom img, .twitter-custom img, .gplus-share img, .email-custom img {
cursor: pointer;
opacity: 0.54;
}
.twitter-custom, .gplus-share, .fb-custom {
margin-right: 12px;
}
/** Blogger custom theme **/
.adb-header,
.searchBox input {
box-sizing: border-box;
}
.popout-nav {
background-color: white;
width: 280px;
height: 100%;
position: fixed;
z-index: 6;
left: -280px;
transition: left 0.2s;
}
.popout-search {
background-color: white;
width: 280px;
position: fixed;
z-index: 6;
right: -280px;
transition: right 0.2s;
top: 0;
}
.popout-search .widget {
margin: 0;
}
.popout-search #BlogSearch2_form .popout-options {
padding-right: 24px;
width: calc(100% - 48px);
}
.dropdown-nav {
display: none;
background-color: white;
width: 104px;
position: fixed;
padding: 4px 0px 3px 0px;
z-index: 4;
left: 352px;
top: 176px;
transition: top 0.2s;
box-shadow: 0 0px 2px 0 rgba(60,64,67,.3), 0 0px 6px 2px rgba(60,64,67,.15), inset 0 0px 6px -4px rgba(154,160,166,.5);
}
.dropdown-options {
align-items: center;
display: flex;
flex-wrap: wrap;
width: 94px;
height: 48px;
padding-left: 10px;
}
.dropdown-options:hover {
background-color: #f7f9fa;
}
.dropdown-options span {
color: #80868b;
}
.popout-options {
padding-right: 8px;
padding-left: 24px;
padding-top: 16px;
padding-bottom: 15px;
display: inline-block;
width: calc(100% - 32px);
border-top: 1px solid #ddd;
font-size: 13px;
font-weight: 700;
color: #80868b !important;
}
.popout-options:last-of-type {
border-bottom: 1px solid #ddd;
}
.popout-options:first-of-type {
border-top: 0;
}
#close-popout {
padding: 12px 12px 11px 20px;
}
#close-search-popout {
padding: 12px 20px 11px 12px;
text-align: right;
}
.popout-search-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
transition: opacity 0.2s;
}
.popout-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
z-index: 5;
transition: opacity 0.2s;
}
html {
background-color: #fff;
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
width: 100%;
position: absolute;
padding: 0;
/* This ensures that the scroll bar is always present, which is needed */
/* because render happens after page load; otherwise the header */
/* would 'bounce' in-between states. */
min-height: 150%;
}
h2 {
font-size: 130%;
}
h1, h2, h3, h4, h5 {
line-height: 1.5em;
margin-bottom: 1em;
}
html, h4, h5, h6 {
font-size: 14px;
}
a, a:visited {
color: #039be5;
text-decoration: none;
}
pre code {
display: block;
}
.cols-wrapper {
margin-top: 56px;
}
.header-outer, .cols-wrapper {
padding: 0 60px;
}
html, .header-inner a {
color: #212121;
color: rgba(0, 0, 0, .87);
}
/** Archive widget. **/
.BlogArchive {
font-size: 13px;
font-weight: normal;
}
.BlogArchive .widget- {
display: none;
}
.BlogArchive h2, .Label h2 {
color: #039be5;
text-decoration: none;
}
/* Specificity needed here to override widget CSS defaults. */
/* Months */
.Label {
font-size: 13px;
font-weight: normal;
}
.sidebar-icon {
display: inline-block;
width: auto;
vertical-align: middle;
height: 24px;
margin-right: 24px;
}
.sidebar-social-links {
align-items: center;
}
.sidebar-social-links .android-logo,
.android-logo {
height: 48px;
}
.sidebar-social-links a:last-child img {
margin-right: 0;
}
.Label .widget- {
display: none;
}
.searchBox input {
border: 1px solid #eee;
color: #212121;
color: rgba(0, 0, 0, .87);
font-size: 14px;
padding: 8px 8px 8px 40px;
width: 100%;
font-family: Android Euclid, Roboto, sans-serif;
background: url('https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png') 8px center no-repeat;
}
.searchBox ::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .54);
}
.section {
margin: 0;
padding: 0;
}
#sidebar-top {
border: 1px solid #eee;
}
#sidebar-top > div {
margin: 16px 0;
}
/*main post*/
.post {
margin-bottom: 30px;
}
#main .post .title {
margin: 0;
}
#main .post .title a {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: normal;
font-size: 24px;
}
.message, #main .post .post-header {
margin: 0;
padding: 0;
}
#main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption {
color: #444;
font-weight: 500;
}
#main .post .post-header .published {
font-size: 11px;
font-weight: bold;
}
.post-header .publishdate {
font-size: 16px;
font-weight: normal;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#main .post .post-footer {
font-size: 12px;
padding-bottom: 21px;
}
.label-footer {
margin-bottom: 12px;
margin-top: 12px;
}
#main .post .post-header .published {
margin-bottom: 16px;
}
.post .post- {
color: #545454;
color: rgba(0, 0, 0, .67);
font-size: 16px;
margin: 16px 0 36px 0;
line-height: 24px;
word-wrap: break-word;
}
.post-summary {
display: none;
}
/* Override all post images/videos to left align. */
@media (max-width: 712px) {
.post- img {
max-width: 100%;
height: auto;
width: auto;
}
}
.post- .tr-caption-container img {
margin-bottom: 12px;
}
.post- iframe, .post- embed {
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
}
.post- .carousel-container {
margin-bottom: 48px;
}
#main .post- b {
font-weight: 500;
}
/* These are the main paragraph spacing tweaks. */
#main .post- br {
: '';
display: block;
padding: 4px;
}
.post-content .space {
display: block;
height: 8px;
}
.post-content iframe+.space, .post-content iframe+br {
padding: 0 !important;
}
#main .post .jump-link {
margin-bottom: 10px;
}
.post-content img, .post-content iframe {
margin: 30px 0 20px 0;
}
.post-content > img:first-child, .post-content > iframe:first-child {
margin-top: 0;
}
.col-right .section {
padding: 0 16px;
}
#aside {
background: #fff;
border: 1px solid #eee;
border-top: 0;
z-index: 2;
}
#aside .widget {
margin: 0;
}
#aside .widget h2, #ArchiveList .toggle+a.post-count-link {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: 400 !important;
margin: 0;
}
#ArchiveList .toggle {
float: right;
}
#ArchiveList .toggle .material-icons {
padding-top: 4px;
}
#sidebar-top,
#sidebar {
background: #fff;
}
#sidebar .tab {
cursor: pointer;
}
#sidebar .tab .arrow {
display: inline-block;
float: right;
}
#sidebar .tab .icon {
display: inline-block;
vertical-align: top;
height: 24px;
width: 24px;
margin-right: 13px;
margin-left: -1px;
margin-top: 1px;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget-content > :first-child {
padding-top: 8px;
}
#sidebar .active .tab .arrow {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#sidebar .arrow {
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget h2 {
font-size: 14px;
line-height: 24px;
display: inline-block;
}
#sidebar .widget .BlogArchive {
padding-bottom: 8px;
}
#sidebar .widget {
border-bottom: 1px solid #eee;
box-shadow: 0px 1px 0 white;
margin-bottom: 0;
padding: 14px 0;
min-height: 20px;
}
#sidebar .widget:last-child {
border-bottom: none;
box-shadow: none;
margin-bottom: 0;
}
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style: none;
padding: 0;
}
#sidebar ul li a {
line-height: 32px;
}
#sidebar ul ul ul li a {
line-height: 24px;
}
#sidebar .archive {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC');
height: 24px;
line-height: 24px;
padding-left: 30px;
}
#sidebar .labels {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC');
height: 20px;
line-height: 20px;
padding-left: 30px;
}
#sidebar .rss a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII=');
}
#sidebar .subscription a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC');
}
#sidebar-bottom {
background: #f5f5f5;
border-top: 1px solid #eee;
}
#sidebar-bottom .widget {
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
text-align: center;
}
#sidebar-bottom > div:last-child {
border-bottom: 0;
}
#sidebar-bottom .text {
line-height: 20px;
}
/* Home, forward, and backward pagination. */
.blog-pager {
padding-top: 10px;
margin-top: 15px;
text-align: right !important;
}
#blog-pager {
padding: 40px 0 0;
}
#blog-pager a {
display: inline-block;
}
.blog-pager i.disabled {
opacity: 0.2 !important;
}
.blog-pager i {
color: black;
margin-left: 16px;
opacity: 0.54;
}
.blog-pager i:hover, .blog-pager i:active {
opacity: 0.87;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
.gplus-profile {
background-color: #fafafa;
border: 1px solid #eee;
overflow: hidden;
width: 212px;
}
.gplus-profile-inner {
margin-left: -1px;
margin-top: -1px;
}
/* Sidebar follow buttons. */
.followgooglewrapper {
padding: 12px 0 0 0;
}
.loading {
visibility: hidden;
}
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 40px !important;
}
/* ADB */
.adb-hero-area {
min-height: 104px;
background-color: #073042;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
z-index: 5;
position: fixed;
width: 100%;
}
.adb-hero-logo {
height: 80px;
position: absolute;
top: 12px;
left: 16px;
}
.adb-footer-btm {
display: flex;
margin: 0 24px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 40px;
}
.subscribe-btn {
color: black;
background-color: #3DDC84;
border-radius: 100px;
font: 500 16px/24px Android Euclid,Roboto,sans-serif;
padding: 12px 24px;
border: 0;
}
.adb-footer-info {
align-items: center;
display: flex;
padding: 0;
margin: 9px 0 0 -8px;
font-size: 13px;
}
.footer-list {
list-style: none;
padding: 0 8px;
}
.subscribe-info {
list-style: none;
padding: 0 8px 0 0;
font-size: 13px;
color: black;
}
.footer-newsletter {
display: flex;
align-items: center;
}
.adb-header-inner {
display: flex;
align-items: center;
}
.adb-header {
background-color: white;
color: #fff;
height: 48px;
left: 0;
overflow: hidden;
padding: 36px 24px;
right: 0;
top: 104px;
z-index: 4;
display: flex;
align-items: center;
position: fixed;
border-bottom: solid 1px #DADCE0;
}
.adb-shadow {
margin-top: 48px;
height: 1px;
width: 100%;
position: fixed;
background: white;
z-index: 2;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
}
.adb-logo-box {
display:inline;
}
.adb-burger-box {
display: none;
margin: 0 16px 0 0;
}
.adb-search-box {
display: none;
margin: 0 0 0 16px;
}
.adb-htag-box {
display: flex;
align-items: center;
}
.adb-header-tags {
padding: 0 24px 0 0;
}
.adb-header-tags ~ .atb-header-tags {
padding: 0 24px;
}
.adb-header-tags a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #5F6368;
}
.adb-header-tags a:hover {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #073042;
}
.more-dropdown {
display: none;
}
.dropdown-icon {
transition: all 0.3s;
}
.adb-header-logo {
display: inline-block;
vertical-align: -11px;
width: 134px;
height: 32px;
}
.adb-header-title {
color: #fff;
display: inline-block;
font-size: 20px;
font-weight: normal;
}
.adb-header-links {
border-left: 1px solid rgba(0, 0, 0, .1);
display: block;
left: 250px;
list-style: none;
margin: 0;
padding: 12px 0 12px 18px;
position: absolute;
top: 0;
}
.adb-header-link-item {
display: inline-block;
}
.adb-header-link, .adb-header-link:visited {
color: #fff;
display: inline-block;
font-weight: 500;
opacity: .7;
padding: 12px 9px;
text-transform: uppercase;
vertical-align: 2px;
}
.adb-header-link:hover, .adb-header-link:focus {
color: #fff;
opacity: 1;
}
.adb-header-console, .adb-header-console:visited {
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
color: #fff;
float: right;
font-size: 14px;
font-weight: 500;
line-height: 28px;
padding: 4px 10px;
position: relative;
text-transform: uppercase;
transition: box-shadow .2s;
z-index: 60;
}
.adb-header-console:hover {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
color: #fff;
}
.adb-header-console:focus {
background-color: rgba(63, 81, 181, .1);
color: #fff;
}
.adb-header-console-image {
vertical-align: -5px;
}
.adb-hero {
background-color: #dcedc8;
margin-top: 64px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
color: #414141;
display: inline-block;
font-weight: 500;
margin: 25px 25px 0;
}
.adb-hero-inner {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAc4AAADZCAMAAACenCAVAAAAvVBMVEXc7cjY68PT6bvR57fQ57bY6sPZ68TU6bvR6LfP5rTQ57XR57jW6r7b7cfa7MbS6LnS6Lrb7cbQ6Lfb7MbX6r/Z68PY6sLV6b7U6b3U6r3T6LnX68Da7MXP57Tb7Mfc7cfW6b/P57XS57nY68LY68HU6L3W6r/W6b7T6brX6sDV6rzQ57fa7MTV6b3T6Lra68TR57bX68HW6sDS57jU6bzO5rTP5rXZ7MXR6LbZ68XX6sHT6LvV6bzS6LjZ7MILrTuqAAAIyklEQVR4AezXhXEkUQwE0B6+Xhg8MzND/smZ4UsLBSb9Kr0UhI1vl6RZnqUFlnBl9Y+j8WQK4+qGr9oOi7iKr0YFTOt6vhsPmM81/FDAspafUszl/vNTXsOuFYZWMYfrRgyswa51hjLM4TYYGsOuTQpbgNO2dyjAroxCvgunpZT2YFZDaQKnlFRg1z6lgxpOOqS0CbtqKutwwhGVYxh2QqWGC/WUMlhWH1BK4QKnVFZh2hmVEh/cXk7pHLbt5pQafHCT6Jr9gsoR3riayiXMyyhd4Y27jDDHJVQu8MJdU7lBBBpKoz08c7eU8gERuKNyhiduhcopolBRqeGAMaV7xKE7eGzvThQTVZooAJdC1AM2qGg0BhdCrpnciVE0i9dZ3v+t/n2ZMBtJGpsu6nuCrNJddar4/gAnMmuP/GPk3JFwrL2QKw3FD26GyGmQNXbIGVHNKdfmYraDl/ZUcxO8NNtIW888bafDC7tP5R2qtQfL724N5AypxjbIGdseWHMV1VfP+rrnZvbTerMEhHb2Py4eA7KX9AwD5LSppi5ZdPTHEhv6cd5mSjZaeMW/Dc66TEpkO+Q0qIbUE5es6ke85FMN/YGXZs9yQLdXYGVASGJDBaMZXsQouzau/fzfitNsKvpUL1O8dFBksb+Q80C1coaco7RtLeYzO9tHCV7qUY0ckXPGribSoNpQB3Z1MbWtby1hiZwWw35CRjUReRx7Sg5ecqgmJiyHOxrIWVEtPDPNY/TMx4bmczq5T3jpSRELm1NWodVmlGY364tP4ZXvdw5u8jjDf8yQJJ7j+2HYfBh3d+l5HFB5RmyzjM3yh8iDUbb6M9y7j3idgxM+3BzTuPzyXmdOTARJaUc8tUmX7ekB7+aF7dV1a0G6pIx3CkxKmBBUreMfvS0086aTnZZf6kfG53mlN/0UnS2bW5Socz9OA737eM6JkZWu4uUiXfVcnIT34eZM6Yq9hcRKR0OpL7i9cHBi/udjrCOUuiFWsnc2/oKsfYAhXvM2lsj4S/7b2/L9y4cODDu0j8HbBzqSPvutOksqpDH+gorw1+dvHLcaEzv3r4+0BdmnBJXi9bL+G6qaEbFz98rF4sEwnKGKrrrxK3sOuzoMlM9i+ql47KPC/HX8inTxljgKUHBYI1g6qDx/HBct76XETfHF4v3hHpZwVgH9APc0TfFSyTwLZ7DJ9FYxmZvTv1h89DmBdbyHEX0rcuuTRB38fNuQ2vmw1GAYMSjv6ZwQbD0ksFlz9LPW7gMxNv3RBVtlDqz3cbWo32rmEXLGFExcsJBMnilGzk29pleT5gx8fLiq2XzyM2rllpiboEYGxF2UoD6+EntL1Ma+TkOP/LVqNJLM3yeqgayDmnjqKmIu3aNGDhlx1pqiZvyUuAqaqKGwRRwt1gnqqR0QO5ce6ms5J1ZGIWqtkxIf0QNqb7ohJjIXgFjPiYF4j38R2wbZTk1m+C/xqU9WSzv4hkgyVkcg0QvIUg0XEHleRjaK/gQb8g/a2EL8hHcky6zxC+JTQBa5c/BL4nBO1lgl+B2xJjv0QxQgnA1ZoOGhGHFNldedoShxMadKU/d4BeEEVGF3Ll5FJF+psm7Bh5xwHyDeoKeogvp7iDfpbKhyWgeIN/JSqpjbBOLtlqwq7qJNFdKGeKdQUUUEIcS7Df6iSngeQAPhtqgCWi60EElKxjUSsCFriK5nYEMuLDtoJSZk0BiaiaYsZGPlXnEqHoipIhOaKIW4WnD63xThgtP/pthHdFqfUCIRRvK/KZ+3VX1uiulc7puc3EstSOpD9d7+LYGTFfiQenyKkxE3VLLGI9iQkcH4CackzqlEwRYnJbwNlUb5ODHhBVSWHk5O+JFMLkh5qFYxLxnoPZ9BmJGRdrELNuTddNEAwhg34NSvFnvSqgth1ANpNEIZkhkYSg4dt9rHocCFXvvxWUD/ELR2TQ98hMOWon+Ks7YLrZI70iWETu6yT99Qt3uw4A4j+lY6hU4dVcloUFdR3tkA1kt29J1zHxr1SIsGNAoDnvGjMCj/CLmr3INzQj9x5sFm41Ns933c0PtNoc+O0bJNA9+Xryp14+zSL9x5PH6beS2vQrfP0exkQcMG08BdCn1SepeFc8KPijWs5MxPdzN4CipzR2nQb8wdnu0O5UKbkN7h/LQZ/a9Ms+pZNYp9kQt9Yvo9H3Yx8H15QSXm/qZUQMY0ybOCPtNKlIMuqYAogW1SKkBBoxW9SXSARoqKCGGbBRVxBY0C85V3h2mb/MrASGxIb3BnYlaxwXRmLwUMFxMc6NSlQvpM6nt5MXTylOl00JGKYTqxp6DVBb1SkECrlOmvs0HFGA7efjA0dwrLfKVC5tDLp1dpGHrGKFjm0tCZYEWvMTA0NrOBZVZUSMtoLn4I3T5RISnTZTGXJrea9BPotmU6QrqlQi6gXWx05V5MRTiwTaD/4aW5FN8y9pCJYZ2usSPBNRUzNfapNIZ1fGM7KQdUSMNYJyl6Ajh2yAKTBUYHpfCZruJ0jB3wCpVur1GSIf3G8yOPlG1ePDN46d2iJEmLR+86L4lNBRQTZXK/6UAxunMWDxC3Da6omXsoz5XiOa8/NfV9JYHRXVBXiudG8r0y9Jmzpl87oFSDFv3Qog2rDTb0Q6qJckX0K7coWTKkHxh1YLmkSz/Q6JjNKnVQOj+lnM0nMPDxmnLuPhjej5rhFLbjmP4nOF6BCXfdov8JLkPj+xcdnMjh03p3nWXLBwesuB/+GGbHXbc5wIkkSt7CwEmXU1lGbPX3OYVBt5y2Yoov9EN/QVhpJK9xZL/7P4Kw1LO8iIH7qxx8CEu5zG8pcldpQ1hrSjnBI4S9YnrpBsJiEzkIcfIkByFWUqkIcdKjb7kQdos49a3Fjv7vE4TlfPoflYAPuXoeIaw3pv+6h7CeQ/8RPYIP6XpegwGxknMtwxcqK7AgAqkhcDKkf3oAI9LE9sCDWGhf4S8M70peggnxQERTMCFcIjUDF+KOUrAhhvQANkT4dwEsPvJYWz4QAAAAAElFTkSuQmCC');
background-position: bottom right 70px;
background-repeat: no-repeat;
background-size: auto 100%;
margin: 0 auto;
max-width: 980px;
padding: 0 60px;
position: relative;
}
.adb-hero-back-icon {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.adb-hero-title {
font-size: 22px;
line-height: 28px;
padding: 24px 24px 0px 112px;
}
.adb-hero-title a {
color: #FFFFFF;
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500;
}
.adb-hero-summary {
font-size: 16px;
line-height: 24px;
padding: 8px 24px 8px 112px;
}
.adb-hero-summary a {
color: rgba(255, 255, 255, 0.9);
}
.adb-hero-description {
color: #6f7172;
font-size: 16px;
margin: 0;
max-width: 440px;
padding-bottom: 32px;
}
.adb-hero-search {
position: absolute;
top: 19.35%;
right: 1.94%;
}
.adb-hero-search .searchBox input {
border: 1px solid #80868B;
border-radius: 4px;
color: white;
}
.adb-hero-search .searchBox input::placeholder {
color: #F1F3F4;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
padding-left: 12px;
}
.adb-hero-link {
position: absolute;
right: 1.67%;
top: 64.52%;
}
.adb-hero-link a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #3DDC84;
letter-spacing: 1.4px;
}
.adb-hero-arrow {
display: inline-flex;
font-size: 24px;
vertical-align: middle;
}
.adb-socials-box {
display: flex;
position: absolute;
right: 1.67%;
}
.adb-socials-category,
.adb-socials-divider {
display: flex;
align-items: center;
}
.adb-socials-divider {
color: #DADCE0;
font-size: 40px;
font-weight: 100;
margin: 0 20px;
}
.adb-socials-category img,
.adb-footer-social-links img {
height: 24px;
}
.adb-footer-social-links-img {
margin-right: 20px;
}
.adb-hero-subscribe, .adb-hero-subscribe:visited {
background-color: #90c653;
color: #fff;
display: inline-block;
border-radius: 3px;
margin: 25px 0 60px;
padding: 13px 32px;
text-transform: uppercase;
}
.adb-hero-subscribe:hover, .adb-hero-subscribe:focus {
background-color: #333;
}
.adb-footer {
margin: 32px auto 64px;
}
.adb-footer-more {
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #f0f0f0;
padding: 30px 0;
}
.adb-footer-more a {
color: #000;
display: inline-block;
font-size: 20px;
font-weight: 300;
margin-right: 16px;
}
.adb-footer-social {
float: right;
margin-top: -62px;
}
.adb-footer-social a {
background-color: #ccc;
background-position: center;
background-repeat: no-repeat;
background-size: auto 16px;
border-radius: 50%;
display: inline-block;
height: 36px;
margin-left: 16px;
transition: background-color .1s;
width: 36px;
}
.adb-footer-social-youtube {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAQAAAAxWje/AAABLUlEQVQ4y6WUvUoDYRBFr42gCdhK8AV8BwsVC0FQfIQUgr5DIKJoGy1CfAaDq1hIGn8K2xDSaBc1wUJJEYmbkDXssdi1Mrvfst9tZ+bAzNwZSZLEAmvsUKTCBQ80eaWLyxiAMS5dXmhyT5UyBfIsM68/McM1aXRDJgCUSKsTSWQZpAa4ZMUmNtoSRxGhbd4TAI7F1eSIxBwVfAPgUtSjAJLEEk+xgLroxAEkpikyigS0RS8eIEks8hgB6ImhGSAxxS5fE9JGwksCkCRyOP/SfPFjC0jawl5UC9ZDbBvXuB+zxjezkZ5NRnJirHxmtLIjDq2O6UBsWJ3zut1D+WZWEqepAaVg0hlqqcpr4VMNbbpKngJlqtzRoMUnfTx8fDz6fNCiwS3n4VtfIRdU/gLTrSb7DGWLcQAAAABJRU5ErkJggg');
}
.adb-footer-social-youtube:hover {
background-color: #f44336;
}
.adb-footer-social-gplus {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAUCAQAAACpWpz6AAABJUlEQVQ4EZXBTUoCYQDH4X9hTS3Cja0Kyb2X6BCJoLlr1aKwK1QHCMMzWLiqTcuWXaAWQWIlU1DQh4QJ+Wt4X95x0hGn55FCeGzSpMUXXW45ocSC/oMiHUZ1KCgZZqkzyZaSoM7QgCd8BlgXLGo6ijgv7JJRgAxV3jjDUwwMOXh0sK5ZUQRZ5hQLQw4VrA/WlBCGHJpY+0oMQw5trLxCjNtTgFiij5VSiHFHChBL9LFSCjGurgCxRBsrrxA+Pj4+Pl2sQ0VgyKGJdaAYNLAqisCQQxnrk5xGkKOHlVUEhhw8HrFuWFUEaa6wLvUHhoYo4LxSZVkBlihzh7OuaagR9YzPD0PHmo5ZakzSIKVk2OCBUe/sMKPkmKfEKS16fHPPOduklcAvR50zMVwhTI4AAAAASUVORK5CYII=');
}
.adb-footer-social-gplus:hover {
background-color: #f44336;
}
.adb-footer-social-twitter {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAQAAAB0gUQ+AAABI0lEQVQ4EY3BQShDAQDH4f+zTSyJuLgoLlwclYOTHCwHu9ouiLRScpUmNwduDkpCSTs4LAeJhINoOTo4ctHkskyJtf20vWbe3tvb+z7JFUGibLHPMj0qoYEWSYzRKkdMkKbsm3m6WSRFuyQeuKNNNoTJU61ABL8kssAjvbKgiTR2V+ywJol3ijJMY+gP4zhLEpDEGWUpwvhUQgwnh/hURIT/3thjjmGWcBKViSCXeBWSiWdO+MGbPpm4watPfDIRxasLVXCANwuqwCDGK/V80akKGjnmmgLutmXFOvV80CUrAiRxNys7DCY5J4OzXdVCP7c4OcIvO5oJkSCHXZ5VDFkxwilP5HB2z6Cc0EGcF6plSTAqNxgMMEWcTTZYYYYhAqrpF0uh1zgYi1hVAAAAAElFTkSuQmCC');
}
.adb-footer-social-twitter:hover {
background-color: #55acee;
}
.adb-footer-social span {
display: none;
}
.adb-footer-related {
padding-top: 8px;
}
.adb-footer-related a {
color: #999;
font-size: 12px;
white-space: nowrap;
}
.adb-footer-related a:not(:last-child)::after {
content: '|';
cursor: default;
margin: 0 7px 0 10px;
}
.adb-footer-section {
margin: 48px auto;
max-width: 700px;
}
.adb-footer-title {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #3C4043;
margin-bottom: 24px;
}
.adb-footer-columns {
display: flex;
justify-content: space-between;
}
.adb-other-blogs-title img {
margin-right: 8px;
vertical-align: -12px;
}
.adb-footer-social-label {
display: flex !important;
align-items: center;
}
.adb-footer-column a,
.adb-footer-social-label,
#footer-subscribe .tab h2 {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
padding: .85em 0;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-btm a {
color: #000;
font-family: Android Euclid, Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.25px;
opacity: .7;
transition: opacity .1s;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-column a {
opacity: .7;
transition: opacity .1s;
}
.adb-footer-column a:hover {
opacity: 1;
}
.adb-footer-social-links {
margin: 0 0 20px;
}
#footer-subscribe .widget {
margin: 0;
}
#footer-subscribe .tab {
display: flex;
align-items: center;
}
#footer-subscribe .tab img {
height: 16px;
}
.adb-label-view-more-toggle {
cursor: pointer;
}
.adb-label-view-more-toggle::after {
content: '\00e5c5';
float: right;
font: 2em / .7 Material Icons;
opacity: .6;
}
.adb-label-view-more-toggle.active::after {
transform: rotate(180deg);
}
/** Desktop **/
@media (max-width: 900px) {
.col-right {
display: none;
}
.col-main {
margin-right: 0;
min-width: initial;
}
.cols-wrapper {
min-width: initial;
}
.adb-hero-inner {
background-image: none;
}
}
/** ADB header breakpoint **/
@media (max-width: 768px) {
.adb-header-links {
display: none;
}
.dropdown-nav {
display: none;
}
.adb-header {
padding: 12px;
text-align: center;
}
}
@media (max-width: 1196px) {
.breakpoint-hide {
display:none;
}
.more-dropdown {
height: 50px;
display: flex;
align-items: center;
}
}
@media (max-width: 915px) {
.adb-header {
height: 0;
margin: 0;
padding: 0;
display: none;
}
.adb-header-tags {
display:none;
}
.more-dropdown {
display:none;
}
.dropdown-nav {
display: none;
}
.adb-hero-summary,
.adb-hero-link,
.adb-socials-category {
display: none;
}
.adb-hero-title {
padding-left: 152px;
}
.adb-hero-logo {
height: 52px;
top: 12px;
left: 120px;
}
.adb-footer-section {
margin: 0 auto;
}
.adb-footer-btm {
margin: 0 24px 40px;
}
.adb-hero-area {
min-height: 76px;
}
.adb-burger-box {
display:inline;
position: absolute;
top: 17px;
margin-left: 24px;
font-size: 32px;
color: white;
}
.adb-hero-title a{
margin-left: 40px;
}
}
/** Tablet **/
@media (max-width: 712px) {
.header-outer, .cols-wrapper {
padding: 0 40px;
}
/* ADB */
.adb-hero-inner {
padding: 0 40px;
}
.adb-hero-title {
font-size: 16px;
padding-left: 132px;
}
.adb-hero-logo {
left: 100px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 36px;
}
.adb-other-blogs-list {
columns: auto;
}
.adb-other-blogs-title {
font-size: 20px;
}
.adb-other-blogs-title img {
height: auto;
vertical-align: -6px;
width: 32px;
}
.adb-footer-section {
margin: 0 24px;
}
.adb-footer-more {
padding-bottom: 75px;
}
.adb-footer-social {
float: none;
margin-bottom: 35px
}
.adb-footer-social .adb-footer-social-youtube {
margin-left: 0;
}
}
/** Small tablet **/
@media (max-width: 600px) {
.header-inner .google-logo {
top: 32px;
margin-top: 0;
}
.header-inner .google-logo img {
height: 56px;
width: auto;
/*
height: auto;
width: 188px;
*/
/* Override any optical adjustments at desktop size. */
top: 0 !important;
}
.header-left {
left: 0;
top: inherit;
bottom: 24px;
}
.adb-footer-columns {
display: block;
}
.adb-footer-column {
margin-bottom: 48px;
}
.adb-footer-column a {
opacity: 1;
}
.adb-footer-social-label {
padding: 0;
}
.adb-footer-column .widget a {
padding: 0;
}
.footer-newsletter {
margin-top: 16px;
}
.subscribe-btn {
width: 100%;
}
.adb-hero-search {
display: none;
}
.adb-search-box {
display:inline;
position: absolute;
top: 24px;
right: 24px;
font-size: 24px;
color: white;
}
}
/** Mobile **/
@media (max-width: 480px) {
.header-outer, .cols-wrapper {
padding: 0 16px;
}
.adb-hero-logo {
height: 28px;
top: 24px;
left: 76px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 16px;
}
.cols-wrapper {
margin-top: 0;
overflow-x: auto;
}
.post-header .publishdate, .post .post-content {
font-size: 16px;
}
.post .post-content {
line-height: 28px;
margin-bottom: 30px;
}
.post {
margin-top: 30px;
}
.byline-author {
display: block;
font-size: 12px;
line-height: 24px;
margin-top: 6px;
}
#main .post .title a {
font-weight: 500;
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
}
#main .post .post-header {
padding-bottom: 12px;
}
#main .post .post-header .published {
margin-bottom: -8px;
margin-top: 3px;
}
.post .read-more {
display: block;
margin-top: 14px;
}
.post .tr-caption {
font-size: 12px;
}
#main .post .title a {
font-size: 20px;
line-height: 30px;
}
.post-content iframe {
/* iframe won't keep aspect ratio when scaled down. */
max-height: 240px;
}
.post-content .separator img, .post-content .tr-caption-container img {
margin-left: -16px;
max-width: 100%;
}
.post-content table {
table-layout: fixed;
width: 100%;
}
/** List page tweaks. **/
.list-page .post-original {
display: none;
}
.list-page .post-summary {
display: block;
}
.list-page .comment-container {
display: none;
}
.list-page .label-footer {
display: none;
}
.list-page #main .post .post-footer {
border-bottom: 1px solid #eee;
margin: -16px 0 0 0;
padding: 0 0 20px 0;
}
.list-page .post .share {
display: none;
}
/** Detail page tweaks. **/
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 32px !important;
}
.detail-page .label-footer {
margin-bottom: 0;
}
.detail-page #main .post .post-footer {
padding-bottom: 0;
}
.detail-page #comments {
display: none;
}
/* ADB */
.adb-header-console {
display: none;
}
.adb-hero-inner {
padding: 0 16px;
}
.adb-hero-title {
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
font-weight: 500;
line-height: 30px;
padding-left: 80px;
}
}
/* Fixed-position sidebar for larger screens */
@media screen and (min-height: 700px) and (min-width: 1100px) {
.col-right .section {
max-height: calc(100vh - 197px);
overflow: auto;
}
.col-right.scroll-start {
left: 50%;
margin-left: 241px;
position: fixed;
top: 96px;
}
.col-right.scroll-end {
bottom: 485px;
position: absolute;
top: auto;
}
}
[data-about-pullquote], [data-is-preview], [data-about-syndication] {
display: none;
}
#imgFull {
display: block;
margin: 10px auto;
width: 90%;
border: 0;
padding: 0;
}
#imgHalf {
display: block;
margin: 10px auto;
width: 50%;
border: 0;
padding: 0;
}
#flexParent {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
#flexImg {
width: 90%;
margin: 0;
padding: 0;
border: 0;
}
#imgCaption {
text-align: center;
font-style: italic;
font-size: 85%;
margin: -5px 0 10px 0;
padding: 0;
border: 0;
}
#floatRight {
float: right;
width: 45%;
margin: 5px 0 5px 5px;
padding: 0;
border: 0;
}
#floatLeft {
float: left;
width: 45%;
margin: 5px 5px 5px 0;
padding: 0;
border: 0;
}
</style>
<style>
.loading {
visibility: visible;
}
</style>
</head><body>
<div class="adb-detail">
<div class="adb-detail__info">
</div>
<div class="adb-detail__title">
</div>
<hr>
<div class="adb-detail__content">
<div>
<meta content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW5n06FoVE-2EYCtpdVDhyphenhyphenTnQY6uxTLFwcX4ulmQ6OmzdgLDu500sWA8CPjM36tDpjiSCFJDsQ4fslD8InyzLPi4Tsin0zintvb4cfZbtK7WMb3BV9qXenxgSXsemkZwYkUCGOCanhUbJWMfErr-meqQ5Oo7eae1H4KC_cSh5XRngvHG3Hk6LDM0z4zOg/s1600/AndroidDev_MetaRelease__V4.png" name="twitter:image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW5n06FoVE-2EYCtpdVDhyphenhyphenTnQY6uxTLFwcX4ulmQ6OmzdgLDu500sWA8CPjM36tDpjiSCFJDsQ4fslD8InyzLPi4Tsin0zintvb4cfZbtK7WMb3BV9qXenxgSXsemkZwYkUCGOCanhUbJWMfErr-meqQ5Oo7eae1H4KC_cSh5XRngvHG3Hk6LDM0z4zOg/s1600/AndroidDev_MetaRelease__V4.png" style="display: none;">
<em>Diposting oleh Terence Zhang – Developer Relations Engineer, Google; bekerja sama dengan Tina Ho - Partner Engineering, TPM dan Kun Wang – Partner Engineering, Partner Engineer</em>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW5n06FoVE-2EYCtpdVDhyphenhyphenTnQY6uxTLFwcX4ulmQ6OmzdgLDu500sWA8CPjM36tDpjiSCFJDsQ4fslD8InyzLPi4Tsin0zintvb4cfZbtK7WMb3BV9qXenxgSXsemkZwYkUCGOCanhUbJWMfErr-meqQ5Oo7eae1H4KC_cSh5XRngvHG3Hk6LDM0z4zOg/s1600/AndroidDev_MetaRelease__V4.png"><img border="0" data-original-height="800" data-original-width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW5n06FoVE-2EYCtpdVDhyphenhyphenTnQY6uxTLFwcX4ulmQ6OmzdgLDu500sWA8CPjM36tDpjiSCFJDsQ4fslD8InyzLPi4Tsin0zintvb4cfZbtK7WMb3BV9qXenxgSXsemkZwYkUCGOCanhUbJWMfErr-meqQ5Oo7eae1H4KC_cSh5XRngvHG3Hk6LDM0z4zOg/s1600/AndroidDev_MetaRelease__V4.png"></a>
<p>Dengan dirilisnya <a href="https://android-developers.googleblog.com/2024/02/first-developer-preview-android15.html" target="_blank">Pratinjau Developer Android 15</a> yang pertama, rilis Android baru lainnya yang menghadirkan fitur baru dan peningkatan di balik layar untuk miliaran pengguna di seluruh dunia akan segera hadir. Sebagai developer Android, Anda adalah pemain utama dalam evolusi ini; dengan tetap berada di atas <a href="https://support.google.com/googleplay/android-developer/answer/11926878" target="_blank">siklus upgrade targetSDK</a>, Anda memastikan bahwa pengguna mendapatkan pengalaman terbaik.</p>
<p>Cara Meta, perusahaan induk Instagram, Facebook, WhatsApp, dan Messenger, melakukan pendekatan terhadap Android 14 memberikan cetak biru untuk kesuksesan developer dan kepuasan pengguna. <b>Meta meningkatkan kecepatan adopsi targetSDK hingga 4x lipat</b>, dan untuk memahami lebih lanjut tentang bagaimana mereka membangunnya, kami berbicara dengan tim di Meta, dengan tujuan untuk mendapatkan insight yang dapat dibangun oleh semua developer ke dalam program pengujian mereka.</p>
<h3>Perjalanan Meta di A14: Cetak biru untuk adopsi yang lebih cepat</h3>
<p>Ketika Android 11 diluncurkan, beberapa aplikasi Meta mengalami kendala dengan fitur yang sudah ada, seperti Chat Head, dan persyaratan baru, seperti integrasi penyimpanan terbatas. Memperbaiki masalah ini cukup rumit karena lambatnya adopsi alat developer dan strategi aplikasi yang terdesentralisasi. Pengalaman ini memotivasi Meta untuk membuat Program Kesiapan Android OS internal yang berfokus pada prioritas pengujian awal dan menyeluruh di seluruh jendela rilis Android dan mempercepat adopsi targetSDK aplikasi mereka.</p>
<p>Program ini secara resmi diluncurkan tahun lalu. Dengan mengompilasi aplikasi terhadap setiap Android 14 beta dan melakukan pengujian otomatis dan fungsi mendasar software secara menyeluruh untuk secara proaktif mengidentifikasi potensi masalah, Meta dapat dengan mulus mengadopsi fitur Android 14 baru, seperti tipe Layanan Latar Depan <a href="https://issuetracker.google.com/" target="_blank">dan mengirimkan masukan serta laporan bug tepat waktu ke tim Android</a>, yang berkontribusi pada peningkatan OS.</p>
<p>Meta juga mempercepat adopsi targetSDK mereka untuk Android 14—mengupdate Messenger, Facebook, dan Instagram dalam waktu satu hingga dua bulan setelah rilis AOSP, dibandingkan dengan tujuh hingga sembilan bulan untuk Android 12 (<b>peningkatan kecepatan lebih dari 4x lipat!</b>). Program kesiapan yang baru dibuat Meta menjadi kunci pencapaian ini dengan bekerja di setiap aplikasi untuk mengadopsi perubahan Android terbaru sembari tetap mempertahankan kompatibilitas. Sebagai contoh, dengan mengotomatiskan dan menyederhanakan proses rilis SDK mereka, Meta mampu memangkas waktu peluncuran dari tiga minggu menjadi kurang dari tiga jam, meningkatkan kerja sama di antara masing-masing tim aplikasi dengan menyediakan akses langsung ke SDK terbaru dan memungkinkan pengujian cepat terhadap fitur OS terbaru. Pendekatan terpusat juga berarti Threads mengadopsi dukungan Android 14 dengan cepat meskipun aplikasi baru yang berkembang pesat ini didukung oleh tim yang minim. </p>
<h3>Menuai hasilnya: Dampak terhadap pengguna</h3>
<p>Strategi adopsi targetSDK awal Meta juga memberikan manfaat yang signifikan bagi pengguna. Begini caranya:</p>
<ul style="text-align: left;"><ul>
<li><b>Keandalan dan kompatibilitas yang lebih baik:</b> Adopsi awal pratinjau dan beta Android mencegah kejutan menjelang peluncuran OS, menjamin pengalaman hari pertama yang mulus bagi pengguna yang melakukan upgrade ke versi Android terbaru. Sebagai contoh, dengan izin media parsial, eksperimen ekstensif Meta dengan alur izin memastikan "pengguna mendapatkan informasi tentang perubahan tersebut dan memegang kontrol atas setelan privasi mereka," sekaligus memaksimalkan fungsionalitas berbagi media aplikasi.</li></ul></ul><br><ul style="text-align: left;"><ul>
<li><b>Eksperimen yang komprehensif dengan fitur rilis baru:</b> Adopsi rilis Android awal memberikan Meta waktu yang cukup untuk berkolaborasi dengan tim privasi, desain, dan strategi konten, sehingga mereka dapat mengintegrasikan fitur-fitur Android baru yang selalu hadir dalam setiap rilis. Ini meningkatkan kolaborasi pada fitur lainnya, memungkinkan Meta untuk meluncurkan pengalaman gambar <a href="https://source.android.com/docs/core/camera/ultra-hdr" target="_blank">Ultra HDR</a> di Instagram dalam waktu 3 bulan setelah perilisan platform dengan konsep "Android pertama" adalah contoh yang bagus untuk hal ini, memuaskan pengguna dengan warna yang lebih cerah dan kaya dengan rentang dinamis lebih tinggi dalam postingan dan cerita Instagram mereka.</li>
</ul></ul>
<img><div style="text-align: center;"><img alt="Adopsi Ultra HDR oleh Meta di Android 14 menghadirkan warna yang lebih cerah dan rentang dinamis tinggi pada postingan dan cerita Instagram." border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYrW_yI6CcPjUcSgGaaDZ_784bCOcnub8cMzP48Wtj3MpT4n97ylqg67oyE_hNJh-buxbXstd8Q7HWPoNv_bF6eCor0_hpfeCAnlENTik0MRc8WhT44c9FtYcGu63PK01gSdxbBQ21CeeDm_ndcsmENgl66U6OftpGg0cuOePeZSaaCUd2XUeBKrcA15E/s1600/image2.png" width="100%"></div><imgcaption><center><em>Adopsi Ultra HDR oleh Meta di Android 14 menghadirkan warna yang lebih cerah dan rentang dinamis tinggi pada postingan dan cerita Instagram.</em></center></imgcaption><br>
<h3>Menyambut versi Android terbaru</h3>
<p>Perjalanan Meta menyorot alasan yang kuat bagi developer Android untuk mengadopsi pola pikir yang sama dalam bekerja dengan Android beta:</p>
<ul style="text-align: left;"><ul>
<li><b>Uji aplikasi Anda lebih awal:</b> Antisipasi perubahan Android OS, pastikan aplikasi Anda siap untuk SDK target terbaru segera setelah tersedia untuk menciptakan transisi yang mulus bagi pengguna yang melakukan update ke versi Android terbaru. </li></ul></ul><br><ul style="text-align: left;"><ul>
<li><b>Manfaatkan alat terbaru untuk mengoptimalkan pengalaman pengguna:</b> Uji aplikasi Anda secara menyeluruh terhadap setiap versi beta untuk mengidentifikasi dan mengatasi berbagai potensi masalah. Periksa Asisten Upgrade Android Studio untuk menyoroti perubahan besar yang dapat menyebabkan gangguan pada setiap targetSDKVersion, dan integrasikan alat <a href="https://developer.android.com/about/versions/14/reference/compat-framework-changes" target="_blank">framework kompatibilitas</a> ke dalam proses pengujian Anda untuk membantu menemukan potensi masalah aplikasi pada versi OS terbaru. </li></ul></ul><br><ul style="text-align: left;"><ul>
<li><b>Berkolaborasi dengan Google:</b> Berikan masukan berharga dan laporan bug Anda menggunakan <a href="https://issuetracker.google.com/" target="_blank">issue tracker Google</a> untuk berkontribusi secara langsung pada peningkatan ekosistem Android.</li>
</ul></ul>
<p>Kami mendorong Anda untuk memanfaatkan sepenuhnya program Beta & Pratinjau Developer Android, dimulai dengan <a href="https://android-developers.googleblog.com/2024/02/first-developer-preview-android15.html" target="_blank">Pratinjau Developer 1 Android 15</a> yang baru saja dirilis. </p>
<h3>Tim di balik kesuksesan</h3>
<p>Terima kasih banyak kepada seluruh tim Meta atas kolaborasinya di Android 14 dan penulisan blog ini! Secara khusus, kami ingin memberikan penghargaan kepada rekan-rekan di Meta atas kontribusinya yang luar biasa dalam membangun budaya adopsi awal:</p>
<ul><ul>
<li>Tushar Varshney - Partner Engineering, Partner Engineer</li>
<li>Allen Bae - Partner Engineering, EM</li>
<li>Abel Del Pino - Facebook, SWE</li>
<li>Matias Hanco - Facebook, SWE</li>
<li>Summer Kitahara - Instagram, SWE</li>
<li>Tom Rozanski - Messenger, SWE</li>
<li>Ashish Gupta - WhatsApp, SWE</li>
<li>Daniel Hill - Mobile Infra, SWE</li>
<li>Jason Tang - Facebook, SWE</li>
<li>Jane Li - Meta Quest, SWE</li>
</ul></ul>
</div>
<hr>
</div>
</div>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.com2tag:blogger.com,1999:blog-6158048950125693510.post-58204328209765548982024-02-29T18:26:00.014+07:002024-03-15T18:30:23.589+07:00Android Studio Iguana sudah stabil<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="http://android-developers.googleblog.com/2024/02/android-studio-iguana-is-stable.html"/>
<meta name="original_url" content="http://android-developers.googleblog.com/2024/02/android-studio-iguana-is-stable.html"/>
<style id="page-skin-1" type="text/css"><!--
body {
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
-webkit-font-smoothing: antialiased;
color: #202124
}
h1 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px
}
h2 {
font-size: 30px;
line-height: 40px
}
h2,
h3 {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500
}
h3 {
font-size: 24px;
line-height: 32px
}
h4 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 26px
}
h5 {
font-size: 16px;
line-height: 24px
}
h5,
h6 {
font-family: Roboto, sans-serif;
font-weight: 600
}
h6 {
font-size: 14px;
line-height: 22px
}
.display {
font-family: Roboto, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 67.2px
}
.hidden-text {
height: 1px;
overflow: hidden;
pointer-events: none;
position: absolute;
top: -10px;
width: 1px
}
img,
video {
border: 0;
height: auto;
max-width: 100%
}
body {
position: relative;
min-height: 100vh
}
body.no-scroll {
overflow: hidden
}
a {
color: #4184f3;
text-decoration: none
}
a:focus,
a:focus-visible {
outline-offset: -2px
}
.content-wrap {
padding-top: 200px;
max-width: 800px;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:915px) {
.content-wrap {
padding-top: 100px
}
}
.full-width {
width: 100%
}
.icon-link {
height: 42px;
width: 132px;
border-radius: 80px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: baseline;
-ms-flex-pack: center;
justify-content: baseline;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
background: transparent;
border: none;
color: black !important
}
.icon-link:hover {
background-color: hsla(213, 7%, 76%, .2)
}
.icon-link:focus {
background-color: hsla(213, 7%, 76%, .26)
}
.icon-link:active {
background-color: hsla(213, 7%, 76%, .32)
}
.adb-container {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto;
max-width: 1420px
}
@media only screen and (max-width:767px) {
.adb-container {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--large {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto
}
@media only screen and (max-width:767px) {
.adb-container--large {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--flex-horizontal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.section,
body {
margin: 0
}
.adb-card {
position: relative;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
margin: 40px 0;
padding: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: box-shadow .2s linear, opacity .2s linear;
transition: box-shadow .2s linear, opacity .2s linear, -webkit-box-shadow .2s linear
}
.divider {
border: none;
height: 1px;
color: #DADCE0;
background-color: #DADCE0;
margin: 0 20px;
}
.adb-card:first-child {
background-color: #d7effe;
border: none;
padding: 32px 24px 32px;
margin: 40px 20px 60px;
}
@media only screen and (max-width:850px) {
.adb-card {
max-height: unset;
padding: 0 20px
}
.adb-card:first-child {
margin-bottom: 40px;
}
}
@media only screen and (max-width:600px) {
.adb-card:first-child {
margin: 0 -20px 40px;
}
.adb-card {
border-radius: 0;
padding: 0;
}
.divider {
margin: 0;
}
.content-wrap {
padding-top: 54px;
}
}
.adb-card:focus-within,
.adb-card:hover {
-webkit-box-shadow: 0 0 36px rgba(0, 0, 0, .1);
box-shadow: 0 0 36px rgba(0, 0, 0, .1);
cursor: pointer
}
.adb-card__href {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.adb-card__image-wrapper {
overflow: hidden;
position: relative;
width: auto;
-webkit-flex-basis: 40%;
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.adb-card__content {
padding: 24px 0 0
}
.adb-card__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 600;
margin-bottom: 12px
}
.adb-card__info {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 24px
}
.adb-card__description {
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin-bottom: 48px
}
.adb-card:hover .adb-content__image-wrapper img,
.adb-card__href:focus~.adb-content__image-wrapper img {
-webkit-transform: scale(1.03);
transform: scale(1.03);
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease
}
.devsite-footer {
padding: 0 24px;
border-top: 1px solid #bdc1c6
}
.devsite-footer li {
display: block
}
.devsite-footer li a {
text-decoration: none;
font-size: 14px;
line-height: 16px;
color: #202124
}
.devsite-footer li a:focus,
.devsite-footer li a:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-linkboxes-list {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
padding: 24px 0;
border-bottom: 1px solid #bdc1c6
}
@media only screen and (max-width:767px) {
.devsite-footer-linkboxes-list {
grid-template-columns: 1fr;
padding-left: 0
}
}
.devsite-footer-linkbox {
display: block
}
.devsite-footer-linkbox-heading {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin: 0 0 4px
}
.devsite-footer-linkbox ul {
padding-left: 0
}
.devsite-footer-sites-list {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-utility nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 24px 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0
}
}
.devsite-footer-utility-button {
justify-self: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 20px;
margin-left: auto;
padding-left: 16px
}
.devsite-footer-utility-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 8px 0 0
}
.devsite-footer-utility-item:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.devsite-footer-utility-item:not(:first-child):before {
content: "|";
margin: 0 8px 0 0
}
}
.devsite-footer-sites {
border-bottom: 1px solid #bdc1c6;
padding: 24px 0 23px
}
.devsite-footer-sites-logo {
height: 32px;
margin-top: 5px;
width: 185px
}
.devsite-footer-sites-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0
}
.devsite-footer-sites-item {
margin: 0 0 0 40px
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-item {
margin: 0
}
}
.devsite-footer-sites-link {
display: block;
padding: 8px 0;
color: #202124
}
.devsite-footer-sites-link:focus,
.devsite-footer-sites-link:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-utility-link:focus {
text-decoration: underline
}
.devsite-footer-utility .devsite-footer-utility-button {
line-height: 20px;
font: 400 14px/16px Roboto, sans-serif
}
.devsite-footer-utility .devsite-footer-utility-button:before {
content: "";
margin: 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility .devsite-footer-utility-button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
margin: 18px 0 12px
}
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link {
border: 0;
background: #1a73e8;
color: #fff;
line-height: 36px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0 0 16px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px 0;
box-shadow: 0 1px 2px 0;
display: inline-block;
font: 500 14px/36px Roboto, sans-serif;
height: 36px;
letter-spacing: 0;
min-width: 36px;
padding: 0 24px;
text-align: center;
-webkit-transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s, -webkit-box-shadow .2s;
vertical-align: middle;
white-space: nowrap
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link:hover {
background: #1765cc
}
.adb-page__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px;
text-align: center;
color: #202124
}
.adb-detail hr {
border: 1px solid #dadce0;
margin: 40px 0
}
.adb-detail__title {
font-size: 40px;
font-weight: 600;
line-height: 48px
}
.adb-detail__info {
font-weight: 400;
font-size: 16px;
line-height: 24px
}
.adb-detail__content {
min-height: 200px
}
.icon-sidebar {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
top: 0;
left: -300px;
max-width: 220px;
gap: 8px
}
.icon-sidebar .share-text {
font-weight: 500;
margin-left: 4px
}
@media only screen and (max-width:1440px) {
.icon-sidebar {
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
left: 0;
margin-top: -20px;
margin-bottom: 40px;
}
.icon-sidebar .share-text {
display: none;
}
}
.copy-tooltip {
display: none;
position: fixed;
bottom: 16px;
left: 10px;
z-index: 100;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.copy-tooltip .copy-tooltiptext {
width: 200px;
background-color: #073042;
color: #fff;
text-align: center;
border-radius: 80px;
padding: 8px 16px;
}
.header__overlay {
height: 100vh;
left: 0;
position: fixed;
width: 100vw;
border: none;
background-color: rgba(0, 0, 0, .4);
-webkit-animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
opacity: 0;
top: 0;
z-index: -1;
display: none
}
.header__overlay.show {
display: block;
opacity: 1;
z-index: 800;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out
}
.social-icons__links {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
.social-icons__links path {
fill: #80868b
}
.social-icons__container-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin-right: 14px
}
@media only screen and (max-width:1000px) {
.social-icons__container-header {
display: none
}
}
.adb-blog-logo:focus,
.adb-blog-logo:hover {
opacity: .7;
text-decoration: none
}
.adb-blog-logo__image {
height: 32px;
margin-left: 0;
margin-top: 6px
}
@media only screen and (min-width:840px) {
.adb-blog-logo__image {
margin-left: 24px
}
}
.header {
position: fixed;
background: #fff;
z-index: 700;
top: 0;
width: 100%;
overflow: hidden;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
height: auto
}
.header .top-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 24px;
height: 50px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #e6e6e6
}
@media only screen and (max-width:839px) {
.header .top-row {
padding: 0 16px
}
}
.header .top-row__left,
.header .top-row__right {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 100%
}
.header .nav-row,
.header .top-row__left,
.header .top-row__right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.header .nav-row {
background: #fff;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.header .nav-items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 50px;
position: relative;
background-color: #fff
}
@media only screen and (max-width:839px) {
.header .nav-items {
display: none
}
}
.header .nav-items tab {
position: relative
}
.header .nav-items tab.active .header__nav-item:after,
.header .nav-items tab:hover .header__nav-item:after {
background: #1a73e8
}
.header .nav-items tab.active .header__nav-item,
.header .nav-items tab:focus-within a {
color: #202124
}
@media only screen and (max-width:839px) {
.header .header__cta,
.header .nav-items {
display: none
}
}
.header__search-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 6px 0 6px 24px;
overflow: hidden;
position: relative;
margin-right: 36px;
border-radius: 4px
}
@media only screen and (max-width:767px) {
.header__search-container:not(.mobile) {
display: none
}
}
.header__search-container.mobile {
margin: 0 0 20px
}
.header__search-container.mobile #searchform,
.header__search-container.mobile .searchbox {
width: 100%
}
.header__search-container .searchbox {
border-radius: 2px
}
.header__search-container .searchbox input {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
font-weight: 500;
color: #80868b;
border: 0;
margin: 0;
height: 20px;
outline: 0;
padding: 8px 8px 8px 40px;
width: 100%;
-webkit-transition: background .2s;
transition: background .2s
}
.header__search-container .searchbox input::-webkit-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input:-ms-input-placeholder,
.header__search-container .searchbox input::-ms-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input::placeholder {
color: #80868b
}
.header__search-container .searchbox input:hover {
background: #e8eaed
}
.header__search-container .material-icons {
color: #80868b;
left: 8px;
position: absolute;
top: 6px;
-webkit-transition: color .2s;
transition: color .2s
}
.header__cta {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #1a73e8 !important;
text-decoration: none
}
.header__cta.mobile {
padding: 18px 0
}
.header__cta:hover .cta-icon {
margin-left: 0;
margin-right: 12px
}
.header__cta .cta-icon {
-webkit-transition: margin-right .2s linear, margin-left .2s linear;
transition: margin-right .2s linear, margin-left .2s linear;
margin-left: 4px;
margin-right: 8px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.header__cta .cta-icon path {
fill: #1a73e8
}
.header__nav-item {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #80868b;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 18px;
height: 100%;
text-transform: none;
text-decoration: none
}
.header__nav-item:hover {
color: #202124
}
.header__nav-item.mobile {
font-weight: 500;
padding: 0
}
.header__nav-item:after {
bottom: 0;
border-radius: 3px 3px 0 0;
content: "";
display: block;
height: 3px;
left: 50%;
min-width: 20px;
position: absolute;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(100% - 24px)
}
.header__hamburger {
border: 0;
background: none;
outline: none;
padding: 0;
margin: 1px 8px 0 -4px;
padding: 8px;
color: rgba(0, 0, 0, .65);
cursor: pointer
}
@media only screen and (min-width:840px) {
.header__hamburger {
display: none
}
}
.header__side-menu {
background-color: #fff;
bottom: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
z-index: 900
}
.header__side-menu.is-open {
-webkit-transform: translateX(0);
transform: translateX(0);
width: 80%
}
.header__side-menu.is-open,
.header__side-menu__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%
}
.header__side-menu__content {
padding: 18px 16px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.header__side-menu__content .spacer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.header__side-menu__title {
font-family: Roboto, sans-serif;
font-size: 20px;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px
}
.header__side-menu__items {
list-style: none
}
.header__side-menu__items li {
padding: 12px 0
}
.header__side-menu__items tab {
position: relative
}
.header__side-menu__items tab.active .header__nav-item,
.header__side-menu__items tab:focus-within a {
color: #202124
}
.header__side-menu__bottom {
border-top: 1px solid #e6e6e6
}
.header__side-menu__logo-container {
background: #fff;
height: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 4px 16px;
border-bottom: 1px solid #e6e6e6
}
#nav .widget {
margin: 0
}
.featured__wrapper {
width: 100%;
border: 0;
background-color: #e8f0fe;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 80px 0
}
@media only screen and (max-width:767px) {
.featured__wrapper {
padding: 0
}
}
.featured__inner {
max-width: 1080px;
width: calc(100% - 24px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
padding: 48px
}
@media only screen and (min-width:768px) {
.featured__inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
padding: 12px 80px
}
}
.featured__href {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.featured__image {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
max-width: 100%;
}
.featured__content {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-top: 24px;
width: 100%
}
.featured__title {
font-size: 32px;
line-height: 44.8px;
font-weight: 500;
font-family: Android Euclid, Roboto, sans-serif;
margin-bottom: 15px
}
.featured__info {
font-family: Roboto Mono, monospace;
font-weight: 400;
font-size: 12px;
line-height: 160%;
margin-bottom: 24px
}
.featured__description {
margin-bottom: 48px
}
.preview.featured__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f1f3f4;
padding: 64px 0 120px
}
.preview.featured__wrapper h1 {
margin: 0 0 64px
}
.blog-label-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px
}
.blog-label-container .blog-label {
text-decoration: none;
z-index: 3
}
.blog-label-container .blog-label span {
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
background-color: #F1F3F4;
border-radius: 100px;
padding: 4px 16px;
color: #3c4043
}
.adb-card:first-child .blog-label span {
background-color: #fff;
}
.blog-label-container .blog-label span:focus,
.blog-label-container .blog-label span:hover {
background-color: #D7EFFE
}
.adb-card:first-child .blog-label span:focus,
.adb-card:first-child .blog-label span:hover {
background-color: #F1F3F4
}
.blog-label-container .blog-label span:focus-visible {
outline-offset: 0
}
#pagination-container {
display: none
}
.pagination {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.pagination .page-button {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: black;
background-color: #3DDC84;
padding: 16px 24px;
border-radius: 80px;
text-decoration: none
}
.pagination .page-button:focus,
.pagination .page-button:hover {
background-color: #3DDC8460;
}
.pagination .page-button.disabled {
color: #80868b;
background-color: #f1f3f4
}
--></style>
<style id="template-skin-1" type="text/css"><!--
--></style>
<style>
/** Blogger default styles **/
html, .Label h2, #sidebar .rss a, .BlogArchive h2, .FollowByEmail h2.title, .widget .post h2 {
font-family: Roboto, sans-serif;
}
.plusfollowers h2.title, .post h2.title, .widget h2.title {
font-family: Roboto, sans-serif;
}
pre, .post-content pre.prettyprint {
background-color: #f7f7f7;
border: 1px solid #ddd;
margin: 0 0 1em 0;
padding: 1em;
overflow: auto;
}
pre, code {
font-size: 9pt;
line-height: 125%;
font-family: monospace;
}
pre, code {
color: #060;
font: 13px/18px Consolas, 'Liberation Mono', Menlo, Monaco, Courier, monospace;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
/* Styles for https://github.com/google/code-prettify */
.com { color: #060; }
.kwd { color: #008; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.fb-custom img, .twitter-custom img, .gplus-share img, .email-custom img {
cursor: pointer;
opacity: 0.54;
}
.twitter-custom, .gplus-share, .fb-custom {
margin-right: 12px;
}
/** Blogger custom theme **/
.adb-header,
.searchBox input {
box-sizing: border-box;
}
.popout-nav {
background-color: white;
width: 280px;
height: 100%;
position: fixed;
z-index: 6;
left: -280px;
transition: left 0.2s;
}
.popout-search {
background-color: white;
width: 280px;
position: fixed;
z-index: 6;
right: -280px;
transition: right 0.2s;
top: 0;
}
.popout-search .widget {
margin: 0;
}
.popout-search #BlogSearch2_form .popout-options {
padding-right: 24px;
width: calc(100% - 48px);
}
.dropdown-nav {
display: none;
background-color: white;
width: 104px;
position: fixed;
padding: 4px 0px 3px 0px;
z-index: 4;
left: 352px;
top: 176px;
transition: top 0.2s;
box-shadow: 0 0px 2px 0 rgba(60,64,67,.3), 0 0px 6px 2px rgba(60,64,67,.15), inset 0 0px 6px -4px rgba(154,160,166,.5);
}
.dropdown-options {
align-items: center;
display: flex;
flex-wrap: wrap;
width: 94px;
height: 48px;
padding-left: 10px;
}
.dropdown-options:hover {
background-color: #f7f9fa;
}
.dropdown-options span {
color: #80868b;
}
.popout-options {
padding-right: 8px;
padding-left: 24px;
padding-top: 16px;
padding-bottom: 15px;
display: inline-block;
width: calc(100% - 32px);
border-top: 1px solid #ddd;
font-size: 13px;
font-weight: 700;
color: #80868b !important;
}
.popout-options:last-of-type {
border-bottom: 1px solid #ddd;
}
.popout-options:first-of-type {
border-top: 0;
}
#close-popout {
padding: 12px 12px 11px 20px;
}
#close-search-popout {
padding: 12px 20px 11px 12px;
text-align: right;
}
.popout-search-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
transition: opacity 0.2s;
}
.popout-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
z-index: 5;
transition: opacity 0.2s;
}
html {
background-color: #fff;
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
width: 100%;
position: absolute;
padding: 0;
/* This ensures that the scroll bar is always present, which is needed */
/* because render happens after page load; otherwise the header */
/* would 'bounce' in-between states. */
min-height: 150%;
}
h2 {
font-size: 130%;
}
h1, h2, h3, h4, h5 {
line-height: 1.5em;
margin-bottom: 1em;
}
html, h4, h5, h6 {
font-size: 14px;
}
a, a:visited {
color: #039be5;
text-decoration: none;
}
pre code {
display: block;
}
.cols-wrapper {
margin-top: 56px;
}
.header-outer, .cols-wrapper {
padding: 0 60px;
}
html, .header-inner a {
color: #212121;
color: rgba(0, 0, 0, .87);
}
/** Archive widget. **/
.BlogArchive {
font-size: 13px;
font-weight: normal;
}
.BlogArchive .widget- {
display: none;
}
.BlogArchive h2, .Label h2 {
color: #039be5;
text-decoration: none;
}
/* Specificity needed here to override widget CSS defaults. */
/* Months */
.Label {
font-size: 13px;
font-weight: normal;
}
.sidebar-icon {
display: inline-block;
width: auto;
vertical-align: middle;
height: 24px;
margin-right: 24px;
}
.sidebar-social-links {
align-items: center;
}
.sidebar-social-links .android-logo,
.android-logo {
height: 48px;
}
.sidebar-social-links a:last-child img {
margin-right: 0;
}
.Label .widget- {
display: none;
}
.searchBox input {
border: 1px solid #eee;
color: #212121;
color: rgba(0, 0, 0, .87);
font-size: 14px;
padding: 8px 8px 8px 40px;
width: 100%;
font-family: Android Euclid, Roboto, sans-serif;
background: url('https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png') 8px center no-repeat;
}
.searchBox ::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .54);
}
.section {
margin: 0;
padding: 0;
}
#sidebar-top {
border: 1px solid #eee;
}
#sidebar-top > div {
margin: 16px 0;
}
/*main post*/
.post {
margin-bottom: 30px;
}
#main .post .title {
margin: 0;
}
#main .post .title a {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: normal;
font-size: 24px;
}
.message, #main .post .post-header {
margin: 0;
padding: 0;
}
#main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption {
color: #444;
font-weight: 500;
}
#main .post .post-header .published {
font-size: 11px;
font-weight: bold;
}
.post-header .publishdate {
font-size: 16px;
font-weight: normal;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#main .post .post-footer {
font-size: 12px;
padding-bottom: 21px;
}
.label-footer {
margin-bottom: 12px;
margin-top: 12px;
}
#main .post .post-header .published {
margin-bottom: 16px;
}
.post .post- {
color: #545454;
color: rgba(0, 0, 0, .67);
font-size: 16px;
margin: 16px 0 36px 0;
line-height: 24px;
word-wrap: break-word;
}
.post-summary {
display: none;
}
/* Override all post images/videos to left align. */
@media (max-width: 712px) {
.post- img {
max-width: 100%;
height: auto;
width: auto;
}
}
.post- .tr-caption-container img {
margin-bottom: 12px;
}
.post- iframe, .post- embed {
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
}
.post- .carousel-container {
margin-bottom: 48px;
}
#main .post- b {
font-weight: 500;
}
/* These are the main paragraph spacing tweaks. */
#main .post- br {
: '';
display: block;
padding: 4px;
}
.post-content .space {
display: block;
height: 8px;
}
.post-content iframe+.space, .post-content iframe+br {
padding: 0 !important;
}
#main .post .jump-link {
margin-bottom: 10px;
}
.post-content img, .post-content iframe {
margin: 30px 0 20px 0;
}
.post-content > img:first-child, .post-content > iframe:first-child {
margin-top: 0;
}
.col-right .section {
padding: 0 16px;
}
#aside {
background: #fff;
border: 1px solid #eee;
border-top: 0;
z-index: 2;
}
#aside .widget {
margin: 0;
}
#aside .widget h2, #ArchiveList .toggle+a.post-count-link {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: 400 !important;
margin: 0;
}
#ArchiveList .toggle {
float: right;
}
#ArchiveList .toggle .material-icons {
padding-top: 4px;
}
#sidebar-top,
#sidebar {
background: #fff;
}
#sidebar .tab {
cursor: pointer;
}
#sidebar .tab .arrow {
display: inline-block;
float: right;
}
#sidebar .tab .icon {
display: inline-block;
vertical-align: top;
height: 24px;
width: 24px;
margin-right: 13px;
margin-left: -1px;
margin-top: 1px;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget-content > :first-child {
padding-top: 8px;
}
#sidebar .active .tab .arrow {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#sidebar .arrow {
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget h2 {
font-size: 14px;
line-height: 24px;
display: inline-block;
}
#sidebar .widget .BlogArchive {
padding-bottom: 8px;
}
#sidebar .widget {
border-bottom: 1px solid #eee;
box-shadow: 0px 1px 0 white;
margin-bottom: 0;
padding: 14px 0;
min-height: 20px;
}
#sidebar .widget:last-child {
border-bottom: none;
box-shadow: none;
margin-bottom: 0;
}
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style: none;
padding: 0;
}
#sidebar ul li a {
line-height: 32px;
}
#sidebar ul ul ul li a {
line-height: 24px;
}
#sidebar .archive {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC');
height: 24px;
line-height: 24px;
padding-left: 30px;
}
#sidebar .labels {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC');
height: 20px;
line-height: 20px;
padding-left: 30px;
}
#sidebar .rss a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII=');
}
#sidebar .subscription a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC');
}
#sidebar-bottom {
background: #f5f5f5;
border-top: 1px solid #eee;
}
#sidebar-bottom .widget {
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
text-align: center;
}
#sidebar-bottom > div:last-child {
border-bottom: 0;
}
#sidebar-bottom .text {
line-height: 20px;
}
/* Home, forward, and backward pagination. */
.blog-pager {
padding-top: 10px;
margin-top: 15px;
text-align: right !important;
}
#blog-pager {
padding: 40px 0 0;
}
#blog-pager a {
display: inline-block;
}
.blog-pager i.disabled {
opacity: 0.2 !important;
}
.blog-pager i {
color: black;
margin-left: 16px;
opacity: 0.54;
}
.blog-pager i:hover, .blog-pager i:active {
opacity: 0.87;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
.gplus-profile {
background-color: #fafafa;
border: 1px solid #eee;
overflow: hidden;
width: 212px;
}
.gplus-profile-inner {
margin-left: -1px;
margin-top: -1px;
}
/* Sidebar follow buttons. */
.followgooglewrapper {
padding: 12px 0 0 0;
}
.loading {
visibility: hidden;
}
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 40px !important;
}
/* ADB */
.adb-hero-area {
min-height: 104px;
background-color: #073042;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
z-index: 5;
position: fixed;
width: 100%;
}
.adb-hero-logo {
height: 80px;
position: absolute;
top: 12px;
left: 16px;
}
.adb-footer-btm {
display: flex;
margin: 0 24px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 40px;
}
.subscribe-btn {
color: black;
background-color: #3DDC84;
border-radius: 100px;
font: 500 16px/24px Android Euclid,Roboto,sans-serif;
padding: 12px 24px;
border: 0;
}
.adb-footer-info {
align-items: center;
display: flex;
padding: 0;
margin: 9px 0 0 -8px;
font-size: 13px;
}
.footer-list {
list-style: none;
padding: 0 8px;
}
.subscribe-info {
list-style: none;
padding: 0 8px 0 0;
font-size: 13px;
color: black;
}
.footer-newsletter {
display: flex;
align-items: center;
}
.adb-header-inner {
display: flex;
align-items: center;
}
.adb-header {
background-color: white;
color: #fff;
height: 48px;
left: 0;
overflow: hidden;
padding: 36px 24px;
right: 0;
top: 104px;
z-index: 4;
display: flex;
align-items: center;
position: fixed;
border-bottom: solid 1px #DADCE0;
}
.adb-shadow {
margin-top: 48px;
height: 1px;
width: 100%;
position: fixed;
background: white;
z-index: 2;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
}
.adb-logo-box {
display:inline;
}
.adb-burger-box {
display: none;
margin: 0 16px 0 0;
}
.adb-search-box {
display: none;
margin: 0 0 0 16px;
}
.adb-htag-box {
display: flex;
align-items: center;
}
.adb-header-tags {
padding: 0 24px 0 0;
}
.adb-header-tags ~ .atb-header-tags {
padding: 0 24px;
}
.adb-header-tags a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #5F6368;
}
.adb-header-tags a:hover {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #073042;
}
.more-dropdown {
display: none;
}
.dropdown-icon {
transition: all 0.3s;
}
.adb-header-logo {
display: inline-block;
vertical-align: -11px;
width: 134px;
height: 32px;
}
.adb-header-title {
color: #fff;
display: inline-block;
font-size: 20px;
font-weight: normal;
}
.adb-header-links {
border-left: 1px solid rgba(0, 0, 0, .1);
display: block;
left: 250px;
list-style: none;
margin: 0;
padding: 12px 0 12px 18px;
position: absolute;
top: 0;
}
.adb-header-link-item {
display: inline-block;
}
.adb-header-link, .adb-header-link:visited {
color: #fff;
display: inline-block;
font-weight: 500;
opacity: .7;
padding: 12px 9px;
text-transform: uppercase;
vertical-align: 2px;
}
.adb-header-link:hover, .adb-header-link:focus {
color: #fff;
opacity: 1;
}
.adb-header-console, .adb-header-console:visited {
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
color: #fff;
float: right;
font-size: 14px;
font-weight: 500;
line-height: 28px;
padding: 4px 10px;
position: relative;
text-transform: uppercase;
transition: box-shadow .2s;
z-index: 60;
}
.adb-header-console:hover {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
color: #fff;
}
.adb-header-console:focus {
background-color: rgba(63, 81, 181, .1);
color: #fff;
}
.adb-header-console-image {
vertical-align: -5px;
}
.adb-hero {
background-color: #dcedc8;
margin-top: 64px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
color: #414141;
display: inline-block;
font-weight: 500;
margin: 25px 25px 0;
}
.adb-hero-inner {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAc4AAADZCAMAAACenCAVAAAAvVBMVEXc7cjY68PT6bvR57fQ57bY6sPZ68TU6bvR6LfP5rTQ57XR57jW6r7b7cfa7MbS6LnS6Lrb7cbQ6Lfb7MbX6r/Z68PY6sLV6b7U6b3U6r3T6LnX68Da7MXP57Tb7Mfc7cfW6b/P57XS57nY68LY68HU6L3W6r/W6b7T6brX6sDV6rzQ57fa7MTV6b3T6Lra68TR57bX68HW6sDS57jU6bzO5rTP5rXZ7MXR6LbZ68XX6sHT6LvV6bzS6LjZ7MILrTuqAAAIyklEQVR4AezXhXEkUQwE0B6+Xhg8MzND/smZ4UsLBSb9Kr0UhI1vl6RZnqUFlnBl9Y+j8WQK4+qGr9oOi7iKr0YFTOt6vhsPmM81/FDAspafUszl/vNTXsOuFYZWMYfrRgyswa51hjLM4TYYGsOuTQpbgNO2dyjAroxCvgunpZT2YFZDaQKnlFRg1z6lgxpOOqS0CbtqKutwwhGVYxh2QqWGC/WUMlhWH1BK4QKnVFZh2hmVEh/cXk7pHLbt5pQafHCT6Jr9gsoR3riayiXMyyhd4Y27jDDHJVQu8MJdU7lBBBpKoz08c7eU8gERuKNyhiduhcopolBRqeGAMaV7xKE7eGzvThQTVZooAJdC1AM2qGg0BhdCrpnciVE0i9dZ3v+t/n2ZMBtJGpsu6nuCrNJddar4/gAnMmuP/GPk3JFwrL2QKw3FD26GyGmQNXbIGVHNKdfmYraDl/ZUcxO8NNtIW888bafDC7tP5R2qtQfL724N5AypxjbIGdseWHMV1VfP+rrnZvbTerMEhHb2Py4eA7KX9AwD5LSppi5ZdPTHEhv6cd5mSjZaeMW/Dc66TEpkO+Q0qIbUE5es6ke85FMN/YGXZs9yQLdXYGVASGJDBaMZXsQouzau/fzfitNsKvpUL1O8dFBksb+Q80C1coaco7RtLeYzO9tHCV7qUY0ckXPGribSoNpQB3Z1MbWtby1hiZwWw35CRjUReRx7Sg5ecqgmJiyHOxrIWVEtPDPNY/TMx4bmczq5T3jpSRELm1NWodVmlGY364tP4ZXvdw5u8jjDf8yQJJ7j+2HYfBh3d+l5HFB5RmyzjM3yh8iDUbb6M9y7j3idgxM+3BzTuPzyXmdOTARJaUc8tUmX7ekB7+aF7dV1a0G6pIx3CkxKmBBUreMfvS0086aTnZZf6kfG53mlN/0UnS2bW5Socz9OA737eM6JkZWu4uUiXfVcnIT34eZM6Yq9hcRKR0OpL7i9cHBi/udjrCOUuiFWsnc2/oKsfYAhXvM2lsj4S/7b2/L9y4cODDu0j8HbBzqSPvutOksqpDH+gorw1+dvHLcaEzv3r4+0BdmnBJXi9bL+G6qaEbFz98rF4sEwnKGKrrrxK3sOuzoMlM9i+ql47KPC/HX8inTxljgKUHBYI1g6qDx/HBct76XETfHF4v3hHpZwVgH9APc0TfFSyTwLZ7DJ9FYxmZvTv1h89DmBdbyHEX0rcuuTRB38fNuQ2vmw1GAYMSjv6ZwQbD0ksFlz9LPW7gMxNv3RBVtlDqz3cbWo32rmEXLGFExcsJBMnilGzk29pleT5gx8fLiq2XzyM2rllpiboEYGxF2UoD6+EntL1Ma+TkOP/LVqNJLM3yeqgayDmnjqKmIu3aNGDhlx1pqiZvyUuAqaqKGwRRwt1gnqqR0QO5ce6ms5J1ZGIWqtkxIf0QNqb7ohJjIXgFjPiYF4j38R2wbZTk1m+C/xqU9WSzv4hkgyVkcg0QvIUg0XEHleRjaK/gQb8g/a2EL8hHcky6zxC+JTQBa5c/BL4nBO1lgl+B2xJjv0QxQgnA1ZoOGhGHFNldedoShxMadKU/d4BeEEVGF3Ll5FJF+psm7Bh5xwHyDeoKeogvp7iDfpbKhyWgeIN/JSqpjbBOLtlqwq7qJNFdKGeKdQUUUEIcS7Df6iSngeQAPhtqgCWi60EElKxjUSsCFriK5nYEMuLDtoJSZk0BiaiaYsZGPlXnEqHoipIhOaKIW4WnD63xThgtP/pthHdFqfUCIRRvK/KZ+3VX1uiulc7puc3EstSOpD9d7+LYGTFfiQenyKkxE3VLLGI9iQkcH4CackzqlEwRYnJbwNlUb5ODHhBVSWHk5O+JFMLkh5qFYxLxnoPZ9BmJGRdrELNuTddNEAwhg34NSvFnvSqgth1ANpNEIZkhkYSg4dt9rHocCFXvvxWUD/ELR2TQ98hMOWon+Ks7YLrZI70iWETu6yT99Qt3uw4A4j+lY6hU4dVcloUFdR3tkA1kt29J1zHxr1SIsGNAoDnvGjMCj/CLmr3INzQj9x5sFm41Ns933c0PtNoc+O0bJNA9+Xryp14+zSL9x5PH6beS2vQrfP0exkQcMG08BdCn1SepeFc8KPijWs5MxPdzN4CipzR2nQb8wdnu0O5UKbkN7h/LQZ/a9Ms+pZNYp9kQt9Yvo9H3Yx8H15QSXm/qZUQMY0ybOCPtNKlIMuqYAogW1SKkBBoxW9SXSARoqKCGGbBRVxBY0C85V3h2mb/MrASGxIb3BnYlaxwXRmLwUMFxMc6NSlQvpM6nt5MXTylOl00JGKYTqxp6DVBb1SkECrlOmvs0HFGA7efjA0dwrLfKVC5tDLp1dpGHrGKFjm0tCZYEWvMTA0NrOBZVZUSMtoLn4I3T5RISnTZTGXJrea9BPotmU6QrqlQi6gXWx05V5MRTiwTaD/4aW5FN8y9pCJYZ2usSPBNRUzNfapNIZ1fGM7KQdUSMNYJyl6Ajh2yAKTBUYHpfCZruJ0jB3wCpVur1GSIf3G8yOPlG1ePDN46d2iJEmLR+86L4lNBRQTZXK/6UAxunMWDxC3Da6omXsoz5XiOa8/NfV9JYHRXVBXiudG8r0y9Jmzpl87oFSDFv3Qog2rDTb0Q6qJckX0K7coWTKkHxh1YLmkSz/Q6JjNKnVQOj+lnM0nMPDxmnLuPhjej5rhFLbjmP4nOF6BCXfdov8JLkPj+xcdnMjh03p3nWXLBwesuB/+GGbHXbc5wIkkSt7CwEmXU1lGbPX3OYVBt5y2Yoov9EN/QVhpJK9xZL/7P4Kw1LO8iIH7qxx8CEu5zG8pcldpQ1hrSjnBI4S9YnrpBsJiEzkIcfIkByFWUqkIcdKjb7kQdos49a3Fjv7vE4TlfPoflYAPuXoeIaw3pv+6h7CeQ/8RPYIP6XpegwGxknMtwxcqK7AgAqkhcDKkf3oAI9LE9sCDWGhf4S8M70peggnxQERTMCFcIjUDF+KOUrAhhvQANkT4dwEsPvJYWz4QAAAAAElFTkSuQmCC');
background-position: bottom right 70px;
background-repeat: no-repeat;
background-size: auto 100%;
margin: 0 auto;
max-width: 980px;
padding: 0 60px;
position: relative;
}
.adb-hero-back-icon {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.adb-hero-title {
font-size: 22px;
line-height: 28px;
padding: 24px 24px 0px 112px;
}
.adb-hero-title a {
color: #FFFFFF;
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500;
}
.adb-hero-summary {
font-size: 16px;
line-height: 24px;
padding: 8px 24px 8px 112px;
}
.adb-hero-summary a {
color: rgba(255, 255, 255, 0.9);
}
.adb-hero-description {
color: #6f7172;
font-size: 16px;
margin: 0;
max-width: 440px;
padding-bottom: 32px;
}
.adb-hero-search {
position: absolute;
top: 19.35%;
right: 1.94%;
}
.adb-hero-search .searchBox input {
border: 1px solid #80868B;
border-radius: 4px;
color: white;
}
.adb-hero-search .searchBox input::placeholder {
color: #F1F3F4;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
padding-left: 12px;
}
.adb-hero-link {
position: absolute;
right: 1.67%;
top: 64.52%;
}
.adb-hero-link a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #3DDC84;
letter-spacing: 1.4px;
}
.adb-hero-arrow {
display: inline-flex;
font-size: 24px;
vertical-align: middle;
}
.adb-socials-box {
display: flex;
position: absolute;
right: 1.67%;
}
.adb-socials-category,
.adb-socials-divider {
display: flex;
align-items: center;
}
.adb-socials-divider {
color: #DADCE0;
font-size: 40px;
font-weight: 100;
margin: 0 20px;
}
.adb-socials-category img,
.adb-footer-social-links img {
height: 24px;
}
.adb-footer-social-links-img {
margin-right: 20px;
}
.adb-hero-subscribe, .adb-hero-subscribe:visited {
background-color: #90c653;
color: #fff;
display: inline-block;
border-radius: 3px;
margin: 25px 0 60px;
padding: 13px 32px;
text-transform: uppercase;
}
.adb-hero-subscribe:hover, .adb-hero-subscribe:focus {
background-color: #333;
}
.adb-footer {
margin: 32px auto 64px;
}
.adb-footer-more {
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #f0f0f0;
padding: 30px 0;
}
.adb-footer-more a {
color: #000;
display: inline-block;
font-size: 20px;
font-weight: 300;
margin-right: 16px;
}
.adb-footer-social {
float: right;
margin-top: -62px;
}
.adb-footer-social a {
background-color: #ccc;
background-position: center;
background-repeat: no-repeat;
background-size: auto 16px;
border-radius: 50%;
display: inline-block;
height: 36px;
margin-left: 16px;
transition: background-color .1s;
width: 36px;
}
.adb-footer-social-youtube {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAQAAAAxWje/AAABLUlEQVQ4y6WUvUoDYRBFr42gCdhK8AV8BwsVC0FQfIQUgr5DIKJoGy1CfAaDq1hIGn8K2xDSaBc1wUJJEYmbkDXssdi1Mrvfst9tZ+bAzNwZSZLEAmvsUKTCBQ80eaWLyxiAMS5dXmhyT5UyBfIsM68/McM1aXRDJgCUSKsTSWQZpAa4ZMUmNtoSRxGhbd4TAI7F1eSIxBwVfAPgUtSjAJLEEk+xgLroxAEkpikyigS0RS8eIEks8hgB6ImhGSAxxS5fE9JGwksCkCRyOP/SfPFjC0jawl5UC9ZDbBvXuB+zxjezkZ5NRnJirHxmtLIjDq2O6UBsWJ3zut1D+WZWEqepAaVg0hlqqcpr4VMNbbpKngJlqtzRoMUnfTx8fDz6fNCiwS3n4VtfIRdU/gLTrSb7DGWLcQAAAABJRU5ErkJggg');
}
.adb-footer-social-youtube:hover {
background-color: #f44336;
}
.adb-footer-social-gplus {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAUCAQAAACpWpz6AAABJUlEQVQ4EZXBTUoCYQDH4X9hTS3Cja0Kyb2X6BCJoLlr1aKwK1QHCMMzWLiqTcuWXaAWQWIlU1DQh4QJ+Wt4X95x0hGn55FCeGzSpMUXXW45ocSC/oMiHUZ1KCgZZqkzyZaSoM7QgCd8BlgXLGo6ijgv7JJRgAxV3jjDUwwMOXh0sK5ZUQRZ5hQLQw4VrA/WlBCGHJpY+0oMQw5trLxCjNtTgFiij5VSiHFHChBL9LFSCjGurgCxRBsrrxA+Pj4+Pl2sQ0VgyKGJdaAYNLAqisCQQxnrk5xGkKOHlVUEhhw8HrFuWFUEaa6wLvUHhoYo4LxSZVkBlihzh7OuaagR9YzPD0PHmo5ZakzSIKVk2OCBUe/sMKPkmKfEKS16fHPPOduklcAvR50zMVwhTI4AAAAASUVORK5CYII=');
}
.adb-footer-social-gplus:hover {
background-color: #f44336;
}
.adb-footer-social-twitter {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAQAAAB0gUQ+AAABI0lEQVQ4EY3BQShDAQDH4f+zTSyJuLgoLlwclYOTHCwHu9ouiLRScpUmNwduDkpCSTs4LAeJhINoOTo4ctHkskyJtf20vWbe3tvb+z7JFUGibLHPMj0qoYEWSYzRKkdMkKbsm3m6WSRFuyQeuKNNNoTJU61ABL8kssAjvbKgiTR2V+ywJol3ijJMY+gP4zhLEpDEGWUpwvhUQgwnh/hURIT/3thjjmGWcBKViSCXeBWSiWdO+MGbPpm4watPfDIRxasLVXCANwuqwCDGK/V80akKGjnmmgLutmXFOvV80CUrAiRxNys7DCY5J4OzXdVCP7c4OcIvO5oJkSCHXZ5VDFkxwilP5HB2z6Cc0EGcF6plSTAqNxgMMEWcTTZYYYYhAqrpF0uh1zgYi1hVAAAAAElFTkSuQmCC');
}
.adb-footer-social-twitter:hover {
background-color: #55acee;
}
.adb-footer-social span {
display: none;
}
.adb-footer-related {
padding-top: 8px;
}
.adb-footer-related a {
color: #999;
font-size: 12px;
white-space: nowrap;
}
.adb-footer-related a:not(:last-child)::after {
content: '|';
cursor: default;
margin: 0 7px 0 10px;
}
.adb-footer-section {
margin: 48px auto;
max-width: 700px;
}
.adb-footer-title {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #3C4043;
margin-bottom: 24px;
}
.adb-footer-columns {
display: flex;
justify-content: space-between;
}
.adb-other-blogs-title img {
margin-right: 8px;
vertical-align: -12px;
}
.adb-footer-social-label {
display: flex !important;
align-items: center;
}
.adb-footer-column a,
.adb-footer-social-label,
#footer-subscribe .tab h2 {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
padding: .85em 0;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-btm a {
color: #000;
font-family: Android Euclid, Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.25px;
opacity: .7;
transition: opacity .1s;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-column a {
opacity: .7;
transition: opacity .1s;
}
.adb-footer-column a:hover {
opacity: 1;
}
.adb-footer-social-links {
margin: 0 0 20px;
}
#footer-subscribe .widget {
margin: 0;
}
#footer-subscribe .tab {
display: flex;
align-items: center;
}
#footer-subscribe .tab img {
height: 16px;
}
.adb-label-view-more-toggle {
cursor: pointer;
}
.adb-label-view-more-toggle::after {
content: '\00e5c5';
float: right;
font: 2em / .7 Material Icons;
opacity: .6;
}
.adb-label-view-more-toggle.active::after {
transform: rotate(180deg);
}
/** Desktop **/
@media (max-width: 900px) {
.col-right {
display: none;
}
.col-main {
margin-right: 0;
min-width: initial;
}
.cols-wrapper {
min-width: initial;
}
.adb-hero-inner {
background-image: none;
}
}
/** ADB header breakpoint **/
@media (max-width: 768px) {
.adb-header-links {
display: none;
}
.dropdown-nav {
display: none;
}
.adb-header {
padding: 12px;
text-align: center;
}
}
@media (max-width: 1196px) {
.breakpoint-hide {
display:none;
}
.more-dropdown {
height: 50px;
display: flex;
align-items: center;
}
}
@media (max-width: 915px) {
.adb-header {
height: 0;
margin: 0;
padding: 0;
display: none;
}
.adb-header-tags {
display:none;
}
.more-dropdown {
display:none;
}
.dropdown-nav {
display: none;
}
.adb-hero-summary,
.adb-hero-link,
.adb-socials-category {
display: none;
}
.adb-hero-title {
padding-left: 152px;
}
.adb-hero-logo {
height: 52px;
top: 12px;
left: 120px;
}
.adb-footer-section {
margin: 0 auto;
}
.adb-footer-btm {
margin: 0 24px 40px;
}
.adb-hero-area {
min-height: 76px;
}
.adb-burger-box {
display:inline;
position: absolute;
top: 17px;
margin-left: 24px;
font-size: 32px;
color: white;
}
.adb-hero-title a{
margin-left: 40px;
}
}
/** Tablet **/
@media (max-width: 712px) {
.header-outer, .cols-wrapper {
padding: 0 40px;
}
/* ADB */
.adb-hero-inner {
padding: 0 40px;
}
.adb-hero-title {
font-size: 16px;
padding-left: 132px;
}
.adb-hero-logo {
left: 100px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 36px;
}
.adb-other-blogs-list {
columns: auto;
}
.adb-other-blogs-title {
font-size: 20px;
}
.adb-other-blogs-title img {
height: auto;
vertical-align: -6px;
width: 32px;
}
.adb-footer-section {
margin: 0 24px;
}
.adb-footer-more {
padding-bottom: 75px;
}
.adb-footer-social {
float: none;
margin-bottom: 35px
}
.adb-footer-social .adb-footer-social-youtube {
margin-left: 0;
}
}
/** Small tablet **/
@media (max-width: 600px) {
.header-inner .google-logo {
top: 32px;
margin-top: 0;
}
.header-inner .google-logo img {
height: 56px;
width: auto;
/*
height: auto;
width: 188px;
*/
/* Override any optical adjustments at desktop size. */
top: 0 !important;
}
.header-left {
left: 0;
top: inherit;
bottom: 24px;
}
.adb-footer-columns {
display: block;
}
.adb-footer-column {
margin-bottom: 48px;
}
.adb-footer-column a {
opacity: 1;
}
.adb-footer-social-label {
padding: 0;
}
.adb-footer-column .widget a {
padding: 0;
}
.footer-newsletter {
margin-top: 16px;
}
.subscribe-btn {
width: 100%;
}
.adb-hero-search {
display: none;
}
.adb-search-box {
display:inline;
position: absolute;
top: 24px;
right: 24px;
font-size: 24px;
color: white;
}
}
/** Mobile **/
@media (max-width: 480px) {
.header-outer, .cols-wrapper {
padding: 0 16px;
}
.adb-hero-logo {
height: 28px;
top: 24px;
left: 76px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 16px;
}
.cols-wrapper {
margin-top: 0;
overflow-x: auto;
}
.post-header .publishdate, .post .post-content {
font-size: 16px;
}
.post .post-content {
line-height: 28px;
margin-bottom: 30px;
}
.post {
margin-top: 30px;
}
.byline-author {
display: block;
font-size: 12px;
line-height: 24px;
margin-top: 6px;
}
#main .post .title a {
font-weight: 500;
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
}
#main .post .post-header {
padding-bottom: 12px;
}
#main .post .post-header .published {
margin-bottom: -8px;
margin-top: 3px;
}
.post .read-more {
display: block;
margin-top: 14px;
}
.post .tr-caption {
font-size: 12px;
}
#main .post .title a {
font-size: 20px;
line-height: 30px;
}
.post-content iframe {
/* iframe won't keep aspect ratio when scaled down. */
max-height: 240px;
}
.post-content .separator img, .post-content .tr-caption-container img {
margin-left: -16px;
max-width: 100%;
}
.post-content table {
table-layout: fixed;
width: 100%;
}
/** List page tweaks. **/
.list-page .post-original {
display: none;
}
.list-page .post-summary {
display: block;
}
.list-page .comment-container {
display: none;
}
.list-page .label-footer {
display: none;
}
.list-page #main .post .post-footer {
border-bottom: 1px solid #eee;
margin: -16px 0 0 0;
padding: 0 0 20px 0;
}
.list-page .post .share {
display: none;
}
/** Detail page tweaks. **/
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 32px !important;
}
.detail-page .label-footer {
margin-bottom: 0;
}
.detail-page #main .post .post-footer {
padding-bottom: 0;
}
.detail-page #comments {
display: none;
}
/* ADB */
.adb-header-console {
display: none;
}
.adb-hero-inner {
padding: 0 16px;
}
.adb-hero-title {
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
font-weight: 500;
line-height: 30px;
padding-left: 80px;
}
}
/* Fixed-position sidebar for larger screens */
@media screen and (min-height: 700px) and (min-width: 1100px) {
.col-right .section {
max-height: calc(100vh - 197px);
overflow: auto;
}
.col-right.scroll-start {
left: 50%;
margin-left: 241px;
position: fixed;
top: 96px;
}
.col-right.scroll-end {
bottom: 485px;
position: absolute;
top: auto;
}
}
[data-about-pullquote], [data-is-preview], [data-about-syndication] {
display: none;
}
#imgFull {
display: block;
margin: 10px auto;
width: 90%;
border: 0;
padding: 0;
}
#imgHalf {
display: block;
margin: 10px auto;
width: 50%;
border: 0;
padding: 0;
}
#flexParent {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
#flexImg {
width: 90%;
margin: 0;
padding: 0;
border: 0;
}
#imgCaption {
text-align: center;
font-style: italic;
font-size: 85%;
margin: -5px 0 10px 0;
padding: 0;
border: 0;
}
#floatRight {
float: right;
width: 45%;
margin: 5px 0 5px 5px;
padding: 0;
border: 0;
}
#floatLeft {
float: left;
width: 45%;
margin: 5px 5px 5px 0;
padding: 0;
border: 0;
}
</style>
<style>
.loading {
visibility: visible;
}
</style>
</head><body>
<div class="adb-detail">
<div class="adb-detail__info">
</div>
<div class="adb-detail__title">
</div>
<hr>
<div class="adb-detail__content">
<div>
<meta content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMLW97x07fxQ0CLacNwpF1EkzVmEqrWeOIGWk1c8lkQ19okJMVRcjLDCOzacz4wkJG3gMS4Ot-m1qoDIzfQbhTH-dGtq5jkkv8QGLUc2uvAvfCSSaJWxg7zLrRL5NndmJ6-g1hwiH4PcFJPZqMnID3atks9uKYBzVq7GkQODb8co9XZIEQf06xApzqYX4/s1600/Android-Studio-Iguana-SOCIAL.png" name="twitter:image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMLW97x07fxQ0CLacNwpF1EkzVmEqrWeOIGWk1c8lkQ19okJMVRcjLDCOzacz4wkJG3gMS4Ot-m1qoDIzfQbhTH-dGtq5jkkv8QGLUc2uvAvfCSSaJWxg7zLrRL5NndmJ6-g1hwiH4PcFJPZqMnID3atks9uKYBzVq7GkQODb8co9XZIEQf06xApzqYX4/s1600/Android-Studio-Iguana-SOCIAL.png" style="display: none;">
<em>Diposting oleh Neville Sicard-Gregory – Senior Product Manager, Android Studio</em>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMLW97x07fxQ0CLacNwpF1EkzVmEqrWeOIGWk1c8lkQ19okJMVRcjLDCOzacz4wkJG3gMS4Ot-m1qoDIzfQbhTH-dGtq5jkkv8QGLUc2uvAvfCSSaJWxg7zLrRL5NndmJ6-g1hwiH4PcFJPZqMnID3atks9uKYBzVq7GkQODb8co9XZIEQf06xApzqYX4/s1600/Android-Studio-Iguana-SOCIAL.png"><img border="0" data-original-height="800" data-original-width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMLW97x07fxQ0CLacNwpF1EkzVmEqrWeOIGWk1c8lkQ19okJMVRcjLDCOzacz4wkJG3gMS4Ot-m1qoDIzfQbhTH-dGtq5jkkv8QGLUc2uvAvfCSSaJWxg7zLrRL5NndmJ6-g1hwiH4PcFJPZqMnID3atks9uKYBzVq7GkQODb8co9XZIEQf06xApzqYX4/s1600/Android-Studio-Iguana-SOCIAL.png"></a>
<p>Hari ini kami meluncurkan <a href="https://developer.android.com/studio" target="_blank">Android Studio Iguana</a> 🦎 di saluran rilis stabil untuk mempermudah Anda membuat aplikasi berkualitas tinggi. Dengan fitur-fitur seperti dukungan Sistem Kontrol Versi di App Quality Insights, hingga dukungan bawaan baru untuk membuat Profil Dasar bagi aplikasi Jetpack Compose, versi ini akan meningkatkan alur kerja pengembangan Anda saat mengoptimalkan aplikasi. Download versi terbaru sekarang!</p>
<p>Lihat daftar fitur baru pada Android Studio Iguana di bawah ini, yang disusun menurut alur developer utama.</p>
<h3>Debugging</h3>
<h4 id="Version-control-system-integration-App-Quality-Insights"><span style="font-size: large">Integrasi sistem kontrol versi dalam App Quality Insights</span></h4>
<p>Ketika build rilis beberapa commit di belakang kode sumber lokal Anda, nomor baris dalam laporan kerusakan <a href="https://firebase.google.com/docs/crashlytics/get-started?platform=android" target="_blank">Firebase Crashlytics</a> dapat dengan mudah menjadi tidak valid, sehingga lebih sulit menavigasi secara akurat dari error ke kode saat menggunakan <a href="https://developer.android.com/studio/debug/app-quality-insights" target="_blank">App Quality Insights</a>. Jika Anda menggunakan git untuk kontrol versi, sekarang ada solusi untuk masalah ini.</p>
<p>Ketika Anda membangun aplikasi menggunakan Plugin Android Gradle 8.3 atau yang lebih baru dan Crashlytics SDK versi terbaru, AGP menyertakan informasi commit git sebagai bagian dari artefak build yang dipublikasikan ke Play Store. Ketika terjadi error, Crashlytics akan melampirkan informasi git ke laporan, dan Android Studio Iguana menggunakan informasi ini untuk membandingkan checkout lokal Anda dengan kode eksak yang menyebabkan error dari histori git Anda.</p>
<p>Setelah Anda membangun aplikasi menggunakan Plugin Android Gradle 8.3 atau yang lebih tinggi dengan Crashlytics SDK terbaru, dan memublikasikannya, laporan kerusakan baru di jendela App Quality Insights memungkinkan Anda membuka baris kode dalam checkout git saat ini atau melihat laporan perbedaan antara checkout saat ini dengan versi codebase aplikasi yang menyebabkan laporan kerusakan. <a href="https://developer.android.com/studio/releases#aqi-vcs" target="_blank">Pelajari lebih lanjut</a>.</p>
<img><div style="text-align: center;"><img alt="app quality insights dengan integrasi sistem kontrol versi di Android Studio" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT1p7b4amrON_4eHtUegzZFUToeflQ6pDVsjzU5qrhsUXmyKY6cFAoZ1v3fJh1VtFmkyycF-XQOuB8RHsWZ8XXdGum-RfBTPmb_V97eXq9g2Y0m4p-fRrzpAXhZkkyLMi7d22wMK1-jkx98HN33w67rOpS-3eLFMAp3y6CYUXkny-9ONJP258OVGs0ySc/s1600/image6.png" width="100%"></div><imgcaption><center><em>App Quality Insights dengan Integrasi Sistem Kontrol Versi</em></center></imgcaption><br>
<h4 id="View-Crashlytics-crash-variants-App-Quality-Insights"><span style="font-size: large">Menampilkan varian error Crashlytics di App Quality Insights</span></h4>
<img><div style="text-align: center;"><img alt="app quality insights di Android Studio" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjopsyasNaKzqq9VwK_tGzpfW2Zj-UTpXEysJl3VIhKUBoaNPBwQfpQEWDwF02lhN3A-njmKWHiM9KHtHxr-ngv7WTFnhYkGEX0oCTZj1_PYQzr5bN1Dkn7VQAXWveDOZ0LorwSE79wuzHlY91o_q3lDO3OBEExHvZO1Jpbusqk3ChcCfSEC5-jp9VVXk0/s1600/image11.png" width="100%"></div><imgcaption><center><em>Varian error di App Quality Insights</em></center></imgcaption><br>
<p>Sekarang, saat Anda memilih masalah Crashlytics di App Quality Insights, Anda akan melihat data gabungan dari peristiwa yang memiliki titik kegagalan yang sama dalam kode Anda, tetapi mungkin memiliki akar penyebab yang berbeda. Untuk membantu Anda menganalisis akar penyebab error, Crashlytics sekarang mengelompokkan peristiwa yang memiliki pelacakan tumpukan yang identik sebagai varian masalah. Kini Anda bisa menampilkan peristiwa dalam setiap varian laporan kerusakan di App Quality Insights dengan memilih varian dari menu dropdown. Atau, Anda bisa menampilkan informasi gabungan untuk semua varian dengan memilih <b>All</b>.</p>
<h3>Desain</h3>
<h4 id="Jetpack-Compose-UI-Check"><span style="font-size: large">Pemeriksaan UI Jetpack Compose</span></h4>
<p>Untuk membantu developer membangun UI adaptif dan mudah diakses di Jetpack Compose, Iguana memperkenalkan mode Pemeriksaan UI baru di Pratinjau Compose. Cara kerja fitur ini mirip dengan <a href="https://developer.android.com/studio/releases/past-releases/as-electric-eel-release-notes#visual-linting" target="_blank">analisis lint visual</a> dan <a href="https://developer.android.com/guide/topics/ui/accessibility/testing#accessibility-scanner" target="_blank">integrasi pemeriksaan aksesibilitas</a> untuk tampilan. Aktifkan mode pemeriksaan UI Compose untuk mengaudit UI Compose Anda secara otomatis dan memeriksa masalah adaptif dan aksesibilitas pada berbagai ukuran layar, seperti teks yang terlalu melar pada layar besar atau kontras warna yang rendah. Mode ini menyoroti masalah yang ditemukan dalam konfigurasi pratinjau yang berbeda, dan mencantumkannya dalam panel masalah.</p>
<p>Cobalah dengan mengklik ikon Pemeriksaan UI di Pratinjau Compose.</p>
<img><div style="text-align: center;"><img alt="Titik masuk Pemeriksaan UI di Pratinjau Compose" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmxUObWjCdKU1b_k7SM2GF3ctMOKgkM0DaR7iTAXNEJ1XB1La6M0XjY4FA3JpsWbmP075mUu4T1Vi9FK-4R9qO0_bMJ-KgqCCJ0of0cIBMxQ7uIijHST492HcwXdCP5advPejWe9iqMwohuaf6XW178dwOW8J0H0v-RmejVM5trelOXUso3fHWkYJoBs/s1600/image8.png" width="100%"></div><imgcaption><center><em>Titik masuk Pemeriksaan UI di Pratinjau Compose</em></center></imgcaption><br>
<img><div style="text-align: center;"><img alt="Hasil Pemeriksaan UI Reply App di Pratinjau Compose" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoU9ZlgRQ_ayGBAYuQHc5on9Q1DHesdlJc08h2IgZI8RXrrvliPYiXFk939FP7N1Bmc52qnjnOrl_RhG-GuQOmhiWNdxT4kP0JnhYU1pdwDg_rj8YTtWpCU62fQ_DuGGlProqTD7DGMxzs7VDcb2_7BD9iQQtCG6dhyphenhyphenY_yjmmH18_JGio_7S0CoQeKx3c/s1600/image3.png" width="100%"></div><imgcaption><center><em>Hasil Pemeriksaan UI Reply App di Pratinjau Compose</em></center></imgcaption><br>
<h4><span style="font-size: large">Rendering progresif untuk Pratinjau Compose</span></h4>
<p>Pratinjau Compose di Android Studio Iguana sekarang menerapkan rendering progresif, sehingga Anda dapat melakukan iterasi pada desain Anda dengan waktu pemuatan yang lebih singkat. Fitur ini secara otomatis menurunkan detail pratinjau di luar tampilan untuk meningkatkan performa, yang berarti, Anda bisa menggulir tata letak yang paling kompleks sekalipun tanpa lag.</p>
<img><div style="text-align: center;"><img alt="gambar bergerak yang menunjukkan rendering progresif di Compose" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizA6oSmA5LLc5m2C2jxrzZwKUxk3EFAx3dzA15MPYtVwDRq5XFCqdGO0hgMi-EEHgdLCriPxflcVD4GcpHaV8bf_vQGAra4K0vb8QhBLr10br08O7NEUWP_EPu9at6oMCMx-HGTvQJfk9yChhCb8rYh2fylbnLHvRIymFI0B5dz_eFPTbt1tW3ZWuCIVw/s1600/image7.gif" width="100%"></div><imgcaption><center><em>Rendering Progresif di Compose
</em></center></imgcaption><br>
<h3>Develop</h3>
<h4><span style="font-size: large">Update Platform IntelliJ</span></h4>
<p>Android Studio Iguana menyertakan rilis platform IntelliJ 2023.2, yang memiliki banyak fitur baru seperti dukungan untuk GitLab, penelusuran teks di Search Everywhere, update penyesuaian warna untuk UI baru, dan sejumlah peningkatan baru. <a href="https://www.jetbrains.com/idea/whatsnew/2023-2/" target="_blank">Pelajari lebih lanjut</a>.</p>
<h3>Pengujian</h3>
<h4 id="Baseline-Profiles-module-wizard"><span style="font-size: large">Wizard modul Profil Dasar</span></h4>
<p>Sering kali ketika Anda menjalankan aplikasi Android untuk pertama kalinya pada perangkat, waktu mulai aplikasi mungkin terlihat lambat karena sistem operasi harus menjalankan kompilasi saat itu juga. Untuk mengatasi situasi ini, Anda bisa membuat <a href="https://developer.android.com/topic/performance/baselineprofiles/overview" target="_blank">Profil Dasar</a> untuk membantu Android meningkatkan aspek-aspek seperti waktu mulai aplikasi, scrolling, dan kecepatan navigasi dalam aplikasi Anda. Kami menyederhanakan proses pengaturan Profil Dasar dengan menawarkan template <b>Generator Profil Dasar</b> baru di wizard modul baru (<b>File > New > New Module</b>). Template ini mengonfigurasi project Anda untuk mendukung Profil Dasar dan menggunakan plugin Gradle Profil Dasar terbaru, yang menyederhanakan proses penyiapan dengan mengotomatiskan tugas-tugas yang diperlukan dengan satu perintah Gradle.</p>
<img><div style="text-align: center;"><img alt="Wizard modul Profil Dasar - Membuat Modul Baru" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyKl8DkBdJgx4pL2FmWQCDe3tA95kmPYjyckhjetXmKUovCHj1865RvDhmtZ69h4D_lHkn9ivNvRv72z_TM0uZpoN3_lgmU0znQvH9PIEuOsBv84LOrDyrS-ZkiT1vL6-gOQsUzmsdJcz_n7XzUQ7aZZNiLQSCCAHjL5CtyGsE00GLX2xSYMAeMN0mFyQ/s1600/image1.png" width="100%"></div><imgcaption><center><em>Generator Profil Dasar</em></center></imgcaption><br>
<p>Selain itu, template ini membuat konfigurasi run yang memungkinkan Anda membuat Profil Dasar dengan sekali klik dari daftar dropdown "Select Run/Debug Configuration".</p>
<img><div style="text-align: center;"><img alt="Menu drop-down Generate Baseline Profile" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEtil4Dxz-J9int-_rjsa3fPhBUWWVG3SSJFg_U7cUFuyidiKB1xwB3osGNS_r9ETRfrsR1uMZbRuC3epK5SFNO7lQZxTw8e59lbWosmaWSoFZgFVyp5o4Zyjid0Iy3ZlsDE-YiR6WZEMKe6joQDnerPSgiiVInbRo8zpLt1HsPfjElX8xvdx_PmWbFgI/s1600/image9.png" width="100%"></div><imgcaption><center><em>Menu drop-down Generate Baseline Profile</em></center></imgcaption><br>
<h4 id="Espresso-Device-API"><span style="font-size: large">Menguji perubahan konfigurasi dengan Espresso Device API</span></h4>
<img><div style="text-align: center;"><img alt="Pengujian sinkron perubahan ukuran jendela menggunakan Espresso Device API" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz1i3rsJk6RwVmTP7T74LJjvZhn_bSiRcq6FO-KqIn87-oSwAVT98bf3mVDA2M8pFLCfgA6pd1qKoD-DuDmdZ8ysrE9CjB38xJ6j_wouW_Ea1QmsVxBtkBQHxgMtadci1B9B7h-UqY1kuXFRQHfGG7imIyjDommwzYhT1FHlVxel_f869cOhomhYxIP64/s1600/image10.png" width="100%"></div><imgcaption><center><em>Pengujian sinkron perubahan ukuran jendela menggunakan Espresso Device API</em></center></imgcaption><br>
<p>Tangani masalah tata letak sejak dini dan pastikan aplikasi Anda memberikan pengalaman pengguna yang mulus di berbagai perangkat dan orientasi. <a href="https://github.com/android/testing-samples/tree/main/ui/espresso/EspressoDeviceSample" target="_blank">Espresso Device API</a> menyimulasikan bagaimana aplikasi Anda bereaksi terhadap perubahan konfigurasi—seperti rotasi layar, melipat/membuka lipatan perangkat, atau perubahan ukuran jendela—secara sinkron pada perangkat virtual. API ini membantu Anda menguji secara menyeluruh dan secara preemptive memperbaiki masalah yang membuat pengguna frustasi sehingga Anda dapat membangun aplikasi Android yang lebih andal dengan percaya diri. API ini dibangun di atas endpoint gRPC baru yang diperkenalkan di Android Emulator 34.2, yang memungkinkan aliran data dua arah dengan aman dan simulasi sensor yang tepat.</p>
<h4 id="Pixel-8-Pixel-8-Pro-devices-in-Android-Emulator-(34.2)"><span style="font-size: large">Perangkat Pixel 8 dan Pixel 8 Pro di Android Emulator (34.2)</span></h4>
<p>Uji aplikasi Anda pada konfigurasi perangkat Google Pixel terbaru dengan definisi Perangkat Virtual Android yang telah diupdate di Android Studio. Dengan Android Studio Iguana dan Android Emulator terbaru (34.2+), akses Pixel Fold, Pixel Tablet, Pixel 7a, Pixel 8, dan Pixel 8 Pro. Memvalidasi aplikasi Anda di perangkat virtual ini adalah cara termudah untuk memastikan bahwa aplikasi Anda bereaksi dengan benar terhadap berbagai ukuran layar dan jenis perangkat.</p>
<img><div style="text-align: center;"><img alt="Perangkat Virtual Android Pixel Baru di Android Emulator" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSAlg0gBem1FyQlMUdsAhO1FRqUikc6ylXGFWuy-w90PzwkkrY7AoTTRi__scQQuWAVZX07N0X2AeCFzjfE9OKe92YEXMyqVn-mFLAbT4FQCMmpnc5otcQzZWn4D6pVOH5wmf5_q9l0R9yK7ifJZhleaVFDp5bnofCergyxRiY4AhzB4rq1H6n_S7vuT0/s1600/image5.png" width="100%"></div><imgcaption><center><em>Perangkat Virtual Android Pixel Baru di Android Emulator. </em></center></imgcaption><br>
<h3>Build</h3>
<h4 id="Support-Gradle-Version-Catalogs"><span style="font-size: large">Dukungan untuk Katalog Versi Gradle</span></h4>
<p>Android Studio Iguana menyederhanakan manajemen dependensi dengan dukungan yang disempurnakan untuk Katalog Versi Gradle berbasis TOML. Anda akan mendapatkan keuntungan dari:</p>
<ul><ul>
<li><b>Manajemen dependensi terpusat:</b> Menjaga semua dependensi project Anda tetap terorganisir dalam satu file untuk pengeditan dan pembaruan yang lebih mudah.</li>
<li><b>Fitur penghemat waktu:</b> Nikmati pelengkapan kode yang mulus, navigasi cerdas dalam kode Anda, dan kemampuan untuk mengedit dependensi project dengan cepat melalui dialog Project Structure yang nyaman.</li>
<li><b>Peningkatan efisiensi:</b> Ucapkan selamat tinggal pada dependensi yang tersebar dan update versi secara manual. Katalog versi memberi Anda alur kerja pengembangan yang lebih mudah dikelola dan efisien.</li>
</ul></ul>
<p>Project baru akan secara otomatis menggunakan katalog versi untuk manajemen dependensi. Jika Anda sudah memiliki project, pertimbangkan melakukan peralihan untuk mendapatkan manfaat dari peningkatan alur kerja ini. Untuk mempelajari cara mengupdate ke katalog versi Gradle, lihat <a href="https://developer.android.com/studio/build/migrate-to-catalogs" target="_blank">Memigrasikan build Anda ke katalog versi</a>.</p>
<h4 id="policy-issues"><span style="font-size: large">Insight SDK tambahan: masalah kebijakan</span></h4>
<p>Android Studio Iguana sekarang secara proaktif memberi tahu Anda tentang potensi pelanggaran kebijakan Google Play melalui integrasi dengan <a href="https://developer.android.com/distribute/sdk-index" target="_blank">Google Play SDK Index</a>. Melihat masalah kebijakan Play dengan mudah di file build dan Dialog Project Structure. Hal ini menyederhanakan kepatuhan, membantu Anda menghindari penundaan atau penolakan publikasi yang tidak terduga di Google Play Store.</p>
<img><div style="text-align: center;"><img alt="Dialog Project Structure Android Studio yang menunjukkan peringatan dari Google Play SDK Index" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2-PFVbEYLFKYj8SSlJThmWnjpbVrhZbWucwaoArGPvOo2S7ljD0Ggddg90ZlXPNyCCWdEHYCoNjb24K3cwT7tb1rygEqGDgJ9D8TL6KZ63Jw0wR7qbslgMLBBHlhGfvHnnXnX5sf8H_F9kmSQji7VaGtI8cq6P-RJ7MbEDTzC9y7LdYTuNtJjEegmF1E/s1600/image4.png" width="100%"></div><imgcaption><center><em>Peringatan dari Google Play SDK Index pada dialog Project Structure Android Studio</em></center></imgcaption><br>
<h4><span style="font-size: large">Dukungan versi compileSdk Android Studio</span></h4>
<p>Menggunakan Android Studio untuk mengembangkan project yang memiliki <a href="https://developer.android.com/build#android_sdk_settings" target="_blank">versi compileSdk</a> yang tidak didukung bisa menyebabkan error yang tidak terduga karena versi Android Studio lama mungkin tidak dapat menangani Android SDK terbaru dengan benar. Untuk menghindari masalah ini, Android Studio Iguana sekarang secara eksplisit memperingatkan Anda jika compileSdk yang ditujukan untuk project adalah untuk versi yang lebih baru yang tidak didukung secara resmi. Jika tersedia, ia juga menyarankan untuk berpindah ke versi Android Studio yang mendukung compileSdk yang digunakan project Anda. Perlu diingat bahwa <a href="https://developer.android.com/studio/releases#android_gradle_plugin_and_android_studio_compatibility" target="_blank">mengupgrade Android Studio mungkin juga mengharuskan Anda mengupgrade AGP</a>.</p>
<h3><b>Ringkasan</b></h3>
<p>Singkatnya, <a href="https://developer.android.com/studio" target="_blank">Android Studio Iguana</a> 🦎menyertakan penyempurnaan dan fitur-fitur berikut ini:</p>
<p><b>Debugging</b></p>
<ul><ul>
<li><a href="#Version-control-system-integration-App-Quality-Insights">Kontrol versi dalam App Quality Insights</a></li>
<li><a href="#View-Crashlytics-crash-variants-App-Quality-Insights">Menampilkan Crashlytics dalam App Quality Insights</a></li>
</ul></ul>
<p><b>Desain</b></p>
<ul><ul>
<li><a href="#Jetpack-Compose-UI-Check">Pemeriksaan UI Jetpack Compose</a></li>
<li>Rendering progresif untuk Pratinjau Compose</li>
</ul></ul>
<p><b>Develop</b></p>
<ul><ul>
<li>Update platform IntelliJ</li>
</ul></ul>
<p><b>Pengujian</b></p>
<ul><ul>
<li><a href="#Baseline-Profiles-module-wizard">Wizard Profil Dasar</a></li>
<li><a href="#Espresso-Device-API">Espresso Device API</a></li>
<li><a href="#Pixel-8-Pixel-8-Pro-devices-in-Android-Emulator-(34.2)">Perangkat Virtual Android terbaru</a></li>
</ul></ul>
<p><b>Build</b></p>
<ul><ul>
<li><a href="#Support-Gradle-Version-Catalogs">Dukungan untuk Katalog Versi Gradle</a></li>
<li><a href="#policy-issues">Peringatan masalah kebijakan di Google Play SDK Index</a></li>
<li>Dukungan versi CompileSDK</li>
</ul></ul>
<h3>Download Android Studio Sekarang</h3>
<p>Download <a href="https://developer.android.com/studio" target="_blank">Android Studio Iguana</a> 🦎 sekarang dan manfaatkan fitur-fitur terbaru untuk menyederhanakan alur kerja dan membantu Anda membuat aplikasi yang lebih baik. Masukan Anda sangatlah penting – <a href="https://developer.android.com/studio/known-issues" target="_blank">periksa masalah yang diketahui</a>, <a href="https://developer.android.com/studio/report-bugs" target="_blank">laporkan bug</a>, <a href="https://developer.android.com/studio/report-bugs" target="_blank">sarankan peningkatan</a>, dan jadilah bagian dari komunitas kami yang dinamis di <a href="https://www.linkedin.com/showcase/androiddev/posts/?feedView=all" target="_blank">LinkedIn</a> <a href="https://medium.com/androiddevelopers" target="_blank">Medium</a>, <a href="https://www.youtube.com/c/AndroidDevelopers/videos" target="_blank">YouTube</a>, atau <a href="https://twitter.com/androidstudio" target="_blank">X (sebelumnya dikenal sebagai Twitter)</a>. Mari membangun masa depan aplikasi Android bersama-sama! </p>
</div>
<hr>
</div>
</div>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-30179842913086822592024-02-28T09:26:00.001+07:002024-03-18T09:29:44.317+07:00Bermain-main dengan bentuk di Compose<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="https://medium.com/androiddevelopers/fun-with-shapes-in-compose-8814c439e1a0"/>
<meta name="original_url" content="https://medium.com/androiddevelopers/fun-with-shapes-in-compose-8814c439e1a0"/>
<style type="text/css" data-fela-rehydration="539" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}
/*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black;
}/* Gray DOCTYPE selectors like WebKit */
.xml .hljs-meta {color: #c0c0c0;
}.hljs-comment,
.hljs-quote {color: #007400;
}.hljs-tag,
.hljs-attribute,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name {color: #aa0d91;
}.hljs-variable,
.hljs-template-variable {color: #3F6E74;
}.hljs-code,
.hljs-string,
.hljs-meta .hljs-string {color: #c41a16;
}.hljs-regexp,
.hljs-link {color: #0E0EFF;
}.hljs-title,
.hljs-symbol,
.hljs-bullet,
.hljs-number {color: #1c00cf;
}.hljs-section,
.hljs-meta {color: #643820;
}.hljs-title.class_,
.hljs-class .hljs-title,
.hljs-type,
.hljs-built_in,
.hljs-params {color: #5c2699;
}.hljs-attr {color: #836C28;
}.hljs-subst {color: #000;
}.hljs-formula {background-color: #eee;font-style: italic;
}.hljs-addition {background-color: #baeeba;
}.hljs-deletion {background-color: #ffc8bd;
}.hljs-selector-id,
.hljs-selector-class {color: #9b703f;
}.hljs-doctag,
.hljs-strong {font-weight: bold;
}.hljs-emphasis {font-style: italic;
}
</style>
<style type="text/css" data-fela-rehydration="539" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style>
<style type="text/css" data-fela-rehydration="539" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{fill:rgba(0, 0, 0, 1)}.av{height:22px}.aw{margin-left:16px}.ax{border:none}.ay{border-radius:20px}.az{width:240px}.ba{background:#F9F9F9}.bb path{fill:#6B6B6B}.bd{outline:none}.be{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bf{font-size:14px}.bg{width:100%}.bh{padding:10px 20px 10px 0}.bi{background-color:transparent}.bj{color:#242424}.bk::placeholder{color:#6B6B6B}.bl{display:inline-block}.bm{margin-left:12px}.bn{margin-right:12px}.bo{border-radius:4px}.bp{margin-left:24px}.bq{height:24px}.bw{background-color:#F9F9F9}.bx{border-radius:50%}.by{height:32px}.bz{width:32px}.ca{justify-content:center}.cg{max-width:680px}.ch{min-width:0}.ci{animation:k1 1.2s ease-in-out infinite}.cj{height:100vh}.ck{margin-bottom:16px}.cl{margin-top:48px}.cm{align-items:flex-start}.cn{flex-direction:column}.co{justify-content:space-between}.cp{margin-bottom:24px}.cv{width:80%}.cw{background-color:#F2F2F2}.dc{height:44px}.dd{width:44px}.de{margin:auto 0}.df{margin-bottom:4px}.dg{height:16px}.dh{width:120px}.di{width:80px}.do{margin-bottom:8px}.dp{width:96%}.dq{width:98%}.dr{width:81%}.ds{margin-left:8px}.dt{color:#6B6B6B}.du{font-size:13px}.dv{height:100%}.eo{color:#FFFFFF}.ep{fill:#FFFFFF}.eq{background:rgba(103, 139, 160, 1)}.er{border-color:rgba(103, 139, 160, 1)}.ev:disabled{cursor:inherit !important}.ew:disabled{opacity:0.3}.ex:disabled:hover{background:rgba(103, 139, 160, 1)}.ey:disabled:hover{border-color:rgba(103, 139, 160, 1)}.ez{border-radius:99em}.fa{border-width:1px}.fb{border-style:solid}.fc{box-sizing:border-box}.fd{text-decoration:none}.fe{text-align:center}.fh{margin-right:32px}.fi{position:relative}.fj{fill:#6B6B6B}.fm{background:transparent}.fn svg{margin-left:4px}.fo svg{fill:#6B6B6B}.fq{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fr{position:absolute}.fy{margin:0 24px}.gc{background:rgba(255, 255, 255, 1)}.gd{border:1px solid #F2F2F2}.ge{box-shadow:0 1px 4px #F2F2F2}.gf{max-height:100vh}.gg{overflow-y:auto}.gh{left:0}.gi{top:calc(100vh + 100px)}.gj{bottom:calc(100vh + 100px)}.gk{width:10px}.gl{pointer-events:none}.gm{word-break:break-word}.gn{word-wrap:break-word}.go:after{display:block}.gp:after{content:""}.gq:after{clear:both}.gr{clear:both}.ha{margin-left:auto}.hb{margin-right:auto}.hc{max-width:5261px}.hi{padding-top:5px}.hj{padding-bottom:5px}.hl{cursor:zoom-in}.hm{z-index:auto}.ho{max-width:100%}.hp{height:auto}.hq{line-height:1.23}.hr{letter-spacing:0}.hs{font-style:normal}.ht{font-weight:700}.it{@media all and (max-width: 551.98px):8px}.iu{@media all and (min-width: 552px) and (max-width: 727.98px):8px}.iv{@media all and (min-width: 728px) and (max-width: 903.98px):16px}.iw{@media all and (min-width: 904px) and (max-width: 1079.98px):16px}.ix{@media all and (min-width: 1080px):16px}.jd{align-items:baseline}.je{width:48px}.jf{height:48px}.jg{border:2px solid rgba(255, 255, 255, 1)}.jh{z-index:0}.ji{box-shadow:none}.jj{border:1px solid rgba(0, 0, 0, 0.05)}.jk{margin-left:-12px}.jl{width:28px}.jm{height:28px}.jn{z-index:1}.jo{width:24px}.jp{margin-bottom:2px}.jq{flex-wrap:nowrap}.jr{font-size:16px}.js{line-height:24px}.ju{margin:0 8px}.jv{display:inline}.jw{color:rgba(103, 139, 160, 1)}.jx{fill:rgba(103, 139, 160, 1)}.ka{flex:0 0 auto}.kd{flex-wrap:wrap}.kg{white-space:pre-wrap}.kh{margin-right:4px}.ki{overflow:hidden}.kj{max-height:20px}.kk{text-overflow:ellipsis}.kl{display:-webkit-box}.km{-webkit-line-clamp:1}.kn{-webkit-box-orient:vertical}.ko{word-break:break-all}.kq{padding-left:8px}.kr{padding-right:8px}.ls> *{flex-shrink:0}.lt{overflow-x:scroll}.lu::-webkit-scrollbar{display:none}.lv{scrollbar-width:none}.lw{-ms-overflow-style:none}.lx{width:74px}.ly{flex-direction:row}.mb{-webkit-user-select:none}.mc{border:0}.md{fill:rgba(117, 117, 117, 1)}.mg{outline:0}.mh{user-select:none}.mi> svg{pointer-events:none}.mr{cursor:progress}.ms{margin-left:4px}.mt{margin-top:0px}.mu{opacity:1}.mv{padding:4px 0}.my{width:16px}.na{display:inline-flex}.nd{padding:8px 2px}.ne svg{color:#6B6B6B}.nv{line-height:1.58}.nw{letter-spacing:-0.004em}.nx{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.os{margin-bottom:-0.46em}.ot{text-decoration:underline}.ou{padding:2px 4px}.ov{font-size:75%}.ow> strong{font-family:inherit}.ox{font-family:source-code-pro, Menlo, Monaco, "Courier New", Courier, monospace}.oy{max-width:360px}.pe{margin-top:10px}.pf{max-width:728px}.pi{font-style:inherit}.pj{line-height:1.12}.pk{letter-spacing:-0.022em}.pl{font-weight:600}.qg{margin-bottom:-0.28em}.qm{max-width:555px}.qn{overflow-x:auto}.qo{padding:32px}.qp{border:1px solid #E5E5E5}.qq{line-height:1.4}.qr{margin-top:-0.2em}.qs{margin-bottom:-0.2em}.qt{white-space:pre}.qu{min-width:fit-content}.qv{max-width:477px}.qw{max-width:474px}.qx{max-width:571px}.qy{max-width:559px}.qz{max-width:1344px}.ra{max-width:1308px}.rb{font-style:italic}.rc{margin-top:32px}.rd{margin-bottom:14px}.re{padding-top:24px}.rf{padding-bottom:10px}.rg{background-color:#000000}.rh{height:3px}.ri{width:3px}.rj{margin-right:20px}.rk{margin-bottom:26px}.rl{margin-top:6px}.rm{margin-top:8px}.rn{margin-right:8px}.ro{padding:8px 16px}.rp{border-radius:100px}.rq{transition:background 300ms ease}.rs{white-space:nowrap}.rt{border-top:none}.rz{height:52px}.sa{max-height:52px}.sb{box-sizing:content-box}.sc{position:static}.se{max-width:155px}.sp{align-items:flex-end}.sq{width:76px}.sr{height:76px}.ss{border:2px solid #F9F9F9}.st{height:72px}.su{width:72px}.sv{margin-left:-16px}.sw{width:36px}.sx{height:36px}.sy{width:auto}.sz{stroke:#F2F2F2}.ta{color:#F2F2F2}.tb{fill:#F2F2F2}.tc{background:#F2F2F2}.td{border-color:#F2F2F2}.tj{font-weight:500}.tk{font-size:24px}.tl{line-height:30px}.tm{letter-spacing:-0.016em}.tn{margin-top:16px}.to{height:0px}.tp{border-bottom:solid 1px #E5E5E5}.tq{margin-top:72px}.tr{padding:24px 0}.ts{margin-bottom:0px}.tt{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.es:hover{background:rgba(91, 119, 136, 1)}.et:hover{border-color:rgba(91, 119, 136, 1)}.eu:hover{cursor:pointer}.fk:hover{color:#242424}.fl:hover{fill:#242424}.fp:hover svg{fill:#242424}.fs:hover{background-color:rgba(0, 0, 0, 0.1)}.jt:hover{text-decoration:underline}.jy:hover:not(:disabled){color:rgba(91, 119, 136, 1)}.jz:hover:not(:disabled){fill:rgba(91, 119, 136, 1)}.mf:hover{fill:rgba(8, 8, 8, 1)}.mw:hover{fill:#000000}.mx:hover p{color:#000000}.mz:hover{color:#000000}.nf:hover svg{color:#000000}.rr:hover{background-color:#F2F2F2}.te:hover{background:#F2F2F2}.tf:hover{border-color:#F2F2F2}.tg:hover{cursor:wait}.th:hover{color:#F2F2F2}.ti:hover{fill:#F2F2F2}.bc:focus-within path{fill:#242424}.hn:focus{transform:scale(1.01)}.me:focus{fill:rgba(8, 8, 8, 1)}.ng:focus svg{color:#000000}.mj:active{border-style:none}</style>
<style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ee{font-size:14px}.ef{line-height:20px}.el{font-size:13px}.em{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:68px}.gb{max-width:680px}.gz{max-width:1192px}.hh{margin-top:40px}.io{font-size:42px}.ip{margin-top:1em}.iq{margin-bottom:32px}.ir{line-height:52px}.is{letter-spacing:-0.011em}.jc{align-items:center}.le{border-top:solid 1px #F2F2F2}.lf{border-bottom:solid 1px #F2F2F2}.lg{margin:32px 0 0}.lh{padding:3px 8px}.lq> *{margin-right:24px}.lr> :last-child{margin-right:0}.mq{margin-top:0px}.nc{margin:0}.oo{font-size:20px}.op{margin-top:2.14em}.oq{line-height:32px}.or{letter-spacing:-0.003em}.pd{margin-top:56px}.qc{font-size:24px}.qd{margin-top:1.95em}.qe{line-height:30px}.qf{letter-spacing:-0.016em}.ql{margin-top:0.94em}.ry{margin-bottom:88px}.sj{display:inline-block}.so{padding-top:72px}</style>
<style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.mp{margin-top:0px}.pg{margin-left:auto}.ph{text-align:center}.si{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.mo{margin-top:0px}.sh{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.mm{margin-top:0px}.mn{margin-right:0px}.sg{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.br{width:24px}.cb{margin:0 24px}.cq{height:40px}.cx{margin-bottom:44px}.dj{margin-bottom:32px}.dw{font-size:13px}.dx{line-height:20px}.eg{padding:0px 8px 1px}.ft{margin-bottom:4px}.gs{margin:0}.gt{max-width:100%}.hd{margin-top:32px}.hu{font-size:32px}.hv{margin-top:1.01em}.hw{margin-bottom:24px}.hx{line-height:38px}.hy{letter-spacing:-0.014em}.iy{align-items:flex-start}.kb{flex-direction:column}.ke{margin-bottom:2px}.ks{margin:24px -24px 0}.kt{padding:0}.li> *{margin-right:8px}.lj> :last-child{margin-right:24px}.lz{margin-left:0px}.mk{margin-top:0px}.ml{margin-right:0px}.nh{border:1px solid #F2F2F2}.ni{border-radius:99em}.nj{padding:0px 16px 0px 12px}.nk{height:38px}.nl{align-items:center}.nn svg{margin-right:8px}.ny{font-size:18px}.nz{margin-top:1.56em}.oa{line-height:28px}.ob{letter-spacing:-0.003em}.oz{margin-top:40px}.pm{font-size:20px}.pn{margin-top:1.2em}.po{line-height:24px}.pp{letter-spacing:0}.qh{margin-top:0.67em}.ru{margin-bottom:80px}.sf{display:inline-block}.sk{padding-top:48px}.nm:hover{border-color:#E5E5E5}</style>
<style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bu{width:64px}.ce{margin:0 64px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.ec{font-size:14px}.ed{line-height:20px}.ej{font-size:13px}.ek{padding:5px 12px}.ff{display:flex}.fw{margin-bottom:68px}.ga{max-width:680px}.gy{max-width:1192px}.hg{margin-top:40px}.ij{font-size:42px}.ik{margin-top:1em}.il{margin-bottom:32px}.im{line-height:52px}.in{letter-spacing:-0.011em}.jb{align-items:center}.la{border-top:solid 1px #F2F2F2}.lb{border-bottom:solid 1px #F2F2F2}.lc{margin:32px 0 0}.ld{padding:3px 8px}.lo> *{margin-right:24px}.lp> :last-child{margin-right:0}.nb{margin:0}.ok{font-size:20px}.ol{margin-top:2.14em}.om{line-height:32px}.on{letter-spacing:-0.003em}.pc{margin-top:56px}.py{font-size:24px}.pz{margin-top:1.95em}.qa{line-height:30px}.qb{letter-spacing:-0.016em}.qk{margin-top:0.94em}.rx{margin-bottom:88px}.sn{padding-top:72px}</style>
<style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bt{width:64px}.cd{margin:0 48px}.cs{height:48px}.cz{margin-bottom:52px}.dl{margin-bottom:48px}.ea{font-size:13px}.eb{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:68px}.fz{max-width:680px}.gw{margin:0}.gx{max-width:100%}.hf{margin-top:40px}.ie{font-size:42px}.if{margin-top:1em}.ig{margin-bottom:32px}.ih{line-height:52px}.ii{letter-spacing:-0.011em}.ja{align-items:center}.kw{border-top:solid 1px #F2F2F2}.kx{border-bottom:solid 1px #F2F2F2}.ky{margin:32px 0 0}.kz{padding:3px 8px}.lm> *{margin-right:24px}.ln> :last-child{margin-right:0}.og{font-size:20px}.oh{margin-top:2.14em}.oi{line-height:32px}.oj{letter-spacing:-0.003em}.pb{margin-top:56px}.pu{font-size:24px}.pv{margin-top:1.95em}.pw{line-height:30px}.px{letter-spacing:-0.016em}.qj{margin-top:0.94em}.rw{margin-bottom:88px}.sm{padding-top:72px}</style>
<style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dy{font-size:13px}.dz{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:4px}.gu{margin:0}.gv{max-width:100%}.he{margin-top:32px}.hz{font-size:32px}.ia{margin-top:1.01em}.ib{margin-bottom:24px}.ic{line-height:38px}.id{letter-spacing:-0.014em}.iz{align-items:flex-start}.kc{flex-direction:column}.kf{margin-bottom:2px}.ku{margin:24px 0 0}.kv{padding:0}.lk> *{margin-right:8px}.ll> :last-child{margin-right:8px}.ma{margin-left:0px}.no{border:1px solid #F2F2F2}.np{border-radius:99em}.nq{padding:0px 16px 0px 12px}.nr{height:38px}.ns{align-items:center}.nu svg{margin-right:8px}.oc{font-size:18px}.od{margin-top:1.56em}.oe{line-height:28px}.of{letter-spacing:-0.003em}.pa{margin-top:40px}.pq{font-size:20px}.pr{margin-top:1.2em}.ps{line-height:24px}.pt{letter-spacing:0}.qi{margin-top:0.67em}.rv{margin-bottom:80px}.sl{padding-top:48px}.nt:hover{border-color:#E5E5E5}</style>
<style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="print">.sd{display:none}</style>
<style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.hk{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style>
<style type="text/css" data-fela-rehydration="539" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.kp{max-height:none}</style>
</head><body>
<article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fr gh gi gj gk gl"></div><div class="gm gn go gp gq"><div class="gr"><div class="ab ca"><div class="gs gt gu gv gw gx ce gy cf gz ch bg"><figure class="hd he hf hg hh gr hi hj paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb hc"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/1*CftPnKhH_WQYP6LhmG31bA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*CftPnKhH_WQYP6LhmG31bA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*CftPnKhH_WQYP6LhmG31bA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*CftPnKhH_WQYP6LhmG31bA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*CftPnKhH_WQYP6LhmG31bA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*CftPnKhH_WQYP6LhmG31bA.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*CftPnKhH_WQYP6LhmG31bA.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/1*CftPnKhH_WQYP6LhmG31bA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*CftPnKhH_WQYP6LhmG31bA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*CftPnKhH_WQYP6LhmG31bA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*CftPnKhH_WQYP6LhmG31bA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*CftPnKhH_WQYP6LhmG31bA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*CftPnKhH_WQYP6LhmG31bA.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*CftPnKhH_WQYP6LhmG31bA.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"><img alt="" class="bg ho hp c" width="1000" height="298" loading="eager" role="presentation"></picture></div></div></figure></div></div></div><div class="ab ca"><div class="ch bg fy fz ga gb"><div><div class="it iu iv iw ix"><div class="speechify-ignore ab co"><div class="speechify-ignore bg l"><div class="iy iz ja jb jc ab"><div><div class="ab jd"><a rel="noopener follow" href="/@riggaroo?source=post_page-----8814c439e1a0--------------------------------"><div><div class="bl" aria-hidden="false"><div class="l je jf bx jg jh"><div class="l fi"><img alt="Rebecca Franks" class="l fc bx dc dd cw" src="https://miro.medium.com/v2/resize:fill:88:88/2*xRjEQ7J90g2Og8eEBjM65Q.png" width="44" height="44" loading="lazy" data-testid="authorPhoto"><div class="ji bx l dc dd fr n jj fs"></div></div></div></div></div></a><a href="https://medium.com/androiddevelopers?source=post_page-----8814c439e1a0--------------------------------" rel="noopener follow"><div class="jk ab fi"><div><div class="bl" aria-hidden="false"><div class="l jl jm bx jg jn"><div class="l fi"><img alt="Developer Android" class="l fc bx bq jo cw" src="https://miro.medium.com/v2/resize:fill:48:48/1*3tLD4Ve66pbBpuawm9Fu9Q.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"><div class="ji bx l bq jo fr n jj fs"></div></div></div></div></div></div></a></div></div><div class="bm bg l"><div class="ab"><div style="flex:1"><span class="be b bf z bj"><div class="jp ab q"><div class="ab q jq"><div class="ab q"><div><div class="bl" aria-hidden="false"><p class="be b jr js bj"><a class="af ag ah ai aj ak al am an ao ap aq ar jt" data-testid="authorName" rel="noopener follow" href="/@riggaroo?source=post_page-----8814c439e1a0--------------------------------">Rebecca Franks</a></p></div></div></div><span class="ju jv" aria-hidden="true"><span class="be b bf z dt">·</span></span><p class="be b jr js dt"><span><a class="jw jx ah ai aj ak al am an ao ap aq ar ew jy jz" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F3f9b9c30bec7&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Ffun-with-shapes-in-compose-8814c439e1a0&user=Rebecca+Franks&userId=3f9b9c30bec7&source=post_page-3f9b9c30bec7----8814c439e1a0---------------------post_header-----------">Ikuti</a></span></p></div></div></span></div></div><div class="l ka"><span class="be b bf z dt"><div class="ab cm kb kc kd"><div class="ke kf ab"><div class="be b bf z dt ab kg"><span class="kh l ka">Dipublikasikan di</span><div><div class="bl" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar jt ab q" data-testid="publicationName" href="https://medium.com/androiddevelopers?source=post_page-----8814c439e1a0--------------------------------" rel="noopener follow"><p class="be b bf z ki kj kk kl km kn ko kp bj">Developer Android</p></a></div></div></div><div class="h k"><span class="ju jv" aria-hidden="true"><span class="be b bf z dt">·</span></span></div></div><span class="be b bf z dt"><div class="ab ae"><span data-testid="storyReadTime">Bacaan 6 menit</span><div class="kq kr l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="be b bf z dt">·</span></span></div><span data-testid="storyPublishDate"></span></div></span></div></span></div></div></div><div class="ab co ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh"><div class="h k w ff fg q"><div class="lx l"><div class="ab q ly"><div class="pw-multi-vote-icon fi kh lz ma mb"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fandroiddevelopers%2F8814c439e1a0&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Ffun-with-shapes-in-compose-8814c439e1a0&user=Rebecca+Franks&userId=3f9b9c30bec7&source=-----8814c439e1a0---------------------clap_footer-----------"><div><div class="bl" aria-hidden="false"><div class="mc ao md me mf mg am mh mi mj mb"><svg width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.37.83L12 3.28l.63-2.45h-1.26zM13.92 3.95l1.52-2.1-1.18-.4-.34 2.5zM8.59 1.84l1.52 2.11-.34-2.5-1.18.4zM18.52 18.92a4.23 4.23 0 0 1-2.62 1.33l.41-.37c2.39-2.4 2.86-4.95 1.4-7.63l-.91-1.6-.8-1.67c-.25-.56-.19-.98.21-1.29a.7.7 0 0 1 .55-.13c.28.05.54.23.72.5l2.37 4.16c.97 1.62 1.14 4.23-1.33 6.7zm-11-.44l-4.15-4.15a.83.83 0 0 1 1.17-1.17l2.16 2.16a.37.37 0 0 0 .51-.52l-2.15-2.16L3.6 11.2a.83.83 0 0 1 1.17-1.17l3.43 3.44a.36.36 0 0 0 .52 0 .36.36 0 0 0 0-.52L5.29 9.51l-.97-.97a.83.83 0 0 1 0-1.16.84.84 0 0 1 1.17 0l.97.97 3.44 3.43a.36.36 0 0 0 .51 0 .37.37 0 0 0 0-.52L6.98 7.83a.82.82 0 0 1-.18-.9.82.82 0 0 1 .76-.51c.22 0 .43.09.58.24l5.8 5.79a.37.37 0 0 0 .58-.42L13.4 9.67c-.26-.56-.2-.98.2-1.29a.7.7 0 0 1 .55-.13c.28.05.55.23.73.5l2.2 3.86c1.3 2.38.87 4.59-1.29 6.75a4.65 4.65 0 0 1-4.19 1.37 7.73 7.73 0 0 1-4.07-2.25zm3.23-12.5l2.12 2.11c-.41.5-.47 1.17-.13 1.9l.22.46-3.52-3.53a.81.81 0 0 1-.1-.36c0-.23.09-.43.24-.59a.85.85 0 0 1 1.17 0zm7.36 1.7a1.86 1.86 0 0 0-1.23-.84 1.44 1.44 0 0 0-1.12.27c-.3.24-.5.55-.58.89-.25-.25-.57-.4-.91-.47-.28-.04-.56 0-.82.1l-2.18-2.18a1.56 1.56 0 0 0-2.2 0c-.2.2-.33.44-.4.7a1.56 1.56 0 0 0-2.63.75 1.6 1.6 0 0 0-2.23-.04 1.56 1.56 0 0 0 0 2.2c-.24.1-.5.24-.72.45a1.56 1.56 0 0 0 0 2.2l.52.52a1.56 1.56 0 0 0-.75 2.61L7 19a8.46 8.46 0 0 0 4.48 2.45 5.18 5.18 0 0 0 3.36-.5 4.89 4.89 0 0 0 4.2-1.51c2.75-2.77 2.54-5.74 1.43-7.59L18.1 7.68z"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l mk ml mm mn mo mp mq"><p class="be b du z dt"><span class="mr">--</span></p></div></div></div><div><div class="bl" aria-hidden="false"><button class="ao mc mu mv ab q fj mw mx" aria-label="responses"><svg width="24" height="24" viewBox="0 0 24 24" class="mt"><path d="M18 16.8a7.14 7.14 0 0 0 2.24-5.32c0-4.12-3.53-7.48-8.05-7.48C7.67 4 4 7.36 4 11.48c0 4.13 3.67 7.48 8.2 7.48a8.9 8.9 0 0 0 2.38-.32c.23.2.48.39.75.56 1.06.69 2.2 1.04 3.4 1.04.22 0 .4-.11.48-.29a.5.5 0 0 0-.04-.52 6.4 6.4 0 0 1-1.16-2.65v.02zm-3.12 1.06l-.06-.22-.32.1a8 8 0 0 1-2.3.33c-4.03 0-7.3-2.96-7.3-6.59S8.17 4.9 12.2 4.9c4 0 7.1 2.96 7.1 6.6 0 1.8-.6 3.47-2.02 4.72l-.2.16v.26l.02.3a6.74 6.74 0 0 0 .88 2.4 5.27 5.27 0 0 1-2.17-.86c-.28-.17-.72-.38-.94-.59l.01-.02z"></path></svg><p class="be b du z dt"><span class="pw-responses-count ms mt">2</span></p></button></div></div></div><div class="ab q li lj lk ll lm ln lo lp lq lr ls lt lu lv lw"><div class="my k j i d"></div><div class="h k"><div><div class="bl" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F8814c439e1a0&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Ffun-with-shapes-in-compose-8814c439e1a0&source=-----8814c439e1a0---------------------bookmark_footer-----------"><svg width="25" height="25" viewBox="0 0 25 25" fill="none" class="dt mz" aria-label="Add to list bookmark button"><path d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18V2.5zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .8.4l5.7-4.4 5.7 4.4a.5.5 0 0 0 .8-.4v-8.5a.5.5 0 0 0-1 0v7.48l-5.2-4a.5.5 0 0 0-.6 0l-5.2 4V7z" fill="currentColor"></path></svg></a></span></div></div></div><div class="fc na cm"><div class="l ae"><div class="ab ca"><div class="gs gu gw nb nc ho ch bg"><div class="ab"><div class="bl bg" aria-hidden="false"><div><div class="bl" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fj ah ai aj ak al nd an ao ap ew ne nf mx ng nh ni nj nk s nl nm nn no np nq nr u ns nt nu"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0zm9-10a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.38 10.42l-4.6 3.06a.5.5 0 0 1-.78-.41V8.93c0-.4.45-.63.78-.41l4.6 3.06c.3.2.3.64 0 .84z" fill="currentColor"></path></svg><div class="j i d"><p class="be b bf z dt">Dengarkan</p></div></button></div></div></div></div></div></div></div></div><div class="bl" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bl" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fj ah ai aj ak al nd an ao ap ew ne nf mx ng nh ni nj nk s nl nm nn no np nq nr u ns nt nu"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.22 4.93a.42.42 0 0 1-.12.13h.01a.45.45 0 0 1-.29.08.52.52 0 0 1-.3-.13L12.5 3v7.07a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5V3.02l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.8a.42.42 0 0 1 .07.5zm-.1.14zm.88 2h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.14c.1.1.15.22.15.35a.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9V8.96c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1z" fill="currentColor"></path></svg><div class="j i d"><p class="be b bf z dt">Bagikan</p></div></button></div></div></div></div></div></div></div></div></div><p id="2f35" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Kami baru saja merilis <a class="af ot" href="https://developer.android.com/jetpack/compose/graphics/draw/shapes" rel="noopener ugc nofollow" target="_blank">dokumentasi</a> baru yang membahas cara menggunakan library <code class="cw ou ov ow ox b">graphics-shapes</code> di Jetpack Compose. Meskipun dokumentasi itu membahas dasar-dasarnya, saya pikir akan menyenangkan mencoba sesuatu yang sedikit lebih rumit dan membuat status progres yang terlihat berbeda dari versi standar yang biasa kita gunakan.</p><p id="b94a" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Dalam postingan blog ini, kita akan membahas cara membuat status progres yang bertransisi dari poligon bulat berbentuk "bintang" berlekuk-lekuk menjadi lingkaran sembari menampilkan animasi progres reguler.</p><figure class="oz pa pb pc pd gr ha hb paragraph-image"><div class="ha hb oy"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*xmH7I2vA6SP_VZ9K 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*xmH7I2vA6SP_VZ9K 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*xmH7I2vA6SP_VZ9K 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*xmH7I2vA6SP_VZ9K 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*xmH7I2vA6SP_VZ9K 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*xmH7I2vA6SP_VZ9K 1100w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*xmH7I2vA6SP_VZ9K 720w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 360px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*xmH7I2vA6SP_VZ9K 640w, https://miro.medium.com/v2/resize:fit:720/0*xmH7I2vA6SP_VZ9K 720w, https://miro.medium.com/v2/resize:fit:750/0*xmH7I2vA6SP_VZ9K 750w, https://miro.medium.com/v2/resize:fit:786/0*xmH7I2vA6SP_VZ9K 786w, https://miro.medium.com/v2/resize:fit:828/0*xmH7I2vA6SP_VZ9K 828w, https://miro.medium.com/v2/resize:fit:1100/0*xmH7I2vA6SP_VZ9K 1100w, https://miro.medium.com/v2/resize:fit:720/0*xmH7I2vA6SP_VZ9K 720w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 360px"><img alt="" class="bg ho hp c" width="360" height="360" loading="eager" role="presentation"></picture></div><figcaption class="pe fe pf ha hb pg ph be b bf z dt"><em class="pi">Status progres tak terbatas gradien garis berlekuk-lekuk</em></figcaption></figure><h1 id="5db9" class="pj pk hs be pl pm pn po pp pq pr ps pt pu pv pw px py pz qa qb qc qd qe qf qg bj">Membuat poligon</h1><p id="ec5f" class="pw-post-body-paragraph nv nw hs nx b ny qh oa ob oc qi oe of og qj oi oj ok qk om on oo ql oq or os gm bj">Langkah pertama yang ingin kita lakukan adalah membuat transisi dari lingkaran ke lingkaran berlekuk-lekuk, jadi kita membuat dua bentuk yang perlu kita transformasikan.</p><figure class="oz pa pb pc pd gr ha hb paragraph-image"><div class="ha hb qm"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/1*AgEw3OkwnoPI20CBO76Ahw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*AgEw3OkwnoPI20CBO76Ahw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*AgEw3OkwnoPI20CBO76Ahw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*AgEw3OkwnoPI20CBO76Ahw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*AgEw3OkwnoPI20CBO76Ahw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*AgEw3OkwnoPI20CBO76Ahw.png 1100w, https://miro.medium.com/v2/resize:fit:1110/format:webp/1*AgEw3OkwnoPI20CBO76Ahw.png 1110w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 555px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/1*AgEw3OkwnoPI20CBO76Ahw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*AgEw3OkwnoPI20CBO76Ahw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*AgEw3OkwnoPI20CBO76Ahw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*AgEw3OkwnoPI20CBO76Ahw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*AgEw3OkwnoPI20CBO76Ahw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*AgEw3OkwnoPI20CBO76Ahw.png 1100w, https://miro.medium.com/v2/resize:fit:1110/1*AgEw3OkwnoPI20CBO76Ahw.png 1110w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 555px"><img alt="" class="bg ho hp c" width="555" height="255" loading="lazy" role="presentation"></picture></div><figcaption class="pe fe pf ha hb pg ph be b bf z dt"><em class="pi">Dua bentuk yang akan kita transformasikan</em></figcaption></figure><p id="8fbf" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Kita menggunakan <code class="cw ou ov ow ox b">RoundedPolygon#star()</code>, karena ini memungkinkan kita menetapkan radius bagian dalam untuk bentuk dengan sudut membulat, dan <code class="cw ou ov ow ox b">RoundedPolygon#circle()</code> untuk bentuk lingkaran.</p><pre class="oz pa pb pc pd qn ox qo bo qp ba bj"><span id="1e44" class="qq pk hs ox b bf qr qs l qt qu">val starPolygon = remember {<br> RoundedPolygon.star(<br> numVerticesPerRadius = 12,<br> innerRadius = 1f / 3f,<br> rounding = CornerRounding(1f / 6f))<br>}<br>val circlePolygon = remember {<br> RoundedPolygon.circle(<br> numVertices = 12<br> )<br>}</span></pre><h1 id="aafe" class="pj pk hs be pl pm pn po pp pq pr ps pt pu pv pw px py pz qa qb qc qd qe qf qg bj">Transformasi di antara dua bentuk</h1><p id="5c13" class="pw-post-body-paragraph nv nw hs nx b ny qh oa ob oc qi oe of og qj oi oj ok qk om on oo ql oq or os gm bj">Untuk melakukan transformasi di antara dua poligon, kita perlu membuat objek <code class="cw ou ov ow ox b">Morph</code>:</p><pre class="oz pa pb pc pd qn ox qo bo qp ba bj"><span id="3ef1" class="qq pk hs ox b bf qr qs l qt qu">val morph = remember {<br> Morph(starPolygon, circlePolygon)<br>}</span></pre><p id="9057" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Ini akan digunakan dengan nilai progres animasi untuk menentukan progres transformasi di antara kedua bentuk ini. Untuk menggambar objek <code class="cw ou ov ow ox b">Morph</code>, kita perlu mendapatkan objek <code class="cw ou ov ow ox b">Path</code> dari geometrinya, yang kita buat dengan menggunakan metode pembantu berikut:</p><pre class="oz pa pb pc pd qn ox qo bo qp ba bj"><span id="139d" class="qq pk hs ox b bf qr qs l qt qu">fun Morph.toComposePath(progress: Float, scale: Float = 1f, path: Path = Path()): Path {<br> var first = true<br> path.rewind()<br> forEachCubic(progress) { bezier -><br> // move to the initial position if its the first cubic curve<br> if (first) {<br> path.moveTo(bezier.anchor0X * scale, bezier.anchor0Y * scale)<br> first = false<br> }<br> // add cubic curve to the current path for each curve in the Morph<br> path.cubicTo(<br> bezier.control0X * scale, bezier.control0Y * scale,<br> bezier.control1X * scale, bezier.control1Y * scale,<br> bezier.anchor1X * scale, bezier.anchor1Y * scale<br> )<br> }<br> path.close()<br> return path<br>}</span></pre><p id="1e13" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Dengan Path <code class="cw ou ov ow ox b">Morph</code>, kita bisa memanggil <code class="cw ou ov ow ox b">DrawScope#drawPath()</code> untuk menggambar bentuk transformasi animasi kita:</p><pre class="oz pa pb pc pd qn ox qo bo qp ba bj"><span id="f46a" class="qq pk hs ox b bf qr qs l qt qu">val infiniteTransition = rememberInfiniteTransition(label = "infinite")<br>val progress = infiniteTransition.animateFloat(<br> initialValue = 0f,<br> targetValue = 1f,<br> animationSpec = infiniteRepeatable(<br> tween(4000, easing = LinearEasing),<br> repeatMode = RepeatMode.Reverse<br> ),<br> label = "progress"<br>)<br>//.. shapes that are created .. // <br>var morphPath = remember {<br> Path()<br>}<br><br><br>Box(<br> modifier = Modifier<br> .padding(16.dp)<br> .drawWithCache {<br> morphPath = morph<br> .toComposePath(progress = progress.value, scale = size.minDimension / 2f, path = morphPath)<br><br><br> onDrawBehind {<br> translate(size.width / 2f, size.height / 2f) {<br> drawPath(morphPath, color = Color.Black, style = Stroke(16.dp.toPx()))<br> }<br> }<br> }<br>)</span></pre><figure class="oz pa pb pc pd gr ha hb paragraph-image"><div class="ha hb qv"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*1HTGw6IK8sZVwj42 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*1HTGw6IK8sZVwj42 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*1HTGw6IK8sZVwj42 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*1HTGw6IK8sZVwj42 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*1HTGw6IK8sZVwj42 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*1HTGw6IK8sZVwj42 1100w, https://miro.medium.com/v2/resize:fit:954/format:webp/0*1HTGw6IK8sZVwj42 954w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 477px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*1HTGw6IK8sZVwj42 640w, https://miro.medium.com/v2/resize:fit:720/0*1HTGw6IK8sZVwj42 720w, https://miro.medium.com/v2/resize:fit:750/0*1HTGw6IK8sZVwj42 750w, https://miro.medium.com/v2/resize:fit:786/0*1HTGw6IK8sZVwj42 786w, https://miro.medium.com/v2/resize:fit:828/0*1HTGw6IK8sZVwj42 828w, https://miro.medium.com/v2/resize:fit:1100/0*1HTGw6IK8sZVwj42 1100w, https://miro.medium.com/v2/resize:fit:954/0*1HTGw6IK8sZVwj42 954w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 477px"><img alt="" class="bg ho hp c" width="477" height="531" loading="lazy" role="presentation"></picture></div><figcaption class="pe fe pf ha hb pg ph be b bf z dt"><em class="pi">Transformasi jalur antara lingkaran dan bentuk bintang berlekuk-lekuk</em></figcaption></figure><p id="6894" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Sekarang kita bisa memutar bentuk seiring waktu dengan membuat variabel animasi lain untuk rotasi dan memanggil <code class="cw ou ov ow ox b">DrawScope#rotate()</code>.</p><pre class="oz pa pb pc pd qn ox qo bo qp ba bj"><span id="31d9" class="qq pk hs ox b bf qr qs l qt qu">val infiniteTransition = rememberInfiniteTransition(label = "infinite")<br>val progress = infiniteTransition.animateFloat(<br> initialValue = 0f,<br> targetValue = 1f,<br> animationSpec = infiniteRepeatable(<br> tween(4000, easing = LinearEasing),<br> repeatMode = RepeatMode.Reverse<br> ),<br> label = "progress"<br>)<br>val rotation = infiniteTransition.animateFloat(<br> initialValue = 0f,<br> targetValue = 360f,<br> animationSpec = infiniteRepeatable(<br> tween(4000, easing = LinearEasing),<br> repeatMode = RepeatMode.Reverse<br> ),<br> label = "rotation"<br>)<br><br><br>Box(<br> modifier = Modifier<br> .padding(16.dp)<br> .drawWithCache {<br> morphPath = morph<br> .toComposePath(progress = progress.value, scale = size.minDimension / 2f, path = morphPath)<br> onDrawBehind {<br> rotate(rotation.value){<br> translate(size.width / 2f, size.height / 2f) {<br> drawPath(morphPath, color = Color.Black, style = Stroke(16.dp.toPx()))<br> }<br> }</span></pre><p id="bf11" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Langkah itu akan menghasilkan animasi bentuk yang berputar dan bertransformasi seperti berikut ini:</p><figure class="oz pa pb pc pd gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb qw"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*_A-sj-MqaXuZoLb_ 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*_A-sj-MqaXuZoLb_ 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*_A-sj-MqaXuZoLb_ 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*_A-sj-MqaXuZoLb_ 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*_A-sj-MqaXuZoLb_ 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*_A-sj-MqaXuZoLb_ 1100w, https://miro.medium.com/v2/resize:fit:948/format:webp/0*_A-sj-MqaXuZoLb_ 948w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 474px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*_A-sj-MqaXuZoLb_ 640w, https://miro.medium.com/v2/resize:fit:720/0*_A-sj-MqaXuZoLb_ 720w, https://miro.medium.com/v2/resize:fit:750/0*_A-sj-MqaXuZoLb_ 750w, https://miro.medium.com/v2/resize:fit:786/0*_A-sj-MqaXuZoLb_ 786w, https://miro.medium.com/v2/resize:fit:828/0*_A-sj-MqaXuZoLb_ 828w, https://miro.medium.com/v2/resize:fit:1100/0*_A-sj-MqaXuZoLb_ 1100w, https://miro.medium.com/v2/resize:fit:948/0*_A-sj-MqaXuZoLb_ 948w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 474px"><img alt="" class="bg ho hp c" width="474" height="484" loading="lazy" role="presentation"></picture></div></div><figcaption class="pe fe pf ha hb pg ph be b bf z dt"><em class="pi">Lingkaran yang bertransformasi dan berputar</em></figcaption></figure><h1 id="50b8" class="pj pk hs be pl pm pn po pp pq pr ps pt pu pv pw px py pz qa qb qc qd qe qf qg bj">Menggambar jalur secara progresif seiring waktu</h1><p id="c188" class="pw-post-body-paragraph nv nw hs nx b ny qh oa ob oc qi oe of og qj oi oj ok qk om on oo ql oq or os gm bj">Kita punya jalurnya, dan kita membuatnya berputar seiring waktu, tetapi hasil akhir di atas menunjukkan bahwa kita hanya menggambar segmen jalur dan bukan jalur penuh. Bagaimana kita bisa mencapainya?</p><p id="07f5" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Pertama, kita perlu mengetahui panjang jalur, yang dapat kita peroleh dari <code class="cw ou ov ow ox b">PathMeasure</code>. Kemudian kita bisa menggunakan <code class="cw ou ov ow ox b">PathMeasure.getSegment()</code> untuk mendapatkan sebagian dari jalur, berdasarkan progres saat ini (<code class="cw ou ov ow ox b">totalLength * progress.value</code>), dengan hasil yang digunakan di objek jalur baru yang disebut <code class="cw ou ov ow ox b">destinationPath</code>.</p><p id="e757" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Segmen jalur ini kemudian dapat digambar seperti berikut ini:</p><pre class="oz pa pb pc pd qn ox qo bo qp ba bj"><span id="c8a3" class="qq pk hs ox b bf qr qs l qt qu">val pathMeasurer = remember {<br> PathMeasure()<br>}<br>var morphPath = remember {<br> Path()<br>}<br>//..<br><br><br>// in drawWithCache: <br>morphPath = morph<br> .toComposePath(<br> progress = progress.value,<br> scale = size.minDimension / 2f,<br> path = morphPath<br> )<br>pathMeasurer.setPath(morphPath, false)<br>val totalLength = pathMeasurer.length<br>destinationPath.reset()<br>pathMeasurer.getSegment(0f, totalLength * progress.value, destinationPath)<br><br>onDrawBehind {<br> rotate(rotation.value) {<br> translate(size.width / 2f, size.height / 2f) {<br> val brush = Brush.sweepGradient(colors, center = Offset(0.5f, 0.5f))<br><br> drawPath(destinationPath, brush, style = Stroke(16.dp.toPx(), cap = StrokeCap.Round))<br> }<br> }<br>}</span></pre><p id="e60b" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Tanpa rotasi, ini memberikan hasil seperti berikut:</p><figure class="oz pa pb pc pd gr ha hb paragraph-image"><div class="ha hb qx"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*F9NBD57fW9QoHzXs 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*F9NBD57fW9QoHzXs 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*F9NBD57fW9QoHzXs 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*F9NBD57fW9QoHzXs 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*F9NBD57fW9QoHzXs 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*F9NBD57fW9QoHzXs 1100w, https://miro.medium.com/v2/resize:fit:1142/format:webp/0*F9NBD57fW9QoHzXs 1142w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 571px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*F9NBD57fW9QoHzXs 640w, https://miro.medium.com/v2/resize:fit:720/0*F9NBD57fW9QoHzXs 720w, https://miro.medium.com/v2/resize:fit:750/0*F9NBD57fW9QoHzXs 750w, https://miro.medium.com/v2/resize:fit:786/0*F9NBD57fW9QoHzXs 786w, https://miro.medium.com/v2/resize:fit:828/0*F9NBD57fW9QoHzXs 828w, https://miro.medium.com/v2/resize:fit:1100/0*F9NBD57fW9QoHzXs 1100w, https://miro.medium.com/v2/resize:fit:1142/0*F9NBD57fW9QoHzXs 1142w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 571px"><img alt="" class="bg ho hp c" width="571" height="571" loading="lazy" role="presentation"></picture></div></figure><p id="6277" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Dengan penambahan animasi untuk transformasi dan rotasi, kita bisa melihatnya secara perlahan-lahan bertransformasi menjadi lingkaran saat menggambar garis:</p><figure class="oz pa pb pc pd gr ha hb paragraph-image"><div class="ha hb qy"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*ub-0G8kpHAH56Ffm 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*ub-0G8kpHAH56Ffm 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*ub-0G8kpHAH56Ffm 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*ub-0G8kpHAH56Ffm 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*ub-0G8kpHAH56Ffm 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*ub-0G8kpHAH56Ffm 1100w, https://miro.medium.com/v2/resize:fit:1118/format:webp/0*ub-0G8kpHAH56Ffm 1118w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 559px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*ub-0G8kpHAH56Ffm 640w, https://miro.medium.com/v2/resize:fit:720/0*ub-0G8kpHAH56Ffm 720w, https://miro.medium.com/v2/resize:fit:750/0*ub-0G8kpHAH56Ffm 750w, https://miro.medium.com/v2/resize:fit:786/0*ub-0G8kpHAH56Ffm 786w, https://miro.medium.com/v2/resize:fit:828/0*ub-0G8kpHAH56Ffm 828w, https://miro.medium.com/v2/resize:fit:1100/0*ub-0G8kpHAH56Ffm 1100w, https://miro.medium.com/v2/resize:fit:1118/0*ub-0G8kpHAH56Ffm 1118w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 559px"><img alt="" class="bg ho hp c" width="559" height="559" loading="lazy" role="presentation"></picture></div></figure><h1 id="68b1" class="pj pk hs be pl pm pn po pp pq pr ps pt pu pv pw px py pz qa qb qc qd qe qf qg bj">Menggambar warna gradien seiring waktu dengan garis</h1><p id="46b0" class="pw-post-body-paragraph nv nw hs nx b ny qh oa ob oc qi oe of og qj oi oj ok qk om on oo ql oq or os gm bj">Sekarang karena kita sudah memiliki gambar jalur seiring waktu, kita ingin menerapkan gradien pada jalur tersebut. Pendekatan yang paling mudah adalah dengan menetapkan <code class="cw ou ov ow ox b">Brush.linearGradient()</code> menggunakan warna yang kita inginkan untuk setiap operasi menggambar. Namun jika kita menjalankannya, kita bisa melihat bahwa ia tidak memberikan efek persis seperti yang diinginkan, gradien diterapkan pada seluruh jalur dalam satu arah, dan tidak mengikuti arah garis.</p><figure class="oz pa pb pc pd gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb qz"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*gNhu9S9lSQqMUtg3 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*gNhu9S9lSQqMUtg3 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*gNhu9S9lSQqMUtg3 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*gNhu9S9lSQqMUtg3 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*gNhu9S9lSQqMUtg3 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*gNhu9S9lSQqMUtg3 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*gNhu9S9lSQqMUtg3 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*gNhu9S9lSQqMUtg3 640w, https://miro.medium.com/v2/resize:fit:720/0*gNhu9S9lSQqMUtg3 720w, https://miro.medium.com/v2/resize:fit:750/0*gNhu9S9lSQqMUtg3 750w, https://miro.medium.com/v2/resize:fit:786/0*gNhu9S9lSQqMUtg3 786w, https://miro.medium.com/v2/resize:fit:828/0*gNhu9S9lSQqMUtg3 828w, https://miro.medium.com/v2/resize:fit:1100/0*gNhu9S9lSQqMUtg3 1100w, https://miro.medium.com/v2/resize:fit:1400/0*gNhu9S9lSQqMUtg3 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="647" loading="lazy" role="presentation"></picture></div></div></figure><p id="5087" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Dari gambar di bawah, Anda bisa melihat, bahwa garis ini mengikuti satu arah pada seluruh bentuk, padahal kita sebenarnya menghendaki agar garis ini berubah warna saat garis digambar di tempatnya.</p><figure class="oz pa pb pc pd gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb ra"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*uLPMjiqf-CEnYkXe 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*uLPMjiqf-CEnYkXe 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*uLPMjiqf-CEnYkXe 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*uLPMjiqf-CEnYkXe 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*uLPMjiqf-CEnYkXe 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*uLPMjiqf-CEnYkXe 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*uLPMjiqf-CEnYkXe 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*uLPMjiqf-CEnYkXe 640w, https://miro.medium.com/v2/resize:fit:720/0*uLPMjiqf-CEnYkXe 720w, https://miro.medium.com/v2/resize:fit:750/0*uLPMjiqf-CEnYkXe 750w, https://miro.medium.com/v2/resize:fit:786/0*uLPMjiqf-CEnYkXe 786w, https://miro.medium.com/v2/resize:fit:828/0*uLPMjiqf-CEnYkXe 828w, https://miro.medium.com/v2/resize:fit:1100/0*uLPMjiqf-CEnYkXe 1100w, https://miro.medium.com/v2/resize:fit:1400/0*uLPMjiqf-CEnYkXe 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="649" loading="lazy" role="presentation"></picture></div></div></figure><p id="0a02" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Masih ingat <em class="rb">dengan </em>pena gel pelangi yang sangat menarik yang dulu pernah Anda miliki? Kita ingin menerapkan efek tersebut pada bentuk kami — berubah warna mengikuti arah garis yang digambar.</p><figure class="oz pa pb pc pd gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb qz"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*4aoF3B7EDo-Ab-qM 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*4aoF3B7EDo-Ab-qM 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*4aoF3B7EDo-Ab-qM 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*4aoF3B7EDo-Ab-qM 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*4aoF3B7EDo-Ab-qM 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*4aoF3B7EDo-Ab-qM 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*4aoF3B7EDo-Ab-qM 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*4aoF3B7EDo-Ab-qM 640w, https://miro.medium.com/v2/resize:fit:720/0*4aoF3B7EDo-Ab-qM 720w, https://miro.medium.com/v2/resize:fit:750/0*4aoF3B7EDo-Ab-qM 750w, https://miro.medium.com/v2/resize:fit:786/0*4aoF3B7EDo-Ab-qM 786w, https://miro.medium.com/v2/resize:fit:828/0*4aoF3B7EDo-Ab-qM 828w, https://miro.medium.com/v2/resize:fit:1100/0*4aoF3B7EDo-Ab-qM 1100w, https://miro.medium.com/v2/resize:fit:1400/0*4aoF3B7EDo-Ab-qM 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="625" loading="lazy" role="presentation"></picture></div></div></figure><p id="aca6" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Untuk melakukannya, kita bisa menggunakan <code class="cw ou ov ow ox b">Brush.sweepGradient()</code> dengan warna yang disediakan, ini memberikan efek gradien yang digambar seiring waktu.</p><pre class="oz pa pb pc pd qn ox qo bo qp ba bj"><span id="78b5" class="qq pk hs ox b bf qr qs l qt qu">val brush = Brush.sweepGradient(colors, center = Offset(0.5f, 0.5f))</span></pre><p id="db54" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Yang memberi kita hasil berikut:</p><figure class="oz pa pb pc pd gr ha hb paragraph-image"><div class="ha hb oy"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*ANsbfQGLxCGopcM6 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*ANsbfQGLxCGopcM6 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*ANsbfQGLxCGopcM6 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*ANsbfQGLxCGopcM6 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*ANsbfQGLxCGopcM6 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*ANsbfQGLxCGopcM6 1100w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*ANsbfQGLxCGopcM6 720w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 360px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*ANsbfQGLxCGopcM6 640w, https://miro.medium.com/v2/resize:fit:720/0*ANsbfQGLxCGopcM6 720w, https://miro.medium.com/v2/resize:fit:750/0*ANsbfQGLxCGopcM6 750w, https://miro.medium.com/v2/resize:fit:786/0*ANsbfQGLxCGopcM6 786w, https://miro.medium.com/v2/resize:fit:828/0*ANsbfQGLxCGopcM6 828w, https://miro.medium.com/v2/resize:fit:1100/0*ANsbfQGLxCGopcM6 1100w, https://miro.medium.com/v2/resize:fit:720/0*ANsbfQGLxCGopcM6 720w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 360px"><img alt="" class="bg ho hp c" width="360" height="360" loading="lazy" role="presentation"></picture></div></figure><p id="cdad" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Ini terlihat bagus! Namun, jika kita ingin punya sesuatu yang lebih umum yang dapat digunakan untuk menggambar jalur yang berubah-ubah, kita harus mengubah implementasinya menjadi seperti <a class="af ot" href="https://github.com/riggaroo/compose-playtime/blob/main/app/src/main/java/dev/riggaroo/composeplaytime/GradientAlongPathAnimation.kt" rel="noopener ugc nofollow" target="_blank">contoh ini</a>.</p><h1 id="1e5c" class="pj pk hs be pl pm pn po pp pq pr ps pt pu pv pw px py pz qa qb qc qd qe qf qg bj">Ringkasan</h1><p id="fc14" class="pw-post-body-paragraph nv nw hs nx b ny qh oa ob oc qi oe of og qj oi oj ok qk om on oo ql oq or os gm bj">Library <code class="cw ou ov ow ox b">graphics-shapes</code> yang baru membuka berbagai macam kemungkinan bentuk baru di Android. Contoh dalam artikel ini membuat bentuk dan menggunakannya untuk membuat status progres melingkar kustom, tetapi ada banyak kemungkinan lain yang dapat dieksplorasi dengan API baru ini untuk membuat bentuk bulat dan mentransformasikannya. Cuplikan kode selengkapnya bisa ditemukan <a class="af ot" href="https://github.com/riggaroo/compose-playtime/blob/main/app/src/main/java/dev/riggaroo/composeplaytime/ShapeLoaderDemo.kt" rel="noopener ugc nofollow" target="_blank">di sini</a>.</p><p id="ee28" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Berkreasi dan buatlah bentuk-bentuk yang menyenangkan! 🟩🟡💜</p></div></div></div><div class="ab ca rc rd re rf" role="separator"><span class="rg bx bl rh ri rj"></span><span class="rg bx bl rh ri rj"></span><span class="rg bx bl rh ri"></span></div><div class="gm gn go gp gq"><div class="ab ca"><div class="ch bg fy fz ga gb"><p id="19d3" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Cuplikan kode dalam blog ini memiliki lisensi berikut:</p><pre class="oz pa pb pc pd qn ox qo bo qp ba bj"><span id="e438" class="qq pk hs ox b bf qr qs l qt qu">// Copyright 2023 Google LLC. SPDX-License-Identifier: Apache-2.0</span></pre></div></div></div></div></section></div></div></article>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-23579546665773235382024-02-27T09:21:00.020+07:002024-03-18T09:25:09.359+07:00Jetpack Compose: Penjelasan Mode Strong Skipping<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="https://medium.com/androiddevelopers/jetpack-compose-strong-skipping-mode-explained-cbdb2aa4b900"/>
<meta name="original_url" content="https://medium.com/androiddevelopers/jetpack-compose-strong-skipping-mode-explained-cbdb2aa4b900"/>
<style type="text/css" data-fela-rehydration="554" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}
/*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black;
}/* Gray DOCTYPE selectors like WebKit */
.xml .hljs-meta {color: #c0c0c0;
}.hljs-comment,
.hljs-quote {color: #007400;
}.hljs-tag,
.hljs-attribute,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name {color: #aa0d91;
}.hljs-variable,
.hljs-template-variable {color: #3F6E74;
}.hljs-code,
.hljs-string,
.hljs-meta .hljs-string {color: #c41a16;
}.hljs-regexp,
.hljs-link {color: #0E0EFF;
}.hljs-title,
.hljs-symbol,
.hljs-bullet,
.hljs-number {color: #1c00cf;
}.hljs-section,
.hljs-meta {color: #643820;
}.hljs-title.class_,
.hljs-class .hljs-title,
.hljs-type,
.hljs-built_in,
.hljs-params {color: #5c2699;
}.hljs-attr {color: #836C28;
}.hljs-subst {color: #000;
}.hljs-formula {background-color: #eee;font-style: italic;
}.hljs-addition {background-color: #baeeba;
}.hljs-deletion {background-color: #ffc8bd;
}.hljs-selector-id,
.hljs-selector-class {color: #9b703f;
}.hljs-doctag,
.hljs-strong {font-weight: bold;
}.hljs-emphasis {font-style: italic;
}
</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{fill:rgba(0, 0, 0, 1)}.av{height:22px}.aw{margin-left:16px}.ax{border:none}.ay{border-radius:20px}.az{width:240px}.ba{background:#F9F9F9}.bb path{fill:#6B6B6B}.bd{outline:none}.be{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bf{font-size:14px}.bg{width:100%}.bh{padding:10px 20px 10px 0}.bi{background-color:transparent}.bj{color:#242424}.bk::placeholder{color:#6B6B6B}.bl{display:inline-block}.bm{margin-left:12px}.bn{margin-right:12px}.bo{border-radius:4px}.bp{margin-left:24px}.bq{height:24px}.bw{background-color:#F9F9F9}.bx{border-radius:50%}.by{height:32px}.bz{width:32px}.ca{justify-content:center}.cg{max-width:680px}.ch{min-width:0}.ci{animation:k1 1.2s ease-in-out infinite}.cj{height:100vh}.ck{margin-bottom:16px}.cl{margin-top:48px}.cm{align-items:flex-start}.cn{flex-direction:column}.co{justify-content:space-between}.cp{margin-bottom:24px}.cv{width:80%}.cw{background-color:#F2F2F2}.dc{height:44px}.dd{width:44px}.de{margin:auto 0}.df{margin-bottom:4px}.dg{height:16px}.dh{width:120px}.di{width:80px}.do{margin-bottom:8px}.dp{width:96%}.dq{width:98%}.dr{width:81%}.ds{margin-left:8px}.dt{color:#6B6B6B}.du{font-size:13px}.dv{height:100%}.eo{color:#FFFFFF}.ep{fill:#FFFFFF}.eq{background:rgba(103, 139, 160, 1)}.er{border-color:rgba(103, 139, 160, 1)}.ev:disabled{cursor:inherit !important}.ew:disabled{opacity:0.3}.ex:disabled:hover{background:rgba(103, 139, 160, 1)}.ey:disabled:hover{border-color:rgba(103, 139, 160, 1)}.ez{border-radius:99em}.fa{border-width:1px}.fb{border-style:solid}.fc{box-sizing:border-box}.fd{text-decoration:none}.fe{text-align:center}.fh{margin-right:32px}.fi{position:relative}.fj{fill:#6B6B6B}.fm{background:transparent}.fn svg{margin-left:4px}.fo svg{fill:#6B6B6B}.fq{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fr{position:absolute}.fy{margin:0 24px}.gc{background:rgba(255, 255, 255, 1)}.gd{border:1px solid #F2F2F2}.ge{box-shadow:0 1px 4px #F2F2F2}.gf{max-height:100vh}.gg{overflow-y:auto}.gh{left:0}.gi{top:calc(100vh + 100px)}.gj{bottom:calc(100vh + 100px)}.gk{width:10px}.gl{pointer-events:none}.gm{word-break:break-word}.gn{word-wrap:break-word}.go:after{display:block}.gp:after{content:""}.gq:after{clear:both}.gr{clear:both}.ha{margin-left:auto}.hb{margin-right:auto}.hc{max-width:6314px}.hi{padding-top:5px}.hj{padding-bottom:5px}.hl{cursor:zoom-in}.hm{z-index:auto}.ho{max-width:100%}.hp{height:auto}.hq{line-height:1.23}.hr{letter-spacing:0}.hs{font-style:normal}.ht{font-weight:700}.it{@media all and (max-width: 551.98px):8px}.iu{@media all and (min-width: 552px) and (max-width: 727.98px):8px}.iv{@media all and (min-width: 728px) and (max-width: 903.98px):16px}.iw{@media all and (min-width: 904px) and (max-width: 1079.98px):16px}.ix{@media all and (min-width: 1080px):16px}.jd{align-items:baseline}.je{width:48px}.jf{height:48px}.jg{border:2px solid rgba(255, 255, 255, 1)}.jh{z-index:0}.ji{box-shadow:none}.jj{border:1px solid rgba(0, 0, 0, 0.05)}.jk{margin-left:-12px}.jl{width:28px}.jm{height:28px}.jn{z-index:1}.jo{width:24px}.jp{margin-bottom:2px}.jq{flex-wrap:nowrap}.jr{font-size:16px}.js{line-height:24px}.ju{margin:0 8px}.jv{display:inline}.jw{color:rgba(103, 139, 160, 1)}.jx{fill:rgba(103, 139, 160, 1)}.ka{flex:0 0 auto}.kd{flex-wrap:wrap}.kg{white-space:pre-wrap}.kh{margin-right:4px}.ki{overflow:hidden}.kj{max-height:20px}.kk{text-overflow:ellipsis}.kl{display:-webkit-box}.km{-webkit-line-clamp:1}.kn{-webkit-box-orient:vertical}.ko{word-break:break-all}.kq{padding-left:8px}.kr{padding-right:8px}.ls> *{flex-shrink:0}.lt{overflow-x:scroll}.lu::-webkit-scrollbar{display:none}.lv{scrollbar-width:none}.lw{-ms-overflow-style:none}.lx{width:74px}.ly{flex-direction:row}.mb{-webkit-user-select:none}.mc{border:0}.md{fill:rgba(117, 117, 117, 1)}.mg{outline:0}.mh{user-select:none}.mi> svg{pointer-events:none}.mr{cursor:progress}.ms{margin-left:4px}.mt{margin-top:0px}.mu{opacity:1}.mv{padding:4px 0}.my{width:16px}.na{display:inline-flex}.nd{padding:8px 2px}.ne svg{color:#6B6B6B}.nv{line-height:1.58}.nw{letter-spacing:-0.004em}.nx{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.os{margin-bottom:-0.46em}.ot{text-decoration:underline}.ou{line-height:1.12}.ov{letter-spacing:-0.022em}.ow{font-weight:600}.pr{margin-bottom:-0.28em}.px{list-style-type:disc}.py{margin-left:30px}.pz{padding-left:0px}.qf{padding:2px 4px}.qg{font-size:75%}.qh> strong{font-family:inherit}.qi{font-family:source-code-pro, Menlo, Monaco, "Courier New", Courier, monospace}.qo{overflow-x:auto}.qp{padding:32px}.qq{border:1px solid #E5E5E5}.qr{line-height:1.4}.qs{margin-top:-0.2em}.qt{margin-bottom:-0.2em}.qu{white-space:pre}.qv{min-width:fit-content}.qw{line-height:1.18}.rk{margin-bottom:-0.31em}.rl{margin-top:32px}.rm{margin-bottom:14px}.rn{padding-top:24px}.ro{padding-bottom:10px}.rp{background-color:#000000}.rq{height:3px}.rr{width:3px}.rs{margin-right:20px}.rt{max-width:1452px}.ru{margin-top:10px}.rv{max-width:728px}.ry{max-width:1600px}.rz{margin-bottom:26px}.sa{margin-top:6px}.sb{margin-top:8px}.sc{margin-right:8px}.sd{padding:8px 16px}.se{border-radius:100px}.sf{transition:background 300ms ease}.sh{white-space:nowrap}.si{border-top:none}.so{height:52px}.sp{max-height:52px}.sq{box-sizing:content-box}.sr{position:static}.st{max-width:155px}.te{align-items:flex-end}.tf{width:76px}.tg{height:76px}.th{border:2px solid #F9F9F9}.ti{height:72px}.tj{width:72px}.tk{margin-left:-16px}.tl{width:36px}.tm{height:36px}.tn{width:auto}.to{stroke:#F2F2F2}.tp{color:#F2F2F2}.tq{fill:#F2F2F2}.tr{background:#F2F2F2}.ts{border-color:#F2F2F2}.ty{font-weight:500}.tz{font-size:24px}.ua{line-height:30px}.ub{letter-spacing:-0.016em}.uc{margin-top:16px}.ud{height:0px}.ue{border-bottom:solid 1px #E5E5E5}.uf{margin-top:72px}.ug{padding:24px 0}.uh{margin-bottom:0px}.ui{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.es:hover{background:rgba(91, 119, 136, 1)}.et:hover{border-color:rgba(91, 119, 136, 1)}.eu:hover{cursor:pointer}.fk:hover{color:#242424}.fl:hover{fill:#242424}.fp:hover svg{fill:#242424}.fs:hover{background-color:rgba(0, 0, 0, 0.1)}.jt:hover{text-decoration:underline}.jy:hover:not(:disabled){color:rgba(91, 119, 136, 1)}.jz:hover:not(:disabled){fill:rgba(91, 119, 136, 1)}.mf:hover{fill:rgba(8, 8, 8, 1)}.mw:hover{fill:#000000}.mx:hover p{color:#000000}.mz:hover{color:#000000}.nf:hover svg{color:#000000}.sg:hover{background-color:#F2F2F2}.tt:hover{background:#F2F2F2}.tu:hover{border-color:#F2F2F2}.tv:hover{cursor:wait}.tw:hover{color:#F2F2F2}.tx:hover{fill:#F2F2F2}.bc:focus-within path{fill:#242424}.hn:focus{transform:scale(1.01)}.me:focus{fill:rgba(8, 8, 8, 1)}.ng:focus svg{color:#000000}.mj:active{border-style:none}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ee{font-size:14px}.ef{line-height:20px}.el{font-size:13px}.em{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:68px}.gb{max-width:680px}.gz{max-width:1192px}.hh{margin-top:40px}.io{font-size:42px}.ip{margin-top:1em}.iq{margin-bottom:32px}.ir{line-height:52px}.is{letter-spacing:-0.011em}.jc{align-items:center}.le{border-top:solid 1px #F2F2F2}.lf{border-bottom:solid 1px #F2F2F2}.lg{margin:32px 0 0}.lh{padding:3px 8px}.lq> *{margin-right:24px}.lr> :last-child{margin-right:0}.mq{margin-top:0px}.nc{margin:0}.oo{font-size:20px}.op{margin-top:2.14em}.oq{line-height:32px}.or{letter-spacing:-0.003em}.pn{font-size:24px}.po{margin-top:1.95em}.pp{line-height:30px}.pq{letter-spacing:-0.016em}.pw{margin-top:0.94em}.qe{margin-top:1.14em}.qn{margin-top:56px}.rh{margin-top:1.72em}.ri{line-height:24px}.rj{letter-spacing:0}.sn{margin-bottom:88px}.sy{display:inline-block}.td{padding-top:72px}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.mp{margin-top:0px}.rw{margin-left:auto}.rx{text-align:center}.sx{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.mo{margin-top:0px}.sw{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.mm{margin-top:0px}.mn{margin-right:0px}.sv{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.br{width:24px}.cb{margin:0 24px}.cq{height:40px}.cx{margin-bottom:44px}.dj{margin-bottom:32px}.dw{font-size:13px}.dx{line-height:20px}.eg{padding:0px 8px 1px}.ft{margin-bottom:4px}.gs{margin:0}.gt{max-width:100%}.hd{margin-top:32px}.hu{font-size:32px}.hv{margin-top:1.01em}.hw{margin-bottom:24px}.hx{line-height:38px}.hy{letter-spacing:-0.014em}.iy{align-items:flex-start}.kb{flex-direction:column}.ke{margin-bottom:2px}.ks{margin:24px -24px 0}.kt{padding:0}.li> *{margin-right:8px}.lj> :last-child{margin-right:24px}.lz{margin-left:0px}.mk{margin-top:0px}.ml{margin-right:0px}.nh{border:1px solid #F2F2F2}.ni{border-radius:99em}.nj{padding:0px 16px 0px 12px}.nk{height:38px}.nl{align-items:center}.nn svg{margin-right:8px}.ny{font-size:18px}.nz{margin-top:1.56em}.oa{line-height:28px}.ob{letter-spacing:-0.003em}.ox{font-size:20px}.oy{margin-top:1.2em}.oz{line-height:24px}.pa{letter-spacing:0}.ps{margin-top:0.67em}.qa{margin-top:1.34em}.qj{margin-top:40px}.qx{font-size:16px}.qy{margin-top:1.23em}.sj{margin-bottom:80px}.su{display:inline-block}.sz{padding-top:48px}.nm:hover{border-color:#E5E5E5}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bu{width:64px}.ce{margin:0 64px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.ec{font-size:14px}.ed{line-height:20px}.ej{font-size:13px}.ek{padding:5px 12px}.ff{display:flex}.fw{margin-bottom:68px}.ga{max-width:680px}.gy{max-width:1192px}.hg{margin-top:40px}.ij{font-size:42px}.ik{margin-top:1em}.il{margin-bottom:32px}.im{line-height:52px}.in{letter-spacing:-0.011em}.jb{align-items:center}.la{border-top:solid 1px #F2F2F2}.lb{border-bottom:solid 1px #F2F2F2}.lc{margin:32px 0 0}.ld{padding:3px 8px}.lo> *{margin-right:24px}.lp> :last-child{margin-right:0}.nb{margin:0}.ok{font-size:20px}.ol{margin-top:2.14em}.om{line-height:32px}.on{letter-spacing:-0.003em}.pj{font-size:24px}.pk{margin-top:1.95em}.pl{line-height:30px}.pm{letter-spacing:-0.016em}.pv{margin-top:0.94em}.qd{margin-top:1.14em}.qm{margin-top:56px}.re{margin-top:1.72em}.rf{line-height:24px}.rg{letter-spacing:0}.sm{margin-bottom:88px}.tc{padding-top:72px}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bt{width:64px}.cd{margin:0 48px}.cs{height:48px}.cz{margin-bottom:52px}.dl{margin-bottom:48px}.ea{font-size:13px}.eb{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:68px}.fz{max-width:680px}.gw{margin:0}.gx{max-width:100%}.hf{margin-top:40px}.ie{font-size:42px}.if{margin-top:1em}.ig{margin-bottom:32px}.ih{line-height:52px}.ii{letter-spacing:-0.011em}.ja{align-items:center}.kw{border-top:solid 1px #F2F2F2}.kx{border-bottom:solid 1px #F2F2F2}.ky{margin:32px 0 0}.kz{padding:3px 8px}.lm> *{margin-right:24px}.ln> :last-child{margin-right:0}.og{font-size:20px}.oh{margin-top:2.14em}.oi{line-height:32px}.oj{letter-spacing:-0.003em}.pf{font-size:24px}.pg{margin-top:1.95em}.ph{line-height:30px}.pi{letter-spacing:-0.016em}.pu{margin-top:0.94em}.qc{margin-top:1.14em}.ql{margin-top:56px}.rb{margin-top:1.72em}.rc{line-height:24px}.rd{letter-spacing:0}.sl{margin-bottom:88px}.tb{padding-top:72px}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dy{font-size:13px}.dz{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:4px}.gu{margin:0}.gv{max-width:100%}.he{margin-top:32px}.hz{font-size:32px}.ia{margin-top:1.01em}.ib{margin-bottom:24px}.ic{line-height:38px}.id{letter-spacing:-0.014em}.iz{align-items:flex-start}.kc{flex-direction:column}.kf{margin-bottom:2px}.ku{margin:24px 0 0}.kv{padding:0}.lk> *{margin-right:8px}.ll> :last-child{margin-right:8px}.ma{margin-left:0px}.no{border:1px solid #F2F2F2}.np{border-radius:99em}.nq{padding:0px 16px 0px 12px}.nr{height:38px}.ns{align-items:center}.nu svg{margin-right:8px}.oc{font-size:18px}.od{margin-top:1.56em}.oe{line-height:28px}.of{letter-spacing:-0.003em}.pb{font-size:20px}.pc{margin-top:1.2em}.pd{line-height:24px}.pe{letter-spacing:0}.pt{margin-top:0.67em}.qb{margin-top:1.34em}.qk{margin-top:40px}.qz{font-size:16px}.ra{margin-top:1.23em}.sk{margin-bottom:80px}.ta{padding-top:48px}.nt:hover{border-color:#E5E5E5}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="print">.ss{display:none}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.hk{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.kp{max-height:none}</style>
</head><body>
<article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fr gh gi gj gk gl"></div><div class="gm gn go gp gq"><div class="gr"><div class="ab ca"><div class="gs gt gu gv gw gx ce gy cf gz ch bg"><figure class="hd he hf hg hh gr hi hj paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb hc"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/1*zVAXf3M-apUqIC5oNL32rg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*zVAXf3M-apUqIC5oNL32rg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*zVAXf3M-apUqIC5oNL32rg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*zVAXf3M-apUqIC5oNL32rg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*zVAXf3M-apUqIC5oNL32rg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*zVAXf3M-apUqIC5oNL32rg.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*zVAXf3M-apUqIC5oNL32rg.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/1*zVAXf3M-apUqIC5oNL32rg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*zVAXf3M-apUqIC5oNL32rg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*zVAXf3M-apUqIC5oNL32rg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*zVAXf3M-apUqIC5oNL32rg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*zVAXf3M-apUqIC5oNL32rg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*zVAXf3M-apUqIC5oNL32rg.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*zVAXf3M-apUqIC5oNL32rg.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"><img alt="" class="bg ho hp c" width="1000" height="298" loading="eager" role="presentation"></picture></div></div></figure></div></div></div><div class="ab ca"><div class="ch bg fy fz ga gb"><div><div class="it iu iv iw ix"><div class="speechify-ignore ab co"><div class="speechify-ignore bg l"><div class="iy iz ja jb jc ab"><div><div class="ab jd"><a rel="noopener follow" href="/@bentrengrove?source=post_page-----cbdb2aa4b900--------------------------------"><div><div class="bl" aria-hidden="false"><div class="l je jf bx jg jh"><div class="l fi"><img alt="Ben Trengrove" class="l fc bx dc dd cw" src="https://miro.medium.com/v2/da:true/resize:fill:88:88/0*hShtas1U5DWPDEfK" width="44" height="44" loading="lazy" data-testid="authorPhoto"><div class="ji bx l dc dd fr n jj fs"></div></div></div></div></div></a><a href="https://medium.com/androiddevelopers?source=post_page-----cbdb2aa4b900--------------------------------" rel="noopener follow"><div class="jk ab fi"><div><div class="bl" aria-hidden="false"><div class="l jl jm bx jg jn"><div class="l fi"><img alt="Developer Android" class="l fc bx bq jo cw" src="https://miro.medium.com/v2/resize:fill:48:48/1*3tLD4Ve66pbBpuawm9Fu9Q.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"><div class="ji bx l bq jo fr n jj fs"></div></div></div></div></div></div></a></div></div><div class="bm bg l"><div class="ab"><div style="flex:1"><span class="be b bf z bj"><div class="jp ab q"><div class="ab q jq"><div class="ab q"><div><div class="bl" aria-hidden="false"><p class="be b jr js bj"><a class="af ag ah ai aj ak al am an ao ap aq ar jt" data-testid="authorName" rel="noopener follow" href="/@bentrengrove?source=post_page-----cbdb2aa4b900--------------------------------">Ben Trengrove</a></p></div></div></div><span class="ju jv" aria-hidden="true"><span class="be b bf z dt">·</span></span><p class="be b jr js dt"><span><a class="jw jx ah ai aj ak al am an ao ap aq ar ew jy jz" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F84718b19bc40&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fjetpack-compose-strong-skipping-mode-explained-cbdb2aa4b900&user=Ben+Trengrove&userId=84718b19bc40&source=post_page-84718b19bc40----cbdb2aa4b900---------------------post_header-----------">Ikuti</a></span></p></div></div></span></div></div><div class="l ka"><span class="be b bf z dt"><div class="ab cm kb kc kd"><div class="ke kf ab"><div class="be b bf z dt ab kg"><span class="kh l ka">Dipublikasikan di</span><div><div class="bl" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar jt ab q" data-testid="publicationName" href="https://medium.com/androiddevelopers?source=post_page-----cbdb2aa4b900--------------------------------" rel="noopener follow"><p class="be b bf z ki kj kk kl km kn ko kp bj">Developer Android</p></a></div></div></div><div class="h k"><span class="ju jv" aria-hidden="true"><span class="be b bf z dt">·</span></span></div></div><span class="be b bf z dt"><div class="ab ae"><span data-testid="storyReadTime">Bacaan 13 menit</span><div class="kq kr l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="be b bf z dt">·</span></span></div><span data-testid="storyPublishDate"></span></div></span></div></span></div></div></div><div class="ab co ks kt ku kv kw kx ky kz la lb lc ld le lf lg lh"><div class="h k w ff fg q"><div class="lx l"><div class="ab q ly"><div class="pw-multi-vote-icon fi kh lz ma mb"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fandroiddevelopers%2Fcbdb2aa4b900&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fjetpack-compose-strong-skipping-mode-explained-cbdb2aa4b900&user=Ben+Trengrove&userId=84718b19bc40&source=-----cbdb2aa4b900---------------------clap_footer-----------"><div><div class="bl" aria-hidden="false"><div class="mc ao md me mf mg am mh mi mj mb"><svg width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.37.83L12 3.28l.63-2.45h-1.26zM13.92 3.95l1.52-2.1-1.18-.4-.34 2.5zM8.59 1.84l1.52 2.11-.34-2.5-1.18.4zM18.52 18.92a4.23 4.23 0 0 1-2.62 1.33l.41-.37c2.39-2.4 2.86-4.95 1.4-7.63l-.91-1.6-.8-1.67c-.25-.56-.19-.98.21-1.29a.7.7 0 0 1 .55-.13c.28.05.54.23.72.5l2.37 4.16c.97 1.62 1.14 4.23-1.33 6.7zm-11-.44l-4.15-4.15a.83.83 0 0 1 1.17-1.17l2.16 2.16a.37.37 0 0 0 .51-.52l-2.15-2.16L3.6 11.2a.83.83 0 0 1 1.17-1.17l3.43 3.44a.36.36 0 0 0 .52 0 .36.36 0 0 0 0-.52L5.29 9.51l-.97-.97a.83.83 0 0 1 0-1.16.84.84 0 0 1 1.17 0l.97.97 3.44 3.43a.36.36 0 0 0 .51 0 .37.37 0 0 0 0-.52L6.98 7.83a.82.82 0 0 1-.18-.9.82.82 0 0 1 .76-.51c.22 0 .43.09.58.24l5.8 5.79a.37.37 0 0 0 .58-.42L13.4 9.67c-.26-.56-.2-.98.2-1.29a.7.7 0 0 1 .55-.13c.28.05.55.23.73.5l2.2 3.86c1.3 2.38.87 4.59-1.29 6.75a4.65 4.65 0 0 1-4.19 1.37 7.73 7.73 0 0 1-4.07-2.25zm3.23-12.5l2.12 2.11c-.41.5-.47 1.17-.13 1.9l.22.46-3.52-3.53a.81.81 0 0 1-.1-.36c0-.23.09-.43.24-.59a.85.85 0 0 1 1.17 0zm7.36 1.7a1.86 1.86 0 0 0-1.23-.84 1.44 1.44 0 0 0-1.12.27c-.3.24-.5.55-.58.89-.25-.25-.57-.4-.91-.47-.28-.04-.56 0-.82.1l-2.18-2.18a1.56 1.56 0 0 0-2.2 0c-.2.2-.33.44-.4.7a1.56 1.56 0 0 0-2.63.75 1.6 1.6 0 0 0-2.23-.04 1.56 1.56 0 0 0 0 2.2c-.24.1-.5.24-.72.45a1.56 1.56 0 0 0 0 2.2l.52.52a1.56 1.56 0 0 0-.75 2.61L7 19a8.46 8.46 0 0 0 4.48 2.45 5.18 5.18 0 0 0 3.36-.5 4.89 4.89 0 0 0 4.2-1.51c2.75-2.77 2.54-5.74 1.43-7.59L18.1 7.68z"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l mk ml mm mn mo mp mq"><p class="be b du z dt"><span class="mr">--</span></p></div></div></div><div><div class="bl" aria-hidden="false"><button class="ao mc mu mv ab q fj mw mx" aria-label="responses"><svg width="24" height="24" viewBox="0 0 24 24" class="mt"><path d="M18 16.8a7.14 7.14 0 0 0 2.24-5.32c0-4.12-3.53-7.48-8.05-7.48C7.67 4 4 7.36 4 11.48c0 4.13 3.67 7.48 8.2 7.48a8.9 8.9 0 0 0 2.38-.32c.23.2.48.39.75.56 1.06.69 2.2 1.04 3.4 1.04.22 0 .4-.11.48-.29a.5.5 0 0 0-.04-.52 6.4 6.4 0 0 1-1.16-2.65v.02zm-3.12 1.06l-.06-.22-.32.1a8 8 0 0 1-2.3.33c-4.03 0-7.3-2.96-7.3-6.59S8.17 4.9 12.2 4.9c4 0 7.1 2.96 7.1 6.6 0 1.8-.6 3.47-2.02 4.72l-.2.16v.26l.02.3a6.74 6.74 0 0 0 .88 2.4 5.27 5.27 0 0 1-2.17-.86c-.28-.17-.72-.38-.94-.59l.01-.02z"></path></svg><p class="be b du z dt"><span class="pw-responses-count ms mt">6</span></p></button></div></div></div><div class="ab q li lj lk ll lm ln lo lp lq lr ls lt lu lv lw"><div class="my k j i d"></div><div class="h k"><div><div class="bl" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fcbdb2aa4b900&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fjetpack-compose-strong-skipping-mode-explained-cbdb2aa4b900&source=-----cbdb2aa4b900---------------------bookmark_footer-----------"><svg width="25" height="25" viewBox="0 0 25 25" fill="none" class="dt mz" aria-label="Add to list bookmark button"><path d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18V2.5zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .8.4l5.7-4.4 5.7 4.4a.5.5 0 0 0 .8-.4v-8.5a.5.5 0 0 0-1 0v7.48l-5.2-4a.5.5 0 0 0-.6 0l-5.2 4V7z" fill="currentColor"></path></svg></a></span></div></div></div><div class="fc na cm"><div class="l ae"><div class="ab ca"><div class="gs gu gw nb nc ho ch bg"><div class="ab"><div class="bl bg" aria-hidden="false"><div><div class="bl" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fj ah ai aj ak al nd an ao ap ew ne nf mx ng nh ni nj nk s nl nm nn no np nq nr u ns nt nu"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0zm9-10a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.38 10.42l-4.6 3.06a.5.5 0 0 1-.78-.41V8.93c0-.4.45-.63.78-.41l4.6 3.06c.3.2.3.64 0 .84z" fill="currentColor"></path></svg><div class="j i d"><p class="be b bf z dt">Dengarkan</p></div></button></div></div></div></div></div></div></div></div><div class="bl" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bl" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fj ah ai aj ak al nd an ao ap ew ne nf mx ng nh ni nj nk s nl nm nn no np nq nr u ns nt nu"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.22 4.93a.42.42 0 0 1-.12.13h.01a.45.45 0 0 1-.29.08.52.52 0 0 1-.3-.13L12.5 3v7.07a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5V3.02l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.8a.42.42 0 0 1 .07.5zm-.1.14zm.88 2h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.14c.1.1.15.22.15.35a.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9V8.96c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1z" fill="currentColor"></path></svg><div class="j i d"><p class="be b bf z dt">Bagikan</p></div></button></div></div></div></div></div></div></div></div></div><p id="2084" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Mode strong skipping adalah fitur eksperimental dalam Jetpack Compose Compiler 1.5.4+ yang saat ini sedang diuji. Ini adalah bagian dari tugas kami agar kode yang Anda tulis secara natural menjadi lebih berkinerja. Kami tidak ingin mengharuskan Anda menjadi ahli dalam internal Compose untuk menulis kode Compose yang bagus! Mode strong skipping mengubah aturan tentang composable yang bisa melewati rekomposisi dan akan sangat mengurangi rekomposisi dengan mengizinkan composable dengan parameter yang tidak stabil untuk dilewati, dan selain itu, secara otomatis mengingat lambda dengan tangkapan yang tidak stabil.</p><p id="12f2" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Perubahan ini mungkin terlihat kecil, tetapi perubahan perilakunya cukup besar, begitu juga dengan biaya yang harus ditanggung jika salah. Kami meluncurkannya dengan hati-hati karena sulit untuk membalikkan perubahan seperti ini. Melakukan rekomposisi ketika tidak diperlukan memiliki biaya performa tetapi aplikasi Anda akan tetap berfungsi dengan baik untuk pengguna, tidak melakukan rekomposisi ketika seharusnya dilakukan dapat menyebabkan bug pada aplikasi Anda yang tentunya ingin kita hindari!</p><p id="ab2a" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Saat ini kami telah mengaktifkan fitur tersebut dalam kode kami di library Compose 1.7.0-alfa, dan kami sedang mengevaluasi kapan harus mengaktifkannya secara default di kode Anda, dengan sasaran rilis stabil Compose 1.7. Silakan coba dan laporkan masalah yang Anda temukan di <a class="af ot" href="http://goo.gle/compose-feedback" rel="noopener ugc nofollow" target="_blank">goo.gle/compose-feedback</a>.</p><h1 id="ad99" class="ou ov hs be ow ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr bj">TL;DR</h1><p id="e68c" class="pw-post-body-paragraph nv nw hs nx b ny ps oa ob oc pt oe of og pu oi oj ok pv om on oo pw oq or os gm bj">Aktifkan mode strong skipping di compiler Compose untuk mendapatkan perilaku berikut:</p><ul class=""><li id="3124" class="nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os px py pz bj">Composable dengan parameter yang tidak stabil bisa dilewati.</li><li id="745c" class="nv nw hs nx b ny qa oa ob oc qb oe of og qc oi oj ok qd om on oo qe oq or os px py pz bj">Parameter yang tidak stabil dibandingkan ekualitasnya melalui ekualitas instance (<code class="cw qf qg qh qi b">===</code>)</li><li id="2064" class="nv nw hs nx b ny qa oa ob oc qb oe of og qc oi oj ok qd om on oo qe oq or os px py pz bj">Parameter yang stabil terus dibandingkan ekualitasnya dengan <code class="cw qf qg qh qi b">Object.equals()</code></li><li id="b060" class="nv nw hs nx b ny qa oa ob oc qb oe of og qc oi oj ok qd om on oo qe oq or os px py pz bj">Semua lambda dalam fungsi composable secara otomatis diingat. Ini berarti Anda tidak perlu lagi membungkus lambda dengan remember untuk memastikan composable yang menggunakan lambda, dilewati.</li></ul><h1 id="70ee" class="ou ov hs be ow ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr bj">Bagaimana cara mengaktifkan strong skipping?</h1><p id="5928" class="pw-post-body-paragraph nv nw hs nx b ny ps oa ob oc pt oe of og pu oi oj ok pv om on oo pw oq or os gm bj">Atur flag compiler <code class="cw qf qg qh qi b">experimentalStrongSkipping</code> ke <code class="cw qf qg qh qi b">true</code> dengan basis per modul. Ini bisa dilakukan di Gradle dengan cuplikan berikut dalam file gradle level root Anda untuk mengaktifkannya bagi semua modul:</p><pre class="qj qk ql qm qn qo qi qp bo qq ba bj"><span id="0e08" class="qr ov hs qi b bf qs qt l qu qv">tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile>() {<br> compilerOptions.freeCompilerArgs.addAll(<br> "-P",<br> "plugin:androidx.compose.compiler.plugins.kotlin:experimentalStrongSkipping=true",<br> )<br>}</span></pre><h1 id="29a6" class="ou ov hs be ow ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr bj">Perubahan mendalam</h1><h2 id="214f" class="qw ov hs be ow qx qy dx pa qz ra dz pe og rb rc rd ok re rf rg oo rh ri rj rk bj">Kemampuan Melewati Composable</h2><p id="4262" class="pw-post-body-paragraph nv nw hs nx b ny ps oa ob oc pt oe of og pu oi oj ok pv om on oo pw oq or os gm bj">Mode strong skipping melonggarkan beberapa aturan stabilitas yang saat ini diterapkan oleh compiler Compose saat melewati composable. Secara default, compiler Compose akan menandai fungsi composable sebagai dapat dilewati jika fungsi tersebut hanya memiliki nilai stabil yang disediakan sebagai argumen. Mode strong skipping mengubah hal ini.</p><p id="ff93" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Dengan strong skipping diaktifkan, semua fungsi composable <a class="af ot" href="https://developer.android.com/jetpack/compose/performance/stability#functions" rel="noopener ugc nofollow" target="_blank">yang dapat dimulai ulang</a> akan dapat dilewati, tanpa menghiraukan apakah fungsi tersebut memiliki parameter yang tidak stabil atau tidak. Fungsi composable yang tidak dapat dimulai ulang tetap tidak dapat dilewati.</p><p id="56bb" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Untuk menentukan apakah akan melewati composable selama rekomposisi, parameter yang tidak stabil akan dibandingkan dengan nilai sebelumnya menggunakan instance ekualitas (<code class="cw qf qg qh qi b">===</code>). Parameter stabil terus dibandingkan dengan nilai sebelumnya menggunakan ekualitas objek — <code class="cw qf qg qh qi b">Object.equals()</code>.</p><p id="ca48" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj"><strong class="nx ht">Catatan:</strong> Parameter lambda tidak ditangani secara berbeda, tetapi ada sedikit perbedaan pada cara kerjanya dalam praktik, yang akan dijelaskan pada bagian berikutnya.</p><p id="bc88" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Jika semua parameter memenuhi persyaratan ini, composable akan dilewati selama rekomposisi.</p><p id="d172" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Salah satu contoh composable yang akan direkomposisi sebelumnya, tetapi dengan mengaktifkan mode strong skipping akan dilewati adalah:</p><pre class="qj qk ql qm qn qo qi qp bo qq ba bj"><span id="6a2b" class="qr ov hs qi b bf qs qt l qu qv">@Composable<br>fun ArticleList(<br>articles: List<Article>, // List = Unstable, Article = Stable<br>modifier: Modifier = Modifier // Stable<br>) {<br> // …<br>}<br><br>@Composable<br>fun CollectionScreen(viewModel: CollectionViewModel = viewModel()) {<br> var favorite by remember { mutableStateOf(false) }<br> Column {<br> FavoriteButton(isFavorite = favorite, onToggle = { favorite = !favorite })<br> ArticleList(viewModel.articles)<br> }<br>}</span></pre><p id="560d" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Tanpa mengaktifkan mode strong skipping, ketika <code class="cw qf qg qh qi b">FavoriteButton</code> diaktifkan, daftar artikel juga akan direkomposisi karena memiliki tipe parameter yang tidak stabil (<code class="cw qf qg qh qi b">List</code>). Dengan strong skipping diaktifkan, <code class="cw qf qg qh qi b">ArticleList</code> akan dilewati karena instance daftar (<code class="cw qf qg qh qi b">articles</code>) tidak berubah.</p></div></div></div><div class="ab ca rl rm rn ro" role="separator"><span class="rp bx bl rq rr rs"></span><span class="rp bx bl rq rr rs"></span><span class="rp bx bl rq rr"></span></div><div class="gm gn go gp gq"><div class="ab ca"><div class="ch bg fy fz ga gb"><h2 id="409f" class="qw ov hs be ow qx qy dx pa qz ra dz pe og rb rc rd ok re rf rg oo rh ri rj rk bj">Memoisasi lambda</h2><p id="d521" class="pw-post-body-paragraph nv nw hs nx b ny ps oa ob oc pt oe of og pu oi oj ok pv om on oo pw oq or os gm bj">Mode strong skipping juga memungkinkan lebih banyak memoisasi lambda di dalam fungsi composable. Sekarang secara default (atau di masa depan dengan strong skipping dinonaktifkan), compiler Compose hanya akan membungkus lambda dalam fungsi composable yang hanya menangkap nilai stabil dalam fungsi <code class="cw qf qg qh qi b">remember</code>, selain itu lambda composable juga akan selalu diingat.</p><p id="2761" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj"><strong class="nx ht">Catatan:</strong> Lambda tanpa tangkapan juga dimemoisasi, tetapi ini dilakukan oleh compiler Kotlin dan bukan oleh plugin compiler Compose dengan membuat instance statis lambda.</p><p id="a450" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Dengan strong skipping diaktifkan, <strong class="nx ht">lambda dengan tangkapan yang tidak stabil juga akan dimemoisasi</strong>. Ini berarti semua lambda yang ditulis dalam fungsi composable sekarang secara otomatis diingat.</p><p id="13c4" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Secara efektif ini membungkus lambda Anda dengan panggilan remember, serta dikunci dengan tangkapan lambda secara otomatis, mis.</p><pre class="qj qk ql qm qn qo qi qp bo qq ba bj"><span id="5aae" class="qr ov hs qi b bf qs qt l qu qv">@Composable<br>fun MyComposable(unstableObject: Unstable, stableObject: Stable) {<br> val lambda = {<br> use(unstableObject)<br> use(stableObject)<br> }<br>}</span></pre><p id="f0a3" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">kira-kira menjadi seperti ini dengan strong skipping diaktifkan:</p><pre class="qj qk ql qm qn qo qi qp bo qq ba bj"><span id="8aae" class="qr ov hs qi b bf qs qt l qu qv">@Composable<br>fun MyComposable(unstableObject: Unstable, stableObject: Stable) {<br> val lambda = remember(unstableObject, stableObject) {<br> {<br> use(unstableObject)<br> use(stableObject)<br> }<br> }<br>}</span></pre><p id="98d3" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Kunci mengikuti aturan perbandingan yang sama dengan fungsi composable, kunci tidak stabil dibandingkan menggunakan ekualitas instance dan kunci stabil dibandingkan menggunakan ekualitas objek.</p><p id="2c13" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj"><strong class="nx ht">Catatan:</strong> Ini sedikit berbeda dengan panggilan remember normal di mana semua kunci dibandingkan menggunakan ekualitas objek.</p><p id="eeab" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Melakukan pengoptimalan ini sangat meningkatkan jumlah composable yang akan dilewati selama rekomposisi, karena tanpa memoisasi ini, composable apa pun yang mengambil parameter lambda kemungkinan besar akan memiliki lambda baru yang dialokasikan selama rekomposisi dan karenanya tidak akan memiliki parameter yang sama dengan komposisi terakhir.</p><h1 id="05dc" class="ou ov hs be ow ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr bj">Mengapa strong skipping bersifat eksperimental?</h1><p id="e68e" class="pw-post-body-paragraph nv nw hs nx b ny ps oa ob oc pt oe of og pu oi oj ok pv om on oo pw oq or os gm bj">Mengubah composable mana yang bisa dilewati merupakan perubahan perilaku yang sangat besar untuk Compose, mungkin perubahan perilaku terbesar yang pernah kami luncurkan. Kami ingin berhati-hati dalam mengaktifkannya untuk memastikan tidak ada kasus berisiko yang akan membuat upgrade ke versi Compose baru menjadi terlalu sulit. Saat ini kami telah mengaktifkannya untuk kode kami di Compose 1.7 alfa dan akan memutuskan apakah tetap mengaktifkannya sebelum 1.7 menjadi beta.</p><p id="a564" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Kami kemudian akan memutuskan apakah akan mengaktifkannya secara default di compiler untuk semua orang. Perlu diperhatikan bahwa "eksperimental" mirip dengan API lainnya. Kami rasa kodenya tidak mengandung bug, kami hanya tidak yakin bahwa kodenya sudah dalam bentuk final dan mungkin saja akan berubah di masa depan.</p><p id="02e8" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Jika Anda mencobanya dan menemukan masalah dengan strong skipping, harap laporkan bug di <a class="af ot" href="http://goo.gle/compose-feedback" rel="noopener ugc nofollow" target="_blank">goo.gle/compose-feedback</a>.</p><h1 id="3810" class="ou ov hs be ow ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr bj">Apakah saya masih harus menandai tipe sebagai stabil?</h1><p id="7e06" class="pw-post-body-paragraph nv nw hs nx b ny ps oa ob oc pt oe of og pu oi oj ok pv om on oo pw oq or os gm bj">Kebutuhan untuk melakukan hal ini akan menurun secara drastis, tetapi masih diperlukan dalam beberapa kasus. Kasus utama untuk hal ini adalah ketika Anda menginginkan objek Anda dibandingkan dengan ekualitas objek, bukan dengan ekualitas instance.</p><p id="8c8a" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Kami juga telah menambahkan <a class="af ot" href="https://developer.android.com/jetpack/compose/performance/stability/fix#configuration-file" rel="noopener ugc nofollow" target="_blank">file konfigurasi stabilitas</a> agar kasus ini lebih mudah dikelola. Ini memungkinkan Anda menandai class apa pun sebagai stabil. Anda bisa menggunakan file konfigurasi dengan atau tanpa mengaktifkan strong skipping, keduanya merupakan fitur yang terpisah tetapi saling melengkapi yang dirancang untuk membantu mengatasi masalah ini.</p><p id="6282" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">File konfigurasi sangat bagus untuk class eksternal, seperti <code class="cw qf qg qh qi b">java.time.Instant</code> yang tidak dapat dianotasi dengan <code class="cw qf qg qh qi b">@Stable</code>. Anda juga bisa menandai seluruh paket sebagai stabil jika itu membantu kasus penggunaan Anda, mis. <code class="cw qf qg qh qi b">java.time.*</code>.</p><p id="2881" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Peringatan, konfigurasi ini tidak membuat class stabil dengan sendirinya. Sebaliknya, dengan menggunakan konfigurasi ini, Anda bersedia mengikuti <a class="af ot" href="https://developer.android.com/jetpack/compose/performance/stability#types" rel="noopener ugc nofollow" target="_blank">kontrak stabilitas</a> dengan compiler. Salah mengonfigurasi class bisa menyebabkan rekomposisi rusak.</p><h1 id="f83f" class="ou ov hs be ow ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr bj">Apakah seluruh aplikasi saya akan rusak ketika saya mengaktifkannya?</h1><p id="e643" class="pw-post-body-paragraph nv nw hs nx b ny ps oa ob oc pt oe of og pu oi oj ok pv om on oo pw oq or os gm bj">Seharusnya tidak! Namun, mungkin Anda akan menemukan sejumlah kegagalan uji. Ini akan berdasar pada jenis pengujian yang Anda tulis di code base, tetapi jika Anda melakukan pengujian yang secara khusus menghitung jumlah komposisi dari sebuah composable, maka jumlah tersebut kemungkinan besar akan berubah, dan pengujian akan gagal sampai Anda memperbarui jumlah tersebut.</p><h1 id="7c50" class="ou ov hs be ow ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr bj">Ini diaktifkan di Compose 1.7. 0-alfa, apakah ini berarti jika saya menggunakan 1.7 maka saya menggunakan Strong Skipping?</h1><p id="5069" class="pw-post-body-paragraph nv nw hs nx b ny ps oa ob oc pt oe of og pu oi oj ok pv om on oo pw oq or os gm bj">Tidak. Strong skipping adalah flag compiler compose, sehingga perlu diaktifkan untuk setiap modul yang digunakan. Jika Anda menggunakan Compose 1.7 tetapi tidak mengaktifkan strong skipping, composable kami akan melewati aturan strong skipping dan composable Anda akan melewati seperti biasanya. Hal yang sama berlaku untuk modul, Anda bisa memilih untuk mengaktifkan strong skipping modul satu per satu.</p><h1 id="2a9f" class="ou ov hs be ow ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr bj">Apakah ada contoh yang berfungsi dengan baik sebelumnya, tetapi menjadi tidak berfungsi dengan strong skipping?</h1><p id="5368" class="pw-post-body-paragraph nv nw hs nx b ny ps oa ob oc pt oe of og pu oi oj ok pv om on oo pw oq or os gm bj">Contoh composable yang sebelumnya dapat berfungsi, tetapi tidak berfungsi saat strong skipping diaktifkan, pada umumnya karena composable tersebut berfungsi akibat efek samping yang tidak disengaja. Ini kemungkinan besar akan terjadi dengan objek nested yang dapat diubah. Cuplikan kode berikut akan berfungsi dengan strong skipping dinonaktifkan, tetapi dengan strong skipping diaktifkan, composable daftar akan dilewati.</p><pre class="qj qk ql qm qn qo qi qp bo qq ba bj"><span id="48e3" class="qr ov hs qi b bf qs qt l qu qv">@Composable<br>fun MyToggle(enabled: Boolean) {}<br>@Composable<br>fun MyList(list: List<String>) {}<br><br>@Composable<br>fun MyScreen() {<br> var list by remember { mutableStateOf(mutableListOf("Foo")) }<br> var toggle by remember { mutableStateOf(false) }<br> MyToggle(toggle)<br> MyList(list)<br><br> Button(<br> onClick = {<br> list.add("Bar")<br> toggle = !toggle<br> }<br> ) { Text("Toggle") }<br>}</span></pre><p id="4e1d" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Composable ini hanya berfungsi sebelumnya karena <code class="cw qf qg qh qi b">toggle</code> memicu rekomposisi, dan perubahan pada daftar yang dapat diubah hanya terjadi akibat efek samping. <a class="af ot" href="https://dev.to/zachklipp" rel="noopener ugc nofollow" target="_blank">Zach Klippenstein</a> menerbitkan postingan yang bagus tentang masalah ini jika Anda tertarik: <a class="af ot" href="https://dev.to/zachklipp/two-mutables-dont-make-a-right-2kgp" rel="noopener ugc nofollow" target="_blank">Dua status yang dapat diubah tidak akan menjadikannya benar</a>.</p><h1 id="28bf" class="ou ov hs be ow ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr bj">Mengintip di balik layar pengembangan Compose</h1><p id="edce" class="pw-post-body-paragraph nv nw hs nx b ny ps oa ob oc pt oe of og pu oi oj ok pv om on oo pw oq or os gm bj">Anda bisa berhenti membaca di sini jika Anda hanya ingin mempelajari tentang mode strong skipping, tetapi saya pikir sebagian orang mungkin ingin mengetahui lebih dalam tentang apa yang berubah dan mengapa. Ini adalah pemikiran yang kami lalui ketika mengembangkan fitur Compose baru.</p><p id="b57e" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Mode strong skipping mengatasi dua titik masalah utama dalam pengembangan Compose:</p><ul class=""><li id="bb1b" class="nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os px py pz bj">Composable tidak dilewati saat developer berpikir bahwa mereka harus melakukannya karena input yang tidak stabil</li><li id="a0dd" class="nv nw hs nx b ny qa oa ob oc qb oe of og qc oi oj ok qd om on oo qe oq or os px py pz bj">"Lambda tidak stabil" didiagnosis sebagai penyebab rekomposisi</li></ul><h2 id="2f48" class="qw ov hs be ow qx qy dx pa qz ra dz pe og rb rc rd ok re rf rg oo rh ri rj rk bj">Kemampuan melewati</h2><p id="196b" class="pw-post-body-paragraph nv nw hs nx b ny ps oa ob oc pt oe of og pu oi oj ok pv om on oo pw oq or os gm bj">Ketika Compose pertama kali dikembangkan, kami sebenarnya mengira bahwa orang-orang akan kesulitan menghadapi masalah yang berbeda dari yang kita lihat sekarang. Kami pikir tim akan terus bertanya "mengapa ini tidak dikomposisi ulang?!”. Ternyata yang terjadi justru sebaliknya. Kami mengambil pendekatan konservatif untuk rekomposisi, kami percaya bahwa dalam kasus ketika kami tidak tahu jika input ke composable telah berubah (karena mereka tidak stabil dan mutasinya tidak terlacak oleh runtime compose), kami tidak boleh melewatinya. Ya, mungkin performanya sedikit menurun, tetapi ini berarti aplikasi akan menunjukkan keadaan yang benar ketika ada hal lain yang menyebabkan rekomposisi (seperti yang ditunjukkan pada contoh di atas), yang merupakan faktor terpenting bagi pengguna akhir.</p><p id="4dbc" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Setelah Compose dirilis, kami melihat hal yang berlawanan dengan hipotesis awal kami, developer berjuang untuk memahami mengapa composable dapat dikomposisi ulang. Masalah ini diperkuat oleh layout inspector yang menunjukkan jumlah rekomposisi, ini adalah alat termudah yang tersedia untuk mendiagnosis masalah performa di aplikasi Anda, dan jangan salah paham, beberapa di antaranya sangat nyata dan perlu diperbaiki, tetapi menggunakan jumlah rekomposisi sebagai alat untuk pengoptimalan performa memiliki kelemahan yang sangat besar. <strong class="nx ht">Rekomposisi hanyalah salah satu bagian dari performa aplikasi Anda dan jumlah rekomposisi hanyalah ukuran tidak langsung dari kontribusi rekomposisi terhadap hal itu.</strong> Anda bisa memiliki satu composable yang sangat mahal yang menghabiskan banyak waktu untuk dikomposisi ulang, dan Anda bisa memiliki composable yang sangat murah untuk dikomposisi ulang yang memerlukan rekomposisi tambahan di sana-sini yang sebenarnya tidak sepadan karena membuat kode Anda menjadi lebih rumit dihindari. Di sini, jika Anda hanya menggunakan layout inspector, Anda mungkin menghabiskan banyak waktu untuk mengoptimalkan composable yang murah, dan sama sekali tidak menyadari bahwa composable yang hanya dikomposisi ulang sekali, sebenarnya adalah yang mahal. Inilah mengapa kami selalu mengatakan, khawatirkan tentang rekomposisi hanya ketika Anda memiliki masalah performa yang terukur. Anda harus menggunakan alat seperti <a class="af ot" href="https://developer.android.com/jetpack/compose/performance/tooling#tracing" rel="noopener ugc nofollow" target="_blank">pelacakan komposisi</a> dan <a class="af ot" href="https://developer.android.com/topic/performance/benchmarking/macrobenchmark-overview" rel="noopener ugc nofollow" target="_blank">macrobenchmark</a> untuk mengukur dan menguantifikasi waktu atau tenggat waktu bingkai yang terlewat jika perubahan kode Anda benar-benar membuat perbedaan pada performa akhir aplikasi Anda.</p><p id="96b1" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Namun demikian, kami setuju bahwa situasi saat ini dapat diperbaiki. Developer terjebak dalam situasi yang berkinerja buruk ketika menulis kode Kotlin/Compose idiomatis. Idealnya, Anda tidak perlu memikirkan semua ini, kecuali pada kasus-kasus berisiko, jadi kami coba mencari cara untuk mengatasinya.</p><p id="79fa" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Permintaan fitur yang sering kami lihat adalah mengapa kami tidak menampilkan stabilitas di Android Studio? Itu akan membuat proses debug jauh lebih mudah daripada menggali laporan compiler. Kami sebenarnya sudah mengimplementasikan prototipe awal fitur ini.</p><figure class="qj qk ql qm qn gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb rt"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*0vGqHENl7wCLSmvt 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*0vGqHENl7wCLSmvt 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*0vGqHENl7wCLSmvt 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*0vGqHENl7wCLSmvt 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*0vGqHENl7wCLSmvt 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*0vGqHENl7wCLSmvt 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*0vGqHENl7wCLSmvt 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*0vGqHENl7wCLSmvt 640w, https://miro.medium.com/v2/resize:fit:720/0*0vGqHENl7wCLSmvt 720w, https://miro.medium.com/v2/resize:fit:750/0*0vGqHENl7wCLSmvt 750w, https://miro.medium.com/v2/resize:fit:786/0*0vGqHENl7wCLSmvt 786w, https://miro.medium.com/v2/resize:fit:828/0*0vGqHENl7wCLSmvt 828w, https://miro.medium.com/v2/resize:fit:1100/0*0vGqHENl7wCLSmvt 1100w, https://miro.medium.com/v2/resize:fit:1400/0*0vGqHENl7wCLSmvt 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="388" loading="lazy" role="presentation"></picture></div></div><figcaption class="ru fe rv ha hb rw rx be b bf z dt">Implementasi prototipe petunjuk stabilitas inline di Studio</figcaption></figure><p id="e6ff" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Kami memutuskan untuk tidak meluncurkan fitur ini karena ada dua masalah utama dengan solusi ini:</p><ul class=""><li id="2e14" class="nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os px py pz bj">Ini memberikan keunggulan besar pada fitur compiler yang kami tujukan sebagai kasus berisiko lanjutan. Ini akan berdampak pada developer yang berpikir bahwa mereka harus membuat setiap parameter stabil.</li><li id="2454" class="nv nw hs nx b ny qa oa ob oc qb oe of og qc oi oj ok qd om on oo qe oq or os px py pz bj">Ini tidak memperbaiki masalah dengan "lambda yang tidak stabil" karena lambda tersebut tetap akan terlihat stabil. (Dibahas secara mendetail di bawah).</li></ul><p id="2bba" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Kami telah menambahkan informasi ini ke debugger. Android Studio Hedgehog dan yang lebih baru akan menampilkan status rekomposisi composable ketika Anda menempatkan titik henti sementara di dalamnya, termasuk informasi tentang stabilitas.</p><figure class="qj qk ql qm qn gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb ry"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*weqdf-JmdsHHE_ff 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*weqdf-JmdsHHE_ff 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*weqdf-JmdsHHE_ff 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*weqdf-JmdsHHE_ff 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*weqdf-JmdsHHE_ff 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*weqdf-JmdsHHE_ff 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*weqdf-JmdsHHE_ff 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*weqdf-JmdsHHE_ff 640w, https://miro.medium.com/v2/resize:fit:720/0*weqdf-JmdsHHE_ff 720w, https://miro.medium.com/v2/resize:fit:750/0*weqdf-JmdsHHE_ff 750w, https://miro.medium.com/v2/resize:fit:786/0*weqdf-JmdsHHE_ff 786w, https://miro.medium.com/v2/resize:fit:828/0*weqdf-JmdsHHE_ff 828w, https://miro.medium.com/v2/resize:fit:1100/0*weqdf-JmdsHHE_ff 1100w, https://miro.medium.com/v2/resize:fit:1400/0*weqdf-JmdsHHE_ff 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="55" loading="lazy" role="presentation"></picture></div></div><figcaption class="ru fe rv ha hb rw rx be b bf z dt">Status rekomposisi di debugger Android Studio Hedgehog</figcaption></figure><p id="c5f0" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Namun, secara umum, mengapa Anda harus tahu tentang hal ini? Dapatkah kita mencapai tujuan awal kita, yaitu stabilitas yang hanya diperlukan pada kasus berisiko? Dari sinilah kami sampai pada gagasan awal mengenai mode strong skipping, yang memungkinkan composable dengan parameter yang tidak stabil untuk melewatinya juga. Ini menggeser pendekatan default kami untuk rekomposisi dari yang semula konservatif, tidak akan melewati saat kami tidak seharusnya mendekatinya, menjadi pendekatan yang lebih seimbang, yang menurut kami lebih sesuai dengan apa yang secara intuitif Anda harapkan. Yang terpenting, kami tidak mengurangi pengalaman developer yang belum belajar tentang konsep stabilitas, kode mereka kemungkinan besar akan menjadi lebih cepat setelah kami mengaktifkannya secara default.</p><h2 id="e261" class="qw ov hs be ow qx qy dx pa qz ra dz pe og rb rc rd ok re rf rg oo rh ri rj rk bj">“Lambda yang tidak stabil”</h2><p id="0728" class="pw-post-body-paragraph nv nw hs nx b ny ps oa ob oc pt oe of og pu oi oj ok pv om on oo pw oq or os gm bj">Kita masih menghadapi masalah lambda. Mungkin salah satu kesalahpahaman terbesar tentang Compose adalah konsep "lambda yang tidak stabil" yang menyebabkan rekomposisi. Semua lambda dalam Compose bersifat stabil, jadi konsep lambda yang tidak stabil adalah konsep yang agak keliru. Jika ingin memperbaiki masalah kemampuan melewati, kita juga harus mengatasi titik masalahnya. Untuk memahaminya, kita harus mundur selangkah dan melihat compiler lebih mendalam.</p><p id="d7b8" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Compiler Compose menentukan jika sebuah composable bisa dilewati pada waktu kompilasi dengan melihat stabilitas parameter composable. Ada beberapa composable yang tidak mungkin diketahui hingga runtime karena beberapa hal seperti tipe umum, tetapi sebagian besar composable bisa ditentukan dapat dilewati atau tidak pada waktu kompilasi. Mari kita lihat contoh composable yang menyertakan lambda:</p><pre class="qj qk ql qm qn qo qi qp bo qq ba bj"><span id="645e" class="qr ov hs qi b bf qs qt l qu qv">@Composable<br>fun NumberComposable(<br> current: Long,<br> onValueChanged: (Long) -> Unit<br>) { }</span></pre><p id="0cd4" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Composable ini akan diproses oleh compiler dan ditandai sebagai dapat dilewati, termasuk lambda yang ditandai sebagai stabil. Laporan compiler compose akan menunjukkan hal berikut:</p><pre class="qj qk ql qm qn qo qi qp bo qq ba bj"><span id="3902" class="qr ov hs qi b bf qs qt l qu qv">restartable skippable scheme("[androidx.compose.ui.UiComposable]") fun NumberComposable(<br> stable current: Long<br> stable onValueChanged: Function1<Long, Unit><br>)</span></pre><p id="a072" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Dalam contoh ini, bayangkan composable kemudian gunakan sebagai berikut:</p><pre class="qj qk ql qm qn qo qi qp bo qq ba bj"><span id="038f" class="qr ov hs qi b bf qs qt l qu qv">@Composable<br>fun MyScreen(viewModel: MyViewModel) {<br> val number by viewModel.number.collectAsState()<br> var text by remember { mutableStateOf("") }<br> NumberComposable(<br> current = number,<br> onValueChange = { viewModel.numberChanged(it) }<br> )<br> TextField(text, onValueChanged = { text = it })<br>}</span></pre><p id="e226" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Developer composable ini berharap bahwa ketika pengguna mengetik di kolom teks, <code class="cw qf qg qh qi b">NumberComposable</code> akan melewati rekomposisi karena inputnya tidak berubah dan laporan compiler juga mengonfirmasi bahwa ia dapat dilewati. Tetapi saat runtime, mereka melihat layout inspector yang menunjukkan bahwa hal itu tidak terjadi. Contoh ini sudah cukup jelas, pada kenyataannya kami melihat developer mengalami masalah ini dan melakukan rekomposisi seluruh layar mereka dan menyebabkan jank pada perangkat berspesifikasi rendah saat pengguna mengetik, dan kami setuju bahwa ini sangat buruk!</p><p id="4dfc" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Namun, apa yang sebenarnya terjadi di sini? Apakah laporan compiler berbohong, atau layout inspector yang salah? Tidak, perilaku ini muncul karena <code class="cw qf qg qh qi b">MyViewModel</code> tidak stabil dan ini menyebabkan sedikit perbedaan yang akan saya jelaskan di bawah.</p><p id="092f" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Yang perlu diperhatikan adalah bahwa lambda hanyalah objek di balik layar. Ketika composable <code class="cw qf qg qh qi b">MyScreen</code> dikomposisi ulang, lambda <code class="cw qf qg qh qi b">onValueChanged</code> direalokasi. Ketika <code class="cw qf qg qh qi b">NumberComposable</code> dievaluasi untuk dilewati, runtime compose melihat setiap argumen yang diberikan ke dalam composable dan membandingkannya dengan nilai sebelumnya. Runtime melihat bahwa <code class="cw qf qg qh qi b">current</code> adalah nilai yang sama tetapi <code class="cw qf qg qh qi b">onValueChanged</code> telah berubah karena sudah direalokasi dan lambda hanya menggunakan ekualitas referensi untuk pengecekan ekualitasnya (alamat objek tidak sama), oleh karena itu composable akan dikomposisi ulang karena inputnya berubah. Rekomposisi disebabkan oleh objek lambda yang berubah, bukan lambda yang tidak stabil.</p><p id="2bef" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Jadi, mengapa tidak semua composable dengan lambda tidak pernah dilewati? Titik masalah ini adalah studi kasus mengapa kami selalu ragu-ragu menambahkan “keajaiban compiler”. Semakin banyak yang dilakukan compiler untuk Anda, semakin sulit memahami mengapa kode Anda tidak berfungsi sebagaimana mestinya. Dalam kasus ini, dahulu ketika kami mengembangkan skipping, kami menyadari bahwa ia tidak akan terlalu efektif jika semua composable dengan lambda tidak bisa melewati, itu akan menghasilkan sejumlah besar composable yang tidak pernah melewati! Jadi, kami mengimplementasikan pengingat otomatis lambda, selama mereka hanya memiliki tangkapan stabil. Jika composable di atas ditulis tanpa menggunakan <code class="cw qf qg qh qi b">viewModel</code> yang tidak stabil pada lambda, composable akan berperilaku seperti yang diharapkan developer. Sesuatu seperti ini</p><pre class="qj qk ql qm qn qo qi qp bo qq ba bj"><span id="855c" class="qr ov hs qi b bf qs qt l qu qv">@Composable<br>fun NumberComposable(<br> current = number,<br> onValueChange = { stableViewModel.numberChanged(it) }<br>) { }</span></pre><p id="0cf6" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Compiler akan mentransformasi kode menjadi seperti ini:</p><pre class="qj qk ql qm qn qo qi qp bo qq ba bj"><span id="7d2e" class="qr ov hs qi b bf qs qt l qu qv">@Composable<br>fun NumberComposable(<br>current = number,<br>onValueChange = remember(stableViewModel) { { stableViewModel.numberChanged(it) } }<br>{ }</span></pre><p id="68f3" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Karena lambda tidak lagi direalokasi pada rekomposisi, berkat panggilan <code class="cw qf qg qh qi b">remember</code>, input ke <code class="cw qf qg qh qi b">NumberComposable</code> akan sama sehingga composable akan dilewati.</p><p id="fbea" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Mode strong skipping juga memperluas pengingat otomatis ini ke lambda dengan tangkapan tidak stabil, yang berarti<strong class="nx ht"> setiap lambda dalam fungsi composable sekarang dimemoisasi</strong>. Ini adalah kompensasi dalam memori untuk performa runtime yang lebih baik, sesuai harapan kami. Namun kami tidak dapat memastikannya, inilah alasan lain mengapa kami memutuskan untuk meluncurkannya secara perlahan. Sejauh ini terlihat bagus, kode kami di AndroidX tidak menunjukkan adanya regresi performa saat strong skipping diaktifkan dan area-area yang belum disesuaikan stabilitasnya secara manual menunjukkan peningkatan performa yang cukup baik saat rekomposisi, dengan salah satu contohnya adalah waktu yang dibutuhkan untuk merekomposisi <code class="cw qf qg qh qi b">RadioGroup</code> menjadi separuhnya.</p><h1 id="9285" class="ou ov hs be ow ox oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr bj">Melewati hingga akhir</h1><p id="d928" class="pw-post-body-paragraph nv nw hs nx b ny ps oa ob oc pt oe of og pu oi oj ok pv om on oo pw oq or os gm bj">Kesimpulannya, aktifkan mode strong skipping untuk mendapatkan perilaku berikut:</p><ul class=""><li id="d04f" class="nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os px py pz bj">Composable dengan parameter yang tidak stabil bisa dilewati.</li><li id="696d" class="nv nw hs nx b ny qa oa ob oc qb oe of og qc oi oj ok qd om on oo qe oq or os px py pz bj">Parameter yang tidak stabil dibandingkan ekualitasnya melalui ekualitas instance (<code class="cw qf qg qh qi b">===</code>)</li><li id="4bce" class="nv nw hs nx b ny qa oa ob oc qb oe of og qc oi oj ok qd om on oo qe oq or os px py pz bj">Semua lambda dalam fungsi composable secara otomatis diingat. Ini berarti Anda tidak perlu lagi membungkus lambda dengan remember untuk memastikan composable yang menggunakan lambda, dilewati.</li></ul><p id="b88e" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Semoga postingan ini memberikan Anda beberapa insight tentang bagaimana kami mengembangkan perubahan perilaku seperti ini. Kami ingin kode yang Anda tulis secara natural memiliki performa yang baik, tanpa Anda harus menjadi ahli di internal Compose. Namun, seperti yang sudah dijelaskan sebelumnya, kami harus berhati-hati dengan perubahan seperti ini dan bergerak secara perlahan.</p><p id="9b74" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Anda bisa mencoba strong skipping sekarang juga dengan flag compiler, atau menunggu kami mengaktifkannya secara default. Jika Anda mencobanya dan menemukan masalah dengan strong skipping, harap laporkan bug di <a class="af ot" href="http://goo.gle/compose-feedback" rel="noopener ugc nofollow" target="_blank">goo.gle/compose-feedback</a>.</p></div></div></div><div class="ab ca rl rm rn ro" role="separator"><span class="rp bx bl rq rr rs"></span><span class="rp bx bl rq rr rs"></span><span class="rp bx bl rq rr"></span></div><div class="gm gn go gp gq"><div class="ab ca"><div class="ch bg fy fz ga gb"><p id="0a98" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Cuplikan kode dalam blog ini memiliki lisensi berikut:</p><pre class="qj qk ql qm qn qo qi qp bo qq ba bj"><span id="a17f" class="qr ov hs qi b bf qs qt l qu qv">// Copyright 2024 Google LLC. SPDX-License-Identifier: Apache-2.0</span></pre></div></div></div></div></section></div></div></article>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-37685390646404532072024-02-26T09:36:00.003+07:002024-03-18T09:39:54.104+07:00Antarmuka hybrid Wear OS: Meningkatkan daya dan performa<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="https://android-developers.googleblog.com/2024/02/wear-os-hybrid-interface-boosting-power-and-performance.html"/>
<meta name="original_url" content="https://android-developers.googleblog.com/2024/02/wear-os-hybrid-interface-boosting-power-and-performance.html"/>
<style id="page-skin-1" type="text/css"><!--
body {
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
-webkit-font-smoothing: antialiased;
color: #202124
}
h1 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px
}
h2 {
font-size: 30px;
line-height: 40px
}
h2,
h3 {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500
}
h3 {
font-size: 24px;
line-height: 32px
}
h4 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 26px
}
h5 {
font-size: 16px;
line-height: 24px
}
h5,
h6 {
font-family: Roboto, sans-serif;
font-weight: 600
}
h6 {
font-size: 14px;
line-height: 22px
}
.display {
font-family: Roboto, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 67.2px
}
.hidden-text {
height: 1px;
overflow: hidden;
pointer-events: none;
position: absolute;
top: -10px;
width: 1px
}
img,
video {
border: 0;
height: auto;
max-width: 100%
}
body {
position: relative;
min-height: 100vh
}
body.no-scroll {
overflow: hidden
}
a {
color: #4184f3;
text-decoration: none
}
a:focus,
a:focus-visible {
outline-offset: -2px
}
.content-wrap {
padding-top: 200px;
max-width: 800px;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:915px) {
.content-wrap {
padding-top: 100px
}
}
.full-width {
width: 100%
}
.icon-link {
height: 42px;
width: 132px;
border-radius: 80px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: baseline;
-ms-flex-pack: center;
justify-content: baseline;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
background: transparent;
border: none;
color: black !important
}
.icon-link:hover {
background-color: hsla(213, 7%, 76%, .2)
}
.icon-link:focus {
background-color: hsla(213, 7%, 76%, .26)
}
.icon-link:active {
background-color: hsla(213, 7%, 76%, .32)
}
.adb-container {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto;
max-width: 1420px
}
@media only screen and (max-width:767px) {
.adb-container {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--large {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto
}
@media only screen and (max-width:767px) {
.adb-container--large {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--flex-horizontal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.section,
body {
margin: 0
}
.adb-card {
position: relative;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
margin: 40px 0;
padding: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: box-shadow .2s linear, opacity .2s linear;
transition: box-shadow .2s linear, opacity .2s linear, -webkit-box-shadow .2s linear
}
.divider {
border: none;
height: 1px;
color: #DADCE0;
background-color: #DADCE0;
margin: 0 20px;
}
.adb-card:first-child {
background-color: #d7effe;
border: none;
padding: 32px 24px 32px;
margin: 40px 20px 60px;
}
@media only screen and (max-width:850px) {
.adb-card {
max-height: unset;
padding: 0 20px
}
.adb-card:first-child {
margin-bottom: 40px;
}
}
@media only screen and (max-width:600px) {
.adb-card:first-child {
margin: 0 -20px 40px;
}
.adb-card {
border-radius: 0;
padding: 0;
}
.divider {
margin: 0;
}
.content-wrap {
padding-top: 54px;
}
}
.adb-card:focus-within,
.adb-card:hover {
-webkit-box-shadow: 0 0 36px rgba(0, 0, 0, .1);
box-shadow: 0 0 36px rgba(0, 0, 0, .1);
cursor: pointer
}
.adb-card__href {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.adb-card__image-wrapper {
overflow: hidden;
position: relative;
width: auto;
-webkit-flex-basis: 40%;
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.adb-card__content {
padding: 24px 0 0
}
.adb-card__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 600;
margin-bottom: 12px
}
.adb-card__info {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 24px
}
.adb-card__description {
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin-bottom: 48px
}
.adb-card:hover .adb-content__image-wrapper img,
.adb-card__href:focus~.adb-content__image-wrapper img {
-webkit-transform: scale(1.03);
transform: scale(1.03);
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease
}
.devsite-footer {
padding: 0 24px;
border-top: 1px solid #bdc1c6
}
.devsite-footer li {
display: block
}
.devsite-footer li a {
text-decoration: none;
font-size: 14px;
line-height: 16px;
color: #202124
}
.devsite-footer li a:focus,
.devsite-footer li a:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-linkboxes-list {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
padding: 24px 0;
border-bottom: 1px solid #bdc1c6
}
@media only screen and (max-width:767px) {
.devsite-footer-linkboxes-list {
grid-template-columns: 1fr;
padding-left: 0
}
}
.devsite-footer-linkbox {
display: block
}
.devsite-footer-linkbox-heading {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin: 0 0 4px
}
.devsite-footer-linkbox ul {
padding-left: 0
}
.devsite-footer-sites-list {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-utility nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 24px 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0
}
}
.devsite-footer-utility-button {
justify-self: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 20px;
margin-left: auto;
padding-left: 16px
}
.devsite-footer-utility-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 8px 0 0
}
.devsite-footer-utility-item:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.devsite-footer-utility-item:not(:first-child):before {
content: "|";
margin: 0 8px 0 0
}
}
.devsite-footer-sites {
border-bottom: 1px solid #bdc1c6;
padding: 24px 0 23px
}
.devsite-footer-sites-logo {
height: 32px;
margin-top: 5px;
width: 185px
}
.devsite-footer-sites-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0
}
.devsite-footer-sites-item {
margin: 0 0 0 40px
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-item {
margin: 0
}
}
.devsite-footer-sites-link {
display: block;
padding: 8px 0;
color: #202124
}
.devsite-footer-sites-link:focus,
.devsite-footer-sites-link:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-utility-link:focus {
text-decoration: underline
}
.devsite-footer-utility .devsite-footer-utility-button {
line-height: 20px;
font: 400 14px/16px Roboto, sans-serif
}
.devsite-footer-utility .devsite-footer-utility-button:before {
content: "";
margin: 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility .devsite-footer-utility-button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
margin: 18px 0 12px
}
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link {
border: 0;
background: #1a73e8;
color: #fff;
line-height: 36px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0 0 16px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px 0;
box-shadow: 0 1px 2px 0;
display: inline-block;
font: 500 14px/36px Roboto, sans-serif;
height: 36px;
letter-spacing: 0;
min-width: 36px;
padding: 0 24px;
text-align: center;
-webkit-transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s, -webkit-box-shadow .2s;
vertical-align: middle;
white-space: nowrap
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link:hover {
background: #1765cc
}
.adb-page__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px;
text-align: center;
color: #202124
}
.adb-detail hr {
border: 1px solid #dadce0;
margin: 40px 0
}
.adb-detail__title {
font-size: 40px;
font-weight: 600;
line-height: 48px
}
.adb-detail__info {
font-weight: 400;
font-size: 16px;
line-height: 24px
}
.adb-detail__content {
min-height: 200px
}
.icon-sidebar {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
top: 0;
left: -300px;
max-width: 220px;
gap: 8px
}
.icon-sidebar .share-text {
font-weight: 500;
margin-left: 4px
}
@media only screen and (max-width:1440px) {
.icon-sidebar {
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
left: 0;
margin-top: -20px;
margin-bottom: 40px;
}
.icon-sidebar .share-text {
display: none;
}
}
.copy-tooltip {
display: none;
position: fixed;
bottom: 16px;
left: 10px;
z-index: 100;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.copy-tooltip .copy-tooltiptext {
width: 200px;
background-color: #073042;
color: #fff;
text-align: center;
border-radius: 80px;
padding: 8px 16px;
}
.header__overlay {
height: 100vh;
left: 0;
position: fixed;
width: 100vw;
border: none;
background-color: rgba(0, 0, 0, .4);
-webkit-animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
opacity: 0;
top: 0;
z-index: -1;
display: none
}
.header__overlay.show {
display: block;
opacity: 1;
z-index: 800;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out
}
.social-icons__links {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
.social-icons__links path {
fill: #80868b
}
.social-icons__container-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin-right: 14px
}
@media only screen and (max-width:1000px) {
.social-icons__container-header {
display: none
}
}
.adb-blog-logo:focus,
.adb-blog-logo:hover {
opacity: .7;
text-decoration: none
}
.adb-blog-logo__image {
height: 32px;
margin-left: 0;
margin-top: 6px
}
@media only screen and (min-width:840px) {
.adb-blog-logo__image {
margin-left: 24px
}
}
.header {
position: fixed;
background: #fff;
z-index: 700;
top: 0;
width: 100%;
overflow: hidden;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
height: auto
}
.header .top-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 24px;
height: 50px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #e6e6e6
}
@media only screen and (max-width:839px) {
.header .top-row {
padding: 0 16px
}
}
.header .top-row__left,
.header .top-row__right {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 100%
}
.header .nav-row,
.header .top-row__left,
.header .top-row__right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.header .nav-row {
background: #fff;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.header .nav-items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 50px;
position: relative;
background-color: #fff
}
@media only screen and (max-width:839px) {
.header .nav-items {
display: none
}
}
.header .nav-items tab {
position: relative
}
.header .nav-items tab.active .header__nav-item:after,
.header .nav-items tab:hover .header__nav-item:after {
background: #1a73e8
}
.header .nav-items tab.active .header__nav-item,
.header .nav-items tab:focus-within a {
color: #202124
}
@media only screen and (max-width:839px) {
.header .header__cta,
.header .nav-items {
display: none
}
}
.header__search-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 6px 0 6px 24px;
overflow: hidden;
position: relative;
margin-right: 36px;
border-radius: 4px
}
@media only screen and (max-width:767px) {
.header__search-container:not(.mobile) {
display: none
}
}
.header__search-container.mobile {
margin: 0 0 20px
}
.header__search-container.mobile #searchform,
.header__search-container.mobile .searchbox {
width: 100%
}
.header__search-container .searchbox {
border-radius: 2px
}
.header__search-container .searchbox input {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
font-weight: 500;
color: #80868b;
border: 0;
margin: 0;
height: 20px;
outline: 0;
padding: 8px 8px 8px 40px;
width: 100%;
-webkit-transition: background .2s;
transition: background .2s
}
.header__search-container .searchbox input::-webkit-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input:-ms-input-placeholder,
.header__search-container .searchbox input::-ms-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input::placeholder {
color: #80868b
}
.header__search-container .searchbox input:hover {
background: #e8eaed
}
.header__search-container .material-icons {
color: #80868b;
left: 8px;
position: absolute;
top: 6px;
-webkit-transition: color .2s;
transition: color .2s
}
.header__cta {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #1a73e8 !important;
text-decoration: none
}
.header__cta.mobile {
padding: 18px 0
}
.header__cta:hover .cta-icon {
margin-left: 0;
margin-right: 12px
}
.header__cta .cta-icon {
-webkit-transition: margin-right .2s linear, margin-left .2s linear;
transition: margin-right .2s linear, margin-left .2s linear;
margin-left: 4px;
margin-right: 8px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.header__cta .cta-icon path {
fill: #1a73e8
}
.header__nav-item {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #80868b;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 18px;
height: 100%;
text-transform: none;
text-decoration: none
}
.header__nav-item:hover {
color: #202124
}
.header__nav-item.mobile {
font-weight: 500;
padding: 0
}
.header__nav-item:after {
bottom: 0;
border-radius: 3px 3px 0 0;
content: "";
display: block;
height: 3px;
left: 50%;
min-width: 20px;
position: absolute;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(100% - 24px)
}
.header__hamburger {
border: 0;
background: none;
outline: none;
padding: 0;
margin: 1px 8px 0 -4px;
padding: 8px;
color: rgba(0, 0, 0, .65);
cursor: pointer
}
@media only screen and (min-width:840px) {
.header__hamburger {
display: none
}
}
.header__side-menu {
background-color: #fff;
bottom: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
z-index: 900
}
.header__side-menu.is-open {
-webkit-transform: translateX(0);
transform: translateX(0);
width: 80%
}
.header__side-menu.is-open,
.header__side-menu__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%
}
.header__side-menu__content {
padding: 18px 16px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.header__side-menu__content .spacer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.header__side-menu__title {
font-family: Roboto, sans-serif;
font-size: 20px;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px
}
.header__side-menu__items {
list-style: none
}
.header__side-menu__items li {
padding: 12px 0
}
.header__side-menu__items tab {
position: relative
}
.header__side-menu__items tab.active .header__nav-item,
.header__side-menu__items tab:focus-within a {
color: #202124
}
.header__side-menu__bottom {
border-top: 1px solid #e6e6e6
}
.header__side-menu__logo-container {
background: #fff;
height: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 4px 16px;
border-bottom: 1px solid #e6e6e6
}
#nav .widget {
margin: 0
}
.featured__wrapper {
width: 100%;
border: 0;
background-color: #e8f0fe;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 80px 0
}
@media only screen and (max-width:767px) {
.featured__wrapper {
padding: 0
}
}
.featured__inner {
max-width: 1080px;
width: calc(100% - 24px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
padding: 48px
}
@media only screen and (min-width:768px) {
.featured__inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
padding: 12px 80px
}
}
.featured__href {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.featured__image {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
max-width: 100%;
}
.featured__content {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-top: 24px;
width: 100%
}
.featured__title {
font-size: 32px;
line-height: 44.8px;
font-weight: 500;
font-family: Android Euclid, Roboto, sans-serif;
margin-bottom: 15px
}
.featured__info {
font-family: Roboto Mono, monospace;
font-weight: 400;
font-size: 12px;
line-height: 160%;
margin-bottom: 24px
}
.featured__description {
margin-bottom: 48px
}
.preview.featured__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f1f3f4;
padding: 64px 0 120px
}
.preview.featured__wrapper h1 {
margin: 0 0 64px
}
.blog-label-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px
}
.blog-label-container .blog-label {
text-decoration: none;
z-index: 3
}
.blog-label-container .blog-label span {
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
background-color: #F1F3F4;
border-radius: 100px;
padding: 4px 16px;
color: #3c4043
}
.adb-card:first-child .blog-label span {
background-color: #fff;
}
.blog-label-container .blog-label span:focus,
.blog-label-container .blog-label span:hover {
background-color: #D7EFFE
}
.adb-card:first-child .blog-label span:focus,
.adb-card:first-child .blog-label span:hover {
background-color: #F1F3F4
}
.blog-label-container .blog-label span:focus-visible {
outline-offset: 0
}
#pagination-container {
display: none
}
.pagination {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.pagination .page-button {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: black;
background-color: #3DDC84;
padding: 16px 24px;
border-radius: 80px;
text-decoration: none
}
.pagination .page-button:focus,
.pagination .page-button:hover {
background-color: #3DDC8460;
}
.pagination .page-button.disabled {
color: #80868b;
background-color: #f1f3f4
}
--></style>
<style id="template-skin-1" type="text/css"><!--
--></style>
<style>
/** Blogger default styles **/
html, .Label h2, #sidebar .rss a, .BlogArchive h2, .FollowByEmail h2.title, .widget .post h2 {
font-family: Roboto, sans-serif;
}
.plusfollowers h2.title, .post h2.title, .widget h2.title {
font-family: Roboto, sans-serif;
}
pre, .post-content pre.prettyprint {
background-color: #f7f7f7;
border: 1px solid #ddd;
margin: 0 0 1em 0;
padding: 1em;
overflow: auto;
}
pre, code {
font-size: 9pt;
line-height: 125%;
font-family: monospace;
}
pre, code {
color: #060;
font: 13px/18px Consolas, 'Liberation Mono', Menlo, Monaco, Courier, monospace;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
/* Styles for https://github.com/google/code-prettify */
.com { color: #060; }
.kwd { color: #008; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.fb-custom img, .twitter-custom img, .gplus-share img, .email-custom img {
cursor: pointer;
opacity: 0.54;
}
.twitter-custom, .gplus-share, .fb-custom {
margin-right: 12px;
}
/** Blogger custom theme **/
.adb-header,
.searchBox input {
box-sizing: border-box;
}
.popout-nav {
background-color: white;
width: 280px;
height: 100%;
position: fixed;
z-index: 6;
left: -280px;
transition: left 0.2s;
}
.popout-search {
background-color: white;
width: 280px;
position: fixed;
z-index: 6;
right: -280px;
transition: right 0.2s;
top: 0;
}
.popout-search .widget {
margin: 0;
}
.popout-search #BlogSearch2_form .popout-options {
padding-right: 24px;
width: calc(100% - 48px);
}
.dropdown-nav {
display: none;
background-color: white;
width: 104px;
position: fixed;
padding: 4px 0px 3px 0px;
z-index: 4;
left: 352px;
top: 176px;
transition: top 0.2s;
box-shadow: 0 0px 2px 0 rgba(60,64,67,.3), 0 0px 6px 2px rgba(60,64,67,.15), inset 0 0px 6px -4px rgba(154,160,166,.5);
}
.dropdown-options {
align-items: center;
display: flex;
flex-wrap: wrap;
width: 94px;
height: 48px;
padding-left: 10px;
}
.dropdown-options:hover {
background-color: #f7f9fa;
}
.dropdown-options span {
color: #80868b;
}
.popout-options {
padding-right: 8px;
padding-left: 24px;
padding-top: 16px;
padding-bottom: 15px;
display: inline-block;
width: calc(100% - 32px);
border-top: 1px solid #ddd;
font-size: 13px;
font-weight: 700;
color: #80868b !important;
}
.popout-options:last-of-type {
border-bottom: 1px solid #ddd;
}
.popout-options:first-of-type {
border-top: 0;
}
#close-popout {
padding: 12px 12px 11px 20px;
}
#close-search-popout {
padding: 12px 20px 11px 12px;
text-align: right;
}
.popout-search-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
transition: opacity 0.2s;
}
.popout-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
z-index: 5;
transition: opacity 0.2s;
}
html {
background-color: #fff;
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
width: 100%;
position: absolute;
padding: 0;
/* This ensures that the scroll bar is always present, which is needed */
/* because render happens after page load; otherwise the header */
/* would 'bounce' in-between states. */
min-height: 150%;
}
h2 {
font-size: 130%;
}
h1, h2, h3, h4, h5 {
line-height: 1.5em;
margin-bottom: 1em;
}
html, h4, h5, h6 {
font-size: 14px;
}
a, a:visited {
color: #039be5;
text-decoration: none;
}
pre code {
display: block;
}
.cols-wrapper {
margin-top: 56px;
}
.header-outer, .cols-wrapper {
padding: 0 60px;
}
html, .header-inner a {
color: #212121;
color: rgba(0, 0, 0, .87);
}
/** Archive widget. **/
.BlogArchive {
font-size: 13px;
font-weight: normal;
}
.BlogArchive .widget- {
display: none;
}
.BlogArchive h2, .Label h2 {
color: #039be5;
text-decoration: none;
}
/* Specificity needed here to override widget CSS defaults. */
/* Months */
.Label {
font-size: 13px;
font-weight: normal;
}
.sidebar-icon {
display: inline-block;
width: auto;
vertical-align: middle;
height: 24px;
margin-right: 24px;
}
.sidebar-social-links {
align-items: center;
}
.sidebar-social-links .android-logo,
.android-logo {
height: 48px;
}
.sidebar-social-links a:last-child img {
margin-right: 0;
}
.Label .widget- {
display: none;
}
.searchBox input {
border: 1px solid #eee;
color: #212121;
color: rgba(0, 0, 0, .87);
font-size: 14px;
padding: 8px 8px 8px 40px;
width: 100%;
font-family: Android Euclid, Roboto, sans-serif;
background: url('https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png') 8px center no-repeat;
}
.searchBox ::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .54);
}
.section {
margin: 0;
padding: 0;
}
#sidebar-top {
border: 1px solid #eee;
}
#sidebar-top > div {
margin: 16px 0;
}
/*main post*/
.post {
margin-bottom: 30px;
}
#main .post .title {
margin: 0;
}
#main .post .title a {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: normal;
font-size: 24px;
}
.message, #main .post .post-header {
margin: 0;
padding: 0;
}
#main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption {
color: #444;
font-weight: 500;
}
#main .post .post-header .published {
font-size: 11px;
font-weight: bold;
}
.post-header .publishdate {
font-size: 16px;
font-weight: normal;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#main .post .post-footer {
font-size: 12px;
padding-bottom: 21px;
}
.label-footer {
margin-bottom: 12px;
margin-top: 12px;
}
#main .post .post-header .published {
margin-bottom: 16px;
}
.post .post- {
color: #545454;
color: rgba(0, 0, 0, .67);
font-size: 16px;
margin: 16px 0 36px 0;
line-height: 24px;
word-wrap: break-word;
}
.post-summary {
display: none;
}
/* Override all post images/videos to left align. */
@media (max-width: 712px) {
.post- img {
max-width: 100%;
height: auto;
width: auto;
}
}
.post- .tr-caption-container img {
margin-bottom: 12px;
}
.post- iframe, .post- embed {
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
}
.post- .carousel-container {
margin-bottom: 48px;
}
#main .post- b {
font-weight: 500;
}
/* These are the main paragraph spacing tweaks. */
#main .post- br {
: '';
display: block;
padding: 4px;
}
.post-content .space {
display: block;
height: 8px;
}
.post-content iframe+.space, .post-content iframe+br {
padding: 0 !important;
}
#main .post .jump-link {
margin-bottom: 10px;
}
.post-content img, .post-content iframe {
margin: 30px 0 20px 0;
}
.post-content > img:first-child, .post-content > iframe:first-child {
margin-top: 0;
}
.col-right .section {
padding: 0 16px;
}
#aside {
background: #fff;
border: 1px solid #eee;
border-top: 0;
z-index: 2;
}
#aside .widget {
margin: 0;
}
#aside .widget h2, #ArchiveList .toggle+a.post-count-link {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: 400 !important;
margin: 0;
}
#ArchiveList .toggle {
float: right;
}
#ArchiveList .toggle .material-icons {
padding-top: 4px;
}
#sidebar-top,
#sidebar {
background: #fff;
}
#sidebar .tab {
cursor: pointer;
}
#sidebar .tab .arrow {
display: inline-block;
float: right;
}
#sidebar .tab .icon {
display: inline-block;
vertical-align: top;
height: 24px;
width: 24px;
margin-right: 13px;
margin-left: -1px;
margin-top: 1px;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget-content > :first-child {
padding-top: 8px;
}
#sidebar .active .tab .arrow {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#sidebar .arrow {
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget h2 {
font-size: 14px;
line-height: 24px;
display: inline-block;
}
#sidebar .widget .BlogArchive {
padding-bottom: 8px;
}
#sidebar .widget {
border-bottom: 1px solid #eee;
box-shadow: 0px 1px 0 white;
margin-bottom: 0;
padding: 14px 0;
min-height: 20px;
}
#sidebar .widget:last-child {
border-bottom: none;
box-shadow: none;
margin-bottom: 0;
}
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style: none;
padding: 0;
}
#sidebar ul li a {
line-height: 32px;
}
#sidebar ul ul ul li a {
line-height: 24px;
}
#sidebar .archive {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC');
height: 24px;
line-height: 24px;
padding-left: 30px;
}
#sidebar .labels {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC');
height: 20px;
line-height: 20px;
padding-left: 30px;
}
#sidebar .rss a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII=');
}
#sidebar .subscription a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC');
}
#sidebar-bottom {
background: #f5f5f5;
border-top: 1px solid #eee;
}
#sidebar-bottom .widget {
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
text-align: center;
}
#sidebar-bottom > div:last-child {
border-bottom: 0;
}
#sidebar-bottom .text {
line-height: 20px;
}
/* Home, forward, and backward pagination. */
.blog-pager {
padding-top: 10px;
margin-top: 15px;
text-align: right !important;
}
#blog-pager {
padding: 40px 0 0;
}
#blog-pager a {
display: inline-block;
}
.blog-pager i.disabled {
opacity: 0.2 !important;
}
.blog-pager i {
color: black;
margin-left: 16px;
opacity: 0.54;
}
.blog-pager i:hover, .blog-pager i:active {
opacity: 0.87;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
.gplus-profile {
background-color: #fafafa;
border: 1px solid #eee;
overflow: hidden;
width: 212px;
}
.gplus-profile-inner {
margin-left: -1px;
margin-top: -1px;
}
/* Sidebar follow buttons. */
.followgooglewrapper {
padding: 12px 0 0 0;
}
.loading {
visibility: hidden;
}
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 40px !important;
}
/* ADB */
.adb-hero-area {
min-height: 104px;
background-color: #073042;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
z-index: 5;
position: fixed;
width: 100%;
}
.adb-hero-logo {
height: 80px;
position: absolute;
top: 12px;
left: 16px;
}
.adb-footer-btm {
display: flex;
margin: 0 24px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 40px;
}
.subscribe-btn {
color: black;
background-color: #3DDC84;
border-radius: 100px;
font: 500 16px/24px Android Euclid,Roboto,sans-serif;
padding: 12px 24px;
border: 0;
}
.adb-footer-info {
align-items: center;
display: flex;
padding: 0;
margin: 9px 0 0 -8px;
font-size: 13px;
}
.footer-list {
list-style: none;
padding: 0 8px;
}
.subscribe-info {
list-style: none;
padding: 0 8px 0 0;
font-size: 13px;
color: black;
}
.footer-newsletter {
display: flex;
align-items: center;
}
.adb-header-inner {
display: flex;
align-items: center;
}
.adb-header {
background-color: white;
color: #fff;
height: 48px;
left: 0;
overflow: hidden;
padding: 36px 24px;
right: 0;
top: 104px;
z-index: 4;
display: flex;
align-items: center;
position: fixed;
border-bottom: solid 1px #DADCE0;
}
.adb-shadow {
margin-top: 48px;
height: 1px;
width: 100%;
position: fixed;
background: white;
z-index: 2;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
}
.adb-logo-box {
display:inline;
}
.adb-burger-box {
display: none;
margin: 0 16px 0 0;
}
.adb-search-box {
display: none;
margin: 0 0 0 16px;
}
.adb-htag-box {
display: flex;
align-items: center;
}
.adb-header-tags {
padding: 0 24px 0 0;
}
.adb-header-tags ~ .atb-header-tags {
padding: 0 24px;
}
.adb-header-tags a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #5F6368;
}
.adb-header-tags a:hover {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #073042;
}
.more-dropdown {
display: none;
}
.dropdown-icon {
transition: all 0.3s;
}
.adb-header-logo {
display: inline-block;
vertical-align: -11px;
width: 134px;
height: 32px;
}
.adb-header-title {
color: #fff;
display: inline-block;
font-size: 20px;
font-weight: normal;
}
.adb-header-links {
border-left: 1px solid rgba(0, 0, 0, .1);
display: block;
left: 250px;
list-style: none;
margin: 0;
padding: 12px 0 12px 18px;
position: absolute;
top: 0;
}
.adb-header-link-item {
display: inline-block;
}
.adb-header-link, .adb-header-link:visited {
color: #fff;
display: inline-block;
font-weight: 500;
opacity: .7;
padding: 12px 9px;
text-transform: uppercase;
vertical-align: 2px;
}
.adb-header-link:hover, .adb-header-link:focus {
color: #fff;
opacity: 1;
}
.adb-header-console, .adb-header-console:visited {
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
color: #fff;
float: right;
font-size: 14px;
font-weight: 500;
line-height: 28px;
padding: 4px 10px;
position: relative;
text-transform: uppercase;
transition: box-shadow .2s;
z-index: 60;
}
.adb-header-console:hover {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
color: #fff;
}
.adb-header-console:focus {
background-color: rgba(63, 81, 181, .1);
color: #fff;
}
.adb-header-console-image {
vertical-align: -5px;
}
.adb-hero {
background-color: #dcedc8;
margin-top: 64px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
color: #414141;
display: inline-block;
font-weight: 500;
margin: 25px 25px 0;
}
.adb-hero-inner {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAc4AAADZCAMAAACenCAVAAAAvVBMVEXc7cjY68PT6bvR57fQ57bY6sPZ68TU6bvR6LfP5rTQ57XR57jW6r7b7cfa7MbS6LnS6Lrb7cbQ6Lfb7MbX6r/Z68PY6sLV6b7U6b3U6r3T6LnX68Da7MXP57Tb7Mfc7cfW6b/P57XS57nY68LY68HU6L3W6r/W6b7T6brX6sDV6rzQ57fa7MTV6b3T6Lra68TR57bX68HW6sDS57jU6bzO5rTP5rXZ7MXR6LbZ68XX6sHT6LvV6bzS6LjZ7MILrTuqAAAIyklEQVR4AezXhXEkUQwE0B6+Xhg8MzND/smZ4UsLBSb9Kr0UhI1vl6RZnqUFlnBl9Y+j8WQK4+qGr9oOi7iKr0YFTOt6vhsPmM81/FDAspafUszl/vNTXsOuFYZWMYfrRgyswa51hjLM4TYYGsOuTQpbgNO2dyjAroxCvgunpZT2YFZDaQKnlFRg1z6lgxpOOqS0CbtqKutwwhGVYxh2QqWGC/WUMlhWH1BK4QKnVFZh2hmVEh/cXk7pHLbt5pQafHCT6Jr9gsoR3riayiXMyyhd4Y27jDDHJVQu8MJdU7lBBBpKoz08c7eU8gERuKNyhiduhcopolBRqeGAMaV7xKE7eGzvThQTVZooAJdC1AM2qGg0BhdCrpnciVE0i9dZ3v+t/n2ZMBtJGpsu6nuCrNJddar4/gAnMmuP/GPk3JFwrL2QKw3FD26GyGmQNXbIGVHNKdfmYraDl/ZUcxO8NNtIW888bafDC7tP5R2qtQfL724N5AypxjbIGdseWHMV1VfP+rrnZvbTerMEhHb2Py4eA7KX9AwD5LSppi5ZdPTHEhv6cd5mSjZaeMW/Dc66TEpkO+Q0qIbUE5es6ke85FMN/YGXZs9yQLdXYGVASGJDBaMZXsQouzau/fzfitNsKvpUL1O8dFBksb+Q80C1coaco7RtLeYzO9tHCV7qUY0ckXPGribSoNpQB3Z1MbWtby1hiZwWw35CRjUReRx7Sg5ecqgmJiyHOxrIWVEtPDPNY/TMx4bmczq5T3jpSRELm1NWodVmlGY364tP4ZXvdw5u8jjDf8yQJJ7j+2HYfBh3d+l5HFB5RmyzjM3yh8iDUbb6M9y7j3idgxM+3BzTuPzyXmdOTARJaUc8tUmX7ekB7+aF7dV1a0G6pIx3CkxKmBBUreMfvS0086aTnZZf6kfG53mlN/0UnS2bW5Socz9OA737eM6JkZWu4uUiXfVcnIT34eZM6Yq9hcRKR0OpL7i9cHBi/udjrCOUuiFWsnc2/oKsfYAhXvM2lsj4S/7b2/L9y4cODDu0j8HbBzqSPvutOksqpDH+gorw1+dvHLcaEzv3r4+0BdmnBJXi9bL+G6qaEbFz98rF4sEwnKGKrrrxK3sOuzoMlM9i+ql47KPC/HX8inTxljgKUHBYI1g6qDx/HBct76XETfHF4v3hHpZwVgH9APc0TfFSyTwLZ7DJ9FYxmZvTv1h89DmBdbyHEX0rcuuTRB38fNuQ2vmw1GAYMSjv6ZwQbD0ksFlz9LPW7gMxNv3RBVtlDqz3cbWo32rmEXLGFExcsJBMnilGzk29pleT5gx8fLiq2XzyM2rllpiboEYGxF2UoD6+EntL1Ma+TkOP/LVqNJLM3yeqgayDmnjqKmIu3aNGDhlx1pqiZvyUuAqaqKGwRRwt1gnqqR0QO5ce6ms5J1ZGIWqtkxIf0QNqb7ohJjIXgFjPiYF4j38R2wbZTk1m+C/xqU9WSzv4hkgyVkcg0QvIUg0XEHleRjaK/gQb8g/a2EL8hHcky6zxC+JTQBa5c/BL4nBO1lgl+B2xJjv0QxQgnA1ZoOGhGHFNldedoShxMadKU/d4BeEEVGF3Ll5FJF+psm7Bh5xwHyDeoKeogvp7iDfpbKhyWgeIN/JSqpjbBOLtlqwq7qJNFdKGeKdQUUUEIcS7Df6iSngeQAPhtqgCWi60EElKxjUSsCFriK5nYEMuLDtoJSZk0BiaiaYsZGPlXnEqHoipIhOaKIW4WnD63xThgtP/pthHdFqfUCIRRvK/KZ+3VX1uiulc7puc3EstSOpD9d7+LYGTFfiQenyKkxE3VLLGI9iQkcH4CackzqlEwRYnJbwNlUb5ODHhBVSWHk5O+JFMLkh5qFYxLxnoPZ9BmJGRdrELNuTddNEAwhg34NSvFnvSqgth1ANpNEIZkhkYSg4dt9rHocCFXvvxWUD/ELR2TQ98hMOWon+Ks7YLrZI70iWETu6yT99Qt3uw4A4j+lY6hU4dVcloUFdR3tkA1kt29J1zHxr1SIsGNAoDnvGjMCj/CLmr3INzQj9x5sFm41Ns933c0PtNoc+O0bJNA9+Xryp14+zSL9x5PH6beS2vQrfP0exkQcMG08BdCn1SepeFc8KPijWs5MxPdzN4CipzR2nQb8wdnu0O5UKbkN7h/LQZ/a9Ms+pZNYp9kQt9Yvo9H3Yx8H15QSXm/qZUQMY0ybOCPtNKlIMuqYAogW1SKkBBoxW9SXSARoqKCGGbBRVxBY0C85V3h2mb/MrASGxIb3BnYlaxwXRmLwUMFxMc6NSlQvpM6nt5MXTylOl00JGKYTqxp6DVBb1SkECrlOmvs0HFGA7efjA0dwrLfKVC5tDLp1dpGHrGKFjm0tCZYEWvMTA0NrOBZVZUSMtoLn4I3T5RISnTZTGXJrea9BPotmU6QrqlQi6gXWx05V5MRTiwTaD/4aW5FN8y9pCJYZ2usSPBNRUzNfapNIZ1fGM7KQdUSMNYJyl6Ajh2yAKTBUYHpfCZruJ0jB3wCpVur1GSIf3G8yOPlG1ePDN46d2iJEmLR+86L4lNBRQTZXK/6UAxunMWDxC3Da6omXsoz5XiOa8/NfV9JYHRXVBXiudG8r0y9Jmzpl87oFSDFv3Qog2rDTb0Q6qJckX0K7coWTKkHxh1YLmkSz/Q6JjNKnVQOj+lnM0nMPDxmnLuPhjej5rhFLbjmP4nOF6BCXfdov8JLkPj+xcdnMjh03p3nWXLBwesuB/+GGbHXbc5wIkkSt7CwEmXU1lGbPX3OYVBt5y2Yoov9EN/QVhpJK9xZL/7P4Kw1LO8iIH7qxx8CEu5zG8pcldpQ1hrSjnBI4S9YnrpBsJiEzkIcfIkByFWUqkIcdKjb7kQdos49a3Fjv7vE4TlfPoflYAPuXoeIaw3pv+6h7CeQ/8RPYIP6XpegwGxknMtwxcqK7AgAqkhcDKkf3oAI9LE9sCDWGhf4S8M70peggnxQERTMCFcIjUDF+KOUrAhhvQANkT4dwEsPvJYWz4QAAAAAElFTkSuQmCC');
background-position: bottom right 70px;
background-repeat: no-repeat;
background-size: auto 100%;
margin: 0 auto;
max-width: 980px;
padding: 0 60px;
position: relative;
}
.adb-hero-back-icon {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.adb-hero-title {
font-size: 22px;
line-height: 28px;
padding: 24px 24px 0px 112px;
}
.adb-hero-title a {
color: #FFFFFF;
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500;
}
.adb-hero-summary {
font-size: 16px;
line-height: 24px;
padding: 8px 24px 8px 112px;
}
.adb-hero-summary a {
color: rgba(255, 255, 255, 0.9);
}
.adb-hero-description {
color: #6f7172;
font-size: 16px;
margin: 0;
max-width: 440px;
padding-bottom: 32px;
}
.adb-hero-search {
position: absolute;
top: 19.35%;
right: 1.94%;
}
.adb-hero-search .searchBox input {
border: 1px solid #80868B;
border-radius: 4px;
color: white;
}
.adb-hero-search .searchBox input::placeholder {
color: #F1F3F4;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
padding-left: 12px;
}
.adb-hero-link {
position: absolute;
right: 1.67%;
top: 64.52%;
}
.adb-hero-link a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #3DDC84;
letter-spacing: 1.4px;
}
.adb-hero-arrow {
display: inline-flex;
font-size: 24px;
vertical-align: middle;
}
.adb-socials-box {
display: flex;
position: absolute;
right: 1.67%;
}
.adb-socials-category,
.adb-socials-divider {
display: flex;
align-items: center;
}
.adb-socials-divider {
color: #DADCE0;
font-size: 40px;
font-weight: 100;
margin: 0 20px;
}
.adb-socials-category img,
.adb-footer-social-links img {
height: 24px;
}
.adb-footer-social-links-img {
margin-right: 20px;
}
.adb-hero-subscribe, .adb-hero-subscribe:visited {
background-color: #90c653;
color: #fff;
display: inline-block;
border-radius: 3px;
margin: 25px 0 60px;
padding: 13px 32px;
text-transform: uppercase;
}
.adb-hero-subscribe:hover, .adb-hero-subscribe:focus {
background-color: #333;
}
.adb-footer {
margin: 32px auto 64px;
}
.adb-footer-more {
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #f0f0f0;
padding: 30px 0;
}
.adb-footer-more a {
color: #000;
display: inline-block;
font-size: 20px;
font-weight: 300;
margin-right: 16px;
}
.adb-footer-social {
float: right;
margin-top: -62px;
}
.adb-footer-social a {
background-color: #ccc;
background-position: center;
background-repeat: no-repeat;
background-size: auto 16px;
border-radius: 50%;
display: inline-block;
height: 36px;
margin-left: 16px;
transition: background-color .1s;
width: 36px;
}
.adb-footer-social-youtube {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAQAAAAxWje/AAABLUlEQVQ4y6WUvUoDYRBFr42gCdhK8AV8BwsVC0FQfIQUgr5DIKJoGy1CfAaDq1hIGn8K2xDSaBc1wUJJEYmbkDXssdi1Mrvfst9tZ+bAzNwZSZLEAmvsUKTCBQ80eaWLyxiAMS5dXmhyT5UyBfIsM68/McM1aXRDJgCUSKsTSWQZpAa4ZMUmNtoSRxGhbd4TAI7F1eSIxBwVfAPgUtSjAJLEEk+xgLroxAEkpikyigS0RS8eIEks8hgB6ImhGSAxxS5fE9JGwksCkCRyOP/SfPFjC0jawl5UC9ZDbBvXuB+zxjezkZ5NRnJirHxmtLIjDq2O6UBsWJ3zut1D+WZWEqepAaVg0hlqqcpr4VMNbbpKngJlqtzRoMUnfTx8fDz6fNCiwS3n4VtfIRdU/gLTrSb7DGWLcQAAAABJRU5ErkJggg');
}
.adb-footer-social-youtube:hover {
background-color: #f44336;
}
.adb-footer-social-gplus {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAUCAQAAACpWpz6AAABJUlEQVQ4EZXBTUoCYQDH4X9hTS3Cja0Kyb2X6BCJoLlr1aKwK1QHCMMzWLiqTcuWXaAWQWIlU1DQh4QJ+Wt4X95x0hGn55FCeGzSpMUXXW45ocSC/oMiHUZ1KCgZZqkzyZaSoM7QgCd8BlgXLGo6ijgv7JJRgAxV3jjDUwwMOXh0sK5ZUQRZ5hQLQw4VrA/WlBCGHJpY+0oMQw5trLxCjNtTgFiij5VSiHFHChBL9LFSCjGurgCxRBsrrxA+Pj4+Pl2sQ0VgyKGJdaAYNLAqisCQQxnrk5xGkKOHlVUEhhw8HrFuWFUEaa6wLvUHhoYo4LxSZVkBlihzh7OuaagR9YzPD0PHmo5ZakzSIKVk2OCBUe/sMKPkmKfEKS16fHPPOduklcAvR50zMVwhTI4AAAAASUVORK5CYII=');
}
.adb-footer-social-gplus:hover {
background-color: #f44336;
}
.adb-footer-social-twitter {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAQAAAB0gUQ+AAABI0lEQVQ4EY3BQShDAQDH4f+zTSyJuLgoLlwclYOTHCwHu9ouiLRScpUmNwduDkpCSTs4LAeJhINoOTo4ctHkskyJtf20vWbe3tvb+z7JFUGibLHPMj0qoYEWSYzRKkdMkKbsm3m6WSRFuyQeuKNNNoTJU61ABL8kssAjvbKgiTR2V+ywJol3ijJMY+gP4zhLEpDEGWUpwvhUQgwnh/hURIT/3thjjmGWcBKViSCXeBWSiWdO+MGbPpm4watPfDIRxasLVXCANwuqwCDGK/V80akKGjnmmgLutmXFOvV80CUrAiRxNys7DCY5J4OzXdVCP7c4OcIvO5oJkSCHXZ5VDFkxwilP5HB2z6Cc0EGcF6plSTAqNxgMMEWcTTZYYYYhAqrpF0uh1zgYi1hVAAAAAElFTkSuQmCC');
}
.adb-footer-social-twitter:hover {
background-color: #55acee;
}
.adb-footer-social span {
display: none;
}
.adb-footer-related {
padding-top: 8px;
}
.adb-footer-related a {
color: #999;
font-size: 12px;
white-space: nowrap;
}
.adb-footer-related a:not(:last-child)::after {
content: '|';
cursor: default;
margin: 0 7px 0 10px;
}
.adb-footer-section {
margin: 48px auto;
max-width: 700px;
}
.adb-footer-title {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #3C4043;
margin-bottom: 24px;
}
.adb-footer-columns {
display: flex;
justify-content: space-between;
}
.adb-other-blogs-title img {
margin-right: 8px;
vertical-align: -12px;
}
.adb-footer-social-label {
display: flex !important;
align-items: center;
}
.adb-footer-column a,
.adb-footer-social-label,
#footer-subscribe .tab h2 {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
padding: .85em 0;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-btm a {
color: #000;
font-family: Android Euclid, Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.25px;
opacity: .7;
transition: opacity .1s;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-column a {
opacity: .7;
transition: opacity .1s;
}
.adb-footer-column a:hover {
opacity: 1;
}
.adb-footer-social-links {
margin: 0 0 20px;
}
#footer-subscribe .widget {
margin: 0;
}
#footer-subscribe .tab {
display: flex;
align-items: center;
}
#footer-subscribe .tab img {
height: 16px;
}
.adb-label-view-more-toggle {
cursor: pointer;
}
.adb-label-view-more-toggle::after {
content: '\00e5c5';
float: right;
font: 2em / .7 Material Icons;
opacity: .6;
}
.adb-label-view-more-toggle.active::after {
transform: rotate(180deg);
}
/** Desktop **/
@media (max-width: 900px) {
.col-right {
display: none;
}
.col-main {
margin-right: 0;
min-width: initial;
}
.cols-wrapper {
min-width: initial;
}
.adb-hero-inner {
background-image: none;
}
}
/** ADB header breakpoint **/
@media (max-width: 768px) {
.adb-header-links {
display: none;
}
.dropdown-nav {
display: none;
}
.adb-header {
padding: 12px;
text-align: center;
}
}
@media (max-width: 1196px) {
.breakpoint-hide {
display:none;
}
.more-dropdown {
height: 50px;
display: flex;
align-items: center;
}
}
@media (max-width: 915px) {
.adb-header {
height: 0;
margin: 0;
padding: 0;
display: none;
}
.adb-header-tags {
display:none;
}
.more-dropdown {
display:none;
}
.dropdown-nav {
display: none;
}
.adb-hero-summary,
.adb-hero-link,
.adb-socials-category {
display: none;
}
.adb-hero-title {
padding-left: 152px;
}
.adb-hero-logo {
height: 52px;
top: 12px;
left: 120px;
}
.adb-footer-section {
margin: 0 auto;
}
.adb-footer-btm {
margin: 0 24px 40px;
}
.adb-hero-area {
min-height: 76px;
}
.adb-burger-box {
display:inline;
position: absolute;
top: 17px;
margin-left: 24px;
font-size: 32px;
color: white;
}
.adb-hero-title a{
margin-left: 40px;
}
}
/** Tablet **/
@media (max-width: 712px) {
.header-outer, .cols-wrapper {
padding: 0 40px;
}
/* ADB */
.adb-hero-inner {
padding: 0 40px;
}
.adb-hero-title {
font-size: 16px;
padding-left: 132px;
}
.adb-hero-logo {
left: 100px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 36px;
}
.adb-other-blogs-list {
columns: auto;
}
.adb-other-blogs-title {
font-size: 20px;
}
.adb-other-blogs-title img {
height: auto;
vertical-align: -6px;
width: 32px;
}
.adb-footer-section {
margin: 0 24px;
}
.adb-footer-more {
padding-bottom: 75px;
}
.adb-footer-social {
float: none;
margin-bottom: 35px
}
.adb-footer-social .adb-footer-social-youtube {
margin-left: 0;
}
}
/** Small tablet **/
@media (max-width: 600px) {
.header-inner .google-logo {
top: 32px;
margin-top: 0;
}
.header-inner .google-logo img {
height: 56px;
width: auto;
/*
height: auto;
width: 188px;
*/
/* Override any optical adjustments at desktop size. */
top: 0 !important;
}
.header-left {
left: 0;
top: inherit;
bottom: 24px;
}
.adb-footer-columns {
display: block;
}
.adb-footer-column {
margin-bottom: 48px;
}
.adb-footer-column a {
opacity: 1;
}
.adb-footer-social-label {
padding: 0;
}
.adb-footer-column .widget a {
padding: 0;
}
.footer-newsletter {
margin-top: 16px;
}
.subscribe-btn {
width: 100%;
}
.adb-hero-search {
display: none;
}
.adb-search-box {
display:inline;
position: absolute;
top: 24px;
right: 24px;
font-size: 24px;
color: white;
}
}
/** Mobile **/
@media (max-width: 480px) {
.header-outer, .cols-wrapper {
padding: 0 16px;
}
.adb-hero-logo {
height: 28px;
top: 24px;
left: 76px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 16px;
}
.cols-wrapper {
margin-top: 0;
overflow-x: auto;
}
.post-header .publishdate, .post .post-content {
font-size: 16px;
}
.post .post-content {
line-height: 28px;
margin-bottom: 30px;
}
.post {
margin-top: 30px;
}
.byline-author {
display: block;
font-size: 12px;
line-height: 24px;
margin-top: 6px;
}
#main .post .title a {
font-weight: 500;
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
}
#main .post .post-header {
padding-bottom: 12px;
}
#main .post .post-header .published {
margin-bottom: -8px;
margin-top: 3px;
}
.post .read-more {
display: block;
margin-top: 14px;
}
.post .tr-caption {
font-size: 12px;
}
#main .post .title a {
font-size: 20px;
line-height: 30px;
}
.post-content iframe {
/* iframe won't keep aspect ratio when scaled down. */
max-height: 240px;
}
.post-content .separator img, .post-content .tr-caption-container img {
margin-left: -16px;
max-width: 100%;
}
.post-content table {
table-layout: fixed;
width: 100%;
}
/** List page tweaks. **/
.list-page .post-original {
display: none;
}
.list-page .post-summary {
display: block;
}
.list-page .comment-container {
display: none;
}
.list-page .label-footer {
display: none;
}
.list-page #main .post .post-footer {
border-bottom: 1px solid #eee;
margin: -16px 0 0 0;
padding: 0 0 20px 0;
}
.list-page .post .share {
display: none;
}
/** Detail page tweaks. **/
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 32px !important;
}
.detail-page .label-footer {
margin-bottom: 0;
}
.detail-page #main .post .post-footer {
padding-bottom: 0;
}
.detail-page #comments {
display: none;
}
/* ADB */
.adb-header-console {
display: none;
}
.adb-hero-inner {
padding: 0 16px;
}
.adb-hero-title {
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
font-weight: 500;
line-height: 30px;
padding-left: 80px;
}
}
/* Fixed-position sidebar for larger screens */
@media screen and (min-height: 700px) and (min-width: 1100px) {
.col-right .section {
max-height: calc(100vh - 197px);
overflow: auto;
}
.col-right.scroll-start {
left: 50%;
margin-left: 241px;
position: fixed;
top: 96px;
}
.col-right.scroll-end {
bottom: 485px;
position: absolute;
top: auto;
}
}
[data-about-pullquote], [data-is-preview], [data-about-syndication] {
display: none;
}
#imgFull {
display: block;
margin: 10px auto;
width: 90%;
border: 0;
padding: 0;
}
#imgHalf {
display: block;
margin: 10px auto;
width: 50%;
border: 0;
padding: 0;
}
#flexParent {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
#flexImg {
width: 90%;
margin: 0;
padding: 0;
border: 0;
}
#imgCaption {
text-align: center;
font-style: italic;
font-size: 85%;
margin: -5px 0 10px 0;
padding: 0;
border: 0;
}
#floatRight {
float: right;
width: 45%;
margin: 5px 0 5px 5px;
padding: 0;
border: 0;
}
#floatLeft {
float: left;
width: 45%;
margin: 5px 5px 5px 0;
padding: 0;
border: 0;
}
</style>
<style>
.loading {
visibility: visible;
}
</style>
</head><body>
<div class="adb-detail">
<div class="adb-detail__info">
<p>
26 Februari 2024
</p>
</div>
<div class="adb-detail__title">
</div>
<hr>
<div class="adb-detail__content">
<div>
<meta content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmm4lj8twpvPFOe835BVS8ODXRQe300l72XMYE-oW50Ce79FGpaa9UHCtGcnhi_GZcsUCsVrbsy2mp3uVV5GPH7BRATgh-t4ZnmkG_PVICWha2ilkXy5k0O256wwlEby3PDLB-u6qKB3nyV6rtXurwlfUQqvKyQaotUso_E-Z15ql3xcuJml625jwR6PA/s1600/WearOS-OnePlus-AD-Social.png" name="twitter:image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmm4lj8twpvPFOe835BVS8ODXRQe300l72XMYE-oW50Ce79FGpaa9UHCtGcnhi_GZcsUCsVrbsy2mp3uVV5GPH7BRATgh-t4ZnmkG_PVICWha2ilkXy5k0O256wwlEby3PDLB-u6qKB3nyV6rtXurwlfUQqvKyQaotUso_E-Z15ql3xcuJml625jwR6PA/s1600/WearOS-OnePlus-AD-Social.png" style="display: none;">
<em>Diposting oleh <a href="https://twitter.com/kseniiaS" target="_blank">Kseniia Shumelchyk</a>, Android Developer Relations Engineer</em>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOORsnGuE8R2oK8MeCeUegCvo3kCWraitp4mtBuyoXY9Y33cuHBJiF0JEBpipOSPLBsfyvtxC8rFdV-pxsQwX00xmE3jszlI68QLgauapkYOt_4wZdotYsITlgTehohAawtmuSOadMsnDHtv8b7fHcqADtmqo21_j0rCuih20mNd6srIEq_tKa3mTEY0I/s1600/Oneplus_blogheader.png"><img border="0" data-original-height="800" data-original-width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOORsnGuE8R2oK8MeCeUegCvo3kCWraitp4mtBuyoXY9Y33cuHBJiF0JEBpipOSPLBsfyvtxC8rFdV-pxsQwX00xmE3jszlI68QLgauapkYOt_4wZdotYsITlgTehohAawtmuSOadMsnDHtv8b7fHcqADtmqo21_j0rCuih20mNd6srIEq_tKa3mTEY0I/s1600/Oneplus_blogheader.png"></a>
<p>Melalui kerja sama dengan mitra hardware, kami terus memprioritaskan pengalaman pengguna <a href="https://wearos.google.com/" target="_blank">Wear OS</a> by Google. Oleh karena itu, kami telah melakukan perubahan desain mendasar pada platform dan secara signifikan memperluas kemampuan antarmuka hybrid Wear OS yang menyempurnakan dua area utama: daya dan performa.</p>
<p>Dengan <a href="https://www.prnewswire.com/news-releases/introducing-oneplus-watch-2-a-dual-engine-flagship-smartwatch-powered-with-wear-os-by-google-302070328.html#:~:text=DALLAS%2C%20Feb.%2026%2C%202024,%E2%84%A2%20%28Wear%20OS%204%29" target="_blank">OnePlus Watch 2</a>, yang didukung Wear OS (<a href="https://android-developers.googleblog.com/2023/10/wear-os-4-is-now-stable-and-available-on-google-pixel-watch-2.html" target="_blank">Wear OS 4</a>) versi terbaru, arsitektur dual-chipset bekerja dengan antarmuka hybrid kami agar kedua chip secara bersama-sama menghasilkan performa yang lebih baik. Hal ini akan menghasilkan makin banyak kasus penggunaan yang mendapatkan manfaat dari masa pakai baterai yang jauh lebih lama hingga 100 jam penggunaan reguler dengan semua fungsinya yang dapat diakses dalam Mode Pintar.</p>
<p>Bersama-sama, kami menghadirkan pengalaman smartwatch premium yang tidak mengorbankan rangkaian fitur canggih atau masa pakai baterai. Dalam postingan ini, kami akan membagikan bagaimana Anda dapat memanfaatkan perubahan ini saat membangun pengalaman untuk Wear OS.</p>
<h2><span style="font-size: x-large;">Terdepan dalam inovasi: arsitektur smartwatch dengan desain baru</span></h2>
<p>Smartwatch Wear OS memiliki arsitektur dual-chipset yang mencakup prosesor aplikasi (AP) yang tangguh dan unit mikrokontroler co-prosesor (MCU) berdaya sangat rendah. Arsitekturnya memiliki AP tangguh yang mampu menangani operasi kompleks secara massal, dan dipadukan secara mulus dengan MCU berdaya rendah.</p>
<p>Antarmuka hybrid Wear OS memungkinkan peralihan cerdas antara MCU atau AP, sehingga AP dapat ditangguhkan saat tidak diperlukan untuk menghemat masa pakai baterai. Hal ini membantu, misalnya, mencapai pengalaman yang lebih hemat daya, seperti pemrosesan data sensor di MCU saat AP dalam keadaan tidur. Pada saat yang sama, antarmuka hybrid memberikan transisi yang mulus antarkondisi ini, menjaga pengalaman pengguna yang beragam dan premium tanpa mengganggu transisi antarmode daya.</p>
<img><div style="text-align: center;"><img alt="TEKS ALT" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSSIa-_v9BKX-IzB2JLfd6Bz8CL3cQDm2ka_DXn8DPR92iM463UzNbpgWaVno3FJwPildLcdvFM83cAyCBjxRmhtM48nWFv7XzDPQFi5rFhfZCoJOM-pxxcTQ6VcXKy1VIR8kig880mWHhQtiPYQ6kKgY90Hkgg2eQ6Zrk3xKOMYPI_i0vCbxglUVx3LU/s1600/image2.gif" width="100%"></div><br>
<h3 style="text-align: left;"><span style="font-size: large;">Pengalaman konektivitas dan notifikasi</span></h3>
<p>Untuk menyempurnakan interaksi yang bergantung pada konektivitas seperti notifikasi dan panggilan telepon, OnePlus memanfaatkan kemampuan platform dengan API notifikasi di antarmuka hybrid, yang memungkinkan MCU memproses pengalaman notifikasi reguler dan mengurangi kebutuhan untuk mengaktifkan AP.</p>
<p>Misalnya, <a href="https://developer.android.com/training/wearables/notifications" target="_blank">notifikasi yang dijembatani</a> akan dikirimkan ke smartwatch tanpa membangunkan AP berperforma tinggi. Pengguna dapat membaca dan mengabaikan notifikasi ini saat smartwatch tersebut masih didukung oleh MCU. MCU juga dapat menangani tindakan khusus untuk perangkat wearable dalam notifikasi, seperti balasan cepat atau tindakan jarak jauh.</p>
<h2><span style="font-size: x-large;">Manfaat bagi pengembangan</span></h2>
<p>Anda dapat memanfaatkan Wear OS API yang ada untuk mendapatkan pengoptimalan ini tanpa upaya tambahan apa pun – tidak perlu mengubah kode!</p>
<h3 style="text-align: left;"><span style="font-size: large;">Notifikasi</span></h3>
<p>Antarmuka hybrid notifikasi memungkinkan transisi mulus antarmode daya untuk bekerja dengan tumpukan notifikasi Wear OS. Anda mendapatkan performa notifikasi terbaik dengan <a href="https://developer.android.com/training/wearables/notifications?_gl=1*9dlcvi*_up*MQ..*_ga*NjY5MzY0MTMzLjE3MDc3ODEwMzU.*_ga_6HH9YJMN9M*MTcwNzc4MTAzNC4xLjAuMTcwNzc4MTAzNC4wLjAuMA..#add-wearable-features" target="_blank">Notification API</a>.</p>
<h3 style="text-align: left;"><span style="font-size: large;">Pengalaman Kesehatan & Kebugaran</span></h3>
<p>Antarmuka hybrid Wear OS juga meningkatkan pengalaman kebugaran dengan pelacakan olahraga yang lebih tepat, pengenalan olahraga otomatis, dan pemantauan data kesehatan yang lebih cerdas. Semua ini dapat ditawarkan kepada pengguna tanpa mengurangi masa pakai baterai.</p>
<p>Dimulai dengan Wear OS 3, para developer menggunakan <a href="https://developer.android.com/health-and-fitness/guides/health-services" target="_blank">Fitur Kesehatan di Wear OS</a> untuk mendapatkan akses ke data sensor. Antarmuka hybrid kesehatan berfungsi untuk mengaktifkan pengoptimalan daya dengan mengelompokkan data sensor di MCU dan memperbarui aplikasi developer secara berkala melalui Health Services API di AP.</p>
<h3 style="text-align: left;"><span style="font-size: large;">Tampilan Jam</span></h3>
<p>Dengan Wear OS 4, kami meluncurkan <a href="https://android-developers.googleblog.com/2023/05/introducing-watch-face-format-for-wear-os.html" target="_blank">Format Tampilan Jam</a>, format XML deklaratif untuk membuat tampilan jam yang dapat disesuaikan dan hemat daya.</p>
<p>Platform ini telah menciptakan kemampuan untuk menerapkan rendering Format Tampilan Jam di MCU, sehingga penggunaan format baru ini membantu tampilan jam tertentu agar dapat memanfaatkan pengoptimalan yang muncul di perangkat masa depan untuk penggunaan baterai yang lebih baik.</p>
<p>Lihat dokumentasi <a href="https://developer.android.com/training/wearables/wff" target="_blank">format tampilan jam</a> dan <a href="https://developer.android.com/design/ui/wear/guides/surfaces/watch-faces" target="_blank">panduan desain</a> untuk tampilan jam Wear OS.</p>
<h2><span style="font-size: x-large;">Memperluas jangkauan dengan Wear OS</span></h2>
<p>Dengan tambahan ekosistem smartwatch Wear OS dan kemampuan perangkat yang diperluas, sekarang adalah waktu yang tepat untuk membangun pengalaman smartwatch yang dapat menjangkau lebih banyak pengguna dan menguntungkan bisnis Anda.</p>
<p>Guna mulai mengembangkan aplikasi untuk Wear OS, cobalah <a href="https://developer.android.com/codelabs/compose-for-wear-os" target="_blank">codelab Compose untuk Wear OS</a> kami, dan lihat <a href="http://d.android.com/wear" target="_blank">dokumentasi</a> dan <a href="https://github.com/android/wear-os-samples" target="_blank">contohnya</a>.</p>
<p>Baca lebih lanjut tentang <a href="https://android-developers.googleblog.com/2023/10/wear-os-4-is-now-stable-and-available-on-google-pixel-watch-2.html" target="_blank">update developer di Wear OS 4</a>, dan cara menyiapkan aplikasi untuk smartwatch Wear OS terbaru.</p>
<p>Kami tak sabar ingin segera melihat pengalaman apa yang akan Anda hadirkan!</p>
</div>
<hr>
</div>
</div>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-32272301858352069262024-02-26T09:31:00.006+07:002024-03-18T09:34:42.874+07:00Goodie baru dari Android, Perangkat Wearable di Mobile World Congress + saksikan episode baru #TheAndroidShow minggu depan!<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="http://android-developers.googleblog.com/2024/02/tas-teaser.html"/>
<meta name="original_url" content="http://android-developers.googleblog.com/2024/02/tas-teaser.html"/>
<style id="page-skin-1" type="text/css"><!--
body {
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
-webkit-font-smoothing: antialiased;
color: #202124
}
h1 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px
}
h2 {
font-size: 30px;
line-height: 40px
}
h2,
h3 {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500
}
h3 {
font-size: 24px;
line-height: 32px
}
h4 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 26px
}
h5 {
font-size: 16px;
line-height: 24px
}
h5,
h6 {
font-family: Roboto, sans-serif;
font-weight: 600
}
h6 {
font-size: 14px;
line-height: 22px
}
.display {
font-family: Roboto, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 67.2px
}
.hidden-text {
height: 1px;
overflow: hidden;
pointer-events: none;
position: absolute;
top: -10px;
width: 1px
}
img,
video {
border: 0;
height: auto;
max-width: 100%
}
body {
position: relative;
min-height: 100vh
}
body.no-scroll {
overflow: hidden
}
a {
color: #4184f3;
text-decoration: none
}
a:focus,
a:focus-visible {
outline-offset: -2px
}
.content-wrap {
padding-top: 200px;
max-width: 800px;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:915px) {
.content-wrap {
padding-top: 100px
}
}
.full-width {
width: 100%
}
.icon-link {
height: 42px;
width: 132px;
border-radius: 80px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: baseline;
-ms-flex-pack: center;
justify-content: baseline;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
background: transparent;
border: none;
color: black !important
}
.icon-link:hover {
background-color: hsla(213, 7%, 76%, .2)
}
.icon-link:focus {
background-color: hsla(213, 7%, 76%, .26)
}
.icon-link:active {
background-color: hsla(213, 7%, 76%, .32)
}
.adb-container {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto;
max-width: 1420px
}
@media only screen and (max-width:767px) {
.adb-container {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--large {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto
}
@media only screen and (max-width:767px) {
.adb-container--large {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--flex-horizontal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.section,
body {
margin: 0
}
.adb-card {
position: relative;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
margin: 40px 0;
padding: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: box-shadow .2s linear, opacity .2s linear;
transition: box-shadow .2s linear, opacity .2s linear, -webkit-box-shadow .2s linear
}
.divider {
border: none;
height: 1px;
color: #DADCE0;
background-color: #DADCE0;
margin: 0 20px;
}
.adb-card:first-child {
background-color: #d7effe;
border: none;
padding: 32px 24px 32px;
margin: 40px 20px 60px;
}
@media only screen and (max-width:850px) {
.adb-card {
max-height: unset;
padding: 0 20px
}
.adb-card:first-child {
margin-bottom: 40px;
}
}
@media only screen and (max-width:600px) {
.adb-card:first-child {
margin: 0 -20px 40px;
}
.adb-card {
border-radius: 0;
padding: 0;
}
.divider {
margin: 0;
}
.content-wrap {
padding-top: 54px;
}
}
.adb-card:focus-within,
.adb-card:hover {
-webkit-box-shadow: 0 0 36px rgba(0, 0, 0, .1);
box-shadow: 0 0 36px rgba(0, 0, 0, .1);
cursor: pointer
}
.adb-card__href {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.adb-card__image-wrapper {
overflow: hidden;
position: relative;
width: auto;
-webkit-flex-basis: 40%;
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.adb-card__content {
padding: 24px 0 0
}
.adb-card__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 600;
margin-bottom: 12px
}
.adb-card__info {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 24px
}
.adb-card__description {
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin-bottom: 48px
}
.adb-card:hover .adb-content__image-wrapper img,
.adb-card__href:focus~.adb-content__image-wrapper img {
-webkit-transform: scale(1.03);
transform: scale(1.03);
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease
}
.devsite-footer {
padding: 0 24px;
border-top: 1px solid #bdc1c6
}
.devsite-footer li {
display: block
}
.devsite-footer li a {
text-decoration: none;
font-size: 14px;
line-height: 16px;
color: #202124
}
.devsite-footer li a:focus,
.devsite-footer li a:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-linkboxes-list {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
padding: 24px 0;
border-bottom: 1px solid #bdc1c6
}
@media only screen and (max-width:767px) {
.devsite-footer-linkboxes-list {
grid-template-columns: 1fr;
padding-left: 0
}
}
.devsite-footer-linkbox {
display: block
}
.devsite-footer-linkbox-heading {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin: 0 0 4px
}
.devsite-footer-linkbox ul {
padding-left: 0
}
.devsite-footer-sites-list {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-utility nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 24px 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0
}
}
.devsite-footer-utility-button {
justify-self: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 20px;
margin-left: auto;
padding-left: 16px
}
.devsite-footer-utility-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 8px 0 0
}
.devsite-footer-utility-item:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.devsite-footer-utility-item:not(:first-child):before {
content: "|";
margin: 0 8px 0 0
}
}
.devsite-footer-sites {
border-bottom: 1px solid #bdc1c6;
padding: 24px 0 23px
}
.devsite-footer-sites-logo {
height: 32px;
margin-top: 5px;
width: 185px
}
.devsite-footer-sites-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0
}
.devsite-footer-sites-item {
margin: 0 0 0 40px
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-item {
margin: 0
}
}
.devsite-footer-sites-link {
display: block;
padding: 8px 0;
color: #202124
}
.devsite-footer-sites-link:focus,
.devsite-footer-sites-link:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-utility-link:focus {
text-decoration: underline
}
.devsite-footer-utility .devsite-footer-utility-button {
line-height: 20px;
font: 400 14px/16px Roboto, sans-serif
}
.devsite-footer-utility .devsite-footer-utility-button:before {
content: "";
margin: 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility .devsite-footer-utility-button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
margin: 18px 0 12px
}
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link {
border: 0;
background: #1a73e8;
color: #fff;
line-height: 36px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0 0 16px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px 0;
box-shadow: 0 1px 2px 0;
display: inline-block;
font: 500 14px/36px Roboto, sans-serif;
height: 36px;
letter-spacing: 0;
min-width: 36px;
padding: 0 24px;
text-align: center;
-webkit-transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s, -webkit-box-shadow .2s;
vertical-align: middle;
white-space: nowrap
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link:hover {
background: #1765cc
}
.adb-page__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px;
text-align: center;
color: #202124
}
.adb-detail hr {
border: 1px solid #dadce0;
margin: 40px 0
}
.adb-detail__title {
font-size: 40px;
font-weight: 600;
line-height: 48px
}
.adb-detail__info {
font-weight: 400;
font-size: 16px;
line-height: 24px
}
.adb-detail__content {
min-height: 200px
}
.icon-sidebar {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
top: 0;
left: -300px;
max-width: 220px;
gap: 8px
}
.icon-sidebar .share-text {
font-weight: 500;
margin-left: 4px
}
@media only screen and (max-width:1440px) {
.icon-sidebar {
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
left: 0;
margin-top: -20px;
margin-bottom: 40px;
}
.icon-sidebar .share-text {
display: none;
}
}
.copy-tooltip {
display: none;
position: fixed;
bottom: 16px;
left: 10px;
z-index: 100;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.copy-tooltip .copy-tooltiptext {
width: 200px;
background-color: #073042;
color: #fff;
text-align: center;
border-radius: 80px;
padding: 8px 16px;
}
.header__overlay {
height: 100vh;
left: 0;
position: fixed;
width: 100vw;
border: none;
background-color: rgba(0, 0, 0, .4);
-webkit-animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
opacity: 0;
top: 0;
z-index: -1;
display: none
}
.header__overlay.show {
display: block;
opacity: 1;
z-index: 800;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out
}
.social-icons__links {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
.social-icons__links path {
fill: #80868b
}
.social-icons__container-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin-right: 14px
}
@media only screen and (max-width:1000px) {
.social-icons__container-header {
display: none
}
}
.adb-blog-logo:focus,
.adb-blog-logo:hover {
opacity: .7;
text-decoration: none
}
.adb-blog-logo__image {
height: 32px;
margin-left: 0;
margin-top: 6px
}
@media only screen and (min-width:840px) {
.adb-blog-logo__image {
margin-left: 24px
}
}
.header {
position: fixed;
background: #fff;
z-index: 700;
top: 0;
width: 100%;
overflow: hidden;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
height: auto
}
.header .top-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 24px;
height: 50px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #e6e6e6
}
@media only screen and (max-width:839px) {
.header .top-row {
padding: 0 16px
}
}
.header .top-row__left,
.header .top-row__right {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 100%
}
.header .nav-row,
.header .top-row__left,
.header .top-row__right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.header .nav-row {
background: #fff;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.header .nav-items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 50px;
position: relative;
background-color: #fff
}
@media only screen and (max-width:839px) {
.header .nav-items {
display: none
}
}
.header .nav-items tab {
position: relative
}
.header .nav-items tab.active .header__nav-item:after,
.header .nav-items tab:hover .header__nav-item:after {
background: #1a73e8
}
.header .nav-items tab.active .header__nav-item,
.header .nav-items tab:focus-within a {
color: #202124
}
@media only screen and (max-width:839px) {
.header .header__cta,
.header .nav-items {
display: none
}
}
.header__search-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 6px 0 6px 24px;
overflow: hidden;
position: relative;
margin-right: 36px;
border-radius: 4px
}
@media only screen and (max-width:767px) {
.header__search-container:not(.mobile) {
display: none
}
}
.header__search-container.mobile {
margin: 0 0 20px
}
.header__search-container.mobile #searchform,
.header__search-container.mobile .searchbox {
width: 100%
}
.header__search-container .searchbox {
border-radius: 2px
}
.header__search-container .searchbox input {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
font-weight: 500;
color: #80868b;
border: 0;
margin: 0;
height: 20px;
outline: 0;
padding: 8px 8px 8px 40px;
width: 100%;
-webkit-transition: background .2s;
transition: background .2s
}
.header__search-container .searchbox input::-webkit-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input:-ms-input-placeholder,
.header__search-container .searchbox input::-ms-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input::placeholder {
color: #80868b
}
.header__search-container .searchbox input:hover {
background: #e8eaed
}
.header__search-container .material-icons {
color: #80868b;
left: 8px;
position: absolute;
top: 6px;
-webkit-transition: color .2s;
transition: color .2s
}
.header__cta {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #1a73e8 !important;
text-decoration: none
}
.header__cta.mobile {
padding: 18px 0
}
.header__cta:hover .cta-icon {
margin-left: 0;
margin-right: 12px
}
.header__cta .cta-icon {
-webkit-transition: margin-right .2s linear, margin-left .2s linear;
transition: margin-right .2s linear, margin-left .2s linear;
margin-left: 4px;
margin-right: 8px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.header__cta .cta-icon path {
fill: #1a73e8
}
.header__nav-item {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #80868b;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 18px;
height: 100%;
text-transform: none;
text-decoration: none
}
.header__nav-item:hover {
color: #202124
}
.header__nav-item.mobile {
font-weight: 500;
padding: 0
}
.header__nav-item:after {
bottom: 0;
border-radius: 3px 3px 0 0;
content: "";
display: block;
height: 3px;
left: 50%;
min-width: 20px;
position: absolute;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(100% - 24px)
}
.header__hamburger {
border: 0;
background: none;
outline: none;
padding: 0;
margin: 1px 8px 0 -4px;
padding: 8px;
color: rgba(0, 0, 0, .65);
cursor: pointer
}
@media only screen and (min-width:840px) {
.header__hamburger {
display: none
}
}
.header__side-menu {
background-color: #fff;
bottom: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
z-index: 900
}
.header__side-menu.is-open {
-webkit-transform: translateX(0);
transform: translateX(0);
width: 80%
}
.header__side-menu.is-open,
.header__side-menu__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%
}
.header__side-menu__content {
padding: 18px 16px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.header__side-menu__content .spacer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.header__side-menu__title {
font-family: Roboto, sans-serif;
font-size: 20px;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px
}
.header__side-menu__items {
list-style: none
}
.header__side-menu__items li {
padding: 12px 0
}
.header__side-menu__items tab {
position: relative
}
.header__side-menu__items tab.active .header__nav-item,
.header__side-menu__items tab:focus-within a {
color: #202124
}
.header__side-menu__bottom {
border-top: 1px solid #e6e6e6
}
.header__side-menu__logo-container {
background: #fff;
height: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 4px 16px;
border-bottom: 1px solid #e6e6e6
}
#nav .widget {
margin: 0
}
.featured__wrapper {
width: 100%;
border: 0;
background-color: #e8f0fe;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 80px 0
}
@media only screen and (max-width:767px) {
.featured__wrapper {
padding: 0
}
}
.featured__inner {
max-width: 1080px;
width: calc(100% - 24px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
padding: 48px
}
@media only screen and (min-width:768px) {
.featured__inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
padding: 12px 80px
}
}
.featured__href {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.featured__image {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
max-width: 100%;
}
.featured__content {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-top: 24px;
width: 100%
}
.featured__title {
font-size: 32px;
line-height: 44.8px;
font-weight: 500;
font-family: Android Euclid, Roboto, sans-serif;
margin-bottom: 15px
}
.featured__info {
font-family: Roboto Mono, monospace;
font-weight: 400;
font-size: 12px;
line-height: 160%;
margin-bottom: 24px
}
.featured__description {
margin-bottom: 48px
}
.preview.featured__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f1f3f4;
padding: 64px 0 120px
}
.preview.featured__wrapper h1 {
margin: 0 0 64px
}
.blog-label-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px
}
.blog-label-container .blog-label {
text-decoration: none;
z-index: 3
}
.blog-label-container .blog-label span {
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
background-color: #F1F3F4;
border-radius: 100px;
padding: 4px 16px;
color: #3c4043
}
.adb-card:first-child .blog-label span {
background-color: #fff;
}
.blog-label-container .blog-label span:focus,
.blog-label-container .blog-label span:hover {
background-color: #D7EFFE
}
.adb-card:first-child .blog-label span:focus,
.adb-card:first-child .blog-label span:hover {
background-color: #F1F3F4
}
.blog-label-container .blog-label span:focus-visible {
outline-offset: 0
}
#pagination-container {
display: none
}
.pagination {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.pagination .page-button {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: black;
background-color: #3DDC84;
padding: 16px 24px;
border-radius: 80px;
text-decoration: none
}
.pagination .page-button:focus,
.pagination .page-button:hover {
background-color: #3DDC8460;
}
.pagination .page-button.disabled {
color: #80868b;
background-color: #f1f3f4
}
--></style>
<style id="template-skin-1" type="text/css"><!--
--></style>
<style>
/** Blogger default styles **/
html, .Label h2, #sidebar .rss a, .BlogArchive h2, .FollowByEmail h2.title, .widget .post h2 {
font-family: Roboto, sans-serif;
}
.plusfollowers h2.title, .post h2.title, .widget h2.title {
font-family: Roboto, sans-serif;
}
pre, .post-content pre.prettyprint {
background-color: #f7f7f7;
border: 1px solid #ddd;
margin: 0 0 1em 0;
padding: 1em;
overflow: auto;
}
pre, code {
font-size: 9pt;
line-height: 125%;
font-family: monospace;
}
pre, code {
color: #060;
font: 13px/18px Consolas, 'Liberation Mono', Menlo, Monaco, Courier, monospace;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
/* Styles for https://github.com/google/code-prettify */
.com { color: #060; }
.kwd { color: #008; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.fb-custom img, .twitter-custom img, .gplus-share img, .email-custom img {
cursor: pointer;
opacity: 0.54;
}
.twitter-custom, .gplus-share, .fb-custom {
margin-right: 12px;
}
/** Blogger custom theme **/
.adb-header,
.searchBox input {
box-sizing: border-box;
}
.popout-nav {
background-color: white;
width: 280px;
height: 100%;
position: fixed;
z-index: 6;
left: -280px;
transition: left 0.2s;
}
.popout-search {
background-color: white;
width: 280px;
position: fixed;
z-index: 6;
right: -280px;
transition: right 0.2s;
top: 0;
}
.popout-search .widget {
margin: 0;
}
.popout-search #BlogSearch2_form .popout-options {
padding-right: 24px;
width: calc(100% - 48px);
}
.dropdown-nav {
display: none;
background-color: white;
width: 104px;
position: fixed;
padding: 4px 0px 3px 0px;
z-index: 4;
left: 352px;
top: 176px;
transition: top 0.2s;
box-shadow: 0 0px 2px 0 rgba(60,64,67,.3), 0 0px 6px 2px rgba(60,64,67,.15), inset 0 0px 6px -4px rgba(154,160,166,.5);
}
.dropdown-options {
align-items: center;
display: flex;
flex-wrap: wrap;
width: 94px;
height: 48px;
padding-left: 10px;
}
.dropdown-options:hover {
background-color: #f7f9fa;
}
.dropdown-options span {
color: #80868b;
}
.popout-options {
padding-right: 8px;
padding-left: 24px;
padding-top: 16px;
padding-bottom: 15px;
display: inline-block;
width: calc(100% - 32px);
border-top: 1px solid #ddd;
font-size: 13px;
font-weight: 700;
color: #80868b !important;
}
.popout-options:last-of-type {
border-bottom: 1px solid #ddd;
}
.popout-options:first-of-type {
border-top: 0;
}
#close-popout {
padding: 12px 12px 11px 20px;
}
#close-search-popout {
padding: 12px 20px 11px 12px;
text-align: right;
}
.popout-search-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
transition: opacity 0.2s;
}
.popout-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
z-index: 5;
transition: opacity 0.2s;
}
html {
background-color: #fff;
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
width: 100%;
position: absolute;
padding: 0;
/* This ensures that the scroll bar is always present, which is needed */
/* because render happens after page load; otherwise the header */
/* would 'bounce' in-between states. */
min-height: 150%;
}
h2 {
font-size: 130%;
}
h1, h2, h3, h4, h5 {
line-height: 1.5em;
margin-bottom: 1em;
}
html, h4, h5, h6 {
font-size: 14px;
}
a, a:visited {
color: #039be5;
text-decoration: none;
}
pre code {
display: block;
}
.cols-wrapper {
margin-top: 56px;
}
.header-outer, .cols-wrapper {
padding: 0 60px;
}
html, .header-inner a {
color: #212121;
color: rgba(0, 0, 0, .87);
}
/** Archive widget. **/
.BlogArchive {
font-size: 13px;
font-weight: normal;
}
.BlogArchive .widget- {
display: none;
}
.BlogArchive h2, .Label h2 {
color: #039be5;
text-decoration: none;
}
/* Specificity needed here to override widget CSS defaults. */
/* Months */
.Label {
font-size: 13px;
font-weight: normal;
}
.sidebar-icon {
display: inline-block;
width: auto;
vertical-align: middle;
height: 24px;
margin-right: 24px;
}
.sidebar-social-links {
align-items: center;
}
.sidebar-social-links .android-logo,
.android-logo {
height: 48px;
}
.sidebar-social-links a:last-child img {
margin-right: 0;
}
.Label .widget- {
display: none;
}
.searchBox input {
border: 1px solid #eee;
color: #212121;
color: rgba(0, 0, 0, .87);
font-size: 14px;
padding: 8px 8px 8px 40px;
width: 100%;
font-family: Android Euclid, Roboto, sans-serif;
background: url('https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png') 8px center no-repeat;
}
.searchBox ::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .54);
}
.section {
margin: 0;
padding: 0;
}
#sidebar-top {
border: 1px solid #eee;
}
#sidebar-top > div {
margin: 16px 0;
}
/*main post*/
.post {
margin-bottom: 30px;
}
#main .post .title {
margin: 0;
}
#main .post .title a {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: normal;
font-size: 24px;
}
.message, #main .post .post-header {
margin: 0;
padding: 0;
}
#main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption {
color: #444;
font-weight: 500;
}
#main .post .post-header .published {
font-size: 11px;
font-weight: bold;
}
.post-header .publishdate {
font-size: 16px;
font-weight: normal;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#main .post .post-footer {
font-size: 12px;
padding-bottom: 21px;
}
.label-footer {
margin-bottom: 12px;
margin-top: 12px;
}
#main .post .post-header .published {
margin-bottom: 16px;
}
.post .post- {
color: #545454;
color: rgba(0, 0, 0, .67);
font-size: 16px;
margin: 16px 0 36px 0;
line-height: 24px;
word-wrap: break-word;
}
.post-summary {
display: none;
}
/* Override all post images/videos to left align. */
@media (max-width: 712px) {
.post- img {
max-width: 100%;
height: auto;
width: auto;
}
}
.post- .tr-caption-container img {
margin-bottom: 12px;
}
.post- iframe, .post- embed {
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
}
.post- .carousel-container {
margin-bottom: 48px;
}
#main .post- b {
font-weight: 500;
}
/* These are the main paragraph spacing tweaks. */
#main .post- br {
: '';
display: block;
padding: 4px;
}
.post-content .space {
display: block;
height: 8px;
}
.post-content iframe+.space, .post-content iframe+br {
padding: 0 !important;
}
#main .post .jump-link {
margin-bottom: 10px;
}
.post-content img, .post-content iframe {
margin: 30px 0 20px 0;
}
.post-content > img:first-child, .post-content > iframe:first-child {
margin-top: 0;
}
.col-right .section {
padding: 0 16px;
}
#aside {
background: #fff;
border: 1px solid #eee;
border-top: 0;
z-index: 2;
}
#aside .widget {
margin: 0;
}
#aside .widget h2, #ArchiveList .toggle+a.post-count-link {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: 400 !important;
margin: 0;
}
#ArchiveList .toggle {
float: right;
}
#ArchiveList .toggle .material-icons {
padding-top: 4px;
}
#sidebar-top,
#sidebar {
background: #fff;
}
#sidebar .tab {
cursor: pointer;
}
#sidebar .tab .arrow {
display: inline-block;
float: right;
}
#sidebar .tab .icon {
display: inline-block;
vertical-align: top;
height: 24px;
width: 24px;
margin-right: 13px;
margin-left: -1px;
margin-top: 1px;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget-content > :first-child {
padding-top: 8px;
}
#sidebar .active .tab .arrow {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#sidebar .arrow {
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget h2 {
font-size: 14px;
line-height: 24px;
display: inline-block;
}
#sidebar .widget .BlogArchive {
padding-bottom: 8px;
}
#sidebar .widget {
border-bottom: 1px solid #eee;
box-shadow: 0px 1px 0 white;
margin-bottom: 0;
padding: 14px 0;
min-height: 20px;
}
#sidebar .widget:last-child {
border-bottom: none;
box-shadow: none;
margin-bottom: 0;
}
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style: none;
padding: 0;
}
#sidebar ul li a {
line-height: 32px;
}
#sidebar ul ul ul li a {
line-height: 24px;
}
#sidebar .archive {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC');
height: 24px;
line-height: 24px;
padding-left: 30px;
}
#sidebar .labels {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC');
height: 20px;
line-height: 20px;
padding-left: 30px;
}
#sidebar .rss a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII=');
}
#sidebar .subscription a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC');
}
#sidebar-bottom {
background: #f5f5f5;
border-top: 1px solid #eee;
}
#sidebar-bottom .widget {
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
text-align: center;
}
#sidebar-bottom > div:last-child {
border-bottom: 0;
}
#sidebar-bottom .text {
line-height: 20px;
}
/* Home, forward, and backward pagination. */
.blog-pager {
padding-top: 10px;
margin-top: 15px;
text-align: right !important;
}
#blog-pager {
padding: 40px 0 0;
}
#blog-pager a {
display: inline-block;
}
.blog-pager i.disabled {
opacity: 0.2 !important;
}
.blog-pager i {
color: black;
margin-left: 16px;
opacity: 0.54;
}
.blog-pager i:hover, .blog-pager i:active {
opacity: 0.87;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
.gplus-profile {
background-color: #fafafa;
border: 1px solid #eee;
overflow: hidden;
width: 212px;
}
.gplus-profile-inner {
margin-left: -1px;
margin-top: -1px;
}
/* Sidebar follow buttons. */
.followgooglewrapper {
padding: 12px 0 0 0;
}
.loading {
visibility: hidden;
}
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 40px !important;
}
/* ADB */
.adb-hero-area {
min-height: 104px;
background-color: #073042;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
z-index: 5;
position: fixed;
width: 100%;
}
.adb-hero-logo {
height: 80px;
position: absolute;
top: 12px;
left: 16px;
}
.adb-footer-btm {
display: flex;
margin: 0 24px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 40px;
}
.subscribe-btn {
color: black;
background-color: #3DDC84;
border-radius: 100px;
font: 500 16px/24px Android Euclid,Roboto,sans-serif;
padding: 12px 24px;
border: 0;
}
.adb-footer-info {
align-items: center;
display: flex;
padding: 0;
margin: 9px 0 0 -8px;
font-size: 13px;
}
.footer-list {
list-style: none;
padding: 0 8px;
}
.subscribe-info {
list-style: none;
padding: 0 8px 0 0;
font-size: 13px;
color: black;
}
.footer-newsletter {
display: flex;
align-items: center;
}
.adb-header-inner {
display: flex;
align-items: center;
}
.adb-header {
background-color: white;
color: #fff;
height: 48px;
left: 0;
overflow: hidden;
padding: 36px 24px;
right: 0;
top: 104px;
z-index: 4;
display: flex;
align-items: center;
position: fixed;
border-bottom: solid 1px #DADCE0;
}
.adb-shadow {
margin-top: 48px;
height: 1px;
width: 100%;
position: fixed;
background: white;
z-index: 2;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
}
.adb-logo-box {
display:inline;
}
.adb-burger-box {
display: none;
margin: 0 16px 0 0;
}
.adb-search-box {
display: none;
margin: 0 0 0 16px;
}
.adb-htag-box {
display: flex;
align-items: center;
}
.adb-header-tags {
padding: 0 24px 0 0;
}
.adb-header-tags ~ .atb-header-tags {
padding: 0 24px;
}
.adb-header-tags a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #5F6368;
}
.adb-header-tags a:hover {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #073042;
}
.more-dropdown {
display: none;
}
.dropdown-icon {
transition: all 0.3s;
}
.adb-header-logo {
display: inline-block;
vertical-align: -11px;
width: 134px;
height: 32px;
}
.adb-header-title {
color: #fff;
display: inline-block;
font-size: 20px;
font-weight: normal;
}
.adb-header-links {
border-left: 1px solid rgba(0, 0, 0, .1);
display: block;
left: 250px;
list-style: none;
margin: 0;
padding: 12px 0 12px 18px;
position: absolute;
top: 0;
}
.adb-header-link-item {
display: inline-block;
}
.adb-header-link, .adb-header-link:visited {
color: #fff;
display: inline-block;
font-weight: 500;
opacity: .7;
padding: 12px 9px;
text-transform: uppercase;
vertical-align: 2px;
}
.adb-header-link:hover, .adb-header-link:focus {
color: #fff;
opacity: 1;
}
.adb-header-console, .adb-header-console:visited {
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
color: #fff;
float: right;
font-size: 14px;
font-weight: 500;
line-height: 28px;
padding: 4px 10px;
position: relative;
text-transform: uppercase;
transition: box-shadow .2s;
z-index: 60;
}
.adb-header-console:hover {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
color: #fff;
}
.adb-header-console:focus {
background-color: rgba(63, 81, 181, .1);
color: #fff;
}
.adb-header-console-image {
vertical-align: -5px;
}
.adb-hero {
background-color: #dcedc8;
margin-top: 64px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
color: #414141;
display: inline-block;
font-weight: 500;
margin: 25px 25px 0;
}
.adb-hero-inner {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAc4AAADZCAMAAACenCAVAAAAvVBMVEXc7cjY68PT6bvR57fQ57bY6sPZ68TU6bvR6LfP5rTQ57XR57jW6r7b7cfa7MbS6LnS6Lrb7cbQ6Lfb7MbX6r/Z68PY6sLV6b7U6b3U6r3T6LnX68Da7MXP57Tb7Mfc7cfW6b/P57XS57nY68LY68HU6L3W6r/W6b7T6brX6sDV6rzQ57fa7MTV6b3T6Lra68TR57bX68HW6sDS57jU6bzO5rTP5rXZ7MXR6LbZ68XX6sHT6LvV6bzS6LjZ7MILrTuqAAAIyklEQVR4AezXhXEkUQwE0B6+Xhg8MzND/smZ4UsLBSb9Kr0UhI1vl6RZnqUFlnBl9Y+j8WQK4+qGr9oOi7iKr0YFTOt6vhsPmM81/FDAspafUszl/vNTXsOuFYZWMYfrRgyswa51hjLM4TYYGsOuTQpbgNO2dyjAroxCvgunpZT2YFZDaQKnlFRg1z6lgxpOOqS0CbtqKutwwhGVYxh2QqWGC/WUMlhWH1BK4QKnVFZh2hmVEh/cXk7pHLbt5pQafHCT6Jr9gsoR3riayiXMyyhd4Y27jDDHJVQu8MJdU7lBBBpKoz08c7eU8gERuKNyhiduhcopolBRqeGAMaV7xKE7eGzvThQTVZooAJdC1AM2qGg0BhdCrpnciVE0i9dZ3v+t/n2ZMBtJGpsu6nuCrNJddar4/gAnMmuP/GPk3JFwrL2QKw3FD26GyGmQNXbIGVHNKdfmYraDl/ZUcxO8NNtIW888bafDC7tP5R2qtQfL724N5AypxjbIGdseWHMV1VfP+rrnZvbTerMEhHb2Py4eA7KX9AwD5LSppi5ZdPTHEhv6cd5mSjZaeMW/Dc66TEpkO+Q0qIbUE5es6ke85FMN/YGXZs9yQLdXYGVASGJDBaMZXsQouzau/fzfitNsKvpUL1O8dFBksb+Q80C1coaco7RtLeYzO9tHCV7qUY0ckXPGribSoNpQB3Z1MbWtby1hiZwWw35CRjUReRx7Sg5ecqgmJiyHOxrIWVEtPDPNY/TMx4bmczq5T3jpSRELm1NWodVmlGY364tP4ZXvdw5u8jjDf8yQJJ7j+2HYfBh3d+l5HFB5RmyzjM3yh8iDUbb6M9y7j3idgxM+3BzTuPzyXmdOTARJaUc8tUmX7ekB7+aF7dV1a0G6pIx3CkxKmBBUreMfvS0086aTnZZf6kfG53mlN/0UnS2bW5Socz9OA737eM6JkZWu4uUiXfVcnIT34eZM6Yq9hcRKR0OpL7i9cHBi/udjrCOUuiFWsnc2/oKsfYAhXvM2lsj4S/7b2/L9y4cODDu0j8HbBzqSPvutOksqpDH+gorw1+dvHLcaEzv3r4+0BdmnBJXi9bL+G6qaEbFz98rF4sEwnKGKrrrxK3sOuzoMlM9i+ql47KPC/HX8inTxljgKUHBYI1g6qDx/HBct76XETfHF4v3hHpZwVgH9APc0TfFSyTwLZ7DJ9FYxmZvTv1h89DmBdbyHEX0rcuuTRB38fNuQ2vmw1GAYMSjv6ZwQbD0ksFlz9LPW7gMxNv3RBVtlDqz3cbWo32rmEXLGFExcsJBMnilGzk29pleT5gx8fLiq2XzyM2rllpiboEYGxF2UoD6+EntL1Ma+TkOP/LVqNJLM3yeqgayDmnjqKmIu3aNGDhlx1pqiZvyUuAqaqKGwRRwt1gnqqR0QO5ce6ms5J1ZGIWqtkxIf0QNqb7ohJjIXgFjPiYF4j38R2wbZTk1m+C/xqU9WSzv4hkgyVkcg0QvIUg0XEHleRjaK/gQb8g/a2EL8hHcky6zxC+JTQBa5c/BL4nBO1lgl+B2xJjv0QxQgnA1ZoOGhGHFNldedoShxMadKU/d4BeEEVGF3Ll5FJF+psm7Bh5xwHyDeoKeogvp7iDfpbKhyWgeIN/JSqpjbBOLtlqwq7qJNFdKGeKdQUUUEIcS7Df6iSngeQAPhtqgCWi60EElKxjUSsCFriK5nYEMuLDtoJSZk0BiaiaYsZGPlXnEqHoipIhOaKIW4WnD63xThgtP/pthHdFqfUCIRRvK/KZ+3VX1uiulc7puc3EstSOpD9d7+LYGTFfiQenyKkxE3VLLGI9iQkcH4CackzqlEwRYnJbwNlUb5ODHhBVSWHk5O+JFMLkh5qFYxLxnoPZ9BmJGRdrELNuTddNEAwhg34NSvFnvSqgth1ANpNEIZkhkYSg4dt9rHocCFXvvxWUD/ELR2TQ98hMOWon+Ks7YLrZI70iWETu6yT99Qt3uw4A4j+lY6hU4dVcloUFdR3tkA1kt29J1zHxr1SIsGNAoDnvGjMCj/CLmr3INzQj9x5sFm41Ns933c0PtNoc+O0bJNA9+Xryp14+zSL9x5PH6beS2vQrfP0exkQcMG08BdCn1SepeFc8KPijWs5MxPdzN4CipzR2nQb8wdnu0O5UKbkN7h/LQZ/a9Ms+pZNYp9kQt9Yvo9H3Yx8H15QSXm/qZUQMY0ybOCPtNKlIMuqYAogW1SKkBBoxW9SXSARoqKCGGbBRVxBY0C85V3h2mb/MrASGxIb3BnYlaxwXRmLwUMFxMc6NSlQvpM6nt5MXTylOl00JGKYTqxp6DVBb1SkECrlOmvs0HFGA7efjA0dwrLfKVC5tDLp1dpGHrGKFjm0tCZYEWvMTA0NrOBZVZUSMtoLn4I3T5RISnTZTGXJrea9BPotmU6QrqlQi6gXWx05V5MRTiwTaD/4aW5FN8y9pCJYZ2usSPBNRUzNfapNIZ1fGM7KQdUSMNYJyl6Ajh2yAKTBUYHpfCZruJ0jB3wCpVur1GSIf3G8yOPlG1ePDN46d2iJEmLR+86L4lNBRQTZXK/6UAxunMWDxC3Da6omXsoz5XiOa8/NfV9JYHRXVBXiudG8r0y9Jmzpl87oFSDFv3Qog2rDTb0Q6qJckX0K7coWTKkHxh1YLmkSz/Q6JjNKnVQOj+lnM0nMPDxmnLuPhjej5rhFLbjmP4nOF6BCXfdov8JLkPj+xcdnMjh03p3nWXLBwesuB/+GGbHXbc5wIkkSt7CwEmXU1lGbPX3OYVBt5y2Yoov9EN/QVhpJK9xZL/7P4Kw1LO8iIH7qxx8CEu5zG8pcldpQ1hrSjnBI4S9YnrpBsJiEzkIcfIkByFWUqkIcdKjb7kQdos49a3Fjv7vE4TlfPoflYAPuXoeIaw3pv+6h7CeQ/8RPYIP6XpegwGxknMtwxcqK7AgAqkhcDKkf3oAI9LE9sCDWGhf4S8M70peggnxQERTMCFcIjUDF+KOUrAhhvQANkT4dwEsPvJYWz4QAAAAAElFTkSuQmCC');
background-position: bottom right 70px;
background-repeat: no-repeat;
background-size: auto 100%;
margin: 0 auto;
max-width: 980px;
padding: 0 60px;
position: relative;
}
.adb-hero-back-icon {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.adb-hero-title {
font-size: 22px;
line-height: 28px;
padding: 24px 24px 0px 112px;
}
.adb-hero-title a {
color: #FFFFFF;
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500;
}
.adb-hero-summary {
font-size: 16px;
line-height: 24px;
padding: 8px 24px 8px 112px;
}
.adb-hero-summary a {
color: rgba(255, 255, 255, 0.9);
}
.adb-hero-description {
color: #6f7172;
font-size: 16px;
margin: 0;
max-width: 440px;
padding-bottom: 32px;
}
.adb-hero-search {
position: absolute;
top: 19.35%;
right: 1.94%;
}
.adb-hero-search .searchBox input {
border: 1px solid #80868B;
border-radius: 4px;
color: white;
}
.adb-hero-search .searchBox input::placeholder {
color: #F1F3F4;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
padding-left: 12px;
}
.adb-hero-link {
position: absolute;
right: 1.67%;
top: 64.52%;
}
.adb-hero-link a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #3DDC84;
letter-spacing: 1.4px;
}
.adb-hero-arrow {
display: inline-flex;
font-size: 24px;
vertical-align: middle;
}
.adb-socials-box {
display: flex;
position: absolute;
right: 1.67%;
}
.adb-socials-category,
.adb-socials-divider {
display: flex;
align-items: center;
}
.adb-socials-divider {
color: #DADCE0;
font-size: 40px;
font-weight: 100;
margin: 0 20px;
}
.adb-socials-category img,
.adb-footer-social-links img {
height: 24px;
}
.adb-footer-social-links-img {
margin-right: 20px;
}
.adb-hero-subscribe, .adb-hero-subscribe:visited {
background-color: #90c653;
color: #fff;
display: inline-block;
border-radius: 3px;
margin: 25px 0 60px;
padding: 13px 32px;
text-transform: uppercase;
}
.adb-hero-subscribe:hover, .adb-hero-subscribe:focus {
background-color: #333;
}
.adb-footer {
margin: 32px auto 64px;
}
.adb-footer-more {
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #f0f0f0;
padding: 30px 0;
}
.adb-footer-more a {
color: #000;
display: inline-block;
font-size: 20px;
font-weight: 300;
margin-right: 16px;
}
.adb-footer-social {
float: right;
margin-top: -62px;
}
.adb-footer-social a {
background-color: #ccc;
background-position: center;
background-repeat: no-repeat;
background-size: auto 16px;
border-radius: 50%;
display: inline-block;
height: 36px;
margin-left: 16px;
transition: background-color .1s;
width: 36px;
}
.adb-footer-social-youtube {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAQAAAAxWje/AAABLUlEQVQ4y6WUvUoDYRBFr42gCdhK8AV8BwsVC0FQfIQUgr5DIKJoGy1CfAaDq1hIGn8K2xDSaBc1wUJJEYmbkDXssdi1Mrvfst9tZ+bAzNwZSZLEAmvsUKTCBQ80eaWLyxiAMS5dXmhyT5UyBfIsM68/McM1aXRDJgCUSKsTSWQZpAa4ZMUmNtoSRxGhbd4TAI7F1eSIxBwVfAPgUtSjAJLEEk+xgLroxAEkpikyigS0RS8eIEks8hgB6ImhGSAxxS5fE9JGwksCkCRyOP/SfPFjC0jawl5UC9ZDbBvXuB+zxjezkZ5NRnJirHxmtLIjDq2O6UBsWJ3zut1D+WZWEqepAaVg0hlqqcpr4VMNbbpKngJlqtzRoMUnfTx8fDz6fNCiwS3n4VtfIRdU/gLTrSb7DGWLcQAAAABJRU5ErkJggg');
}
.adb-footer-social-youtube:hover {
background-color: #f44336;
}
.adb-footer-social-gplus {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAUCAQAAACpWpz6AAABJUlEQVQ4EZXBTUoCYQDH4X9hTS3Cja0Kyb2X6BCJoLlr1aKwK1QHCMMzWLiqTcuWXaAWQWIlU1DQh4QJ+Wt4X95x0hGn55FCeGzSpMUXXW45ocSC/oMiHUZ1KCgZZqkzyZaSoM7QgCd8BlgXLGo6ijgv7JJRgAxV3jjDUwwMOXh0sK5ZUQRZ5hQLQw4VrA/WlBCGHJpY+0oMQw5trLxCjNtTgFiij5VSiHFHChBL9LFSCjGurgCxRBsrrxA+Pj4+Pl2sQ0VgyKGJdaAYNLAqisCQQxnrk5xGkKOHlVUEhhw8HrFuWFUEaa6wLvUHhoYo4LxSZVkBlihzh7OuaagR9YzPD0PHmo5ZakzSIKVk2OCBUe/sMKPkmKfEKS16fHPPOduklcAvR50zMVwhTI4AAAAASUVORK5CYII=');
}
.adb-footer-social-gplus:hover {
background-color: #f44336;
}
.adb-footer-social-twitter {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAQAAAB0gUQ+AAABI0lEQVQ4EY3BQShDAQDH4f+zTSyJuLgoLlwclYOTHCwHu9ouiLRScpUmNwduDkpCSTs4LAeJhINoOTo4ctHkskyJtf20vWbe3tvb+z7JFUGibLHPMj0qoYEWSYzRKkdMkKbsm3m6WSRFuyQeuKNNNoTJU61ABL8kssAjvbKgiTR2V+ywJol3ijJMY+gP4zhLEpDEGWUpwvhUQgwnh/hURIT/3thjjmGWcBKViSCXeBWSiWdO+MGbPpm4watPfDIRxasLVXCANwuqwCDGK/V80akKGjnmmgLutmXFOvV80CUrAiRxNys7DCY5J4OzXdVCP7c4OcIvO5oJkSCHXZ5VDFkxwilP5HB2z6Cc0EGcF6plSTAqNxgMMEWcTTZYYYYhAqrpF0uh1zgYi1hVAAAAAElFTkSuQmCC');
}
.adb-footer-social-twitter:hover {
background-color: #55acee;
}
.adb-footer-social span {
display: none;
}
.adb-footer-related {
padding-top: 8px;
}
.adb-footer-related a {
color: #999;
font-size: 12px;
white-space: nowrap;
}
.adb-footer-related a:not(:last-child)::after {
content: '|';
cursor: default;
margin: 0 7px 0 10px;
}
.adb-footer-section {
margin: 48px auto;
max-width: 700px;
}
.adb-footer-title {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #3C4043;
margin-bottom: 24px;
}
.adb-footer-columns {
display: flex;
justify-content: space-between;
}
.adb-other-blogs-title img {
margin-right: 8px;
vertical-align: -12px;
}
.adb-footer-social-label {
display: flex !important;
align-items: center;
}
.adb-footer-column a,
.adb-footer-social-label,
#footer-subscribe .tab h2 {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
padding: .85em 0;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-btm a {
color: #000;
font-family: Android Euclid, Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.25px;
opacity: .7;
transition: opacity .1s;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-column a {
opacity: .7;
transition: opacity .1s;
}
.adb-footer-column a:hover {
opacity: 1;
}
.adb-footer-social-links {
margin: 0 0 20px;
}
#footer-subscribe .widget {
margin: 0;
}
#footer-subscribe .tab {
display: flex;
align-items: center;
}
#footer-subscribe .tab img {
height: 16px;
}
.adb-label-view-more-toggle {
cursor: pointer;
}
.adb-label-view-more-toggle::after {
content: '\00e5c5';
float: right;
font: 2em / .7 Material Icons;
opacity: .6;
}
.adb-label-view-more-toggle.active::after {
transform: rotate(180deg);
}
/** Desktop **/
@media (max-width: 900px) {
.col-right {
display: none;
}
.col-main {
margin-right: 0;
min-width: initial;
}
.cols-wrapper {
min-width: initial;
}
.adb-hero-inner {
background-image: none;
}
}
/** ADB header breakpoint **/
@media (max-width: 768px) {
.adb-header-links {
display: none;
}
.dropdown-nav {
display: none;
}
.adb-header {
padding: 12px;
text-align: center;
}
}
@media (max-width: 1196px) {
.breakpoint-hide {
display:none;
}
.more-dropdown {
height: 50px;
display: flex;
align-items: center;
}
}
@media (max-width: 915px) {
.adb-header {
height: 0;
margin: 0;
padding: 0;
display: none;
}
.adb-header-tags {
display:none;
}
.more-dropdown {
display:none;
}
.dropdown-nav {
display: none;
}
.adb-hero-summary,
.adb-hero-link,
.adb-socials-category {
display: none;
}
.adb-hero-title {
padding-left: 152px;
}
.adb-hero-logo {
height: 52px;
top: 12px;
left: 120px;
}
.adb-footer-section {
margin: 0 auto;
}
.adb-footer-btm {
margin: 0 24px 40px;
}
.adb-hero-area {
min-height: 76px;
}
.adb-burger-box {
display:inline;
position: absolute;
top: 17px;
margin-left: 24px;
font-size: 32px;
color: white;
}
.adb-hero-title a{
margin-left: 40px;
}
}
/** Tablet **/
@media (max-width: 712px) {
.header-outer, .cols-wrapper {
padding: 0 40px;
}
/* ADB */
.adb-hero-inner {
padding: 0 40px;
}
.adb-hero-title {
font-size: 16px;
padding-left: 132px;
}
.adb-hero-logo {
left: 100px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 36px;
}
.adb-other-blogs-list {
columns: auto;
}
.adb-other-blogs-title {
font-size: 20px;
}
.adb-other-blogs-title img {
height: auto;
vertical-align: -6px;
width: 32px;
}
.adb-footer-section {
margin: 0 24px;
}
.adb-footer-more {
padding-bottom: 75px;
}
.adb-footer-social {
float: none;
margin-bottom: 35px
}
.adb-footer-social .adb-footer-social-youtube {
margin-left: 0;
}
}
/** Small tablet **/
@media (max-width: 600px) {
.header-inner .google-logo {
top: 32px;
margin-top: 0;
}
.header-inner .google-logo img {
height: 56px;
width: auto;
/*
height: auto;
width: 188px;
*/
/* Override any optical adjustments at desktop size. */
top: 0 !important;
}
.header-left {
left: 0;
top: inherit;
bottom: 24px;
}
.adb-footer-columns {
display: block;
}
.adb-footer-column {
margin-bottom: 48px;
}
.adb-footer-column a {
opacity: 1;
}
.adb-footer-social-label {
padding: 0;
}
.adb-footer-column .widget a {
padding: 0;
}
.footer-newsletter {
margin-top: 16px;
}
.subscribe-btn {
width: 100%;
}
.adb-hero-search {
display: none;
}
.adb-search-box {
display:inline;
position: absolute;
top: 24px;
right: 24px;
font-size: 24px;
color: white;
}
}
/** Mobile **/
@media (max-width: 480px) {
.header-outer, .cols-wrapper {
padding: 0 16px;
}
.adb-hero-logo {
height: 28px;
top: 24px;
left: 76px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 16px;
}
.cols-wrapper {
margin-top: 0;
overflow-x: auto;
}
.post-header .publishdate, .post .post-content {
font-size: 16px;
}
.post .post-content {
line-height: 28px;
margin-bottom: 30px;
}
.post {
margin-top: 30px;
}
.byline-author {
display: block;
font-size: 12px;
line-height: 24px;
margin-top: 6px;
}
#main .post .title a {
font-weight: 500;
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
}
#main .post .post-header {
padding-bottom: 12px;
}
#main .post .post-header .published {
margin-bottom: -8px;
margin-top: 3px;
}
.post .read-more {
display: block;
margin-top: 14px;
}
.post .tr-caption {
font-size: 12px;
}
#main .post .title a {
font-size: 20px;
line-height: 30px;
}
.post-content iframe {
/* iframe won't keep aspect ratio when scaled down. */
max-height: 240px;
}
.post-content .separator img, .post-content .tr-caption-container img {
margin-left: -16px;
max-width: 100%;
}
.post-content table {
table-layout: fixed;
width: 100%;
}
/** List page tweaks. **/
.list-page .post-original {
display: none;
}
.list-page .post-summary {
display: block;
}
.list-page .comment-container {
display: none;
}
.list-page .label-footer {
display: none;
}
.list-page #main .post .post-footer {
border-bottom: 1px solid #eee;
margin: -16px 0 0 0;
padding: 0 0 20px 0;
}
.list-page .post .share {
display: none;
}
/** Detail page tweaks. **/
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 32px !important;
}
.detail-page .label-footer {
margin-bottom: 0;
}
.detail-page #main .post .post-footer {
padding-bottom: 0;
}
.detail-page #comments {
display: none;
}
/* ADB */
.adb-header-console {
display: none;
}
.adb-hero-inner {
padding: 0 16px;
}
.adb-hero-title {
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
font-weight: 500;
line-height: 30px;
padding-left: 80px;
}
}
/* Fixed-position sidebar for larger screens */
@media screen and (min-height: 700px) and (min-width: 1100px) {
.col-right .section {
max-height: calc(100vh - 197px);
overflow: auto;
}
.col-right.scroll-start {
left: 50%;
margin-left: 241px;
position: fixed;
top: 96px;
}
.col-right.scroll-end {
bottom: 485px;
position: absolute;
top: auto;
}
}
[data-about-pullquote], [data-is-preview], [data-about-syndication] {
display: none;
}
#imgFull {
display: block;
margin: 10px auto;
width: 90%;
border: 0;
padding: 0;
}
#imgHalf {
display: block;
margin: 10px auto;
width: 50%;
border: 0;
padding: 0;
}
#flexParent {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
#flexImg {
width: 90%;
margin: 0;
padding: 0;
border: 0;
}
#imgCaption {
text-align: center;
font-style: italic;
font-size: 85%;
margin: -5px 0 10px 0;
padding: 0;
border: 0;
}
#floatRight {
float: right;
width: 45%;
margin: 5px 0 5px 5px;
padding: 0;
border: 0;
}
#floatLeft {
float: left;
width: 45%;
margin: 5px 5px 5px 0;
padding: 0;
border: 0;
}
</style>
<style>
.loading {
visibility: visible;
}
</style>
</head><body>
<div class="adb-detail">
<div class="adb-detail__info">
</div>
<div class="adb-detail__title">
</div>
<hr>
<div class="adb-detail__content">
<div>
<meta name="twitter:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI0RiyyrPaaVPxXBOu8d8y9wAUWn_45S30v6PSfecI6OKJNKDWdm6gsiLK_14cxBUXhlnk67rK358EWhqvVABQqRVcjKo6iYmP9uPeNBAC3pdSQlMkNoit8dpmSxiymkqleXSeWNqB_q0upzqPX-waFeELV1B7JlaWGXvHqnEUfKaV-QxfGfvS8lIwjNQ/s1600/TAS-Social-Q1-AD.png">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI0RiyyrPaaVPxXBOu8d8y9wAUWn_45S30v6PSfecI6OKJNKDWdm6gsiLK_14cxBUXhlnk67rK358EWhqvVABQqRVcjKo6iYmP9uPeNBAC3pdSQlMkNoit8dpmSxiymkqleXSeWNqB_q0upzqPX-waFeELV1B7JlaWGXvHqnEUfKaV-QxfGfvS8lIwjNQ/s1600/TAS-Social-Q1-AD.png" style="display:none">
<em>Diposting oleh Anirudh Dewani, Direktur Hubungan Developer Android</em>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPcej6RGlKIMCO01jywpjhx06BwCX4H99IxkpeZ-kOYOky0wayXs55BenCgg51d03jwUNyWIa3LqfHqfzZew9kj7o4o8x0QilXkmvOVILoz9V8EpMg0Tw1diGmgmIfNS3nAyTtNpjWEHQqToRo2qWHpaQvPVX4yhEz_kzARdB-F-YglL3jIeAgtDTjBY8/s1600/image%20%285%29.png"><img border="0" data-original-height="800" data-original-width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPcej6RGlKIMCO01jywpjhx06BwCX4H99IxkpeZ-kOYOky0wayXs55BenCgg51d03jwUNyWIa3LqfHqfzZew9kj7o4o8x0QilXkmvOVILoz9V8EpMg0Tw1diGmgmIfNS3nAyTtNpjWEHQqToRo2qWHpaQvPVX4yhEz_kzARdB-F-YglL3jIeAgtDTjBY8/s1600/image%20%285%29.png"></a>
<p>Sebelumnya hari ini, di Mobile World Congress (MWC), sebuah konferensi tahunan yang menampilkan perangkat seluler terkini, Android dan mitra kami meluncurkan serangkaian goodie baru, termasuk perangkat wearable, perangkat foldable, serta sejumlah fitur baru untuk pengguna Android. Teruslah membaca artikel di bawah ini untuk mengetahui bagaimana Anda, sebagai developer, dapat memanfaatkan fitur dan perangkat baru yang sedang dirilis ini. Dan hanya dalam waktu seminggu, pada hari Kamis tanggal 7 Maret pukul 10.00 PT, kami akan memulai episode baru #TheAndroidShow, event langsung triwulanan kami di YouTube dan di <a href="http://developer.android.com/events/show" target="_blank">developer.android.com</a>, tempat kita akan mendalami lebih jauh topik ini.</p>
<iframe class="BLOG_video_class" allowfullscreen="" youtube-src-id="3D4k2z8Wmw0" width="100%" height="413" src="https://www.youtube.com/embed/3D4k2z8Wmw0"></iframe><br>
<h3>Temukan jam tangan baru dari OnePlus dan cara kami meningkatkan daya dengan antarmuka hibrid Wear OS</h3>
<p>Perangkat wearable dipamerkan di MWC minggu ini, dan salah satu favorit kami adalah OnePlus Watch 2, yang didukung dengan versi terbaru Wear OS (<a href="https://android-developers.googleblog.com/2023/10/wear-os-4-is-now-stable-and-available-on-google-pixel-watch-2.html" target="_blank">Wear OS 4</a>). Sebagai bagian dari upaya berkelanjutan kami guna meningkatkan pengalaman pengguna <a href="https://wearos.google.com/" target="_blank">Wear OS by Google</a>, kami telah melakukan perubahan mendasar pada platform dan secara signifikan mengembangkan kemampuan antarmuka hibrid Wear OS yang meningkatkan dua bidang utama: daya dan performa. Sebagai developer, Anda dapat memanfaatkan API Wear OS yang ada untuk memperoleh pengoptimalan tanpa upaya lainnya lagi – tidak perlu perubahan kode! <a href="https://android-developers.googleblog.com/2024/02/wear-os-hybrid-interface-boosting-power-and-performance.html " target="_blank">Anda dapat membaca selengkapnya tentang update ini di sini.</a> </p>
<img><div style="text-align: center;"><img alt="Gambar tiga orang yang mengenakan OnePlus Watch 2" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY2MRgmDxsZC8Tni50uvlDqwljNbb4WyRSEHDbE4PsY_-0BL-P0W49r7v6TMX8gH39BxcjRaPNr2ZdYhbHF9vkopYBMLPE2BSmr_Nq2bC60P3hRkiNeZMgbZSyazYw5vUXprwD3sJQswKcsqzLTXv-HK-F6o-Bax9qNYmE5mNUPNLqw774no8nK4r7X7U/s1600/Oneplus_social.png" width="100%"></div><br>
<h3>Beberapa fitur baru untuk pengguna Android</h3>
<p>Google merilis 9 fitur baru yang dapat dimanfaatkan pengguna Android di seluruh aplikasi Google, Anda dapat <a href="https://blog.google/products/android/new-android-features-february-2024" target="_blank">membaca selengkapnya tentang fitur tersebut di sini</a>. Untuk developer, kami ingin menyoroti beberapa cara untuk memanfaatkan berita ini di seluruh pengalaman yang Anda buat ke dalam aplikasi Anda:</p>
<ul style="text-align: left;"><ul>
<li><b>Lebih banyak tempat bagi pengguna untuk melihat data Health Connect mereka, kini di aplikasi Fitbit:</b> Dengan izin dari pengguna Anda, <a href="https://developer.android.com/health-and-fitness/guides/health-connect" target="_blank">Health Connect</a> adalah cara utama untuk menghubungkan dan menyinkronkan aplikasi kesehatan dan kebugaran favorit mereka, melihat semua data di satu tempat, dan tetap mengontrol privasi mereka. Dengan menyiapkan Health Connect di aplikasi seluler Fitbit untuk Android, pengguna akan mendapatkan ringkasan data kesehatan dan kebugaran mereka dari seluruh aplikasi di satu tempat. Anda dapat <a href="https://android-developers.googleblog.com/2023/08/health-connect-brings-together-peloton-oura-lifesum-for-deeper-health-and-fitness-insights.html" target="_blank">bergabung dengan developer seperti Peloton, ŌURA, dan Lifesum</a> yang menggunakan Health Connect untuk memberikan wawasan kesehatan dan kebugaran yang lebih mendalam kepada penggunanya, <a href="https://developer.android.com/health-and-fitness/guides/health-connect" target="_blank">mulai sekarang</a>!</li></ul></ul><ul style="text-align: left;"><ul>
<li><b>Tambahkan dukungan Stilus, seperti yang dilakukan Google Docs: </b> Dengan markup Google Docs, Anda dapat <a href="https://www.android.com/new-features-on-android/?feature=google-docs-markups&utm_source=blog&utm_medium=owned&utm_campaign=y24q1spotlight/#gms-filter" target="_blank">menambahkan anotasi tulisan tangan ke Dokumen</a> dari ponsel atau tablet Android cukup dengan menggunakan jari atau stilus. Google Docs memanfaatkan dukungan stilus; <a href="https://developer.android.com/guide/topics/large-screens/support-advanced-stylus-features" target="_blank"> Anda dapat mempelajari lebih lanjut cara menambahkan dukungan untuk Stilus di sini</a>.</li></ul></ul><ul style="text-align: left;"><ul>
<li><b>Gunakan Kartu untuk Wear OS, seperti yang dilakukan Google Maps:</b> Dengan <a href="https://www.android.com/new-features-on-android/?feature=transit-directions-on-google-maps-for-wear-os&utm_source=blog&utm_medium=owned&utm_campaign=y24q1spotlight/#gms-filter" target="_blank">petunjuk arah angkutan umum di Google Maps untuk Wear OS</a>, Anda dapat menyimpan ponsel di saku dan melirik pergelangan tangan untuk memastikan Anda naik bus, kereta api, atau kapal feri. Pengguna dapat melihat petunjuk arah angkutan umum ini melalui Google Maps menggunakan <a href="https://developer.android.com/design/ui/wear/guides/surfaces/tiles" target="_blank">Kartu</a> yang menyediakan akses cepat ke informasi dan tindakan yang diperlukan pengguna untuk menyelesaikan sesuatu. <a href="https://developer.android.com/training/wearables/tiles" target="_blank">Anda dapat mempelajari selengkapnya cara membuat Kartu untuk aplikasi Anda di sini</a>.</li>
</ul></ul>
<img><div style="text-align: center;"><img alt="Gambar bertuliskan 'Update baru di Android' dengan gambar smartwatch, laptop, dan Android Auto" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY6auQvdiAc77ulf-KnhpPWzh43OHJp9xTds7BPw8HWrf_SrGOCJ_45AAV8ABdQzgD4ooHD4z7XT41DTaXivXAAO9MDHmjuIvDnfW5UoQ48_gRaJMtd6SB1uzEzqdmVRrsavcmH1Asot1ob9EgqKXtLbRMxIf5axHi5AIQofNgTc5pv9QLmdzNCuPPvZM/s1600/image2.jpg" width="100%"></div>
<h2><span style="font-size: x-large;">Episode baru #TheAndroidShow, ditayangkan langsung pada tanggal 7 Maret pukul 10.00 PT. Kirimkan pertanyaan #AskAndroid Anda kepada kami sekarang! </span></h2>
<p>Anda dapat bergabung dengan kami pada tanggal 7 Maret pukul 10.00 PT untuk menonton episode baru <b>#TheAndroidShow.</b> Dalam pameran triwulanan ini, kami akan merilis perangkat foldable Android dan layar besar terbaru yang bisa Anda gunakan, ditambah di balik layar Gemini Nano dan AICore.</p>
<p>Kami akan mengadakan Tanya Jawab #AskAndroid langsung dengan tim tentang pembuatan Android; Anda dapat bertanya kepada kami tentang pembuatan aplikasi menakjubkan di seluruh perangkat, Android 15, Compose, Gemini, dan lainnya, menggunakan #AskAndroid di X atau di YouTube. Pakar kami siap menjawab pertanyaan Anda secara langsung!</p>
<p><b>#TheAndroidShow: 7 Maret pukul 10.00 PT</b>, disiarkan langsung di YouTube dan <a href="https://developer.android.com/events/show" target="_blank">d.android.com/events/show</a>!</p>
</div>
<hr>
</div>
</div>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-15816483788607291582024-02-22T09:47:00.005+07:002024-03-18T09:52:12.544+07:00Menambahkan kemampuan pemindaian dokumen dengan mudah ke aplikasi Anda menggunakan ML Kit Document Scanner API<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="http://android-developers.googleblog.com/2024/02/ml-kit-document-scanner-api.html"/>
<meta name="original_url" content="http://android-developers.googleblog.com/2024/02/ml-kit-document-scanner-api.html"/>
<style id="page-skin-1" type="text/css"><!--
body {
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
-webkit-font-smoothing: antialiased;
color: #202124
}
h1 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px
}
h2 {
font-size: 30px;
line-height: 40px
}
h2,
h3 {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500
}
h3 {
font-size: 24px;
line-height: 32px
}
h4 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 26px
}
h5 {
font-size: 16px;
line-height: 24px
}
h5,
h6 {
font-family: Roboto, sans-serif;
font-weight: 600
}
h6 {
font-size: 14px;
line-height: 22px
}
.display {
font-family: Roboto, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 67.2px
}
.hidden-text {
height: 1px;
overflow: hidden;
pointer-events: none;
position: absolute;
top: -10px;
width: 1px
}
img,
video {
border: 0;
height: auto;
max-width: 100%
}
body {
position: relative;
min-height: 100vh
}
body.no-scroll {
overflow: hidden
}
a {
color: #4184f3;
text-decoration: none
}
a:focus,
a:focus-visible {
outline-offset: -2px
}
.content-wrap {
padding-top: 200px;
max-width: 800px;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:915px) {
.content-wrap {
padding-top: 100px
}
}
.full-width {
width: 100%
}
.icon-link {
height: 42px;
width: 132px;
border-radius: 80px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: baseline;
-ms-flex-pack: center;
justify-content: baseline;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
background: transparent;
border: none;
color: black !important
}
.icon-link:hover {
background-color: hsla(213, 7%, 76%, .2)
}
.icon-link:focus {
background-color: hsla(213, 7%, 76%, .26)
}
.icon-link:active {
background-color: hsla(213, 7%, 76%, .32)
}
.adb-container {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto;
max-width: 1420px
}
@media only screen and (max-width:767px) {
.adb-container {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--large {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto
}
@media only screen and (max-width:767px) {
.adb-container--large {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--flex-horizontal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.section,
body {
margin: 0
}
.adb-card {
position: relative;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
margin: 40px 0;
padding: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: box-shadow .2s linear, opacity .2s linear;
transition: box-shadow .2s linear, opacity .2s linear, -webkit-box-shadow .2s linear
}
.divider {
border: none;
height: 1px;
color: #DADCE0;
background-color: #DADCE0;
margin: 0 20px;
}
.adb-card:first-child {
background-color: #d7effe;
border: none;
padding: 32px 24px 32px;
margin: 40px 20px 60px;
}
@media only screen and (max-width:850px) {
.adb-card {
max-height: unset;
padding: 0 20px
}
.adb-card:first-child {
margin-bottom: 40px;
}
}
@media only screen and (max-width:600px) {
.adb-card:first-child {
margin: 0 -20px 40px;
}
.adb-card {
border-radius: 0;
padding: 0;
}
.divider {
margin: 0;
}
.content-wrap {
padding-top: 54px;
}
}
.adb-card:focus-within,
.adb-card:hover {
-webkit-box-shadow: 0 0 36px rgba(0, 0, 0, .1);
box-shadow: 0 0 36px rgba(0, 0, 0, .1);
cursor: pointer
}
.adb-card__href {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.adb-card__image-wrapper {
overflow: hidden;
position: relative;
width: auto;
-webkit-flex-basis: 40%;
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.adb-card__content {
padding: 24px 0 0
}
.adb-card__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 600;
margin-bottom: 12px
}
.adb-card__info {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 24px
}
.adb-card__description {
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin-bottom: 48px
}
.adb-card:hover .adb-content__image-wrapper img,
.adb-card__href:focus~.adb-content__image-wrapper img {
-webkit-transform: scale(1.03);
transform: scale(1.03);
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease
}
.devsite-footer {
padding: 0 24px;
border-top: 1px solid #bdc1c6
}
.devsite-footer li {
display: block
}
.devsite-footer li a {
text-decoration: none;
font-size: 14px;
line-height: 16px;
color: #202124
}
.devsite-footer li a:focus,
.devsite-footer li a:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-linkboxes-list {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
padding: 24px 0;
border-bottom: 1px solid #bdc1c6
}
@media only screen and (max-width:767px) {
.devsite-footer-linkboxes-list {
grid-template-columns: 1fr;
padding-left: 0
}
}
.devsite-footer-linkbox {
display: block
}
.devsite-footer-linkbox-heading {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin: 0 0 4px
}
.devsite-footer-linkbox ul {
padding-left: 0
}
.devsite-footer-sites-list {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-utility nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 24px 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0
}
}
.devsite-footer-utility-button {
justify-self: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 20px;
margin-left: auto;
padding-left: 16px
}
.devsite-footer-utility-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 8px 0 0
}
.devsite-footer-utility-item:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.devsite-footer-utility-item:not(:first-child):before {
content: "|";
margin: 0 8px 0 0
}
}
.devsite-footer-sites {
border-bottom: 1px solid #bdc1c6;
padding: 24px 0 23px
}
.devsite-footer-sites-logo {
height: 32px;
margin-top: 5px;
width: 185px
}
.devsite-footer-sites-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0
}
.devsite-footer-sites-item {
margin: 0 0 0 40px
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-item {
margin: 0
}
}
.devsite-footer-sites-link {
display: block;
padding: 8px 0;
color: #202124
}
.devsite-footer-sites-link:focus,
.devsite-footer-sites-link:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-utility-link:focus {
text-decoration: underline
}
.devsite-footer-utility .devsite-footer-utility-button {
line-height: 20px;
font: 400 14px/16px Roboto, sans-serif
}
.devsite-footer-utility .devsite-footer-utility-button:before {
content: "";
margin: 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility .devsite-footer-utility-button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
margin: 18px 0 12px
}
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link {
border: 0;
background: #1a73e8;
color: #fff;
line-height: 36px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0 0 16px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px 0;
box-shadow: 0 1px 2px 0;
display: inline-block;
font: 500 14px/36px Roboto, sans-serif;
height: 36px;
letter-spacing: 0;
min-width: 36px;
padding: 0 24px;
text-align: center;
-webkit-transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s, -webkit-box-shadow .2s;
vertical-align: middle;
white-space: nowrap
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link:hover {
background: #1765cc
}
.adb-page__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px;
text-align: center;
color: #202124
}
.adb-detail hr {
border: 1px solid #dadce0;
margin: 40px 0
}
.adb-detail__title {
font-size: 40px;
font-weight: 600;
line-height: 48px
}
.adb-detail__info {
font-weight: 400;
font-size: 16px;
line-height: 24px
}
.adb-detail__content {
min-height: 200px
}
.icon-sidebar {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
top: 0;
left: -300px;
max-width: 220px;
gap: 8px
}
.icon-sidebar .share-text {
font-weight: 500;
margin-left: 4px
}
@media only screen and (max-width:1440px) {
.icon-sidebar {
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
left: 0;
margin-top: -20px;
margin-bottom: 40px;
}
.icon-sidebar .share-text {
display: none;
}
}
.copy-tooltip {
display: none;
position: fixed;
bottom: 16px;
left: 10px;
z-index: 100;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.copy-tooltip .copy-tooltiptext {
width: 200px;
background-color: #073042;
color: #fff;
text-align: center;
border-radius: 80px;
padding: 8px 16px;
}
.header__overlay {
height: 100vh;
left: 0;
position: fixed;
width: 100vw;
border: none;
background-color: rgba(0, 0, 0, .4);
-webkit-animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
opacity: 0;
top: 0;
z-index: -1;
display: none
}
.header__overlay.show {
display: block;
opacity: 1;
z-index: 800;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out
}
.social-icons__links {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
.social-icons__links path {
fill: #80868b
}
.social-icons__container-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin-right: 14px
}
@media only screen and (max-width:1000px) {
.social-icons__container-header {
display: none
}
}
.adb-blog-logo:focus,
.adb-blog-logo:hover {
opacity: .7;
text-decoration: none
}
.adb-blog-logo__image {
height: 32px;
margin-left: 0;
margin-top: 6px
}
@media only screen and (min-width:840px) {
.adb-blog-logo__image {
margin-left: 24px
}
}
.header {
position: fixed;
background: #fff;
z-index: 700;
top: 0;
width: 100%;
overflow: hidden;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
height: auto
}
.header .top-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 24px;
height: 50px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #e6e6e6
}
@media only screen and (max-width:839px) {
.header .top-row {
padding: 0 16px
}
}
.header .top-row__left,
.header .top-row__right {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 100%
}
.header .nav-row,
.header .top-row__left,
.header .top-row__right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.header .nav-row {
background: #fff;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.header .nav-items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 50px;
position: relative;
background-color: #fff
}
@media only screen and (max-width:839px) {
.header .nav-items {
display: none
}
}
.header .nav-items tab {
position: relative
}
.header .nav-items tab.active .header__nav-item:after,
.header .nav-items tab:hover .header__nav-item:after {
background: #1a73e8
}
.header .nav-items tab.active .header__nav-item,
.header .nav-items tab:focus-within a {
color: #202124
}
@media only screen and (max-width:839px) {
.header .header__cta,
.header .nav-items {
display: none
}
}
.header__search-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 6px 0 6px 24px;
overflow: hidden;
position: relative;
margin-right: 36px;
border-radius: 4px
}
@media only screen and (max-width:767px) {
.header__search-container:not(.mobile) {
display: none
}
}
.header__search-container.mobile {
margin: 0 0 20px
}
.header__search-container.mobile #searchform,
.header__search-container.mobile .searchbox {
width: 100%
}
.header__search-container .searchbox {
border-radius: 2px
}
.header__search-container .searchbox input {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
font-weight: 500;
color: #80868b;
border: 0;
margin: 0;
height: 20px;
outline: 0;
padding: 8px 8px 8px 40px;
width: 100%;
-webkit-transition: background .2s;
transition: background .2s
}
.header__search-container .searchbox input::-webkit-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input:-ms-input-placeholder,
.header__search-container .searchbox input::-ms-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input::placeholder {
color: #80868b
}
.header__search-container .searchbox input:hover {
background: #e8eaed
}
.header__search-container .material-icons {
color: #80868b;
left: 8px;
position: absolute;
top: 6px;
-webkit-transition: color .2s;
transition: color .2s
}
.header__cta {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #1a73e8 !important;
text-decoration: none
}
.header__cta.mobile {
padding: 18px 0
}
.header__cta:hover .cta-icon {
margin-left: 0;
margin-right: 12px
}
.header__cta .cta-icon {
-webkit-transition: margin-right .2s linear, margin-left .2s linear;
transition: margin-right .2s linear, margin-left .2s linear;
margin-left: 4px;
margin-right: 8px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.header__cta .cta-icon path {
fill: #1a73e8
}
.header__nav-item {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #80868b;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 18px;
height: 100%;
text-transform: none;
text-decoration: none
}
.header__nav-item:hover {
color: #202124
}
.header__nav-item.mobile {
font-weight: 500;
padding: 0
}
.header__nav-item:after {
bottom: 0;
border-radius: 3px 3px 0 0;
content: "";
display: block;
height: 3px;
left: 50%;
min-width: 20px;
position: absolute;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(100% - 24px)
}
.header__hamburger {
border: 0;
background: none;
outline: none;
padding: 0;
margin: 1px 8px 0 -4px;
padding: 8px;
color: rgba(0, 0, 0, .65);
cursor: pointer
}
@media only screen and (min-width:840px) {
.header__hamburger {
display: none
}
}
.header__side-menu {
background-color: #fff;
bottom: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
z-index: 900
}
.header__side-menu.is-open {
-webkit-transform: translateX(0);
transform: translateX(0);
width: 80%
}
.header__side-menu.is-open,
.header__side-menu__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%
}
.header__side-menu__content {
padding: 18px 16px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.header__side-menu__content .spacer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.header__side-menu__title {
font-family: Roboto, sans-serif;
font-size: 20px;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px
}
.header__side-menu__items {
list-style: none
}
.header__side-menu__items li {
padding: 12px 0
}
.header__side-menu__items tab {
position: relative
}
.header__side-menu__items tab.active .header__nav-item,
.header__side-menu__items tab:focus-within a {
color: #202124
}
.header__side-menu__bottom {
border-top: 1px solid #e6e6e6
}
.header__side-menu__logo-container {
background: #fff;
height: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 4px 16px;
border-bottom: 1px solid #e6e6e6
}
#nav .widget {
margin: 0
}
.featured__wrapper {
width: 100%;
border: 0;
background-color: #e8f0fe;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 80px 0
}
@media only screen and (max-width:767px) {
.featured__wrapper {
padding: 0
}
}
.featured__inner {
max-width: 1080px;
width: calc(100% - 24px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
padding: 48px
}
@media only screen and (min-width:768px) {
.featured__inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
padding: 12px 80px
}
}
.featured__href {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.featured__image {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
max-width: 100%;
}
.featured__content {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-top: 24px;
width: 100%
}
.featured__title {
font-size: 32px;
line-height: 44.8px;
font-weight: 500;
font-family: Android Euclid, Roboto, sans-serif;
margin-bottom: 15px
}
.featured__info {
font-family: Roboto Mono, monospace;
font-weight: 400;
font-size: 12px;
line-height: 160%;
margin-bottom: 24px
}
.featured__description {
margin-bottom: 48px
}
.preview.featured__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f1f3f4;
padding: 64px 0 120px
}
.preview.featured__wrapper h1 {
margin: 0 0 64px
}
.blog-label-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px
}
.blog-label-container .blog-label {
text-decoration: none;
z-index: 3
}
.blog-label-container .blog-label span {
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
background-color: #F1F3F4;
border-radius: 100px;
padding: 4px 16px;
color: #3c4043
}
.adb-card:first-child .blog-label span {
background-color: #fff;
}
.blog-label-container .blog-label span:focus,
.blog-label-container .blog-label span:hover {
background-color: #D7EFFE
}
.adb-card:first-child .blog-label span:focus,
.adb-card:first-child .blog-label span:hover {
background-color: #F1F3F4
}
.blog-label-container .blog-label span:focus-visible {
outline-offset: 0
}
#pagination-container {
display: none
}
.pagination {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.pagination .page-button {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: black;
background-color: #3DDC84;
padding: 16px 24px;
border-radius: 80px;
text-decoration: none
}
.pagination .page-button:focus,
.pagination .page-button:hover {
background-color: #3DDC8460;
}
.pagination .page-button.disabled {
color: #80868b;
background-color: #f1f3f4
}
--></style>
<style id="template-skin-1" type="text/css"><!--
--></style>
<style>
/** Blogger default styles **/
html, .Label h2, #sidebar .rss a, .BlogArchive h2, .FollowByEmail h2.title, .widget .post h2 {
font-family: Roboto, sans-serif;
}
.plusfollowers h2.title, .post h2.title, .widget h2.title {
font-family: Roboto, sans-serif;
}
pre, .post-content pre.prettyprint {
background-color: #f7f7f7;
border: 1px solid #ddd;
margin: 0 0 1em 0;
padding: 1em;
overflow: auto;
}
pre, code {
font-size: 9pt;
line-height: 125%;
font-family: monospace;
}
pre, code {
color: #060;
font: 13px/18px Consolas, 'Liberation Mono', Menlo, Monaco, Courier, monospace;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
/* Styles for https://github.com/google/code-prettify */
.com { color: #060; }
.kwd { color: #008; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.fb-custom img, .twitter-custom img, .gplus-share img, .email-custom img {
cursor: pointer;
opacity: 0.54;
}
.twitter-custom, .gplus-share, .fb-custom {
margin-right: 12px;
}
/** Blogger custom theme **/
.adb-header,
.searchBox input {
box-sizing: border-box;
}
.popout-nav {
background-color: white;
width: 280px;
height: 100%;
position: fixed;
z-index: 6;
left: -280px;
transition: left 0.2s;
}
.popout-search {
background-color: white;
width: 280px;
position: fixed;
z-index: 6;
right: -280px;
transition: right 0.2s;
top: 0;
}
.popout-search .widget {
margin: 0;
}
.popout-search #BlogSearch2_form .popout-options {
padding-right: 24px;
width: calc(100% - 48px);
}
.dropdown-nav {
display: none;
background-color: white;
width: 104px;
position: fixed;
padding: 4px 0px 3px 0px;
z-index: 4;
left: 352px;
top: 176px;
transition: top 0.2s;
box-shadow: 0 0px 2px 0 rgba(60,64,67,.3), 0 0px 6px 2px rgba(60,64,67,.15), inset 0 0px 6px -4px rgba(154,160,166,.5);
}
.dropdown-options {
align-items: center;
display: flex;
flex-wrap: wrap;
width: 94px;
height: 48px;
padding-left: 10px;
}
.dropdown-options:hover {
background-color: #f7f9fa;
}
.dropdown-options span {
color: #80868b;
}
.popout-options {
padding-right: 8px;
padding-left: 24px;
padding-top: 16px;
padding-bottom: 15px;
display: inline-block;
width: calc(100% - 32px);
border-top: 1px solid #ddd;
font-size: 13px;
font-weight: 700;
color: #80868b !important;
}
.popout-options:last-of-type {
border-bottom: 1px solid #ddd;
}
.popout-options:first-of-type {
border-top: 0;
}
#close-popout {
padding: 12px 12px 11px 20px;
}
#close-search-popout {
padding: 12px 20px 11px 12px;
text-align: right;
}
.popout-search-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
transition: opacity 0.2s;
}
.popout-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
z-index: 5;
transition: opacity 0.2s;
}
html {
background-color: #fff;
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
width: 100%;
position: absolute;
padding: 0;
/* This ensures that the scroll bar is always present, which is needed */
/* because render happens after page load; otherwise the header */
/* would 'bounce' in-between states. */
min-height: 150%;
}
h2 {
font-size: 130%;
}
h1, h2, h3, h4, h5 {
line-height: 1.5em;
margin-bottom: 1em;
}
html, h4, h5, h6 {
font-size: 14px;
}
a, a:visited {
color: #039be5;
text-decoration: none;
}
pre code {
display: block;
}
.cols-wrapper {
margin-top: 56px;
}
.header-outer, .cols-wrapper {
padding: 0 60px;
}
html, .header-inner a {
color: #212121;
color: rgba(0, 0, 0, .87);
}
/** Archive widget. **/
.BlogArchive {
font-size: 13px;
font-weight: normal;
}
.BlogArchive .widget- {
display: none;
}
.BlogArchive h2, .Label h2 {
color: #039be5;
text-decoration: none;
}
/* Specificity needed here to override widget CSS defaults. */
/* Months */
.Label {
font-size: 13px;
font-weight: normal;
}
.sidebar-icon {
display: inline-block;
width: auto;
vertical-align: middle;
height: 24px;
margin-right: 24px;
}
.sidebar-social-links {
align-items: center;
}
.sidebar-social-links .android-logo,
.android-logo {
height: 48px;
}
.sidebar-social-links a:last-child img {
margin-right: 0;
}
.Label .widget- {
display: none;
}
.searchBox input {
border: 1px solid #eee;
color: #212121;
color: rgba(0, 0, 0, .87);
font-size: 14px;
padding: 8px 8px 8px 40px;
width: 100%;
font-family: Android Euclid, Roboto, sans-serif;
background: url('https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png') 8px center no-repeat;
}
.searchBox ::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .54);
}
.section {
margin: 0;
padding: 0;
}
#sidebar-top {
border: 1px solid #eee;
}
#sidebar-top > div {
margin: 16px 0;
}
/*main post*/
.post {
margin-bottom: 30px;
}
#main .post .title {
margin: 0;
}
#main .post .title a {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: normal;
font-size: 24px;
}
.message, #main .post .post-header {
margin: 0;
padding: 0;
}
#main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption {
color: #444;
font-weight: 500;
}
#main .post .post-header .published {
font-size: 11px;
font-weight: bold;
}
.post-header .publishdate {
font-size: 16px;
font-weight: normal;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#main .post .post-footer {
font-size: 12px;
padding-bottom: 21px;
}
.label-footer {
margin-bottom: 12px;
margin-top: 12px;
}
#main .post .post-header .published {
margin-bottom: 16px;
}
.post .post- {
color: #545454;
color: rgba(0, 0, 0, .67);
font-size: 16px;
margin: 16px 0 36px 0;
line-height: 24px;
word-wrap: break-word;
}
.post-summary {
display: none;
}
/* Override all post images/videos to left align. */
@media (max-width: 712px) {
.post- img {
max-width: 100%;
height: auto;
width: auto;
}
}
.post- .tr-caption-container img {
margin-bottom: 12px;
}
.post- iframe, .post- embed {
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
}
.post- .carousel-container {
margin-bottom: 48px;
}
#main .post- b {
font-weight: 500;
}
/* These are the main paragraph spacing tweaks. */
#main .post- br {
: '';
display: block;
padding: 4px;
}
.post-content .space {
display: block;
height: 8px;
}
.post-content iframe+.space, .post-content iframe+br {
padding: 0 !important;
}
#main .post .jump-link {
margin-bottom: 10px;
}
.post-content img, .post-content iframe {
margin: 30px 0 20px 0;
}
.post-content > img:first-child, .post-content > iframe:first-child {
margin-top: 0;
}
.col-right .section {
padding: 0 16px;
}
#aside {
background: #fff;
border: 1px solid #eee;
border-top: 0;
z-index: 2;
}
#aside .widget {
margin: 0;
}
#aside .widget h2, #ArchiveList .toggle+a.post-count-link {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: 400 !important;
margin: 0;
}
#ArchiveList .toggle {
float: right;
}
#ArchiveList .toggle .material-icons {
padding-top: 4px;
}
#sidebar-top,
#sidebar {
background: #fff;
}
#sidebar .tab {
cursor: pointer;
}
#sidebar .tab .arrow {
display: inline-block;
float: right;
}
#sidebar .tab .icon {
display: inline-block;
vertical-align: top;
height: 24px;
width: 24px;
margin-right: 13px;
margin-left: -1px;
margin-top: 1px;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget-content > :first-child {
padding-top: 8px;
}
#sidebar .active .tab .arrow {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#sidebar .arrow {
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget h2 {
font-size: 14px;
line-height: 24px;
display: inline-block;
}
#sidebar .widget .BlogArchive {
padding-bottom: 8px;
}
#sidebar .widget {
border-bottom: 1px solid #eee;
box-shadow: 0px 1px 0 white;
margin-bottom: 0;
padding: 14px 0;
min-height: 20px;
}
#sidebar .widget:last-child {
border-bottom: none;
box-shadow: none;
margin-bottom: 0;
}
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style: none;
padding: 0;
}
#sidebar ul li a {
line-height: 32px;
}
#sidebar ul ul ul li a {
line-height: 24px;
}
#sidebar .archive {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC');
height: 24px;
line-height: 24px;
padding-left: 30px;
}
#sidebar .labels {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC');
height: 20px;
line-height: 20px;
padding-left: 30px;
}
#sidebar .rss a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII=');
}
#sidebar .subscription a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC');
}
#sidebar-bottom {
background: #f5f5f5;
border-top: 1px solid #eee;
}
#sidebar-bottom .widget {
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
text-align: center;
}
#sidebar-bottom > div:last-child {
border-bottom: 0;
}
#sidebar-bottom .text {
line-height: 20px;
}
/* Home, forward, and backward pagination. */
.blog-pager {
padding-top: 10px;
margin-top: 15px;
text-align: right !important;
}
#blog-pager {
padding: 40px 0 0;
}
#blog-pager a {
display: inline-block;
}
.blog-pager i.disabled {
opacity: 0.2 !important;
}
.blog-pager i {
color: black;
margin-left: 16px;
opacity: 0.54;
}
.blog-pager i:hover, .blog-pager i:active {
opacity: 0.87;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
.gplus-profile {
background-color: #fafafa;
border: 1px solid #eee;
overflow: hidden;
width: 212px;
}
.gplus-profile-inner {
margin-left: -1px;
margin-top: -1px;
}
/* Sidebar follow buttons. */
.followgooglewrapper {
padding: 12px 0 0 0;
}
.loading {
visibility: hidden;
}
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 40px !important;
}
/* ADB */
.adb-hero-area {
min-height: 104px;
background-color: #073042;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
z-index: 5;
position: fixed;
width: 100%;
}
.adb-hero-logo {
height: 80px;
position: absolute;
top: 12px;
left: 16px;
}
.adb-footer-btm {
display: flex;
margin: 0 24px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 40px;
}
.subscribe-btn {
color: black;
background-color: #3DDC84;
border-radius: 100px;
font: 500 16px/24px Android Euclid,Roboto,sans-serif;
padding: 12px 24px;
border: 0;
}
.adb-footer-info {
align-items: center;
display: flex;
padding: 0;
margin: 9px 0 0 -8px;
font-size: 13px;
}
.footer-list {
list-style: none;
padding: 0 8px;
}
.subscribe-info {
list-style: none;
padding: 0 8px 0 0;
font-size: 13px;
color: black;
}
.footer-newsletter {
display: flex;
align-items: center;
}
.adb-header-inner {
display: flex;
align-items: center;
}
.adb-header {
background-color: white;
color: #fff;
height: 48px;
left: 0;
overflow: hidden;
padding: 36px 24px;
right: 0;
top: 104px;
z-index: 4;
display: flex;
align-items: center;
position: fixed;
border-bottom: solid 1px #DADCE0;
}
.adb-shadow {
margin-top: 48px;
height: 1px;
width: 100%;
position: fixed;
background: white;
z-index: 2;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
}
.adb-logo-box {
display:inline;
}
.adb-burger-box {
display: none;
margin: 0 16px 0 0;
}
.adb-search-box {
display: none;
margin: 0 0 0 16px;
}
.adb-htag-box {
display: flex;
align-items: center;
}
.adb-header-tags {
padding: 0 24px 0 0;
}
.adb-header-tags ~ .atb-header-tags {
padding: 0 24px;
}
.adb-header-tags a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #5F6368;
}
.adb-header-tags a:hover {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #073042;
}
.more-dropdown {
display: none;
}
.dropdown-icon {
transition: all 0.3s;
}
.adb-header-logo {
display: inline-block;
vertical-align: -11px;
width: 134px;
height: 32px;
}
.adb-header-title {
color: #fff;
display: inline-block;
font-size: 20px;
font-weight: normal;
}
.adb-header-links {
border-left: 1px solid rgba(0, 0, 0, .1);
display: block;
left: 250px;
list-style: none;
margin: 0;
padding: 12px 0 12px 18px;
position: absolute;
top: 0;
}
.adb-header-link-item {
display: inline-block;
}
.adb-header-link, .adb-header-link:visited {
color: #fff;
display: inline-block;
font-weight: 500;
opacity: .7;
padding: 12px 9px;
text-transform: uppercase;
vertical-align: 2px;
}
.adb-header-link:hover, .adb-header-link:focus {
color: #fff;
opacity: 1;
}
.adb-header-console, .adb-header-console:visited {
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
color: #fff;
float: right;
font-size: 14px;
font-weight: 500;
line-height: 28px;
padding: 4px 10px;
position: relative;
text-transform: uppercase;
transition: box-shadow .2s;
z-index: 60;
}
.adb-header-console:hover {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
color: #fff;
}
.adb-header-console:focus {
background-color: rgba(63, 81, 181, .1);
color: #fff;
}
.adb-header-console-image {
vertical-align: -5px;
}
.adb-hero {
background-color: #dcedc8;
margin-top: 64px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
color: #414141;
display: inline-block;
font-weight: 500;
margin: 25px 25px 0;
}
.adb-hero-inner {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAc4AAADZCAMAAACenCAVAAAAvVBMVEXc7cjY68PT6bvR57fQ57bY6sPZ68TU6bvR6LfP5rTQ57XR57jW6r7b7cfa7MbS6LnS6Lrb7cbQ6Lfb7MbX6r/Z68PY6sLV6b7U6b3U6r3T6LnX68Da7MXP57Tb7Mfc7cfW6b/P57XS57nY68LY68HU6L3W6r/W6b7T6brX6sDV6rzQ57fa7MTV6b3T6Lra68TR57bX68HW6sDS57jU6bzO5rTP5rXZ7MXR6LbZ68XX6sHT6LvV6bzS6LjZ7MILrTuqAAAIyklEQVR4AezXhXEkUQwE0B6+Xhg8MzND/smZ4UsLBSb9Kr0UhI1vl6RZnqUFlnBl9Y+j8WQK4+qGr9oOi7iKr0YFTOt6vhsPmM81/FDAspafUszl/vNTXsOuFYZWMYfrRgyswa51hjLM4TYYGsOuTQpbgNO2dyjAroxCvgunpZT2YFZDaQKnlFRg1z6lgxpOOqS0CbtqKutwwhGVYxh2QqWGC/WUMlhWH1BK4QKnVFZh2hmVEh/cXk7pHLbt5pQafHCT6Jr9gsoR3riayiXMyyhd4Y27jDDHJVQu8MJdU7lBBBpKoz08c7eU8gERuKNyhiduhcopolBRqeGAMaV7xKE7eGzvThQTVZooAJdC1AM2qGg0BhdCrpnciVE0i9dZ3v+t/n2ZMBtJGpsu6nuCrNJddar4/gAnMmuP/GPk3JFwrL2QKw3FD26GyGmQNXbIGVHNKdfmYraDl/ZUcxO8NNtIW888bafDC7tP5R2qtQfL724N5AypxjbIGdseWHMV1VfP+rrnZvbTerMEhHb2Py4eA7KX9AwD5LSppi5ZdPTHEhv6cd5mSjZaeMW/Dc66TEpkO+Q0qIbUE5es6ke85FMN/YGXZs9yQLdXYGVASGJDBaMZXsQouzau/fzfitNsKvpUL1O8dFBksb+Q80C1coaco7RtLeYzO9tHCV7qUY0ckXPGribSoNpQB3Z1MbWtby1hiZwWw35CRjUReRx7Sg5ecqgmJiyHOxrIWVEtPDPNY/TMx4bmczq5T3jpSRELm1NWodVmlGY364tP4ZXvdw5u8jjDf8yQJJ7j+2HYfBh3d+l5HFB5RmyzjM3yh8iDUbb6M9y7j3idgxM+3BzTuPzyXmdOTARJaUc8tUmX7ekB7+aF7dV1a0G6pIx3CkxKmBBUreMfvS0086aTnZZf6kfG53mlN/0UnS2bW5Socz9OA737eM6JkZWu4uUiXfVcnIT34eZM6Yq9hcRKR0OpL7i9cHBi/udjrCOUuiFWsnc2/oKsfYAhXvM2lsj4S/7b2/L9y4cODDu0j8HbBzqSPvutOksqpDH+gorw1+dvHLcaEzv3r4+0BdmnBJXi9bL+G6qaEbFz98rF4sEwnKGKrrrxK3sOuzoMlM9i+ql47KPC/HX8inTxljgKUHBYI1g6qDx/HBct76XETfHF4v3hHpZwVgH9APc0TfFSyTwLZ7DJ9FYxmZvTv1h89DmBdbyHEX0rcuuTRB38fNuQ2vmw1GAYMSjv6ZwQbD0ksFlz9LPW7gMxNv3RBVtlDqz3cbWo32rmEXLGFExcsJBMnilGzk29pleT5gx8fLiq2XzyM2rllpiboEYGxF2UoD6+EntL1Ma+TkOP/LVqNJLM3yeqgayDmnjqKmIu3aNGDhlx1pqiZvyUuAqaqKGwRRwt1gnqqR0QO5ce6ms5J1ZGIWqtkxIf0QNqb7ohJjIXgFjPiYF4j38R2wbZTk1m+C/xqU9WSzv4hkgyVkcg0QvIUg0XEHleRjaK/gQb8g/a2EL8hHcky6zxC+JTQBa5c/BL4nBO1lgl+B2xJjv0QxQgnA1ZoOGhGHFNldedoShxMadKU/d4BeEEVGF3Ll5FJF+psm7Bh5xwHyDeoKeogvp7iDfpbKhyWgeIN/JSqpjbBOLtlqwq7qJNFdKGeKdQUUUEIcS7Df6iSngeQAPhtqgCWi60EElKxjUSsCFriK5nYEMuLDtoJSZk0BiaiaYsZGPlXnEqHoipIhOaKIW4WnD63xThgtP/pthHdFqfUCIRRvK/KZ+3VX1uiulc7puc3EstSOpD9d7+LYGTFfiQenyKkxE3VLLGI9iQkcH4CackzqlEwRYnJbwNlUb5ODHhBVSWHk5O+JFMLkh5qFYxLxnoPZ9BmJGRdrELNuTddNEAwhg34NSvFnvSqgth1ANpNEIZkhkYSg4dt9rHocCFXvvxWUD/ELR2TQ98hMOWon+Ks7YLrZI70iWETu6yT99Qt3uw4A4j+lY6hU4dVcloUFdR3tkA1kt29J1zHxr1SIsGNAoDnvGjMCj/CLmr3INzQj9x5sFm41Ns933c0PtNoc+O0bJNA9+Xryp14+zSL9x5PH6beS2vQrfP0exkQcMG08BdCn1SepeFc8KPijWs5MxPdzN4CipzR2nQb8wdnu0O5UKbkN7h/LQZ/a9Ms+pZNYp9kQt9Yvo9H3Yx8H15QSXm/qZUQMY0ybOCPtNKlIMuqYAogW1SKkBBoxW9SXSARoqKCGGbBRVxBY0C85V3h2mb/MrASGxIb3BnYlaxwXRmLwUMFxMc6NSlQvpM6nt5MXTylOl00JGKYTqxp6DVBb1SkECrlOmvs0HFGA7efjA0dwrLfKVC5tDLp1dpGHrGKFjm0tCZYEWvMTA0NrOBZVZUSMtoLn4I3T5RISnTZTGXJrea9BPotmU6QrqlQi6gXWx05V5MRTiwTaD/4aW5FN8y9pCJYZ2usSPBNRUzNfapNIZ1fGM7KQdUSMNYJyl6Ajh2yAKTBUYHpfCZruJ0jB3wCpVur1GSIf3G8yOPlG1ePDN46d2iJEmLR+86L4lNBRQTZXK/6UAxunMWDxC3Da6omXsoz5XiOa8/NfV9JYHRXVBXiudG8r0y9Jmzpl87oFSDFv3Qog2rDTb0Q6qJckX0K7coWTKkHxh1YLmkSz/Q6JjNKnVQOj+lnM0nMPDxmnLuPhjej5rhFLbjmP4nOF6BCXfdov8JLkPj+xcdnMjh03p3nWXLBwesuB/+GGbHXbc5wIkkSt7CwEmXU1lGbPX3OYVBt5y2Yoov9EN/QVhpJK9xZL/7P4Kw1LO8iIH7qxx8CEu5zG8pcldpQ1hrSjnBI4S9YnrpBsJiEzkIcfIkByFWUqkIcdKjb7kQdos49a3Fjv7vE4TlfPoflYAPuXoeIaw3pv+6h7CeQ/8RPYIP6XpegwGxknMtwxcqK7AgAqkhcDKkf3oAI9LE9sCDWGhf4S8M70peggnxQERTMCFcIjUDF+KOUrAhhvQANkT4dwEsPvJYWz4QAAAAAElFTkSuQmCC');
background-position: bottom right 70px;
background-repeat: no-repeat;
background-size: auto 100%;
margin: 0 auto;
max-width: 980px;
padding: 0 60px;
position: relative;
}
.adb-hero-back-icon {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.adb-hero-title {
font-size: 22px;
line-height: 28px;
padding: 24px 24px 0px 112px;
}
.adb-hero-title a {
color: #FFFFFF;
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500;
}
.adb-hero-summary {
font-size: 16px;
line-height: 24px;
padding: 8px 24px 8px 112px;
}
.adb-hero-summary a {
color: rgba(255, 255, 255, 0.9);
}
.adb-hero-description {
color: #6f7172;
font-size: 16px;
margin: 0;
max-width: 440px;
padding-bottom: 32px;
}
.adb-hero-search {
position: absolute;
top: 19.35%;
right: 1.94%;
}
.adb-hero-search .searchBox input {
border: 1px solid #80868B;
border-radius: 4px;
color: white;
}
.adb-hero-search .searchBox input::placeholder {
color: #F1F3F4;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
padding-left: 12px;
}
.adb-hero-link {
position: absolute;
right: 1.67%;
top: 64.52%;
}
.adb-hero-link a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #3DDC84;
letter-spacing: 1.4px;
}
.adb-hero-arrow {
display: inline-flex;
font-size: 24px;
vertical-align: middle;
}
.adb-socials-box {
display: flex;
position: absolute;
right: 1.67%;
}
.adb-socials-category,
.adb-socials-divider {
display: flex;
align-items: center;
}
.adb-socials-divider {
color: #DADCE0;
font-size: 40px;
font-weight: 100;
margin: 0 20px;
}
.adb-socials-category img,
.adb-footer-social-links img {
height: 24px;
}
.adb-footer-social-links-img {
margin-right: 20px;
}
.adb-hero-subscribe, .adb-hero-subscribe:visited {
background-color: #90c653;
color: #fff;
display: inline-block;
border-radius: 3px;
margin: 25px 0 60px;
padding: 13px 32px;
text-transform: uppercase;
}
.adb-hero-subscribe:hover, .adb-hero-subscribe:focus {
background-color: #333;
}
.adb-footer {
margin: 32px auto 64px;
}
.adb-footer-more {
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #f0f0f0;
padding: 30px 0;
}
.adb-footer-more a {
color: #000;
display: inline-block;
font-size: 20px;
font-weight: 300;
margin-right: 16px;
}
.adb-footer-social {
float: right;
margin-top: -62px;
}
.adb-footer-social a {
background-color: #ccc;
background-position: center;
background-repeat: no-repeat;
background-size: auto 16px;
border-radius: 50%;
display: inline-block;
height: 36px;
margin-left: 16px;
transition: background-color .1s;
width: 36px;
}
.adb-footer-social-youtube {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAQAAAAxWje/AAABLUlEQVQ4y6WUvUoDYRBFr42gCdhK8AV8BwsVC0FQfIQUgr5DIKJoGy1CfAaDq1hIGn8K2xDSaBc1wUJJEYmbkDXssdi1Mrvfst9tZ+bAzNwZSZLEAmvsUKTCBQ80eaWLyxiAMS5dXmhyT5UyBfIsM68/McM1aXRDJgCUSKsTSWQZpAa4ZMUmNtoSRxGhbd4TAI7F1eSIxBwVfAPgUtSjAJLEEk+xgLroxAEkpikyigS0RS8eIEks8hgB6ImhGSAxxS5fE9JGwksCkCRyOP/SfPFjC0jawl5UC9ZDbBvXuB+zxjezkZ5NRnJirHxmtLIjDq2O6UBsWJ3zut1D+WZWEqepAaVg0hlqqcpr4VMNbbpKngJlqtzRoMUnfTx8fDz6fNCiwS3n4VtfIRdU/gLTrSb7DGWLcQAAAABJRU5ErkJggg');
}
.adb-footer-social-youtube:hover {
background-color: #f44336;
}
.adb-footer-social-gplus {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAUCAQAAACpWpz6AAABJUlEQVQ4EZXBTUoCYQDH4X9hTS3Cja0Kyb2X6BCJoLlr1aKwK1QHCMMzWLiqTcuWXaAWQWIlU1DQh4QJ+Wt4X95x0hGn55FCeGzSpMUXXW45ocSC/oMiHUZ1KCgZZqkzyZaSoM7QgCd8BlgXLGo6ijgv7JJRgAxV3jjDUwwMOXh0sK5ZUQRZ5hQLQw4VrA/WlBCGHJpY+0oMQw5trLxCjNtTgFiij5VSiHFHChBL9LFSCjGurgCxRBsrrxA+Pj4+Pl2sQ0VgyKGJdaAYNLAqisCQQxnrk5xGkKOHlVUEhhw8HrFuWFUEaa6wLvUHhoYo4LxSZVkBlihzh7OuaagR9YzPD0PHmo5ZakzSIKVk2OCBUe/sMKPkmKfEKS16fHPPOduklcAvR50zMVwhTI4AAAAASUVORK5CYII=');
}
.adb-footer-social-gplus:hover {
background-color: #f44336;
}
.adb-footer-social-twitter {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAQAAAB0gUQ+AAABI0lEQVQ4EY3BQShDAQDH4f+zTSyJuLgoLlwclYOTHCwHu9ouiLRScpUmNwduDkpCSTs4LAeJhINoOTo4ctHkskyJtf20vWbe3tvb+z7JFUGibLHPMj0qoYEWSYzRKkdMkKbsm3m6WSRFuyQeuKNNNoTJU61ABL8kssAjvbKgiTR2V+ywJol3ijJMY+gP4zhLEpDEGWUpwvhUQgwnh/hURIT/3thjjmGWcBKViSCXeBWSiWdO+MGbPpm4watPfDIRxasLVXCANwuqwCDGK/V80akKGjnmmgLutmXFOvV80CUrAiRxNys7DCY5J4OzXdVCP7c4OcIvO5oJkSCHXZ5VDFkxwilP5HB2z6Cc0EGcF6plSTAqNxgMMEWcTTZYYYYhAqrpF0uh1zgYi1hVAAAAAElFTkSuQmCC');
}
.adb-footer-social-twitter:hover {
background-color: #55acee;
}
.adb-footer-social span {
display: none;
}
.adb-footer-related {
padding-top: 8px;
}
.adb-footer-related a {
color: #999;
font-size: 12px;
white-space: nowrap;
}
.adb-footer-related a:not(:last-child)::after {
content: '|';
cursor: default;
margin: 0 7px 0 10px;
}
.adb-footer-section {
margin: 48px auto;
max-width: 700px;
}
.adb-footer-title {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #3C4043;
margin-bottom: 24px;
}
.adb-footer-columns {
display: flex;
justify-content: space-between;
}
.adb-other-blogs-title img {
margin-right: 8px;
vertical-align: -12px;
}
.adb-footer-social-label {
display: flex !important;
align-items: center;
}
.adb-footer-column a,
.adb-footer-social-label,
#footer-subscribe .tab h2 {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
padding: .85em 0;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-btm a {
color: #000;
font-family: Android Euclid, Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.25px;
opacity: .7;
transition: opacity .1s;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-column a {
opacity: .7;
transition: opacity .1s;
}
.adb-footer-column a:hover {
opacity: 1;
}
.adb-footer-social-links {
margin: 0 0 20px;
}
#footer-subscribe .widget {
margin: 0;
}
#footer-subscribe .tab {
display: flex;
align-items: center;
}
#footer-subscribe .tab img {
height: 16px;
}
.adb-label-view-more-toggle {
cursor: pointer;
}
.adb-label-view-more-toggle::after {
content: '\00e5c5';
float: right;
font: 2em / .7 Material Icons;
opacity: .6;
}
.adb-label-view-more-toggle.active::after {
transform: rotate(180deg);
}
/** Desktop **/
@media (max-width: 900px) {
.col-right {
display: none;
}
.col-main {
margin-right: 0;
min-width: initial;
}
.cols-wrapper {
min-width: initial;
}
.adb-hero-inner {
background-image: none;
}
}
/** ADB header breakpoint **/
@media (max-width: 768px) {
.adb-header-links {
display: none;
}
.dropdown-nav {
display: none;
}
.adb-header {
padding: 12px;
text-align: center;
}
}
@media (max-width: 1196px) {
.breakpoint-hide {
display:none;
}
.more-dropdown {
height: 50px;
display: flex;
align-items: center;
}
}
@media (max-width: 915px) {
.adb-header {
height: 0;
margin: 0;
padding: 0;
display: none;
}
.adb-header-tags {
display:none;
}
.more-dropdown {
display:none;
}
.dropdown-nav {
display: none;
}
.adb-hero-summary,
.adb-hero-link,
.adb-socials-category {
display: none;
}
.adb-hero-title {
padding-left: 152px;
}
.adb-hero-logo {
height: 52px;
top: 12px;
left: 120px;
}
.adb-footer-section {
margin: 0 auto;
}
.adb-footer-btm {
margin: 0 24px 40px;
}
.adb-hero-area {
min-height: 76px;
}
.adb-burger-box {
display:inline;
position: absolute;
top: 17px;
margin-left: 24px;
font-size: 32px;
color: white;
}
.adb-hero-title a{
margin-left: 40px;
}
}
/** Tablet **/
@media (max-width: 712px) {
.header-outer, .cols-wrapper {
padding: 0 40px;
}
/* ADB */
.adb-hero-inner {
padding: 0 40px;
}
.adb-hero-title {
font-size: 16px;
padding-left: 132px;
}
.adb-hero-logo {
left: 100px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 36px;
}
.adb-other-blogs-list {
columns: auto;
}
.adb-other-blogs-title {
font-size: 20px;
}
.adb-other-blogs-title img {
height: auto;
vertical-align: -6px;
width: 32px;
}
.adb-footer-section {
margin: 0 24px;
}
.adb-footer-more {
padding-bottom: 75px;
}
.adb-footer-social {
float: none;
margin-bottom: 35px
}
.adb-footer-social .adb-footer-social-youtube {
margin-left: 0;
}
}
/** Small tablet **/
@media (max-width: 600px) {
.header-inner .google-logo {
top: 32px;
margin-top: 0;
}
.header-inner .google-logo img {
height: 56px;
width: auto;
/*
height: auto;
width: 188px;
*/
/* Override any optical adjustments at desktop size. */
top: 0 !important;
}
.header-left {
left: 0;
top: inherit;
bottom: 24px;
}
.adb-footer-columns {
display: block;
}
.adb-footer-column {
margin-bottom: 48px;
}
.adb-footer-column a {
opacity: 1;
}
.adb-footer-social-label {
padding: 0;
}
.adb-footer-column .widget a {
padding: 0;
}
.footer-newsletter {
margin-top: 16px;
}
.subscribe-btn {
width: 100%;
}
.adb-hero-search {
display: none;
}
.adb-search-box {
display:inline;
position: absolute;
top: 24px;
right: 24px;
font-size: 24px;
color: white;
}
}
/** Mobile **/
@media (max-width: 480px) {
.header-outer, .cols-wrapper {
padding: 0 16px;
}
.adb-hero-logo {
height: 28px;
top: 24px;
left: 76px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 16px;
}
.cols-wrapper {
margin-top: 0;
overflow-x: auto;
}
.post-header .publishdate, .post .post-content {
font-size: 16px;
}
.post .post-content {
line-height: 28px;
margin-bottom: 30px;
}
.post {
margin-top: 30px;
}
.byline-author {
display: block;
font-size: 12px;
line-height: 24px;
margin-top: 6px;
}
#main .post .title a {
font-weight: 500;
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
}
#main .post .post-header {
padding-bottom: 12px;
}
#main .post .post-header .published {
margin-bottom: -8px;
margin-top: 3px;
}
.post .read-more {
display: block;
margin-top: 14px;
}
.post .tr-caption {
font-size: 12px;
}
#main .post .title a {
font-size: 20px;
line-height: 30px;
}
.post-content iframe {
/* iframe won't keep aspect ratio when scaled down. */
max-height: 240px;
}
.post-content .separator img, .post-content .tr-caption-container img {
margin-left: -16px;
max-width: 100%;
}
.post-content table {
table-layout: fixed;
width: 100%;
}
/** List page tweaks. **/
.list-page .post-original {
display: none;
}
.list-page .post-summary {
display: block;
}
.list-page .comment-container {
display: none;
}
.list-page .label-footer {
display: none;
}
.list-page #main .post .post-footer {
border-bottom: 1px solid #eee;
margin: -16px 0 0 0;
padding: 0 0 20px 0;
}
.list-page .post .share {
display: none;
}
/** Detail page tweaks. **/
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 32px !important;
}
.detail-page .label-footer {
margin-bottom: 0;
}
.detail-page #main .post .post-footer {
padding-bottom: 0;
}
.detail-page #comments {
display: none;
}
/* ADB */
.adb-header-console {
display: none;
}
.adb-hero-inner {
padding: 0 16px;
}
.adb-hero-title {
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
font-weight: 500;
line-height: 30px;
padding-left: 80px;
}
}
/* Fixed-position sidebar for larger screens */
@media screen and (min-height: 700px) and (min-width: 1100px) {
.col-right .section {
max-height: calc(100vh - 197px);
overflow: auto;
}
.col-right.scroll-start {
left: 50%;
margin-left: 241px;
position: fixed;
top: 96px;
}
.col-right.scroll-end {
bottom: 485px;
position: absolute;
top: auto;
}
}
[data-about-pullquote], [data-is-preview], [data-about-syndication] {
display: none;
}
#imgFull {
display: block;
margin: 10px auto;
width: 90%;
border: 0;
padding: 0;
}
#imgHalf {
display: block;
margin: 10px auto;
width: 50%;
border: 0;
padding: 0;
}
#flexParent {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
#flexImg {
width: 90%;
margin: 0;
padding: 0;
border: 0;
}
#imgCaption {
text-align: center;
font-style: italic;
font-size: 85%;
margin: -5px 0 10px 0;
padding: 0;
border: 0;
}
#floatRight {
float: right;
width: 45%;
margin: 5px 0 5px 5px;
padding: 0;
border: 0;
}
#floatLeft {
float: left;
width: 45%;
margin: 5px 5px 5px 0;
padding: 0;
border: 0;
}
</style>
<style>
.loading {
visibility: visible;
}
</style>
</head><body>
<div class="adb-detail">
<div class="adb-detail__info">
</div>
<div class="adb-detail__title">
</div>
<hr>
<div class="adb-detail__content">
<div>
<meta content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9szIo2TBAryM51OQHMHjvoJRkwMs2Pa3NXmFxmZrWGdLC2c83LgSXwlf2MypoXN2IBz_3SOS-HQQqKDRAWYfWDmHeNyGl5KUaFkkJeEpKLA2NIX8Vtvrt7pnUdfDDTg6ZmOLfmhQKIldp9v96yadQnUa2r8fZUS6N2t9zPCPJNZteai33hPjUKq6z23k/s1600/a_new_foundtion_editorial-social.png" name="twitter:image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9szIo2TBAryM51OQHMHjvoJRkwMs2Pa3NXmFxmZrWGdLC2c83LgSXwlf2MypoXN2IBz_3SOS-HQQqKDRAWYfWDmHeNyGl5KUaFkkJeEpKLA2NIX8Vtvrt7pnUdfDDTg6ZmOLfmhQKIldp9v96yadQnUa2r8fZUS6N2t9zPCPJNZteai33hPjUKq6z23k/s1600/a_new_foundtion_editorial-social.png" style="display: none;">
<em>Diposting oleh Thomas Ezan – Sr. Developer Relations Engineer; Chengji Yan, Penny Li – ML Kit Engineers; David Miro Llopis – Product Manager</em>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm1t-9xVtRVMAjnjo5Ji5Mpx9qcqcJgdeeEOpfOB4AtYrktrF6MhoMMC8VlPKhNxF0mT-D3GA8Ja8ig0KiYnV6bZRInjHxJbkbM1sOinK5SqmJGqeWWHUxYkJ-oB8iorE9-X4MVJUaYMTEn-FycA27R4eFcA2HaUKABbP5zJbWSnCNWPVQzJZkQAqBqeI/s1600/a_new_foundtion_editorial_header.png"><img border="0" data-original-height="800" data-original-width="1058" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm1t-9xVtRVMAjnjo5Ji5Mpx9qcqcJgdeeEOpfOB4AtYrktrF6MhoMMC8VlPKhNxF0mT-D3GA8Ja8ig0KiYnV6bZRInjHxJbkbM1sOinK5SqmJGqeWWHUxYkJ-oB8iorE9-X4MVJUaYMTEn-FycA27R4eFcA2HaUKABbP5zJbWSnCNWPVQzJZkQAqBqeI/s1600/a_new_foundtion_editorial_header.png"></a>
<p>Kami sangat gembira mengumumkan diluncurkannya <a href="https://developers.google.com/ml-kit/vision/doc-scanner" target="_blank">ML Kit Document Scanner API</a>. API baru ini memudahkan penambahan kemampuan pemindaian dokumen tingkat lanjut dengan antarmuka pengguna berkualitas tinggi dan konsisten ke aplikasi Android Anda. ML Kit Document Scanner API memungkinkan pengguna Anda mendigitalkan dokumen kertas dengan cepat dan mudah.</p>
<p>Seperti ML Kit API lainnya, ML Kit Document Scanner API memungkinkan Anda mengintegrasikan fitur-fitur yang didukung oleh Machine Learning (ML) dengan lancar tanpa pengetahuan ML apa pun.</p>
<img><div style="text-align: center;"><img alt="ilustrasi ml kit document scanner" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3HKj8jUfxGqQIjF_4IdTi5FHiFqJ0Lh-SZmVLV62K08SunYqiT13hozvG4x6Rkf2gF8IhMdp7a6ZzGUT_iObDSJzVXkuIbAD_PD9Yb2uBCnqWPQE6VNEj7wpqHkzCeVW7jN4fNi0spo3Tx0EV2V-rxlC_5GrlegWEzIeGEDq024Dir8LPCia8s4vctnE/s1600/image4.png" width="100%"></div>
<h3>Mengapa harus Document Scanner SDK?</h3>
<p>Meskipun terjadi revolusi digital, dokumen kertas dan hasil cetakan masih ada dalam kehidupan kita sehari-hari. Beberapa dokumen terpenting kita masih dalam bentuk fisik (dokumen identitas, resi, dll).</p>
<p>ML Kit Document Scanner API menawarkan sejumlah manfaat, termasuk:</p>
<ul><ul>
<li>Antarmuka pengguna berkualitas tinggi dan konsisten untuk mendigitalisasi dokumen fisik.</li>
<li>Deteksi dokumen yang akurat dengan deteksi sudut dan tepi yang presisi untuk pengalaman pemindaian yang lancar dan hasil pemindaian yang optimal.</li>
<li>Fungsionalitas fleksibel memungkinkan pengguna memotong dokumen yang dipindai, menerapkan filter, menghilangkan jari, menghilangkan noda dan kotoran lainnya, serta mengirimkan kembali file digital dalam format PDF dan JPEG ke aplikasi Anda.</li>
<li>Pemrosesan di perangkat membantu menjaga privasi.</li>
<li>Solusi lengkap yang meniadakan keharusan izin kamera.</li>
</ul></ul>
<p>ML Kit Document Scanner API sudah digunakan oleh aplikasi Android Google Drive dan Google Pixel Camera.</p>
<img><div style="text-align: center;"><img alt="gambar bergerak yang menampilkan aksi ML Kit Document scanner API di Google Drive" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtQtiEsIs_LrwPwkt6LoySSeA9sEjbBraOfzsFlLEBi1OdCyeR7JJjH42KtkiaawCdBpAXEG_BgokdO4kE2iptk9TCgpC5ld8FURaEjqpu32tlROVDZbjRtgK3biAsSnrobbvAGJSJ2bJYH8h9uj6Y-zx1aJPRI8-fIaKv5Cgaco3Q5JBdZAGbcIL6ztY/s1600/docscan_demo.gif" width="50%"></div><imgcaption><center><em>Aksi ML Kit Document scanner API di Google Drive</em></center></imgcaption>
<h3>Mulai</h3>
<p>ML Kit Document Scanner API memerlukan Android API level 21 atau lebih tinggi. Model, logika pemindaian, dan alur UI diunduh secara dinamis melalui layanan Google Play sehingga ML Kit Document Scanner API memiliki dampak minimal terhadap ukuran aplikasi Anda.</p>
<p>Untuk mengintegrasikannya ke dalam aplikasi Anda, mulailah dengan mengonfigurasi opsi pemindai dan mendapatkan klien pemindai:</p>
<div style="background: rgb(248, 248, 248); border: 0px; overflow: auto; width: auto;"><pre style="line-height: 125%; margin: 0px;"><span style="font-family: courier;">val options <span style="color: #666666;">=</span> GmsDocumentScannerOptions<span style="color: #666666;">.</span>Builder()
<span style="color: #666666;">.</span>setGalleryImportAllowed(false)
<span style="color: #666666;">.</span>setPageLimit(<span style="color: #666666;">2</span>)
<span style="color: #666666;">.</span>setResultFormats(RESULT_FORMAT_JPEG, RESULT_FORMAT_PDF)
<span style="color: #666666;">.</span>setScannerMode(SCANNER_MODE_FULL)
<span style="color: #666666;">.</span>build()
val scanner <span style="color: #666666;">=</span> GmsDocumentScanning<span style="color: #666666;">.</span>getClient(options)</span>
</pre></div>
<p>Kemudian daftarkan <span style="color: #0d904f; font-family: Courier;">ActivityResultCallback</span> untuk menerima hasil pemindaian:</p>
<div style="background: rgb(248, 248, 248); border: 0px; overflow: auto; width: auto;"><pre style="line-height: 125%; margin: 0px;"><span style="font-family: courier;">val scannerLauncher <span>=</span> registerForActivityResult(StartIntentSenderForResult()) {
result <span>-></span> {
<span>if</span> (result<span>.</span>resultCode <span>==</span> RESULT_OK) {
val result <span>=</span>
GmsDocumentScanningResult<span>.</span>fromActivityResultIntent(result<span>.</span>data)
result<span>.</span>getPages()<span>?.</span>let { pages <span>-></span>
<span>for</span> (page in pages) {
val imageUri <span>=</span> page<span>.</span>getImageUri()
}
}
result<span>.</span>getPdf()<span>?.</span>let { pdf <span>-></span>
val pdfUri <span>=</span> pdf<span>.</span>getUri()
val pageCount <span>=</span> pdf<span>.</span>getPageCount()
}
}
}
}</span>
</pre></div>
<p>Terakhir, luncurkan aktivitas pemindai dokumen:</p>
<div style="background: rgb(248, 248, 248); border: 0px; overflow: auto; width: auto;"><pre style="line-height: 125%; margin: 0px;"><span style="font-family: courier;">scanner<span>.</span>getStartScanIntent(activity)
<span>.</span>addOnSuccessListener { intentSender <span>-></span>
scannescannerrLauncher<span>.</span>launch(IntentSenderRequest<span>.</span>Builder(intentSender)<span>.</span>build())
}
<span>.</span>addOnFailureListener { <span>...</span> }
</span></pre></div>
<p>Untuk memulai ML Kit Document Scanner API, kunjungi <a href="https://developers.google.com/ml-kit/vision/doc-scanner" target="_blank">dokumentasi</a>. Kami tidak sabar untuk melihat apa yang akan Anda lakukan dengan API ini!</p>
</div>
<hr>
</div>
</div>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-77971995939937976942024-02-17T09:52:00.006+07:002024-03-18T09:56:41.727+07:00Memahami Scroll Bertingkat di Jetpack Compose<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="https://medium.com/androiddevelopers/understanding-nested-scrolling-in-jetpack-compose-eb57c1ea0af0"/>
<meta name="original_url" content="https://medium.com/androiddevelopers/understanding-nested-scrolling-in-jetpack-compose-eb57c1ea0af0"/>
<style type="text/css" data-fela-rehydration="545" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}
/*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black;
}/* Gray DOCTYPE selectors like WebKit */
.xml .hljs-meta {color: #c0c0c0;
}.hljs-comment,
.hljs-quote {color: #007400;
}.hljs-tag,
.hljs-attribute,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name {color: #aa0d91;
}.hljs-variable,
.hljs-template-variable {color: #3F6E74;
}.hljs-code,
.hljs-string,
.hljs-meta .hljs-string {color: #c41a16;
}.hljs-regexp,
.hljs-link {color: #0E0EFF;
}.hljs-title,
.hljs-symbol,
.hljs-bullet,
.hljs-number {color: #1c00cf;
}.hljs-section,
.hljs-meta {color: #643820;
}.hljs-title.class_,
.hljs-class .hljs-title,
.hljs-type,
.hljs-built_in,
.hljs-params {color: #5c2699;
}.hljs-attr {color: #836C28;
}.hljs-subst {color: #000;
}.hljs-formula {background-color: #eee;font-style: italic;
}.hljs-addition {background-color: #baeeba;
}.hljs-deletion {background-color: #ffc8bd;
}.hljs-selector-id,
.hljs-selector-class {color: #9b703f;
}.hljs-doctag,
.hljs-strong {font-weight: bold;
}.hljs-emphasis {font-style: italic;
}
</style>
<style type="text/css" data-fela-rehydration="545" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style>
<style type="text/css" data-fela-rehydration="545" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{fill:rgba(0, 0, 0, 1)}.av{height:22px}.aw{margin-left:16px}.ax{border:none}.ay{border-radius:20px}.az{width:240px}.ba{background:#F9F9F9}.bb path{fill:#6B6B6B}.bd{outline:none}.be{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bf{font-size:14px}.bg{width:100%}.bh{padding:10px 20px 10px 0}.bi{background-color:transparent}.bj{color:#242424}.bk::placeholder{color:#6B6B6B}.bl{display:inline-block}.bm{margin-left:12px}.bn{margin-right:12px}.bo{border-radius:4px}.bp{margin-left:24px}.bq{height:24px}.bw{background-color:#F9F9F9}.bx{border-radius:50%}.by{height:32px}.bz{width:32px}.ca{justify-content:center}.cg{max-width:680px}.ch{min-width:0}.ci{animation:k1 1.2s ease-in-out infinite}.cj{height:100vh}.ck{margin-bottom:16px}.cl{margin-top:48px}.cm{align-items:flex-start}.cn{flex-direction:column}.co{justify-content:space-between}.cp{margin-bottom:24px}.cv{width:80%}.cw{background-color:#F2F2F2}.dc{height:44px}.dd{width:44px}.de{margin:auto 0}.df{margin-bottom:4px}.dg{height:16px}.dh{width:120px}.di{width:80px}.do{margin-bottom:8px}.dp{width:96%}.dq{width:98%}.dr{width:81%}.ds{margin-left:8px}.dt{color:#6B6B6B}.du{font-size:13px}.dv{height:100%}.eo{color:#FFFFFF}.ep{fill:#FFFFFF}.eq{background:rgba(103, 139, 160, 1)}.er{border-color:rgba(103, 139, 160, 1)}.ev:disabled{cursor:inherit !important}.ew:disabled{opacity:0.3}.ex:disabled:hover{background:rgba(103, 139, 160, 1)}.ey:disabled:hover{border-color:rgba(103, 139, 160, 1)}.ez{border-radius:99em}.fa{border-width:1px}.fb{border-style:solid}.fc{box-sizing:border-box}.fd{text-decoration:none}.fe{text-align:center}.fh{margin-right:32px}.fi{position:relative}.fj{fill:#6B6B6B}.fm{background:transparent}.fn svg{margin-left:4px}.fo svg{fill:#6B6B6B}.fq{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fr{position:absolute}.fy{margin:0 24px}.gc{background:rgba(255, 255, 255, 1)}.gd{border:1px solid #F2F2F2}.ge{box-shadow:0 1px 4px #F2F2F2}.gf{max-height:100vh}.gg{overflow-y:auto}.gh{left:0}.gi{top:calc(100vh + 100px)}.gj{bottom:calc(100vh + 100px)}.gk{width:10px}.gl{pointer-events:none}.gm{word-break:break-word}.gn{word-wrap:break-word}.go:after{display:block}.gp:after{content:""}.gq:after{clear:both}.gr{clear:both}.ha{margin-left:auto}.hb{margin-right:auto}.hc{max-width:4209px}.hi{padding-top:5px}.hj{padding-bottom:5px}.hl{cursor:zoom-in}.hm{z-index:auto}.ho{max-width:100%}.hp{height:auto}.hq{line-height:1.23}.hr{letter-spacing:0}.hs{font-style:normal}.ht{font-weight:700}.it{font-style:inherit}.iu{@media all and (max-width: 551.98px):8px}.iv{@media all and (min-width: 552px) and (max-width: 727.98px):8px}.iw{@media all and (min-width: 728px) and (max-width: 903.98px):16px}.ix{@media all and (min-width: 904px) and (max-width: 1079.98px):16px}.iy{@media all and (min-width: 1080px):16px}.je{align-items:baseline}.jf{width:48px}.jg{height:48px}.jh{border:2px solid rgba(255, 255, 255, 1)}.ji{z-index:0}.jj{box-shadow:none}.jk{border:1px solid rgba(0, 0, 0, 0.05)}.jl{margin-left:-12px}.jm{width:28px}.jn{height:28px}.jo{z-index:1}.jp{width:24px}.jq{margin-bottom:2px}.jr{flex-wrap:nowrap}.js{font-size:16px}.jt{line-height:24px}.jv{margin:0 8px}.jw{display:inline}.jx{color:rgba(103, 139, 160, 1)}.jy{fill:rgba(103, 139, 160, 1)}.kb{flex:0 0 auto}.ke{flex-wrap:wrap}.kh{white-space:pre-wrap}.ki{margin-right:4px}.kj{overflow:hidden}.kk{max-height:20px}.kl{text-overflow:ellipsis}.km{display:-webkit-box}.kn{-webkit-line-clamp:1}.ko{-webkit-box-orient:vertical}.kp{word-break:break-all}.kr{padding-left:8px}.ks{padding-right:8px}.lt> *{flex-shrink:0}.lu{overflow-x:scroll}.lv::-webkit-scrollbar{display:none}.lw{scrollbar-width:none}.lx{-ms-overflow-style:none}.ly{width:74px}.lz{flex-direction:row}.mc{-webkit-user-select:none}.md{border:0}.me{fill:rgba(117, 117, 117, 1)}.mh{outline:0}.mi{user-select:none}.mj> svg{pointer-events:none}.ms{cursor:progress}.mt{opacity:1}.mu{padding:4px 0}.mx{margin-top:0px}.my{width:16px}.na{display:inline-flex}.nd{padding:8px 2px}.ne svg{color:#6B6B6B}.nv{line-height:1.58}.nw{letter-spacing:-0.004em}.nx{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.os{margin-bottom:-0.46em}.ot{padding:2px 4px}.ou{font-size:75%}.ov> strong{font-family:inherit}.ow{font-family:source-code-pro, Menlo, Monaco, "Courier New", Courier, monospace}.ox{max-width:320px}.pd{text-decoration:underline}.pe{margin:auto}.pf{padding-bottom:100%}.pg{height:0}.ph{line-height:1.12}.pi{letter-spacing:-0.022em}.pj{font-weight:600}.qe{margin-bottom:-0.28em}.qk{max-width:1938px}.ql{list-style-type:disc}.qm{margin-left:30px}.qn{padding-left:0px}.qo{font-style:italic}.qp{max-width:1346px}.qq{max-width:1312px}.qr{max-width:1999px}.qs{line-height:1.18}.rg{margin-bottom:-0.31em}.rm{box-shadow:inset 3px 0 0 0 #242424}.rn{padding-left:23px}.ro{margin-left:-20px}.rp{margin-bottom:26px}.rq{margin-top:6px}.rr{margin-top:8px}.rs{margin-right:8px}.rt{padding:8px 16px}.ru{border-radius:100px}.rv{transition:background 300ms ease}.rx{white-space:nowrap}.ry{border-top:none}.se{height:52px}.sf{max-height:52px}.sg{box-sizing:content-box}.sh{position:static}.sj{max-width:155px}.sp{margin-right:20px}.sv{align-items:flex-end}.sw{width:76px}.sx{height:76px}.sy{border:2px solid #F9F9F9}.sz{height:72px}.ta{width:72px}.tb{margin-left:-16px}.tc{width:36px}.td{height:36px}.te{width:auto}.tf{stroke:#F2F2F2}.tg{color:#F2F2F2}.th{fill:#F2F2F2}.ti{background:#F2F2F2}.tj{border-color:#F2F2F2}.tp{font-weight:500}.tq{font-size:24px}.tr{line-height:30px}.ts{letter-spacing:-0.016em}.tt{margin-top:16px}.tu{height:0px}.tv{border-bottom:solid 1px #E5E5E5}.tw{margin-top:72px}.tx{padding:24px 0}.ty{margin-bottom:0px}.tz{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.es:hover{background:rgba(91, 119, 136, 1)}.et:hover{border-color:rgba(91, 119, 136, 1)}.eu:hover{cursor:pointer}.fk:hover{color:#242424}.fl:hover{fill:#242424}.fp:hover svg{fill:#242424}.fs:hover{background-color:rgba(0, 0, 0, 0.1)}.ju:hover{text-decoration:underline}.jz:hover:not(:disabled){color:rgba(91, 119, 136, 1)}.ka:hover:not(:disabled){fill:rgba(91, 119, 136, 1)}.mg:hover{fill:rgba(8, 8, 8, 1)}.mv:hover{fill:#000000}.mw:hover p{color:#000000}.mz:hover{color:#000000}.nf:hover svg{color:#000000}.rw:hover{background-color:#F2F2F2}.tk:hover{background:#F2F2F2}.tl:hover{border-color:#F2F2F2}.tm:hover{cursor:wait}.tn:hover{color:#F2F2F2}.to:hover{fill:#F2F2F2}.bc:focus-within path{fill:#242424}.hn:focus{transform:scale(1.01)}.mf:focus{fill:rgba(8, 8, 8, 1)}.ng:focus svg{color:#000000}.mk:active{border-style:none}</style>
<style type="text/css" data-fela-rehydration="545" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ee{font-size:14px}.ef{line-height:20px}.el{font-size:13px}.em{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:68px}.gb{max-width:680px}.gz{max-width:1192px}.hh{margin-top:40px}.io{font-size:42px}.ip{margin-top:1em}.iq{margin-bottom:32px}.ir{line-height:52px}.is{letter-spacing:-0.011em}.jd{align-items:center}.lf{border-top:solid 1px #F2F2F2}.lg{border-bottom:solid 1px #F2F2F2}.lh{margin:32px 0 0}.li{padding:3px 8px}.lr> *{margin-right:24px}.ls> :last-child{margin-right:0}.mr{margin-top:0px}.nc{margin:0}.oo{font-size:20px}.op{margin-top:2.14em}.oq{line-height:32px}.or{letter-spacing:-0.003em}.pc{margin-top:56px}.qa{font-size:24px}.qb{margin-top:1.95em}.qc{line-height:30px}.qd{letter-spacing:-0.016em}.qj{margin-top:0.94em}.rd{margin-top:1.72em}.re{line-height:24px}.rf{letter-spacing:0}.rl{margin-top:1.14em}.sd{margin-bottom:88px}.so{display:inline-block}.su{padding-top:72px}</style>
<style type="text/css" data-fela-rehydration="545" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.mq{margin-top:0px}.sn{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="545" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.mp{margin-top:0px}.sm{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="545" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.mn{margin-top:0px}.mo{margin-right:0px}.sl{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="545" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.br{width:24px}.cb{margin:0 24px}.cq{height:40px}.cx{margin-bottom:44px}.dj{margin-bottom:32px}.dw{font-size:13px}.dx{line-height:20px}.eg{padding:0px 8px 1px}.ft{margin-bottom:4px}.gs{margin:0}.gt{max-width:100%}.hd{margin-top:32px}.hu{font-size:32px}.hv{margin-top:1.01em}.hw{margin-bottom:24px}.hx{line-height:38px}.hy{letter-spacing:-0.014em}.iz{align-items:flex-start}.kc{flex-direction:column}.kf{margin-bottom:2px}.kt{margin:24px -24px 0}.ku{padding:0}.lj> *{margin-right:8px}.lk> :last-child{margin-right:24px}.ma{margin-left:0px}.ml{margin-top:0px}.mm{margin-right:0px}.nh{border:1px solid #F2F2F2}.ni{border-radius:99em}.nj{padding:0px 16px 0px 12px}.nk{height:38px}.nl{align-items:center}.nn svg{margin-right:8px}.ny{font-size:18px}.nz{margin-top:1.56em}.oa{line-height:28px}.ob{letter-spacing:-0.003em}.oy{margin-top:40px}.pk{font-size:20px}.pl{margin-top:1.2em}.pm{line-height:24px}.pn{letter-spacing:0}.qf{margin-top:0.67em}.qt{font-size:16px}.qu{margin-top:1.23em}.rh{margin-top:1.34em}.rz{margin-bottom:80px}.sk{display:inline-block}.sq{padding-top:48px}.nm:hover{border-color:#E5E5E5}</style>
<style type="text/css" data-fela-rehydration="545" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bu{width:64px}.ce{margin:0 64px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.ec{font-size:14px}.ed{line-height:20px}.ej{font-size:13px}.ek{padding:5px 12px}.ff{display:flex}.fw{margin-bottom:68px}.ga{max-width:680px}.gy{max-width:1192px}.hg{margin-top:40px}.ij{font-size:42px}.ik{margin-top:1em}.il{margin-bottom:32px}.im{line-height:52px}.in{letter-spacing:-0.011em}.jc{align-items:center}.lb{border-top:solid 1px #F2F2F2}.lc{border-bottom:solid 1px #F2F2F2}.ld{margin:32px 0 0}.le{padding:3px 8px}.lp> *{margin-right:24px}.lq> :last-child{margin-right:0}.nb{margin:0}.ok{font-size:20px}.ol{margin-top:2.14em}.om{line-height:32px}.on{letter-spacing:-0.003em}.pb{margin-top:56px}.pw{font-size:24px}.px{margin-top:1.95em}.py{line-height:30px}.pz{letter-spacing:-0.016em}.qi{margin-top:0.94em}.ra{margin-top:1.72em}.rb{line-height:24px}.rc{letter-spacing:0}.rk{margin-top:1.14em}.sc{margin-bottom:88px}.st{padding-top:72px}</style>
<style type="text/css" data-fela-rehydration="545" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bt{width:64px}.cd{margin:0 48px}.cs{height:48px}.cz{margin-bottom:52px}.dl{margin-bottom:48px}.ea{font-size:13px}.eb{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:68px}.fz{max-width:680px}.gw{margin:0}.gx{max-width:100%}.hf{margin-top:40px}.ie{font-size:42px}.if{margin-top:1em}.ig{margin-bottom:32px}.ih{line-height:52px}.ii{letter-spacing:-0.011em}.jb{align-items:center}.kx{border-top:solid 1px #F2F2F2}.ky{border-bottom:solid 1px #F2F2F2}.kz{margin:32px 0 0}.la{padding:3px 8px}.ln> *{margin-right:24px}.lo> :last-child{margin-right:0}.og{font-size:20px}.oh{margin-top:2.14em}.oi{line-height:32px}.oj{letter-spacing:-0.003em}.pa{margin-top:56px}.ps{font-size:24px}.pt{margin-top:1.95em}.pu{line-height:30px}.pv{letter-spacing:-0.016em}.qh{margin-top:0.94em}.qx{margin-top:1.72em}.qy{line-height:24px}.qz{letter-spacing:0}.rj{margin-top:1.14em}.sb{margin-bottom:88px}.ss{padding-top:72px}</style>
<style type="text/css" data-fela-rehydration="545" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dy{font-size:13px}.dz{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:4px}.gu{margin:0}.gv{max-width:100%}.he{margin-top:32px}.hz{font-size:32px}.ia{margin-top:1.01em}.ib{margin-bottom:24px}.ic{line-height:38px}.id{letter-spacing:-0.014em}.ja{align-items:flex-start}.kd{flex-direction:column}.kg{margin-bottom:2px}.kv{margin:24px 0 0}.kw{padding:0}.ll> *{margin-right:8px}.lm> :last-child{margin-right:8px}.mb{margin-left:0px}.no{border:1px solid #F2F2F2}.np{border-radius:99em}.nq{padding:0px 16px 0px 12px}.nr{height:38px}.ns{align-items:center}.nu svg{margin-right:8px}.oc{font-size:18px}.od{margin-top:1.56em}.oe{line-height:28px}.of{letter-spacing:-0.003em}.oz{margin-top:40px}.po{font-size:20px}.pp{margin-top:1.2em}.pq{line-height:24px}.pr{letter-spacing:0}.qg{margin-top:0.67em}.qv{font-size:16px}.qw{margin-top:1.23em}.ri{margin-top:1.34em}.sa{margin-bottom:80px}.sr{padding-top:48px}.nt:hover{border-color:#E5E5E5}</style>
<style type="text/css" data-fela-rehydration="545" data-fela-type="RULE" media="print">.si{display:none}</style>
<style type="text/css" data-fela-rehydration="545" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.hk{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style>
<style type="text/css" data-fela-rehydration="545" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.kq{max-height:none}</style>
</head><body>
<article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fr gh gi gj gk gl"></div><div class="gm gn go gp gq"><div class="gr"><div class="ab ca"><div class="gs gt gu gv gw gx ce gy cf gz ch bg"><figure class="hd he hf hg hh gr hi hj paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb hc"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/1*oL1k6XmTcDVBQXf9i8JTZw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*oL1k6XmTcDVBQXf9i8JTZw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*oL1k6XmTcDVBQXf9i8JTZw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*oL1k6XmTcDVBQXf9i8JTZw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*oL1k6XmTcDVBQXf9i8JTZw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*oL1k6XmTcDVBQXf9i8JTZw.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*oL1k6XmTcDVBQXf9i8JTZw.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/1*oL1k6XmTcDVBQXf9i8JTZw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*oL1k6XmTcDVBQXf9i8JTZw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*oL1k6XmTcDVBQXf9i8JTZw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*oL1k6XmTcDVBQXf9i8JTZw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*oL1k6XmTcDVBQXf9i8JTZw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*oL1k6XmTcDVBQXf9i8JTZw.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*oL1k6XmTcDVBQXf9i8JTZw.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"><img alt="" class="bg ho hp c" width="1000" height="298" loading="eager" role="presentation"></picture></div></div></figure></div></div></div><div class="ab ca"><div class="ch bg fy fz ga gb"><div><div class="iu iv iw ix iy"><div class="speechify-ignore ab co"><div class="speechify-ignore bg l"><div class="iz ja jb jc jd ab"><div><div class="ab je"><a rel="noopener follow" href="/@levima?source=post_page-----eb57c1ea0af0--------------------------------"><div><div class="bl" aria-hidden="false"><div class="l jf jg bx jh ji"><div class="l fi"><img alt="Levi Alburquerque" class="l fc bx dc dd cw" src="https://miro.medium.com/v2/da:true/resize:fill:88:88/0*yc70WC42MPApCNIR" width="44" height="44" loading="lazy" data-testid="authorPhoto"><div class="jj bx l dc dd fr n jk fs"></div></div></div></div></div></a><a href="https://medium.com/androiddevelopers?source=post_page-----eb57c1ea0af0--------------------------------" rel="noopener follow"><div class="jl ab fi"><div><div class="bl" aria-hidden="false"><div class="l jm jn bx jh jo"><div class="l fi"><img alt="Developer Android" class="l fc bx bq jp cw" src="https://miro.medium.com/v2/resize:fill:48:48/1*3tLD4Ve66pbBpuawm9Fu9Q.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"><div class="jj bx l bq jp fr n jk fs"></div></div></div></div></div></div></a></div></div><div class="bm bg l"><div class="ab"><div style="flex:1"><span class="be b bf z bj"><div class="jq ab q"><div class="ab q jr"><div class="ab q"><div><div class="bl" aria-hidden="false"><p class="be b js jt bj"><a class="af ag ah ai aj ak al am an ao ap aq ar ju" data-testid="authorName" rel="noopener follow" href="/@levima?source=post_page-----eb57c1ea0af0--------------------------------">Levi Alburquerque</a></p></div></div></div><span class="jv jw" aria-hidden="true"><span class="be b bf z dt">·</span></span><p class="be b js jt dt"><span><a class="jx jy ah ai aj ak al am an ao ap aq ar ew jz ka" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F68e2e0af15b1&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Funderstanding-nested-scrolling-in-jetpack-compose-eb57c1ea0af0&user=Levi+Albuquerque&userId=68e2e0af15b1&source=post_page-68e2e0af15b1----eb57c1ea0af0---------------------post_header-----------">Ikuti</a></span></p></div></div></span></div></div><div class="l kb"><span class="be b bf z dt"><div class="ab cm kc kd ke"><div class="kf kg ab"><div class="be b bf z dt ab kh"><span class="ki l kb">Dipublikasikan di</span><div><div class="bl" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar ju ab q" data-testid="publicationName" href="https://medium.com/androiddevelopers?source=post_page-----eb57c1ea0af0--------------------------------" rel="noopener follow"><p class="be b bf z kj kk kl km kn ko kp kq bj">Developer Android</p></a></div></div></div><div class="h k"><span class="jv jw" aria-hidden="true"><span class="be b bf z dt">·</span></span></div></div><span class="be b bf z dt"><div class="ab ae"><span data-testid="storyReadTime">Bacaan 10 menit</span><div class="kr ks l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="be b bf z dt">·</span></span></div><span data-testid="storyPublishDate"></span></div></span></div></span></div></div></div><div class="ab co kt ku kv kw kx ky kz la lb lc ld le lf lg lh li"><div class="h k w ff fg q"><div class="ly l"><div class="ab q lz"><div class="pw-multi-vote-icon fi ki ma mb mc"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fandroiddevelopers%2Feb57c1ea0af0&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Funderstanding-nested-scrolling-in-jetpack-compose-eb57c1ea0af0&user=Levi+Albuquerque&userId=68e2e0af15b1&source=-----eb57c1ea0af0---------------------clap_footer-----------"><div><div class="bl" aria-hidden="false"><div class="md ao me mf mg mh am mi mj mk mc"><svg width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.37.83L12 3.28l.63-2.45h-1.26zM13.92 3.95l1.52-2.1-1.18-.4-.34 2.5zM8.59 1.84l1.52 2.11-.34-2.5-1.18.4zM18.52 18.92a4.23 4.23 0 0 1-2.62 1.33l.41-.37c2.39-2.4 2.86-4.95 1.4-7.63l-.91-1.6-.8-1.67c-.25-.56-.19-.98.21-1.29a.7.7 0 0 1 .55-.13c.28.05.54.23.72.5l2.37 4.16c.97 1.62 1.14 4.23-1.33 6.7zm-11-.44l-4.15-4.15a.83.83 0 0 1 1.17-1.17l2.16 2.16a.37.37 0 0 0 .51-.52l-2.15-2.16L3.6 11.2a.83.83 0 0 1 1.17-1.17l3.43 3.44a.36.36 0 0 0 .52 0 .36.36 0 0 0 0-.52L5.29 9.51l-.97-.97a.83.83 0 0 1 0-1.16.84.84 0 0 1 1.17 0l.97.97 3.44 3.43a.36.36 0 0 0 .51 0 .37.37 0 0 0 0-.52L6.98 7.83a.82.82 0 0 1-.18-.9.82.82 0 0 1 .76-.51c.22 0 .43.09.58.24l5.8 5.79a.37.37 0 0 0 .58-.42L13.4 9.67c-.26-.56-.2-.98.2-1.29a.7.7 0 0 1 .55-.13c.28.05.55.23.73.5l2.2 3.86c1.3 2.38.87 4.59-1.29 6.75a4.65 4.65 0 0 1-4.19 1.37 7.73 7.73 0 0 1-4.07-2.25zm3.23-12.5l2.12 2.11c-.41.5-.47 1.17-.13 1.9l.22.46-3.52-3.53a.81.81 0 0 1-.1-.36c0-.23.09-.43.24-.59a.85.85 0 0 1 1.17 0zm7.36 1.7a1.86 1.86 0 0 0-1.23-.84 1.44 1.44 0 0 0-1.12.27c-.3.24-.5.55-.58.89-.25-.25-.57-.4-.91-.47-.28-.04-.56 0-.82.1l-2.18-2.18a1.56 1.56 0 0 0-2.2 0c-.2.2-.33.44-.4.7a1.56 1.56 0 0 0-2.63.75 1.6 1.6 0 0 0-2.23-.04 1.56 1.56 0 0 0 0 2.2c-.24.1-.5.24-.72.45a1.56 1.56 0 0 0 0 2.2l.52.52a1.56 1.56 0 0 0-.75 2.61L7 19a8.46 8.46 0 0 0 4.48 2.45 5.18 5.18 0 0 0 3.36-.5 4.89 4.89 0 0 0 4.2-1.51c2.75-2.77 2.54-5.74 1.43-7.59L18.1 7.68z"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l ml mm mn mo mp mq mr"><p class="be b du z dt"><span class="ms">--</span></p></div></div></div><div><div class="bl" aria-hidden="false"><button class="ao md mt mu ab q fj mv mw" aria-label="responses"><svg width="24" height="24" viewBox="0 0 24 24" class="mx"><path d="M18 16.8a7.14 7.14 0 0 0 2.24-5.32c0-4.12-3.53-7.48-8.05-7.48C7.67 4 4 7.36 4 11.48c0 4.13 3.67 7.48 8.2 7.48a8.9 8.9 0 0 0 2.38-.32c.23.2.48.39.75.56 1.06.69 2.2 1.04 3.4 1.04.22 0 .4-.11.48-.29a.5.5 0 0 0-.04-.52 6.4 6.4 0 0 1-1.16-2.65v.02zm-3.12 1.06l-.06-.22-.32.1a8 8 0 0 1-2.3.33c-4.03 0-7.3-2.96-7.3-6.59S8.17 4.9 12.2 4.9c4 0 7.1 2.96 7.1 6.6 0 1.8-.6 3.47-2.02 4.72l-.2.16v.26l.02.3a6.74 6.74 0 0 0 .88 2.4 5.27 5.27 0 0 1-2.17-.86c-.28-.17-.72-.38-.94-.59l.01-.02z"></path></svg></button></div></div></div><div class="ab q lj lk ll lm ln lo lp lq lr ls lt lu lv lw lx"><div class="my k j i d"></div><div class="h k"><div><div class="bl" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Feb57c1ea0af0&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Funderstanding-nested-scrolling-in-jetpack-compose-eb57c1ea0af0&source=-----eb57c1ea0af0---------------------bookmark_footer-----------"><svg width="25" height="25" viewBox="0 0 25 25" fill="none" class="dt mz" aria-label="Add to list bookmark button"><path d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18V2.5zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .8.4l5.7-4.4 5.7 4.4a.5.5 0 0 0 .8-.4v-8.5a.5.5 0 0 0-1 0v7.48l-5.2-4a.5.5 0 0 0-.6 0l-5.2 4V7z" fill="currentColor"></path></svg></a></span></div></div></div><div class="fc na cm"><div class="l ae"><div class="ab ca"><div class="gs gu gw nb nc ho ch bg"><div class="ab"><div class="bl bg" aria-hidden="false"><div><div class="bl" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fj ah ai aj ak al nd an ao ap ew ne nf mw ng nh ni nj nk s nl nm nn no np nq nr u ns nt nu"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0zm9-10a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.38 10.42l-4.6 3.06a.5.5 0 0 1-.78-.41V8.93c0-.4.45-.63.78-.41l4.6 3.06c.3.2.3.64 0 .84z" fill="currentColor"></path></svg><div class="j i d"><p class="be b bf z dt">Dengarkan</p></div></button></div></div></div></div></div></div></div></div><div class="bl" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bl" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fj ah ai aj ak al nd an ao ap ew ne nf mw ng nh ni nj nk s nl nm nn no np nq nr u ns nt nu"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.22 4.93a.42.42 0 0 1-.12.13h.01a.45.45 0 0 1-.29.08.52.52 0 0 1-.3-.13L12.5 3v7.07a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5V3.02l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.8a.42.42 0 0 1 .07.5zm-.1.14zm.88 2h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.14c.1.1.15.22.15.35a.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9V8.96c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1z" fill="currentColor"></path></svg><div class="j i d"><p class="be b bf z dt">Bagikan</p></div></button></div></div></div></div></div></div></div></div></div><p id="5941" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Daftar adalah inti dari sebagian besar aplikasi Android. Selama bertahun-tahun, berbagai solusi diperkenalkan guna memastikan komponen UI lainnya dapat berinteraksi dengan daftar tersebut — misalnya, reaksi panel aplikasi terhadap scroll daftar atau interaksi daftar bertumpuk dengan satu sama lain. Pernahkah Anda menghadapi situasi saat Anda memiliki satu daftar di dalam daftar lainnya dan, dengan men-scroll daftar bagian dalam sampai akhir, Anda ingin daftar bagian luar melanjutkan pergerakannya? Itulah contoh scroll bertingkat klasik!</p><p id="c5e0" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Scroll bertingkat adalah sistem dengan komponen scroll yang ada di dalam satu sama lain yang dapat mengomunikasikan delta scroll-nya agar dapat bekerja sama. Sebagai contoh, dalam sistem View, <code class="cw ot ou ov ow b">NestedScrollingParent</code> dan <code class="cw ot ou ov ow b">NestedScrollingChild</code> adalah komponen penyusun untuk scroll bertingkat. Konstruksi ini digunakan oleh komponen seperti <code class="cw ot ou ov ow b">NestedScrollView</code> dan <code class="cw ot ou ov ow b">RecyclerView</code> untuk memungkinkan banyak kasus penggunaan scroll bertingkat. Scroll bertingkat merupakan fitur utama di banyak framework UI, dan dalam postingan blog ini, kita akan melihat bagaimana Jetpack Compose menanganinya.</p><p id="bc49" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Mari kita lihat kasus penggunaan ketika sistem scroll bertingkat dapat bermanfaat. Dalam contoh ini, kita akan membuat efek panel aplikasi yang dapat diciutkan khusus di aplikasi kita. Panel aplikasi yang dapat diciutkan akan berinteraksi dengan daftar untuk menciptakan efek menyembunyikan — kapan pun, jika panel aplikasi diperluas, men-scroll daftar ke atas akan membuatnya disembunyikan. Demikian pula, jika panel aplikasi diciutkan, men-scroll daftar ke bawah akan membuatnya meluas. Berikut ini contoh tampilannya:</p><figure class="oy oz pa pb pc gr ha hb paragraph-image"><div class="ha hb ox"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*8QYaeIvCjHDVWFZC.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*8QYaeIvCjHDVWFZC.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*8QYaeIvCjHDVWFZC.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*8QYaeIvCjHDVWFZC.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*8QYaeIvCjHDVWFZC.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*8QYaeIvCjHDVWFZC.gif 1100w, https://miro.medium.com/v2/resize:fit:640/format:webp/0*8QYaeIvCjHDVWFZC.gif 640w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 320px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*8QYaeIvCjHDVWFZC.gif 640w, https://miro.medium.com/v2/resize:fit:720/0*8QYaeIvCjHDVWFZC.gif 720w, https://miro.medium.com/v2/resize:fit:750/0*8QYaeIvCjHDVWFZC.gif 750w, https://miro.medium.com/v2/resize:fit:786/0*8QYaeIvCjHDVWFZC.gif 786w, https://miro.medium.com/v2/resize:fit:828/0*8QYaeIvCjHDVWFZC.gif 828w, https://miro.medium.com/v2/resize:fit:1100/0*8QYaeIvCjHDVWFZC.gif 1100w, https://miro.medium.com/v2/resize:fit:640/0*8QYaeIvCjHDVWFZC.gif 640w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 320px"><img alt="" class="bg ho hp c" width="320" height="712" loading="eager" role="presentation"></picture></div></figure><p id="28b8" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Anggaplah aplikasi kita terdiri dari panel aplikasi dan daftar, yang berlaku untuk banyak aplikasi.</p><p id="d386" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Catatan: Anda dapat mencapai perilaku serupa dengan menggunakan parameter TopAppBar <code class="cw ot ou ov ow b"><a class="af pd" href="https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/AppBar.kt;l=653?q=TopAppBarScrollBehavior&sq=&ss=androidx%2Fplatform%2Fframeworks%2Fsupport" rel="noopener ugc nofollow" target="_blank">scrollBehavior</a></code> Material 3, namun kami menulis ulang beberapa logika tersebut untuk mengilustrasikan cara kerja sistem scroll bertingkat.</p><figure class="oy oz pa pb pc gr"><div class="pe kj l fi"><div class="pf pg l"></div></div></figure><p id="c204" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Kode ini merender hal berikut:</p><figure class="oy oz pa pb pc gr ha hb paragraph-image"><div class="ha hb ox"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*kGlyJuqXUWlTn7qw.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*kGlyJuqXUWlTn7qw.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*kGlyJuqXUWlTn7qw.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*kGlyJuqXUWlTn7qw.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*kGlyJuqXUWlTn7qw.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*kGlyJuqXUWlTn7qw.gif 1100w, https://miro.medium.com/v2/resize:fit:640/format:webp/0*kGlyJuqXUWlTn7qw.gif 640w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 320px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*kGlyJuqXUWlTn7qw.gif 640w, https://miro.medium.com/v2/resize:fit:720/0*kGlyJuqXUWlTn7qw.gif 720w, https://miro.medium.com/v2/resize:fit:750/0*kGlyJuqXUWlTn7qw.gif 750w, https://miro.medium.com/v2/resize:fit:786/0*kGlyJuqXUWlTn7qw.gif 786w, https://miro.medium.com/v2/resize:fit:828/0*kGlyJuqXUWlTn7qw.gif 828w, https://miro.medium.com/v2/resize:fit:1100/0*kGlyJuqXUWlTn7qw.gif 1100w, https://miro.medium.com/v2/resize:fit:640/0*kGlyJuqXUWlTn7qw.gif 640w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 320px"><img alt="" class="bg ho hp c" width="320" height="712" loading="lazy" role="presentation"></picture></div></figure><p id="cf47" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Secara default, tidak ada komunikasi antara panel aplikasi dan daftar. Jika kita men-scroll daftarnya, panel aplikasi bersifat statis. Salah satu alternatifnya adalah menjadikan panel aplikasi menjadi bagian dari daftar itu sendiri, namun kita segera melihat bahwa cara itu tidak akan berhasil. Setelah men-scroll daftar ke bawah, kita perlu men-scroll lagi ke atas untuk melihat panel aplikasi:</p><figure class="oy oz pa pb pc gr ha hb paragraph-image"><div class="ha hb ox"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*fEUOMoZ-33AhkeDD.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*fEUOMoZ-33AhkeDD.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*fEUOMoZ-33AhkeDD.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*fEUOMoZ-33AhkeDD.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*fEUOMoZ-33AhkeDD.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*fEUOMoZ-33AhkeDD.gif 1100w, https://miro.medium.com/v2/resize:fit:640/format:webp/0*fEUOMoZ-33AhkeDD.gif 640w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 320px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*fEUOMoZ-33AhkeDD.gif 640w, https://miro.medium.com/v2/resize:fit:720/0*fEUOMoZ-33AhkeDD.gif 720w, https://miro.medium.com/v2/resize:fit:750/0*fEUOMoZ-33AhkeDD.gif 750w, https://miro.medium.com/v2/resize:fit:786/0*fEUOMoZ-33AhkeDD.gif 786w, https://miro.medium.com/v2/resize:fit:828/0*fEUOMoZ-33AhkeDD.gif 828w, https://miro.medium.com/v2/resize:fit:1100/0*fEUOMoZ-33AhkeDD.gif 1100w, https://miro.medium.com/v2/resize:fit:640/0*fEUOMoZ-33AhkeDD.gif 640w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 320px"><img alt="" class="bg ho hp c" width="320" height="712" loading="lazy" role="presentation"></picture></div></figure><p id="8a1b" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Dengan memeriksa masalah ini, kami melihat bahwa kami ingin mempertahankan tempat hierarki panel aplikasi (di luar daftar). Namun, kami juga ingin bereaksi terhadap perubahan scroll dalam daftar — yaitu, membuat komponen bereaksi terhadap scroll daftar. Ini adalah petunjuk bahwa sistem scroll bertingkat di Compose mungkin solusi yang bagus untuk masalah ini.</p><p id="4fa0" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Sistem scroll bertingkat adalah solusi yang bagus jika Anda ingin koordinasi antar komponen ketika satu atau beberapa komponen dapat di-scroll dan tertaut secara hierarki (dalam kasus di atas, panel aplikasi dan daftar memiliki induk yang sama). Sistem ini menghubungkan kontainer scroll dan memberikan kesempatan bagi kita untuk berinteraksi dengan delta scroll yang sedang disebarkan/dibagikan di antara mereka.</p><h1 id="9508" class="ph pi hs be pj pk pl pm pn po pp pq pr ps pt pu pv pw px py pz qa qb qc qd qe bj">Mempresentasikan: Siklus scroll bertingkat</h1><p id="9bde" class="pw-post-body-paragraph nv nw hs nx b ny qf oa ob oc qg oe of og qh oi oj ok qi om on oo qj oq or os gm bj">Mari kita kembali sedikit dan membahas cara kerja scroll bertingkat secara umum. Siklus scroll bertingkat adalah aliran delta scroll (perubahan) yang dikirim ke atas dan ke bawah pohon hierarki melalui seluruh komponen yang dapat menjadi bagian dari sistem scroll bertingkat.</p><figure class="oy oz pa pb pc gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb qk"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/1*aRPgTSleR2wtqXEcymRf6w.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*aRPgTSleR2wtqXEcymRf6w.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*aRPgTSleR2wtqXEcymRf6w.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*aRPgTSleR2wtqXEcymRf6w.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*aRPgTSleR2wtqXEcymRf6w.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*aRPgTSleR2wtqXEcymRf6w.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*aRPgTSleR2wtqXEcymRf6w.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/1*aRPgTSleR2wtqXEcymRf6w.png 640w, https://miro.medium.com/v2/resize:fit:720/1*aRPgTSleR2wtqXEcymRf6w.png 720w, https://miro.medium.com/v2/resize:fit:750/1*aRPgTSleR2wtqXEcymRf6w.png 750w, https://miro.medium.com/v2/resize:fit:786/1*aRPgTSleR2wtqXEcymRf6w.png 786w, https://miro.medium.com/v2/resize:fit:828/1*aRPgTSleR2wtqXEcymRf6w.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*aRPgTSleR2wtqXEcymRf6w.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*aRPgTSleR2wtqXEcymRf6w.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="204" loading="lazy" role="presentation"></picture></div></div></figure><p id="006c" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Mari kita ambil sebuah daftar sebagai contoh. Saat peristiwa gestur terdeteksi, bahkan sebelum daftar itu sendiri dapat di-scroll, delta akan dikirim ke sistem scroll bertingkat. Delta yang dihasilkan oleh peristiwa tersebut akan melalui 3 tahap: pra-scroll, pemakaian node, dan pasca-scroll.</p><ul class=""><li id="b30a" class="nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os ql qm qn bj">Pada tahap <strong class="nx ht"><em class="qo">pra-scroll</em></strong>, komponen yang menerima delta sentuh akan mengirimkan peristiwa tersebut melalui pohon hierarki ke induk paling atas. Kemudian peristiwa delta akan melakukan bubble down, artinya delta akan disebarkan dari induk paling dasar ke bawah menuju turunan yang memulai siklus scroll bertingkat. Hal ini memberikan peluang bagi induk scroll bertingkat di sepanjang jalur ini (composable yang menggunakan pengubah <code class="cw ot ou ov ow b">nestedScroll</code>) untuk “melakukan sesuatu” dengan delta sebelum node itu sendiri dapat menggunakannya.</li></ul><p id="4baf" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Jika kita kembali ke diagram, turunan (daftar, misalnya) yang men-scroll 10 piksel akan memulai proses scroll bertingkat. Turunan tersebut akan mengirimkan 10 piksel ke atas rantai ke induk paling dasar yang selama tahap pra-scroll, induk akan diberi kesempatan untuk menggunakan 10 piksel tersebut:</p><figure class="oy oz pa pb pc gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb qp"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/1*qdEGr4ItKAdh0lAfALSMNg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*qdEGr4ItKAdh0lAfALSMNg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*qdEGr4ItKAdh0lAfALSMNg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*qdEGr4ItKAdh0lAfALSMNg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*qdEGr4ItKAdh0lAfALSMNg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*qdEGr4ItKAdh0lAfALSMNg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*qdEGr4ItKAdh0lAfALSMNg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/1*qdEGr4ItKAdh0lAfALSMNg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*qdEGr4ItKAdh0lAfALSMNg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*qdEGr4ItKAdh0lAfALSMNg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*qdEGr4ItKAdh0lAfALSMNg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*qdEGr4ItKAdh0lAfALSMNg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*qdEGr4ItKAdh0lAfALSMNg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*qdEGr4ItKAdh0lAfALSMNg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="325" loading="lazy" role="presentation"></picture></div></div></figure><p id="68fe" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Dalam perjalanan menuju turunan yang memulai proses, setiap induk dapat memilih untuk menggunakan sebagian dari 10 piksel dan sisanya akan disebarkan ke bawah rantai. Ketika sudah sampai di turunan, kita akan masuk ke tahap pemakaian node. Dalam contoh ini, induk 1 memilih untuk menggunakan 5 piksel, sehingga tersisa 5 piksel untuk tahap berikutnya.</p><figure class="oy oz pa pb pc gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb qq"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/1*j-7pCirM3ZzMCWiTrw10Qw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*j-7pCirM3ZzMCWiTrw10Qw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*j-7pCirM3ZzMCWiTrw10Qw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*j-7pCirM3ZzMCWiTrw10Qw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*j-7pCirM3ZzMCWiTrw10Qw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*j-7pCirM3ZzMCWiTrw10Qw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*j-7pCirM3ZzMCWiTrw10Qw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/1*j-7pCirM3ZzMCWiTrw10Qw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*j-7pCirM3ZzMCWiTrw10Qw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*j-7pCirM3ZzMCWiTrw10Qw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*j-7pCirM3ZzMCWiTrw10Qw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*j-7pCirM3ZzMCWiTrw10Qw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*j-7pCirM3ZzMCWiTrw10Qw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*j-7pCirM3ZzMCWiTrw10Qw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="363" loading="lazy" role="presentation"></picture></div></div></figure><ul class=""><li id="f752" class="nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os ql qm qn bj">Pada tahap <strong class="nx ht"><em class="qo">pemakaian node</em></strong>, <strong class="nx ht">node itu sendiri</strong> akan menggunakan delta apa pun yang tidak digunakan oleh induknya. Ini adalah momen ketika, misalnya, sebuah daftar akan benar-benar bergerak.</li></ul><p id="ba9a" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Selama tahap ini, turunan dapat memilih untuk menggunakan sebagian scroll yang tersisa atau seluruhnya. Sisanya akan dikirim kembali untuk melewati tahap pasca-scroll. Turunan dalam diagram kita hanya menggunakan 2 piksel untuk bergerak, menyisakan 3 piksel untuk tahap berikutnya.</p><figure class="oy oz pa pb pc gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb qp"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/1*D_xTrsT7w3t55ZRXOuIspA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*D_xTrsT7w3t55ZRXOuIspA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*D_xTrsT7w3t55ZRXOuIspA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*D_xTrsT7w3t55ZRXOuIspA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*D_xTrsT7w3t55ZRXOuIspA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*D_xTrsT7w3t55ZRXOuIspA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*D_xTrsT7w3t55ZRXOuIspA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/1*D_xTrsT7w3t55ZRXOuIspA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*D_xTrsT7w3t55ZRXOuIspA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*D_xTrsT7w3t55ZRXOuIspA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*D_xTrsT7w3t55ZRXOuIspA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*D_xTrsT7w3t55ZRXOuIspA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*D_xTrsT7w3t55ZRXOuIspA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*D_xTrsT7w3t55ZRXOuIspA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="325" loading="lazy" role="presentation"></picture></div></div></figure><ul class=""><li id="dd82" class="nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os ql qm qn bj">Terakhir, pada tahap<strong class="nx ht"><em class="qo"> pasca-scroll</em></strong>, apa pun yang tidak digunakan oleh node itu sendiri akan dikirim <strong class="nx ht">naik</strong> lagi ke pendahulunya jika ada orang yang ingin menggunakannya.</li></ul><p id="ccdf" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Tahap pasca-scroll akan bekerja dengan cara yang sama seperti tahap pra-scroll, ketika setiap induk dapat memilih untuk menggunakannya.</p><figure class="oy oz pa pb pc gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb qp"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/1*CApeAzl8F_44wUhdgNKCDA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*CApeAzl8F_44wUhdgNKCDA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*CApeAzl8F_44wUhdgNKCDA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*CApeAzl8F_44wUhdgNKCDA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*CApeAzl8F_44wUhdgNKCDA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*CApeAzl8F_44wUhdgNKCDA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*CApeAzl8F_44wUhdgNKCDA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/1*CApeAzl8F_44wUhdgNKCDA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*CApeAzl8F_44wUhdgNKCDA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*CApeAzl8F_44wUhdgNKCDA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*CApeAzl8F_44wUhdgNKCDA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*CApeAzl8F_44wUhdgNKCDA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*CApeAzl8F_44wUhdgNKCDA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*CApeAzl8F_44wUhdgNKCDA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="325" loading="lazy" role="presentation"></picture></div></div></figure><p id="977a" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Selama tahap ini, induk 2 menggunakan 3 piksel yang tersisa dan melaporkan 0 piksel sisanya ke bawah rantai.</p><figure class="oy oz pa pb pc gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb qp"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/1*TtnjkhQQbo9zjGEo5tgQmw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*TtnjkhQQbo9zjGEo5tgQmw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*TtnjkhQQbo9zjGEo5tgQmw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*TtnjkhQQbo9zjGEo5tgQmw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*TtnjkhQQbo9zjGEo5tgQmw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*TtnjkhQQbo9zjGEo5tgQmw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*TtnjkhQQbo9zjGEo5tgQmw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/1*TtnjkhQQbo9zjGEo5tgQmw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*TtnjkhQQbo9zjGEo5tgQmw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*TtnjkhQQbo9zjGEo5tgQmw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*TtnjkhQQbo9zjGEo5tgQmw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*TtnjkhQQbo9zjGEo5tgQmw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*TtnjkhQQbo9zjGEo5tgQmw.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*TtnjkhQQbo9zjGEo5tgQmw.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="325" loading="lazy" role="presentation"></picture></div></div></figure><p id="99d7" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Demikian pula, saat gestur menyeret selesai, tujuan pengguna dapat diterjemahkan menjadi kecepatan yang akan digunakan untuk “menggesek cepat” daftar — yaitu, membuatnya di-scroll menggunakan animasi. Gesek cepat juga merupakan bagian dari siklus scroll bertingkat, dan kecepatan yang dihasilkan oleh peristiwa tarik akan melalui tahap serupa: <em class="qo">sebelum gesek cepat</em>, pemakaian node, dan <em class="qo">setelah gesek cepat</em>.</p><figure class="oy oz pa pb pc gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb qk"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/1*KvPh6q3qymE2Syws2SnvNg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*KvPh6q3qymE2Syws2SnvNg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*KvPh6q3qymE2Syws2SnvNg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*KvPh6q3qymE2Syws2SnvNg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*KvPh6q3qymE2Syws2SnvNg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*KvPh6q3qymE2Syws2SnvNg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*KvPh6q3qymE2Syws2SnvNg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/1*KvPh6q3qymE2Syws2SnvNg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*KvPh6q3qymE2Syws2SnvNg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*KvPh6q3qymE2Syws2SnvNg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*KvPh6q3qymE2Syws2SnvNg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*KvPh6q3qymE2Syws2SnvNg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*KvPh6q3qymE2Syws2SnvNg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*KvPh6q3qymE2Syws2SnvNg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="204" loading="lazy" role="presentation"></picture></div></div></figure><p id="0cd1" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Oke, tapi apa relevansinya dengan masalah awal kita? Compose menyediakan seperangkat fitur yang dapat kita gunakan untuk memengaruhi cara kerja tahap-tahap ini dan berinteraksi langsung dengannya. Dalam kasus kami, jika panel aplikasi sedang ditampilkan dan kami men-scroll daftar ke atas, kami ingin memprioritaskan scroll panel aplikasi. Di sisi lain, jika kita men-scroll ke bawah dan panel aplikasi tidak muncul, kami juga ingin memprioritaskan scroll panel aplikasi sebelum men-scroll daftar itu sendiri. Ini adalah petunjuk lain bahwa sistem scroll bertingkat mungkin solusi yang bagus: kasus penggunaan kita membuat kita ingin melakukan sesuatu dengan delta scroll bahkan sebelum daftar di-scroll (lihat tautan dengan tahap pra-scroll di atas).</p><p id="7036" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Selanjutnya mari kita lihat fitur-fitur ini.</p><h1 id="16be" class="ph pi hs be pj pk pl pm pn po pp pq pr ps pt pu pv pw px py pz qa qb qc qd qe bj">Pengubah scroll bertingkat</h1><figure class="oy oz pa pb pc gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb qr"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/1*q4ea5rSM5mEouBBXV-1kyg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*q4ea5rSM5mEouBBXV-1kyg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*q4ea5rSM5mEouBBXV-1kyg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*q4ea5rSM5mEouBBXV-1kyg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*q4ea5rSM5mEouBBXV-1kyg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*q4ea5rSM5mEouBBXV-1kyg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*q4ea5rSM5mEouBBXV-1kyg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/1*q4ea5rSM5mEouBBXV-1kyg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*q4ea5rSM5mEouBBXV-1kyg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*q4ea5rSM5mEouBBXV-1kyg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*q4ea5rSM5mEouBBXV-1kyg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*q4ea5rSM5mEouBBXV-1kyg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*q4ea5rSM5mEouBBXV-1kyg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*q4ea5rSM5mEouBBXV-1kyg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="180" loading="lazy" role="presentation"></picture></div></div></figure><p id="c286" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Jika kita menganggap siklus scroll bertingkat sebagai sistem yang bekerja pada rantai node, pengubah scroll bertingkat adalah cara kita memasukkan diri kita ke dalam perubahan dan memengaruhi data (delta scroll) yang disebarkan dalam rantai ini. Pengubah ini dapat ditempatkan di mana saja dalam hierarki, dan berkomunikasi dengan instance pengubah scroll bertingkat di atas pohon sehingga dapat berbagi informasi melalui saluran ini. Untuk berinteraksi dengan informasi yang diteruskan melalui saluran ini, Anda dapat menggunakan <code class="cw ot ou ov ow b">NestedScrollConnection</code> yang akan memanggil callback tertentu, tergantung tahap pemakaian. Mari kita lihat lebih dalam komponen penyusunan pengubah ini:</p><ul class=""><li id="699b" class="nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os ql qm qn bj"><code class="cw ot ou ov ow b"><strong class="nx ht">NestedScrollConnection</strong></code>: Koneksi adalah cara untuk merespons tahap siklus scroll bertingkat. Ini adalah cara utama Anda dapat memengaruhi sistem scroll bertingkat. Ini terdiri dari 4 metode callback, masing-masing mewakili salah satu tahap: pra/pasca-scroll dan sebelum/setelah gesek cepat. Setiap callback juga memberikan informasi mengenai delta yang disebarkan:</li></ul><p id="548a" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">1.<em class="qo"> </em><code class="cw ot ou ov ow b"><em class="qo">tersedia</em></code>: Delta yang tersedia untuk tahap tertentu.</p><p id="7dac" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">2.<code class="cw ot ou ov ow b"><em class="qo">digunakan</em></code>: Delta digunakan pada tahap sebelumnya. Misalnya, <code class="cw ot ou ov ow b">onPostScroll</code> memiliki argumen “dipakai” , yang mengacu pada berapa banyak yang dipakai selama tahap pemakaian node. Kita dapat menggunakan nilai ini untuk mengetahui, misalnya, berapa banyak daftar asal yang sudah di-scroll, karena nilai ini akan dipanggil <em class="qo">setelah</em> tahap pemakaian node.</p><p id="06a2" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">3.<em class="qo"> sumber scroll bertingkat</em>: Tempat asal delta tersebut — <code class="cw ot ou ov ow b">Drag</code> (jika berasal dari gestur), atau <code class="cw ot ou ov ow b">Fling</code> (jika berasal dari animasi gesek cepat).</p><p id="daa7" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Nilai yang ditampilkan dalam callback adalah cara kita memberi tahu cara berperilaku kepada sistem. Kita akan membahasnya lebih lanjut sebentar lagi.</p><ul class=""><li id="7263" class="nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os ql qm qn bj"><code class="cw ot ou ov ow b"><strong class="nx ht">NestedScrollDispatcher</strong></code>: Operator adalah entitas yang memulai siklus scroll bertingkat — yaitu, menggunakan operator dan memanggil metodenya pada dasarnya akan memicu siklus tersebut. Misalnya, kontainer yang dapat di-scroll memiliki operator bawaan yang menangani pengiriman delta yang ditangkap selama gestur ke dalam sistem. Karena alasan ini, sebagian besar kasus penggunaan akan melibatkan penggunaan koneksi dan bukan operator karena kita <em class="qo">bereaksi</em> terhadap delta yang sudah ada, dan tidak <em class="qo">mengirim</em> yang baru.</li></ul><p id="5d98" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Sekarang, mari pikirkan tentang hal yang kita ketahui mengenai urutan propagasi delta dalam sistem scroll bertingkat dan coba terapkan informasi tersebut ke kasus penggunaan kita untuk melihat bagaimana kita dapat menerapkan perilaku penciutan panel aplikasi yang benar. Sebelumnya kita telah mempelajari bahwa, setelah peristiwa scroll dipicu, bahkan sebelum daftar itu sendiri dapat bergerak, kita akan diberi kesempatan untuk membuat keputusan tentang posisi panel aplikasi. Ini mengisyaratkan bahwa kita perlu melakukan sesuatu selama <code class="cw ot ou ov ow b">onPreScroll</code>. Ingat, <code class="cw ot ou ov ow b">onPreScroll</code> adalah tahap yang terjadi tepat sebelum daftar di-scroll (tahap <code class="cw ot ou ov ow b">NodeConsumption</code>).</p><p id="fa92" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Kode awal kita adalah kombinasi dua composable, satu untuk panel aplikasi dan satu lagi untuk daftar yang diapit dengan <code class="cw ot ou ov ow b">Box</code>:</p><figure class="oy oz pa pb pc gr"><div class="pe kj l fi"><div class="pf pg l"></div></div></figure><p id="0e3f" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Tinggi panel aplikasi sudah tetap dan kita cukup mengimbangi posisinya untuk menampilkan/menyembunyikannya. Mari kita buat variabel status untuk menampung nilai offset tersebut:</p><figure class="oy oz pa pb pc gr"><div class="pe kj l fi"><div class="pf pg l"></div></div></figure><p id="ebd7" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Sekarang, kita perlu memperbarui offset berdasarkan scroll daftar. Kita akan menginstal koneksi scroll bertingkat pada posisi dalam hierarki yang dapat menangkap delta yang berasal dari daftar; pada saat yang bersamaan, ia harus dapat mengubah offset panel aplikasi. Tempat yang bagus adalah induk yang sama dari keduanya — induk memiliki posisi yang bagus secara hierarki untuk 1) menerima delta dari satu komponen dan 2) memengaruhi posisi komponen lainnya. Kita akan menggunakan koneksi tersebut untuk memengaruhi tahap <code class="cw ot ou ov ow b">onPreScroll</code>:</p><figure class="oy oz pa pb pc gr"><div class="pe kj l fi"><div class="pf pg l"></div></div></figure><p id="7bf1" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Pada callback <code class="cw ot ou ov ow b"><em class="qo">onPreScroll</em></code> kita akan menerima delta dari daftar di parameter <code class="cw ot ou ov ow b"><em class="qo">tersedia</em></code>. Tampilan callback ini harus berupa tampilan apa pun yang kita gunakan dari yang tersedia. Artinya jika kita menampilkan <code class="cw ot ou ov ow b"><strong class="nx ht">Offset.Zero</strong></code>, kita tidak menggunakan apa pun dan daftar akan dapat menggunakan semuanya untuk scroll. Jika kita menampilkan <code class="cw ot ou ov ow b"><strong class="nx ht">available</strong></code><strong class="nx ht">,</strong> daftar tidak akan ada yang tersisa, sehingga tidak akan di-scroll.</p><p id="eeb7" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Untuk kasus penggunaan kita, jika <code class="cw ot ou ov ow b">appBarOffset</code> kita bernilai antara 0 dan tinggi maksimal panel aplikasi, kita perlu memberikan delta ke panel aplikasi (tambahkan ke offset). Kita dapat mencapainya dengan penghitungan menggunakan <code class="cw ot ou ov ow b">coerceIn</code> (ini membatasi nilai antara minimum dan maksimum). Setelah itu, kita perlu melaporkan kembali ke sistem tentang hal yang digunakan oleh offset panel aplikasi. Pada akhirnya, implementasi <code class="cw ot ou ov ow b">onPreScroll</code> terlihat seperti ini:</p><figure class="oy oz pa pb pc gr"><div class="pe kj l fi"><div class="pf pg l"></div></div></figure><p id="f800" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Mari kita atur ulang kode kita sedikit dan abstrakkan offset status dan koneksinya menjadi satu kelas:</p><figure class="oy oz pa pb pc gr"><div class="pe kj l fi"><div class="pf pg l"></div></div></figure><p id="0ab3" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Dan sekarang, kita bisa menggunakan kelas tersebut untuk menyeimbangkan <code class="cw ot ou ov ow b">appBar</code> kita:</p><figure class="oy oz pa pb pc gr"><div class="pe kj l fi"><div class="pf pg l"></div></div></figure><p id="884b" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Sekarang, daftar akan tetap bersifat statis sampai panel aplikasi diciutkan sepenuhnya karena offset panel aplikasi memakai seluruh delta dan tidak ada lagi yang tersisa untuk digunakan dalam daftar.</p><figure class="oy oz pa pb pc gr ha hb paragraph-image"><div class="ha hb ox"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*wm1ozUIN5LTZhZDt.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*wm1ozUIN5LTZhZDt.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*wm1ozUIN5LTZhZDt.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*wm1ozUIN5LTZhZDt.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*wm1ozUIN5LTZhZDt.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*wm1ozUIN5LTZhZDt.gif 1100w, https://miro.medium.com/v2/resize:fit:640/format:webp/0*wm1ozUIN5LTZhZDt.gif 640w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 320px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*wm1ozUIN5LTZhZDt.gif 640w, https://miro.medium.com/v2/resize:fit:720/0*wm1ozUIN5LTZhZDt.gif 720w, https://miro.medium.com/v2/resize:fit:750/0*wm1ozUIN5LTZhZDt.gif 750w, https://miro.medium.com/v2/resize:fit:786/0*wm1ozUIN5LTZhZDt.gif 786w, https://miro.medium.com/v2/resize:fit:828/0*wm1ozUIN5LTZhZDt.gif 828w, https://miro.medium.com/v2/resize:fit:1100/0*wm1ozUIN5LTZhZDt.gif 1100w, https://miro.medium.com/v2/resize:fit:640/0*wm1ozUIN5LTZhZDt.gif 640w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 320px"><img alt="" class="bg ho hp c" width="320" height="712" loading="lazy" role="presentation"></picture></div></figure><p id="c0eb" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Ini bukanlah hal yang kita inginkan. Untuk memperbaikinya, kita perlu menggunakan <code class="cw ot ou ov ow b">appBarOffset</code> untuk turut memperbarui area spasi sebelum daftar kita sehingga saat panel aplikasi diciutkan sepenuhnya, tinggi item akan disetel ulang. Setelah itu, panel aplikasi tidak akan menggunakan apa pun lagi, sehingga daftar dapat di-scroll dengan bebas.</p><p id="815b" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Logika ini juga berlaku untuk memperluas panel aplikasi. Saat panel aplikasi diluaskan, daftarnya bersifat statis, namun item yang tidak terlihat bertambah sehingga ini memberikan ilusi bahwa daftar bergerak. Setelah diperluas sepenuhnya, panel aplikasi tidak akan menggunakan delta lagi, dan daftar akan dapat terus di-scroll.</p><figure class="oy oz pa pb pc gr"><div class="pe kj l fi"><div class="pf pg l"></div></div></figure><p id="6a2a" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Pada hasil akhirnya, panel aplikasi akan diciutkan/diperluas sebelum daftar di-scroll seperti yang diharapkan.</p><figure class="oy oz pa pb pc gr ha hb paragraph-image"><div class="ha hb ox"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*hIoqpiwwNY3-T-8Z.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*hIoqpiwwNY3-T-8Z.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*hIoqpiwwNY3-T-8Z.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*hIoqpiwwNY3-T-8Z.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*hIoqpiwwNY3-T-8Z.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*hIoqpiwwNY3-T-8Z.gif 1100w, https://miro.medium.com/v2/resize:fit:640/format:webp/0*hIoqpiwwNY3-T-8Z.gif 640w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 320px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*hIoqpiwwNY3-T-8Z.gif 640w, https://miro.medium.com/v2/resize:fit:720/0*hIoqpiwwNY3-T-8Z.gif 720w, https://miro.medium.com/v2/resize:fit:750/0*hIoqpiwwNY3-T-8Z.gif 750w, https://miro.medium.com/v2/resize:fit:786/0*hIoqpiwwNY3-T-8Z.gif 786w, https://miro.medium.com/v2/resize:fit:828/0*hIoqpiwwNY3-T-8Z.gif 828w, https://miro.medium.com/v2/resize:fit:1100/0*hIoqpiwwNY3-T-8Z.gif 1100w, https://miro.medium.com/v2/resize:fit:640/0*hIoqpiwwNY3-T-8Z.gif 640w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 320px"><img alt="" class="bg ho hp c" width="320" height="712" loading="lazy" role="presentation"></picture></div></figure><h2 id="d553" class="qs pi hs be pj qt qu dx pn qv qw dz pr og qx qy qz ok ra rb rc oo rd re rf rg bj">Kesimpulannya:</h2><ul class=""><li id="c781" class="nv nw hs nx b ny qf oa ob oc qg oe of og qh oi oj ok qi om on oo qj oq or os ql qm qn bj">Kita dapat menggunakan sistem scroll bertingkat sebagai cara yang memungkinkan interaksi komponen di tempat berbeda dalam hierarki Compose dengan komponen scroll.</li><li id="9642" class="nv nw hs nx b ny rh oa ob oc ri oe of og rj oi oj ok rk om on oo rl oq or os ql qm qn bj">Kita dapat menggunakan <code class="cw ot ou ov ow b">NestedScrollConnection</code> untuk mengizinkan perubahan pada delta yang disebarkan dalam siklus scroll bertingkat.</li><li id="50cd" class="nv nw hs nx b ny rh oa ob oc ri oe of og rj oi oj ok rk om on oo rl oq or os ql qm qn bj">Kita harus mengganti metode <code class="cw ot ou ov ow b">onPreScroll</code>/<code class="cw ot ou ov ow b">onPostScroll</code> untuk mengubah delta scroll dan <code class="cw ot ou ov ow b">onPreFling</code>/<code class="cw ot ou ov ow b">onPostFling</code> untuk mengubah kecepatan gesek cepat.</li><li id="254a" class="nv nw hs nx b ny rh oa ob oc ri oe of og rj oi oj ok rk om on oo rl oq or os ql qm qn bj">Selalu ingat untuk menampilkan apa pun yang dipakai di setiap metode yang diganti sehingga siklus scroll bertingkat dapat melanjutkan propagasi.</li></ul><p id="5987" class="pw-post-body-paragraph nv nw hs nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Jika Anda ingin mempelajari selengkapnya tentang sistem scroll, lihat <a class="af pd" href="https://developer.android.com/jetpack/compose/touch-input/pointer-input/scroll#nested-scrolling-interop" rel="noopener ugc nofollow" target="_blank">dokumentasi resmi</a> yang berisi diskusi yang lebih teknis tentang API yang digunakan di sini dan cara Anda dapat melakukan interop dengan sistem scroll bertingkat View.</p><blockquote class="rm rn ro"><p id="710f" class="nv nw qo nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Lisensi cuplikan kode: Hak Cipta 2024 Google LLC.</p><p id="0496" class="nv nw qo nx b ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os gm bj">Identifier Lisensi SPDX: Apache-2.0</p></blockquote></div></div></div></div></section></div></div></article>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-1581982593269458862024-02-16T13:38:00.003+07:002024-02-16T13:38:56.731+07:00Buat game Flutter epik untuk membantu perjuangan melindungi planet ini<span id="docs-internal-guid-96458273-7fff-24ab-ac4d-f37358dcd287"><h2 dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 3pt; padding: 0pt 0pt 3pt 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 400; vertical-align: baseline; white-space-collapse: preserve;">Kami tahu developer Flutter menyukai </span><a href="https://flutter.dev/events/puzzle-hack" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 400; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">tantangan</span></a><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 400; vertical-align: baseline; white-space-collapse: preserve;"> yang seru, jadi tepat pada tahun baru, kami senang bisa mengumumkan tantangan Flutter berikutnya!</span></h2><h2 dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 3pt 0pt;"><br /></h2><h2 dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 3pt 0pt;"><a href="http://flutter.dev/global-gamers" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 400; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">The Global Gamers Challenge</span></a><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 400; vertical-align: baseline; white-space-collapse: preserve;"> adalah lomba berdurasi 8 minggu untuk mendesain, membuat, dan memublikasikan game yang berkelanjutan, disponsori oleh Flutter dan </span><a href="https://www.globalcitizen.org/en/" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 400; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">Global Citizen</span></a><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 400; vertical-align: baseline; white-space-collapse: preserve;">. Pemenang lomba akan berangkat ke NYC pada September 2024 guna bertemu dengan beberapa anggota tim Flutter untuk menjalani workshop dan bimbingan selama satu hari, lalu merayakan pencapaian mereka bersama hingga 60.000 pendukung Global Citizen lain di Global Citizen Festival 2024.</span></h2><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 15pt 0pt 18pt 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 20pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Apa itu game yang berkelanjutan?</span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 18pt; margin-top: 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Game yang berkelanjutan menggunakan kekuatan permainan untuk menginspirasi tindakan positif terhadap lingkungan. Bayangkan Candy Crush, tetapi alih-alih menghancurkan permen, kamu menghancurkan polusi plastik! Atau, bayangkan game seperti </span><a href="https://superdash.flutter.dev/" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">Super Dash</span></a><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">, tetapi alih-alih</span><span style="background-color: transparent; color: #444746; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> mengumpulkan biji pohon ek, kamu berada di rumah Dash mencari cara untuk mendinginkan rumah dengan mengoptimalkan jalur aliran udara menggunakan jendela, bukan AC</span><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">. Berikut beberapa ide lain yang terinspirasi oleh kampanye Global Citizen yang sedang berjalan saat ini:</span></p><ol style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="1" dir="ltr" style="color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; list-style-type: decimal; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 18pt; margin-top: 18pt;"><a href="https://www.reuters.com/markets/commodities/world-cant-afford-us-style-home-energy-consumption-habits-2023-05-19/" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; text-wrap: wrap; vertical-align: baseline;">Dorong pengurangan penggunaan energi di rumah</span></a></p></li></ol><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 18pt; margin-left: 36pt; margin-top: 18pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Data menunjukkan bahwa rumah-rumah di Amerika Serikat rata-rata menggunakan listrik tiga kali lebih banyak dibandingkan rumah-rumah pada umumnya di negara lain. Bisakah kamu membuat game yang membantu mengurangi ketergantungan pada sumber energi yang tidak efisien?</span></p><ol start="2" style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="1" dir="ltr" style="color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; list-style-type: decimal; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 18pt; margin-top: 18pt;"><a href="https://www.timeout.com/travel/best-public-transport-in-the-world" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; text-wrap: wrap; vertical-align: baseline;">Dorong pengurangan penggunaan plastik sekali pakai</span></a></p></li></ol><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 18pt; margin-left: 36pt; margin-top: 18pt;"><span style="background-color: transparent; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Asia Tenggara merupakan kawasan dengan polusi plastik tertinggi di dunia. Pertimbangkan membuat game yang mendorong seseorang untuk mencari alternatif, seperti memilih botol air pakai ulang daripada botol sekali pakai. </span></p><ol start="3" style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="1" dir="ltr" style="color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; list-style-type: decimal; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 18pt; margin-top: 18pt;"><a href="https://www.ukri.org/what-we-do/browse-our-areas-of-investment-and-support/understanding-plastic-pollution-impact-on-marine-ecosystems-in-southeast-asia/" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; text-wrap: wrap; vertical-align: baseline;">Dorong penggunaan transportasi umum untuk jarak dekat dan perjalanan darat untuk jarak yang lebih jauh</span></a></p></li></ol><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 18pt; margin-left: 36pt; margin-top: 18pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Eropa adalah rumah bagi banyak sistem transportasi terbaik di dunia. Game yang efektif dapat mendorong orang untuk menggunakan transportasi umum untuk jarak lebih dekat, dan transportasi darat, seperti kereta (sebagai ganti pesawat) untuk jarak yang lebih jauh.</span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 18pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Kami yakin bahwa game dapat mendorong pemain untuk mengambil tindakan kecil dalam kehidupan nyata yang berdampak besar bagi lingkungan. Karenanya, </span><a href="https://www.globalcitizen.org/en/categories/defend-the-planet/" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">jika kamu ingin mengambil tindakan langsung terkait hal ini, lihat kampanye yang sedang dijalankan Global Citizen</span></a><span style="background-color: transparent; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">.</span></p><p dir="ltr" style="line-height: 1.3800000000000001; margin-bottom: 12pt; margin-top: 12pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"><span style="border: none; display: inline-block; height: 368px; overflow: hidden; width: 600px;"><img height="368" src="https://lh7-us.googleusercontent.com/t81np60M5icG6AJ5O-G4OrtJKt9pd-lFlDxaTlDO0fXZ6RGgDGL1syBXskVCJYoVNcH4U3sxmvLZjTU1uRDyJedUQcZ4SA63ToPPJ8b6YlkBkPdJ4z4SqSFG9sroom0uAnj-Qaxcz8xnWSspBlu_dtq3uHjK4qBMw_6i6uK1zWV23hwqQEcNrTTKMpgiqg" style="margin-left: 0px; margin-top: 0px;" width="600" /></span></span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 6pt 0pt 18pt 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 20pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Mengapa bergabung dalam Global Gamers Challenge?</span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; color: #666666; font-family: "Google Sans", sans-serif; font-size: 14pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Pertahankan planet ini</span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Lomba ini terinspirasi oleh </span><a href="https://www.playing4theplanet.org/" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">Playing for the Planet Alliance</span></a><span style="background-color: transparent; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">, sebuah aliansi dari 50 studio game dan perusahaan yang difasilitasi oleh Perserikatan Bangsa-Bangsa, </span><a href="https://blog.google/around-the-globe/google-europe/sustainable-gaming-with-the-playing-for-the-planet-alliance/" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">termasuk Google</span></a><span style="background-color: transparent; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">, dengan misi untuk mengurangi dampak industri terhadap lingkungan dan</span><span style="background-color: transparent; font-family: "Google Sans", sans-serif; font-size: 12pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> </span><span style="background-color: transparent; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">memanfaatkan kekuatan game untuk menghadirkan awareness dan mengoordinasikan tindakan untuk isu-isu lingkungan penting seperti perubahan iklim, hilangnya keanekaragaman hayati, dan polusi.</span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Game buatan anggota Playing for the Planet Alliance memiliki jangkauan gabungan lebih dari 1 miliar orang. Melalui inisiatif utama Aliansi ini, </span><a href="https://www.playing4theplanet.org/green-game-jam-2023" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">Green Game Jam</span></a><span style="background-color: transparent; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">, game yang berpartisipasi telah menciptakan dampak dunia nyata dengan mengumpulkan dana untuk menanam 2,75 juta pohon dan menggalang sekitar US$1.500.000 untuk melindungi satwa liar dan mendukung gerakan lingkungan. </span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Kami telah bermitra dengan Playing for the Planet Alliance untuk mendapatkan </span><a href="https://igda-website.s3.us-east-2.amazonaws.com/wp-content/uploads/2022/04/06100719/EnvironmentalGameDesignPlaybook_Alpha_Release_Adj.pdf" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">praktik terbaik untuk game lingkungan</span></a><span style="background-color: transparent; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> dan menambahkannya ke kit referensi yang disediakan sebagai bagian dari tantangan ini. Inilah kesempatanmu untuk membuat sesuatu yang membantu melindungi planet kita!</span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; color: #666666; font-family: "Google Sans", sans-serif; font-size: 14pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Pelajari hal baru</span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Baik kamu adalah developer Flutter yang baru mengenal game, seorang developer game yang baru mengenal Flutter, atau seseorang yang baru mengenal pengembangan game dan Flutter, kamu pasti akan mempelajari beberapa trik sekaligus menciptakan dampak positif pada dunia. </span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 20pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Detail</span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;">Tanggal</span><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">: Semua project harus dikirimkan paling lambat 5 Maret 2024, pukul 14.59 PM Waktu Pasifik (GMT -8). 20 Game Teratas akan diumumkan pada akhir Maret 2024, dan pemenang akhir akan diumumkan pada Mei 2024.</span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;">Cara Pengiriman</span><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">: Petunjuk pendaftaran dan pengiriman dapat ditemukan di </span><a href="http://globalgamers.devpost.com" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">DevPost</span></a><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">.</span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 18pt; margin-top: 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;">Penghargaan</span><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">: Pemenang akan dinilai berdasarkan kriteria seperti:</span></p><ul style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="1" dir="ltr" style="color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 18pt;"><span style="background-color: transparent; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;">Keaslian dan kreativitas</span></p></li><li aria-level="1" dir="ltr" style="color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;">Tindakan dan narasi keberlanjutan</span></p></li><li aria-level="1" dir="ltr" style="color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;">Penggunaan animasi</span></p></li><li aria-level="1" dir="ltr" style="color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 18pt; margin-top: 0pt;"><span style="background-color: transparent; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;">Deployment multiplatform yang efektif</span></p></li></ul><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 18pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Namun, kami tidak hanya memberikan penghargaan atas kemampuan coding yang hebat. Kami juga punya hadiah untuk ide hebat, video demo, konten edukasi untuk game, dan banyak lagi!</span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;">Referensi</span><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">: Kami telah mengumpulkan sejumlah </span><a href="http://flutter.dev/global-gamers/#resources" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">referensi</span></a><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> untuk membantumu membuat game, termasuk </span><a href="http://flutter.dev/global-gamers/#guide" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">panduan</span></a><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> untuk menavigasi tantangan ini, seperti halnya peta dalam game. Panduan ini memberikan referensi yang kamu perlukan, membantumu menjadi Global Citizen melalui </span><a href="https://glblctzn.co/hQ5oyPFbcGb" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">perjalanan pembelajaran</span></a><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> baru dalam aplikasi Global Citizen, dan berisi petunjuk tentang cara mendaftar dan mengirimkan gamemu.</span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;">Tim</span><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">: Kamu sebaiknya menyelesaikan tantangan ini sebagai bagian dari tim. Saat kamu </span><a href="http://globalgamers.devpost.com" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">mendaftar untuk tantangan ini</span></a><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> di Devpost, kamu akan dapat membagikan keahlian, status tim, dan ide-idemu.</span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Jadi, baik kamu punya ide yang inovatif, tetapi memerlukan rekan tim dengan keahlian teknis untuk mewujudkannya, atau jika kamu memiliki keahlian teknis, tetapi menginginkan ide yang inovatif, pastikan kamu mengisi profilmu dengan tepat, lalu baca </span><a href="https://globalgamers.devpost.com/participants" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">tab peserta</span></a><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> dan cari orang yang detail profilnya sesuai dengan yang kamu cari!</span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Kami tak sabar melihat ide-ide yang akan datang dari ahli teknologi dan aktivis yang bekerja sama untuk mencapai tujuan bersama. Kalau kamu memerlukan dukungan tambahan dalam mencari rekan tim, baca </span><a href="https://help.devpost.com/hc/en-us/articles/360022031411-Participants-page-forming-a-team" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">artikel bantuan</span></a><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">.</span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Terakhir, jumlah anggota tim memang fleksibel, tetapi hanya 3 orang yang akan dapat melakukan perjalanan ke New York City jika project-nya terpilih sebagai finalis. </span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 20pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Ayo mulai dan terus terhubung</span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 0pt; margin-top: 0pt; padding: 0pt 0pt 18pt 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Lihat situs resmi lomba di flutter.dev/global-gamers untuk semua hal yang perlu kamu ketahui. Kamu juga bisa membuka </span><a href="https://globalgamers.devpost.com/" style="text-decoration-line: none;"><span style="background-color: transparent; color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">Devpost</span></a><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> untuk melakukan pendaftaran dan pengiriman. </span></p><p dir="ltr" style="background-color: white; line-height: 1.3800000000000001; margin-bottom: 18pt; margin-top: 0pt;"><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Pengiriman ditutup pada 5 Maret, jadi jangan tunggu lagi! Kami tak sabar melihat kreasimu!</span></p><div><span style="background-color: transparent; color: #1f1f1f; font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"><br /></span></div></span>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.com3tag:blogger.com,1999:blog-6158048950125693510.post-91025720850549466672024-02-16T10:42:00.005+07:002024-03-01T10:46:04.496+07:00Memulai tahun 2024 lebih kuat dengan Flutter dan Dart<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="https://medium.com/flutter/starting-2024-strong-with-flutter-and-dart-cae9845264fe"/>
<meta name="original_url" content="https://medium.com/flutter/starting-2024-strong-with-flutter-and-dart-cae9845264fe"/>
<style type="text/css" data-fela-rehydration="488" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}
/*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black;
}/* Gray DOCTYPE selectors like WebKit */
.xml .hljs-meta {color: #c0c0c0;
}.hljs-comment,
.hljs-quote {color: #007400;
}.hljs-tag,
.hljs-attribute,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name {color: #aa0d91;
}.hljs-variable,
.hljs-template-variable {color: #3F6E74;
}.hljs-code,
.hljs-string,
.hljs-meta .hljs-string {color: #c41a16;
}.hljs-regexp,
.hljs-link {color: #0E0EFF;
}.hljs-title,
.hljs-symbol,
.hljs-bullet,
.hljs-number {color: #1c00cf;
}.hljs-section,
.hljs-meta {color: #643820;
}.hljs-title.class_,
.hljs-class .hljs-title,
.hljs-type,
.hljs-built_in,
.hljs-params {color: #5c2699;
}.hljs-attr {color: #836C28;
}.hljs-subst {color: #000;
}.hljs-formula {background-color: #eee;font-style: italic;
}.hljs-addition {background-color: #baeeba;
}.hljs-deletion {background-color: #ffc8bd;
}.hljs-selector-id,
.hljs-selector-class {color: #9b703f;
}.hljs-doctag,
.hljs-strong {font-weight: bold;
}.hljs-emphasis {font-style: italic;
}
</style>
<style type="text/css" data-fela-rehydration="488" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-webkit-keyframes k2{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@-moz-keyframes k2{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes k2{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}</style>
<style type="text/css" data-fela-rehydration="488" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{fill:rgba(0, 0, 0, 1)}.av{height:22px}.aw{margin-left:16px}.ax{border:none}.ay{border-radius:20px}.az{width:240px}.ba{background:#F9F9F9}.bb path{fill:#6B6B6B}.bd{outline:none}.be{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bf{font-size:14px}.bg{width:100%}.bh{padding:10px 20px 10px 0}.bi{background-color:transparent}.bj{color:#242424}.bk::placeholder{color:#6B6B6B}.bl{display:inline-block}.bm{margin-left:12px}.bn{margin-right:12px}.bo{border-radius:4px}.bp{margin-left:24px}.bq{height:24px}.bw{background-color:#F9F9F9}.bx{border-radius:50%}.by{height:32px}.bz{width:32px}.ca{justify-content:center}.cg{max-width:680px}.ch{min-width:0}.ci{animation:k1 1.2s ease-in-out infinite}.cj{height:100vh}.ck{margin-bottom:16px}.cl{margin-top:48px}.cm{align-items:flex-start}.cn{flex-direction:column}.co{justify-content:space-between}.cp{margin-bottom:24px}.cv{width:80%}.cw{background-color:#F2F2F2}.dc{height:44px}.dd{width:44px}.de{margin:auto 0}.df{margin-bottom:4px}.dg{height:16px}.dh{width:120px}.di{width:80px}.do{margin-bottom:8px}.dp{width:96%}.dq{width:98%}.dr{width:81%}.ds{margin-left:8px}.dt{color:#6B6B6B}.du{font-size:13px}.dv{height:100%}.eo{color:#FFFFFF}.ep{fill:#FFFFFF}.eq{background:rgba(73, 139, 209, 1)}.er{border-color:rgba(73, 139, 209, 1)}.ev:disabled{cursor:inherit !important}.ew:disabled{opacity:0.3}.ex:disabled:hover{background:rgba(73, 139, 209, 1)}.ey:disabled:hover{border-color:rgba(73, 139, 209, 1)}.ez{border-radius:99em}.fa{border-width:1px}.fb{border-style:solid}.fc{box-sizing:border-box}.fd{text-decoration:none}.fe{text-align:center}.fh{margin-right:32px}.fi{position:relative}.fj{fill:#6B6B6B}.fm{background:transparent}.fn svg{margin-left:4px}.fo svg{fill:#6B6B6B}.fq{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fr{position:absolute}.fy{margin:0 24px}.gc{background:rgba(255, 255, 255, 1)}.gd{border:1px solid #F2F2F2}.ge{box-shadow:0 1px 4px #F2F2F2}.gf{max-height:100vh}.gg{overflow-y:auto}.gh{left:0}.gi{top:calc(100vh + 100px)}.gj{bottom:calc(100vh + 100px)}.gk{width:10px}.gl{pointer-events:none}.gm{word-break:break-word}.gn{word-wrap:break-word}.go:after{display:block}.gp:after{content:""}.gq:after{clear:both}.gr{line-height:1.23}.gs{letter-spacing:0}.gt{font-style:normal}.gu{font-weight:700}.hu{@media all and (max-width: 551.98px):8px}.hv{@media all and (min-width: 552px) and (max-width: 727.98px):8px}.hw{@media all and (min-width: 728px) and (max-width: 903.98px):16px}.hx{@media all and (min-width: 904px) and (max-width: 1079.98px):16px}.hy{@media all and (min-width: 1080px):16px}.ie{align-items:baseline}.if{width:48px}.ig{height:48px}.ih{border:2px solid rgba(255, 255, 255, 1)}.ii{z-index:0}.ij{box-shadow:none}.ik{border:1px solid rgba(0, 0, 0, 0.05)}.il{margin-left:-12px}.im{width:28px}.in{height:28px}.io{z-index:1}.ip{width:24px}.iq{margin-bottom:2px}.ir{flex-wrap:nowrap}.is{font-size:16px}.it{line-height:24px}.iv{margin:0 8px}.iw{display:inline}.ix{color:rgba(73, 139, 209, 1)}.iy{fill:rgba(73, 139, 209, 1)}.jb{flex:0 0 auto}.je{flex-wrap:wrap}.jh{white-space:pre-wrap}.ji{margin-right:4px}.jj{overflow:hidden}.jk{max-height:20px}.jl{text-overflow:ellipsis}.jm{display:-webkit-box}.jn{-webkit-line-clamp:1}.jo{-webkit-box-orient:vertical}.jp{word-break:break-all}.jr{padding-left:8px}.js{padding-right:8px}.kt> *{flex-shrink:0}.ku{overflow-x:scroll}.kv::-webkit-scrollbar{display:none}.kw{scrollbar-width:none}.kx{-ms-overflow-style:none}.ky{width:74px}.kz{flex-direction:row}.lc{-webkit-user-select:none}.ld{border:0}.le{cursor:progress}.lf{fill:rgba(117, 117, 117, 1)}.li{opacity:0.25}.lj{outline:0}.lk{user-select:none}.ll> svg{pointer-events:none}.lu{margin-left:4px}.lv{margin-top:0px}.lw{opacity:1}.lx{padding:4px 0}.ma{width:16px}.mb{display:inline-flex}.mh{max-width:100%}.mi{padding:8px 2px}.mj svg{color:#6B6B6B}.na{line-height:1.58}.nb{letter-spacing:-0.004em}.nc{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.nx{margin-bottom:-0.46em}.ny{font-style:italic}.nz{margin-left:auto}.oa{margin-right:auto}.ob{max-width:1280px}.oh{clear:both}.oj{cursor:zoom-in}.ok{z-index:auto}.om{height:auto}.on{text-decoration:underline}.oo{max-width:1600px}.op{list-style-type:disc}.oq{margin-left:30px}.or{padding-left:0px}.ox{margin:auto}.oy{padding-bottom:56.206088992974244%}.oz{height:0}.pa{max-width:1200px}.pb{margin-top:10px}.pc{max-width:728px}.pf{margin-bottom:26px}.pg{margin-top:6px}.ph{margin-top:8px}.pi{margin-right:8px}.pj{padding:8px 16px}.pk{border-radius:100px}.pl{transition:background 300ms ease}.pn{white-space:nowrap}.po{border-top:none}.pu{height:52px}.pv{max-height:52px}.pw{box-sizing:content-box}.px{position:static}.pz{max-width:155px}.qf{margin-right:20px}.ql{align-items:flex-end}.qm{width:76px}.qn{height:76px}.qo{border:2px solid #F9F9F9}.qp{height:72px}.qq{width:72px}.qr{margin-left:-16px}.qs{width:36px}.qt{height:36px}.qu{width:auto}.qv{stroke:#F2F2F2}.qw{color:#F2F2F2}.qx{fill:#F2F2F2}.qy{background:#F2F2F2}.qz{border-color:#F2F2F2}.rf{font-weight:500}.rg{font-size:24px}.rh{line-height:30px}.ri{letter-spacing:-0.016em}.rj{margin-top:16px}.rk{height:0px}.rl{border-bottom:solid 1px #E5E5E5}.rr{margin-top:72px}.rs{padding:24px 0}.rt{margin-bottom:0px}.ru{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.es:hover{background:rgba(68, 119, 175, 1)}.et:hover{border-color:rgba(68, 119, 175, 1)}.eu:hover{cursor:pointer}.fk:hover{color:#242424}.fl:hover{fill:#242424}.fp:hover svg{fill:#242424}.fs:hover{background-color:rgba(0, 0, 0, 0.1)}.iu:hover{text-decoration:underline}.iz:hover:not(:disabled){color:rgba(68, 119, 175, 1)}.ja:hover:not(:disabled){fill:rgba(68, 119, 175, 1)}.lh:hover{fill:rgba(117, 117, 117, 1)}.ly:hover{fill:#000000}.lz:hover p{color:#000000}.mk:hover svg{color:#000000}.pm:hover{background-color:#F2F2F2}.ra:hover{background:#F2F2F2}.rb:hover{border-color:#F2F2F2}.rc:hover{cursor:wait}.rd:hover{color:#F2F2F2}.re:hover{fill:#F2F2F2}.bc:focus-within path{fill:#242424}.lg:focus{fill:rgba(117, 117, 117, 1)}.ml:focus svg{color:#000000}.ol:focus{transform:scale(1.01)}.lm:active{border-style:none}</style>
<style type="text/css" data-fela-rehydration="488" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ee{font-size:14px}.ef{line-height:20px}.el{font-size:13px}.em{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:68px}.gb{max-width:680px}.hp{font-size:42px}.hq{margin-top:1.19em}.hr{margin-bottom:32px}.hs{line-height:52px}.ht{letter-spacing:-0.011em}.id{align-items:center}.kf{border-top:solid 1px #F2F2F2}.kg{border-bottom:solid 1px #F2F2F2}.kh{margin:32px 0 0}.ki{padding:3px 8px}.kr> *{margin-right:24px}.ks> :last-child{margin-right:0}.lt{margin-top:0px}.mg{margin:0}.nt{font-size:20px}.nu{margin-top:2.14em}.nv{line-height:32px}.nw{letter-spacing:-0.003em}.og{margin-top:56px}.ow{margin-top:1.14em}.pt{margin-bottom:88px}.qe{display:inline-block}.qk{padding-top:72px}.rq{margin-top:40px}</style>
<style type="text/css" data-fela-rehydration="488" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.ls{margin-top:0px}.pd{margin-left:auto}.pe{text-align:center}.qd{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="488" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.lr{margin-top:0px}.qc{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="488" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.lp{margin-top:0px}.lq{margin-right:0px}.qb{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="488" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.br{width:24px}.cb{margin:0 24px}.cq{height:40px}.cx{margin-bottom:44px}.dj{margin-bottom:32px}.dw{font-size:13px}.dx{line-height:20px}.eg{padding:0px 8px 1px}.ft{margin-bottom:4px}.gv{font-size:32px}.gw{margin-top:1.01em}.gx{margin-bottom:24px}.gy{line-height:38px}.gz{letter-spacing:-0.014em}.hz{align-items:flex-start}.jc{flex-direction:column}.jf{margin-bottom:2px}.jt{margin:24px -24px 0}.ju{padding:0}.kj> *{margin-right:8px}.kk> :last-child{margin-right:24px}.la{margin-left:0px}.ln{margin-top:0px}.lo{margin-right:0px}.mc{margin:0}.mm{border:1px solid #F2F2F2}.mn{border-radius:99em}.mo{padding:0px 16px 0px 12px}.mp{height:38px}.mq{align-items:center}.ms svg{margin-right:8px}.nd{font-size:18px}.ne{margin-top:1.56em}.nf{line-height:28px}.ng{letter-spacing:-0.003em}.oc{margin-top:40px}.os{margin-top:1.34em}.pp{margin-bottom:80px}.qa{display:inline-block}.qg{padding-top:48px}.rm{margin-top:32px}.mr:hover{border-color:#E5E5E5}</style>
<style type="text/css" data-fela-rehydration="488" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bu{width:64px}.ce{margin:0 64px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.ec{font-size:14px}.ed{line-height:20px}.ej{font-size:13px}.ek{padding:5px 12px}.ff{display:flex}.fw{margin-bottom:68px}.ga{max-width:680px}.hk{font-size:42px}.hl{margin-top:1.19em}.hm{margin-bottom:32px}.hn{line-height:52px}.ho{letter-spacing:-0.011em}.ic{align-items:center}.kb{border-top:solid 1px #F2F2F2}.kc{border-bottom:solid 1px #F2F2F2}.kd{margin:32px 0 0}.ke{padding:3px 8px}.kp> *{margin-right:24px}.kq> :last-child{margin-right:0}.mf{margin:0}.np{font-size:20px}.nq{margin-top:2.14em}.nr{line-height:32px}.ns{letter-spacing:-0.003em}.of{margin-top:56px}.ov{margin-top:1.14em}.ps{margin-bottom:88px}.qj{padding-top:72px}.rp{margin-top:40px}</style>
<style type="text/css" data-fela-rehydration="488" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bt{width:64px}.cd{margin:0 48px}.cs{height:48px}.cz{margin-bottom:52px}.dl{margin-bottom:48px}.ea{font-size:13px}.eb{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:68px}.fz{max-width:680px}.hf{font-size:42px}.hg{margin-top:1.19em}.hh{margin-bottom:32px}.hi{line-height:52px}.hj{letter-spacing:-0.011em}.ib{align-items:center}.jx{border-top:solid 1px #F2F2F2}.jy{border-bottom:solid 1px #F2F2F2}.jz{margin:32px 0 0}.ka{padding:3px 8px}.kn> *{margin-right:24px}.ko> :last-child{margin-right:0}.me{margin:0}.nl{font-size:20px}.nm{margin-top:2.14em}.nn{line-height:32px}.no{letter-spacing:-0.003em}.oe{margin-top:56px}.ou{margin-top:1.14em}.pr{margin-bottom:88px}.qi{padding-top:72px}.ro{margin-top:40px}</style>
<style type="text/css" data-fela-rehydration="488" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dy{font-size:13px}.dz{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:4px}.ha{font-size:32px}.hb{margin-top:1.01em}.hc{margin-bottom:24px}.hd{line-height:38px}.he{letter-spacing:-0.014em}.ia{align-items:flex-start}.jd{flex-direction:column}.jg{margin-bottom:2px}.jv{margin:24px 0 0}.jw{padding:0}.kl> *{margin-right:8px}.km> :last-child{margin-right:8px}.lb{margin-left:0px}.md{margin:0}.mt{border:1px solid #F2F2F2}.mu{border-radius:99em}.mv{padding:0px 16px 0px 12px}.mw{height:38px}.mx{align-items:center}.mz svg{margin-right:8px}.nh{font-size:18px}.ni{margin-top:1.56em}.nj{line-height:28px}.nk{letter-spacing:-0.003em}.od{margin-top:40px}.ot{margin-top:1.34em}.pq{margin-bottom:80px}.qh{padding-top:48px}.rn{margin-top:32px}.my:hover{border-color:#E5E5E5}</style>
<style type="text/css" data-fela-rehydration="488" data-fela-type="RULE" media="print">.py{display:none}</style>
<style type="text/css" data-fela-rehydration="488" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.jq{max-height:none}</style>
<style type="text/css" data-fela-rehydration="488" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.oi{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style>
</head><body>
<article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fr gh gi gj gk gl"></div><div class="gm gn go gp gq"><div class="ab ca"><div class="ch bg fy fz ga gb"><div><div class="hu hv hw hx hy"><div class="speechify-ignore ab co"><div class="speechify-ignore bg l"><div class="hz ia ib ic id ab"><div><div class="ab ie"><a rel="noopener follow" href="/@brandonbadger?source=post_page-----cae9845264fe--------------------------------"><div><div class="bl" aria-hidden="false"><div class="l if ig bx ih ii"><div class="l fi"><img alt="Brandon Badger" class="l fc bx dc dd cw" src="https://miro.medium.com/v2/resize:fill:88:88/1*nFmOI6gpDMxUgSzNIZ19Kg.png" width="44" height="44" loading="lazy" data-testid="authorPhoto"><div class="ij bx l dc dd fr n ik fs"></div></div></div></div></div></a><a href="https://medium.com/flutter?source=post_page-----cae9845264fe--------------------------------" rel="noopener follow"><div class="il ab fi"><div><div class="bl" aria-hidden="false"><div class="l im in bx ih io"><div class="l fi"><img alt="Flutter" class="l fc bx bq ip cw" src="https://miro.medium.com/v2/resize:fill:48:48/1*5-aoK8IBmXve5whBQM90GA.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"><div class="ij bx l bq ip fr n ik fs"></div></div></div></div></div></div></a></div></div><div class="bm bg l"><div class="ab"><div style="flex:1"><span class="be b bf z bj"><div class="iq ab q"><div class="ab q ir"><div class="ab q"><div><div class="bl" aria-hidden="false"><p class="be b is it bj"><a class="af ag ah ai aj ak al am an ao ap aq ar iu" data-testid="authorName" rel="noopener follow" href="/@brandonbadger?source=post_page-----cae9845264fe--------------------------------">Brandon Badger</a></p></div></div></div><span class="iv iw" aria-hidden="true"><span class="be b bf z dt">·</span></span><p class="be b is it dt"><span><a class="ix iy ah ai aj ak al am an ao ap aq ar ew iz ja" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F2534f4e317f3&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fstarting-2024-strong-with-flutter-and-dart-cae9845264fe&user=Brandon+Badger&userId=2534f4e317f3&source=post_page-2534f4e317f3----cae9845264fe---------------------post_header-----------">Ikuti</a></span></p></div></div></span></div></div><div class="l jb"><span class="be b bf z dt"><div class="ab cm jc jd je"><div class="jf jg ab"><div class="be b bf z dt ab jh"><span class="ji l jb">Dipublikasikan di</span><div><div class="bl" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar iu ab q" data-testid="publicationName" href="https://medium.com/flutter?source=post_page-----cae9845264fe--------------------------------" rel="noopener follow"><p class="be b bf z jj jk jl jm jn jo jp jq bj">Flutter</p></a></div></div></div><div class="h k"><span class="iv iw" aria-hidden="true"><span class="be b bf z dt">·</span></span></div></div><span class="be b bf z dt"><div class="ab ae"><span data-testid="storyReadTime">Bacaan 5 menit</span><div class="jr js l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="be b bf z dt">·</span><div class="ab co jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki"><div class="h k w ff fg q"><div class="ky l"><div class="ab q kz"><div class="pw-multi-vote-icon fi ji la lb lc"><div class=""><div class="ld le lf lg lh li lj am lk ll lm lc"><svg width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.37.83L12 3.28l.63-2.45h-1.26zM15.42 1.84l-1.18-.39-.34 2.5 1.52-2.1zM9.76 1.45l-1.19.4 1.53 2.1-.34-2.5zM20.25 11.84l-2.5-4.4a1.42 1.42 0 0 0-.93-.64.96.96 0 0 0-.75.18c-.25.19-.4.42-.45.7l.05.05 2.35 4.13c1.62 2.95 1.1 5.78-1.52 8.4l-.46.41c1-.13 1.93-.6 2.78-1.45 2.7-2.7 2.51-5.59 1.43-7.38zM12.07 9.01c-.13-.69.08-1.3.57-1.77l-2.06-2.07a1.12 1.12 0 0 0-1.56 0c-.15.15-.22.34-.27.53L12.07 9z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M14.74 8.3a1.13 1.13 0 0 0-.73-.5.67.67 0 0 0-.53.13c-.15.12-.59.46-.2 1.3l1.18 2.5a.45.45 0 0 1-.23.76.44.44 0 0 1-.48-.25L7.6 6.11a.82.82 0 1 0-1.15 1.15l3.64 3.64a.45.45 0 1 1-.63.63L5.83 7.9 4.8 6.86a.82.82 0 0 0-1.33.9c.04.1.1.18.18.26l1.02 1.03 3.65 3.64a.44.44 0 0 1-.15.73.44.44 0 0 1-.48-.1L4.05 9.68a.82.82 0 0 0-1.4.57.81.81 0 0 0 .24.58l1.53 1.54 2.3 2.28a.45.45 0 0 1-.64.63L3.8 13a.81.81 0 0 0-1.39.57c0 .22.09.43.24.58l4.4 4.4c2.8 2.8 5.5 4.12 8.68.94 2.27-2.28 2.71-4.6 1.34-7.1l-2.32-4.08z"></path></svg></div></div></div><div class="pw-multi-vote-count l ln lo lp lq lr ls lt"><p class="be b du z dt"><span class="le">--</span></p></div></div></div><div><div class="bl" aria-hidden="false"><button class="ao ld lw lx ab q fj ly lz" aria-label="responses"><svg width="24" height="24" viewBox="0 0 24 24" class="lv"><path d="M18 16.8a7.14 7.14 0 0 0 2.24-5.32c0-4.12-3.53-7.48-8.05-7.48C7.67 4 4 7.36 4 11.48c0 4.13 3.67 7.48 8.2 7.48a8.9 8.9 0 0 0 2.38-.32c.23.2.48.39.75.56 1.06.69 2.2 1.04 3.4 1.04.22 0 .4-.11.48-.29a.5.5 0 0 0-.04-.52 6.4 6.4 0 0 1-1.16-2.65v.02zm-3.12 1.06l-.06-.22-.32.1a8 8 0 0 1-2.3.33c-4.03 0-7.3-2.96-7.3-6.59S8.17 4.9 12.2 4.9c4 0 7.1 2.96 7.1 6.6 0 1.8-.6 3.47-2.02 4.72l-.2.16v.26l.02.3a6.74 6.74 0 0 0 .88 2.4 5.27 5.27 0 0 1-2.17-.86c-.28-.17-.72-.38-.94-.59l.01-.02z"></path></svg><p class="be b du z dt"><span class="pw-responses-count lu lv">4</span></p></button></div></div></div><div class="ab q kj kk kl km kn ko kp kq kr ks kt ku kv kw kx"><div class="ma k j i d"></div><div class="h k"></div><div class="fc mb cm"><div class="l ae"><div class="ab ca"><div class="mc md me mf mg mh ch bg"><div class="ab"><div class="bl bg" aria-hidden="false"><div><div class="bl" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fj ah ai aj ak al mi an ao ap ew mj mk lz ml mm mn mo mp s mq mr ms mt mu mv mw u mx my mz"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0zm9-10a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.38 10.42l-4.6 3.06a.5.5 0 0 1-.78-.41V8.93c0-.4.45-.63.78-.41l4.6 3.06c.3.2.3.64 0 .84z" fill="currentColor"></path></svg><div class="j i d"><p class="be b bf z dt">Dengarkan</p></div></button></div></div></div></div></div></div></div></div><div class="bl" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bl" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fj ah ai aj ak al mi an ao ap ew mj mk lz ml mm mn mo mp s mq mr ms mt mu mv mw u mx my mz"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.22 4.93a.42.42 0 0 1-.12.13h.01a.45.45 0 0 1-.29.08.52.52 0 0 1-.3-.13L12.5 3v7.07a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5V3.02l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.8a.42.42 0 0 1 .07.5zm-.1.14zm.88 2h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.14c.1.1.15.22.15.35a.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9V8.96c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1z" fill="currentColor"></path></svg><div class="j i d"><p class="be b bf z dt">Bagikan</p></div></button></div></div></div></div></div></div></div></div></div><p id="1e54" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Perkenalan, dua rilis SDK baru, dan membawa Flutter dan Dart ke era Gemini</p><p id="ac80" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj"><em class="ny">Kami sangat antusias mengumumkan rilis SDK kuartal pertama tahun ini untuk Flutter dan Dart — Flutter 3.19 dan Dart 3.3, bersama dengan beberapa pengumuman menarik lainnya terkait AI.</em></p><figure class="oc od oe of og oh nz oa paragraph-image"><div role="button" tabindex="0" class="oi oj fi ok bg ol"><div class="nz oa ob"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*gO0yYMh4FUkpue3w 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*gO0yYMh4FUkpue3w 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*gO0yYMh4FUkpue3w 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*gO0yYMh4FUkpue3w 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*gO0yYMh4FUkpue3w 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*gO0yYMh4FUkpue3w 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*gO0yYMh4FUkpue3w 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*gO0yYMh4FUkpue3w 640w, https://miro.medium.com/v2/resize:fit:720/0*gO0yYMh4FUkpue3w 720w, https://miro.medium.com/v2/resize:fit:750/0*gO0yYMh4FUkpue3w 750w, https://miro.medium.com/v2/resize:fit:786/0*gO0yYMh4FUkpue3w 786w, https://miro.medium.com/v2/resize:fit:828/0*gO0yYMh4FUkpue3w 828w, https://miro.medium.com/v2/resize:fit:1100/0*gO0yYMh4FUkpue3w 1100w, https://miro.medium.com/v2/resize:fit:1400/0*gO0yYMh4FUkpue3w 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg mh om c" width="700" height="394" loading="eager" role="presentation"></picture></div></div></figure><p id="875d" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj"><strong class="nc gu">Nilai dan masa depan Flutter dan Dart</strong></p><p id="a396" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Saya baru saja bergabung dengan tim Flutter dan Dart, dan saya sangat senang dapat bekerja sama dengan komunitas developer kami pada saat AI bergerak dengan cepat untuk meningkatkan produktivitas developer dan membuka berbagai jenis pengalaman pengguna yang baru. Saya melihat potensi yang tak terbatas dalam peran Flutter dan Dart untuk membantu membentuk masa depan ini. Saya juga terinspirasi oleh visi awal Flutter untuk meningkatkan pengalaman membangun aplikasi yang indah, berkinerja, dan multiplatform untuk perangkat apa pun<strong class="nc gu"><em class="ny">.</em></strong></p><p id="5881" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Melihat jutaan developer berbakat dan kreatif yang mendukung Flutter dengan kontribusinya terhadap framework, atau dengan membangun pengalaman yang luar biasa — jelas sekali bahwa orang lain melihat visi ini dan termotivasi untuk membantu. Dan misi utamanya tetap sama: untuk menghadirkan penyambungan framework dan bahasa yang kuat, yang memungkinkan developer kreatif membangun aplikasi yang indah, kaya, dan berkinerja tinggi untuk perangkat apa pun. Mari kita lakukan ini bersama-sama!</p><p id="bce2" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj"><strong class="nc gu">Membawa Flutter dan Dart ke era Gemini</strong></p><p id="fe3c" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Hari ini kami meluncurkan <a class="af on" rel="noopener" href="/flutter/harness-gemini-in-your-dart-and-flutter-apps-00573e560381">Google AI Dart SDK</a>, paket pub.dev baru, <a class="af on" href="https://pub.dev/packages/google_generative_ai" rel="noopener ugc nofollow" target="_blank">google_generative_ai,</a> dan <a class="af on" href="https://ai.google.dev/tutorials/dart_quickstart" rel="noopener ugc nofollow" target="_blank">sumber daya pendukung</a>; semuanya ini memungkinkan Anda membangun fitur berbasis AI generatif, seperti smart chat bot, mesin telusur visual, dan deskripsi gambar ke dalam aplikasi Dart dan Flutter menggunakan Gemini API. Kemampuan lintas platform Flutter dan Dart serta SDK baru ini mempermudah Anda membangun pengalaman interaktif lintas platform.</p><figure class="oc od oe of og oh nz oa paragraph-image"><div role="button" tabindex="0" class="oi oj fi ok bg ol"><div class="nz oa oo"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*5hGoIuMtVnvrZ2id 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*5hGoIuMtVnvrZ2id 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*5hGoIuMtVnvrZ2id 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*5hGoIuMtVnvrZ2id 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*5hGoIuMtVnvrZ2id 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*5hGoIuMtVnvrZ2id 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*5hGoIuMtVnvrZ2id 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*5hGoIuMtVnvrZ2id 640w, https://miro.medium.com/v2/resize:fit:720/0*5hGoIuMtVnvrZ2id 720w, https://miro.medium.com/v2/resize:fit:750/0*5hGoIuMtVnvrZ2id 750w, https://miro.medium.com/v2/resize:fit:786/0*5hGoIuMtVnvrZ2id 786w, https://miro.medium.com/v2/resize:fit:828/0*5hGoIuMtVnvrZ2id 828w, https://miro.medium.com/v2/resize:fit:1100/0*5hGoIuMtVnvrZ2id 1100w, https://miro.medium.com/v2/resize:fit:1400/0*5hGoIuMtVnvrZ2id 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg mh om c" width="700" height="182" loading="lazy" role="presentation"></picture></div></div></figure><p id="61b5" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Dan ini hanyalah awal dari inovasi yang kami bawa ke pengembangan Flutter dan Dart dengan AI. Sebagai contoh, dalam waktu dekat developer Flutter dan Dart bisa menyalin kode Dart secara langsung dari <a class="af on" href="https://aistudio.google.com/?utm_source=flutter&utm_medium=referral&utm_campaign=blog_umbrella_announcement&utm_content=" rel="noopener ugc nofollow" target="_blank">Google AI Studio</a> setelah menyempurnakan prompt untuk kasus penggunaan Anda.</p><p id="c976" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Pelajari lebih lanjut tentang Google AI Dart SDK di <a class="af on" rel="noopener" href="/flutter/harness-gemini-in-your-dart-and-flutter-apps-00573e560381">postingan blog pembahasan mendalam</a>.</p><p id="9afc" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Banyak developer yang sudah mulai menggabungkan Flutter dan alat AI secara menarik:</p><ul class=""><li id="9721" class="na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx op oq or bj">Tim di <a class="af on" href="https://leancode.co/" rel="noopener ugc nofollow" target="_blank">LeanCode</a> telah menggunakan model Gemini untuk membangun <a class="af on" href="https://leancode.co/arb_translate" rel="noopener ugc nofollow" target="_blank">arb_translate</a>, sebuah paket yang memungkinkan developer melakukan tugas penerjemahan secara otomatis</li><li id="7ef5" class="na nb gt nc b nd os nf ng nh ot nj nk nl ou nn no np ov nr ns nt ow nv nw nx op oq or bj">We Spot Turtles! telah menggabungkan Flutter dan AI dalam misi mereka untuk menyelamatkan penyu dari kepunahan. Mereka baru saja menjadi sorotan di <a class="af on" href="https://play.google.com/console/about/weareplay/" rel="noopener ugc nofollow" target="_blank">#WeArePlay campaign</a> Google Play. Lihatlah di bawah ini.</li><li id="cd6b" class="na nb gt nc b nd os nf ng nh ot nj nk nl ou nn no np ov nr ns nt ow nv nw nx op oq or bj">AutoGPT, sebuah proyek open source eksperimental yang dibangun di atas model bahasa besar (LLM), memiliki <a class="af on" href="https://github.com/Significant-Gravitas/auto_gpt_flutter_client" rel="noopener ugc nofollow" target="_blank">klien Flutter</a> yang berjalan di iOS, Android, web, macOS, dan Windows.</li></ul><p id="0b81" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj"><a class="af on" href="https://youtu.be/CfzhLOiczDQ?si=Qgc4Yb4Q9xKI6byF" rel="noopener ugc nofollow" target="_blank">#WeArePlay | Caitlin dan Nicolas | We Spot Turtles! | Australia</a></p><figure class="oc od oe of og oh"><div class="ox jj l fi"><div class="oy oz l"></div></div></figure><p id="4077" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Saat Anda menjelajahi kemampuan model Gemini, pastikan membagikan pengalaman baru dan inovasi yang Anda bangun bersama kami menggunakan hashtag #BuildWithGemini.</p><p id="79e0" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj"><strong class="nc gu">Rilis dua SDK baru</strong></p><p id="56d1" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Selain antusiasme yang dihadirkan AI, kami tetap fokus untuk terus membangun framework UI yang kuat, yang mampu menghadirkan pengalaman apa pun yang ingin Anda bangun di layar apa pun yang Anda inginkan. Anda akan melihat progres menuju visi tersebut dalam rilis SDK hari ini, Flutter 3.19 dan Dart 3.3.</p><p id="85d4" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Rilis ini berfokus pada penyempurnaan dan peningkatan performa yang dibangun di atas jalur yang telah ditetapkan Flutter dan Dart <a class="af on" rel="noopener" href="/flutter/whats-next-for-flutter-b94ce089f49c">tahun lalu</a>. Dalam rilis Flutter ini, Anda akan menemukan:</p><ul class=""><li id="46eb" class="na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx op oq or bj">Pembaruan pada upaya kami untuk menghasilkan terobosan performa grafik melalui upaya berkelanjutan atas Impeller</li><li id="534e" class="na nb gt nc b nd os nf ng nh ot nj nk nl ou nn no np ov nr ns nt ow nv nw nx op oq or bj">Langkah tambahan untuk menyediakan integrasi yang mulus antar platform dengan font native iOS Flutter dan versi awal validator web deep linking</li><li id="19cd" class="na nb gt nc b nd os nf ng nh ot nj nk nl ou nn no np ov nr ns nt ow nv nw nx op oq or bj">Fokus berkelanjutan pada pengalaman developer dengan update untuk DevTools dan <a class="af on" rel="noopener" href="/flutter/progress-of-the-flutter-package-ecosystem-17cded9a0703">laporan progres pada ekosistem paket Flutter</a></li><li id="936e" class="na nb gt nc b nd os nf ng nh ot nj nk nl ou nn no np ov nr ns nt ow nv nw nx op oq or bj">Dan terakhir, kami sangat senang bisa membagikan progres misi kami untuk membantu menentukan masa depan web dengan Wasm</li></ul><figure class="oc od oe of og oh nz oa paragraph-image"><div role="button" tabindex="0" class="oi oj fi ok bg ol"><div class="nz oa oo"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*2UG76__vsbp6NHtN 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*2UG76__vsbp6NHtN 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*2UG76__vsbp6NHtN 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*2UG76__vsbp6NHtN 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*2UG76__vsbp6NHtN 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*2UG76__vsbp6NHtN 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*2UG76__vsbp6NHtN 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*2UG76__vsbp6NHtN 640w, https://miro.medium.com/v2/resize:fit:720/0*2UG76__vsbp6NHtN 720w, https://miro.medium.com/v2/resize:fit:750/0*2UG76__vsbp6NHtN 750w, https://miro.medium.com/v2/resize:fit:786/0*2UG76__vsbp6NHtN 786w, https://miro.medium.com/v2/resize:fit:828/0*2UG76__vsbp6NHtN 828w, https://miro.medium.com/v2/resize:fit:1100/0*2UG76__vsbp6NHtN 1100w, https://miro.medium.com/v2/resize:fit:1400/0*2UG76__vsbp6NHtN 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg mh om c" width="700" height="394" loading="lazy" role="presentation"></picture></div></div></figure><p id="df68" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Dart 3.3 memperkenalkan tipe ekstensi, model baru untuk berinteraksi dengan JavaScript di web, dan pembaruan pada upaya kami untuk mendukung akses ke library web yang lebih banyak dan lebih baik. Anda bisa mempelajari lebih lanjut mengenai setiap rilis dalam postingan blog untuk <a class="af on" rel="noopener" href="/flutter/whats-new-in-flutter-3-19-58b1aae242d2">Flutter 3.19</a> dan <a class="af on" rel="noopener" href="/dartlang/dart-3-3-325bf2bf6c13">Dart 3.3</a>.</p><p id="a1eb" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj"><strong class="nc gu">Strategi dan Roadmap 2024</strong></p><p id="f30b" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Setiap fitur ini merupakan langkah kecil dalam perjalanan lebih besar yang kami lakukan tahun ini, dan bisa Anda lihat di <a class="af on" href="https://github.com/flutter/flutter/wiki/Roadmap" rel="noopener ugc nofollow" target="_blank">roadmap 2024</a> kami. Seperti biasa, roadmap ini lahir dari keinginan untuk terbuka tentang rencana kami karena kami tahu banyak dari Anda menganggap Flutter dan Dart sebagai komponen penting dalam karier dan bisnis Anda. Meskipun demikian, progres terkadang sulit diprediksi, bahkan dengan perencanaan yang sudah siap.</p><p id="da55" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Dan meskipun kami pasti melakukan yang terbaik untuk terus bersikap transparan karena perubahan yang terjadi memaksa kami untuk mengalihkan fokus dan melakukan kompromi, kami ingin menyoroti bahwa terdapat lebih banyak kontributor untuk Flutter dan Dart di luar Google dibandingkan dengan kami yang dipekerjakan di sini, yang berarti bahwa hal-hal yang disebutkan dalam roadmap kami hanyalah sebagian kecil dari ribuan perubahan yang akan hadir ke Dart dan Flutter pada tahun ini.</p><figure class="oc od oe of og oh nz oa paragraph-image"><div role="button" tabindex="0" class="oi oj fi ok bg ol"><div class="nz oa pa"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*oAoUwrRrrYWIbu_u 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*oAoUwrRrrYWIbu_u 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*oAoUwrRrrYWIbu_u 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*oAoUwrRrrYWIbu_u 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*oAoUwrRrrYWIbu_u 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*oAoUwrRrrYWIbu_u 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*oAoUwrRrrYWIbu_u 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*oAoUwrRrrYWIbu_u 640w, https://miro.medium.com/v2/resize:fit:720/0*oAoUwrRrrYWIbu_u 720w, https://miro.medium.com/v2/resize:fit:750/0*oAoUwrRrrYWIbu_u 750w, https://miro.medium.com/v2/resize:fit:786/0*oAoUwrRrrYWIbu_u 786w, https://miro.medium.com/v2/resize:fit:828/0*oAoUwrRrrYWIbu_u 828w, https://miro.medium.com/v2/resize:fit:1100/0*oAoUwrRrrYWIbu_u 1100w, https://miro.medium.com/v2/resize:fit:1400/0*oAoUwrRrrYWIbu_u 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg mh om c" width="700" height="467" loading="lazy" role="presentation"></picture></div></div><figcaption class="pb fe pc nz oa pd pe be b bf z dt">Roadmap 2024</figcaption></figure><p id="f846" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj"><strong class="nc gu">Menyatukan semuanya</strong></p><p id="0478" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Saya telah mengerjakan banyak proyek yang menyenangkan dan inovatif selama 17+ tahun di Google dan YouTube, tetapi ini adalah hal paling antusias yang pernah saya rasakan dalam menyambut kesempatan baru. Saya memulai karier saya sebagai software engineer, dan tugas pertama saya di Google adalah sebagai PM untuk alat developer Maps API dan Geo, jadi saya senang sekali bisa kembali ke akar developer saya.</p><p id="c88d" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Salah satu hal yang mendorong antusiasme saya, adalah, antusiasme Anda. Selama tahun 2024 ini, saya melihat banyak hal luar biasa yang muncul dari komunitas ini, termasuk:</p><ul class=""><li id="233a" class="na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx op oq or bj">Lebih dari 2.700 orang telah bergabung dalam<a class="af on" href="http://flutter.dev/global-gamers" rel="noopener ugc nofollow" target="_blank"> Global Gamers Challenge</a>, yang kami selenggarakan bekerja sama dengan firma advokasi internasional Global Citizen untuk menantang Anda menggunakan keahlian Anda dalam membangun game Flutter yang dapat menginspirasi dunia untuk hidup lebih berkelanjutan.</li><li id="b0bd" class="na nb gt nc b nd os nf ng nh ot nj nk nl ou nn no np ov nr ns nt ow nv nw nx op oq or bj"><a class="af on" href="https://youtu.be/37qvcjmE51w" rel="noopener ugc nofollow" target="_blank">Superlist</a>, yang mengumumkan versi 1.0 kemarin, menggunakan Flutter untuk mendefinisikan ulang manajemen tugas, pencatatan, dan segala sesuatunya.</li></ul><p id="4006" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Sebagai penutup, anak-anak saya mulai belajar Ilmu Komputer, dan saya termotivasi untuk membantu menciptakan pengalaman pengembangan software yang akan membantu generasi berikutnya mengubah dunia menjadi lebih baik.</p><p id="eaf4" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Tahun ini menjanjikan sesuatu yang penting untuk menciptakan masa depan tersebut, dan saya tidak sabar menantikan bagaimana Flutter dan Dart mendukungnya. Seperti biasa, kami sangat berterima kasih atas dukungan Anda yang tiada henti dan kami tidak sabar menantikan apa yang akan kita bangun bersama. Sampai jumpa lagi!</p></div></div></div></div></section></div></div></article>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-5501721436006874392024-02-16T10:26:00.002+07:002024-03-01T10:30:33.082+07:00Pratinjau Developer Pertama Android 15<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="http://android-developers.googleblog.com/2024/02/first-developer-preview-android15.html"/>
<meta name="original_url" content="http://android-developers.googleblog.com/2024/02/first-developer-preview-android15.html"/>
<style id="page-skin-1" type="text/css"><!--
body {
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
-webkit-font-smoothing: antialiased;
color: #202124
}
h1 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px
}
h2 {
font-size: 30px;
line-height: 40px
}
h2,
h3 {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500
}
h3 {
font-size: 24px;
line-height: 32px
}
h4 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 26px
}
h5 {
font-size: 16px;
line-height: 24px
}
h5,
h6 {
font-family: Roboto, sans-serif;
font-weight: 600
}
h6 {
font-size: 14px;
line-height: 22px
}
.display {
font-family: Roboto, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 67.2px
}
.hidden-text {
height: 1px;
overflow: hidden;
pointer-events: none;
position: absolute;
top: -10px;
width: 1px
}
img,
video {
border: 0;
height: auto;
max-width: 100%
}
body {
position: relative;
min-height: 100vh
}
body.no-scroll {
overflow: hidden
}
a {
color: #4184f3;
text-decoration: none
}
a:focus,
a:focus-visible {
outline-offset: -2px
}
.content-wrap {
padding-top: 200px;
max-width: 800px;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:915px) {
.content-wrap {
padding-top: 100px
}
}
.full-width {
width: 100%
}
.icon-link {
height: 42px;
width: 132px;
border-radius: 80px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: baseline;
-ms-flex-pack: center;
justify-content: baseline;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
background: transparent;
border: none;
color: black !important
}
.icon-link:hover {
background-color: hsla(213, 7%, 76%, .2)
}
.icon-link:focus {
background-color: hsla(213, 7%, 76%, .26)
}
.icon-link:active {
background-color: hsla(213, 7%, 76%, .32)
}
.adb-container {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto;
max-width: 1420px
}
@media only screen and (max-width:767px) {
.adb-container {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--large {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto
}
@media only screen and (max-width:767px) {
.adb-container--large {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--flex-horizontal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.section,
body {
margin: 0
}
.adb-card {
position: relative;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
margin: 40px 0;
padding: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: box-shadow .2s linear, opacity .2s linear;
transition: box-shadow .2s linear, opacity .2s linear, -webkit-box-shadow .2s linear
}
.divider {
border: none;
height: 1px;
color: #DADCE0;
background-color: #DADCE0;
margin: 0 20px;
}
.adb-card:first-child {
background-color: #d7effe;
border: none;
padding: 32px 24px 32px;
margin: 40px 20px 60px;
}
@media only screen and (max-width:850px) {
.adb-card {
max-height: unset;
padding: 0 20px
}
.adb-card:first-child {
margin-bottom: 40px;
}
}
@media only screen and (max-width:600px) {
.adb-card:first-child {
margin: 0 -20px 40px;
}
.adb-card {
border-radius: 0;
padding: 0;
}
.divider {
margin: 0;
}
.content-wrap {
padding-top: 54px;
}
}
.adb-card:focus-within,
.adb-card:hover {
-webkit-box-shadow: 0 0 36px rgba(0, 0, 0, .1);
box-shadow: 0 0 36px rgba(0, 0, 0, .1);
cursor: pointer
}
.adb-card__href {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.adb-card__image-wrapper {
overflow: hidden;
position: relative;
width: auto;
-webkit-flex-basis: 40%;
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.adb-card__content {
padding: 24px 0 0
}
.adb-card__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 600;
margin-bottom: 12px
}
.adb-card__info {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 24px
}
.adb-card__description {
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin-bottom: 48px
}
.adb-card:hover .adb-content__image-wrapper img,
.adb-card__href:focus~.adb-content__image-wrapper img {
-webkit-transform: scale(1.03);
transform: scale(1.03);
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease
}
.devsite-footer {
padding: 0 24px;
border-top: 1px solid #bdc1c6
}
.devsite-footer li {
display: block
}
.devsite-footer li a {
text-decoration: none;
font-size: 14px;
line-height: 16px;
color: #202124
}
.devsite-footer li a:focus,
.devsite-footer li a:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-linkboxes-list {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
padding: 24px 0;
border-bottom: 1px solid #bdc1c6
}
@media only screen and (max-width:767px) {
.devsite-footer-linkboxes-list {
grid-template-columns: 1fr;
padding-left: 0
}
}
.devsite-footer-linkbox {
display: block
}
.devsite-footer-linkbox-heading {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin: 0 0 4px
}
.devsite-footer-linkbox ul {
padding-left: 0
}
.devsite-footer-sites-list {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-utility nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 24px 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0
}
}
.devsite-footer-utility-button {
justify-self: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 20px;
margin-left: auto;
padding-left: 16px
}
.devsite-footer-utility-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 8px 0 0
}
.devsite-footer-utility-item:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.devsite-footer-utility-item:not(:first-child):before {
content: "|";
margin: 0 8px 0 0
}
}
.devsite-footer-sites {
border-bottom: 1px solid #bdc1c6;
padding: 24px 0 23px
}
.devsite-footer-sites-logo {
height: 32px;
margin-top: 5px;
width: 185px
}
.devsite-footer-sites-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0
}
.devsite-footer-sites-item {
margin: 0 0 0 40px
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-item {
margin: 0
}
}
.devsite-footer-sites-link {
display: block;
padding: 8px 0;
color: #202124
}
.devsite-footer-sites-link:focus,
.devsite-footer-sites-link:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-utility-link:focus {
text-decoration: underline
}
.devsite-footer-utility .devsite-footer-utility-button {
line-height: 20px;
font: 400 14px/16px Roboto, sans-serif
}
.devsite-footer-utility .devsite-footer-utility-button:before {
content: "";
margin: 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility .devsite-footer-utility-button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
margin: 18px 0 12px
}
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link {
border: 0;
background: #1a73e8;
color: #fff;
line-height: 36px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0 0 16px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px 0;
box-shadow: 0 1px 2px 0;
display: inline-block;
font: 500 14px/36px Roboto, sans-serif;
height: 36px;
letter-spacing: 0;
min-width: 36px;
padding: 0 24px;
text-align: center;
-webkit-transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s, -webkit-box-shadow .2s;
vertical-align: middle;
white-space: nowrap
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link:hover {
background: #1765cc
}
.adb-page__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px;
text-align: center;
color: #202124
}
.adb-detail hr {
border: 1px solid #dadce0;
margin: 40px 0
}
.adb-detail__title {
font-size: 40px;
font-weight: 600;
line-height: 48px
}
.adb-detail__info {
font-weight: 400;
font-size: 16px;
line-height: 24px
}
.adb-detail__content {
min-height: 200px
}
.icon-sidebar {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
top: 0;
left: -300px;
max-width: 220px;
gap: 8px
}
.icon-sidebar .share-text {
font-weight: 500;
margin-left: 4px
}
@media only screen and (max-width:1440px) {
.icon-sidebar {
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
left: 0;
margin-top: -20px;
margin-bottom: 40px;
}
.icon-sidebar .share-text {
display: none;
}
}
.copy-tooltip {
display: none;
position: fixed;
bottom: 16px;
left: 10px;
z-index: 100;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.copy-tooltip .copy-tooltiptext {
width: 200px;
background-color: #073042;
color: #fff;
text-align: center;
border-radius: 80px;
padding: 8px 16px;
}
.header__overlay {
height: 100vh;
left: 0;
position: fixed;
width: 100vw;
border: none;
background-color: rgba(0, 0, 0, .4);
-webkit-animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
opacity: 0;
top: 0;
z-index: -1;
display: none
}
.header__overlay.show {
display: block;
opacity: 1;
z-index: 800;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out
}
.social-icons__links {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
.social-icons__links path {
fill: #80868b
}
.social-icons__container-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin-right: 14px
}
@media only screen and (max-width:1000px) {
.social-icons__container-header {
display: none
}
}
.adb-blog-logo:focus,
.adb-blog-logo:hover {
opacity: .7;
text-decoration: none
}
.adb-blog-logo__image {
height: 32px;
margin-left: 0;
margin-top: 6px
}
@media only screen and (min-width:840px) {
.adb-blog-logo__image {
margin-left: 24px
}
}
.header {
position: fixed;
background: #fff;
z-index: 700;
top: 0;
width: 100%;
overflow: hidden;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
height: auto
}
.header .top-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 24px;
height: 50px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #e6e6e6
}
@media only screen and (max-width:839px) {
.header .top-row {
padding: 0 16px
}
}
.header .top-row__left,
.header .top-row__right {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 100%
}
.header .nav-row,
.header .top-row__left,
.header .top-row__right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.header .nav-row {
background: #fff;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.header .nav-items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 50px;
position: relative;
background-color: #fff
}
@media only screen and (max-width:839px) {
.header .nav-items {
display: none
}
}
.header .nav-items tab {
position: relative
}
.header .nav-items tab.active .header__nav-item:after,
.header .nav-items tab:hover .header__nav-item:after {
background: #1a73e8
}
.header .nav-items tab.active .header__nav-item,
.header .nav-items tab:focus-within a {
color: #202124
}
@media only screen and (max-width:839px) {
.header .header__cta,
.header .nav-items {
display: none
}
}
.header__search-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 6px 0 6px 24px;
overflow: hidden;
position: relative;
margin-right: 36px;
border-radius: 4px
}
@media only screen and (max-width:767px) {
.header__search-container:not(.mobile) {
display: none
}
}
.header__search-container.mobile {
margin: 0 0 20px
}
.header__search-container.mobile #searchform,
.header__search-container.mobile .searchbox {
width: 100%
}
.header__search-container .searchbox {
border-radius: 2px
}
.header__search-container .searchbox input {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
font-weight: 500;
color: #80868b;
border: 0;
margin: 0;
height: 20px;
outline: 0;
padding: 8px 8px 8px 40px;
width: 100%;
-webkit-transition: background .2s;
transition: background .2s
}
.header__search-container .searchbox input::-webkit-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input:-ms-input-placeholder,
.header__search-container .searchbox input::-ms-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input::placeholder {
color: #80868b
}
.header__search-container .searchbox input:hover {
background: #e8eaed
}
.header__search-container .material-icons {
color: #80868b;
left: 8px;
position: absolute;
top: 6px;
-webkit-transition: color .2s;
transition: color .2s
}
.header__cta {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #1a73e8 !important;
text-decoration: none
}
.header__cta.mobile {
padding: 18px 0
}
.header__cta:hover .cta-icon {
margin-left: 0;
margin-right: 12px
}
.header__cta .cta-icon {
-webkit-transition: margin-right .2s linear, margin-left .2s linear;
transition: margin-right .2s linear, margin-left .2s linear;
margin-left: 4px;
margin-right: 8px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.header__cta .cta-icon path {
fill: #1a73e8
}
.header__nav-item {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #80868b;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 18px;
height: 100%;
text-transform: none;
text-decoration: none
}
.header__nav-item:hover {
color: #202124
}
.header__nav-item.mobile {
font-weight: 500;
padding: 0
}
.header__nav-item:after {
bottom: 0;
border-radius: 3px 3px 0 0;
content: "";
display: block;
height: 3px;
left: 50%;
min-width: 20px;
position: absolute;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(100% - 24px)
}
.header__hamburger {
border: 0;
background: none;
outline: none;
padding: 0;
margin: 1px 8px 0 -4px;
padding: 8px;
color: rgba(0, 0, 0, .65);
cursor: pointer
}
@media only screen and (min-width:840px) {
.header__hamburger {
display: none
}
}
.header__side-menu {
background-color: #fff;
bottom: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
z-index: 900
}
.header__side-menu.is-open {
-webkit-transform: translateX(0);
transform: translateX(0);
width: 80%
}
.header__side-menu.is-open,
.header__side-menu__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%
}
.header__side-menu__content {
padding: 18px 16px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.header__side-menu__content .spacer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.header__side-menu__title {
font-family: Roboto, sans-serif;
font-size: 20px;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px
}
.header__side-menu__items {
list-style: none
}
.header__side-menu__items li {
padding: 12px 0
}
.header__side-menu__items tab {
position: relative
}
.header__side-menu__items tab.active .header__nav-item,
.header__side-menu__items tab:focus-within a {
color: #202124
}
.header__side-menu__bottom {
border-top: 1px solid #e6e6e6
}
.header__side-menu__logo-container {
background: #fff;
height: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 4px 16px;
border-bottom: 1px solid #e6e6e6
}
#nav .widget {
margin: 0
}
.featured__wrapper {
width: 100%;
border: 0;
background-color: #e8f0fe;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 80px 0
}
@media only screen and (max-width:767px) {
.featured__wrapper {
padding: 0
}
}
.featured__inner {
max-width: 1080px;
width: calc(100% - 24px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
padding: 48px
}
@media only screen and (min-width:768px) {
.featured__inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
padding: 12px 80px
}
}
.featured__href {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.featured__image {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
max-width: 100%;
}
.featured__content {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-top: 24px;
width: 100%
}
.featured__title {
font-size: 32px;
line-height: 44.8px;
font-weight: 500;
font-family: Android Euclid, Roboto, sans-serif;
margin-bottom: 15px
}
.featured__info {
font-family: Roboto Mono, monospace;
font-weight: 400;
font-size: 12px;
line-height: 160%;
margin-bottom: 24px
}
.featured__description {
margin-bottom: 48px
}
.preview.featured__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f1f3f4;
padding: 64px 0 120px
}
.preview.featured__wrapper h1 {
margin: 0 0 64px
}
.blog-label-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px
}
.blog-label-container .blog-label {
text-decoration: none;
z-index: 3
}
.blog-label-container .blog-label span {
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
background-color: #F1F3F4;
border-radius: 100px;
padding: 4px 16px;
color: #3c4043
}
.adb-card:first-child .blog-label span {
background-color: #fff;
}
.blog-label-container .blog-label span:focus,
.blog-label-container .blog-label span:hover {
background-color: #D7EFFE
}
.adb-card:first-child .blog-label span:focus,
.adb-card:first-child .blog-label span:hover {
background-color: #F1F3F4
}
.blog-label-container .blog-label span:focus-visible {
outline-offset: 0
}
#pagination-container {
display: none
}
.pagination {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.pagination .page-button {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: black;
background-color: #3DDC84;
padding: 16px 24px;
border-radius: 80px;
text-decoration: none
}
.pagination .page-button:focus,
.pagination .page-button:hover {
background-color: #3DDC8460;
}
.pagination .page-button.disabled {
color: #80868b;
background-color: #f1f3f4
}
--></style>
<style id="template-skin-1" type="text/css"><!--
--></style>
<style>
/** Blogger default styles **/
html, .Label h2, #sidebar .rss a, .BlogArchive h2, .FollowByEmail h2.title, .widget .post h2 {
font-family: Roboto, sans-serif;
}
.plusfollowers h2.title, .post h2.title, .widget h2.title {
font-family: Roboto, sans-serif;
}
pre, .post-content pre.prettyprint {
background-color: #f7f7f7;
border: 1px solid #ddd;
margin: 0 0 1em 0;
padding: 1em;
overflow: auto;
}
pre, code {
font-size: 9pt;
line-height: 125%;
font-family: monospace;
}
pre, code {
color: #060;
font: 13px/18px Consolas, 'Liberation Mono', Menlo, Monaco, Courier, monospace;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
/* Styles for https://github.com/google/code-prettify */
.com { color: #060; }
.kwd { color: #008; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.fb-custom img, .twitter-custom img, .gplus-share img, .email-custom img {
cursor: pointer;
opacity: 0.54;
}
.twitter-custom, .gplus-share, .fb-custom {
margin-right: 12px;
}
/** Blogger custom theme **/
.adb-header,
.searchBox input {
box-sizing: border-box;
}
.popout-nav {
background-color: white;
width: 280px;
height: 100%;
position: fixed;
z-index: 6;
left: -280px;
transition: left 0.2s;
}
.popout-search {
background-color: white;
width: 280px;
position: fixed;
z-index: 6;
right: -280px;
transition: right 0.2s;
top: 0;
}
.popout-search .widget {
margin: 0;
}
.popout-search #BlogSearch2_form .popout-options {
padding-right: 24px;
width: calc(100% - 48px);
}
.dropdown-nav {
display: none;
background-color: white;
width: 104px;
position: fixed;
padding: 4px 0px 3px 0px;
z-index: 4;
left: 352px;
top: 176px;
transition: top 0.2s;
box-shadow: 0 0px 2px 0 rgba(60,64,67,.3), 0 0px 6px 2px rgba(60,64,67,.15), inset 0 0px 6px -4px rgba(154,160,166,.5);
}
.dropdown-options {
align-items: center;
display: flex;
flex-wrap: wrap;
width: 94px;
height: 48px;
padding-left: 10px;
}
.dropdown-options:hover {
background-color: #f7f9fa;
}
.dropdown-options span {
color: #80868b;
}
.popout-options {
padding-right: 8px;
padding-left: 24px;
padding-top: 16px;
padding-bottom: 15px;
display: inline-block;
width: calc(100% - 32px);
border-top: 1px solid #ddd;
font-size: 13px;
font-weight: 700;
color: #80868b !important;
}
.popout-options:last-of-type {
border-bottom: 1px solid #ddd;
}
.popout-options:first-of-type {
border-top: 0;
}
#close-popout {
padding: 12px 12px 11px 20px;
}
#close-search-popout {
padding: 12px 20px 11px 12px;
text-align: right;
}
.popout-search-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
transition: opacity 0.2s;
}
.popout-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
z-index: 5;
transition: opacity 0.2s;
}
html {
background-color: #fff;
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
width: 100%;
position: absolute;
padding: 0;
/* This ensures that the scroll bar is always present, which is needed */
/* because render happens after page load; otherwise the header */
/* would 'bounce' in-between states. */
min-height: 150%;
}
h2 {
font-size: 130%;
}
h1, h2, h3, h4, h5 {
line-height: 1.5em;
margin-bottom: 1em;
}
html, h4, h5, h6 {
font-size: 14px;
}
a, a:visited {
color: #039be5;
text-decoration: none;
}
pre code {
display: block;
}
.cols-wrapper {
margin-top: 56px;
}
.header-outer, .cols-wrapper {
padding: 0 60px;
}
html, .header-inner a {
color: #212121;
color: rgba(0, 0, 0, .87);
}
/** Archive widget. **/
.BlogArchive {
font-size: 13px;
font-weight: normal;
}
.BlogArchive .widget- {
display: none;
}
.BlogArchive h2, .Label h2 {
color: #039be5;
text-decoration: none;
}
/* Specificity needed here to override widget CSS defaults. */
/* Months */
.Label {
font-size: 13px;
font-weight: normal;
}
.sidebar-icon {
display: inline-block;
width: auto;
vertical-align: middle;
height: 24px;
margin-right: 24px;
}
.sidebar-social-links {
align-items: center;
}
.sidebar-social-links .android-logo,
.android-logo {
height: 48px;
}
.sidebar-social-links a:last-child img {
margin-right: 0;
}
.Label .widget- {
display: none;
}
.searchBox input {
border: 1px solid #eee;
color: #212121;
color: rgba(0, 0, 0, .87);
font-size: 14px;
padding: 8px 8px 8px 40px;
width: 100%;
font-family: Android Euclid, Roboto, sans-serif;
background: url('https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png') 8px center no-repeat;
}
.searchBox ::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .54);
}
.section {
margin: 0;
padding: 0;
}
#sidebar-top {
border: 1px solid #eee;
}
#sidebar-top > div {
margin: 16px 0;
}
/*main post*/
.post {
margin-bottom: 30px;
}
#main .post .title {
margin: 0;
}
#main .post .title a {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: normal;
font-size: 24px;
}
.message, #main .post .post-header {
margin: 0;
padding: 0;
}
#main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption {
color: #444;
font-weight: 500;
}
#main .post .post-header .published {
font-size: 11px;
font-weight: bold;
}
.post-header .publishdate {
font-size: 16px;
font-weight: normal;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#main .post .post-footer {
font-size: 12px;
padding-bottom: 21px;
}
.label-footer {
margin-bottom: 12px;
margin-top: 12px;
}
#main .post .post-header .published {
margin-bottom: 16px;
}
.post .post- {
color: #545454;
color: rgba(0, 0, 0, .67);
font-size: 16px;
margin: 16px 0 36px 0;
line-height: 24px;
word-wrap: break-word;
}
.post-summary {
display: none;
}
/* Override all post images/videos to left align. */
@media (max-width: 712px) {
.post- img {
max-width: 100%;
height: auto;
width: auto;
}
}
.post- .tr-caption-container img {
margin-bottom: 12px;
}
.post- iframe, .post- embed {
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
}
.post- .carousel-container {
margin-bottom: 48px;
}
#main .post- b {
font-weight: 500;
}
/* These are the main paragraph spacing tweaks. */
#main .post- br {
: '';
display: block;
padding: 4px;
}
.post-content .space {
display: block;
height: 8px;
}
.post-content iframe+.space, .post-content iframe+br {
padding: 0 !important;
}
#main .post .jump-link {
margin-bottom: 10px;
}
.post-content img, .post-content iframe {
margin: 30px 0 20px 0;
}
.post-content > img:first-child, .post-content > iframe:first-child {
margin-top: 0;
}
.col-right .section {
padding: 0 16px;
}
#aside {
background: #fff;
border: 1px solid #eee;
border-top: 0;
z-index: 2;
}
#aside .widget {
margin: 0;
}
#aside .widget h2, #ArchiveList .toggle+a.post-count-link {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: 400 !important;
margin: 0;
}
#ArchiveList .toggle {
float: right;
}
#ArchiveList .toggle .material-icons {
padding-top: 4px;
}
#sidebar-top,
#sidebar {
background: #fff;
}
#sidebar .tab {
cursor: pointer;
}
#sidebar .tab .arrow {
display: inline-block;
float: right;
}
#sidebar .tab .icon {
display: inline-block;
vertical-align: top;
height: 24px;
width: 24px;
margin-right: 13px;
margin-left: -1px;
margin-top: 1px;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget-content > :first-child {
padding-top: 8px;
}
#sidebar .active .tab .arrow {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#sidebar .arrow {
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget h2 {
font-size: 14px;
line-height: 24px;
display: inline-block;
}
#sidebar .widget .BlogArchive {
padding-bottom: 8px;
}
#sidebar .widget {
border-bottom: 1px solid #eee;
box-shadow: 0px 1px 0 white;
margin-bottom: 0;
padding: 14px 0;
min-height: 20px;
}
#sidebar .widget:last-child {
border-bottom: none;
box-shadow: none;
margin-bottom: 0;
}
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style: none;
padding: 0;
}
#sidebar ul li a {
line-height: 32px;
}
#sidebar ul ul ul li a {
line-height: 24px;
}
#sidebar .archive {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC');
height: 24px;
line-height: 24px;
padding-left: 30px;
}
#sidebar .labels {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC');
height: 20px;
line-height: 20px;
padding-left: 30px;
}
#sidebar .rss a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII=');
}
#sidebar .subscription a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC');
}
#sidebar-bottom {
background: #f5f5f5;
border-top: 1px solid #eee;
}
#sidebar-bottom .widget {
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
text-align: center;
}
#sidebar-bottom > div:last-child {
border-bottom: 0;
}
#sidebar-bottom .text {
line-height: 20px;
}
/* Home, forward, and backward pagination. */
.blog-pager {
padding-top: 10px;
margin-top: 15px;
text-align: right !important;
}
#blog-pager {
padding: 40px 0 0;
}
#blog-pager a {
display: inline-block;
}
.blog-pager i.disabled {
opacity: 0.2 !important;
}
.blog-pager i {
color: black;
margin-left: 16px;
opacity: 0.54;
}
.blog-pager i:hover, .blog-pager i:active {
opacity: 0.87;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
.gplus-profile {
background-color: #fafafa;
border: 1px solid #eee;
overflow: hidden;
width: 212px;
}
.gplus-profile-inner {
margin-left: -1px;
margin-top: -1px;
}
/* Sidebar follow buttons. */
.followgooglewrapper {
padding: 12px 0 0 0;
}
.loading {
visibility: hidden;
}
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 40px !important;
}
/* ADB */
.adb-hero-area {
min-height: 104px;
background-color: #073042;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
z-index: 5;
position: fixed;
width: 100%;
}
.adb-hero-logo {
height: 80px;
position: absolute;
top: 12px;
left: 16px;
}
.adb-footer-btm {
display: flex;
margin: 0 24px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 40px;
}
.subscribe-btn {
color: black;
background-color: #3DDC84;
border-radius: 100px;
font: 500 16px/24px Android Euclid,Roboto,sans-serif;
padding: 12px 24px;
border: 0;
}
.adb-footer-info {
align-items: center;
display: flex;
padding: 0;
margin: 9px 0 0 -8px;
font-size: 13px;
}
.footer-list {
list-style: none;
padding: 0 8px;
}
.subscribe-info {
list-style: none;
padding: 0 8px 0 0;
font-size: 13px;
color: black;
}
.footer-newsletter {
display: flex;
align-items: center;
}
.adb-header-inner {
display: flex;
align-items: center;
}
.adb-header {
background-color: white;
color: #fff;
height: 48px;
left: 0;
overflow: hidden;
padding: 36px 24px;
right: 0;
top: 104px;
z-index: 4;
display: flex;
align-items: center;
position: fixed;
border-bottom: solid 1px #DADCE0;
}
.adb-shadow {
margin-top: 48px;
height: 1px;
width: 100%;
position: fixed;
background: white;
z-index: 2;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
}
.adb-logo-box {
display:inline;
}
.adb-burger-box {
display: none;
margin: 0 16px 0 0;
}
.adb-search-box {
display: none;
margin: 0 0 0 16px;
}
.adb-htag-box {
display: flex;
align-items: center;
}
.adb-header-tags {
padding: 0 24px 0 0;
}
.adb-header-tags ~ .atb-header-tags {
padding: 0 24px;
}
.adb-header-tags a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #5F6368;
}
.adb-header-tags a:hover {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #073042;
}
.more-dropdown {
display: none;
}
.dropdown-icon {
transition: all 0.3s;
}
.adb-header-logo {
display: inline-block;
vertical-align: -11px;
width: 134px;
height: 32px;
}
.adb-header-title {
color: #fff;
display: inline-block;
font-size: 20px;
font-weight: normal;
}
.adb-header-links {
border-left: 1px solid rgba(0, 0, 0, .1);
display: block;
left: 250px;
list-style: none;
margin: 0;
padding: 12px 0 12px 18px;
position: absolute;
top: 0;
}
.adb-header-link-item {
display: inline-block;
}
.adb-header-link, .adb-header-link:visited {
color: #fff;
display: inline-block;
font-weight: 500;
opacity: .7;
padding: 12px 9px;
text-transform: uppercase;
vertical-align: 2px;
}
.adb-header-link:hover, .adb-header-link:focus {
color: #fff;
opacity: 1;
}
.adb-header-console, .adb-header-console:visited {
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
color: #fff;
float: right;
font-size: 14px;
font-weight: 500;
line-height: 28px;
padding: 4px 10px;
position: relative;
text-transform: uppercase;
transition: box-shadow .2s;
z-index: 60;
}
.adb-header-console:hover {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
color: #fff;
}
.adb-header-console:focus {
background-color: rgba(63, 81, 181, .1);
color: #fff;
}
.adb-header-console-image {
vertical-align: -5px;
}
.adb-hero {
background-color: #dcedc8;
margin-top: 64px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
color: #414141;
display: inline-block;
font-weight: 500;
margin: 25px 25px 0;
}
.adb-hero-inner {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAc4AAADZCAMAAACenCAVAAAAvVBMVEXc7cjY68PT6bvR57fQ57bY6sPZ68TU6bvR6LfP5rTQ57XR57jW6r7b7cfa7MbS6LnS6Lrb7cbQ6Lfb7MbX6r/Z68PY6sLV6b7U6b3U6r3T6LnX68Da7MXP57Tb7Mfc7cfW6b/P57XS57nY68LY68HU6L3W6r/W6b7T6brX6sDV6rzQ57fa7MTV6b3T6Lra68TR57bX68HW6sDS57jU6bzO5rTP5rXZ7MXR6LbZ68XX6sHT6LvV6bzS6LjZ7MILrTuqAAAIyklEQVR4AezXhXEkUQwE0B6+Xhg8MzND/smZ4UsLBSb9Kr0UhI1vl6RZnqUFlnBl9Y+j8WQK4+qGr9oOi7iKr0YFTOt6vhsPmM81/FDAspafUszl/vNTXsOuFYZWMYfrRgyswa51hjLM4TYYGsOuTQpbgNO2dyjAroxCvgunpZT2YFZDaQKnlFRg1z6lgxpOOqS0CbtqKutwwhGVYxh2QqWGC/WUMlhWH1BK4QKnVFZh2hmVEh/cXk7pHLbt5pQafHCT6Jr9gsoR3riayiXMyyhd4Y27jDDHJVQu8MJdU7lBBBpKoz08c7eU8gERuKNyhiduhcopolBRqeGAMaV7xKE7eGzvThQTVZooAJdC1AM2qGg0BhdCrpnciVE0i9dZ3v+t/n2ZMBtJGpsu6nuCrNJddar4/gAnMmuP/GPk3JFwrL2QKw3FD26GyGmQNXbIGVHNKdfmYraDl/ZUcxO8NNtIW888bafDC7tP5R2qtQfL724N5AypxjbIGdseWHMV1VfP+rrnZvbTerMEhHb2Py4eA7KX9AwD5LSppi5ZdPTHEhv6cd5mSjZaeMW/Dc66TEpkO+Q0qIbUE5es6ke85FMN/YGXZs9yQLdXYGVASGJDBaMZXsQouzau/fzfitNsKvpUL1O8dFBksb+Q80C1coaco7RtLeYzO9tHCV7qUY0ckXPGribSoNpQB3Z1MbWtby1hiZwWw35CRjUReRx7Sg5ecqgmJiyHOxrIWVEtPDPNY/TMx4bmczq5T3jpSRELm1NWodVmlGY364tP4ZXvdw5u8jjDf8yQJJ7j+2HYfBh3d+l5HFB5RmyzjM3yh8iDUbb6M9y7j3idgxM+3BzTuPzyXmdOTARJaUc8tUmX7ekB7+aF7dV1a0G6pIx3CkxKmBBUreMfvS0086aTnZZf6kfG53mlN/0UnS2bW5Socz9OA737eM6JkZWu4uUiXfVcnIT34eZM6Yq9hcRKR0OpL7i9cHBi/udjrCOUuiFWsnc2/oKsfYAhXvM2lsj4S/7b2/L9y4cODDu0j8HbBzqSPvutOksqpDH+gorw1+dvHLcaEzv3r4+0BdmnBJXi9bL+G6qaEbFz98rF4sEwnKGKrrrxK3sOuzoMlM9i+ql47KPC/HX8inTxljgKUHBYI1g6qDx/HBct76XETfHF4v3hHpZwVgH9APc0TfFSyTwLZ7DJ9FYxmZvTv1h89DmBdbyHEX0rcuuTRB38fNuQ2vmw1GAYMSjv6ZwQbD0ksFlz9LPW7gMxNv3RBVtlDqz3cbWo32rmEXLGFExcsJBMnilGzk29pleT5gx8fLiq2XzyM2rllpiboEYGxF2UoD6+EntL1Ma+TkOP/LVqNJLM3yeqgayDmnjqKmIu3aNGDhlx1pqiZvyUuAqaqKGwRRwt1gnqqR0QO5ce6ms5J1ZGIWqtkxIf0QNqb7ohJjIXgFjPiYF4j38R2wbZTk1m+C/xqU9WSzv4hkgyVkcg0QvIUg0XEHleRjaK/gQb8g/a2EL8hHcky6zxC+JTQBa5c/BL4nBO1lgl+B2xJjv0QxQgnA1ZoOGhGHFNldedoShxMadKU/d4BeEEVGF3Ll5FJF+psm7Bh5xwHyDeoKeogvp7iDfpbKhyWgeIN/JSqpjbBOLtlqwq7qJNFdKGeKdQUUUEIcS7Df6iSngeQAPhtqgCWi60EElKxjUSsCFriK5nYEMuLDtoJSZk0BiaiaYsZGPlXnEqHoipIhOaKIW4WnD63xThgtP/pthHdFqfUCIRRvK/KZ+3VX1uiulc7puc3EstSOpD9d7+LYGTFfiQenyKkxE3VLLGI9iQkcH4CackzqlEwRYnJbwNlUb5ODHhBVSWHk5O+JFMLkh5qFYxLxnoPZ9BmJGRdrELNuTddNEAwhg34NSvFnvSqgth1ANpNEIZkhkYSg4dt9rHocCFXvvxWUD/ELR2TQ98hMOWon+Ks7YLrZI70iWETu6yT99Qt3uw4A4j+lY6hU4dVcloUFdR3tkA1kt29J1zHxr1SIsGNAoDnvGjMCj/CLmr3INzQj9x5sFm41Ns933c0PtNoc+O0bJNA9+Xryp14+zSL9x5PH6beS2vQrfP0exkQcMG08BdCn1SepeFc8KPijWs5MxPdzN4CipzR2nQb8wdnu0O5UKbkN7h/LQZ/a9Ms+pZNYp9kQt9Yvo9H3Yx8H15QSXm/qZUQMY0ybOCPtNKlIMuqYAogW1SKkBBoxW9SXSARoqKCGGbBRVxBY0C85V3h2mb/MrASGxIb3BnYlaxwXRmLwUMFxMc6NSlQvpM6nt5MXTylOl00JGKYTqxp6DVBb1SkECrlOmvs0HFGA7efjA0dwrLfKVC5tDLp1dpGHrGKFjm0tCZYEWvMTA0NrOBZVZUSMtoLn4I3T5RISnTZTGXJrea9BPotmU6QrqlQi6gXWx05V5MRTiwTaD/4aW5FN8y9pCJYZ2usSPBNRUzNfapNIZ1fGM7KQdUSMNYJyl6Ajh2yAKTBUYHpfCZruJ0jB3wCpVur1GSIf3G8yOPlG1ePDN46d2iJEmLR+86L4lNBRQTZXK/6UAxunMWDxC3Da6omXsoz5XiOa8/NfV9JYHRXVBXiudG8r0y9Jmzpl87oFSDFv3Qog2rDTb0Q6qJckX0K7coWTKkHxh1YLmkSz/Q6JjNKnVQOj+lnM0nMPDxmnLuPhjej5rhFLbjmP4nOF6BCXfdov8JLkPj+xcdnMjh03p3nWXLBwesuB/+GGbHXbc5wIkkSt7CwEmXU1lGbPX3OYVBt5y2Yoov9EN/QVhpJK9xZL/7P4Kw1LO8iIH7qxx8CEu5zG8pcldpQ1hrSjnBI4S9YnrpBsJiEzkIcfIkByFWUqkIcdKjb7kQdos49a3Fjv7vE4TlfPoflYAPuXoeIaw3pv+6h7CeQ/8RPYIP6XpegwGxknMtwxcqK7AgAqkhcDKkf3oAI9LE9sCDWGhf4S8M70peggnxQERTMCFcIjUDF+KOUrAhhvQANkT4dwEsPvJYWz4QAAAAAElFTkSuQmCC');
background-position: bottom right 70px;
background-repeat: no-repeat;
background-size: auto 100%;
margin: 0 auto;
max-width: 980px;
padding: 0 60px;
position: relative;
}
.adb-hero-back-icon {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.adb-hero-title {
font-size: 22px;
line-height: 28px;
padding: 24px 24px 0px 112px;
}
.adb-hero-title a {
color: #FFFFFF;
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500;
}
.adb-hero-summary {
font-size: 16px;
line-height: 24px;
padding: 8px 24px 8px 112px;
}
.adb-hero-summary a {
color: rgba(255, 255, 255, 0.9);
}
.adb-hero-description {
color: #6f7172;
font-size: 16px;
margin: 0;
max-width: 440px;
padding-bottom: 32px;
}
.adb-hero-search {
position: absolute;
top: 19.35%;
right: 1.94%;
}
.adb-hero-search .searchBox input {
border: 1px solid #80868B;
border-radius: 4px;
color: white;
}
.adb-hero-search .searchBox input::placeholder {
color: #F1F3F4;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
padding-left: 12px;
}
.adb-hero-link {
position: absolute;
right: 1.67%;
top: 64.52%;
}
.adb-hero-link a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #3DDC84;
letter-spacing: 1.4px;
}
.adb-hero-arrow {
display: inline-flex;
font-size: 24px;
vertical-align: middle;
}
.adb-socials-box {
display: flex;
position: absolute;
right: 1.67%;
}
.adb-socials-category,
.adb-socials-divider {
display: flex;
align-items: center;
}
.adb-socials-divider {
color: #DADCE0;
font-size: 40px;
font-weight: 100;
margin: 0 20px;
}
.adb-socials-category img,
.adb-footer-social-links img {
height: 24px;
}
.adb-footer-social-links-img {
margin-right: 20px;
}
.adb-hero-subscribe, .adb-hero-subscribe:visited {
background-color: #90c653;
color: #fff;
display: inline-block;
border-radius: 3px;
margin: 25px 0 60px;
padding: 13px 32px;
text-transform: uppercase;
}
.adb-hero-subscribe:hover, .adb-hero-subscribe:focus {
background-color: #333;
}
.adb-footer {
margin: 32px auto 64px;
}
.adb-footer-more {
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #f0f0f0;
padding: 30px 0;
}
.adb-footer-more a {
color: #000;
display: inline-block;
font-size: 20px;
font-weight: 300;
margin-right: 16px;
}
.adb-footer-social {
float: right;
margin-top: -62px;
}
.adb-footer-social a {
background-color: #ccc;
background-position: center;
background-repeat: no-repeat;
background-size: auto 16px;
border-radius: 50%;
display: inline-block;
height: 36px;
margin-left: 16px;
transition: background-color .1s;
width: 36px;
}
.adb-footer-social-youtube {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAQAAAAxWje/AAABLUlEQVQ4y6WUvUoDYRBFr42gCdhK8AV8BwsVC0FQfIQUgr5DIKJoGy1CfAaDq1hIGn8K2xDSaBc1wUJJEYmbkDXssdi1Mrvfst9tZ+bAzNwZSZLEAmvsUKTCBQ80eaWLyxiAMS5dXmhyT5UyBfIsM68/McM1aXRDJgCUSKsTSWQZpAa4ZMUmNtoSRxGhbd4TAI7F1eSIxBwVfAPgUtSjAJLEEk+xgLroxAEkpikyigS0RS8eIEks8hgB6ImhGSAxxS5fE9JGwksCkCRyOP/SfPFjC0jawl5UC9ZDbBvXuB+zxjezkZ5NRnJirHxmtLIjDq2O6UBsWJ3zut1D+WZWEqepAaVg0hlqqcpr4VMNbbpKngJlqtzRoMUnfTx8fDz6fNCiwS3n4VtfIRdU/gLTrSb7DGWLcQAAAABJRU5ErkJggg');
}
.adb-footer-social-youtube:hover {
background-color: #f44336;
}
.adb-footer-social-gplus {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAUCAQAAACpWpz6AAABJUlEQVQ4EZXBTUoCYQDH4X9hTS3Cja0Kyb2X6BCJoLlr1aKwK1QHCMMzWLiqTcuWXaAWQWIlU1DQh4QJ+Wt4X95x0hGn55FCeGzSpMUXXW45ocSC/oMiHUZ1KCgZZqkzyZaSoM7QgCd8BlgXLGo6ijgv7JJRgAxV3jjDUwwMOXh0sK5ZUQRZ5hQLQw4VrA/WlBCGHJpY+0oMQw5trLxCjNtTgFiij5VSiHFHChBL9LFSCjGurgCxRBsrrxA+Pj4+Pl2sQ0VgyKGJdaAYNLAqisCQQxnrk5xGkKOHlVUEhhw8HrFuWFUEaa6wLvUHhoYo4LxSZVkBlihzh7OuaagR9YzPD0PHmo5ZakzSIKVk2OCBUe/sMKPkmKfEKS16fHPPOduklcAvR50zMVwhTI4AAAAASUVORK5CYII=');
}
.adb-footer-social-gplus:hover {
background-color: #f44336;
}
.adb-footer-social-twitter {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAQAAAB0gUQ+AAABI0lEQVQ4EY3BQShDAQDH4f+zTSyJuLgoLlwclYOTHCwHu9ouiLRScpUmNwduDkpCSTs4LAeJhINoOTo4ctHkskyJtf20vWbe3tvb+z7JFUGibLHPMj0qoYEWSYzRKkdMkKbsm3m6WSRFuyQeuKNNNoTJU61ABL8kssAjvbKgiTR2V+ywJol3ijJMY+gP4zhLEpDEGWUpwvhUQgwnh/hURIT/3thjjmGWcBKViSCXeBWSiWdO+MGbPpm4watPfDIRxasLVXCANwuqwCDGK/V80akKGjnmmgLutmXFOvV80CUrAiRxNys7DCY5J4OzXdVCP7c4OcIvO5oJkSCHXZ5VDFkxwilP5HB2z6Cc0EGcF6plSTAqNxgMMEWcTTZYYYYhAqrpF0uh1zgYi1hVAAAAAElFTkSuQmCC');
}
.adb-footer-social-twitter:hover {
background-color: #55acee;
}
.adb-footer-social span {
display: none;
}
.adb-footer-related {
padding-top: 8px;
}
.adb-footer-related a {
color: #999;
font-size: 12px;
white-space: nowrap;
}
.adb-footer-related a:not(:last-child)::after {
content: '|';
cursor: default;
margin: 0 7px 0 10px;
}
.adb-footer-section {
margin: 48px auto;
max-width: 700px;
}
.adb-footer-title {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #3C4043;
margin-bottom: 24px;
}
.adb-footer-columns {
display: flex;
justify-content: space-between;
}
.adb-other-blogs-title img {
margin-right: 8px;
vertical-align: -12px;
}
.adb-footer-social-label {
display: flex !important;
align-items: center;
}
.adb-footer-column a,
.adb-footer-social-label,
#footer-subscribe .tab h2 {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
padding: .85em 0;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-btm a {
color: #000;
font-family: Android Euclid, Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.25px;
opacity: .7;
transition: opacity .1s;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-column a {
opacity: .7;
transition: opacity .1s;
}
.adb-footer-column a:hover {
opacity: 1;
}
.adb-footer-social-links {
margin: 0 0 20px;
}
#footer-subscribe .widget {
margin: 0;
}
#footer-subscribe .tab {
display: flex;
align-items: center;
}
#footer-subscribe .tab img {
height: 16px;
}
.adb-label-view-more-toggle {
cursor: pointer;
}
.adb-label-view-more-toggle::after {
content: '\00e5c5';
float: right;
font: 2em / .7 Material Icons;
opacity: .6;
}
.adb-label-view-more-toggle.active::after {
transform: rotate(180deg);
}
/** Desktop **/
@media (max-width: 900px) {
.col-right {
display: none;
}
.col-main {
margin-right: 0;
min-width: initial;
}
.cols-wrapper {
min-width: initial;
}
.adb-hero-inner {
background-image: none;
}
}
/** ADB header breakpoint **/
@media (max-width: 768px) {
.adb-header-links {
display: none;
}
.dropdown-nav {
display: none;
}
.adb-header {
padding: 12px;
text-align: center;
}
}
@media (max-width: 1196px) {
.breakpoint-hide {
display:none;
}
.more-dropdown {
height: 50px;
display: flex;
align-items: center;
}
}
@media (max-width: 915px) {
.adb-header {
height: 0;
margin: 0;
padding: 0;
display: none;
}
.adb-header-tags {
display:none;
}
.more-dropdown {
display:none;
}
.dropdown-nav {
display: none;
}
.adb-hero-summary,
.adb-hero-link,
.adb-socials-category {
display: none;
}
.adb-hero-title {
padding-left: 152px;
}
.adb-hero-logo {
height: 52px;
top: 12px;
left: 120px;
}
.adb-footer-section {
margin: 0 auto;
}
.adb-footer-btm {
margin: 0 24px 40px;
}
.adb-hero-area {
min-height: 76px;
}
.adb-burger-box {
display:inline;
position: absolute;
top: 17px;
margin-left: 24px;
font-size: 32px;
color: white;
}
.adb-hero-title a{
margin-left: 40px;
}
}
/** Tablet **/
@media (max-width: 712px) {
.header-outer, .cols-wrapper {
padding: 0 40px;
}
/* ADB */
.adb-hero-inner {
padding: 0 40px;
}
.adb-hero-title {
font-size: 16px;
padding-left: 132px;
}
.adb-hero-logo {
left: 100px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 36px;
}
.adb-other-blogs-list {
columns: auto;
}
.adb-other-blogs-title {
font-size: 20px;
}
.adb-other-blogs-title img {
height: auto;
vertical-align: -6px;
width: 32px;
}
.adb-footer-section {
margin: 0 24px;
}
.adb-footer-more {
padding-bottom: 75px;
}
.adb-footer-social {
float: none;
margin-bottom: 35px
}
.adb-footer-social .adb-footer-social-youtube {
margin-left: 0;
}
}
/** Small tablet **/
@media (max-width: 600px) {
.header-inner .google-logo {
top: 32px;
margin-top: 0;
}
.header-inner .google-logo img {
height: 56px;
width: auto;
/*
height: auto;
width: 188px;
*/
/* Override any optical adjustments at desktop size. */
top: 0 !important;
}
.header-left {
left: 0;
top: inherit;
bottom: 24px;
}
.adb-footer-columns {
display: block;
}
.adb-footer-column {
margin-bottom: 48px;
}
.adb-footer-column a {
opacity: 1;
}
.adb-footer-social-label {
padding: 0;
}
.adb-footer-column .widget a {
padding: 0;
}
.footer-newsletter {
margin-top: 16px;
}
.subscribe-btn {
width: 100%;
}
.adb-hero-search {
display: none;
}
.adb-search-box {
display:inline;
position: absolute;
top: 24px;
right: 24px;
font-size: 24px;
color: white;
}
}
/** Mobile **/
@media (max-width: 480px) {
.header-outer, .cols-wrapper {
padding: 0 16px;
}
.adb-hero-logo {
height: 28px;
top: 24px;
left: 76px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 16px;
}
.cols-wrapper {
margin-top: 0;
overflow-x: auto;
}
.post-header .publishdate, .post .post-content {
font-size: 16px;
}
.post .post-content {
line-height: 28px;
margin-bottom: 30px;
}
.post {
margin-top: 30px;
}
.byline-author {
display: block;
font-size: 12px;
line-height: 24px;
margin-top: 6px;
}
#main .post .title a {
font-weight: 500;
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
}
#main .post .post-header {
padding-bottom: 12px;
}
#main .post .post-header .published {
margin-bottom: -8px;
margin-top: 3px;
}
.post .read-more {
display: block;
margin-top: 14px;
}
.post .tr-caption {
font-size: 12px;
}
#main .post .title a {
font-size: 20px;
line-height: 30px;
}
.post-content iframe {
/* iframe won't keep aspect ratio when scaled down. */
max-height: 240px;
}
.post-content .separator img, .post-content .tr-caption-container img {
margin-left: -16px;
max-width: 100%;
}
.post-content table {
table-layout: fixed;
width: 100%;
}
/** List page tweaks. **/
.list-page .post-original {
display: none;
}
.list-page .post-summary {
display: block;
}
.list-page .comment-container {
display: none;
}
.list-page .label-footer {
display: none;
}
.list-page #main .post .post-footer {
border-bottom: 1px solid #eee;
margin: -16px 0 0 0;
padding: 0 0 20px 0;
}
.list-page .post .share {
display: none;
}
/** Detail page tweaks. **/
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 32px !important;
}
.detail-page .label-footer {
margin-bottom: 0;
}
.detail-page #main .post .post-footer {
padding-bottom: 0;
}
.detail-page #comments {
display: none;
}
/* ADB */
.adb-header-console {
display: none;
}
.adb-hero-inner {
padding: 0 16px;
}
.adb-hero-title {
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
font-weight: 500;
line-height: 30px;
padding-left: 80px;
}
}
/* Fixed-position sidebar for larger screens */
@media screen and (min-height: 700px) and (min-width: 1100px) {
.col-right .section {
max-height: calc(100vh - 197px);
overflow: auto;
}
.col-right.scroll-start {
left: 50%;
margin-left: 241px;
position: fixed;
top: 96px;
}
.col-right.scroll-end {
bottom: 485px;
position: absolute;
top: auto;
}
}
[data-about-pullquote], [data-is-preview], [data-about-syndication] {
display: none;
}
#imgFull {
display: block;
margin: 10px auto;
width: 90%;
border: 0;
padding: 0;
}
#imgHalf {
display: block;
margin: 10px auto;
width: 50%;
border: 0;
padding: 0;
}
#flexParent {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
#flexImg {
width: 90%;
margin: 0;
padding: 0;
border: 0;
}
#imgCaption {
text-align: center;
font-style: italic;
font-size: 85%;
margin: -5px 0 10px 0;
padding: 0;
border: 0;
}
#floatRight {
float: right;
width: 45%;
margin: 5px 0 5px 5px;
padding: 0;
border: 0;
}
#floatLeft {
float: left;
width: 45%;
margin: 5px 5px 5px 0;
padding: 0;
border: 0;
}
</style>
<style>
.loading {
visibility: visible;
}
</style>
</head><body>
<div class="adb-detail">
<div class="adb-detail__info">
</div>
<div class="adb-detail__title">
</div>
<hr>
<div class="adb-detail__content">
<div>
<meta content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDCgXcu5EI9w514aJNVe4C1CciGCHkKn8lWUyaa_TK-HspfRAKoKvDAiMTbGZ-Y406y9W5sn4y-SEyGFiwbNlS7EScaVTMgSOVhuq2kUBwoaMX0KqdYSIdGRHfI7zpi7nm5ciPZVlS2cdTOb_xEeWVma4KVdGt2T2DmvkNFTIuWqFpgx8Fe5maN9TCPI/s1600/Android-15-DP1-Social%20%281%29.png" name="twitter:image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDCgXcu5EI9w514aJNVe4C1CciGCHkKn8lWUyaa_TK-HspfRAKoKvDAiMTbGZ-Y406y9W5sn4y-SEyGFiwbNlS7EScaVTMgSOVhuq2kUBwoaMX0KqdYSIdGRHfI7zpi7nm5ciPZVlS2cdTOb_xEeWVma4KVdGt2T2DmvkNFTIuWqFpgx8Fe5maN9TCPI/s1600/Android-15-DP1-Social%20%281%29.png" style="display: none;">
<em> Diposting oleh <a href="https://twitter.com/davey_burke" target="_blank">Dave Burke</a>, VP of Engineering </em>
<div class="separator" style="border: 0px; clear: both; float: right; padding: 0px; width: 45%;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX98TKIsaJF7D4wnq7YBOuMjtYH-6D5Kgm7m7VbRek7cQIGN7TNVtJMDIbSiEG5KgcGyGpgGxEOz7u9v-WhQASrQrjvCQF8-RQ7PsZpA6djqK7RA7mXrnt6aYiac8voLef_mhP-s_TucPVEP1vvmUBjspmjA2RdrbvIqVwYXQJZ1fwPyamJIxXTrgMVmg/s1600/image1.png" style="display: block; padding: 1em 0px; text-align: center;"><img alt="Logo Android 14" border="0" data-original-height="512" data-original-width="512" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX98TKIsaJF7D4wnq7YBOuMjtYH-6D5Kgm7m7VbRek7cQIGN7TNVtJMDIbSiEG5KgcGyGpgGxEOz7u9v-WhQASrQrjvCQF8-RQ7PsZpA6djqK7RA7mXrnt6aYiac8voLef_mhP-s_TucPVEP1vvmUBjspmjA2RdrbvIqVwYXQJZ1fwPyamJIxXTrgMVmg/s1600/image1.png" width="320"></a></div>
<p>Kami merilis Pratinjau Developer pertama Android 15 hari ini sehingga Anda, developer, bisa berkolaborasi dengan kami untuk membangun Android yang lebih baik.</p>
<p>Android 15 melanjutkan upaya kami untuk membangun platform guna membantu meningkatkan produktivitas Anda sekaligus memberikan kemampuan baru untuk menghadirkan pengalaman media yang superior, meminimalkan dampak baterai, memaksimalkan kelancaran performa aplikasi, serta melindungi privasi dan keamanan pengguna, semuanya pada beragam perangkat yang ada di luar sana.</p>
<p>Android memungkinkan aplikasi Anda memanfaatkan hardware perangkat premium, termasuk kemampuan kamera kelas atas, GPU yang kuat, layar yang memukau, dan pemrosesan AI. Permintaan untuk perangkat layar besar, termasuk tablet, perangkat foldable, dan flippable, terus meningkat, menawarkan peluang untuk menjangkau pengguna kelas atas. Selain itu, Android berkomitmen untuk menyediakan peralatan dan library untuk membantu aplikasi Anda memanfaatkan kemajuan AI terbaru.</p>
<p>Masukan Anda terhadap Pratinjau Developer Android 15 dan program beta QPR memainkan peran penting dalam membantu perkembangan Android. <a href="https://developer.android.com/about/versions/15" target="_blank">Situs developer Android 15</a> punya banyak informasi tentang pratinjau, termasuk download untuk Pixel dan dokumentasi mendetail tentang perubahan. Pratinjau ini hanyalah permulaan, dan kami memiliki banyak hal yang akan dibagikan seiring dengan siklus rilisnya. Terima kasih sebelumnya atas bantuan Anda dalam menjadikan Android sebagai platform yang bisa digunakan oleh semua orang.</p>
<h3><span style="font-size: x-large;">Melindungi privasi dan keamanan pengguna</span></h3>
<p>Android terus berupaya menciptakan solusi untuk memaksimalkan privasi dan keamanan pengguna.</p>
<h3><span style="font-size: large;">Privacy Sandbox di Android</span></h3>
<p>Android 15 membawa Android AD Services ke ekstensi level 10, dengan menggabungkan versi terbaru <a href="https://developer.android.com/design-for-safety/privacy-sandbox" target="_blank">Privacy Sandbox di Android</a>, bagian dari upaya kami untuk mengembangkan teknologi baru guna meningkatkan privasi pengguna serta memungkinkan pengalaman periklanan yang efektif dan dipersonalisasi untuk aplikasi seluler. <a href="https://developer.android.com/design-for-safety/privacy-sandbox/program-overview" target="_blank">Situs kami punya banyak informasi</a> tentang pratinjau developer dan program beta Privacy Sandbox di Android untuk membantu Anda memulai.</p>
<h3><span style="font-size: large;">Health Connect</span></h3>
<p>Android 15 mengintegrasikan Android 14 ekstensi 10 di dalam <a href="https://developer.android.com/health-and-fitness/guides/health-connect/develop/get-started" target="_blank">Health Connect dari Android</a>, sebuah platform yang aman dan terpusat untuk mengelola serta membagikan data kesehatan dan kebugaran yang dikumpulkan aplikasi. Update ini menambahkan dukungan untuk tipe data baru dalam aspek <a href="https://developer.android.com/reference/android/health/connect/datatypes/StepsCadenceRecord#STEPS_CADENCE_RATE_AVG" target="_blank">kebugaran</a>, <a href="https://developer.android.com/reference/android/health/connect/datatypes/NutritionRecord#TRANS_FAT_TOTAL" target="_blank">nutrisi</a>, dan lainnya.</p>
<h3><span style="font-size: large;">Integritas file</span></h3>
<p><span style="font-family: Courier;"><a href="https://developer.android.com/reference/android/security/FileIntegrityManager" target="_blank">FileIntegrityManager</a></span> Android 15 menyertakan API baru yang memanfaatkan fitur <a href="https://docs.kernel.org/filesystems/fsverity.html" target="_blank">fs-verity</a> di kernel Linux. Dengan fs-verity, file bisa <a href="https://developer.android.com/reference/android/security/FileIntegrityManager#setupFsVerity%28java.io.File%29" target="_blank">dilindungi dengan penanda kriptografi khusus</a>, membantu Anda <a href="https://developer.android.com/reference/android/security/FileIntegrityManager#getFsVerityDigest%28java.io.File%29" target="_blank">memastikan bahwa file tersebut tidak diubah atau dirusak</a>. Hal ini menghasilkan peningkatan keamanan, perlindungan dari potensi malware atau modifikasi file yang tidak diotorisasi yang dapat membahayakan fungsionalitas atau data aplikasi Anda.</p>
<h3><span style="font-size: large;">Berbagi layar parsial</span></h3>
<p>Android 15 mendukung berbagi layar parsial sehingga pengguna bisa membagikan atau merekam jendela aplikasi saja, tidak seluruh layar perangkat. Fitur ini, yang aktif pertama kali di Android 14 QPR2, mencakup <span style="font-family: Courier;"><a href="https://developer.android.com/about/versions/14/features/partial-screen-sharing#media_projection_callbacks" target="_blank"> MediaProjection</a></span><a href="https://developer.android.com/about/versions/14/features/partial-screen-sharing#media_projection_callbacks" target="_blank"> callback</a> yang memungkinkan aplikasi Anda menyesuaikan pengalaman berbagi layar parsial. Perhatikan bahwa <a href="https://developer.android.com/about/versions/14/behavior-changes-14#media-projection-consent" target="_blank">persetujuan pengguna sekarang diperlukan</a> untuk setiap sesi perekaman <span style="font-family: Courier;"><a href="https://developer.android.com/reference/android/media/projection/MediaProjection" target="_blank">MediaProjection</a></span>.</p>
<h3><span style="font-size: x-large;">Mendukung kreator</span></h3>
<p>Android terus berupaya memberi Anda akses ke alat dan hardware untuk mendukung kreator mewujudkan visi mereka di Android.</p>
<h3><span style="font-size: large;">Kontrol Kamera Dalam Aplikasi</span></h3>
<p>Android 15 menambahkan ekstensi baru untuk kontrol yang lebih besar atas hardware kamera dan algoritmenya pada perangkat yang didukung:</p>
<ul><ul>
<li><b>Penyempurnaan pada kondisi minim cahaya</b> yang memberikan kontrol kepada developer untuk <a href="https://developer.android.com/reference/android/hardware/camera2/CameraCharacteristics#CONTROL_LOW_LIGHT_BOOST_INFO_LUMINANCE_RANGE" target="_blank">meningkatkan kecerahan pratinjau kamera.</a></li></ul><ul>
<li><b>Penyesuaian kekuatan lampu flash canggih</b> yang memungkinkan kontrol presisi intensitas flash dalam mode <a href="https://developer.android.com/reference/android/hardware/camera2/CameraCharacteristics#FLASH_SINGLE_STRENGTH_DEFAULT_LEVEL" target="_blank">SINGLE</a> dan <a href="https://developer.android.com/reference/android/hardware/camera2/CameraCharacteristics#FLASH_TORCH_STRENGTH_DEFAULT_LEVEL" target="_blank">TORCH</a> sewaktu mengambil gambar.</li>
</ul></ul>
<h3><span style="font-size: large;">Perangkat Virtual MIDI 2.0</span></h3>
<p>Android 13 menambahkan dukungan untuk terkoneksi ke <a href="https://developer.android.com/reference/android/media/midi/package-summary" target="_blank">perangkat MIDI 2.0 melalui USB</a>, yang berkomunikasi menggunakan Universal MIDI Packets (UMP). Android 15 memperluas <a href="https://developer.android.com/reference/android/media/midi/MidiUmpDeviceService" target="_blank">dukungan UMP ke aplikasi MIDI virtual</a>, yang memungkinkan aplikasi komposisi untuk mengontrol aplikasi synthesizer sebagai perangkat MIDI 2.0 virtual, seperti halnya pada perangkat USB MIDI 2.0.</p>
<h3><span style="font-size: x-large;">Performa dan kualitas</span></h3>
<p>Android terus berfokus untuk membantu Anda meningkatkan kualitas aplikasi. Sebagian besar fokusnya adalah peralatan dan library, termasuk <a href="https://developer.android.com/jetpack/compose" target="_blank">Jetpack Compose</a>, <a href="https://developer.android.com/studio" target="_blank">Android Studio</a>, dan lainnya.</p>
<h3><span style="font-size: large;">Performa Dinamis</span></h3>
<p>Android 15 melanjutkan investasi kami dalam <a href="https://developer.android.com/games/optimize/adpf" target="_blank">Android Dynamic Performance Framework (ADPF)</a>, kumpulan API yang memungkinkan game dan aplikasi yang intensif dalam hal performa untuk berinteraksi secara lebih langsung dengan sistem daya dan termal perangkat Android. Pada perangkat yang didukung, Android 15 akan menambahkan kemampuan ADPF baru:</p>
<ul><ul>
<li><b>Sebuah <a href="https://developer.android.com/reference/android/os/PerformanceHintManager.Session#setPreferPowerEfficiency%28boolean%29" target="_blank">mode efisiensi daya</a></b> sebagai sesi petunjuk untuk mengindikasikan bahwa thread terkait harus lebih mengutamakan penghematan daya daripada performa, sangat bagus untuk beban kerja latar belakang yang berjalan dalam waktu lama.</li></ul><ul>
<li><b>Durasi kerja GPU dan CPU</b> keduanya bisa <a href="https://developer.android.com/reference/android/os/PerformanceHintManager.Session#reportActualWorkDuration%28android.os.WorkDuration%29" target="_blank">dilaporkan</a> dalam sesi petunjuk, sehingga sistem dapat menyesuaikan frekuensi CPU dan GPU secara bersamaan untuk memenuhi permintaan beban kerja secara optimal.</li></ul><ul>
<li><b><a href="https://developer.android.com/reference/android/os/PowerManager#getThermalHeadroomThresholds%28%29" target="_blank">Ambang batas thermal headroom</a></b> untuk menginterpretasikan kemungkinan status pelambatan termal berdasarkan prediksi headroom.</li>
</ul></ul>
<p>Untuk mempelajari lebih lanjut tentang cara menggunakan ADPF dalam aplikasi dan game Anda, <a href="https://developer.android.com/games/optimize/adpf" target="_blank">silakan lihat dokumentasi</a>.</p>
<h3><span style="font-size: x-large;">Produktivitas Developer</span></h3>
<p>Android 15 terus menambahkan API OpenJDK, termasuk peningkatan kualitas <a href="https://developer.android.com/reference/java/nio/ByteBuffer#get%28int,%20byte[]%29" target="_blank">buffer NIO</a>, <a href="https://developer.android.com/reference/java/util/stream/DoubleStream.DoubleMapMultiConsumer" target="_blank">stream</a>, <a href="https://developer.android.com/reference/javax/security/auth/x500/X500PrivateCredential" target="_blank">keamanan</a>, dan banyak lagi. API ini telah diupdate di <a href="https://android-developers.googleblog.com/2023/11/the-secret-to-androids-improved-memory-latest-android-runtime-update.html" target="_blank">lebih dari satu miliar perangkat yang menjalankan Android 12+ melalui update Sistem Google Play</a>, sehingga Anda bisa menargetkan fitur pemrograman terbaru.</p>
<h3><span style="font-size: x-large;">Kompatibilitas aplikasi</span></h3>
<img><div style="text-align: center;"><img alt="Gambar linimasa Pengembangan Android 15, yang menunjukkan bahwa kami tepat waktu dengan Pratinjau Developer pada Februari" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjorrv3MG899Rr4AvPI0rRj3UrXpg_O2qDcKpCXekB11JGPO5hDJgqUvvy9aZ10eusam_4cNx8zzRb8rfCv1pRsgkSWH1yFuUTr-G97i8u4SrsBey8KzWdeJi1lUpXSq7x52hoApa2GNCnSfFjeMN4eEwFasWb1IaO8rAZFJYqY9mcC7uj1b4ncp1EQzyY/s1600/image2.png" width="100%"></div><br>
<p>Untuk memberikan Anda lebih banyak waktu untuk merencanakan pekerjaan kompatibilitas aplikasi, kami memberitahukan tahapan pencapaian Stabilitas Platform jauh sebelumnya.</p>
<p>Pada tahapan pencapaian ini kami akan memberikan API SDK/NDK final, API internal final, dan perilaku sistem yang dihadapi aplikasi. Kami berharap dapat mencapai Stabilitas Platform pada Juni 2024, dan sejak saat itu Anda memiliki waktu beberapa bulan sebelum rilis resmi untuk melakukan pengujian akhir. Detail jadwal rilis bisa dilihat <a href="https://developer.android.com/about/versions/15/overview#timeline" target="_blank">di sini</a>.</p>
<h2><span style="font-size: x-large;">Memulai dengan Android 15</span></h2>
<p>Pratinjau Developer memiliki semua yang Anda butuhkan untuk mencoba fitur Android 15, menguji aplikasi Anda, dan memberi kami masukan. Anda bisa memulainya hari ini dengan <a href="https://developer.android.com/about/versions/15/get#pixel_flash_install" target="_blank">mem-flash image sistem</a> ke perangkat seri Pixel 6, 7, atau 8, serta Pixel Fold dan Pixel Tablet. Jika tidak memiliki perangkat Pixel, Anda bisa <a href="https://developer.android.com/about/versions/15/get#on_emulator" target="_blank">menggunakan image sistem 64-bit dengan Android Emulator</a> di Android Studio.</p>
<p>Untuk pengalaman pengembangan terbaik dengan Android 15, sebaiknya gunakan <a href="https://developer.android.com/studio/preview" target="_blank">pratinjau terbaru Android Studio Jellyfish</a> (atau versi Jellyfish+ yang lebih baru). Setelah siap, berikut adalah beberapa hal yang harus Anda lakukan:</p>
<ul><ul>
<li>Mencoba fitur dan API baru – masukan Anda sangatlah penting selama periode awal pratinjau developer. Laporkan masalah dalam tracker kami di <a href="https://developer.android.com/about/versions/15/feedback" target="_blank">halaman masukan</a>.</li></ul><ul>
<li>Menguji kompatibilitas aplikasi Anda – pelajari apakah aplikasi Anda terpengaruh oleh perubahan di Android 15; instal aplikasi Anda ke perangkat atau emulator yang menjalankan Android 15 dan uji secara ekstensif.</li>
</ul></ul>
<p>Kami akan mengupdate image sistem pratinjau dan SDK secara reguler selama siklus rilis Android 15. Rilis pratinjau awal ini untuk kalangan developer saja dan tidak ditujukan untuk penggunaan sehari-hari atau pengguna umumnya, sehingga kami hanya menyediakannya melalui download manual. Setelah Anda menginstal build pratinjau secara manual, Anda akan secara otomatis mendapatkan update over the air (OTA) di masa mendatang untuk semua rilis pratinjau dan Beta selanjutnya. Baca selengkapnya <a href="https://developer.android.com/about/versions/15/overview#pixel" target="_blank">di sini</a>.</p>
<p>Jika Anda ingin berpindah dari program <a href="https://developer.android.com/about/versions/14/get-qpr" target="_blank">Android 14 QPR Beta</a> ke program Pratinjau Developer Android 15 dan tidak ingin menghapus total perangkat, kami sarankan untuk pindah ke Pratinjau Developer 1 sekarang. Jika tidak, Anda mungkin mengalami periode waktu ketika Android 14 Beta memiliki tanggal build yang lebih baru yang akan mencegah Anda membuka Pratinjau Developer Android 15 secara langsung tanpa melakukan penghapusan total data.</p>
<p>Saat mencapai rilis Beta, kami juga akan mengundang konsumen untuk mencoba Android 15, dan kami akan membuka pendaftaran untuk program Android Beta pada saat itu. Untuk saat ini, harap perhatikan bahwa program Android Beta belum tersedia untuk Android 15.</p>
<p>Untuk informasi selengkapnya, kunjungi <a href="https://developer.android.com/about/versions/15" target="_blank">situs developer Android 15</a>.</p><br>
<p><small><em>Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.</em></small></p>
</div>
<hr>
</div>
</div>
</body></html>
Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-63619169422146321562024-02-15T10:51:00.002+07:002024-03-01T10:54:33.023+07:00Membagikan roadmap Flutter 2024<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="https://medium.com/flutter/sharing-flutters-2024-roadmap-22debd2bbd22"/>
<meta name="original_url" content="https://medium.com/flutter/sharing-flutters-2024-roadmap-22debd2bbd22"/>
<style type="text/css" data-fela-rehydration="471" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}
/*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black;
}/* Gray DOCTYPE selectors like WebKit */
.xml .hljs-meta {color: #c0c0c0;
}.hljs-comment,
.hljs-quote {color: #007400;
}.hljs-tag,
.hljs-attribute,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name {color: #aa0d91;
}.hljs-variable,
.hljs-template-variable {color: #3F6E74;
}.hljs-code,
.hljs-string,
.hljs-meta .hljs-string {color: #c41a16;
}.hljs-regexp,
.hljs-link {color: #0E0EFF;
}.hljs-title,
.hljs-symbol,
.hljs-bullet,
.hljs-number {color: #1c00cf;
}.hljs-section,
.hljs-meta {color: #643820;
}.hljs-title.class_,
.hljs-class .hljs-title,
.hljs-type,
.hljs-built_in,
.hljs-params {color: #5c2699;
}.hljs-attr {color: #836C28;
}.hljs-subst {color: #000;
}.hljs-formula {background-color: #eee;font-style: italic;
}.hljs-addition {background-color: #baeeba;
}.hljs-deletion {background-color: #ffc8bd;
}.hljs-selector-id,
.hljs-selector-class {color: #9b703f;
}.hljs-doctag,
.hljs-strong {font-weight: bold;
}.hljs-emphasis {font-style: italic;
}
</style>
<style type="text/css" data-fela-rehydration="471" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style>
<style type="text/css" data-fela-rehydration="471" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{fill:rgba(0, 0, 0, 1)}.av{height:22px}.aw{margin-left:16px}.ax{border:none}.ay{border-radius:20px}.az{width:240px}.ba{background:#F9F9F9}.bb path{fill:#6B6B6B}.bd{outline:none}.be{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bf{font-size:14px}.bg{width:100%}.bh{padding:10px 20px 10px 0}.bi{background-color:transparent}.bj{color:#242424}.bk::placeholder{color:#6B6B6B}.bl{display:inline-block}.bm{margin-left:12px}.bn{margin-right:12px}.bo{border-radius:4px}.bp{margin-left:24px}.bq{height:24px}.bw{background-color:#F9F9F9}.bx{border-radius:50%}.by{height:32px}.bz{width:32px}.ca{justify-content:center}.cg{max-width:680px}.ch{min-width:0}.ci{animation:k1 1.2s ease-in-out infinite}.cj{height:100vh}.ck{margin-bottom:16px}.cl{margin-top:48px}.cm{align-items:flex-start}.cn{flex-direction:column}.co{justify-content:space-between}.cp{margin-bottom:24px}.cv{width:80%}.cw{background-color:#F2F2F2}.dc{height:44px}.dd{width:44px}.de{margin:auto 0}.df{margin-bottom:4px}.dg{height:16px}.dh{width:120px}.di{width:80px}.do{margin-bottom:8px}.dp{width:96%}.dq{width:98%}.dr{width:81%}.ds{margin-left:8px}.dt{color:#6B6B6B}.du{font-size:13px}.dv{height:100%}.eo{color:#FFFFFF}.ep{fill:#FFFFFF}.eq{background:rgba(73, 139, 209, 1)}.er{border-color:rgba(73, 139, 209, 1)}.ev:disabled{cursor:inherit !important}.ew:disabled{opacity:0.3}.ex:disabled:hover{background:rgba(73, 139, 209, 1)}.ey:disabled:hover{border-color:rgba(73, 139, 209, 1)}.ez{border-radius:99em}.fa{border-width:1px}.fb{border-style:solid}.fc{box-sizing:border-box}.fd{text-decoration:none}.fe{text-align:center}.fh{margin-right:32px}.fi{position:relative}.fj{fill:#6B6B6B}.fm{background:transparent}.fn svg{margin-left:4px}.fo svg{fill:#6B6B6B}.fq{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fr{position:absolute}.fy{margin:0 24px}.gc{background:rgba(255, 255, 255, 1)}.gd{border:1px solid #F2F2F2}.ge{box-shadow:0 1px 4px #F2F2F2}.gf{max-height:100vh}.gg{overflow-y:auto}.gh{left:0}.gi{top:calc(100vh + 100px)}.gj{bottom:calc(100vh + 100px)}.gk{width:10px}.gl{pointer-events:none}.gm{word-break:break-word}.gn{word-wrap:break-word}.go:after{display:block}.gp:after{content:""}.gq:after{clear:both}.gr{line-height:1.23}.gs{letter-spacing:0}.gt{font-style:normal}.gu{font-weight:700}.hu{@media all and (max-width: 551.98px):8px}.hv{@media all and (min-width: 552px) and (max-width: 727.98px):8px}.hw{@media all and (min-width: 728px) and (max-width: 903.98px):16px}.hx{@media all and (min-width: 904px) and (max-width: 1079.98px):16px}.hy{@media all and (min-width: 1080px):16px}.ie{align-items:baseline}.if{width:48px}.ig{height:48px}.ih{border:2px solid rgba(255, 255, 255, 1)}.ii{z-index:0}.ij{box-shadow:none}.ik{border:1px solid rgba(0, 0, 0, 0.05)}.il{margin-left:-12px}.im{width:28px}.in{height:28px}.io{z-index:1}.ip{width:24px}.iq{margin-bottom:2px}.ir{flex-wrap:nowrap}.is{font-size:16px}.it{line-height:24px}.iv{margin:0 8px}.iw{display:inline}.ix{color:rgba(73, 139, 209, 1)}.iy{fill:rgba(73, 139, 209, 1)}.jb{flex:0 0 auto}.je{flex-wrap:wrap}.jh{white-space:pre-wrap}.ji{margin-right:4px}.jj{overflow:hidden}.jk{max-height:20px}.jl{text-overflow:ellipsis}.jm{display:-webkit-box}.jn{-webkit-line-clamp:1}.jo{-webkit-box-orient:vertical}.jp{word-break:break-all}.jr{padding-left:8px}.js{padding-right:8px}.kt> *{flex-shrink:0}.ku{overflow-x:scroll}.kv::-webkit-scrollbar{display:none}.kw{scrollbar-width:none}.kx{-ms-overflow-style:none}.ky{width:74px}.kz{flex-direction:row}.lc{-webkit-user-select:none}.ld{border:0}.le{fill:rgba(117, 117, 117, 1)}.lh{outline:0}.li{user-select:none}.lj> svg{pointer-events:none}.ls{cursor:progress}.lt{margin-left:4px}.lu{margin-top:0px}.lv{opacity:1}.lw{padding:4px 0}.lz{width:16px}.mb{display:inline-flex}.mh{max-width:100%}.mi{padding:8px 2px}.mj svg{color:#6B6B6B}.na{line-height:1.58}.nb{letter-spacing:-0.004em}.nc{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.nx{margin-bottom:-0.46em}.ny{text-decoration:underline}.nz{font-style:italic}.oa{margin-left:auto}.ob{margin-right:auto}.oc{max-width:1200px}.oi{clear:both}.ok{cursor:zoom-in}.ol{z-index:auto}.on{height:auto}.oo{margin-bottom:26px}.op{margin-top:6px}.oq{margin-top:8px}.or{margin-right:8px}.os{padding:8px 16px}.ot{border-radius:100px}.ou{transition:background 300ms ease}.ow{white-space:nowrap}.ox{border-top:none}.pd{height:52px}.pe{max-height:52px}.pf{box-sizing:content-box}.pg{position:static}.pi{max-width:155px}.po{margin-right:20px}.pu{align-items:flex-end}.pv{width:76px}.pw{height:76px}.px{border:2px solid #F9F9F9}.py{height:72px}.pz{width:72px}.qa{margin-left:-16px}.qb{width:36px}.qc{height:36px}.qd{width:auto}.qe{stroke:#F2F2F2}.qf{color:#F2F2F2}.qg{fill:#F2F2F2}.qh{background:#F2F2F2}.qi{border-color:#F2F2F2}.qo{font-weight:500}.qp{font-size:24px}.qq{line-height:30px}.qr{letter-spacing:-0.016em}.qs{margin-top:16px}.qt{height:0px}.qu{border-bottom:solid 1px #E5E5E5}.ra{margin-top:72px}.rb{padding:24px 0}.rc{margin-bottom:0px}.rd{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.es:hover{background:rgba(68, 119, 175, 1)}.et:hover{border-color:rgba(68, 119, 175, 1)}.eu:hover{cursor:pointer}.fk:hover{color:#242424}.fl:hover{fill:#242424}.fp:hover svg{fill:#242424}.fs:hover{background-color:rgba(0, 0, 0, 0.1)}.iu:hover{text-decoration:underline}.iz:hover:not(:disabled){color:rgba(68, 119, 175, 1)}.ja:hover:not(:disabled){fill:rgba(68, 119, 175, 1)}.lg:hover{fill:rgba(8, 8, 8, 1)}.lx:hover{fill:#000000}.ly:hover p{color:#000000}.ma:hover{color:#000000}.mk:hover svg{color:#000000}.ov:hover{background-color:#F2F2F2}.qj:hover{background:#F2F2F2}.qk:hover{border-color:#F2F2F2}.ql:hover{cursor:wait}.qm:hover{color:#F2F2F2}.qn:hover{fill:#F2F2F2}.bc:focus-within path{fill:#242424}.lf:focus{fill:rgba(8, 8, 8, 1)}.ml:focus svg{color:#000000}.om:focus{transform:scale(1.01)}.lk:active{border-style:none}</style>
<style type="text/css" data-fela-rehydration="471" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ee{font-size:14px}.ef{line-height:20px}.el{font-size:13px}.em{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:68px}.gb{max-width:680px}.hp{font-size:42px}.hq{margin-top:1.19em}.hr{margin-bottom:32px}.hs{line-height:52px}.ht{letter-spacing:-0.011em}.id{align-items:center}.kf{border-top:solid 1px #F2F2F2}.kg{border-bottom:solid 1px #F2F2F2}.kh{margin:32px 0 0}.ki{padding:3px 8px}.kr> *{margin-right:24px}.ks> :last-child{margin-right:0}.lr{margin-top:0px}.mg{margin:0}.nt{font-size:20px}.nu{margin-top:2.14em}.nv{line-height:32px}.nw{letter-spacing:-0.003em}.oh{margin-top:56px}.pc{margin-bottom:88px}.pn{display:inline-block}.pt{padding-top:72px}.qz{margin-top:40px}</style>
<style type="text/css" data-fela-rehydration="471" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.lq{margin-top:0px}.pm{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="471" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.lp{margin-top:0px}.pl{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="471" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.ln{margin-top:0px}.lo{margin-right:0px}.pk{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="471" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.br{width:24px}.cb{margin:0 24px}.cq{height:40px}.cx{margin-bottom:44px}.dj{margin-bottom:32px}.dw{font-size:13px}.dx{line-height:20px}.eg{padding:0px 8px 1px}.ft{margin-bottom:4px}.gv{font-size:32px}.gw{margin-top:1.01em}.gx{margin-bottom:24px}.gy{line-height:38px}.gz{letter-spacing:-0.014em}.hz{align-items:flex-start}.jc{flex-direction:column}.jf{margin-bottom:2px}.jt{margin:24px -24px 0}.ju{padding:0}.kj> *{margin-right:8px}.kk> :last-child{margin-right:24px}.la{margin-left:0px}.ll{margin-top:0px}.lm{margin-right:0px}.mc{margin:0}.mm{border:1px solid #F2F2F2}.mn{border-radius:99em}.mo{padding:0px 16px 0px 12px}.mp{height:38px}.mq{align-items:center}.ms svg{margin-right:8px}.nd{font-size:18px}.ne{margin-top:1.56em}.nf{line-height:28px}.ng{letter-spacing:-0.003em}.od{margin-top:40px}.oy{margin-bottom:80px}.pj{display:inline-block}.pp{padding-top:48px}.qv{margin-top:32px}.mr:hover{border-color:#E5E5E5}</style>
<style type="text/css" data-fela-rehydration="471" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bu{width:64px}.ce{margin:0 64px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.ec{font-size:14px}.ed{line-height:20px}.ej{font-size:13px}.ek{padding:5px 12px}.ff{display:flex}.fw{margin-bottom:68px}.ga{max-width:680px}.hk{font-size:42px}.hl{margin-top:1.19em}.hm{margin-bottom:32px}.hn{line-height:52px}.ho{letter-spacing:-0.011em}.ic{align-items:center}.kb{border-top:solid 1px #F2F2F2}.kc{border-bottom:solid 1px #F2F2F2}.kd{margin:32px 0 0}.ke{padding:3px 8px}.kp> *{margin-right:24px}.kq> :last-child{margin-right:0}.mf{margin:0}.np{font-size:20px}.nq{margin-top:2.14em}.nr{line-height:32px}.ns{letter-spacing:-0.003em}.og{margin-top:56px}.pb{margin-bottom:88px}.ps{padding-top:72px}.qy{margin-top:40px}</style>
<style type="text/css" data-fela-rehydration="471" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bt{width:64px}.cd{margin:0 48px}.cs{height:48px}.cz{margin-bottom:52px}.dl{margin-bottom:48px}.ea{font-size:13px}.eb{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:68px}.fz{max-width:680px}.hf{font-size:42px}.hg{margin-top:1.19em}.hh{margin-bottom:32px}.hi{line-height:52px}.hj{letter-spacing:-0.011em}.ib{align-items:center}.jx{border-top:solid 1px #F2F2F2}.jy{border-bottom:solid 1px #F2F2F2}.jz{margin:32px 0 0}.ka{padding:3px 8px}.kn> *{margin-right:24px}.ko> :last-child{margin-right:0}.me{margin:0}.nl{font-size:20px}.nm{margin-top:2.14em}.nn{line-height:32px}.no{letter-spacing:-0.003em}.of{margin-top:56px}.pa{margin-bottom:88px}.pr{padding-top:72px}.qx{margin-top:40px}</style>
<style type="text/css" data-fela-rehydration="471" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dy{font-size:13px}.dz{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:4px}.ha{font-size:32px}.hb{margin-top:1.01em}.hc{margin-bottom:24px}.hd{line-height:38px}.he{letter-spacing:-0.014em}.ia{align-items:flex-start}.jd{flex-direction:column}.jg{margin-bottom:2px}.jv{margin:24px 0 0}.jw{padding:0}.kl> *{margin-right:8px}.km> :last-child{margin-right:8px}.lb{margin-left:0px}.md{margin:0}.mt{border:1px solid #F2F2F2}.mu{border-radius:99em}.mv{padding:0px 16px 0px 12px}.mw{height:38px}.mx{align-items:center}.mz svg{margin-right:8px}.nh{font-size:18px}.ni{margin-top:1.56em}.nj{line-height:28px}.nk{letter-spacing:-0.003em}.oe{margin-top:40px}.oz{margin-bottom:80px}.pq{padding-top:48px}.qw{margin-top:32px}.my:hover{border-color:#E5E5E5}</style>
<style type="text/css" data-fela-rehydration="471" data-fela-type="RULE" media="print">.ph{display:none}</style>
<style type="text/css" data-fela-rehydration="471" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.jq{max-height:none}</style>
<style type="text/css" data-fela-rehydration="471" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.oj{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style>
</head><body>
<article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fr gh gi gj gk gl"></div><div class="gm gn go gp gq"><div class="ab ca"><div class="ch bg fy fz ga gb"><div><div class="hu hv hw hx hy"><div class="speechify-ignore ab co"><div class="speechify-ignore bg l"><div class="hz ia ib ic id ab"><div><div class="ab ie"><a rel="noopener follow" href="/@mit.mit?source=post_page-----22debd2bbd22--------------------------------"><div><div class="bl" aria-hidden="false"><div class="l if ig bx ih ii"><div class="l fi"><img alt="Michael Thomsen" class="l fc bx dc dd cw" src="https://miro.medium.com/v2/resize:fill:88:88/0*Y_CFLc1qadgr3tPK." width="44" height="44" loading="lazy" data-testid="authorPhoto"><div class="ij bx l dc dd fr n ik fs"></div></div></div></div></div></a><a href="https://medium.com/flutter?source=post_page-----22debd2bbd22--------------------------------" rel="noopener follow"><div class="il ab fi"><div><div class="bl" aria-hidden="false"><div class="l im in bx ih io"><div class="l fi"><img alt="Flutter" class="l fc bx bq ip cw" src="https://miro.medium.com/v2/resize:fill:48:48/1*5-aoK8IBmXve5whBQM90GA.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"><div class="ij bx l bq ip fr n ik fs"></div></div></div></div></div></div></a></div></div><div class="bm bg l"><div class="ab"><div style="flex:1"><span class="be b bf z bj"><div class="iq ab q"><div class="ab q ir"><div class="ab q"><div><div class="bl" aria-hidden="false"><p class="be b is it bj"><a class="af ag ah ai aj ak al am an ao ap aq ar iu" data-testid="authorName" rel="noopener follow" href="/@mit.mit?source=post_page-----22debd2bbd22--------------------------------">Michael Thomsen</a></p></div></div></div><span class="iv iw" aria-hidden="true"><span class="be b bf z dt">·</span></span><p class="be b is it dt"><span><a class="ix iy ah ai aj ak al am an ao ap aq ar ew iz ja" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2Fa6d788faa5e5&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fsharing-flutters-2024-roadmap-22debd2bbd22&user=Michael+Thomsen&userId=a6d788faa5e5&source=post_page-a6d788faa5e5----22debd2bbd22---------------------post_header-----------">Ikuti</a></span></p></div></div></span></div></div><div class="l jb"><span class="be b bf z dt"><div class="ab cm jc jd je"><div class="jf jg ab"><div class="be b bf z dt ab jh"><span class="ji l jb">Dipublikasikan di</span><div><div class="bl" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar iu ab q" data-testid="publicationName" href="https://medium.com/flutter?source=post_page-----22debd2bbd22--------------------------------" rel="noopener follow"><p class="be b bf z jj jk jl jm jn jo jp jq bj">Flutter</p></a></div></div></div><div class="h k"><span class="iv iw" aria-hidden="true"><span class="be b bf z dt">·</span></span></div></div><span class="be b bf z dt"><div class="ab ae"><span data-testid="storyReadTime">Bacaan 1 menit</span><div class="jr js l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="be b bf z dt">·</span></span></div><span data-testid="storyPublishDate"></span></div></span></div></span></div></div></div><div class="ab co jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki"><div class="h k w ff fg q"><div class="ky l"><div class="ab q kz"><div class="pw-multi-vote-icon fi ji la lb lc"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fflutter%2F22debd2bbd22&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fsharing-flutters-2024-roadmap-22debd2bbd22&user=Michael+Thomsen&userId=a6d788faa5e5&source=-----22debd2bbd22---------------------clap_footer-----------"><div><div class="bl" aria-hidden="false"><div class="ld ao le lf lg lh am li lj lk lc"><svg width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.37.83L12 3.28l.63-2.45h-1.26zM13.92 3.95l1.52-2.1-1.18-.4-.34 2.5zM8.59 1.84l1.52 2.11-.34-2.5-1.18.4zM18.52 18.92a4.23 4.23 0 0 1-2.62 1.33l.41-.37c2.39-2.4 2.86-4.95 1.4-7.63l-.91-1.6-.8-1.67c-.25-.56-.19-.98.21-1.29a.7.7 0 0 1 .55-.13c.28.05.54.23.72.5l2.37 4.16c.97 1.62 1.14 4.23-1.33 6.7zm-11-.44l-4.15-4.15a.83.83 0 0 1 1.17-1.17l2.16 2.16a.37.37 0 0 0 .51-.52l-2.15-2.16L3.6 11.2a.83.83 0 0 1 1.17-1.17l3.43 3.44a.36.36 0 0 0 .52 0 .36.36 0 0 0 0-.52L5.29 9.51l-.97-.97a.83.83 0 0 1 0-1.16.84.84 0 0 1 1.17 0l.97.97 3.44 3.43a.36.36 0 0 0 .51 0 .37.37 0 0 0 0-.52L6.98 7.83a.82.82 0 0 1-.18-.9.82.82 0 0 1 .76-.51c.22 0 .43.09.58.24l5.8 5.79a.37.37 0 0 0 .58-.42L13.4 9.67c-.26-.56-.2-.98.2-1.29a.7.7 0 0 1 .55-.13c.28.05.55.23.73.5l2.2 3.86c1.3 2.38.87 4.59-1.29 6.75a4.65 4.65 0 0 1-4.19 1.37 7.73 7.73 0 0 1-4.07-2.25zm3.23-12.5l2.12 2.11c-.41.5-.47 1.17-.13 1.9l.22.46-3.52-3.53a.81.81 0 0 1-.1-.36c0-.23.09-.43.24-.59a.85.85 0 0 1 1.17 0zm7.36 1.7a1.86 1.86 0 0 0-1.23-.84 1.44 1.44 0 0 0-1.12.27c-.3.24-.5.55-.58.89-.25-.25-.57-.4-.91-.47-.28-.04-.56 0-.82.1l-2.18-2.18a1.56 1.56 0 0 0-2.2 0c-.2.2-.33.44-.4.7a1.56 1.56 0 0 0-2.63.75 1.6 1.6 0 0 0-2.23-.04 1.56 1.56 0 0 0 0 2.2c-.24.1-.5.24-.72.45a1.56 1.56 0 0 0 0 2.2l.52.52a1.56 1.56 0 0 0-.75 2.61L7 19a8.46 8.46 0 0 0 4.48 2.45 5.18 5.18 0 0 0 3.36-.5 4.89 4.89 0 0 0 4.2-1.51c2.75-2.77 2.54-5.74 1.43-7.59L18.1 7.68z"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l ll lm ln lo lp lq lr"><p class="be b du z dt"><span class="ls">--</span></p></div></div></div><div><div class="bl" aria-hidden="false"><button class="ao ld lv lw ab q fj lx ly" aria-label="responses"><svg width="24" height="24" viewBox="0 0 24 24" class="lu"><path d="M18 16.8a7.14 7.14 0 0 0 2.24-5.32c0-4.12-3.53-7.48-8.05-7.48C7.67 4 4 7.36 4 11.48c0 4.13 3.67 7.48 8.2 7.48a8.9 8.9 0 0 0 2.38-.32c.23.2.48.39.75.56 1.06.69 2.2 1.04 3.4 1.04.22 0 .4-.11.48-.29a.5.5 0 0 0-.04-.52 6.4 6.4 0 0 1-1.16-2.65v.02zm-3.12 1.06l-.06-.22-.32.1a8 8 0 0 1-2.3.33c-4.03 0-7.3-2.96-7.3-6.59S8.17 4.9 12.2 4.9c4 0 7.1 2.96 7.1 6.6 0 1.8-.6 3.47-2.02 4.72l-.2.16v.26l.02.3a6.74 6.74 0 0 0 .88 2.4 5.27 5.27 0 0 1-2.17-.86c-.28-.17-.72-.38-.94-.59l.01-.02z"></path></svg><p class="be b du z dt"><span class="pw-responses-count lt lu">1</span></p></button></div></div></div><div class="ab q kj kk kl km kn ko kp kq kr ks kt ku kv kw kx"><div class="lz k j i d"></div><div class="h k"><div><div class="bl" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F22debd2bbd22&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fsharing-flutters-2024-roadmap-22debd2bbd22&source=-----22debd2bbd22---------------------bookmark_footer-----------"><svg width="25" height="25" viewBox="0 0 25 25" fill="none" class="dt ma" aria-label="Add to list bookmark button"><path d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18V2.5zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .8.4l5.7-4.4 5.7 4.4a.5.5 0 0 0 .8-.4v-8.5a.5.5 0 0 0-1 0v7.48l-5.2-4a.5.5 0 0 0-.6 0l-5.2 4V7z" fill="currentColor"></path></svg></a></span></div></div></div><div class="fc mb cm"><div class="l ae"><div class="ab ca"><div class="mc md me mf mg mh ch bg"><div class="ab"><div class="bl bg" aria-hidden="false"><div><div class="bl" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fj ah ai aj ak al mi an ao ap ew mj mk ly ml mm mn mo mp s mq mr ms mt mu mv mw u mx my mz"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0zm9-10a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.38 10.42l-4.6 3.06a.5.5 0 0 1-.78-.41V8.93c0-.4.45-.63.78-.41l4.6 3.06c.3.2.3.64 0 .84z" fill="currentColor"></path></svg><div class="j i d"><p class="be b bf z dt">Dengarkan</p></div></button></div></div></div></div></div></div></div></div><div class="bl" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bl" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fj ah ai aj ak al mi an ao ap ew mj mk ly ml mm mn mo mp s mq mr ms mt mu mv mw u mx my mz"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.22 4.93a.42.42 0 0 1-.12.13h.01a.45.45 0 0 1-.29.08.52.52 0 0 1-.3-.13L12.5 3v7.07a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5V3.02l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.8a.42.42 0 0 1 .07.5zm-.1.14zm.88 2h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.14c.1.1.15.22.15.35a.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9V8.96c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1z" fill="currentColor"></path></svg><div class="j i d"><p class="be b bf z dt">Bagikan</p></div></button></div></div></div></div></div></div></div></div></div><p id="7cb9" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Sebagai proyek open source dengan komunitas yang berkembang, kami berusaha transparan mengenai semua rencana kami, mulai dari masalah hingga spesifikasi desain yang dibagikan secara terbuka. Kami mendengar banyak sekali minat terhadap roadmap fitur Flutter. Roadmap semacam ini cukup menantang dalam hal prediktabilitas, karena rencana dapat berubah dan disesuaikan sepanjang tahun, tetapi kami tetap merasa perlu membagikan rencana kami secara menyeluruh, dengan catatan: rencana mungkin berubah.</p><p id="dc07" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Kami telah memublikasikan roadmap kami <a class="af ny" href="https://github.com/flutter/flutter/wiki/%5BArchive%5D-Old-Roadmaps" rel="noopener ugc nofollow" target="_blank">sejak 2020</a>, dan <strong class="nc gu">hari ini kami membagikan</strong><a class="af ny" href="https://github.com/flutter/flutter/wiki/Roadmap" rel="noopener ugc nofollow" target="_blank"><strong class="nc gu"> roadmap 2024</strong></a>. Ini adalah kelanjutan natural dari upaya tahun-tahun sebelumnya, tetap berusaha mencapai tujuan jangka panjang kami untuk menciptakan <em class="nz">framework UI multiplatform yang paling populer, paling cepat berkembang, dan produktivitasnya tertinggi untuk membangun pengalaman aplikasi yang kaya</em>.</p><figure class="od oe of og oh oi oa ob paragraph-image"><div role="button" tabindex="0" class="oj ok fi ol bg om"><div class="oa ob oc"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/1*8v__Z0fIVOBm4uxFnMLAVg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*8v__Z0fIVOBm4uxFnMLAVg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*8v__Z0fIVOBm4uxFnMLAVg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*8v__Z0fIVOBm4uxFnMLAVg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*8v__Z0fIVOBm4uxFnMLAVg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*8v__Z0fIVOBm4uxFnMLAVg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*8v__Z0fIVOBm4uxFnMLAVg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/1*8v__Z0fIVOBm4uxFnMLAVg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*8v__Z0fIVOBm4uxFnMLAVg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*8v__Z0fIVOBm4uxFnMLAVg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*8v__Z0fIVOBm4uxFnMLAVg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*8v__Z0fIVOBm4uxFnMLAVg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*8v__Z0fIVOBm4uxFnMLAVg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*8v__Z0fIVOBm4uxFnMLAVg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg mh on c" width="700" height="467" loading="eager" role="presentation"></picture></div></div></figure><p id="f41d" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Perhatikan bahwa apa yang kami cantumkan di sini kebanyakan adalah konten yang dikumpulkan dari kami yang bekerja di Flutter sebagai karyawan Google. Saat ini, kontributor non-Google lebih banyak daripada kontributor yang dipekerjakan Google, jadi ini bukanlah daftar lengkap dari semua hal baru dan menarik yang kami harapkan akan hadir di Flutter tahun ini!</p><p id="9b47" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Kami <strong class="nc gu">sangat berterima kasih</strong> kepada komunitas dan dukungan berkelanjutan Anda. Kami tak sabar ingin segera melihat kreasi Anda!</p></div></div></div></div></section></div></div></article>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-36779035293541051062024-02-15T10:48:00.009+07:002024-03-01T10:50:27.128+07:00Gemini 1.5: Model generasi berikutnya, sekarang tersedia untuk Pratinjau Pribadi di Google AI Studio<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="http://developers.googleblog.com/2024/02/gemini-15-available-for-private-preview-in-google-ai-studio.html"/>
<meta name="original_url" content="http://developers.googleblog.com/2024/02/gemini-15-available-for-private-preview-in-google-ai-studio.html"/>
<style id="page-skin-1" type="text/css"><!--
/* MINIFIED CSS STYLES*/
body{font-family:Roboto,sans-serif;font-weight:400;font-size:16px;line-height:28px;-webkit-font-smoothing:antialiased;color:#202124}h1{font-family:Google Sans Display,sans-serif;font-size:44px;font-weight:500;line-height:61.6px}h2{font-size:30px;line-height:40px}h2,h3{font-family:Google Sans Display,sans-serif;font-weight:600}h3{font-size:24px;line-height:32px}h4{font-family:Google Sans Display,sans-serif;font-size:20px;font-weight:500;line-height:26px}h5{font-size:16px;line-height:24px}h5,h6{font-family:Google Sans Display,sans-serif;font-weight:600}h6{font-size:14px;line-height:22px}.display{font-family:Google Sans Display,sans-serif;font-size:48px;font-weight:600;line-height:67.2px}.hidden-text{height:1px;overflow:hidden;pointer-events:none;position:absolute;top:-10px;width:1px}img,video{border:0;height:auto;max-width:100%}body{position:relative;min-height:100vh}body.no-scroll{overflow:hidden}a{color:#4184f3;text-decoration:none}a:focus,a:focus-visible{outline-offset:-2px}.content-wrap{padding-top:100px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}@media only screen and (max-width:839px){.content-wrap{padding-top:32px}}.full-width{width:100%}.icon-link{border-radius:50%;height:42px;width:42px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-transition:background-color .2s linear;transition:background-color .2s linear;background:transparent;border:none}.icon-link:hover{background-color:hsla(213,7%,76%,.2)}.icon-link:focus{background-color:hsla(213,7%,76%,.26)}.icon-link:active{background-color:hsla(213,7%,76%,.32)}.dgc-container{margin:40px auto;padding:0 40px;position:relative;width:auto;max-width:1420px}@media only screen and (max-width:767px){.dgc-container{margin:24px auto;padding:0 20px}}.dgc-container--large{margin:40px auto;padding:0 40px;position:relative;width:auto}@media only screen and (max-width:767px){.dgc-container--large{margin:24px auto;padding:0 20px}}@media only screen and (min-width:1280px){.dgc-container--large{width:1200px}}.dgc-container--medium{margin:40px auto;padding:0 40px;position:relative;width:auto}@media only screen and (max-width:767px){.dgc-container--medium{margin:24px auto;padding:0 20px}}@media only screen and (min-width:1280px){.dgc-container--medium{width:844px}}@media only screen and (max-width:767px){.dgc-container--medium{padding:0 48px}}.dgc-container--narrow{margin:40px auto;padding:0 40px;position:relative;width:auto;max-width:730px}@media only screen and (max-width:767px){.dgc-container--narrow{margin:24px auto;padding:0 20px}}.dgc-container--flex-horizontal{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.section,body{margin:0}.dgc-card{padding:24px 0;position:relative;background:#fff;border:1px solid #dadce0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;margin:24px 0;padding:24px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:opacity .2s linear,-webkit-box-shadow .2s linear;transition:opacity .2s linear,-webkit-box-shadow .2s linear;transition:box-shadow .2s linear,opacity .2s linear;transition:box-shadow .2s linear,opacity .2s linear,-webkit-box-shadow .2s linear}@media only screen and (max-width:850px){.dgc-card{max-height:unset;max-width:600px;margin:24px auto}}.dgc-card:focus-within,.dgc-card:hover{-webkit-box-shadow:0 0 36px rgba(0,0,0,.1);box-shadow:0 0 36px rgba(0,0,0,.1);cursor:pointer}.dgc-card__href{height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.dgc-card__image-wrapper{overflow:hidden;position:relative;width:auto;height:200px;-webkit-flex-basis:40%;-ms-flex-preferred-size:40%;flex-basis:40%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}@media only screen and (max-width:850px){.dgc-card__image-wrapper{max-height:250px}}.dgc-card__content{padding:24px 0}.dgc-card__title{font-size:24px;line-height:33.6px;font-weight:500;font-family:Google Sans Display,sans-serif;margin-bottom:12px}.dgc-card__info{font-family:Roboto Mono,monospace;font-weight:400;font-size:12px;line-height:160%;margin-bottom:24px}.dgc-card__description{margin-bottom:48px}.dgc-card:hover .dgc-content__image-wrapper img,.dgc-card__href:focus~.dgc-content__image-wrapper img{-webkit-transform:scale(1.03);transform:scale(1.03);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease}.devsite-footer{padding:0 24px;border-top:1px solid #bdc1c6}.devsite-footer li{display:block}.devsite-footer li a{text-decoration:none;font-size:14px;line-height:16px;color:#202124}.devsite-footer li a:focus,.devsite-footer li a:hover{color:#1a73e8;outline:none}.devsite-footer-linkboxes-list{display:grid;grid-gap:24px;grid-template-columns:1fr 1fr 1fr;margin:0;padding:24px 0;border-bottom:1px solid #bdc1c6}@media only screen and (max-width:767px){.devsite-footer-linkboxes-list{grid-template-columns:1fr;padding-left:0}}.devsite-footer-linkbox{display:block}.devsite-footer-linkbox-heading{font-size:16px;line-height:26px;font-weight:400;margin:0 0 4px}.devsite-footer-linkbox ul{padding-left:0}.devsite-footer-sites-list{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}@media only screen and (max-width:767px){.devsite-footer-sites-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}}.devsite-footer-utility nav{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}@media only screen and (max-width:767px){.devsite-footer-utility nav{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}}.devsite-footer-utility-list{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding:24px 0}@media only screen and (max-width:767px){.devsite-footer-utility-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;padding:0}}.devsite-footer-utility-button{justify-self:flex-end;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;line-height:20px;margin-left:auto;padding-left:16px}.devsite-footer-utility-item{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 8px 0 0}.devsite-footer-utility-item:last-child{margin-right:0}@media only screen and (min-width:768px){.devsite-footer-utility-item:not(:first-child):before{content:"|";margin:0 8px 0 0}}.devsite-footer-sites{border-bottom:1px solid #bdc1c6;padding:24px 0 23px}.devsite-footer-sites-logo{height:32px;margin-top:5px;width:185px}.devsite-footer-sites-list{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;padding:0}.devsite-footer-sites-item{margin:0 0 0 40px}@media only screen and (max-width:767px){.devsite-footer-sites-item{margin:0}}.devsite-footer-sites-link{display:block;padding:8px 0;color:#202124}.devsite-footer-sites-link:focus,.devsite-footer-sites-link:hover{color:#1a73e8;outline:none}.devsite-footer-utility-link:focus{text-decoration:underline}.devsite-footer-utility .devsite-footer-utility-button{line-height:20px;font:400 14px/16px Roboto,sans-serif}.devsite-footer-utility .devsite-footer-utility-button:before{content:"";margin:0}@media only screen and (max-width:767px){.devsite-footer-utility .devsite-footer-utility-button{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:0;margin:18px 0 12px}}.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link{border:0;background:#1a73e8;color:#fff;line-height:36px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0 0 0 16px;border-radius:2px;-webkit-box-shadow:0 1px 2px 0;box-shadow:0 1px 2px 0;display:inline-block;font:500 14px/36px Roboto,sans-serif;height:36px;letter-spacing:0;min-width:36px;padding:0 24px;text-align:center;-webkit-transition:background-color .2s,border .2s,-webkit-box-shadow .2s;transition:background-color .2s,border .2s,-webkit-box-shadow .2s;transition:background-color .2s,border .2s,box-shadow .2s;transition:background-color .2s,border .2s,box-shadow .2s,-webkit-box-shadow .2s;vertical-align:middle;white-space:nowrap}.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link:hover{background:#1765cc}.dgc-page__title{font-family:Google Sans Display,sans-serif;font-size:44px;font-weight:500;line-height:61.6px;text-align:center;color:#202124}.dgc-container{margin-top:64px}.posts-container{display:grid;grid-template-columns:1fr 1fr 1fr;-webkit-column-gap:24px;-moz-column-gap:24px;column-gap:24px;padding:40px}@media only screen and (max-width:850px){.posts-container{grid-template-columns:1fr 1fr}}@media only screen and (max-width:480px){.posts-container{grid-template-columns:1fr}}.dgc-detail hr{border:1px solid #dadce0;margin:40px 0}.dgc-detail__title{font-family:Google Sans Display,sans-serif;font-size:48px;font-weight:600;line-height:67.2px}.dgc-detail__info{font-family:Roboto Mono,monospace;font-weight:400;font-size:12px;line-height:160%;font-size:14px}.dgc-detail__content{min-height:200px}.icon-sidebar{position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;top:0;left:-15px;width:32px;gap:20px}@media only screen and (max-width:767px){.icon-sidebar{left:-28px}}.copy-tooltip{position:fixed;bottom:16px;left:10px;z-index:100}.copy-tooltip .copy-tooltiptext{visibility:hidden;width:200px;background-color:#202124;color:#fff;text-align:center;border-radius:6px;padding:8px 16px;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}.copy-tooltip.active .copy-tooltiptext{visibility:visible;opacity:1}.header__overlay{height:100vh;left:0;position:fixed;width:100vw;border:none;background-color:rgba(0,0,0,.4);-webkit-animation:fade-in .4s cubic-bezier(.39,.575,.565,1);animation:fade-in .4s cubic-bezier(.39,.575,.565,1);opacity:0;top:0;z-index:-1;display:none}.header__overlay.show{display:block;opacity:1;z-index:800;-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}.social-icons__links{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;gap:24px}.social-icons__links path{fill:#80868b}.social-icons__container-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:100%;margin-right:14px}@media only screen and (max-width:1000px){.social-icons__container-header{display:none}}.dgc-blog-logo:focus,.dgc-blog-logo:hover{opacity:.7;text-decoration:none}.dgc-blog-logo__image{width:250px;margin-left:20px}.header{position:fixed;background:#fff;z-index:700;top:0;width:100%;overflow:hidden;-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15);box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15);height:auto}.header .top-row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding-right:24px;height:50px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid #e6e6e6}@media only screen and (max-width:839px){.header .top-row{padding:0 16px}}.header .top-row__left,.header .top-row__right{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;height:100%}.header .nav-row,.header .top-row__left,.header .top-row__right{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.header .nav-row{background:#fff;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;width:100%}.header .nav-items{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;height:50px;position:relative;background-color:#fff}@media only screen and (max-width:839px){.header .nav-items{display:none}}.header .nav-items tab{position:relative}.header .nav-items tab.active .header__nav-item:after,.header .nav-items tab:hover .header__nav-item:after{background:#1a73e8}.header .nav-items tab.active .header__nav-item,.header .nav-items tab:focus-within a{color:#202124}@media only screen and (max-width:839px){.header .header__cta,.header .nav-items{display:none}}.header__search-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin:6px 0 6px 24px;overflow:hidden;position:relative;margin-right:36px;border-radius:4px}@media only screen and (max-width:767px){.header__search-container:not(.mobile){display:none}}.header__search-container.mobile{margin:0 0 20px}.header__search-container.mobile #searchform,.header__search-container.mobile .searchbox{width:100%}.header__search-container .searchbox{border-radius:2px}.header__search-container .searchbox input{font-family:Roboto,sans-serif;font-weight:400;font-size:16px;line-height:28px;font-weight:500;color:#80868b;border:0;margin:0;height:20px;outline:0;padding:8px 8px 8px 40px;width:100%;-webkit-transition:background .2s;transition:background .2s}.header__search-container .searchbox input::-webkit-input-placeholder{color:#80868b}.header__search-container .searchbox input::-moz-placeholder{color:#80868b}.header__search-container .searchbox input::-ms-input-placeholder{color:#80868b}.header__search-container .searchbox input::placeholder{color:#80868b}.header__search-container .searchbox input:hover{background:#e8eaed}.header__search-container .material-icons{color:#80868b;left:8px;position:absolute;top:6px;-webkit-transition:color .2s;transition:color .2s}.header__cta{font-family:Google Sans Display,sans-serif;font-size:16px;font-weight:600;line-height:20px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;color:#1a73e8!important;text-decoration:none}.header__cta.mobile{padding:18px 0}.header__cta:hover .cta-icon{margin-left:0;margin-right:12px}.header__cta .cta-icon{-webkit-transition:margin-right .2s linear,margin-left .2s linear;transition:margin-right .2s linear,margin-left .2s linear;margin-left:4px;margin-right:8px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.header__cta .cta-icon path{fill:#1a73e8}.header__nav-item{font-family:Google Sans Display,sans-serif;font-size:16px;font-weight:600;line-height:24px;color:#80868b;font-weight:500;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:0 18px;height:100%;text-transform:none;text-decoration:none}.header__nav-item:hover{color:#202124}.header__nav-item.mobile{font-weight:500;padding:0}.header__nav-item:after{bottom:0;border-radius:3px 3px 0 0;content:"";display:block;height:3px;left:50%;min-width:20px;position:absolute;right:0;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:calc(100% - 24px)}.header__hamburger{border:0;background:none;outline:none;padding:0;margin:1px 8px 0 -4px;padding:8px;color:rgba(0,0,0,.65);cursor:pointer}@media only screen and (min-width:840px){.header__hamburger{display:none}}.header__side-menu{background-color:#fff;bottom:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;left:0;overflow:auto;position:fixed;top:0;-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform .2s cubic-bezier(.215,.61,.355,1);transition:-webkit-transform .2s cubic-bezier(.215,.61,.355,1);transition:transform .2s cubic-bezier(.215,.61,.355,1);transition:transform .2s cubic-bezier(.215,.61,.355,1),-webkit-transform .2s cubic-bezier(.215,.61,.355,1);z-index:900;display:none}.header__side-menu.is-open{-webkit-transform:translateX(0);transform:translateX(0);width:80%}.header__side-menu.is-open,.header__side-menu__content{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%}.header__side-menu__content{padding:18px 16px 0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.header__side-menu__content .spacer{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.header__side-menu__title{font-weight:500;margin-bottom:12px}.header__side-menu__items{list-style:none}.header__side-menu__items li{padding:12px 0}.header__side-menu__bottom{border-top:1px solid #e6e6e6}.header__side-menu__logo-container{background:#fff;height:40px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding:4px 16px;border-bottom:1px solid #e6e6e6}#nav .widget{margin:0}.featured__wrapper{width:100%;border:0;background-color:#e8f0fe;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:80px 0}@media only screen and (max-width:767px){.featured__wrapper{padding:0}}.featured__inner{max-width:1080px;width:calc(100% - 24px);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;position:relative;padding:48px}@media only screen and (min-width:768px){.featured__inner{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;padding:12px 80px}}.featured__href{height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.featured__image{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}@media only screen and (min-width:768px){.featured__image img{width:100%;max-width:500px}}@media only screen and (min-width:1280px){.featured__image img{width:500px;max-width:none}}.featured__content{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;width:100%}@media only screen and (min-width:768px){.featured__content{min-width:300px;margin-left:60px}}@media only screen and (min-width:1280px){.featured__content{margin-left:120px}}.featured__title{font-size:32px;line-height:44.8px;font-weight:500;font-family:Google Sans Display,sans-serif;margin-bottom:15px}.featured__info{font-family:Roboto Mono,monospace;font-weight:400;font-size:12px;line-height:160%;margin-bottom:24px}.featured__description{margin-bottom:48px}.preview.featured__wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:#f1f3f4;padding:64px 0 120px}.preview.featured__wrapper h1{margin:0 0 64px}.blog-label-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px}.blog-label-container .blog-label{padding:8px 20px;border:1px solid #dadce0;background-color:#fff;border-radius:4px;text-decoration:none}.blog-label-container .blog-label :focus,.blog-label-container .blog-label :hover{background-color:#e8f0fe}.blog-label-container .blog-label span{font-size:14px;line-height:20px;font-weight:500;font-family:Roboto Mono,monospace;text-align:center;color:#3c4043}#pagination-container{display:none}.pagination{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;width:100%}.pagination .page-button{font-family:Google Sans Display,sans-serif;font-size:16px;font-weight:600;line-height:24px;color:#1967d2;background-color:#e8f0fe;padding:16px 24px;border-radius:4px;text-decoration:none}.pagination .page-button:focus,.pagination .page-button:hover{background-color:#cad5fc}.pagination .page-button.disabled{color:#80868b;background-color:#f1f3f4}
--></style>
</head><body>
<div class="dgc-detail">
<div class="dgc-detail__title">
</div>
<div class="dgc-detail__info">
</div>
<hr>
<div class="dgc-detail__content dgc-container--narrow">
<div>
<meta content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkJDyVXqxkwEYO-ze0PBiId2CSuNLfS5eLMGXyzzlPQIiKAwDBO-W43FU5ev0XA6bP9p32HqlLwRq4EIUcKHsXtcZFVNdn_ATCedaNgAAACh0L7M5d6tBnRX_EUPx5MkEuqsXkPzUJDwVBXh9rqt0sJ18AjEzf7N9G7OeHpsmXA_0WkPIGl0XKVt5x7lc/s1600/Gemini-Pro-Social.png" name="twitter:image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkJDyVXqxkwEYO-ze0PBiId2CSuNLfS5eLMGXyzzlPQIiKAwDBO-W43FU5ev0XA6bP9p32HqlLwRq4EIUcKHsXtcZFVNdn_ATCedaNgAAACh0L7M5d6tBnRX_EUPx5MkEuqsXkPzUJDwVBXh9rqt0sJ18AjEzf7N9G7OeHpsmXA_0WkPIGl0XKVt5x7lc/s1600/Gemini-Pro-Social.png" style="display: none;">
<em>Diposting oleh Jaclyn Konzelmann dan Wiktor Gworek – Google Labs</em>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDPAk6bwZdndo7lMEgewx_I2L7rRSqmGvgpxqQnz19k8JJE2rg9k6h5y-pKyHPrFDc7zyKMpQbtsVnYdlzzJMFgxEB1Y6dT_MNLSU_xL9-ZxG7jNhDjqM7BNvSbeNqZn55Y7oJEiVrZ4Uu6JlsiD-d89HKpist6ekZPBW-_5DNYmPwUdOUdOKO3Xb3myo/s1600/Gemini-Pro-GfD.png"><img border="0" data-original-height="800" data-original-width="1058" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDPAk6bwZdndo7lMEgewx_I2L7rRSqmGvgpxqQnz19k8JJE2rg9k6h5y-pKyHPrFDc7zyKMpQbtsVnYdlzzJMFgxEB1Y6dT_MNLSU_xL9-ZxG7jNhDjqM7BNvSbeNqZn55Y7oJEiVrZ4Uu6JlsiD-d89HKpist6ekZPBW-_5DNYmPwUdOUdOKO3Xb3myo/s1600/Gemini-Pro-GfD.png"></a> <a name="more"></a><p></p>
<p>Minggu lalu, kami <a href="https://blog.google/technology/ai/google-gemini-update-sundar-pichai-2024/" target="_blank">merilis</a> Gemini 1.0 Ultra di Gemini Advanced. Anda bisa mencobanya sekarang dengan mendaftar <a href="http://gemini.google.com/advanced" target="_blank">langganan Gemini Advanced</a>. Model 1.0 Ultra, yang dapat diakses melalui Gemini API, telah menarik banyak minat dan terus meluncur ke developer dan mitra terpilih di <a href="https://aistudio.google.com/?utm_source=agd&utm_medium=referral&utm_campaign=blog-feb&utm_content=1" target="_blank">Google AI Studio</a>.</p>
<p>Hari ini, kami juga sangat senang bisa memperkenalkan <a href="https://blog.google/technology/ai/google-gemini-next-generation-model-february-2024?utm_source=devblog&utm_medium=referral&utm_campaign=gemini24&utm_content=" target="_blank">model Gemini 1.5</a> generasi berikutnya, yang menggunakan pendekatan Mixture-of-Experts (MoE) untuk meningkatkan efisiensi. Model ini mengarahkan permintaan Anda ke kumpulan neural network "ahli" yang lebih kecil sehingga responsnya lebih cepat dan lebih berkualitas.</p>
<p>Developer bisa <a href="https://aistudio.google.com/app/waitlist/97445851?utm_source=agd&utm_medium=referral&utm_campaign=blog-feb&utm_content=" target="_blank">mendaftar untuk mendapatkan Pratinjau Pribadi</a> <b>Gemini 1.5 Pro</b>, model multimodal berukuran sedang yang dioptimalkan untuk penskalaan di berbagai macam tugas. Model ini memiliki fitur jendela konteks eksperimental 1 juta token baru, dan dapat dicoba di <a href="https://aistudio.google.com/app/prompts/new_chat/?utm_source=agd&utm_medium=referral&utm_campaign=blog-feb&utm_content=" target="_blank">Google AI Studio</a>. Google AI Studio adalah cara tercepat untuk membangun dengan model Gemini dan memungkinkan developer untuk dengan mudah mengintegrasikan <a href="https://ai.google.dev/?utm_source=agd&utm_medium=referral&utm_campaign=blog-feb&utm_content=" target="_blank">Gemini API</a> dalam aplikasi mereka. Tersedia dalam 38 bahasa di <a href="https://ai.google.dev/available_regions?utm_source=agd&utm_medium=referral&utm_campaign=blog-feb&utm_content=" target="_blank">180+ negara dan wilayah</a>.</p><br>
<h3>1.000.000 token: Membuka kasus penggunaan baru untuk developer</h3>
<p>Sebelumnya, jendela konteks terbesar di dunia untuk model bahasa besar yang tersedia untuk umum adalah 200.000 token. Kami mampu meningkatkannya secara signifikan — menjalankan hingga 1 juta token secara konsisten, mencapai jendela konteks terpanjang dari semua model dasar berskala besar. Gemini 1.5 Pro akan hadir dengan jendela konteks 128.000 token secara default, tetapi Pratinjau Pribadi hari ini akan memiliki akses ke jendela konteks eksperimental 1 juta token.</p>
<p>Kami sangat antusias dengan berbagai kemungkinan baru berkat jendela konteks yang lebih besar. Anda bisa langsung mengupload PDF berukuran besar, repositori kode, atau bahkan video panjang sesuai prompt di Google AI Studio. Gemini 1.5 Pro kemudian akan melakukan penalaran terhadap modalitas dan teks output.</p>
<ol><blockquote>
<h4><li>Upload beberapa file dan ajukan pertanyaan</li></h4>
<p>Kami telah menambahkan kemampuan bagi developer untuk mengupload beberapa file, seperti PDF, dan mengajukan pertanyaan di Google AI Studio. Jendela konteks yang lebih besar memungkinkan model mengambil lebih banyak informasi — membuat output lebih konsisten, relevan, dan berguna. Dengan jendela konteks 1 juta token ini, kita dapat memuat lebih dari 700.000 kata sekaligus.</p>
<img><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><img alt="gambar bergerak yang menunjukkan bagaimana Gemini 1.5 Pro bisa menemukan dan melakukan penalaran dari kutipan tertentu dalam transkrip PDF Apollo 11." border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-MQwDZRdl4zvboMACxPkNNN6hkQbxt5SBb7I5u2f02d9Jz93Ht4DBvH_hR886cXo0ok1ybKhkFsLy7qZmTpDD3UxEw4oFpYp0Q3FRxL6v_mVRZp9aHtjzPJ9CjRGlls0a0tyWlgPg8-N_ZeerdJ440_WpyLMeGhBwlwFslL62wDNjDYlA88MX1JkRK4w/s1600/Apollo_version1.gif" style="margin-left: auto; margin-right: auto; margins: auto; width: auto;"></td></tr><tr><td class="tr-caption"><i><div style="text-align: center;"><i>Gemini 1.5 Pro bisa menemukan dan melakukan penalaran dari kutipan tertentu dalam transkrip PDF Apollo 11. <blockquote>[Video dipercepat untuk tujuan demo]
</blockquote></i><blockquote><i></i></blockquote></div></i></td></tr></tbody></table><br>
<h4><li>Kueri seluruh repositori kode</li></h4>
<p>Jendela konteks yang besar juga memungkinkan analisis mendalam terhadap seluruh codebase, membantu model Gemini memahami hubungan, pola, dan pemahaman kode yang kompleks. Developer bisa mengupload codebase baru langsung dari komputer mereka atau melalui Google Drive, dan menggunakan model ini untuk berlatih dengan cepat dan mendapatkan pemahaman tentang kode tersebut.</p>
<img><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><img alt="gambar bergerak yang menunjukkan bagaimana Gemini 1.5 Pro bisa membantu developer meningkatkan produktivitas saat mempelajari codebase baru." border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaALQHZgZ-xNH7xRX30K_3ObGnE5DvzE3Er1WdmdsPudNCJgWsNoSOxtMOgeUQdWJeloSdlx-qErNOmMti_ECWmTW9JcynN60XK5CSo7MdmiF_MZFv7zUOWyAgmTmBUxbD5yTiGsxjwgj3o0hQg8iOFMubpq2araxQq3zoyJqS8jCUyK6BuyLXbM67oeo/s1600/image2.gif" style="margins: auto; width: auto;"></td></tr><tr><td class="tr-caption" style="text-align: center;"><em>Gemini 1.5 Pro bisa membantu developer meningkatkan produktivitas saat mempelajari codebase baru. <blockquote>[Video dipercepat untuk tujuan demo]</blockquote><blockquote></blockquote></em></td></tr></tbody></table><br>
<h4><li>Tambahkan video berdurasi penuh</li></h4>
<p>Gemini 1.5 Pro juga bisa melakukan penalaran hingga 1 jam video. Saat Anda melampirkan video, Google AI Studio memecahnya menjadi ribuan bingkai (tanpa audio), kemudian Anda bisa melakukan tugas penalaran dan pemecahan masalah yang sangat canggih karena model Gemini bersifat multimodal.</p>
<img><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><img alt="gambar bergerak yang menunjukkan bagaimana Gemini 1.5 Pro bisa melakukan tugas penalaran dan pemecahan masalah pada video dan input visual lainnya." border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhaYHSlDsZ1v8zPEN0GAtVbji1WjAj7Yc-Wm3WfaL13oBlHOsZd5p4vUYd-Blq0FGJFThqrS8svCS3CriX8Yi8oZ6HVGSqeg4d321GwmPTgiER7liX0wGFgfYhoflyliXLFc_2CBNSaRIDBxVBZBCgz6oKjwuxVNOh8b6T7Dl132ZE3DlyLpncsY787ZI/s1600/image3.gif" style="margins: auto; width: auto;"></td></tr><tr><td class="tr-caption" style="text-align: center;"><em>Gemini 1.5 Pro bisa melakukan tugas penalaran dan pemecahan masalah pada video dan input visual lainnya. <blockquote>[Video dipercepat untuk tujuan demo]</blockquote><blockquote></blockquote></em></td></tr></tbody></table>
</blockquote></ol><br>
<h3>Lebih banyak cara bagi developer untuk membangun dengan model Gemini</h3>
<p>Selain menghadirkan inovasi model terbaru, kami juga memudahkan Anda untuk membangun dengan Gemini:</p>
<ul><blockquote>
<li><b>Penyesuaian mudah.</b> Berikan serangkaian contoh, dan Anda bisa menyesuaikan Gemini untuk kebutuhan khusus Anda dalam hitungan menit dari dalam Google AI Studio. Fitur ini akan diluncurkan dalam beberapa hari ke depan. </li></blockquote><blockquote>
<li><b>Platform developer baru</b>. Integrasikan Gemini API untuk membangun fitur baru berteknologi AI sekarang juga dengan <a href="https://firebase.blog/posts/2024/02/supercharge-apps-firebase-gemini" target="_blank">Firebase Extensions baru</a>, dalam ruang kerja pengembangan Anda di <a href="https://idx.dev/blog/article/build-with-gemini-in-idx" target="_blank">Project IDX</a>, atau dengan <a href="https://medium.com/flutter/harness-gemini-in-your-dart-and-flutter-apps-00573e560381" target="_blank">Google AI Dart SDK</a> yang baru saja dirilis. </li></blockquote><blockquote>
<li><b><a href="https://ai.google.dev/pricing" target="_blank">Harga yang lebih rendah untuk Gemini 1.0 Pro</a>.</b> Kami juga mengupdate model 1.0 Pro, yang menawarkan keseimbangan yang baik antara biaya dan performa untuk banyak tugas AI. Versi stabil saat ini dibanderol 50% lebih murah untuk input teks dan 25% lebih murah untuk output daripada yang diumumkan sebelumnya. Paket pay-as-you-go untuk AI Studio juga akan segera hadir.</li>
</blockquote></ul><br>
<p>Sejak Desember, semua developer dari kecil hingga besar telah membangun dengan model Gemini, dan kami sangat antusias mengubah penelitian tercanggih ini menjadi produk developer awal di <a href="https://aistudio.google.com/app/prompts/new_chat/?utm_source=agd&utm_medium=referral&utm_campaign=blog-feb&utm_content=" target="_blank">Google AI Studio</a>. Mungkin terdapat beberapa latensi dalam versi pratinjau ini karena sifat eksperimental dari fitur jendela konteks yang besar, tetapi kami sangat antusias untuk memulai peluncuran secara bertahap sembari terus menyempurnakan model dan mendapatkan masukan Anda. Kami harap Anda senang bereksperimen dengan model ini sejak awal, seperti yang kami lakukan.</p>
</div>
<hr>
</div>
</div>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-62379081575215838372024-02-15T10:36:00.004+07:002024-03-01T10:40:06.324+07:00Yang baru di Flutter 3.19<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="https://medium.com/flutter/whats-new-in-flutter-3-19-58b1aae242d2"/>
<meta name="original_url" content="https://medium.com/flutter/whats-new-in-flutter-3-19-58b1aae242d2"/>
<style type="text/css" data-fela-rehydration="554" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}
/*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black;
}/* Gray DOCTYPE selectors like WebKit */
.xml .hljs-meta {color: #c0c0c0;
}.hljs-comment,
.hljs-quote {color: #007400;
}.hljs-tag,
.hljs-attribute,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name {color: #aa0d91;
}.hljs-variable,
.hljs-template-variable {color: #3F6E74;
}.hljs-code,
.hljs-string,
.hljs-meta .hljs-string {color: #c41a16;
}.hljs-regexp,
.hljs-link {color: #0E0EFF;
}.hljs-title,
.hljs-symbol,
.hljs-bullet,
.hljs-number {color: #1c00cf;
}.hljs-section,
.hljs-meta {color: #643820;
}.hljs-title.class_,
.hljs-class .hljs-title,
.hljs-type,
.hljs-built_in,
.hljs-params {color: #5c2699;
}.hljs-attr {color: #836C28;
}.hljs-subst {color: #000;
}.hljs-formula {background-color: #eee;font-style: italic;
}.hljs-addition {background-color: #baeeba;
}.hljs-deletion {background-color: #ffc8bd;
}.hljs-selector-id,
.hljs-selector-class {color: #9b703f;
}.hljs-doctag,
.hljs-strong {font-weight: bold;
}.hljs-emphasis {font-style: italic;
}
</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{fill:rgba(0, 0, 0, 1)}.av{height:22px}.aw{margin-left:16px}.ax{border:none}.ay{border-radius:20px}.az{width:240px}.ba{background:#F9F9F9}.bb path{fill:#6B6B6B}.bd{outline:none}.be{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bf{font-size:14px}.bg{width:100%}.bh{padding:10px 20px 10px 0}.bi{background-color:transparent}.bj{color:#242424}.bk::placeholder{color:#6B6B6B}.bl{display:inline-block}.bm{margin-left:12px}.bn{margin-right:12px}.bo{border-radius:4px}.bp{margin-left:24px}.bq{height:24px}.bw{background-color:#F9F9F9}.bx{border-radius:50%}.by{height:32px}.bz{width:32px}.ca{justify-content:center}.cg{max-width:680px}.ch{min-width:0}.ci{animation:k1 1.2s ease-in-out infinite}.cj{height:100vh}.ck{margin-bottom:16px}.cl{margin-top:48px}.cm{align-items:flex-start}.cn{flex-direction:column}.co{justify-content:space-between}.cp{margin-bottom:24px}.cv{width:80%}.cw{background-color:#F2F2F2}.dc{height:44px}.dd{width:44px}.de{margin:auto 0}.df{margin-bottom:4px}.dg{height:16px}.dh{width:120px}.di{width:80px}.do{margin-bottom:8px}.dp{width:96%}.dq{width:98%}.dr{width:81%}.ds{margin-left:8px}.dt{color:#6B6B6B}.du{font-size:13px}.dv{height:100%}.eo{color:#FFFFFF}.ep{fill:#FFFFFF}.eq{background:rgba(73, 139, 209, 1)}.er{border-color:rgba(73, 139, 209, 1)}.ev:disabled{cursor:inherit !important}.ew:disabled{opacity:0.3}.ex:disabled:hover{background:rgba(73, 139, 209, 1)}.ey:disabled:hover{border-color:rgba(73, 139, 209, 1)}.ez{border-radius:99em}.fa{border-width:1px}.fb{border-style:solid}.fc{box-sizing:border-box}.fd{text-decoration:none}.fe{text-align:center}.fh{margin-right:32px}.fi{position:relative}.fj{fill:#6B6B6B}.fm{background:transparent}.fn svg{margin-left:4px}.fo svg{fill:#6B6B6B}.fq{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fr{position:absolute}.fy{margin:0 24px}.gc{background:rgba(255, 255, 255, 1)}.gd{border:1px solid #F2F2F2}.ge{box-shadow:0 1px 4px #F2F2F2}.gf{max-height:100vh}.gg{overflow-y:auto}.gh{left:0}.gi{top:calc(100vh + 100px)}.gj{bottom:calc(100vh + 100px)}.gk{width:10px}.gl{pointer-events:none}.gm{word-break:break-word}.gn{word-wrap:break-word}.go:after{display:block}.gp:after{content:""}.gq:after{clear:both}.gr{clear:both}.ha{margin-left:auto}.hb{margin-right:auto}.hc{max-width:1280px}.hi{padding-top:5px}.hj{padding-bottom:5px}.hl{cursor:zoom-in}.hm{z-index:auto}.ho{max-width:100%}.hp{height:auto}.hq{line-height:1.23}.hr{letter-spacing:0}.hs{font-style:normal}.ht{font-weight:700}.io{margin-bottom:-0.27em}.ip{line-height:1.394}.jf{@media all and (max-width: 551.98px):8px}.jg{@media all and (min-width: 552px) and (max-width: 727.98px):8px}.jh{@media all and (min-width: 728px) and (max-width: 903.98px):16px}.ji{@media all and (min-width: 904px) and (max-width: 1079.98px):16px}.jj{@media all and (min-width: 1080px):16px}.jp{align-items:baseline}.jq{width:48px}.jr{height:48px}.js{border:2px solid rgba(255, 255, 255, 1)}.jt{z-index:0}.ju{box-shadow:none}.jv{border:1px solid rgba(0, 0, 0, 0.05)}.jw{margin-left:-12px}.jx{width:28px}.jy{height:28px}.jz{z-index:1}.ka{width:24px}.kb{margin-bottom:2px}.kc{flex-wrap:nowrap}.kd{font-size:16px}.ke{line-height:24px}.kg{margin:0 8px}.kh{display:inline}.ki{color:rgba(73, 139, 209, 1)}.kj{fill:rgba(73, 139, 209, 1)}.km{flex:0 0 auto}.kp{flex-wrap:wrap}.ks{white-space:pre-wrap}.kt{margin-right:4px}.ku{overflow:hidden}.kv{max-height:20px}.kw{text-overflow:ellipsis}.kx{display:-webkit-box}.ky{-webkit-line-clamp:1}.kz{-webkit-box-orient:vertical}.la{word-break:break-all}.lc{padding-left:8px}.ld{padding-right:8px}.me> *{flex-shrink:0}.mf{overflow-x:scroll}.mg::-webkit-scrollbar{display:none}.mh{scrollbar-width:none}.mi{-ms-overflow-style:none}.mj{width:74px}.mk{flex-direction:row}.mn{-webkit-user-select:none}.mo{border:0}.mp{fill:rgba(117, 117, 117, 1)}.ms{outline:0}.mt{user-select:none}.mu> svg{pointer-events:none}.nd{cursor:progress}.ne{margin-left:4px}.nf{margin-top:0px}.ng{opacity:1}.nh{padding:4px 0}.nk{width:16px}.nm{display:inline-flex}.np{padding:8px 2px}.nq svg{color:#6B6B6B}.oh{line-height:1.58}.oi{letter-spacing:-0.004em}.oj{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.pc{margin-bottom:-0.46em}.pd{line-height:1.12}.pe{letter-spacing:-0.022em}.pf{font-weight:600}.py{margin-bottom:-0.28em}.pz{line-height:1.18}.qn{margin-bottom:-0.31em}.qt{padding:2px 4px}.qu{font-size:75%}.qv> strong{font-family:inherit}.qw{font-family:source-code-pro, Menlo, Monaco, "Courier New", Courier, monospace}.qx{text-decoration:underline}.qy{max-width:1600px}.re{max-width:1108px}.rf{overflow-x:auto}.rg{padding:32px}.rh{border:1px solid #E5E5E5}.ri{line-height:1.4}.rj{margin-top:-0.2em}.rk{margin-bottom:-0.2em}.rl{white-space:pre}.rm{min-width:fit-content}.rn{max-width:1008px}.ro{max-width:798px}.rp{list-style-type:disc}.rq{margin-left:30px}.rr{padding-left:0px}.rx{max-width:752px}.ry{margin-bottom:26px}.rz{margin-top:6px}.sa{margin-top:8px}.sb{margin-right:8px}.sc{padding:8px 16px}.sd{border-radius:100px}.se{transition:background 300ms ease}.sg{white-space:nowrap}.sh{border-top:none}.sn{height:52px}.so{max-height:52px}.sp{box-sizing:content-box}.sq{position:static}.ss{max-width:155px}.sy{margin-right:20px}.te{align-items:flex-end}.tf{width:76px}.tg{height:76px}.th{border:2px solid #F9F9F9}.ti{height:72px}.tj{width:72px}.tk{margin-left:-16px}.tl{width:36px}.tm{height:36px}.tn{width:auto}.to{stroke:#F2F2F2}.tp{color:#F2F2F2}.tq{fill:#F2F2F2}.tr{background:#F2F2F2}.ts{border-color:#F2F2F2}.ty{font-weight:500}.tz{font-size:24px}.ua{line-height:30px}.ub{letter-spacing:-0.016em}.uc{margin-top:16px}.ud{height:0px}.ue{border-bottom:solid 1px #E5E5E5}.uf{margin-top:72px}.ug{padding:24px 0}.uh{margin-bottom:0px}.ui{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.es:hover{background:rgba(68, 119, 175, 1)}.et:hover{border-color:rgba(68, 119, 175, 1)}.eu:hover{cursor:pointer}.fk:hover{color:#242424}.fl:hover{fill:#242424}.fp:hover svg{fill:#242424}.fs:hover{background-color:rgba(0, 0, 0, 0.1)}.kf:hover{text-decoration:underline}.kk:hover:not(:disabled){color:rgba(68, 119, 175, 1)}.kl:hover:not(:disabled){fill:rgba(68, 119, 175, 1)}.mr:hover{fill:rgba(8, 8, 8, 1)}.ni:hover{fill:#000000}.nj:hover p{color:#000000}.nl:hover{color:#000000}.nr:hover svg{color:#000000}.sf:hover{background-color:#F2F2F2}.tt:hover{background:#F2F2F2}.tu:hover{border-color:#F2F2F2}.tv:hover{cursor:wait}.tw:hover{color:#F2F2F2}.tx:hover{fill:#F2F2F2}.bc:focus-within path{fill:#242424}.hn:focus{transform:scale(1.01)}.mq:focus{fill:rgba(8, 8, 8, 1)}.ns:focus svg{color:#000000}.mv:active{border-style:none}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ee{font-size:14px}.ef{line-height:20px}.el{font-size:13px}.em{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:68px}.gb{max-width:680px}.gz{max-width:1192px}.hh{margin-top:40px}.ik{font-size:42px}.il{margin-top:1em}.im{line-height:52px}.in{letter-spacing:-0.011em}.jc{font-size:22px}.jd{margin-top:0.92em}.je{line-height:28px}.jo{align-items:center}.lq{border-top:solid 1px #F2F2F2}.lr{border-bottom:solid 1px #F2F2F2}.ls{margin:32px 0 0}.lt{padding:3px 8px}.mc> *{margin-right:24px}.md> :last-child{margin-right:0}.nc{margin-top:0px}.no{margin:0}.oy{font-size:20px}.oz{margin-top:2.14em}.pa{line-height:32px}.pb{letter-spacing:-0.003em}.pu{font-size:24px}.pv{margin-top:1.95em}.pw{line-height:30px}.px{letter-spacing:-0.016em}.qk{margin-top:1.72em}.ql{line-height:24px}.qm{letter-spacing:0}.qs{margin-top:0.94em}.rd{margin-top:56px}.rw{margin-top:1.14em}.sm{margin-bottom:88px}.sx{display:inline-block}.td{padding-top:72px}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.nb{margin-top:0px}.sw{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.na{margin-top:0px}.sv{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.my{margin-top:0px}.mz{margin-right:0px}.su{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.br{width:24px}.cb{margin:0 24px}.cq{height:40px}.cx{margin-bottom:44px}.dj{margin-bottom:32px}.dw{font-size:13px}.dx{line-height:20px}.eg{padding:0px 8px 1px}.ft{margin-bottom:4px}.gs{margin:0}.gt{max-width:100%}.hd{margin-top:32px}.hu{font-size:32px}.hv{margin-top:1.01em}.hw{line-height:38px}.hx{letter-spacing:-0.014em}.iq{font-size:18px}.ir{margin-top:0.79em}.is{line-height:24px}.jk{align-items:flex-start}.kn{flex-direction:column}.kq{margin-bottom:2px}.le{margin:24px -24px 0}.lf{padding:0}.lu> *{margin-right:8px}.lv> :last-child{margin-right:24px}.ml{margin-left:0px}.mw{margin-top:0px}.mx{margin-right:0px}.nt{border:1px solid #F2F2F2}.nu{border-radius:99em}.nv{padding:0px 16px 0px 12px}.nw{height:38px}.nx{align-items:center}.nz svg{margin-right:8px}.ok{margin-top:1.56em}.ol{line-height:28px}.om{letter-spacing:-0.003em}.pg{font-size:20px}.ph{margin-top:1.2em}.pi{letter-spacing:0}.qa{font-size:16px}.qb{margin-top:1.23em}.qo{margin-top:0.67em}.qz{margin-top:40px}.rs{margin-top:1.34em}.si{margin-bottom:80px}.st{display:inline-block}.sz{padding-top:48px}.ny:hover{border-color:#E5E5E5}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bu{width:64px}.ce{margin:0 64px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.ec{font-size:14px}.ed{line-height:20px}.ej{font-size:13px}.ek{padding:5px 12px}.ff{display:flex}.fw{margin-bottom:68px}.ga{max-width:680px}.gy{max-width:1192px}.hg{margin-top:40px}.ig{font-size:42px}.ih{margin-top:1em}.ii{line-height:52px}.ij{letter-spacing:-0.011em}.iz{font-size:22px}.ja{margin-top:0.92em}.jb{line-height:28px}.jn{align-items:center}.lm{border-top:solid 1px #F2F2F2}.ln{border-bottom:solid 1px #F2F2F2}.lo{margin:32px 0 0}.lp{padding:3px 8px}.ma> *{margin-right:24px}.mb> :last-child{margin-right:0}.nn{margin:0}.ou{font-size:20px}.ov{margin-top:2.14em}.ow{line-height:32px}.ox{letter-spacing:-0.003em}.pq{font-size:24px}.pr{margin-top:1.95em}.ps{line-height:30px}.pt{letter-spacing:-0.016em}.qh{margin-top:1.72em}.qi{line-height:24px}.qj{letter-spacing:0}.qr{margin-top:0.94em}.rc{margin-top:56px}.rv{margin-top:1.14em}.sl{margin-bottom:88px}.tc{padding-top:72px}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bt{width:64px}.cd{margin:0 48px}.cs{height:48px}.cz{margin-bottom:52px}.dl{margin-bottom:48px}.ea{font-size:13px}.eb{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:68px}.fz{max-width:680px}.gw{margin:0}.gx{max-width:100%}.hf{margin-top:40px}.ic{font-size:42px}.id{margin-top:1em}.ie{line-height:52px}.if{letter-spacing:-0.011em}.iw{font-size:22px}.ix{margin-top:0.92em}.iy{line-height:28px}.jm{align-items:center}.li{border-top:solid 1px #F2F2F2}.lj{border-bottom:solid 1px #F2F2F2}.lk{margin:32px 0 0}.ll{padding:3px 8px}.ly> *{margin-right:24px}.lz> :last-child{margin-right:0}.oq{font-size:20px}.or{margin-top:2.14em}.os{line-height:32px}.ot{letter-spacing:-0.003em}.pm{font-size:24px}.pn{margin-top:1.95em}.po{line-height:30px}.pp{letter-spacing:-0.016em}.qe{margin-top:1.72em}.qf{line-height:24px}.qg{letter-spacing:0}.qq{margin-top:0.94em}.rb{margin-top:56px}.ru{margin-top:1.14em}.sk{margin-bottom:88px}.tb{padding-top:72px}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dy{font-size:13px}.dz{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:4px}.gu{margin:0}.gv{max-width:100%}.he{margin-top:32px}.hy{font-size:32px}.hz{margin-top:1.01em}.ia{line-height:38px}.ib{letter-spacing:-0.014em}.it{font-size:18px}.iu{margin-top:0.79em}.iv{line-height:24px}.jl{align-items:flex-start}.ko{flex-direction:column}.kr{margin-bottom:2px}.lg{margin:24px 0 0}.lh{padding:0}.lw> *{margin-right:8px}.lx> :last-child{margin-right:8px}.mm{margin-left:0px}.oa{border:1px solid #F2F2F2}.ob{border-radius:99em}.oc{padding:0px 16px 0px 12px}.od{height:38px}.oe{align-items:center}.og svg{margin-right:8px}.on{margin-top:1.56em}.oo{line-height:28px}.op{letter-spacing:-0.003em}.pj{font-size:20px}.pk{margin-top:1.2em}.pl{letter-spacing:0}.qc{font-size:16px}.qd{margin-top:1.23em}.qp{margin-top:0.67em}.ra{margin-top:40px}.rt{margin-top:1.34em}.sj{margin-bottom:80px}.ta{padding-top:48px}.of:hover{border-color:#E5E5E5}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="print">.sr{display:none}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.hk{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style>
<style type="text/css" data-fela-rehydration="554" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.lb{max-height:none}</style>
</head><body>
<article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fr gh gi gj gk gl"></div><div class="gm gn go gp gq"><div class="gr"><div class="ab ca"><div class="gs gt gu gv gw gx ce gy cf gz ch bg"><figure class="hd he hf hg hh gr hi hj paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb hc"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*ZX3bHJdGGZwwOQHt 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*ZX3bHJdGGZwwOQHt 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*ZX3bHJdGGZwwOQHt 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*ZX3bHJdGGZwwOQHt 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*ZX3bHJdGGZwwOQHt 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*ZX3bHJdGGZwwOQHt 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/0*ZX3bHJdGGZwwOQHt 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*ZX3bHJdGGZwwOQHt 640w, https://miro.medium.com/v2/resize:fit:720/0*ZX3bHJdGGZwwOQHt 720w, https://miro.medium.com/v2/resize:fit:750/0*ZX3bHJdGGZwwOQHt 750w, https://miro.medium.com/v2/resize:fit:786/0*ZX3bHJdGGZwwOQHt 786w, https://miro.medium.com/v2/resize:fit:828/0*ZX3bHJdGGZwwOQHt 828w, https://miro.medium.com/v2/resize:fit:1100/0*ZX3bHJdGGZwwOQHt 1100w, https://miro.medium.com/v2/resize:fit:2000/0*ZX3bHJdGGZwwOQHt 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"><img alt="" class="bg ho hp c" width="1000" height="563" loading="eager" role="presentation"></picture></div></div></figure></div></div></div><div class="ab ca"><div class="ch bg fy fz ga gb"><div></div><div><h2 id="c1e9" class="pw-subtitle-paragraph ip hr hs be b iq ir is it iu iv iw ix iy iz ja jb jc jd je cp dt">Merevolusi Pengembangan Aplikasi dengan Gemini API, Update Impeller, dan Dukungan Windows Arm64</h2><div class="jf jg jh ji jj"><div class="speechify-ignore ab co"><div class="speechify-ignore bg l"><div class="jk jl jm jn jo ab"><div><div class="ab jp"><a rel="noopener follow" href="/@kevinchisholm?source=post_page-----58b1aae242d2--------------------------------"><div><div class="bl" aria-hidden="false"><div class="l jq jr bx js jt"><div class="l fi"><img alt="Kevin Chisholm" class="l fc bx dc dd cw" src="https://miro.medium.com/v2/resize:fill:88:88/1*HEfsynQuQpVrGR-qdGeSvg.jpeg" width="44" height="44" loading="lazy" data-testid="authorPhoto"><div class="ju bx l dc dd fr n jv fs"></div></div></div></div></div></a><a href="https://medium.com/flutter?source=post_page-----58b1aae242d2--------------------------------" rel="noopener follow"><div class="jw ab fi"><div><div class="bl" aria-hidden="false"><div class="l jx jy bx js jz"><div class="l fi"><img alt="Flutter" class="l fc bx bq ka cw" src="https://miro.medium.com/v2/resize:fill:48:48/1*5-aoK8IBmXve5whBQM90GA.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"><div class="ju bx l bq ka fr n jv fs"></div></div></div></div></div></div></a></div></div><div class="bm bg l"><div class="ab"><div style="flex:1"><span class="be b bf z bj"><div class="kb ab q"><div class="ab q kc"><div class="ab q"><div><div class="bl" aria-hidden="false"><p class="be b kd ke bj"><a class="af ag ah ai aj ak al am an ao ap aq ar kf" data-testid="authorName" rel="noopener follow" href="/@kevinchisholm?source=post_page-----58b1aae242d2--------------------------------">Kevin Chisholm</a></p></div></div></div><span class="kg kh" aria-hidden="true"><span class="be b bf z dt">·</span></span><p class="be b kd ke dt"><span><a class="ki kj ah ai aj ak al am an ao ap aq ar ew kk kl" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F7cb43f46877f&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fwhats-new-in-flutter-3-19-58b1aae242d2&user=Kevin+Chisholm&userId=7cb43f46877f&source=post_page-7cb43f46877f----58b1aae242d2---------------------post_header-----------">Ikuti</a></span></p></div></div></span></div></div><div class="l km"><span class="be b bf z dt"><div class="ab cm kn ko kp"><div class="kq kr ab"><div class="be b bf z dt ab ks"><span class="kt l km">Dipublikasikan di</span><div><div class="bl" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar kf ab q" data-testid="publicationName" href="https://medium.com/flutter?source=post_page-----58b1aae242d2--------------------------------" rel="noopener follow"><p class="be b bf z ku kv kw kx ky kz la lb bj">Flutter</p></a></div></div></div><div class="h k"><span class="kg kh" aria-hidden="true"><span class="be b bf z dt">·</span></span></div></div><span class="be b bf z dt"><div class="ab ae"><span data-testid="storyReadTime">Bacaan 11 menit</span><div class="lc ld l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="be b bf z dt">·</span></span><div class="ab co le lf lg lh li lj lk ll lm ln lo lp lq lr ls lt"><div class="h k w ff fg q"><div class="mj l"><div class="ab q mk"><div class="pw-multi-vote-icon fi kt ml mm mn"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fflutter%2F58b1aae242d2&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fwhats-new-in-flutter-3-19-58b1aae242d2&user=Kevin+Chisholm&userId=7cb43f46877f&source=-----58b1aae242d2---------------------clap_footer-----------"><div><div class="bl" aria-hidden="false"><div class="mo ao mp mq mr ms am mt mu mv mn"><svg width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.37.83L12 3.28l.63-2.45h-1.26zM13.92 3.95l1.52-2.1-1.18-.4-.34 2.5zM8.59 1.84l1.52 2.11-.34-2.5-1.18.4zM18.52 18.92a4.23 4.23 0 0 1-2.62 1.33l.41-.37c2.39-2.4 2.86-4.95 1.4-7.63l-.91-1.6-.8-1.67c-.25-.56-.19-.98.21-1.29a.7.7 0 0 1 .55-.13c.28.05.54.23.72.5l2.37 4.16c.97 1.62 1.14 4.23-1.33 6.7zm-11-.44l-4.15-4.15a.83.83 0 0 1 1.17-1.17l2.16 2.16a.37.37 0 0 0 .51-.52l-2.15-2.16L3.6 11.2a.83.83 0 0 1 1.17-1.17l3.43 3.44a.36.36 0 0 0 .52 0 .36.36 0 0 0 0-.52L5.29 9.51l-.97-.97a.83.83 0 0 1 0-1.16.84.84 0 0 1 1.17 0l.97.97 3.44 3.43a.36.36 0 0 0 .51 0 .37.37 0 0 0 0-.52L6.98 7.83a.82.82 0 0 1-.18-.9.82.82 0 0 1 .76-.51c.22 0 .43.09.58.24l5.8 5.79a.37.37 0 0 0 .58-.42L13.4 9.67c-.26-.56-.2-.98.2-1.29a.7.7 0 0 1 .55-.13c.28.05.55.23.73.5l2.2 3.86c1.3 2.38.87 4.59-1.29 6.75a4.65 4.65 0 0 1-4.19 1.37 7.73 7.73 0 0 1-4.07-2.25zm3.23-12.5l2.12 2.11c-.41.5-.47 1.17-.13 1.9l.22.46-3.52-3.53a.81.81 0 0 1-.1-.36c0-.23.09-.43.24-.59a.85.85 0 0 1 1.17 0zm7.36 1.7a1.86 1.86 0 0 0-1.23-.84 1.44 1.44 0 0 0-1.12.27c-.3.24-.5.55-.58.89-.25-.25-.57-.4-.91-.47-.28-.04-.56 0-.82.1l-2.18-2.18a1.56 1.56 0 0 0-2.2 0c-.2.2-.33.44-.4.7a1.56 1.56 0 0 0-2.63.75 1.6 1.6 0 0 0-2.23-.04 1.56 1.56 0 0 0 0 2.2c-.24.1-.5.24-.72.45a1.56 1.56 0 0 0 0 2.2l.52.52a1.56 1.56 0 0 0-.75 2.61L7 19a8.46 8.46 0 0 0 4.48 2.45 5.18 5.18 0 0 0 3.36-.5 4.89 4.89 0 0 0 4.2-1.51c2.75-2.77 2.54-5.74 1.43-7.59L18.1 7.68z"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l mw mx my mz na nb nc"><p class="be b du z dt"><span class="nd">--</span></p></div></div></div><div><div class="bl" aria-hidden="false"><button class="ao mo ng nh ab q fj ni nj" aria-label="responses"><svg width="24" height="24" viewBox="0 0 24 24" class="nf"><path d="M18 16.8a7.14 7.14 0 0 0 2.24-5.32c0-4.12-3.53-7.48-8.05-7.48C7.67 4 4 7.36 4 11.48c0 4.13 3.67 7.48 8.2 7.48a8.9 8.9 0 0 0 2.38-.32c.23.2.48.39.75.56 1.06.69 2.2 1.04 3.4 1.04.22 0 .4-.11.48-.29a.5.5 0 0 0-.04-.52 6.4 6.4 0 0 1-1.16-2.65v.02zm-3.12 1.06l-.06-.22-.32.1a8 8 0 0 1-2.3.33c-4.03 0-7.3-2.96-7.3-6.59S8.17 4.9 12.2 4.9c4 0 7.1 2.96 7.1 6.6 0 1.8-.6 3.47-2.02 4.72l-.2.16v.26l.02.3a6.74 6.74 0 0 0 .88 2.4 5.27 5.27 0 0 1-2.17-.86c-.28-.17-.72-.38-.94-.59l.01-.02z"></path></svg><p class="be b du z dt"><span class="pw-responses-count ne nf">15</span></p></button></div></div></div><div class="ab q lu lv lw lx ly lz ma mb mc md me mf mg mh mi"><div class="nk k j i d"></div><div class="h k"><div><div class="bl" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F58b1aae242d2&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fwhats-new-in-flutter-3-19-58b1aae242d2&source=-----58b1aae242d2---------------------bookmark_footer-----------"><svg width="25" height="25" viewBox="0 0 25 25" fill="none" class="dt nl" aria-label="Add to list bookmark button"><path d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18V2.5zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .8.4l5.7-4.4 5.7 4.4a.5.5 0 0 0 .8-.4v-8.5a.5.5 0 0 0-1 0v7.48l-5.2-4a.5.5 0 0 0-.6 0l-5.2 4V7z" fill="currentColor"></path></svg></a></span></div></div></div><div class="fc nm cm"><div class="l ae"><div class="ab ca"><div class="gs gu gw nn no ho ch bg"><div class="ab"><div class="bl bg" aria-hidden="false"><div><div class="bl" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fj ah ai aj ak al np an ao ap ew nq nr nj ns nt nu nv nw s nx ny nz oa ob oc od u oe of og"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0zm9-10a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.38 10.42l-4.6 3.06a.5.5 0 0 1-.78-.41V8.93c0-.4.45-.63.78-.41l4.6 3.06c.3.2.3.64 0 .84z" fill="currentColor"></path></svg><div class="j i d"><p class="be b bf z dt">Dengarkan</p></div></button></div></div></div></div></div></div></div></div><div class="bl" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bl" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fj ah ai aj ak al np an ao ap ew nq nr nj ns nt nu nv nw s nx ny nz oa ob oc od u oe of og"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.22 4.93a.42.42 0 0 1-.12.13h.01a.45.45 0 0 1-.29.08.52.52 0 0 1-.3-.13L12.5 3v7.07a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5V3.02l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.8a.42.42 0 0 1 .07.5zm-.1.14zm.88 2h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.14c.1.1.15.22.15.35a.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9V8.96c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1z" fill="currentColor"></path></svg><div class="j i d"><p class="be b bf z dt">Bagikan</p></div></button></div></div></div></div></div></div></div></div></div><p id="9f7e" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Hari ini kami mempersembahkan kepada Anda rilis Flutter terbaru, Flutter 3.19. Rilis ini menghadirkan Dart SDK baru untuk Gemini, widget yang memungkinkan developer menambahkan kontrol presisi pada animasi widget, peningkatan rendering dengan update untuk Impeller, peralatan untuk membantu mengimplementasikan deep link, dukungan Windows Arm64, dan masih banyak lagi!</p><p id="1bc0" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Komunitas Flutter terus memberikan kesan yang luar biasa, menggabungkan 1429 permintaan pull dari 168 anggota komunitas, dengan 43 anggota komunitas melakukan permintaan pull Flutter pertama mereka!</p><p id="8067" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Lanjutkan membaca untuk mengetahui semua penambahan dan peningkatan baru yang telah diberikan oleh komunitas Flutter pada rilis terbaru ini!</p><h1 id="ff4f" class="pd pe hs be pf pg ph is pi pj pk iv pl pm pn po pp pq pr ps pt pu pv pw px py bj">Integrasi AI</h1><h2 id="1fc4" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Rilis beta Gemini Google AI Dart SDK</h2><p id="e465" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Google AI Dart SDK telah dirilis ke versi beta. Rilis ini memungkinkan Anda membangun fitur AI generatif ke dalam aplikasi Dart atau Flutter Anda, didukung oleh Gemini, keluarga model AI terbaru dari Google. Sekarang ada paket <code class="cw qt qu qv qw b"><a class="af qx" href="https://pub.dev/packages/google_generative_ai" rel="noopener ugc nofollow" target="_blank">google_generative_ai</a></code> di pub.dev. Pelajari lebih lanjut cara membangun dengan Google AI Dart SDK dalam <a class="af qx" rel="noopener" href="/flutter/harness-gemini-in-your-dart-and-flutter-apps-00573e560381">postingan blog ini</a> atau langsung masuk ke <a class="af qx" href="https://ai.google.dev/tutorials/dart_quickstart" rel="noopener ugc nofollow" target="_blank">panduan memulai Dart</a>.</p><figure class="qz ra rb rc rd gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb qy"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*13y0iIXD9nN5wCcX 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*13y0iIXD9nN5wCcX 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*13y0iIXD9nN5wCcX 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*13y0iIXD9nN5wCcX 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*13y0iIXD9nN5wCcX 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*13y0iIXD9nN5wCcX 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*13y0iIXD9nN5wCcX 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*13y0iIXD9nN5wCcX 640w, https://miro.medium.com/v2/resize:fit:720/0*13y0iIXD9nN5wCcX 720w, https://miro.medium.com/v2/resize:fit:750/0*13y0iIXD9nN5wCcX 750w, https://miro.medium.com/v2/resize:fit:786/0*13y0iIXD9nN5wCcX 786w, https://miro.medium.com/v2/resize:fit:828/0*13y0iIXD9nN5wCcX 828w, https://miro.medium.com/v2/resize:fit:1100/0*13y0iIXD9nN5wCcX 1100w, https://miro.medium.com/v2/resize:fit:1400/0*13y0iIXD9nN5wCcX 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="182" loading="lazy" role="presentation"></picture></div></div></figure><h1 id="1caa" class="pd pe hs be pf pg ph is pi pj pk iv pl pm pn po pp pq pr ps pt pu pv pw px py bj">Kerangka kerja</h1><h2 id="0ad2" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Peningkatan scroll</h2><p id="9f7f" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Flutter dahulu men-scroll dua kali lebih cepat jika Anda menarik dengan dua jari. Sekarang Anda bisa mengonfigurasi <code class="cw qt qu qv qw b">ScrollBehavior</code> default dengan <code class="cw qt qu qv qw b">MultiTouchDragStrategy.latestPointer</code> untuk mendapatkan perilaku scroll agnostik sesuai jumlah jari. Untuk informasi selengkapnya tentang perubahan ini, lihat <a class="af qx" href="https://docs.flutter.dev/release/breaking-changes/multi-touch-scrolling" rel="noopener ugc nofollow" target="_blank">panduan migrasi</a>.</p><p id="6612" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Kami juga menyelesaikan perbaikan bug untuk <code class="cw qt qu qv qw b"><a class="af qx" href="https://github.com/flutter/flutter/pull/136871" rel="noopener ugc nofollow" target="_blank">SingleChildScrollView</a></code> dan <code class="cw qt qu qv qw b"><a class="af qx" href="https://github.com/flutter/flutter/pull/136828" rel="noopener ugc nofollow" target="_blank">ReorderableList</a></code>, mengatasi sejumlah error yang dilaporkan dan perilaku yang tidak diharapkan.</p><p id="efbd" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Pada scrolling dua dimensi, kami sudah menyelesaikan masalahnya, jadi sekarang, jika Anda menarik atau mengetuk sewaktu melakukan scroll, aktivitas scroll akan berhenti seperti yang diharapkan.</p><p id="be8c" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Widget <code class="cw qt qu qv qw b">TableView</code> dalam paket <code class="cw qt qu qv qw b">two_dimensional_scrollables</code> juga sudah diupdate sejak rilis terakhir, memberikan banyak penyempurnaan, menambahkan dukungan untuk penggabungan sel, dan mengadopsi lebih banyak fitur baru dasar 2D setelah rilis stabil 3.16 yang terakhir.</p><h2 id="5897" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">AnimationStyle</h2><p id="3bcb" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Berkat <a class="af qx" href="https://github.com/flutter/flutter/pull/138721" rel="noopener ugc nofollow" target="_blank">kontribusi</a> dari anggota komunitas Flutter <a class="af qx" href="https://github.com/TahaTesser" rel="noopener ugc nofollow" target="_blank">@TahaTesser</a>, Flutter memiliki widget <code class="cw qt qu qv qw b">AnimationStyle</code> baru yang memungkinkan pengguna mengganti perilaku animasi default pada widget, seperti <code class="cw qt qu qv qw b">MaterialApp</code>, <code class="cw qt qu qv qw b">ExpansionTile</code>, dan <code class="cw qt qu qv qw b">PopupMenuButton</code>, yang memberikan kemampuan kepada developer untuk mengganti kurva dan durasi animasi.</p><h2 id="f014" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">SegmentedButton.styleFrom</h2><p id="7eae" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Anggota komunitas Flutter, <a class="af qx" href="https://github.com/AcarFurkan" rel="noopener ugc nofollow" target="_blank">@AcarFurkan</a> menambahkan metode utilitas statis <code class="cw qt qu qv qw b">styleFrom</code>, seperti yang disediakan oleh tipe tombol lainnya. Metode ini memungkinkan pembuatan <code class="cw qt qu qv qw b">ButtonStyle</code> dari <code class="cw qt qu qv qw b">SegmentedButton</code> dengan cepat yang bisa dibagikan dengan tombol tersegmentasi lainnya atau digunakan untuk mengonfigurasi <code class="cw qt qu qv qw b">SegmentedButtonTheme</code> aplikasi.</p><h2 id="5a61" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Switch Adaptif</h2><p id="cd77" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Komponen adaptif ini terlihat dan terasa native di macOS dan iOS serta memiliki tampilan dan nuansa Desain Material di platform lainnya. Ia tidak bergantung pada library Cupertino sehingga API-nya sama persis di semua platform.</p><p id="a6cc" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Lihat <a class="af qx" href="https://github.com/flutter/flutter/pull/130425" rel="noopener ugc nofollow" target="_blank">permintaan pull switch adaptif</a> dan contoh langsungnya di <a class="af qx" href="https://api.flutter.dev/flutter/material/Switch/Switch.adaptive.html" rel="noopener ugc nofollow" target="_blank">halaman API</a> konstruktor <code class="cw qt qu qv qw b">Switch.adaptive</code>.</p><h2 id="4005" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">ID aksesibilitas SemanticsProperties</h2><p id="f169" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">ID aksesibilitas baru di <code class="cw qt qu qv qw b">SemanticsProperties</code> menyediakan ID untuk node semantik dalam hierarki aksesibilitas native. Di Android, ia muncul dalam hierarki aksesibilitas sebagai <code class="cw qt qu qv qw b">resource-id</code>. Pada iOS, ini menetapkan <code class="cw qt qu qv qw b">UIAccessibilityElement.accessibilityIdentifier</code>. Kami ingin berterima kasih kepada anggota komunitas <a class="af qx" href="https://github.com/bartekpacia" rel="noopener ugc nofollow" target="_blank">@bartekpacia</a> atas perubahan ini, yang mencakup <a class="af qx" href="https://github.com/flutter/engine/pull/47961" rel="noopener ugc nofollow" target="_blank">engine</a> dan <a class="af qx" href="https://github.com/flutter/flutter/pull/138331" rel="noopener ugc nofollow" target="_blank">framework</a>.</p><h2 id="8e41" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Peningkatan akses ke status widget teks</h2><p id="ac30" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Kami menambahkan dukungan untuk <code class="cw qt qu qv qw b">MaterialStatesController</code> dalam <code class="cw qt qu qv qw b">TextField</code> dan <code class="cw qt qu qv qw b">TextFormField</code> sehingga Anda bisa mendengarkan perubahan <code class="cw qt qu qv qw b">MaterialState</code>.</p><h2 id="feed" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Stack UndoHistory</h2><p id="9537" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Kami telah <a class="af qx" href="https://github.com/flutter/flutter/pull/138674" rel="noopener ugc nofollow" target="_blank">memperbaiki</a> <a class="af qx" href="https://github.com/flutter/flutter/issues/130881" rel="noopener ugc nofollow" target="_blank">masalah</a> terkait riwayat undo/redo yang dapat hilang pada keyboard berbahasa Jepang. Anda sekarang bisa memodifikasi entri sebelum mendorongnya ke stack <code class="cw qt qu qv qw b">UndoHistory</code>.</p><h1 id="0a21" class="pd pe hs be pf pg ph is pi pj pk iv pl pm pn po pp pq pr ps pt pu pv pw px py bj">Engine</h1><h2 id="7f50" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Progres Impeller</h2><p id="e826" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj"><strong class="oj ht">Pratinjau OpenGL Android</strong></p><p id="312b" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Pada rilis stabil 3.16, kami mengundang pengguna untuk mencoba Impeller pada perangkat Android yang mendukung Vulkan, yang mencakup 77% dari perangkat Android di dunia. Dalam beberapa bulan terakhir, kami telah membawa backend OpenGL Impeller ke fitur yang setara dengan backend Vulkan, misalnya, dengan menambahkan <a class="af qx" href="https://github.com/flutter/engine/pull/47030" rel="noopener ugc nofollow" target="_blank">dukungan untuk MSAA</a>. Ini berarti bahwa aplikasi Flutter pada hampir semua perangkat Android diharapkan bisa melakukan render secara benar, dengan pengecualian sejumlah kecil fitur lainnya yang akan segera menyusul, seperti shader khusus dan dukungan penuh untuk tekstur eksternal.</p><p id="d743" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Kami meminta developer Flutter untuk melakukan upgrade ke versi stabil terbaru, dan melaporkan setiap masalah yang ditemukan ketika <a class="af qx" href="https://docs.flutter.dev/perf/impeller#android" rel="noopener ugc nofollow" target="_blank">Impeller diaktifkan</a>. Masukan pada tahap ini sangat berharga untuk memastikan bahwa Impeller berhasil di Android dan kami bisa dengan percaya diri menjadikannya sebagai renderer default dalam rilis akhir tahun ini. Ekosistem hardware Android jauh lebih beragam daripada ekosistem iOS. Oleh karena itu, masukan terbaik tentang Impeller harus menyertakan informasi mendetail tentang perangkat dan versi Android yang mengalami masalah secara spesifik.</p><p id="893e" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Selanjutnya, sebagai pengingat, backend Vulkan dari Impeller memungkinkan kemampuan proses debug tambahan dalam build <a class="af qx" href="https://docs.flutter.dev/testing/build-modes#debug" rel="noopener ugc nofollow" target="_blank">debug</a> di samping apa yang digunakan dengan Skia, dan kemampuan ini memiliki overhead runtime tambahan. Oleh karena itu, sangatlah penting untuk memberikan masukan mengenai performa Impeller dari <a class="af qx" href="https://docs.flutter.dev/testing/build-modes#profile" rel="noopener ugc nofollow" target="_blank">profil</a> atau build <a class="af qx" href="https://docs.flutter.dev/testing/build-modes#release" rel="noopener ugc nofollow" target="_blank">rilis</a>. Laporan bug ini harus menyertakan linimasa dari DevTools dan perbandingan dengan backend Skia pada perangkat yang sama. Terakhir, seperti biasa, kami sangat berterima kasih untuk semua masukan yang menyertakan kasus pengujian kecil yang dapat direproduksi untuk menunjukkan masalah tersebut.</p><p id="d445" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj"><strong class="oj ht">Roadmap</strong></p><p id="a554" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Setelah fidelitas rendering, fokus utama kami dalam periode pratinjau Android Impeller adalah performa. Kami terus membuat progres secara bertahap, tetapi beberapa peningkatan yang lebih besar juga sedang dilakukan. Kami berharap dapat memanfaatkan <a class="af qx" href="https://github.com/flutter/flutter/issues/128911" rel="noopener ugc nofollow" target="_blank">subpass Vulkan</a> untuk meningkatkan performa mode campuran lanjutan secara signifikan. Selain itu, kami juga berharap bahwa perubahan dalam strategi rendering dari yang sebelumnya selalu memetakan setiap jalur pada CPU mengarah ke pendekatan <a class="af qx" href="https://github.com/flutter/flutter/issues/137714" rel="noopener ugc nofollow" target="_blank">Stencil-then-cover</a> akan sangat mengurangi penggunaan CPU Impeller pada Android dan iOS. Yang terakhir, kami berharap bahwa implementasi baru <a class="af qx" href="https://github.com/flutter/flutter/issues/131580" rel="noopener ugc nofollow" target="_blank">Gaussian blurring</a> akan mengompensasi throughput implementasi Skia, dan meningkatkan penggunaan idiomatis blurring pada iOS.</p><h2 id="e1de" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Peningkatan API</h2><p id="02db" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj"><strong class="oj ht">Informasi Glyph</strong></p><p id="8721" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Rilis ini menyertakan dua metode baru pada objek <code class="cw qt qu qv qw b">Paragraph</code>: <code class="cw qt qu qv qw b">getClosestGlyphInfoForOffset</code> dari <code class="cw qt qu qv qw b">dart:ui</code>, dan <code class="cw qt qu qv qw b">getGlyphInfoAt</code>, yang masing-masing mengembalikan objek tipe baru <code class="cw qt qu qv qw b">GlyphInfo</code>. Lihat dokumentasi mengenai tipe <code class="cw qt qu qv qw b"><a class="af qx" href="https://main-api.flutter.dev/flutter/dart-ui/GlyphInfo-class.html" rel="noopener ugc nofollow" target="_blank">GlyphInfo</a></code> baru.</p><p id="8156" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj"><strong class="oj ht">Pelacakan GPU</strong></p><p id="c475" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Pada Impeller Metal (iOS, macOS, Simulator) dan pada perangkat Android yang mendukung Vulkan, engine Flutter sekarang melaporkan waktu GPU untuk setiap bingkai di linimasa dalam debug dan build profil. Pengaturan waktu bingkai GPU bisa diperiksa dalam DevTools di bawah tajuk "GPUTracer".</p><figure class="qz ra rb rc rd gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb re"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*m3qW6u7Q4mNfTKxN 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*m3qW6u7Q4mNfTKxN 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*m3qW6u7Q4mNfTKxN 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*m3qW6u7Q4mNfTKxN 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*m3qW6u7Q4mNfTKxN 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*m3qW6u7Q4mNfTKxN 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*m3qW6u7Q4mNfTKxN 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*m3qW6u7Q4mNfTKxN 640w, https://miro.medium.com/v2/resize:fit:720/0*m3qW6u7Q4mNfTKxN 720w, https://miro.medium.com/v2/resize:fit:750/0*m3qW6u7Q4mNfTKxN 750w, https://miro.medium.com/v2/resize:fit:786/0*m3qW6u7Q4mNfTKxN 786w, https://miro.medium.com/v2/resize:fit:828/0*m3qW6u7Q4mNfTKxN 828w, https://miro.medium.com/v2/resize:fit:1100/0*m3qW6u7Q4mNfTKxN 1100w, https://miro.medium.com/v2/resize:fit:1400/0*m3qW6u7Q4mNfTKxN 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="990" loading="lazy" role="presentation"></picture></div></div></figure><p id="75fe" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Harap perhatikan bahwa karena perangkat Android non-Vulkan bisa saja salah melaporkan dukungannya untuk melakukan kueri timing GPU, pelacakan GPU Impeller hanya bisa diaktifkan dengan flag yang diatur dalam file <code class="cw qt qu qv qw b">AndroidManifest.xml</code> pada perangkat ini.</p><pre class="qz ra rb rc rd rf qw rg bo rh ba bj"><span id="c698" class="ri pe hs qw b bf rj rk l rl rm"><meta-data<br> android:name="io.flutter.embedding.android.EnableOpenGLGPUTracing"<br> android:value="true" /></span></pre><h2 id="68e0" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Optimalisasi kinerja</h2><p id="1427" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj"><strong class="oj ht">Konstanta spesialisasi</strong></p><p id="d933" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Tim menambahkan <a class="af qx" href="https://github.com/flutter/flutter/issues/119357" rel="noopener ugc nofollow" target="_blank">dukungan untuk konstanta spesialisasi</a> ke Impeller. Memanfaatkan fitur ini dalam shader Impeller telah mengurangi ukuran biner yang tidak terkompresi pada engine Flutter hingga <a class="af qx" href="https://flutter-flutter-perf.skia.org/e/?begin=1698877815&end=1702074996&queries=test%3Dhello_world_ios__compile&requestType=0&selected=commit%3D37892%26name%3D%252Carch%253Darm%252Cbranch%253Dmaster%252Cconfig%253Ddefault%252Cdevice_type%253DiPhone_11%252Cdevice_version%253Dnone%252Chost_type%253Dmac%252Csub_result%253Dflutter_framework_uncompressed_bytes%252Ctest%253Dhello_world_ios__compile%252C" rel="noopener ugc nofollow" target="_blank">hampir 350KB</a>.</p><p id="4723" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj"><strong class="oj ht">Percepatan filter latar belakang</strong></p><p id="c81b" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Masih banyak yang harus dikerjakan, tetapi rilis ini menyertakan beberapa peningkatan performa yang bagus untuk filter latar belakang dan blur pada Impeller. Secara khusus, kontributor open source <a class="af qx" href="https://github.com/knopp" rel="noopener ugc nofollow" target="_blank">@knopp</a> <a class="af qx" href="https://github.com/flutter/flutter/issues/131567#issuecomment-1678210475" rel="noopener ugc nofollow" target="_blank">melihat</a> bahwa Impeller secara keliru meminta kemampuan untuk membaca dari tekstur di layar. <a class="af qx" href="https://github.com/flutter/engine/pull/47808" rel="noopener ugc nofollow" target="_blank">Menghapus kemampuan ini</a> telah meningkatkan gambar yang menyertakan beberapa filter latar belakang, antara 20-70% dalam tolok ukur kami, tergantung kompleksitasnya.</p><p id="0278" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Selain itu, Impeller <a class="af qx" href="https://github.com/flutter/engine/pull/47397" rel="noopener ugc nofollow" target="_blank">tidak lagi tanpa syarat menyimpan buffering stensil</a> pada setiap filter latar belakang. Sebagai gantinya, setiap klip yang memengaruhi operasi direkam, dan diputar ulang ke dalam buffering stensil baru ketika memulihkan lapisan penyimpanan untuk filter latar belakang.</p><figure class="qz ra rb rc rd gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb rn"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*6Of__x8KILe6U5Si 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*6Of__x8KILe6U5Si 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*6Of__x8KILe6U5Si 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*6Of__x8KILe6U5Si 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*6Of__x8KILe6U5Si 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*6Of__x8KILe6U5Si 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*6Of__x8KILe6U5Si 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*6Of__x8KILe6U5Si 640w, https://miro.medium.com/v2/resize:fit:720/0*6Of__x8KILe6U5Si 720w, https://miro.medium.com/v2/resize:fit:750/0*6Of__x8KILe6U5Si 750w, https://miro.medium.com/v2/resize:fit:786/0*6Of__x8KILe6U5Si 786w, https://miro.medium.com/v2/resize:fit:828/0*6Of__x8KILe6U5Si 828w, https://miro.medium.com/v2/resize:fit:1100/0*6Of__x8KILe6U5Si 1100w, https://miro.medium.com/v2/resize:fit:1400/0*6Of__x8KILe6U5Si 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="639" loading="lazy" role="presentation"></picture></div></div></figure><p id="d9c2" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Berkat perubahan ini, tolok ukur kami untuk mode campuran lanjutan beranimasi pada Pixel 7 Pro yang menjalankan Impeller dengan backend Vulkan meningkatkan waktu render frame rata-rata GPU dari 55ms menjadi 16ms, dan meningkatkan waktu thread raster CPU 90%-ile dari sekitar 110ms turun menjadi 22ms.</p><h1 id="cf71" class="pd pe hs be pf pg ph is pi pj pk iv pl pm pn po pp pq pr ps pt pu pv pw px py bj">Android</h1><h2 id="c215" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Validator web deeplinking</h2><p id="c84f" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Kami telah belajar dari developer bahwa deep linking (membawa pengguna dari URL web ke halaman tertentu di aplikasi seluler) selalu sulit diimplementasikan, dan rentan terhadap kesalahan. Jadi, pertama-tama kami membuat alat validasi untuk membantu developer memahami link yang tidak dikonfigurasi dengan benar, dan memberikan panduan implementasi. Kami sangat senang mengumumkan bahwa versi awal validator deeplink Flutter kini telah tersedia!</p><p id="eba0" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Pada versi awal ini, validator deep link Flutter mendukung pengecekan web di Android, yang berarti memvalidasi pengaturan file <code class="cw qt qu qv qw b">assetlinks.json</code> Anda. Anda bisa membuka DevTools, mengklik tab <strong class="oj ht">Deep Links</strong>, dan mengimpor proyek Flutter yang berisi deeplink. Validator deeplinking memberi tahu Anda jika file web Anda dikonfigurasi dengan benar. Anda bisa merujuk ke <a class="af qx" href="https://docs.google.com/document/d/1fnWe8EpZleMtSmP0rFm2iulqS3-gA86z8u9IsnXjJak/edit?tab=t.0" rel="noopener ugc nofollow" target="_blank">petunjuk pengujian</a> alat validasi deep link untuk informasi selengkapnya.</p><p id="7b76" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Kami harap alat ini adalah langkah pertama Anda untuk menyederhanakan perjalanan implementasi deep linking. Kami akan terus berupaya menyediakan dukungan di masa mendatang untuk pengecekan web di iOS, dan pengecekan aplikasi di iOS dan Android!</p><figure class="qz ra rb rc rd gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb qy"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*1YoGEcLgpaFythel 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*1YoGEcLgpaFythel 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*1YoGEcLgpaFythel 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*1YoGEcLgpaFythel 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*1YoGEcLgpaFythel 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*1YoGEcLgpaFythel 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*1YoGEcLgpaFythel 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*1YoGEcLgpaFythel 640w, https://miro.medium.com/v2/resize:fit:720/0*1YoGEcLgpaFythel 720w, https://miro.medium.com/v2/resize:fit:750/0*1YoGEcLgpaFythel 750w, https://miro.medium.com/v2/resize:fit:786/0*1YoGEcLgpaFythel 786w, https://miro.medium.com/v2/resize:fit:828/0*1YoGEcLgpaFythel 828w, https://miro.medium.com/v2/resize:fit:1100/0*1YoGEcLgpaFythel 1100w, https://miro.medium.com/v2/resize:fit:1400/0*1YoGEcLgpaFythel 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="550" loading="lazy" role="presentation"></picture></div></div></figure><h2 id="5fc4" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Dukungan untuk Share.invoke</h2><p id="6891" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Tombol <strong class="oj ht">Share</strong> default pada kolom teks dan tampilan sebelumnya tidak ada di Android, tetapi kami telah menambahkannya dalam rilis ini sebagai bagian dari upaya berkelanjutan kami untuk memastikan semua tombol menu konteks default tersedia di semua platform. Anda bisa mengikuti pekerjaan yang sedang berlangsung di <a class="af qx" href="https://github.com/flutter/flutter/issues/107578" rel="noopener ugc nofollow" target="_blank">PR #107578</a>.</p><h2 id="a73d" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Fitur aset native</h2><p id="70c9" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Jika Anda tertarik dengan interoperabilitas Flutter dengan fungsi dari bahasa lain dalam kode Flutter, kini Anda bisa melakukan panggilan FFI melalui aset Native di Android sebagai bagian dari <a class="af qx" href="https://github.com/flutter/flutter/issues/129757" rel="noopener ugc nofollow" target="_blank">upaya berkelanjutan</a> kami untuk mendukung aset Native.</p><h2 id="5042" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Mode Texture Layer Hybrid Composition (TLHC)</h2><p id="c9c7" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Flutter 3.19 mencakup perbaikan yang sekarang membuat Google Maps dan pembesar input teks bekerja dalam mode TLHC, yang berarti performa yang lebih baik untuk aplikasi Anda. Jika Anda menggunakan Google Maps, kami sarankan Anda mencoba perubahannya dan berikan masukan kepada kami!</p><p id="8345" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Pekerjaan ini tidak termasuk commit di bawah Framework atau Engine, tetapi Anda bisa melihat pekerjaannya di <a class="af qx" href="https://github.com/flutter/packages/pull/5408" rel="noopener ugc nofollow" target="_blank">PR 5408</a>, bersama dengan langkah-langkah untuk menguji THLC.</p><h2 id="fe06" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Tombol toolbar pemilihan teks seluruh sistem khusus</h2><p id="d930" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Aplikasi Android bisa menambahkan item menu pilihan teks khusus yang muncul di semua menu pilihan teks (menu yang muncul ketika Anda menekan lama teks). Menu pilihan <code class="cw qt qu qv qw b">TextField</code> Flutter sekarang sudah menyertakan semua item tersebut.</p><h1 id="ef84" class="pd pe hs be pf pg ph is pi pj pk iv pl pm pn po pp pq pr ps pt pu pv pw px py bj">iOS</h1><h2 id="b7b2" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Font native iOS Flutter</h2><p id="8736" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Teks Flutter sekarang terlihat sedikit lebih ringkas dan lebih native di iOS. Menurut panduan desain Apple, font yang lebih kecil di iOS harus lebih menyebar agar mudah dibaca di perangkat seluler, sementara font yang lebih besar harus lebih ringkas agar tidak menghabiskan banyak ruang. Sebelumnya, kami salah menggunakan font yang lebih kecil dengan banyak spasi dalam semua kasus. Sekarang, secara default Flutter akan menggunakan font ringkas untuk teks yang lebih besar.</p><figure class="qz ra rb rc rd gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb ro"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*q9BjqFkxrFRfx9eP 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*q9BjqFkxrFRfx9eP 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*q9BjqFkxrFRfx9eP 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*q9BjqFkxrFRfx9eP 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*q9BjqFkxrFRfx9eP 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*q9BjqFkxrFRfx9eP 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*q9BjqFkxrFRfx9eP 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*q9BjqFkxrFRfx9eP 640w, https://miro.medium.com/v2/resize:fit:720/0*q9BjqFkxrFRfx9eP 720w, https://miro.medium.com/v2/resize:fit:750/0*q9BjqFkxrFRfx9eP 750w, https://miro.medium.com/v2/resize:fit:786/0*q9BjqFkxrFRfx9eP 786w, https://miro.medium.com/v2/resize:fit:828/0*q9BjqFkxrFRfx9eP 828w, https://miro.medium.com/v2/resize:fit:1100/0*q9BjqFkxrFRfx9eP 1100w, https://miro.medium.com/v2/resize:fit:1400/0*q9BjqFkxrFRfx9eP 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="381" loading="lazy" role="presentation"></picture></div></div></figure><h1 id="6e3d" class="pd pe hs be pf pg ph is pi pj pk iv pl pm pn po pp pq pr ps pt pu pv pw px py bj">DevTools</h1><h2 id="02eb" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Update DevTools</h2><p id="bff9" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Beberapa sorotan untuk DevTools dengan rilis ini adalah:</p><ul class=""><li id="81b6" class="oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc rp rq rr bj">Penambahan fitur dan layar baru di DevTools untuk memvalidasi pengaturan deeplink di Android.</li><li id="b061" class="oh oi hs oj b iq rs ol om it rt oo op oq ru os ot ou rv ow ox oy rw pa pb pc rp rq rr bj">Penambahan opsi dalam menu <strong class="oj ht">Enhance Tracing</strong> untuk melacak aktivitas saluran platform. Ini berguna untuk aplikasi dengan plugin.</li></ul><figure class="qz ra rb rc rd gr ha hb paragraph-image"><div role="button" tabindex="0" class="hk hl fi hm bg hn"><div class="ha hb rx"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*zDY2wXaCTMankTTb 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*zDY2wXaCTMankTTb 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*zDY2wXaCTMankTTb 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*zDY2wXaCTMankTTb 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*zDY2wXaCTMankTTb 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*zDY2wXaCTMankTTb 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*zDY2wXaCTMankTTb 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*zDY2wXaCTMankTTb 640w, https://miro.medium.com/v2/resize:fit:720/0*zDY2wXaCTMankTTb 720w, https://miro.medium.com/v2/resize:fit:750/0*zDY2wXaCTMankTTb 750w, https://miro.medium.com/v2/resize:fit:786/0*zDY2wXaCTMankTTb 786w, https://miro.medium.com/v2/resize:fit:828/0*zDY2wXaCTMankTTb 828w, https://miro.medium.com/v2/resize:fit:1100/0*zDY2wXaCTMankTTb 1100w, https://miro.medium.com/v2/resize:fit:1400/0*zDY2wXaCTMankTTb 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg ho hp c" width="700" height="379" loading="lazy" role="presentation"></picture></div></div></figure><ul class=""><li id="cb55" class="oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc rp rq rr bj">Layar profiler Performa dan CPU sekarang tersedia apabila tidak ada aplikasi yang terhubung. Data performa atau profil CPU yang sebelumnya disimpan dari DevTools bisa dimuat ulang untuk dilihat dari layar ini.</li><li id="2467" class="oh oi hs oj b iq rs ol om it rt oo op oq ru os ot ou rv ow ox oy rw pa pb pc rp rq rr bj">Flutter Sidebar di VS Code sekarang memiliki kemampuan untuk mengaktifkan platform baru jika tidak diaktifkan untuk proyek saat ini, dan menu DevTools di sidebar sekarang memiliki opsi untuk membuka DevTools di jendela browser eksternal.</li></ul><p id="24bb" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Untuk mempelajari lebih lanjut, lihat catatan rilis untuk DevTools, <a class="af qx" href="https://docs.flutter.dev/tools/devtools/release-notes/release-notes-2.29.0" rel="noopener ugc nofollow" target="_blank">2.29.0</a>, <a class="af qx" href="https://docs.flutter.dev/tools/devtools/release-notes/release-notes-2.30.0" rel="noopener ugc nofollow" target="_blank">2.30.0</a>, dan <a class="af qx" href="https://docs.flutter.dev/tools/devtools/release-notes/release-notes-2.31.0" rel="noopener ugc nofollow" target="_blank">2.31.0</a>.</p><h1 id="0905" class="pd pe hs be pf pg ph is pi pj pk iv pl pm pn po pp pq pr ps pt pu pv pw px py bj">Desktop</h1><h2 id="0cda" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Dukungan Windows Arm64</h2><p id="8213" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Flutter di Windows sekarang menerima dukungan awal untuk arsitektur Arm64, berkat upaya yang patut diapresiasi dari anggota komunitas <a class="af qx" href="https://github.com/pbo-linaro" rel="noopener ugc nofollow" target="_blank">@pbo-linaro</a>. Dukungan awal ini membuka jalan bagi aplikasi Flutter yang lebih efisien dan berkinerja tinggi yang berjalan secara native pada perangkat Windows Arm64. Meskipun masih dalam tahap pengembangan, dengan progres yang dapat dilacak di GitHub edisi <a class="af qx" href="https://github.com/flutter/flutter/issues/62597" rel="noopener ugc nofollow" target="_blank">#62597</a>, langkah ini menandakan peningkatan yang menjanjikan bagi developer Flutter yang ingin mengoptimalkan aplikasi mereka untuk perangkat Windows yang lebih luas.</p><h1 id="84b0" class="pd pe hs be pf pg ph is pi pj pk iv pl pm pn po pp pq pr ps pt pu pv pw px py bj">Ekosistem</h1><h2 id="7552" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Alasan perlunya manifes privasi</h2><p id="3b72" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Flutter kini menyertakan manifes privasi di iOS untuk memenuhi <a class="af qx" href="https://developer.apple.com/support/third-party-SDK-requirements/" rel="noopener ugc nofollow" target="_blank">persyaratan Apple mendatang</a>.</p><h2 id="20c0" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Progres ekosistem paket Flutter dan Dart</h2><p id="1831" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Jika Anda melewatkannya, silakan baca postingan blog dari bulan Januari mengenai <a class="af qx" rel="noopener" href="/flutter/progress-of-the-flutter-package-ecosystem-17cded9a0703">progres ekosistem paket Flutter dan Dart</a>.</p><h1 id="1da1" class="pd pe hs be pf pg ph is pi pj pk iv pl pm pn po pp pq pr ps pt pu pv pw px py bj">Penghentian dukungan dan perubahan yang dapat menyebabkan gangguan</h1><h2 id="4d21" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Menghentikan dukungan Windows 7 dan 8</h2><p id="70d8" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Seiring perkembangan Flutter, kami sangat antusias berfokus pada teknologi terbaru dengan mengakhiri dukungan untuk Windows 7 dan 8 dengan merilis Dart 3.3 dan Flutter 3.19. Pergeseran ini, sejalan dengan strategi Microsoft, memungkinkan kami untuk meningkatkan Flutter pada sistem operasi modern. Kami menghargai upaya penyesuaian yang dilakukan developer kami dan berkomitmen untuk membantu Anda melewati masa transisi ini. Langkah ini membuka jalan bagi lingkungan pengembangan yang lebih aman, efisien, dan kaya fitur pada versi Windows yang didukung. Terima kasih atas pengertian dan kesediaan Anda untuk beradaptasi selagi kita terus berinovasi bersama dalam ekosistem Flutter.</p><h2 id="22ac" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Flag dithering Impeller</h2><p id="8041" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Seperti yang tercantum dalam catatan rilis untuk rilis stabil 3.16, flag global <code class="cw qt qu qv qw b">Paint.enableDithering</code> telah <a class="af qx" href="https://github.com/flutter/engine/pull/46745" rel="noopener ugc nofollow" target="_blank">dihapus</a>. Lihat <a class="af qx" href="https://docs.flutter.dev/release/breaking-changes/paint-enableDithering" rel="noopener ugc nofollow" target="_blank">pengumuman perubahan yang dapat menyebabkan gangguan</a> di situs untuk detail selengkapnya.</p><h2 id="2a9e" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Menghentikan dukungan iOS 11</h2><p id="d72a" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Karena <a class="af qx" href="https://github.com/flutter/flutter/issues/136060" rel="noopener ugc nofollow" target="_blank">error runtime</a> saat API jaringan tertentu dipanggil, Flutter tidak lagi mendukung iOS 11. Ini berarti bahwa aplikasi yang dibuat dengan Flutter 3.16.6 dan yang lebih baru tidak akan berjalan pada perangkat tersebut.</p><h2 id="78eb" class="pz pe hs be pf qa qb dx pi qc qd dz pl oq qe qf qg ou qh qi qj oy qk ql qm qn bj">Penghentian dukungan mode render otomatis</h2><p id="7f6c" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj"><a class="af qx" href="https://docs.flutter.dev/release/breaking-changes" rel="noopener ugc nofollow" target="_blank">Perubahan yang dapat menyebabkan gangguan</a> dalam rilis ini mencakup API yang sudah tidak digunakan lagi yang kedaluwarsa setelah rilis v3.16. Untuk melihat semua API yang terpengaruh, bersama dengan konteks tambahan dan panduan migrasi, lihat <a class="af qx" href="https://docs.flutter.dev/release/breaking-changes/3-16-deprecations" rel="noopener ugc nofollow" target="_blank">panduan penghentian dukungan untuk rilis ini</a>. Banyak dari penghentian ini didukung oleh <a class="af qx" href="https://docs.flutter.dev/development/tools/flutter-fix" rel="noopener ugc nofollow" target="_blank">Flutter fix</a>, termasuk perbaikan cepat dalam IDE. Perbaikan massal bisa dievaluasi dan diterapkan dengan alat command line <code class="cw qt qu qv qw b">dart fix</code>.</p><p id="544c" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Seperti biasa, terima kasih banyak kepada komunitas yang telah <a class="af qx" href="https://github.com/flutter/tests/blob/master/README.md" rel="noopener ugc nofollow" target="_blank">menyumbangkan pengujian</a> — ini membantu kami mengidentifikasi perubahan yang dapat menyebabkan gangguan. Untuk mempelajari lebih lanjut, lihat <a class="af qx" href="https://github.com/flutter/flutter/wiki/Tree-hygiene#handling-breaking-changes" rel="noopener ugc nofollow" target="_blank">kebijakan perubahan yang dapat menyebabkan gangguan Flutter</a>.</p><p id="c00e" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Ini adalah rilis pertama yang mengadopsi paket flutter_driver ke dalam kebijakan penghentian dukungan selain paket yang sudah didukung, flutter dan flutter_test.</p><h1 id="21d1" class="pd pe hs be pf pg ph is pi pj pk iv pl pm pn po pp pq pr ps pt pu pv pw px py bj">Kesimpulan</h1><p id="d041" class="pw-post-body-paragraph oh oi hs oj b iq qo ol om it qp oo op oq qq os ot ou qr ow ox oy qs pa pb pc gm bj">Kami dengan sengaja menyorot kontributor-kontributor yang luar biasa di awal pengumuman ini. Evolusi Flutter menjadi toolkit yang kuat dan efisien seperti sekarang merupakan bukti langsung dari dedikasi dan kerja keras komunitas kami yang luar biasa. Terima kasih yang sebesar-besarnya kepada Anda semua.</p><p id="6dae" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Untuk mendalami secara spesifik tentang apa yang telah dicapai dengan rilis ini, kami mengundang Anda untuk melihat <a class="af qx" href="https://docs.flutter.dev/release/release-notes/release-notes-3.19.0" rel="noopener ugc nofollow" target="_blank">catatan rilis dan log perubahan</a> untuk daftar lengkap penambahan di Flutter 3.19.</p><p id="2dd5" class="pw-post-body-paragraph oh oi hs oj b iq ok ol om it on oo op oq or os ot ou ov ow ox oy oz pa pb pc gm bj">Flutter 3.19, bersama <a class="af qx" rel="noopener" href="/dartlang/new-in-dart-3-3-extension-types-javascript-interop-and-more-325bf2bf6c13">Dart 3.3</a>, sekarang tersedia di saluran stabil. Memulai perjalanan terbaru ini dengan Flutter semudah menjalankan upgrade flutter.</p></div></div></div></div></section></div></div></article>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.com0tag:blogger.com,1999:blog-6158048950125693510.post-84799407936956289142024-02-15T09:57:00.006+07:002024-03-18T09:59:40.034+07:00Memanfaatkan API Gemini di Aplikasi Dart dan Flutter Anda<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="https://medium.com/flutter/harness-the-gemini-api-in-your-dart-and-flutter-apps-00573e560381"/>
<meta name="original_url" content="https://medium.com/flutter/harness-the-gemini-api-in-your-dart-and-flutter-apps-00573e560381"/>
<style type="text/css" data-fela-rehydration="497" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}
/*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black;
}/* Gray DOCTYPE selectors like WebKit */
.xml .hljs-meta {color: #c0c0c0;
}.hljs-comment,
.hljs-quote {color: #007400;
}.hljs-tag,
.hljs-attribute,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name {color: #aa0d91;
}.hljs-variable,
.hljs-template-variable {color: #3F6E74;
}.hljs-code,
.hljs-string,
.hljs-meta .hljs-string {color: #c41a16;
}.hljs-regexp,
.hljs-link {color: #0E0EFF;
}.hljs-title,
.hljs-symbol,
.hljs-bullet,
.hljs-number {color: #1c00cf;
}.hljs-section,
.hljs-meta {color: #643820;
}.hljs-title.class_,
.hljs-class .hljs-title,
.hljs-type,
.hljs-built_in,
.hljs-params {color: #5c2699;
}.hljs-attr {color: #836C28;
}.hljs-subst {color: #000;
}.hljs-formula {background-color: #eee;font-style: italic;
}.hljs-addition {background-color: #baeeba;
}.hljs-deletion {background-color: #ffc8bd;
}.hljs-selector-id,
.hljs-selector-class {color: #9b703f;
}.hljs-doctag,
.hljs-strong {font-weight: bold;
}.hljs-emphasis {font-style: italic;
}
</style>
<style type="text/css" data-fela-rehydration="497" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style>
<style type="text/css" data-fela-rehydration="497" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{fill:rgba(0, 0, 0, 1)}.av{height:22px}.aw{margin-left:16px}.ax{border:none}.ay{border-radius:20px}.az{width:240px}.ba{background:#F9F9F9}.bb path{fill:#6B6B6B}.bd{outline:none}.be{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bf{font-size:14px}.bg{width:100%}.bh{padding:10px 20px 10px 0}.bi{background-color:transparent}.bj{color:#242424}.bk::placeholder{color:#6B6B6B}.bl{display:inline-block}.bm{margin-left:12px}.bn{margin-right:12px}.bo{border-radius:4px}.bp{margin-left:24px}.bq{height:24px}.bw{background-color:#F9F9F9}.bx{border-radius:50%}.by{height:32px}.bz{width:32px}.ca{justify-content:center}.cg{max-width:680px}.ch{min-width:0}.ci{animation:k1 1.2s ease-in-out infinite}.cj{height:100vh}.ck{margin-bottom:16px}.cl{margin-top:48px}.cm{align-items:flex-start}.cn{flex-direction:column}.co{justify-content:space-between}.cp{margin-bottom:24px}.cv{width:80%}.cw{background-color:#F2F2F2}.dc{height:44px}.dd{width:44px}.de{margin:auto 0}.df{margin-bottom:4px}.dg{height:16px}.dh{width:120px}.di{width:80px}.do{margin-bottom:8px}.dp{width:96%}.dq{width:98%}.dr{width:81%}.ds{margin-left:8px}.dt{color:#6B6B6B}.du{font-size:13px}.dv{height:100%}.eo{color:#FFFFFF}.ep{fill:#FFFFFF}.eq{background:rgba(73, 139, 209, 1)}.er{border-color:rgba(73, 139, 209, 1)}.ev:disabled{cursor:inherit !important}.ew:disabled{opacity:0.3}.ex:disabled:hover{background:rgba(73, 139, 209, 1)}.ey:disabled:hover{border-color:rgba(73, 139, 209, 1)}.ez{border-radius:99em}.fa{border-width:1px}.fb{border-style:solid}.fc{box-sizing:border-box}.fd{text-decoration:none}.fe{text-align:center}.fh{margin-right:32px}.fi{position:relative}.fj{fill:#6B6B6B}.fm{background:transparent}.fn svg{margin-left:4px}.fo svg{fill:#6B6B6B}.fq{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fr{position:absolute}.fy{margin:0 24px}.gc{background:rgba(255, 255, 255, 1)}.gd{border:1px solid #F2F2F2}.ge{box-shadow:0 1px 4px #F2F2F2}.gf{max-height:100vh}.gg{overflow-y:auto}.gh{left:0}.gi{top:calc(100vh + 100px)}.gj{bottom:calc(100vh + 100px)}.gk{width:10px}.gl{pointer-events:none}.gm{word-break:break-word}.gn{word-wrap:break-word}.go:after{display:block}.gp:after{content:""}.gq:after{clear:both}.gr{line-height:1.23}.gs{letter-spacing:0}.gt{font-style:normal}.gu{font-weight:700}.hu{@media all and (max-width: 551.98px):8px}.hv{@media all and (min-width: 552px) and (max-width: 727.98px):8px}.hw{@media all and (min-width: 728px) and (max-width: 903.98px):16px}.hx{@media all and (min-width: 904px) and (max-width: 1079.98px):16px}.hy{@media all and (min-width: 1080px):16px}.ie{align-items:baseline}.if{width:48px}.ig{height:48px}.ih{border:2px solid rgba(255, 255, 255, 1)}.ii{z-index:0}.ij{box-shadow:none}.ik{border:1px solid rgba(0, 0, 0, 0.05)}.il{margin-left:-12px}.im{width:28px}.in{height:28px}.io{z-index:1}.ip{width:24px}.iq{margin-bottom:2px}.ir{flex-wrap:nowrap}.is{font-size:16px}.it{line-height:24px}.iv{margin:0 8px}.iw{display:inline}.ix{color:rgba(73, 139, 209, 1)}.iy{fill:rgba(73, 139, 209, 1)}.jb{flex:0 0 auto}.je{flex-wrap:wrap}.jh{white-space:pre-wrap}.ji{margin-right:4px}.jj{overflow:hidden}.jk{max-height:20px}.jl{text-overflow:ellipsis}.jm{display:-webkit-box}.jn{-webkit-line-clamp:1}.jo{-webkit-box-orient:vertical}.jp{word-break:break-all}.jr{padding-left:8px}.js{padding-right:8px}.kt> *{flex-shrink:0}.ku{overflow-x:scroll}.kv::-webkit-scrollbar{display:none}.kw{scrollbar-width:none}.kx{-ms-overflow-style:none}.ky{width:74px}.kz{flex-direction:row}.lc{-webkit-user-select:none}.ld{border:0}.le{fill:rgba(117, 117, 117, 1)}.lh{outline:0}.li{user-select:none}.lj> svg{pointer-events:none}.ls{cursor:progress}.lt{margin-left:4px}.lu{margin-top:0px}.lv{opacity:1}.lw{padding:4px 0}.lz{width:16px}.mb{display:inline-flex}.mh{max-width:100%}.mi{padding:8px 2px}.mj svg{color:#6B6B6B}.na{line-height:1.58}.nb{letter-spacing:-0.004em}.nc{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.nx{margin-bottom:-0.46em}.ny{padding:2px 4px}.nz{font-size:75%}.oa> strong{font-family:inherit}.ob{font-family:source-code-pro, Menlo, Monaco, "Courier New", Courier, monospace}.oc{text-decoration:underline}.od{list-style-type:disc}.oe{margin-left:30px}.of{padding-left:0px}.ol{margin-left:auto}.om{margin-right:auto}.on{max-width:1700px}.ot{clear:both}.ov{cursor:zoom-in}.ow{z-index:auto}.oy{height:auto}.oz{max-width:1600px}.pa{margin-top:10px}.pb{max-width:728px}.pe{list-style-type:decimal}.pf{overflow-x:auto}.pg{padding:32px}.ph{border:1px solid #E5E5E5}.pi{line-height:1.4}.pj{letter-spacing:-0.022em}.pk{margin-top:-0.2em}.pl{margin-bottom:-0.2em}.pm{white-space:pre}.pn{min-width:fit-content}.po{margin-bottom:26px}.pp{margin-top:6px}.pq{margin-top:8px}.pr{margin-right:8px}.ps{padding:8px 16px}.pt{border-radius:100px}.pu{transition:background 300ms ease}.pw{white-space:nowrap}.px{border-top:none}.qd{height:52px}.qe{max-height:52px}.qf{box-sizing:content-box}.qg{position:static}.qi{max-width:155px}.qo{margin-right:20px}.qu{align-items:flex-end}.qv{width:76px}.qw{height:76px}.qx{border:2px solid #F9F9F9}.qy{height:72px}.qz{width:72px}.ra{margin-left:-16px}.rb{width:36px}.rc{height:36px}.rd{width:auto}.re{stroke:#F2F2F2}.rf{color:#F2F2F2}.rg{fill:#F2F2F2}.rh{background:#F2F2F2}.ri{border-color:#F2F2F2}.ro{font-weight:500}.rp{font-size:24px}.rq{line-height:30px}.rr{letter-spacing:-0.016em}.rs{margin-top:16px}.rt{height:0px}.ru{border-bottom:solid 1px #E5E5E5}.sa{margin-top:72px}.sb{padding:24px 0}.sc{margin-bottom:0px}.sd{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.es:hover{background:rgba(68, 119, 175, 1)}.et:hover{border-color:rgba(68, 119, 175, 1)}.eu:hover{cursor:pointer}.fk:hover{color:#242424}.fl:hover{fill:#242424}.fp:hover svg{fill:#242424}.fs:hover{background-color:rgba(0, 0, 0, 0.1)}.iu:hover{text-decoration:underline}.iz:hover:not(:disabled){color:rgba(68, 119, 175, 1)}.ja:hover:not(:disabled){fill:rgba(68, 119, 175, 1)}.lg:hover{fill:rgba(8, 8, 8, 1)}.lx:hover{fill:#000000}.ly:hover p{color:#000000}.ma:hover{color:#000000}.mk:hover svg{color:#000000}.pv:hover{background-color:#F2F2F2}.rj:hover{background:#F2F2F2}.rk:hover{border-color:#F2F2F2}.rl:hover{cursor:wait}.rm:hover{color:#F2F2F2}.rn:hover{fill:#F2F2F2}.bc:focus-within path{fill:#242424}.lf:focus{fill:rgba(8, 8, 8, 1)}.ml:focus svg{color:#000000}.ox:focus{transform:scale(1.01)}.lk:active{border-style:none}</style>
<style type="text/css" data-fela-rehydration="497" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ee{font-size:14px}.ef{line-height:20px}.el{font-size:13px}.em{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:68px}.gb{max-width:680px}.hp{font-size:42px}.hq{margin-top:1.19em}.hr{margin-bottom:32px}.hs{line-height:52px}.ht{letter-spacing:-0.011em}.id{align-items:center}.kf{border-top:solid 1px #F2F2F2}.kg{border-bottom:solid 1px #F2F2F2}.kh{margin:32px 0 0}.ki{padding:3px 8px}.kr> *{margin-right:24px}.ks> :last-child{margin-right:0}.lr{margin-top:0px}.mg{margin:0}.nt{font-size:20px}.nu{margin-top:2.14em}.nv{line-height:32px}.nw{letter-spacing:-0.003em}.ok{margin-top:1.14em}.os{margin-top:56px}.qc{margin-bottom:88px}.qn{display:inline-block}.qt{padding-top:72px}.rz{margin-top:40px}</style>
<style type="text/css" data-fela-rehydration="497" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.lq{margin-top:0px}.pc{margin-left:auto}.pd{text-align:center}.qm{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="497" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.lp{margin-top:0px}.ql{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="497" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.ln{margin-top:0px}.lo{margin-right:0px}.qk{display:inline-block}</style>
<style type="text/css" data-fela-rehydration="497" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.br{width:24px}.cb{margin:0 24px}.cq{height:40px}.cx{margin-bottom:44px}.dj{margin-bottom:32px}.dw{font-size:13px}.dx{line-height:20px}.eg{padding:0px 8px 1px}.ft{margin-bottom:4px}.gv{font-size:32px}.gw{margin-top:1.01em}.gx{margin-bottom:24px}.gy{line-height:38px}.gz{letter-spacing:-0.014em}.hz{align-items:flex-start}.jc{flex-direction:column}.jf{margin-bottom:2px}.jt{margin:24px -24px 0}.ju{padding:0}.kj> *{margin-right:8px}.kk> :last-child{margin-right:24px}.la{margin-left:0px}.ll{margin-top:0px}.lm{margin-right:0px}.mc{margin:0}.mm{border:1px solid #F2F2F2}.mn{border-radius:99em}.mo{padding:0px 16px 0px 12px}.mp{height:38px}.mq{align-items:center}.ms svg{margin-right:8px}.nd{font-size:18px}.ne{margin-top:1.56em}.nf{line-height:28px}.ng{letter-spacing:-0.003em}.og{margin-top:1.34em}.oo{margin-top:40px}.py{margin-bottom:80px}.qj{display:inline-block}.qp{padding-top:48px}.rv{margin-top:32px}.mr:hover{border-color:#E5E5E5}</style>
<style type="text/css" data-fela-rehydration="497" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bu{width:64px}.ce{margin:0 64px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.ec{font-size:14px}.ed{line-height:20px}.ej{font-size:13px}.ek{padding:5px 12px}.ff{display:flex}.fw{margin-bottom:68px}.ga{max-width:680px}.hk{font-size:42px}.hl{margin-top:1.19em}.hm{margin-bottom:32px}.hn{line-height:52px}.ho{letter-spacing:-0.011em}.ic{align-items:center}.kb{border-top:solid 1px #F2F2F2}.kc{border-bottom:solid 1px #F2F2F2}.kd{margin:32px 0 0}.ke{padding:3px 8px}.kp> *{margin-right:24px}.kq> :last-child{margin-right:0}.mf{margin:0}.np{font-size:20px}.nq{margin-top:2.14em}.nr{line-height:32px}.ns{letter-spacing:-0.003em}.oj{margin-top:1.14em}.or{margin-top:56px}.qb{margin-bottom:88px}.qs{padding-top:72px}.ry{margin-top:40px}</style>
<style type="text/css" data-fela-rehydration="497" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bt{width:64px}.cd{margin:0 48px}.cs{height:48px}.cz{margin-bottom:52px}.dl{margin-bottom:48px}.ea{font-size:13px}.eb{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:68px}.fz{max-width:680px}.hf{font-size:42px}.hg{margin-top:1.19em}.hh{margin-bottom:32px}.hi{line-height:52px}.hj{letter-spacing:-0.011em}.ib{align-items:center}.jx{border-top:solid 1px #F2F2F2}.jy{border-bottom:solid 1px #F2F2F2}.jz{margin:32px 0 0}.ka{padding:3px 8px}.kn> *{margin-right:24px}.ko> :last-child{margin-right:0}.me{margin:0}.nl{font-size:20px}.nm{margin-top:2.14em}.nn{line-height:32px}.no{letter-spacing:-0.003em}.oi{margin-top:1.14em}.oq{margin-top:56px}.qa{margin-bottom:88px}.qr{padding-top:72px}.rx{margin-top:40px}</style>
<style type="text/css" data-fela-rehydration="497" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dy{font-size:13px}.dz{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:4px}.ha{font-size:32px}.hb{margin-top:1.01em}.hc{margin-bottom:24px}.hd{line-height:38px}.he{letter-spacing:-0.014em}.ia{align-items:flex-start}.jd{flex-direction:column}.jg{margin-bottom:2px}.jv{margin:24px 0 0}.jw{padding:0}.kl> *{margin-right:8px}.km> :last-child{margin-right:8px}.lb{margin-left:0px}.md{margin:0}.mt{border:1px solid #F2F2F2}.mu{border-radius:99em}.mv{padding:0px 16px 0px 12px}.mw{height:38px}.mx{align-items:center}.mz svg{margin-right:8px}.nh{font-size:18px}.ni{margin-top:1.56em}.nj{line-height:28px}.nk{letter-spacing:-0.003em}.oh{margin-top:1.34em}.op{margin-top:40px}.pz{margin-bottom:80px}.qq{padding-top:48px}.rw{margin-top:32px}.my:hover{border-color:#E5E5E5}</style>
<style type="text/css" data-fela-rehydration="497" data-fela-type="RULE" media="print">.qh{display:none}</style>
<style type="text/css" data-fela-rehydration="497" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.jq{max-height:none}</style>
<style type="text/css" data-fela-rehydration="497" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.ou{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style>
</head><body>
<article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fr gh gi gj gk gl"></div><div class="gm gn go gp gq"><div class="ab ca"><div class="ch bg fy fz ga gb"><div><div class="hu hv hw hx hy"><div class="speechify-ignore ab co"><div class="speechify-ignore bg l"><div class="hz ia ib ic id ab"><div><div class="ab ie"><a rel="noopener follow" href="/@anderdobo?source=post_page-----00573e560381--------------------------------"><div><div class="bl" aria-hidden="false"><div class="l if ig bx ih ii"><div class="l fi"><img alt="Ander Dobo" class="l fc bx dc dd cw" src="https://miro.medium.com/v2/resize:fill:88:88/1*9QBbBTP_oiuZGZf0I49AKA.png" width="44" height="44" loading="lazy" data-testid="authorPhoto"><div class="ij bx l dc dd fr n ik fs"></div></div></div></div></div></a><a href="https://medium.com/flutter?source=post_page-----00573e560381--------------------------------" rel="noopener follow"><div class="il ab fi"><div><div class="bl" aria-hidden="false"><div class="l im in bx ih io"><div class="l fi"><img alt="Flutter" class="l fc bx bq ip cw" src="https://miro.medium.com/v2/resize:fill:48:48/1*5-aoK8IBmXve5whBQM90GA.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"><div class="ij bx l bq ip fr n ik fs"></div></div></div></div></div></div></a></div></div><div class="bm bg l"><div class="ab"><div style="flex:1"><span class="be b bf z bj"><div class="iq ab q"><div class="ab q ir"><div class="ab q"><div><div class="bl" aria-hidden="false"><p class="be b is it bj"><a class="af ag ah ai aj ak al am an ao ap aq ar iu" data-testid="authorName" rel="noopener follow" href="/@anderdobo?source=post_page-----00573e560381--------------------------------">Ander Dobo</a></p></div></div></div><span class="iv iw" aria-hidden="true"><span class="be b bf z dt">·</span></span><p class="be b is it dt"><span><a class="ix iy ah ai aj ak al am an ao ap aq ar ew iz ja" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2Ff5af3936c0b2&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fharness-the-gemini-api-in-your-dart-and-flutter-apps-00573e560381&user=Ander+Dobo&userId=f5af3936c0b2&source=post_page-f5af3936c0b2----00573e560381---------------------post_header-----------">Ikuti</a></span></p></div></div></span></div></div><div class="l jb"><span class="be b bf z dt"><div class="ab cm jc jd je"><div class="jf jg ab"><div class="be b bf z dt ab jh"><span class="ji l jb">Dipublikasikan di</span><div><div class="bl" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar iu ab q" data-testid="publicationName" href="https://medium.com/flutter?source=post_page-----00573e560381--------------------------------" rel="noopener follow"><p class="be b bf z jj jk jl jm jn jo jp jq bj">Flutter</p></a></div></div></div><div class="h k"><span class="iv iw" aria-hidden="true"><span class="be b bf z dt">·</span></span></div></div><span class="be b bf z dt"><div class="ab ae"><span data-testid="storyReadTime">Bacaan 5 menit</span><div class="jr js l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="be b bf z dt">·</span></span></div><span data-testid="storyPublishDate"></span></div></span></div></span></div></div></div><div class="ab co jt ju jv jw jx jy jz ka kb kc kd ke kf kg kh ki"><div class="h k w ff fg q"><div class="ky l"><div class="ab q kz"><div class="pw-multi-vote-icon fi ji la lb lc"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fflutter%2F00573e560381&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fharness-the-gemini-api-in-your-dart-and-flutter-apps-00573e560381&user=Ander+Dobo&userId=f5af3936c0b2&source=-----00573e560381---------------------clap_footer-----------"><div><div class="bl" aria-hidden="false"><div class="ld ao le lf lg lh am li lj lk lc"><svg width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.37.83L12 3.28l.63-2.45h-1.26zM13.92 3.95l1.52-2.1-1.18-.4-.34 2.5zM8.59 1.84l1.52 2.11-.34-2.5-1.18.4zM18.52 18.92a4.23 4.23 0 0 1-2.62 1.33l.41-.37c2.39-2.4 2.86-4.95 1.4-7.63l-.91-1.6-.8-1.67c-.25-.56-.19-.98.21-1.29a.7.7 0 0 1 .55-.13c.28.05.54.23.72.5l2.37 4.16c.97 1.62 1.14 4.23-1.33 6.7zm-11-.44l-4.15-4.15a.83.83 0 0 1 1.17-1.17l2.16 2.16a.37.37 0 0 0 .51-.52l-2.15-2.16L3.6 11.2a.83.83 0 0 1 1.17-1.17l3.43 3.44a.36.36 0 0 0 .52 0 .36.36 0 0 0 0-.52L5.29 9.51l-.97-.97a.83.83 0 0 1 0-1.16.84.84 0 0 1 1.17 0l.97.97 3.44 3.43a.36.36 0 0 0 .51 0 .37.37 0 0 0 0-.52L6.98 7.83a.82.82 0 0 1-.18-.9.82.82 0 0 1 .76-.51c.22 0 .43.09.58.24l5.8 5.79a.37.37 0 0 0 .58-.42L13.4 9.67c-.26-.56-.2-.98.2-1.29a.7.7 0 0 1 .55-.13c.28.05.55.23.73.5l2.2 3.86c1.3 2.38.87 4.59-1.29 6.75a4.65 4.65 0 0 1-4.19 1.37 7.73 7.73 0 0 1-4.07-2.25zm3.23-12.5l2.12 2.11c-.41.5-.47 1.17-.13 1.9l.22.46-3.52-3.53a.81.81 0 0 1-.1-.36c0-.23.09-.43.24-.59a.85.85 0 0 1 1.17 0zm7.36 1.7a1.86 1.86 0 0 0-1.23-.84 1.44 1.44 0 0 0-1.12.27c-.3.24-.5.55-.58.89-.25-.25-.57-.4-.91-.47-.28-.04-.56 0-.82.1l-2.18-2.18a1.56 1.56 0 0 0-2.2 0c-.2.2-.33.44-.4.7a1.56 1.56 0 0 0-2.63.75 1.6 1.6 0 0 0-2.23-.04 1.56 1.56 0 0 0 0 2.2c-.24.1-.5.24-.72.45a1.56 1.56 0 0 0 0 2.2l.52.52a1.56 1.56 0 0 0-.75 2.61L7 19a8.46 8.46 0 0 0 4.48 2.45 5.18 5.18 0 0 0 3.36-.5 4.89 4.89 0 0 0 4.2-1.51c2.75-2.77 2.54-5.74 1.43-7.59L18.1 7.68z"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l ll lm ln lo lp lq lr"><p class="be b du z dt"><span class="ls">--</span></p></div></div></div><div><div class="bl" aria-hidden="false"><button class="ao ld lv lw ab q fj lx ly" aria-label="responses"><svg width="24" height="24" viewBox="0 0 24 24" class="lu"><path d="M18 16.8a7.14 7.14 0 0 0 2.24-5.32c0-4.12-3.53-7.48-8.05-7.48C7.67 4 4 7.36 4 11.48c0 4.13 3.67 7.48 8.2 7.48a8.9 8.9 0 0 0 2.38-.32c.23.2.48.39.75.56 1.06.69 2.2 1.04 3.4 1.04.22 0 .4-.11.48-.29a.5.5 0 0 0-.04-.52 6.4 6.4 0 0 1-1.16-2.65v.02zm-3.12 1.06l-.06-.22-.32.1a8 8 0 0 1-2.3.33c-4.03 0-7.3-2.96-7.3-6.59S8.17 4.9 12.2 4.9c4 0 7.1 2.96 7.1 6.6 0 1.8-.6 3.47-2.02 4.72l-.2.16v.26l.02.3a6.74 6.74 0 0 0 .88 2.4 5.27 5.27 0 0 1-2.17-.86c-.28-.17-.72-.38-.94-.59l.01-.02z"></path></svg><p class="be b du z dt"><span class="pw-responses-count lt lu">5</span></p></button></div></div></div><div class="ab q kj kk kl km kn ko kp kq kr ks kt ku kv kw kx"><div class="lz k j i d"></div><div class="h k"><div><div class="bl" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F00573e560381&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fflutter%2Fharness-the-gemini-api-in-your-dart-and-flutter-apps-00573e560381&source=-----00573e560381---------------------bookmark_footer-----------"><svg width="25" height="25" viewBox="0 0 25 25" fill="none" class="dt ma" aria-label="Add to list bookmark button"><path d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18V2.5zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .8.4l5.7-4.4 5.7 4.4a.5.5 0 0 0 .8-.4v-8.5a.5.5 0 0 0-1 0v7.48l-5.2-4a.5.5 0 0 0-.6 0l-5.2 4V7z" fill="currentColor"></path></svg></a></span></div></div></div><div class="fc mb cm"><div class="l ae"><div class="ab ca"><div class="mc md me mf mg mh ch bg"><div class="ab"><div class="bl bg" aria-hidden="false"><div><div class="bl" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fj ah ai aj ak al mi an ao ap ew mj mk ly ml mm mn mo mp s mq mr ms mt mu mv mw u mx my mz"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0zm9-10a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.38 10.42l-4.6 3.06a.5.5 0 0 1-.78-.41V8.93c0-.4.45-.63.78-.41l4.6 3.06c.3.2.3.64 0 .84z" fill="currentColor"></path></svg><div class="j i d"><p class="be b bf z dt">Dengarkan</p></div></button></div></div></div></div></div></div></div></div><div class="bl" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bl" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fj ah ai aj ak al mi an ao ap ew mj mk ly ml mm mn mo mp s mq mr ms mt mu mv mw u mx my mz"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.22 4.93a.42.42 0 0 1-.12.13h.01a.45.45 0 0 1-.29.08.52.52 0 0 1-.3-.13L12.5 3v7.07a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5V3.02l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.8a.42.42 0 0 1 .07.5zm-.1.14zm.88 2h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.14c.1.1.15.22.15.35a.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9V8.96c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1z" fill="currentColor"></path></svg><div class="j i d"><p class="be b bf z dt">Bagikan</p></div></button></div></div></div></div></div></div></div></div></div><p id="aa71" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj"><strong class="nc gu">Memperkenalkan Google AI Dart SDK</strong></p><p id="4644" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Kami sangat gembira mengumumkan peluncuran Google AI Dart SDK untuk API Gemini. Paket pub.dev baru, <code class="cw ny nz oa ob b"><a class="af oc" href="https://pub.dev/packages/google_generative_ai" rel="noopener ugc nofollow" target="_blank">google_generative_ai</a></code><a class="af oc" href="https://pub.dev/packages/google_generative_ai" rel="noopener ugc nofollow" target="_blank">,</a> dan <a class="af oc" href="https://ai.google.dev/tutorials/dart_quickstart" rel="noopener ugc nofollow" target="_blank">sumber daya pendukung</a> memungkinkan Anda membuat fitur berbasis AI generatif Anda sendiri ke dalam aplikasi Dart dan Flutter melalui integrasi Dart idiomatis dengan API Gemini. Hal ini membuka peluang luas untuk membuat aplikasi cerdas dan berperforma baik untuk Android, iOS, web, MacOS, Windows, dan Linux dari satu code base.</p><p id="9552" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Dengan Google AI Dart SDK, Anda dapat:</p><ul class=""><li id="ac56" class="na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx od oe of bj"><strong class="nc gu">Mengintegrasikan fitur AI generatif dengan mudah: </strong>Menambahkan pembuatan teks tingkat lanjut, ringkasan, chat, dan lainnya ke aplikasi Dart atau Flutter Anda dengan penyiapan minimal.</li><li id="10a9" class="na nb gt nc b nd og nf ng nh oh nj nk nl oi nn no np oj nr ns nt ok nv nw nx od oe of bj"><strong class="nc gu">Memanfaatkan model Google yang paling mumpuni dan umum:</strong> Model Gemini memanfaatkan penelitian dan pengembangan ekstensif Google dalam machine learning, sehingga memberi Anda akses ke kemampuan AI generatif yang akan terus ditingkatkan.</li><li id="684b" class="na nb gt nc b nd og nf ng nh oh nj nk nl oi nn no np oj nr ns nt ok nv nw nx od oe of bj"><strong class="nc gu">Mempercepat pengembangan aplikasi Anda yang didukung AI: </strong>Fokus pada logika aplikasi dan pengalaman pengguna Anda, sementara SDK menangani seluk-beluk interaksi dengan model AI.</li><li id="c3f5" class="na nb gt nc b nd og nf ng nh oh nj nk nl oi nn no np oj nr ns nt ok nv nw nx od oe of bj"><strong class="nc gu">Membuat aplikasi yang didukung AI lintas platform:</strong> Buat fitur AI generatif dengan mudah di desktop, web, dan aplikasi seluler menggunakan Flutter.</li><li id="8a62" class="na nb gt nc b nd og nf ng nh oh nj nk nl oi nn no np oj nr ns nt ok nv nw nx od oe of bj"><strong class="nc gu">Menggunakan API Gemini di 180+ negara dan wilayah: </strong>Periksa <a class="af oc" href="https://ai.google.dev/available_regions#available_regions" rel="noopener ugc nofollow" target="_blank">wilayah yang tersedia</a> untuk mengetahui daftar terkini negara dan wilayah ketersediaan API Gemini dan Google AI Studio (dijelaskan lebih lanjut di bawah).</li></ul><figure class="oo op oq or os ot ol om paragraph-image"><div role="button" tabindex="0" class="ou ov fi ow bg ox"><div class="ol om on"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/1*-KkJmzvv3jNhh88TWxIBJg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*-KkJmzvv3jNhh88TWxIBJg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*-KkJmzvv3jNhh88TWxIBJg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*-KkJmzvv3jNhh88TWxIBJg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*-KkJmzvv3jNhh88TWxIBJg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*-KkJmzvv3jNhh88TWxIBJg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*-KkJmzvv3jNhh88TWxIBJg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/1*-KkJmzvv3jNhh88TWxIBJg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*-KkJmzvv3jNhh88TWxIBJg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*-KkJmzvv3jNhh88TWxIBJg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*-KkJmzvv3jNhh88TWxIBJg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*-KkJmzvv3jNhh88TWxIBJg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*-KkJmzvv3jNhh88TWxIBJg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*-KkJmzvv3jNhh88TWxIBJg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bg mh oy c" width="700" height="700" loading="lazy" role="presentation"></picture></div></div></figure><p id="d69e" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj"><strong class="nc gu">Apa yang dapat Anda buat?</strong></p><p id="1a23" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Kami percaya AI generatif memiliki potensi besar untuk membantu Anda mencapai tujuan aplikasi dan bisnis Anda. Dan karena model Gemini bersifat multimodal (mampu memproses informasi dari berbagai modalitas, termasuk gambar dan teks), model ini memberdayakan Anda untuk menjadi sangat kreatif. Namun, pertanyaan pertama yang sering kami dapat dari developer aplikasi — dan bahkan dari dalam tim kami sendiri — adalah “Apa yang sebenarnya bisa saya lakukan dengan API Gemini?” Inilah beberapa contoh fitur yang mungkin Anda buat untuk aplikasi Dart atau Flutter:</p><ul class=""><li id="99f7" class="na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx od oe of bj"><strong class="nc gu">Ringkasan teks:</strong> Membuat ringkasan singkat artikel panjang, makalah penelitian, atau konten situs web dari input tekstual.</li><li id="67de" class="na nb gt nc b nd og nf ng nh oh nj nk nl oi nn no np oj nr ns nt ok nv nw nx od oe of bj"><strong class="nc gu">Chatbot cerdas:</strong> Membuat antarmuka percakapan yang lebih menarik dan mirip manusia, sehingga meningkatkan pengalaman pengguna dalam aplikasi Anda.</li><li id="d9c8" class="na nb gt nc b nd og nf ng nh oh nj nk nl oi nn no np oj nr ns nt ok nv nw nx od oe of bj"><strong class="nc gu">Mesin telusur visual: </strong>Pengguna dapat mengunggah gambar, dan aplikasi menggunakan API Gemini untuk memberikan deskripsi tentang sesuatu yang ada dalam gambar, gayanya, dan bahkan mungkin cara membuat sesuatu yang ada dalam gambar tersebut.</li><li id="c99b" class="na nb gt nc b nd og nf ng nh oh nj nk nl oi nn no np oj nr ns nt ok nv nw nx od oe of bj"><strong class="nc gu">Deskripsi gambar untuk aksesibilitas:</strong> Membuat deskripsi teks terperinci dari gambar yang diupload untuk membantu pengguna tunanetra.</li><li id="f7cb" class="na nb gt nc b nd og nf ng nh oh nj nk nl oi nn no np oj nr ns nt ok nv nw nx od oe of bj"><strong class="nc gu">Interpretasi diagram & bagan: </strong>Pengguna dapat mengupload gambar diagram, bagan, atau grafik, dan API Gemini memberikan analisis dan penjelasan data berbasis teks.</li></ul><p id="f369" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Daftar ini bisa terus bertambah karena kemungkinannya hampir tidak terbatas!</p><figure class="oo op oq or os ot ol om paragraph-image"><div role="button" tabindex="0" class="ou ov fi ow bg ox"><div class="ol om oz"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*7Zvr0YiN7O22wTOy 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*7Zvr0YiN7O22wTOy 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*7Zvr0YiN7O22wTOy 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*7Zvr0YiN7O22wTOy 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*7Zvr0YiN7O22wTOy 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*7Zvr0YiN7O22wTOy 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*7Zvr0YiN7O22wTOy 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*7Zvr0YiN7O22wTOy 640w, https://miro.medium.com/v2/resize:fit:720/0*7Zvr0YiN7O22wTOy 720w, https://miro.medium.com/v2/resize:fit:750/0*7Zvr0YiN7O22wTOy 750w, https://miro.medium.com/v2/resize:fit:786/0*7Zvr0YiN7O22wTOy 786w, https://miro.medium.com/v2/resize:fit:828/0*7Zvr0YiN7O22wTOy 828w, https://miro.medium.com/v2/resize:fit:1100/0*7Zvr0YiN7O22wTOy 1100w, https://miro.medium.com/v2/resize:fit:1400/0*7Zvr0YiN7O22wTOy 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="Screenshot aplikasi contoh Flutter yang menggunakan Google AI Dart SDK" class="bg mh oy c" width="700" height="411" loading="lazy"></picture></div></div><figcaption class="pa fe pb ol om pc pd be b bf z dt">Screenshot aplikasi contoh Flutter yang menggunakan Google AI Dart SDK</figcaption></figure><p id="1d34" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj"><strong class="nc gu">Memulai</strong></p><p id="9eb1" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Lihat <a class="af oc" href="https://ai.google.dev/tutorials/dart_quickstart" rel="noopener ugc nofollow" target="_blank">Panduan memulai Dart</a> untuk panduan langkah demi langkah yang mendetail tentang cara melakukan penyiapan. Pada tingkat tinggi, inilah yang akan Anda lakukan:</p><ol class=""><li id="692d" class="na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx pe oe of bj">Dapatkan kunci API Gemini dari Google AI Studio. Jaga keamanan kunci ini. Kami sangat menyarankan agar Anda tidak menyertakan kunci secara langsung dalam kode Anda, atau memasukkan file yang berisi kunci tersebut ke dalam sistem kontrol versi. Saat melakukan pengembangan, sebaiknya gunakan <code class="cw ny nz oa ob b">flutter run -d [DEVICE NAME] — dart-define=API_KEY=[YOUR API KEY]</code> untuk menjalankan aplikasi di emulator/simulator, dengan menggunakan kunci API Anda sebagai variabel lingkungan.</li><li id="2f2d" class="na nb gt nc b nd og nf ng nh oh nj nk nl oi nn no np oj nr ns nt ok nv nw nx pe oe of bj">Tambahkan Google AI Dart SDK ke aplikasi Dart atau Flutter Anda dengan masing-masing menjalankan <code class="cw ny nz oa ob b">dart pub add google_generative_ai</code> atau <code class="cw ny nz oa ob b">flutter pub add google_generative_ai</code>. Ini menambahkan <code class="cw ny nz oa ob b">google_generative_ai</code> sebagai dependensi pada file `pubspec.yaml` Anda.</li><li id="57e1" class="na nb gt nc b nd og nf ng nh oh nj nk nl oi nn no np oj nr ns nt ok nv nw nx pe oe of bj">Melakukan inisialisasi model generatif dalam kode Anda:</li></ol><pre class="oo op oq or os pf ob pg bo ph ba bj"><span id="0f66" class="pi pj gt ob b bf pk pl l pm pn">import 'package:google_generative_ai/google_generative_ai.dart';<br><br>// Access your API key as an environment variable (see first step above)<br>final apiKey = Platform.environment['API_KEY'];<br>if (apiKey == null) {<br> print('No \$API_KEY environment variable');<br> exit(1);<br>}<br><br>final model = GenerativeModel(model: 'MODEL_NAME', apiKey: apiKey);</span></pre><p id="d05e" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">4. Kini, Anda dapat mulai menjelajah menggunakan API Gemini untuk mengimplementasikan berbagai kasus penggunaan. Misalnya, ketika input perintah menyertakan teks dan gambar, gunakan model <code class="cw ny nz oa ob b">gemini-pro-vision</code> dan metode <code class="cw ny nz oa ob b">generateContent</code> untuk menghasilkan output teks:</p><pre class="oo op oq or os pf ob pg bo ph ba bj"><span id="5f80" class="pi pj gt ob b bf pk pl l pm pn">import 'dart:io';<br><br>import 'package:google_generative_ai/google_generative_ai.dart';<br><br>void main() async {<br> // Access your API key as an environment variable (see first step above)<br> final apiKey = Platform.environment['API_KEY'];<br> if (apiKey == null) {<br> print('No \$API_KEY environment variable');<br> exit(1);<br> }<br> // For text-and-image input (multimodal), use the gemini-pro-vision model<br> final model = GenerativeModel(model: 'gemini-pro-vision', apiKey: apiKey);<br> final (firstImage, secondImage) = await (<br> File('image0.jpg').readAsBytes(),<br> File('image1.jpg').readAsBytes()<br> ).wait;<br> final prompt = TextPart("What's different between these pictures?");<br> final imageParts = [<br> DataPart('image/jpeg', firstImage),<br> DataPart('image/jpeg', secondImage),<br> ];<br> final response = await model.generateContent([<br> Content.multi([prompt, ...imageParts])<br> ]);<br> print(response.text);<br>}</span></pre><p id="775e" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Jelajahi <a class="af oc" href="https://ai.google.dev/docs" rel="noopener ugc nofollow" target="_blank">dokumentasi API Gemini</a> dan lihat <a class="af oc" href="https://github.com/google/generative-ai-dart/tree/main/samples" rel="noopener ugc nofollow" target="_blank">aplikasi contoh Dart dan Flutter</a> di repo GitHub untuk panduan mendetail dan contoh tentang cara menggunakan SDK untuk berbagai kasus penggunaan, atau di <a class="af oc" href="https://dartpad.dev/?id=341bc46b2ed1d2055d357ab987ed5fc2" rel="noopener ugc nofollow" target="_blank">aplikasi contoh ini</a> di DartPad, yang merupakan editor online sumber terbuka gratis untuk cuplikan Dart dan Flutter, kini dibuat dengan Flutter. Silakan laporkan masalah apa pun atau beri tahu kami tentang permintaan fitur di <a class="af oc" href="https://github.com/google/generative-ai-dart/issues/new/choose" rel="noopener ugc nofollow" target="_blank">generative-ai-dart GitHub repo</a>.</p><p id="c18a" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj"><strong class="nc gu">Google AI Studio</strong></p><p id="4a80" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Selain SDK, <a class="af oc" href="https://aistudio.google.com/?utm_source=flutter&utm_medium=referral&utm_campaign=blog_gaidartsdk_announcment&utm_content=" rel="noopener ugc nofollow" target="_blank">Google AI Studio</a> adalah IDE berbasis browser untuk pembuatan prototipe dengan model generatif. Hal ini memungkinkan Anda melakukan iterasi dengan cepat mengembangkan perintah untuk kasus penggunaan Anda, lalu mendapatkan kunci API untuk digunakan dalam pengembangan aplikasi Anda. Anda dapat login ke Google AI Studio dengan akun Google Anda dan memanfaatkan kuota gratis yang memungkinkan 60 permintaan per menit. Untuk membantu kami meningkatkan kualitas produk, saat Anda menggunakan kuota gratis, input dan output Google AI Studio Anda mungkin dapat diakses oleh peninjau terlatih. Data ini tidak diidentifikasi dari akun Google dan kunci API Anda.</p><p id="d24a" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Kami akan segera menambahkan Dart ke Google AI Studio, jadi nantikan pengumumannya! Ini memungkinkan Anda cukup mengklik “Dapatkan kode”, memilih tab Dart baru (yang akan berada di samping bahasa yang didukung), lalu “Salin” kode Dart untuk mentransfer pekerjaan Anda ke IDE pilihan Anda.</p><figure class="oo op oq or os ot ol om paragraph-image"><div role="button" tabindex="0" class="ou ov fi ow bg ox"><div class="ol om oz"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*xhBJ20OLOQDtQ2xi 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*xhBJ20OLOQDtQ2xi 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*xhBJ20OLOQDtQ2xi 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*xhBJ20OLOQDtQ2xi 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*xhBJ20OLOQDtQ2xi 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*xhBJ20OLOQDtQ2xi 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*xhBJ20OLOQDtQ2xi 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*xhBJ20OLOQDtQ2xi 640w, https://miro.medium.com/v2/resize:fit:720/0*xhBJ20OLOQDtQ2xi 720w, https://miro.medium.com/v2/resize:fit:750/0*xhBJ20OLOQDtQ2xi 750w, https://miro.medium.com/v2/resize:fit:786/0*xhBJ20OLOQDtQ2xi 786w, https://miro.medium.com/v2/resize:fit:828/0*xhBJ20OLOQDtQ2xi 828w, https://miro.medium.com/v2/resize:fit:1100/0*xhBJ20OLOQDtQ2xi 1100w, https://miro.medium.com/v2/resize:fit:1400/0*xhBJ20OLOQDtQ2xi 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="Screenshot Google AI Studio" class="bg mh oy c" width="700" height="539" loading="lazy"></picture></div></div><figcaption class="pa fe pb ol om pc pd be b bf z dt">Google AI Studio</figcaption></figure><p id="dea3" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj"><strong class="nc gu">Bagikan yang Anda buat!</strong></p><p id="3aa0" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Kami menantikan yang akan Anda buat dengan Gemini, seperti tim di LeanCode yang menggunakan API Gemini untuk membuat <a class="af oc" href="https://leancode.co/arb_translate" rel="noopener ugc nofollow" target="_blank">arb_translate</a>. Ini adalah paket yang membantu developer melakukan terjemahan bahasa secara otomatis, menyederhanakan pelokalan di aplikasi Flutter.</p><p id="e870" class="pw-post-body-paragraph na nb gt nc b nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv nw nx gm bj">Gunakan hashtag #BuildWithGemini di Twitter/X untuk memberi tahu kami yang sedang Anda buat!</p></div></div></div></div></section></div></div></article>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-8447975877651590522024-01-29T10:32:00.006+07:002024-03-01T10:35:20.286+07:00Meminta pengguna untuk mengupdate aplikasi Anda ke versi terbaru<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="https://android-developers.googleblog.com/2024/01/prompt-users-to-update-to-your-latest-app-version-google-play.html"/>
<meta name="original_url" content="https://android-developers.googleblog.com/2024/01/prompt-users-to-update-to-your-latest-app-version-google-play.html"/>
<style id="page-skin-1" type="text/css"><!--
body {
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
-webkit-font-smoothing: antialiased;
color: #202124
}
h1 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px
}
h2 {
font-size: 30px;
line-height: 40px
}
h2,
h3 {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500
}
h3 {
font-size: 24px;
line-height: 32px
}
h4 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 26px
}
h5 {
font-size: 16px;
line-height: 24px
}
h5,
h6 {
font-family: Roboto, sans-serif;
font-weight: 600
}
h6 {
font-size: 14px;
line-height: 22px
}
.display {
font-family: Roboto, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 67.2px
}
.hidden-text {
height: 1px;
overflow: hidden;
pointer-events: none;
position: absolute;
top: -10px;
width: 1px
}
img,
video {
border: 0;
height: auto;
max-width: 100%
}
body {
position: relative;
min-height: 100vh
}
body.no-scroll {
overflow: hidden
}
a {
color: #4184f3;
text-decoration: none
}
a:focus,
a:focus-visible {
outline-offset: -2px
}
.content-wrap {
padding-top: 200px;
max-width: 800px;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:915px) {
.content-wrap {
padding-top: 100px
}
}
.full-width {
width: 100%
}
.icon-link {
height: 42px;
width: 132px;
border-radius: 80px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: baseline;
-ms-flex-pack: center;
justify-content: baseline;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
background: transparent;
border: none;
color: black !important
}
.icon-link:hover {
background-color: hsla(213, 7%, 76%, .2)
}
.icon-link:focus {
background-color: hsla(213, 7%, 76%, .26)
}
.icon-link:active {
background-color: hsla(213, 7%, 76%, .32)
}
.adb-container {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto;
max-width: 1420px
}
@media only screen and (max-width:767px) {
.adb-container {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--large {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto
}
@media only screen and (max-width:767px) {
.adb-container--large {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--flex-horizontal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.section,
body {
margin: 0
}
.adb-card {
position: relative;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
margin: 40px 0;
padding: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: box-shadow .2s linear, opacity .2s linear;
transition: box-shadow .2s linear, opacity .2s linear, -webkit-box-shadow .2s linear
}
.divider {
border: none;
height: 1px;
color: #DADCE0;
background-color: #DADCE0;
margin: 0 20px;
}
.adb-card:first-child {
background-color: #d7effe;
border: none;
padding: 32px 24px 32px;
margin: 40px 20px 60px;
}
@media only screen and (max-width:850px) {
.adb-card {
max-height: unset;
padding: 0 20px
}
.adb-card:first-child {
margin-bottom: 40px;
}
}
@media only screen and (max-width:600px) {
.adb-card:first-child {
margin: 0 -20px 40px;
}
.adb-card {
border-radius: 0;
padding: 0;
}
.divider {
margin: 0;
}
.content-wrap {
padding-top: 54px;
}
}
.adb-card:focus-within,
.adb-card:hover {
-webkit-box-shadow: 0 0 36px rgba(0, 0, 0, .1);
box-shadow: 0 0 36px rgba(0, 0, 0, .1);
cursor: pointer
}
.adb-card__href {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.adb-card__image-wrapper {
overflow: hidden;
position: relative;
width: auto;
-webkit-flex-basis: 40%;
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.adb-card__content {
padding: 24px 0 0
}
.adb-card__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 600;
margin-bottom: 12px
}
.adb-card__info {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 24px
}
.adb-card__description {
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin-bottom: 48px
}
.adb-card:hover .adb-content__image-wrapper img,
.adb-card__href:focus~.adb-content__image-wrapper img {
-webkit-transform: scale(1.03);
transform: scale(1.03);
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease
}
.devsite-footer {
padding: 0 24px;
border-top: 1px solid #bdc1c6
}
.devsite-footer li {
display: block
}
.devsite-footer li a {
text-decoration: none;
font-size: 14px;
line-height: 16px;
color: #202124
}
.devsite-footer li a:focus,
.devsite-footer li a:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-linkboxes-list {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
padding: 24px 0;
border-bottom: 1px solid #bdc1c6
}
@media only screen and (max-width:767px) {
.devsite-footer-linkboxes-list {
grid-template-columns: 1fr;
padding-left: 0
}
}
.devsite-footer-linkbox {
display: block
}
.devsite-footer-linkbox-heading {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin: 0 0 4px
}
.devsite-footer-linkbox ul {
padding-left: 0
}
.devsite-footer-sites-list {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-utility nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 24px 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0
}
}
.devsite-footer-utility-button {
justify-self: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 20px;
margin-left: auto;
padding-left: 16px
}
.devsite-footer-utility-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 8px 0 0
}
.devsite-footer-utility-item:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.devsite-footer-utility-item:not(:first-child):before {
content: "|";
margin: 0 8px 0 0
}
}
.devsite-footer-sites {
border-bottom: 1px solid #bdc1c6;
padding: 24px 0 23px
}
.devsite-footer-sites-logo {
height: 32px;
margin-top: 5px;
width: 185px
}
.devsite-footer-sites-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0
}
.devsite-footer-sites-item {
margin: 0 0 0 40px
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-item {
margin: 0
}
}
.devsite-footer-sites-link {
display: block;
padding: 8px 0;
color: #202124
}
.devsite-footer-sites-link:focus,
.devsite-footer-sites-link:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-utility-link:focus {
text-decoration: underline
}
.devsite-footer-utility .devsite-footer-utility-button {
line-height: 20px;
font: 400 14px/16px Roboto, sans-serif
}
.devsite-footer-utility .devsite-footer-utility-button:before {
content: "";
margin: 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility .devsite-footer-utility-button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
margin: 18px 0 12px
}
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link {
border: 0;
background: #1a73e8;
color: #fff;
line-height: 36px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0 0 16px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px 0;
box-shadow: 0 1px 2px 0;
display: inline-block;
font: 500 14px/36px Roboto, sans-serif;
height: 36px;
letter-spacing: 0;
min-width: 36px;
padding: 0 24px;
text-align: center;
-webkit-transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s, -webkit-box-shadow .2s;
vertical-align: middle;
white-space: nowrap
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link:hover {
background: #1765cc
}
.adb-page__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px;
text-align: center;
color: #202124
}
.adb-detail hr {
border: 1px solid #dadce0;
margin: 40px 0
}
.adb-detail__title {
font-size: 40px;
font-weight: 600;
line-height: 48px
}
.adb-detail__info {
font-weight: 400;
font-size: 16px;
line-height: 24px
}
.adb-detail__content {
min-height: 200px
}
.icon-sidebar {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
top: 0;
left: -300px;
max-width: 220px;
gap: 8px
}
.icon-sidebar .share-text {
font-weight: 500;
margin-left: 4px
}
@media only screen and (max-width:1440px) {
.icon-sidebar {
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
left: 0;
margin-top: -20px;
margin-bottom: 40px;
}
.icon-sidebar .share-text {
display: none;
}
}
.copy-tooltip {
display: none;
position: fixed;
bottom: 16px;
left: 10px;
z-index: 100;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.copy-tooltip .copy-tooltiptext {
width: 200px;
background-color: #073042;
color: #fff;
text-align: center;
border-radius: 80px;
padding: 8px 16px;
}
.header__overlay {
height: 100vh;
left: 0;
position: fixed;
width: 100vw;
border: none;
background-color: rgba(0, 0, 0, .4);
-webkit-animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
opacity: 0;
top: 0;
z-index: -1;
display: none
}
.header__overlay.show {
display: block;
opacity: 1;
z-index: 800;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out
}
.social-icons__links {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
.social-icons__links path {
fill: #80868b
}
.social-icons__container-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin-right: 14px
}
@media only screen and (max-width:1000px) {
.social-icons__container-header {
display: none
}
}
.adb-blog-logo:focus,
.adb-blog-logo:hover {
opacity: .7;
text-decoration: none
}
.adb-blog-logo__image {
height: 32px;
margin-left: 0;
margin-top: 6px
}
@media only screen and (min-width:840px) {
.adb-blog-logo__image {
margin-left: 24px
}
}
.header {
position: fixed;
background: #fff;
z-index: 700;
top: 0;
width: 100%;
overflow: hidden;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
height: auto
}
.header .top-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 24px;
height: 50px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #e6e6e6
}
@media only screen and (max-width:839px) {
.header .top-row {
padding: 0 16px
}
}
.header .top-row__left,
.header .top-row__right {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 100%
}
.header .nav-row,
.header .top-row__left,
.header .top-row__right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.header .nav-row {
background: #fff;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.header .nav-items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 50px;
position: relative;
background-color: #fff
}
@media only screen and (max-width:839px) {
.header .nav-items {
display: none
}
}
.header .nav-items tab {
position: relative
}
.header .nav-items tab.active .header__nav-item:after,
.header .nav-items tab:hover .header__nav-item:after {
background: #1a73e8
}
.header .nav-items tab.active .header__nav-item,
.header .nav-items tab:focus-within a {
color: #202124
}
@media only screen and (max-width:839px) {
.header .header__cta,
.header .nav-items {
display: none
}
}
.header__search-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 6px 0 6px 24px;
overflow: hidden;
position: relative;
margin-right: 36px;
border-radius: 4px
}
@media only screen and (max-width:767px) {
.header__search-container:not(.mobile) {
display: none
}
}
.header__search-container.mobile {
margin: 0 0 20px
}
.header__search-container.mobile #searchform,
.header__search-container.mobile .searchbox {
width: 100%
}
.header__search-container .searchbox {
border-radius: 2px
}
.header__search-container .searchbox input {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
font-weight: 500;
color: #80868b;
border: 0;
margin: 0;
height: 20px;
outline: 0;
padding: 8px 8px 8px 40px;
width: 100%;
-webkit-transition: background .2s;
transition: background .2s
}
.header__search-container .searchbox input::-webkit-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input:-ms-input-placeholder,
.header__search-container .searchbox input::-ms-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input::placeholder {
color: #80868b
}
.header__search-container .searchbox input:hover {
background: #e8eaed
}
.header__search-container .material-icons {
color: #80868b;
left: 8px;
position: absolute;
top: 6px;
-webkit-transition: color .2s;
transition: color .2s
}
.header__cta {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #1a73e8 !important;
text-decoration: none
}
.header__cta.mobile {
padding: 18px 0
}
.header__cta:hover .cta-icon {
margin-left: 0;
margin-right: 12px
}
.header__cta .cta-icon {
-webkit-transition: margin-right .2s linear, margin-left .2s linear;
transition: margin-right .2s linear, margin-left .2s linear;
margin-left: 4px;
margin-right: 8px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.header__cta .cta-icon path {
fill: #1a73e8
}
.header__nav-item {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #80868b;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 18px;
height: 100%;
text-transform: none;
text-decoration: none
}
.header__nav-item:hover {
color: #202124
}
.header__nav-item.mobile {
font-weight: 500;
padding: 0
}
.header__nav-item:after {
bottom: 0;
border-radius: 3px 3px 0 0;
content: "";
display: block;
height: 3px;
left: 50%;
min-width: 20px;
position: absolute;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(100% - 24px)
}
.header__hamburger {
border: 0;
background: none;
outline: none;
padding: 0;
margin: 1px 8px 0 -4px;
padding: 8px;
color: rgba(0, 0, 0, .65);
cursor: pointer
}
@media only screen and (min-width:840px) {
.header__hamburger {
display: none
}
}
.header__side-menu {
background-color: #fff;
bottom: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
z-index: 900
}
.header__side-menu.is-open {
-webkit-transform: translateX(0);
transform: translateX(0);
width: 80%
}
.header__side-menu.is-open,
.header__side-menu__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%
}
.header__side-menu__content {
padding: 18px 16px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.header__side-menu__content .spacer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.header__side-menu__title {
font-family: Roboto, sans-serif;
font-size: 20px;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px
}
.header__side-menu__items {
list-style: none
}
.header__side-menu__items li {
padding: 12px 0
}
.header__side-menu__items tab {
position: relative
}
.header__side-menu__items tab.active .header__nav-item,
.header__side-menu__items tab:focus-within a {
color: #202124
}
.header__side-menu__bottom {
border-top: 1px solid #e6e6e6
}
.header__side-menu__logo-container {
background: #fff;
height: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 4px 16px;
border-bottom: 1px solid #e6e6e6
}
#nav .widget {
margin: 0
}
.featured__wrapper {
width: 100%;
border: 0;
background-color: #e8f0fe;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 80px 0
}
@media only screen and (max-width:767px) {
.featured__wrapper {
padding: 0
}
}
.featured__inner {
max-width: 1080px;
width: calc(100% - 24px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
padding: 48px
}
@media only screen and (min-width:768px) {
.featured__inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
padding: 12px 80px
}
}
.featured__href {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.featured__image {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
max-width: 100%;
}
.featured__content {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-top: 24px;
width: 100%
}
.featured__title {
font-size: 32px;
line-height: 44.8px;
font-weight: 500;
font-family: Android Euclid, Roboto, sans-serif;
margin-bottom: 15px
}
.featured__info {
font-family: Roboto Mono, monospace;
font-weight: 400;
font-size: 12px;
line-height: 160%;
margin-bottom: 24px
}
.featured__description {
margin-bottom: 48px
}
.preview.featured__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f1f3f4;
padding: 64px 0 120px
}
.preview.featured__wrapper h1 {
margin: 0 0 64px
}
.blog-label-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px
}
.blog-label-container .blog-label {
text-decoration: none;
z-index: 3
}
.blog-label-container .blog-label span {
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
background-color: #F1F3F4;
border-radius: 100px;
padding: 4px 16px;
color: #3c4043
}
.adb-card:first-child .blog-label span {
background-color: #fff;
}
.blog-label-container .blog-label span:focus,
.blog-label-container .blog-label span:hover {
background-color: #D7EFFE
}
.adb-card:first-child .blog-label span:focus,
.adb-card:first-child .blog-label span:hover {
background-color: #F1F3F4
}
.blog-label-container .blog-label span:focus-visible {
outline-offset: 0
}
#pagination-container {
display: none
}
.pagination {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.pagination .page-button {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: black;
background-color: #3DDC84;
padding: 16px 24px;
border-radius: 80px;
text-decoration: none
}
.pagination .page-button:focus,
.pagination .page-button:hover {
background-color: #3DDC8460;
}
.pagination .page-button.disabled {
color: #80868b;
background-color: #f1f3f4
}
--></style>
<style id="template-skin-1" type="text/css"><!--
--></style>
<style>
/** Blogger default styles **/
html, .Label h2, #sidebar .rss a, .BlogArchive h2, .FollowByEmail h2.title, .widget .post h2 {
font-family: Roboto, sans-serif;
}
.plusfollowers h2.title, .post h2.title, .widget h2.title {
font-family: Roboto, sans-serif;
}
pre, .post-content pre.prettyprint {
background-color: #f7f7f7;
border: 1px solid #ddd;
margin: 0 0 1em 0;
padding: 1em;
overflow: auto;
}
pre, code {
font-size: 9pt;
line-height: 125%;
font-family: monospace;
}
pre, code {
color: #060;
font: 13px/18px Consolas, 'Liberation Mono', Menlo, Monaco, Courier, monospace;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
/* Styles for https://github.com/google/code-prettify */
.com { color: #060; }
.kwd { color: #008; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.fb-custom img, .twitter-custom img, .gplus-share img, .email-custom img {
cursor: pointer;
opacity: 0.54;
}
.twitter-custom, .gplus-share, .fb-custom {
margin-right: 12px;
}
/** Blogger custom theme **/
.adb-header,
.searchBox input {
box-sizing: border-box;
}
.popout-nav {
background-color: white;
width: 280px;
height: 100%;
position: fixed;
z-index: 6;
left: -280px;
transition: left 0.2s;
}
.popout-search {
background-color: white;
width: 280px;
position: fixed;
z-index: 6;
right: -280px;
transition: right 0.2s;
top: 0;
}
.popout-search .widget {
margin: 0;
}
.popout-search #BlogSearch2_form .popout-options {
padding-right: 24px;
width: calc(100% - 48px);
}
.dropdown-nav {
display: none;
background-color: white;
width: 104px;
position: fixed;
padding: 4px 0px 3px 0px;
z-index: 4;
left: 352px;
top: 176px;
transition: top 0.2s;
box-shadow: 0 0px 2px 0 rgba(60,64,67,.3), 0 0px 6px 2px rgba(60,64,67,.15), inset 0 0px 6px -4px rgba(154,160,166,.5);
}
.dropdown-options {
align-items: center;
display: flex;
flex-wrap: wrap;
width: 94px;
height: 48px;
padding-left: 10px;
}
.dropdown-options:hover {
background-color: #f7f9fa;
}
.dropdown-options span {
color: #80868b;
}
.popout-options {
padding-right: 8px;
padding-left: 24px;
padding-top: 16px;
padding-bottom: 15px;
display: inline-block;
width: calc(100% - 32px);
border-top: 1px solid #ddd;
font-size: 13px;
font-weight: 700;
color: #80868b !important;
}
.popout-options:last-of-type {
border-bottom: 1px solid #ddd;
}
.popout-options:first-of-type {
border-top: 0;
}
#close-popout {
padding: 12px 12px 11px 20px;
}
#close-search-popout {
padding: 12px 20px 11px 12px;
text-align: right;
}
.popout-search-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
transition: opacity 0.2s;
}
.popout-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
z-index: 5;
transition: opacity 0.2s;
}
html {
background-color: #fff;
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
width: 100%;
position: absolute;
padding: 0;
/* This ensures that the scroll bar is always present, which is needed */
/* because render happens after page load; otherwise the header */
/* would 'bounce' in-between states. */
min-height: 150%;
}
h2 {
font-size: 130%;
}
h1, h2, h3, h4, h5 {
line-height: 1.5em;
margin-bottom: 1em;
}
html, h4, h5, h6 {
font-size: 14px;
}
a, a:visited {
color: #039be5;
text-decoration: none;
}
pre code {
display: block;
}
.cols-wrapper {
margin-top: 56px;
}
.header-outer, .cols-wrapper {
padding: 0 60px;
}
html, .header-inner a {
color: #212121;
color: rgba(0, 0, 0, .87);
}
/** Archive widget. **/
.BlogArchive {
font-size: 13px;
font-weight: normal;
}
.BlogArchive .widget- {
display: none;
}
.BlogArchive h2, .Label h2 {
color: #039be5;
text-decoration: none;
}
/* Specificity needed here to override widget CSS defaults. */
/* Months */
.Label {
font-size: 13px;
font-weight: normal;
}
.sidebar-icon {
display: inline-block;
width: auto;
vertical-align: middle;
height: 24px;
margin-right: 24px;
}
.sidebar-social-links {
align-items: center;
}
.sidebar-social-links .android-logo,
.android-logo {
height: 48px;
}
.sidebar-social-links a:last-child img {
margin-right: 0;
}
.Label .widget- {
display: none;
}
.searchBox input {
border: 1px solid #eee;
color: #212121;
color: rgba(0, 0, 0, .87);
font-size: 14px;
padding: 8px 8px 8px 40px;
width: 100%;
font-family: Android Euclid, Roboto, sans-serif;
background: url('https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png') 8px center no-repeat;
}
.searchBox ::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .54);
}
.section {
margin: 0;
padding: 0;
}
#sidebar-top {
border: 1px solid #eee;
}
#sidebar-top > div {
margin: 16px 0;
}
/*main post*/
.post {
margin-bottom: 30px;
}
#main .post .title {
margin: 0;
}
#main .post .title a {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: normal;
font-size: 24px;
}
.message, #main .post .post-header {
margin: 0;
padding: 0;
}
#main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption {
color: #444;
font-weight: 500;
}
#main .post .post-header .published {
font-size: 11px;
font-weight: bold;
}
.post-header .publishdate {
font-size: 16px;
font-weight: normal;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#main .post .post-footer {
font-size: 12px;
padding-bottom: 21px;
}
.label-footer {
margin-bottom: 12px;
margin-top: 12px;
}
#main .post .post-header .published {
margin-bottom: 16px;
}
.post .post- {
color: #545454;
color: rgba(0, 0, 0, .67);
font-size: 16px;
margin: 16px 0 36px 0;
line-height: 24px;
word-wrap: break-word;
}
.post-summary {
display: none;
}
/* Override all post images/videos to left align. */
@media (max-width: 712px) {
.post- img {
max-width: 100%;
height: auto;
width: auto;
}
}
.post- .tr-caption-container img {
margin-bottom: 12px;
}
.post- iframe, .post- embed {
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
}
.post- .carousel-container {
margin-bottom: 48px;
}
#main .post- b {
font-weight: 500;
}
/* These are the main paragraph spacing tweaks. */
#main .post- br {
: '';
display: block;
padding: 4px;
}
.post-content .space {
display: block;
height: 8px;
}
.post-content iframe+.space, .post-content iframe+br {
padding: 0 !important;
}
#main .post .jump-link {
margin-bottom: 10px;
}
.post-content img, .post-content iframe {
margin: 30px 0 20px 0;
}
.post-content > img:first-child, .post-content > iframe:first-child {
margin-top: 0;
}
.col-right .section {
padding: 0 16px;
}
#aside {
background: #fff;
border: 1px solid #eee;
border-top: 0;
z-index: 2;
}
#aside .widget {
margin: 0;
}
#aside .widget h2, #ArchiveList .toggle+a.post-count-link {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: 400 !important;
margin: 0;
}
#ArchiveList .toggle {
float: right;
}
#ArchiveList .toggle .material-icons {
padding-top: 4px;
}
#sidebar-top,
#sidebar {
background: #fff;
}
#sidebar .tab {
cursor: pointer;
}
#sidebar .tab .arrow {
display: inline-block;
float: right;
}
#sidebar .tab .icon {
display: inline-block;
vertical-align: top;
height: 24px;
width: 24px;
margin-right: 13px;
margin-left: -1px;
margin-top: 1px;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget-content > :first-child {
padding-top: 8px;
}
#sidebar .active .tab .arrow {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#sidebar .arrow {
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget h2 {
font-size: 14px;
line-height: 24px;
display: inline-block;
}
#sidebar .widget .BlogArchive {
padding-bottom: 8px;
}
#sidebar .widget {
border-bottom: 1px solid #eee;
box-shadow: 0px 1px 0 white;
margin-bottom: 0;
padding: 14px 0;
min-height: 20px;
}
#sidebar .widget:last-child {
border-bottom: none;
box-shadow: none;
margin-bottom: 0;
}
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style: none;
padding: 0;
}
#sidebar ul li a {
line-height: 32px;
}
#sidebar ul ul ul li a {
line-height: 24px;
}
#sidebar .archive {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC');
height: 24px;
line-height: 24px;
padding-left: 30px;
}
#sidebar .labels {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC');
height: 20px;
line-height: 20px;
padding-left: 30px;
}
#sidebar .rss a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII=');
}
#sidebar .subscription a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC');
}
#sidebar-bottom {
background: #f5f5f5;
border-top: 1px solid #eee;
}
#sidebar-bottom .widget {
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
text-align: center;
}
#sidebar-bottom > div:last-child {
border-bottom: 0;
}
#sidebar-bottom .text {
line-height: 20px;
}
/* Home, forward, and backward pagination. */
.blog-pager {
padding-top: 10px;
margin-top: 15px;
text-align: right !important;
}
#blog-pager {
padding: 40px 0 0;
}
#blog-pager a {
display: inline-block;
}
.blog-pager i.disabled {
opacity: 0.2 !important;
}
.blog-pager i {
color: black;
margin-left: 16px;
opacity: 0.54;
}
.blog-pager i:hover, .blog-pager i:active {
opacity: 0.87;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
.gplus-profile {
background-color: #fafafa;
border: 1px solid #eee;
overflow: hidden;
width: 212px;
}
.gplus-profile-inner {
margin-left: -1px;
margin-top: -1px;
}
/* Sidebar follow buttons. */
.followgooglewrapper {
padding: 12px 0 0 0;
}
.loading {
visibility: hidden;
}
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 40px !important;
}
/* ADB */
.adb-hero-area {
min-height: 104px;
background-color: #073042;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
z-index: 5;
position: fixed;
width: 100%;
}
.adb-hero-logo {
height: 80px;
position: absolute;
top: 12px;
left: 16px;
}
.adb-footer-btm {
display: flex;
margin: 0 24px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 40px;
}
.subscribe-btn {
color: black;
background-color: #3DDC84;
border-radius: 100px;
font: 500 16px/24px Android Euclid,Roboto,sans-serif;
padding: 12px 24px;
border: 0;
}
.adb-footer-info {
align-items: center;
display: flex;
padding: 0;
margin: 9px 0 0 -8px;
font-size: 13px;
}
.footer-list {
list-style: none;
padding: 0 8px;
}
.subscribe-info {
list-style: none;
padding: 0 8px 0 0;
font-size: 13px;
color: black;
}
.footer-newsletter {
display: flex;
align-items: center;
}
.adb-header-inner {
display: flex;
align-items: center;
}
.adb-header {
background-color: white;
color: #fff;
height: 48px;
left: 0;
overflow: hidden;
padding: 36px 24px;
right: 0;
top: 104px;
z-index: 4;
display: flex;
align-items: center;
position: fixed;
border-bottom: solid 1px #DADCE0;
}
.adb-shadow {
margin-top: 48px;
height: 1px;
width: 100%;
position: fixed;
background: white;
z-index: 2;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
}
.adb-logo-box {
display:inline;
}
.adb-burger-box {
display: none;
margin: 0 16px 0 0;
}
.adb-search-box {
display: none;
margin: 0 0 0 16px;
}
.adb-htag-box {
display: flex;
align-items: center;
}
.adb-header-tags {
padding: 0 24px 0 0;
}
.adb-header-tags ~ .atb-header-tags {
padding: 0 24px;
}
.adb-header-tags a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #5F6368;
}
.adb-header-tags a:hover {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #073042;
}
.more-dropdown {
display: none;
}
.dropdown-icon {
transition: all 0.3s;
}
.adb-header-logo {
display: inline-block;
vertical-align: -11px;
width: 134px;
height: 32px;
}
.adb-header-title {
color: #fff;
display: inline-block;
font-size: 20px;
font-weight: normal;
}
.adb-header-links {
border-left: 1px solid rgba(0, 0, 0, .1);
display: block;
left: 250px;
list-style: none;
margin: 0;
padding: 12px 0 12px 18px;
position: absolute;
top: 0;
}
.adb-header-link-item {
display: inline-block;
}
.adb-header-link, .adb-header-link:visited {
color: #fff;
display: inline-block;
font-weight: 500;
opacity: .7;
padding: 12px 9px;
text-transform: uppercase;
vertical-align: 2px;
}
.adb-header-link:hover, .adb-header-link:focus {
color: #fff;
opacity: 1;
}
.adb-header-console, .adb-header-console:visited {
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
color: #fff;
float: right;
font-size: 14px;
font-weight: 500;
line-height: 28px;
padding: 4px 10px;
position: relative;
text-transform: uppercase;
transition: box-shadow .2s;
z-index: 60;
}
.adb-header-console:hover {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
color: #fff;
}
.adb-header-console:focus {
background-color: rgba(63, 81, 181, .1);
color: #fff;
}
.adb-header-console-image {
vertical-align: -5px;
}
.adb-hero {
background-color: #dcedc8;
margin-top: 64px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
color: #414141;
display: inline-block;
font-weight: 500;
margin: 25px 25px 0;
}
.adb-hero-inner {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAc4AAADZCAMAAACenCAVAAAAvVBMVEXc7cjY68PT6bvR57fQ57bY6sPZ68TU6bvR6LfP5rTQ57XR57jW6r7b7cfa7MbS6LnS6Lrb7cbQ6Lfb7MbX6r/Z68PY6sLV6b7U6b3U6r3T6LnX68Da7MXP57Tb7Mfc7cfW6b/P57XS57nY68LY68HU6L3W6r/W6b7T6brX6sDV6rzQ57fa7MTV6b3T6Lra68TR57bX68HW6sDS57jU6bzO5rTP5rXZ7MXR6LbZ68XX6sHT6LvV6bzS6LjZ7MILrTuqAAAIyklEQVR4AezXhXEkUQwE0B6+Xhg8MzND/smZ4UsLBSb9Kr0UhI1vl6RZnqUFlnBl9Y+j8WQK4+qGr9oOi7iKr0YFTOt6vhsPmM81/FDAspafUszl/vNTXsOuFYZWMYfrRgyswa51hjLM4TYYGsOuTQpbgNO2dyjAroxCvgunpZT2YFZDaQKnlFRg1z6lgxpOOqS0CbtqKutwwhGVYxh2QqWGC/WUMlhWH1BK4QKnVFZh2hmVEh/cXk7pHLbt5pQafHCT6Jr9gsoR3riayiXMyyhd4Y27jDDHJVQu8MJdU7lBBBpKoz08c7eU8gERuKNyhiduhcopolBRqeGAMaV7xKE7eGzvThQTVZooAJdC1AM2qGg0BhdCrpnciVE0i9dZ3v+t/n2ZMBtJGpsu6nuCrNJddar4/gAnMmuP/GPk3JFwrL2QKw3FD26GyGmQNXbIGVHNKdfmYraDl/ZUcxO8NNtIW888bafDC7tP5R2qtQfL724N5AypxjbIGdseWHMV1VfP+rrnZvbTerMEhHb2Py4eA7KX9AwD5LSppi5ZdPTHEhv6cd5mSjZaeMW/Dc66TEpkO+Q0qIbUE5es6ke85FMN/YGXZs9yQLdXYGVASGJDBaMZXsQouzau/fzfitNsKvpUL1O8dFBksb+Q80C1coaco7RtLeYzO9tHCV7qUY0ckXPGribSoNpQB3Z1MbWtby1hiZwWw35CRjUReRx7Sg5ecqgmJiyHOxrIWVEtPDPNY/TMx4bmczq5T3jpSRELm1NWodVmlGY364tP4ZXvdw5u8jjDf8yQJJ7j+2HYfBh3d+l5HFB5RmyzjM3yh8iDUbb6M9y7j3idgxM+3BzTuPzyXmdOTARJaUc8tUmX7ekB7+aF7dV1a0G6pIx3CkxKmBBUreMfvS0086aTnZZf6kfG53mlN/0UnS2bW5Socz9OA737eM6JkZWu4uUiXfVcnIT34eZM6Yq9hcRKR0OpL7i9cHBi/udjrCOUuiFWsnc2/oKsfYAhXvM2lsj4S/7b2/L9y4cODDu0j8HbBzqSPvutOksqpDH+gorw1+dvHLcaEzv3r4+0BdmnBJXi9bL+G6qaEbFz98rF4sEwnKGKrrrxK3sOuzoMlM9i+ql47KPC/HX8inTxljgKUHBYI1g6qDx/HBct76XETfHF4v3hHpZwVgH9APc0TfFSyTwLZ7DJ9FYxmZvTv1h89DmBdbyHEX0rcuuTRB38fNuQ2vmw1GAYMSjv6ZwQbD0ksFlz9LPW7gMxNv3RBVtlDqz3cbWo32rmEXLGFExcsJBMnilGzk29pleT5gx8fLiq2XzyM2rllpiboEYGxF2UoD6+EntL1Ma+TkOP/LVqNJLM3yeqgayDmnjqKmIu3aNGDhlx1pqiZvyUuAqaqKGwRRwt1gnqqR0QO5ce6ms5J1ZGIWqtkxIf0QNqb7ohJjIXgFjPiYF4j38R2wbZTk1m+C/xqU9WSzv4hkgyVkcg0QvIUg0XEHleRjaK/gQb8g/a2EL8hHcky6zxC+JTQBa5c/BL4nBO1lgl+B2xJjv0QxQgnA1ZoOGhGHFNldedoShxMadKU/d4BeEEVGF3Ll5FJF+psm7Bh5xwHyDeoKeogvp7iDfpbKhyWgeIN/JSqpjbBOLtlqwq7qJNFdKGeKdQUUUEIcS7Df6iSngeQAPhtqgCWi60EElKxjUSsCFriK5nYEMuLDtoJSZk0BiaiaYsZGPlXnEqHoipIhOaKIW4WnD63xThgtP/pthHdFqfUCIRRvK/KZ+3VX1uiulc7puc3EstSOpD9d7+LYGTFfiQenyKkxE3VLLGI9iQkcH4CackzqlEwRYnJbwNlUb5ODHhBVSWHk5O+JFMLkh5qFYxLxnoPZ9BmJGRdrELNuTddNEAwhg34NSvFnvSqgth1ANpNEIZkhkYSg4dt9rHocCFXvvxWUD/ELR2TQ98hMOWon+Ks7YLrZI70iWETu6yT99Qt3uw4A4j+lY6hU4dVcloUFdR3tkA1kt29J1zHxr1SIsGNAoDnvGjMCj/CLmr3INzQj9x5sFm41Ns933c0PtNoc+O0bJNA9+Xryp14+zSL9x5PH6beS2vQrfP0exkQcMG08BdCn1SepeFc8KPijWs5MxPdzN4CipzR2nQb8wdnu0O5UKbkN7h/LQZ/a9Ms+pZNYp9kQt9Yvo9H3Yx8H15QSXm/qZUQMY0ybOCPtNKlIMuqYAogW1SKkBBoxW9SXSARoqKCGGbBRVxBY0C85V3h2mb/MrASGxIb3BnYlaxwXRmLwUMFxMc6NSlQvpM6nt5MXTylOl00JGKYTqxp6DVBb1SkECrlOmvs0HFGA7efjA0dwrLfKVC5tDLp1dpGHrGKFjm0tCZYEWvMTA0NrOBZVZUSMtoLn4I3T5RISnTZTGXJrea9BPotmU6QrqlQi6gXWx05V5MRTiwTaD/4aW5FN8y9pCJYZ2usSPBNRUzNfapNIZ1fGM7KQdUSMNYJyl6Ajh2yAKTBUYHpfCZruJ0jB3wCpVur1GSIf3G8yOPlG1ePDN46d2iJEmLR+86L4lNBRQTZXK/6UAxunMWDxC3Da6omXsoz5XiOa8/NfV9JYHRXVBXiudG8r0y9Jmzpl87oFSDFv3Qog2rDTb0Q6qJckX0K7coWTKkHxh1YLmkSz/Q6JjNKnVQOj+lnM0nMPDxmnLuPhjej5rhFLbjmP4nOF6BCXfdov8JLkPj+xcdnMjh03p3nWXLBwesuB/+GGbHXbc5wIkkSt7CwEmXU1lGbPX3OYVBt5y2Yoov9EN/QVhpJK9xZL/7P4Kw1LO8iIH7qxx8CEu5zG8pcldpQ1hrSjnBI4S9YnrpBsJiEzkIcfIkByFWUqkIcdKjb7kQdos49a3Fjv7vE4TlfPoflYAPuXoeIaw3pv+6h7CeQ/8RPYIP6XpegwGxknMtwxcqK7AgAqkhcDKkf3oAI9LE9sCDWGhf4S8M70peggnxQERTMCFcIjUDF+KOUrAhhvQANkT4dwEsPvJYWz4QAAAAAElFTkSuQmCC');
background-position: bottom right 70px;
background-repeat: no-repeat;
background-size: auto 100%;
margin: 0 auto;
max-width: 980px;
padding: 0 60px;
position: relative;
}
.adb-hero-back-icon {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.adb-hero-title {
font-size: 22px;
line-height: 28px;
padding: 24px 24px 0px 112px;
}
.adb-hero-title a {
color: #FFFFFF;
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500;
}
.adb-hero-summary {
font-size: 16px;
line-height: 24px;
padding: 8px 24px 8px 112px;
}
.adb-hero-summary a {
color: rgba(255, 255, 255, 0.9);
}
.adb-hero-description {
color: #6f7172;
font-size: 16px;
margin: 0;
max-width: 440px;
padding-bottom: 32px;
}
.adb-hero-search {
position: absolute;
top: 19.35%;
right: 1.94%;
}
.adb-hero-search .searchBox input {
border: 1px solid #80868B;
border-radius: 4px;
color: white;
}
.adb-hero-search .searchBox input::placeholder {
color: #F1F3F4;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
padding-left: 12px;
}
.adb-hero-link {
position: absolute;
right: 1.67%;
top: 64.52%;
}
.adb-hero-link a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #3DDC84;
letter-spacing: 1.4px;
}
.adb-hero-arrow {
display: inline-flex;
font-size: 24px;
vertical-align: middle;
}
.adb-socials-box {
display: flex;
position: absolute;
right: 1.67%;
}
.adb-socials-category,
.adb-socials-divider {
display: flex;
align-items: center;
}
.adb-socials-divider {
color: #DADCE0;
font-size: 40px;
font-weight: 100;
margin: 0 20px;
}
.adb-socials-category img,
.adb-footer-social-links img {
height: 24px;
}
.adb-footer-social-links-img {
margin-right: 20px;
}
.adb-hero-subscribe, .adb-hero-subscribe:visited {
background-color: #90c653;
color: #fff;
display: inline-block;
border-radius: 3px;
margin: 25px 0 60px;
padding: 13px 32px;
text-transform: uppercase;
}
.adb-hero-subscribe:hover, .adb-hero-subscribe:focus {
background-color: #333;
}
.adb-footer {
margin: 32px auto 64px;
}
.adb-footer-more {
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #f0f0f0;
padding: 30px 0;
}
.adb-footer-more a {
color: #000;
display: inline-block;
font-size: 20px;
font-weight: 300;
margin-right: 16px;
}
.adb-footer-social {
float: right;
margin-top: -62px;
}
.adb-footer-social a {
background-color: #ccc;
background-position: center;
background-repeat: no-repeat;
background-size: auto 16px;
border-radius: 50%;
display: inline-block;
height: 36px;
margin-left: 16px;
transition: background-color .1s;
width: 36px;
}
.adb-footer-social-youtube {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAQAAAAxWje/AAABLUlEQVQ4y6WUvUoDYRBFr42gCdhK8AV8BwsVC0FQfIQUgr5DIKJoGy1CfAaDq1hIGn8K2xDSaBc1wUJJEYmbkDXssdi1Mrvfst9tZ+bAzNwZSZLEAmvsUKTCBQ80eaWLyxiAMS5dXmhyT5UyBfIsM68/McM1aXRDJgCUSKsTSWQZpAa4ZMUmNtoSRxGhbd4TAI7F1eSIxBwVfAPgUtSjAJLEEk+xgLroxAEkpikyigS0RS8eIEks8hgB6ImhGSAxxS5fE9JGwksCkCRyOP/SfPFjC0jawl5UC9ZDbBvXuB+zxjezkZ5NRnJirHxmtLIjDq2O6UBsWJ3zut1D+WZWEqepAaVg0hlqqcpr4VMNbbpKngJlqtzRoMUnfTx8fDz6fNCiwS3n4VtfIRdU/gLTrSb7DGWLcQAAAABJRU5ErkJggg');
}
.adb-footer-social-youtube:hover {
background-color: #f44336;
}
.adb-footer-social-gplus {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAUCAQAAACpWpz6AAABJUlEQVQ4EZXBTUoCYQDH4X9hTS3Cja0Kyb2X6BCJoLlr1aKwK1QHCMMzWLiqTcuWXaAWQWIlU1DQh4QJ+Wt4X95x0hGn55FCeGzSpMUXXW45ocSC/oMiHUZ1KCgZZqkzyZaSoM7QgCd8BlgXLGo6ijgv7JJRgAxV3jjDUwwMOXh0sK5ZUQRZ5hQLQw4VrA/WlBCGHJpY+0oMQw5trLxCjNtTgFiij5VSiHFHChBL9LFSCjGurgCxRBsrrxA+Pj4+Pl2sQ0VgyKGJdaAYNLAqisCQQxnrk5xGkKOHlVUEhhw8HrFuWFUEaa6wLvUHhoYo4LxSZVkBlihzh7OuaagR9YzPD0PHmo5ZakzSIKVk2OCBUe/sMKPkmKfEKS16fHPPOduklcAvR50zMVwhTI4AAAAASUVORK5CYII=');
}
.adb-footer-social-gplus:hover {
background-color: #f44336;
}
.adb-footer-social-twitter {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAQAAAB0gUQ+AAABI0lEQVQ4EY3BQShDAQDH4f+zTSyJuLgoLlwclYOTHCwHu9ouiLRScpUmNwduDkpCSTs4LAeJhINoOTo4ctHkskyJtf20vWbe3tvb+z7JFUGibLHPMj0qoYEWSYzRKkdMkKbsm3m6WSRFuyQeuKNNNoTJU61ABL8kssAjvbKgiTR2V+ywJol3ijJMY+gP4zhLEpDEGWUpwvhUQgwnh/hURIT/3thjjmGWcBKViSCXeBWSiWdO+MGbPpm4watPfDIRxasLVXCANwuqwCDGK/V80akKGjnmmgLutmXFOvV80CUrAiRxNys7DCY5J4OzXdVCP7c4OcIvO5oJkSCHXZ5VDFkxwilP5HB2z6Cc0EGcF6plSTAqNxgMMEWcTTZYYYYhAqrpF0uh1zgYi1hVAAAAAElFTkSuQmCC');
}
.adb-footer-social-twitter:hover {
background-color: #55acee;
}
.adb-footer-social span {
display: none;
}
.adb-footer-related {
padding-top: 8px;
}
.adb-footer-related a {
color: #999;
font-size: 12px;
white-space: nowrap;
}
.adb-footer-related a:not(:last-child)::after {
content: '|';
cursor: default;
margin: 0 7px 0 10px;
}
.adb-footer-section {
margin: 48px auto;
max-width: 700px;
}
.adb-footer-title {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #3C4043;
margin-bottom: 24px;
}
.adb-footer-columns {
display: flex;
justify-content: space-between;
}
.adb-other-blogs-title img {
margin-right: 8px;
vertical-align: -12px;
}
.adb-footer-social-label {
display: flex !important;
align-items: center;
}
.adb-footer-column a,
.adb-footer-social-label,
#footer-subscribe .tab h2 {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
padding: .85em 0;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-btm a {
color: #000;
font-family: Android Euclid, Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.25px;
opacity: .7;
transition: opacity .1s;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-column a {
opacity: .7;
transition: opacity .1s;
}
.adb-footer-column a:hover {
opacity: 1;
}
.adb-footer-social-links {
margin: 0 0 20px;
}
#footer-subscribe .widget {
margin: 0;
}
#footer-subscribe .tab {
display: flex;
align-items: center;
}
#footer-subscribe .tab img {
height: 16px;
}
.adb-label-view-more-toggle {
cursor: pointer;
}
.adb-label-view-more-toggle::after {
content: '\00e5c5';
float: right;
font: 2em / .7 Material Icons;
opacity: .6;
}
.adb-label-view-more-toggle.active::after {
transform: rotate(180deg);
}
/** Desktop **/
@media (max-width: 900px) {
.col-right {
display: none;
}
.col-main {
margin-right: 0;
min-width: initial;
}
.cols-wrapper {
min-width: initial;
}
.adb-hero-inner {
background-image: none;
}
}
/** ADB header breakpoint **/
@media (max-width: 768px) {
.adb-header-links {
display: none;
}
.dropdown-nav {
display: none;
}
.adb-header {
padding: 12px;
text-align: center;
}
}
@media (max-width: 1196px) {
.breakpoint-hide {
display:none;
}
.more-dropdown {
height: 50px;
display: flex;
align-items: center;
}
}
@media (max-width: 915px) {
.adb-header {
height: 0;
margin: 0;
padding: 0;
display: none;
}
.adb-header-tags {
display:none;
}
.more-dropdown {
display:none;
}
.dropdown-nav {
display: none;
}
.adb-hero-summary,
.adb-hero-link,
.adb-socials-category {
display: none;
}
.adb-hero-title {
padding-left: 152px;
}
.adb-hero-logo {
height: 52px;
top: 12px;
left: 120px;
}
.adb-footer-section {
margin: 0 auto;
}
.adb-footer-btm {
margin: 0 24px 40px;
}
.adb-hero-area {
min-height: 76px;
}
.adb-burger-box {
display:inline;
position: absolute;
top: 17px;
margin-left: 24px;
font-size: 32px;
color: white;
}
.adb-hero-title a{
margin-left: 40px;
}
}
/** Tablet **/
@media (max-width: 712px) {
.header-outer, .cols-wrapper {
padding: 0 40px;
}
/* ADB */
.adb-hero-inner {
padding: 0 40px;
}
.adb-hero-title {
font-size: 16px;
padding-left: 132px;
}
.adb-hero-logo {
left: 100px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 36px;
}
.adb-other-blogs-list {
columns: auto;
}
.adb-other-blogs-title {
font-size: 20px;
}
.adb-other-blogs-title img {
height: auto;
vertical-align: -6px;
width: 32px;
}
.adb-footer-section {
margin: 0 24px;
}
.adb-footer-more {
padding-bottom: 75px;
}
.adb-footer-social {
float: none;
margin-bottom: 35px
}
.adb-footer-social .adb-footer-social-youtube {
margin-left: 0;
}
}
/** Small tablet **/
@media (max-width: 600px) {
.header-inner .google-logo {
top: 32px;
margin-top: 0;
}
.header-inner .google-logo img {
height: 56px;
width: auto;
/*
height: auto;
width: 188px;
*/
/* Override any optical adjustments at desktop size. */
top: 0 !important;
}
.header-left {
left: 0;
top: inherit;
bottom: 24px;
}
.adb-footer-columns {
display: block;
}
.adb-footer-column {
margin-bottom: 48px;
}
.adb-footer-column a {
opacity: 1;
}
.adb-footer-social-label {
padding: 0;
}
.adb-footer-column .widget a {
padding: 0;
}
.footer-newsletter {
margin-top: 16px;
}
.subscribe-btn {
width: 100%;
}
.adb-hero-search {
display: none;
}
.adb-search-box {
display:inline;
position: absolute;
top: 24px;
right: 24px;
font-size: 24px;
color: white;
}
}
/** Mobile **/
@media (max-width: 480px) {
.header-outer, .cols-wrapper {
padding: 0 16px;
}
.adb-hero-logo {
height: 28px;
top: 24px;
left: 76px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 16px;
}
.cols-wrapper {
margin-top: 0;
overflow-x: auto;
}
.post-header .publishdate, .post .post-content {
font-size: 16px;
}
.post .post-content {
line-height: 28px;
margin-bottom: 30px;
}
.post {
margin-top: 30px;
}
.byline-author {
display: block;
font-size: 12px;
line-height: 24px;
margin-top: 6px;
}
#main .post .title a {
font-weight: 500;
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
}
#main .post .post-header {
padding-bottom: 12px;
}
#main .post .post-header .published {
margin-bottom: -8px;
margin-top: 3px;
}
.post .read-more {
display: block;
margin-top: 14px;
}
.post .tr-caption {
font-size: 12px;
}
#main .post .title a {
font-size: 20px;
line-height: 30px;
}
.post-content iframe {
/* iframe won't keep aspect ratio when scaled down. */
max-height: 240px;
}
.post-content .separator img, .post-content .tr-caption-container img {
margin-left: -16px;
max-width: 100%;
}
.post-content table {
table-layout: fixed;
width: 100%;
}
/** List page tweaks. **/
.list-page .post-original {
display: none;
}
.list-page .post-summary {
display: block;
}
.list-page .comment-container {
display: none;
}
.list-page .label-footer {
display: none;
}
.list-page #main .post .post-footer {
border-bottom: 1px solid #eee;
margin: -16px 0 0 0;
padding: 0 0 20px 0;
}
.list-page .post .share {
display: none;
}
/** Detail page tweaks. **/
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 32px !important;
}
.detail-page .label-footer {
margin-bottom: 0;
}
.detail-page #main .post .post-footer {
padding-bottom: 0;
}
.detail-page #comments {
display: none;
}
/* ADB */
.adb-header-console {
display: none;
}
.adb-hero-inner {
padding: 0 16px;
}
.adb-hero-title {
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
font-weight: 500;
line-height: 30px;
padding-left: 80px;
}
}
/* Fixed-position sidebar for larger screens */
@media screen and (min-height: 700px) and (min-width: 1100px) {
.col-right .section {
max-height: calc(100vh - 197px);
overflow: auto;
}
.col-right.scroll-start {
left: 50%;
margin-left: 241px;
position: fixed;
top: 96px;
}
.col-right.scroll-end {
bottom: 485px;
position: absolute;
top: auto;
}
}
[data-about-pullquote], [data-is-preview], [data-about-syndication] {
display: none;
}
#imgFull {
display: block;
margin: 10px auto;
width: 90%;
border: 0;
padding: 0;
}
#imgHalf {
display: block;
margin: 10px auto;
width: 50%;
border: 0;
padding: 0;
}
#flexParent {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
#flexImg {
width: 90%;
margin: 0;
padding: 0;
border: 0;
}
#imgCaption {
text-align: center;
font-style: italic;
font-size: 85%;
margin: -5px 0 10px 0;
padding: 0;
border: 0;
}
#floatRight {
float: right;
width: 45%;
margin: 5px 0 5px 5px;
padding: 0;
border: 0;
}
#floatLeft {
float: left;
width: 45%;
margin: 5px 5px 5px 0;
padding: 0;
border: 0;
}
</style>
<style>
.loading {
visibility: visible;
}
</style>
</head><body>
<div class="adb-detail">
<div class="adb-detail__info">
</div>
<div class="adb-detail__title">
</div>
<hr>
<div class="adb-detail__content">
<div>
<meta name="twitter:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwi55LqdnkRzHbxQ1vXKgXV6wAKcoL_Hu-WmkBhYJMDokuy9ii9kOv3NBeh6138uzbCBhNumHiAfs2bPdqBdd0XXEgkNxo0vzUbmDX5V-k0oCxgBYffsqcPvlYVLFjiHVdfb_PBnwHbdOYhy9t35X6FuOCQ3xvEeXarHBI9we_pqkdakp8ccje5Wh5n4E/s1600/SOCIAL-Prompt-users-on-the-outdated-versions-to-update.png">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwi55LqdnkRzHbxQ1vXKgXV6wAKcoL_Hu-WmkBhYJMDokuy9ii9kOv3NBeh6138uzbCBhNumHiAfs2bPdqBdd0XXEgkNxo0vzUbmDX5V-k0oCxgBYffsqcPvlYVLFjiHVdfb_PBnwHbdOYhy9t35X6FuOCQ3xvEeXarHBI9we_pqkdakp8ccje5Wh5n4E/s1600/SOCIAL-Prompt-users-on-the-outdated-versions-to-update.png" style="display:none">
<em>Diposting oleh Lidia Gaymond – Product Manager, Google Play</em>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVf1xFfP7lv0klpYSL7CyQ7KvpPFIWmRSwS2JHzzeLy43LkVZp82t1EpFkbLcTQMcPNOpxtWv8ntPTglOpjnutQ4Sn8nUzgMbiRBZMBKlHGIte6DjxAg_oP2PWrbTQ1dd-YXSgvRcrlm1gpDWU7Dju5Yc8ecMCIdvFr11gnd5AMO4nDQ3EKFUouM3z-vs/s1600/HEADER-Prompt-users-on-the-outdated-versions-to-update.png" imageanchor="1"><img border="0" data-original-height="800" data-original-width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVf1xFfP7lv0klpYSL7CyQ7KvpPFIWmRSwS2JHzzeLy43LkVZp82t1EpFkbLcTQMcPNOpxtWv8ntPTglOpjnutQ4Sn8nUzgMbiRBZMBKlHGIte6DjxAg_oP2PWrbTQ1dd-YXSgvRcrlm1gpDWU7Dju5Yc8ecMCIdvFr11gnd5AMO4nDQ3EKFUouM3z-vs/s1600/HEADER-Prompt-users-on-the-outdated-versions-to-update.png" style="100%"></a>
<p>Selama bertahun-tahun, Google Play telah membantu pengguna menikmati versi terbaru aplikasi Anda melalui update otomatis atau update dalam aplikasi. Meskipun sebagian besar pengguna mengupdate aplikasi mereka dengan cara ini, beberapa pengguna mungkin masih tetap bertahan dengan versi aplikasi Anda yang sudah usang, tidak didukung, atau rusak.</p>
<p>Hari ini, kami memperkenalkan <a href="https://support.google.com/googleplay/android-developer/answer/13812041?hl=en" target="_blank">alat baru yang akan mengingatkan para pengguna ini untuk melakukan update</a>, membawa mereka lebih dekat dengan pengalaman aplikasi yang Anda inginkan.</p>
<p>Alat pemulihan Play memungkinkan Anda mendorong pengguna yang menjalankan aplikasi versi tertentu untuk mengupdate setiap kali mereka memulai ulang aplikasi.</p>
<img><div style="text-align: center;"><img alt="Gambar layar perangkat seluler berdampingan yang menunjukkan bagaimana permintaan untuk melakukan update terlihat oleh pengguna" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGEW0NLEbNjbJmx__iwYKDa1DFnLdhb4d85qEO3p0qzYUmagntSE-lyRLK4PXmlZ0w08dIPhj1oU6_nWC_X7ZOGHnNt0S1QB_YhUD4AaCZZvDQ9Oa3wOef6U4EWgj8YWiEsjMgNoqs7kvY3QFDUAY5eg9wB6RBgHBox7oIKFhqRuuk7Ifv9HtP0MEg5Ms/s1600/image1.png" width="80%"></div><imgcaption><center><em><b>Catatan:</b> Gambar ini hanyalah contoh dan dapat berubah sewaktu-waktu</em></center></imgcaption><br>
<p>Untuk menggunakan fitur baru ini, masuk ke <a href="http://play.google.com/console" target="_blank">Konsol Google Play</a> dan buka halaman Rilis atau Penjelajah App Bundle, di sini Anda bisa memilih versi aplikasi yang ingin Anda berikan prompt. Selain itu, fitur ini juga tersedia melalui <a href="https://developers.google.com/android-publisher/api-ref/rest/v3/apprecovery/create" target="_blank">Play Developer API</a>, dan akan segera diperluas sehingga Anda dapat menargetkan beberapa versi aplikasi sekaligus. Perlu dicatat bahwa versi yang ingin Anda gunakan untuk men-deploy prompt harus dibuat sebagai <a href="https://developer.android.com/guide/app-bundle" target="_blank">app bundle</a>.</p>
<p>Anda kemudian bisa mempersempit kriteria penargetan berdasarkan negara atau versi Android (jika diperlukan), tanpa perlu melakukan integrasi sebelumnya.</p>
<p>Saat ini, lebih dari 50% pengguna merespons prompt, sehingga lebih banyak pengguna yang mendapatkan pengalaman terbaik dari aplikasi Anda.</p>
<p>Setelah meminta pengguna untuk mengupdate, Anda bisa menggunakan alat pemulihan Konsol Play untuk mengedit konfigurasi update, melihat progresnya, atau membatalkan tindakan pemulihan. Pelajari lebih lanjut tentang fitur ini <a href="https://support.google.com/googleplay/android-developer/answer/13812041?hl=en" target="_blank">di sini</a> dan mulai menggunakannya sekarang juga!</p>
</div>
<hr>
</div>
</div>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-8802533513286308482024-01-24T10:04:00.006+07:002024-02-22T10:08:08.987+07:00Yang baru di rilis Jetpack Compose Januari ’24<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="https://android-developers.googleblog.com/2024/01/whats-new-in-jetpack-compose-january-24-release.html"/>
<meta name="original_url" content="https://android-developers.googleblog.com/2024/01/whats-new-in-jetpack-compose-january-24-release.html"/>
<style id="page-skin-1" type="text/css"><!--
body {
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
-webkit-font-smoothing: antialiased;
color: #202124
}
h1 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px
}
h2 {
font-size: 30px;
line-height: 40px
}
h2,
h3 {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500
}
h3 {
font-size: 24px;
line-height: 32px
}
h4 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 26px
}
h5 {
font-size: 16px;
line-height: 24px
}
h5,
h6 {
font-family: Roboto, sans-serif;
font-weight: 600
}
h6 {
font-size: 14px;
line-height: 22px
}
.display {
font-family: Roboto, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 67.2px
}
.hidden-text {
height: 1px;
overflow: hidden;
pointer-events: none;
position: absolute;
top: -10px;
width: 1px
}
img,
video {
border: 0;
height: auto;
max-width: 100%
}
body {
position: relative;
min-height: 100vh
}
body.no-scroll {
overflow: hidden
}
a {
color: #4184f3;
text-decoration: none
}
a:focus,
a:focus-visible {
outline-offset: -2px
}
.content-wrap {
padding-top: 200px;
max-width: 800px;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:915px) {
.content-wrap {
padding-top: 100px
}
}
.full-width {
width: 100%
}
.icon-link {
height: 42px;
width: 132px;
border-radius: 80px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: baseline;
-ms-flex-pack: center;
justify-content: baseline;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
background: transparent;
border: none;
color: black !important
}
.icon-link:hover {
background-color: hsla(213, 7%, 76%, .2)
}
.icon-link:focus {
background-color: hsla(213, 7%, 76%, .26)
}
.icon-link:active {
background-color: hsla(213, 7%, 76%, .32)
}
.adb-container {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto;
max-width: 1420px
}
@media only screen and (max-width:767px) {
.adb-container {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--large {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto
}
@media only screen and (max-width:767px) {
.adb-container--large {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--flex-horizontal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.section,
body {
margin: 0
}
.adb-card {
position: relative;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
margin: 40px 0;
padding: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: box-shadow .2s linear, opacity .2s linear;
transition: box-shadow .2s linear, opacity .2s linear, -webkit-box-shadow .2s linear
}
.divider {
border: none;
height: 1px;
color: #DADCE0;
background-color: #DADCE0;
margin: 0 20px;
}
.adb-card:first-child {
background-color: #d7effe;
border: none;
padding: 32px 24px 32px;
margin: 40px 20px 60px;
}
@media only screen and (max-width:850px) {
.adb-card {
max-height: unset;
padding: 0 20px
}
.adb-card:first-child {
margin-bottom: 40px;
}
}
@media only screen and (max-width:600px) {
.adb-card:first-child {
margin: 0 -20px 40px;
}
.adb-card {
border-radius: 0;
padding: 0;
}
.divider {
margin: 0;
}
.content-wrap {
padding-top: 54px;
}
}
.adb-card:focus-within,
.adb-card:hover {
-webkit-box-shadow: 0 0 36px rgba(0, 0, 0, .1);
box-shadow: 0 0 36px rgba(0, 0, 0, .1);
cursor: pointer
}
.adb-card__href {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.adb-card__image-wrapper {
overflow: hidden;
position: relative;
width: auto;
-webkit-flex-basis: 40%;
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.adb-card__content {
padding: 24px 0 0
}
.adb-card__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 600;
margin-bottom: 12px
}
.adb-card__info {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 24px
}
.adb-card__description {
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin-bottom: 48px
}
.adb-card:hover .adb-content__image-wrapper img,
.adb-card__href:focus~.adb-content__image-wrapper img {
-webkit-transform: scale(1.03);
transform: scale(1.03);
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease
}
.devsite-footer {
padding: 0 24px;
border-top: 1px solid #bdc1c6
}
.devsite-footer li {
display: block
}
.devsite-footer li a {
text-decoration: none;
font-size: 14px;
line-height: 16px;
color: #202124
}
.devsite-footer li a:focus,
.devsite-footer li a:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-linkboxes-list {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
padding: 24px 0;
border-bottom: 1px solid #bdc1c6
}
@media only screen and (max-width:767px) {
.devsite-footer-linkboxes-list {
grid-template-columns: 1fr;
padding-left: 0
}
}
.devsite-footer-linkbox {
display: block
}
.devsite-footer-linkbox-heading {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin: 0 0 4px
}
.devsite-footer-linkbox ul {
padding-left: 0
}
.devsite-footer-sites-list {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-utility nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 24px 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0
}
}
.devsite-footer-utility-button {
justify-self: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 20px;
margin-left: auto;
padding-left: 16px
}
.devsite-footer-utility-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 8px 0 0
}
.devsite-footer-utility-item:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.devsite-footer-utility-item:not(:first-child):before {
content: "|";
margin: 0 8px 0 0
}
}
.devsite-footer-sites {
border-bottom: 1px solid #bdc1c6;
padding: 24px 0 23px
}
.devsite-footer-sites-logo {
height: 32px;
margin-top: 5px;
width: 185px
}
.devsite-footer-sites-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0
}
.devsite-footer-sites-item {
margin: 0 0 0 40px
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-item {
margin: 0
}
}
.devsite-footer-sites-link {
display: block;
padding: 8px 0;
color: #202124
}
.devsite-footer-sites-link:focus,
.devsite-footer-sites-link:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-utility-link:focus {
text-decoration: underline
}
.devsite-footer-utility .devsite-footer-utility-button {
line-height: 20px;
font: 400 14px/16px Roboto, sans-serif
}
.devsite-footer-utility .devsite-footer-utility-button:before {
content: "";
margin: 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility .devsite-footer-utility-button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
margin: 18px 0 12px
}
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link {
border: 0;
background: #1a73e8;
color: #fff;
line-height: 36px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0 0 16px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px 0;
box-shadow: 0 1px 2px 0;
display: inline-block;
font: 500 14px/36px Roboto, sans-serif;
height: 36px;
letter-spacing: 0;
min-width: 36px;
padding: 0 24px;
text-align: center;
-webkit-transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s, -webkit-box-shadow .2s;
vertical-align: middle;
white-space: nowrap
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link:hover {
background: #1765cc
}
.adb-page__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px;
text-align: center;
color: #202124
}
.adb-detail hr {
border: 1px solid #dadce0;
margin: 40px 0
}
.adb-detail__title {
font-size: 40px;
font-weight: 600;
line-height: 48px
}
.adb-detail__info {
font-weight: 400;
font-size: 16px;
line-height: 24px
}
.adb-detail__content {
min-height: 200px
}
.icon-sidebar {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
top: 0;
left: -300px;
max-width: 220px;
gap: 8px
}
.icon-sidebar .share-text {
font-weight: 500;
margin-left: 4px
}
@media only screen and (max-width:1440px) {
.icon-sidebar {
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
left: 0;
margin-top: -20px;
margin-bottom: 40px;
}
.icon-sidebar .share-text {
display: none;
}
}
.copy-tooltip {
display: none;
position: fixed;
bottom: 16px;
left: 10px;
z-index: 100;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.copy-tooltip .copy-tooltiptext {
width: 200px;
background-color: #073042;
color: #fff;
text-align: center;
border-radius: 80px;
padding: 8px 16px;
}
.header__overlay {
height: 100vh;
left: 0;
position: fixed;
width: 100vw;
border: none;
background-color: rgba(0, 0, 0, .4);
-webkit-animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
opacity: 0;
top: 0;
z-index: -1;
display: none
}
.header__overlay.show {
display: block;
opacity: 1;
z-index: 800;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out
}
.social-icons__links {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
.social-icons__links path {
fill: #80868b
}
.social-icons__container-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin-right: 14px
}
@media only screen and (max-width:1000px) {
.social-icons__container-header {
display: none
}
}
.adb-blog-logo:focus,
.adb-blog-logo:hover {
opacity: .7;
text-decoration: none
}
.adb-blog-logo__image {
height: 32px;
margin-left: 0;
margin-top: 6px
}
@media only screen and (min-width:840px) {
.adb-blog-logo__image {
margin-left: 24px
}
}
.header {
position: fixed;
background: #fff;
z-index: 700;
top: 0;
width: 100%;
overflow: hidden;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
height: auto
}
.header .top-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 24px;
height: 50px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #e6e6e6
}
@media only screen and (max-width:839px) {
.header .top-row {
padding: 0 16px
}
}
.header .top-row__left,
.header .top-row__right {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 100%
}
.header .nav-row,
.header .top-row__left,
.header .top-row__right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.header .nav-row {
background: #fff;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.header .nav-items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 50px;
position: relative;
background-color: #fff
}
@media only screen and (max-width:839px) {
.header .nav-items {
display: none
}
}
.header .nav-items tab {
position: relative
}
.header .nav-items tab.active .header__nav-item:after,
.header .nav-items tab:hover .header__nav-item:after {
background: #1a73e8
}
.header .nav-items tab.active .header__nav-item,
.header .nav-items tab:focus-within a {
color: #202124
}
@media only screen and (max-width:839px) {
.header .header__cta,
.header .nav-items {
display: none
}
}
.header__search-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 6px 0 6px 24px;
overflow: hidden;
position: relative;
margin-right: 36px;
border-radius: 4px
}
@media only screen and (max-width:767px) {
.header__search-container:not(.mobile) {
display: none
}
}
.header__search-container.mobile {
margin: 0 0 20px
}
.header__search-container.mobile #searchform,
.header__search-container.mobile .searchbox {
width: 100%
}
.header__search-container .searchbox {
border-radius: 2px
}
.header__search-container .searchbox input {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
font-weight: 500;
color: #80868b;
border: 0;
margin: 0;
height: 20px;
outline: 0;
padding: 8px 8px 8px 40px;
width: 100%;
-webkit-transition: background .2s;
transition: background .2s
}
.header__search-container .searchbox input::-webkit-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input:-ms-input-placeholder,
.header__search-container .searchbox input::-ms-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input::placeholder {
color: #80868b
}
.header__search-container .searchbox input:hover {
background: #e8eaed
}
.header__search-container .material-icons {
color: #80868b;
left: 8px;
position: absolute;
top: 6px;
-webkit-transition: color .2s;
transition: color .2s
}
.header__cta {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #1a73e8 !important;
text-decoration: none
}
.header__cta.mobile {
padding: 18px 0
}
.header__cta:hover .cta-icon {
margin-left: 0;
margin-right: 12px
}
.header__cta .cta-icon {
-webkit-transition: margin-right .2s linear, margin-left .2s linear;
transition: margin-right .2s linear, margin-left .2s linear;
margin-left: 4px;
margin-right: 8px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.header__cta .cta-icon path {
fill: #1a73e8
}
.header__nav-item {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #80868b;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 18px;
height: 100%;
text-transform: none;
text-decoration: none
}
.header__nav-item:hover {
color: #202124
}
.header__nav-item.mobile {
font-weight: 500;
padding: 0
}
.header__nav-item:after {
bottom: 0;
border-radius: 3px 3px 0 0;
content: "";
display: block;
height: 3px;
left: 50%;
min-width: 20px;
position: absolute;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(100% - 24px)
}
.header__hamburger {
border: 0;
background: none;
outline: none;
padding: 0;
margin: 1px 8px 0 -4px;
padding: 8px;
color: rgba(0, 0, 0, .65);
cursor: pointer
}
@media only screen and (min-width:840px) {
.header__hamburger {
display: none
}
}
.header__side-menu {
background-color: #fff;
bottom: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
z-index: 900
}
.header__side-menu.is-open {
-webkit-transform: translateX(0);
transform: translateX(0);
width: 80%
}
.header__side-menu.is-open,
.header__side-menu__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%
}
.header__side-menu__content {
padding: 18px 16px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.header__side-menu__content .spacer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.header__side-menu__title {
font-family: Roboto, sans-serif;
font-size: 20px;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px
}
.header__side-menu__items {
list-style: none
}
.header__side-menu__items li {
padding: 12px 0
}
.header__side-menu__items tab {
position: relative
}
.header__side-menu__items tab.active .header__nav-item,
.header__side-menu__items tab:focus-within a {
color: #202124
}
.header__side-menu__bottom {
border-top: 1px solid #e6e6e6
}
.header__side-menu__logo-container {
background: #fff;
height: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 4px 16px;
border-bottom: 1px solid #e6e6e6
}
#nav .widget {
margin: 0
}
.featured__wrapper {
width: 100%;
border: 0;
background-color: #e8f0fe;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 80px 0
}
@media only screen and (max-width:767px) {
.featured__wrapper {
padding: 0
}
}
.featured__inner {
max-width: 1080px;
width: calc(100% - 24px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
padding: 48px
}
@media only screen and (min-width:768px) {
.featured__inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
padding: 12px 80px
}
}
.featured__href {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.featured__image {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
max-width: 100%;
}
.featured__content {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-top: 24px;
width: 100%
}
.featured__title {
font-size: 32px;
line-height: 44.8px;
font-weight: 500;
font-family: Android Euclid, Roboto, sans-serif;
margin-bottom: 15px
}
.featured__info {
font-family: Roboto Mono, monospace;
font-weight: 400;
font-size: 12px;
line-height: 160%;
margin-bottom: 24px
}
.featured__description {
margin-bottom: 48px
}
.preview.featured__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f1f3f4;
padding: 64px 0 120px
}
.preview.featured__wrapper h1 {
margin: 0 0 64px
}
.blog-label-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px
}
.blog-label-container .blog-label {
text-decoration: none;
z-index: 3
}
.blog-label-container .blog-label span {
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
background-color: #F1F3F4;
border-radius: 100px;
padding: 4px 16px;
color: #3c4043
}
.adb-card:first-child .blog-label span {
background-color: #fff;
}
.blog-label-container .blog-label span:focus,
.blog-label-container .blog-label span:hover {
background-color: #D7EFFE
}
.adb-card:first-child .blog-label span:focus,
.adb-card:first-child .blog-label span:hover {
background-color: #F1F3F4
}
.blog-label-container .blog-label span:focus-visible {
outline-offset: 0
}
#pagination-container {
display: none
}
.pagination {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.pagination .page-button {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: black;
background-color: #3DDC84;
padding: 16px 24px;
border-radius: 80px;
text-decoration: none
}
.pagination .page-button:focus,
.pagination .page-button:hover {
background-color: #3DDC8460;
}
.pagination .page-button.disabled {
color: #80868b;
background-color: #f1f3f4
}
--></style>
<style id="template-skin-1" type="text/css"><!--
--></style>
<style>
/** Blogger default styles **/
html, .Label h2, #sidebar .rss a, .BlogArchive h2, .FollowByEmail h2.title, .widget .post h2 {
font-family: Roboto, sans-serif;
}
.plusfollowers h2.title, .post h2.title, .widget h2.title {
font-family: Roboto, sans-serif;
}
pre, .post-content pre.prettyprint {
background-color: #f7f7f7;
border: 1px solid #ddd;
margin: 0 0 1em 0;
padding: 1em;
overflow: auto;
}
pre, code {
font-size: 9pt;
line-height: 125%;
font-family: monospace;
}
pre, code {
color: #060;
font: 13px/18px Consolas, 'Liberation Mono', Menlo, Monaco, Courier, monospace;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
/* Styles for https://github.com/google/code-prettify */
.com { color: #060; }
.kwd { color: #008; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.fb-custom img, .twitter-custom img, .gplus-share img, .email-custom img {
cursor: pointer;
opacity: 0.54;
}
.twitter-custom, .gplus-share, .fb-custom {
margin-right: 12px;
}
/** Blogger custom theme **/
.adb-header,
.searchBox input {
box-sizing: border-box;
}
.popout-nav {
background-color: white;
width: 280px;
height: 100%;
position: fixed;
z-index: 6;
left: -280px;
transition: left 0.2s;
}
.popout-search {
background-color: white;
width: 280px;
position: fixed;
z-index: 6;
right: -280px;
transition: right 0.2s;
top: 0;
}
.popout-search .widget {
margin: 0;
}
.popout-search #BlogSearch2_form .popout-options {
padding-right: 24px;
width: calc(100% - 48px);
}
.dropdown-nav {
display: none;
background-color: white;
width: 104px;
position: fixed;
padding: 4px 0px 3px 0px;
z-index: 4;
left: 352px;
top: 176px;
transition: top 0.2s;
box-shadow: 0 0px 2px 0 rgba(60,64,67,.3), 0 0px 6px 2px rgba(60,64,67,.15), inset 0 0px 6px -4px rgba(154,160,166,.5);
}
.dropdown-options {
align-items: center;
display: flex;
flex-wrap: wrap;
width: 94px;
height: 48px;
padding-left: 10px;
}
.dropdown-options:hover {
background-color: #f7f9fa;
}
.dropdown-options span {
color: #80868b;
}
.popout-options {
padding-right: 8px;
padding-left: 24px;
padding-top: 16px;
padding-bottom: 15px;
display: inline-block;
width: calc(100% - 32px);
border-top: 1px solid #ddd;
font-size: 13px;
font-weight: 700;
color: #80868b !important;
}
.popout-options:last-of-type {
border-bottom: 1px solid #ddd;
}
.popout-options:first-of-type {
border-top: 0;
}
#close-popout {
padding: 12px 12px 11px 20px;
}
#close-search-popout {
padding: 12px 20px 11px 12px;
text-align: right;
}
.popout-search-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
transition: opacity 0.2s;
}
.popout-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
z-index: 5;
transition: opacity 0.2s;
}
html {
background-color: #fff;
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
width: 100%;
position: absolute;
padding: 0;
/* This ensures that the scroll bar is always present, which is needed */
/* because render happens after page load; otherwise the header */
/* would 'bounce' in-between states. */
min-height: 150%;
}
h2 {
font-size: 130%;
}
h1, h2, h3, h4, h5 {
line-height: 1.5em;
margin-bottom: 1em;
}
html, h4, h5, h6 {
font-size: 14px;
}
a, a:visited {
color: #039be5;
text-decoration: none;
}
pre code {
display: block;
}
.cols-wrapper {
margin-top: 56px;
}
.header-outer, .cols-wrapper {
padding: 0 60px;
}
html, .header-inner a {
color: #212121;
color: rgba(0, 0, 0, .87);
}
/** Archive widget. **/
.BlogArchive {
font-size: 13px;
font-weight: normal;
}
.BlogArchive .widget- {
display: none;
}
.BlogArchive h2, .Label h2 {
color: #039be5;
text-decoration: none;
}
/* Specificity needed here to override widget CSS defaults. */
/* Months */
.Label {
font-size: 13px;
font-weight: normal;
}
.sidebar-icon {
display: inline-block;
width: auto;
vertical-align: middle;
height: 24px;
margin-right: 24px;
}
.sidebar-social-links {
align-items: center;
}
.sidebar-social-links .android-logo,
.android-logo {
height: 48px;
}
.sidebar-social-links a:last-child img {
margin-right: 0;
}
.Label .widget- {
display: none;
}
.searchBox input {
border: 1px solid #eee;
color: #212121;
color: rgba(0, 0, 0, .87);
font-size: 14px;
padding: 8px 8px 8px 40px;
width: 100%;
font-family: Android Euclid, Roboto, sans-serif;
background: url('https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png') 8px center no-repeat;
}
.searchBox ::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .54);
}
.section {
margin: 0;
padding: 0;
}
#sidebar-top {
border: 1px solid #eee;
}
#sidebar-top > div {
margin: 16px 0;
}
/*main post*/
.post {
margin-bottom: 30px;
}
#main .post .title {
margin: 0;
}
#main .post .title a {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: normal;
font-size: 24px;
}
.message, #main .post .post-header {
margin: 0;
padding: 0;
}
#main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption {
color: #444;
font-weight: 500;
}
#main .post .post-header .published {
font-size: 11px;
font-weight: bold;
}
.post-header .publishdate {
font-size: 16px;
font-weight: normal;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#main .post .post-footer {
font-size: 12px;
padding-bottom: 21px;
}
.label-footer {
margin-bottom: 12px;
margin-top: 12px;
}
#main .post .post-header .published {
margin-bottom: 16px;
}
.post .post- {
color: #545454;
color: rgba(0, 0, 0, .67);
font-size: 16px;
margin: 16px 0 36px 0;
line-height: 24px;
word-wrap: break-word;
}
.post-summary {
display: none;
}
/* Override all post images/videos to left align. */
@media (max-width: 712px) {
.post- img {
max-width: 100%;
height: auto;
width: auto;
}
}
.post- .tr-caption-container img {
margin-bottom: 12px;
}
.post- iframe, .post- embed {
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
}
.post- .carousel-container {
margin-bottom: 48px;
}
#main .post- b {
font-weight: 500;
}
/* These are the main paragraph spacing tweaks. */
#main .post- br {
: '';
display: block;
padding: 4px;
}
.post-content .space {
display: block;
height: 8px;
}
.post-content iframe+.space, .post-content iframe+br {
padding: 0 !important;
}
#main .post .jump-link {
margin-bottom: 10px;
}
.post-content img, .post-content iframe {
margin: 30px 0 20px 0;
}
.post-content > img:first-child, .post-content > iframe:first-child {
margin-top: 0;
}
.col-right .section {
padding: 0 16px;
}
#aside {
background: #fff;
border: 1px solid #eee;
border-top: 0;
z-index: 2;
}
#aside .widget {
margin: 0;
}
#aside .widget h2, #ArchiveList .toggle+a.post-count-link {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: 400 !important;
margin: 0;
}
#ArchiveList .toggle {
float: right;
}
#ArchiveList .toggle .material-icons {
padding-top: 4px;
}
#sidebar-top,
#sidebar {
background: #fff;
}
#sidebar .tab {
cursor: pointer;
}
#sidebar .tab .arrow {
display: inline-block;
float: right;
}
#sidebar .tab .icon {
display: inline-block;
vertical-align: top;
height: 24px;
width: 24px;
margin-right: 13px;
margin-left: -1px;
margin-top: 1px;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget-content > :first-child {
padding-top: 8px;
}
#sidebar .active .tab .arrow {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#sidebar .arrow {
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget h2 {
font-size: 14px;
line-height: 24px;
display: inline-block;
}
#sidebar .widget .BlogArchive {
padding-bottom: 8px;
}
#sidebar .widget {
border-bottom: 1px solid #eee;
box-shadow: 0px 1px 0 white;
margin-bottom: 0;
padding: 14px 0;
min-height: 20px;
}
#sidebar .widget:last-child {
border-bottom: none;
box-shadow: none;
margin-bottom: 0;
}
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style: none;
padding: 0;
}
#sidebar ul li a {
line-height: 32px;
}
#sidebar ul ul ul li a {
line-height: 24px;
}
#sidebar .archive {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC');
height: 24px;
line-height: 24px;
padding-left: 30px;
}
#sidebar .labels {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC');
height: 20px;
line-height: 20px;
padding-left: 30px;
}
#sidebar .rss a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII=');
}
#sidebar .subscription a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC');
}
#sidebar-bottom {
background: #f5f5f5;
border-top: 1px solid #eee;
}
#sidebar-bottom .widget {
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
text-align: center;
}
#sidebar-bottom > div:last-child {
border-bottom: 0;
}
#sidebar-bottom .text {
line-height: 20px;
}
/* Home, forward, and backward pagination. */
.blog-pager {
padding-top: 10px;
margin-top: 15px;
text-align: right !important;
}
#blog-pager {
padding: 40px 0 0;
}
#blog-pager a {
display: inline-block;
}
.blog-pager i.disabled {
opacity: 0.2 !important;
}
.blog-pager i {
color: black;
margin-left: 16px;
opacity: 0.54;
}
.blog-pager i:hover, .blog-pager i:active {
opacity: 0.87;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
.gplus-profile {
background-color: #fafafa;
border: 1px solid #eee;
overflow: hidden;
width: 212px;
}
.gplus-profile-inner {
margin-left: -1px;
margin-top: -1px;
}
/* Sidebar follow buttons. */
.followgooglewrapper {
padding: 12px 0 0 0;
}
.loading {
visibility: hidden;
}
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 40px !important;
}
/* ADB */
.adb-hero-area {
min-height: 104px;
background-color: #073042;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
z-index: 5;
position: fixed;
width: 100%;
}
.adb-hero-logo {
height: 80px;
position: absolute;
top: 12px;
left: 16px;
}
.adb-footer-btm {
display: flex;
margin: 0 24px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 40px;
}
.subscribe-btn {
color: black;
background-color: #3DDC84;
border-radius: 100px;
font: 500 16px/24px Android Euclid,Roboto,sans-serif;
padding: 12px 24px;
border: 0;
}
.adb-footer-info {
align-items: center;
display: flex;
padding: 0;
margin: 9px 0 0 -8px;
font-size: 13px;
}
.footer-list {
list-style: none;
padding: 0 8px;
}
.subscribe-info {
list-style: none;
padding: 0 8px 0 0;
font-size: 13px;
color: black;
}
.footer-newsletter {
display: flex;
align-items: center;
}
.adb-header-inner {
display: flex;
align-items: center;
}
.adb-header {
background-color: white;
color: #fff;
height: 48px;
left: 0;
overflow: hidden;
padding: 36px 24px;
right: 0;
top: 104px;
z-index: 4;
display: flex;
align-items: center;
position: fixed;
border-bottom: solid 1px #DADCE0;
}
.adb-shadow {
margin-top: 48px;
height: 1px;
width: 100%;
position: fixed;
background: white;
z-index: 2;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
}
.adb-logo-box {
display:inline;
}
.adb-burger-box {
display: none;
margin: 0 16px 0 0;
}
.adb-search-box {
display: none;
margin: 0 0 0 16px;
}
.adb-htag-box {
display: flex;
align-items: center;
}
.adb-header-tags {
padding: 0 24px 0 0;
}
.adb-header-tags ~ .atb-header-tags {
padding: 0 24px;
}
.adb-header-tags a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #5F6368;
}
.adb-header-tags a:hover {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #073042;
}
.more-dropdown {
display: none;
}
.dropdown-icon {
transition: all 0.3s;
}
.adb-header-logo {
display: inline-block;
vertical-align: -11px;
width: 134px;
height: 32px;
}
.adb-header-title {
color: #fff;
display: inline-block;
font-size: 20px;
font-weight: normal;
}
.adb-header-links {
border-left: 1px solid rgba(0, 0, 0, .1);
display: block;
left: 250px;
list-style: none;
margin: 0;
padding: 12px 0 12px 18px;
position: absolute;
top: 0;
}
.adb-header-link-item {
display: inline-block;
}
.adb-header-link, .adb-header-link:visited {
color: #fff;
display: inline-block;
font-weight: 500;
opacity: .7;
padding: 12px 9px;
text-transform: uppercase;
vertical-align: 2px;
}
.adb-header-link:hover, .adb-header-link:focus {
color: #fff;
opacity: 1;
}
.adb-header-console, .adb-header-console:visited {
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
color: #fff;
float: right;
font-size: 14px;
font-weight: 500;
line-height: 28px;
padding: 4px 10px;
position: relative;
text-transform: uppercase;
transition: box-shadow .2s;
z-index: 60;
}
.adb-header-console:hover {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
color: #fff;
}
.adb-header-console:focus {
background-color: rgba(63, 81, 181, .1);
color: #fff;
}
.adb-header-console-image {
vertical-align: -5px;
}
.adb-hero {
background-color: #dcedc8;
margin-top: 64px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
color: #414141;
display: inline-block;
font-weight: 500;
margin: 25px 25px 0;
}
.adb-hero-inner {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAc4AAADZCAMAAACenCAVAAAAvVBMVEXc7cjY68PT6bvR57fQ57bY6sPZ68TU6bvR6LfP5rTQ57XR57jW6r7b7cfa7MbS6LnS6Lrb7cbQ6Lfb7MbX6r/Z68PY6sLV6b7U6b3U6r3T6LnX68Da7MXP57Tb7Mfc7cfW6b/P57XS57nY68LY68HU6L3W6r/W6b7T6brX6sDV6rzQ57fa7MTV6b3T6Lra68TR57bX68HW6sDS57jU6bzO5rTP5rXZ7MXR6LbZ68XX6sHT6LvV6bzS6LjZ7MILrTuqAAAIyklEQVR4AezXhXEkUQwE0B6+Xhg8MzND/smZ4UsLBSb9Kr0UhI1vl6RZnqUFlnBl9Y+j8WQK4+qGr9oOi7iKr0YFTOt6vhsPmM81/FDAspafUszl/vNTXsOuFYZWMYfrRgyswa51hjLM4TYYGsOuTQpbgNO2dyjAroxCvgunpZT2YFZDaQKnlFRg1z6lgxpOOqS0CbtqKutwwhGVYxh2QqWGC/WUMlhWH1BK4QKnVFZh2hmVEh/cXk7pHLbt5pQafHCT6Jr9gsoR3riayiXMyyhd4Y27jDDHJVQu8MJdU7lBBBpKoz08c7eU8gERuKNyhiduhcopolBRqeGAMaV7xKE7eGzvThQTVZooAJdC1AM2qGg0BhdCrpnciVE0i9dZ3v+t/n2ZMBtJGpsu6nuCrNJddar4/gAnMmuP/GPk3JFwrL2QKw3FD26GyGmQNXbIGVHNKdfmYraDl/ZUcxO8NNtIW888bafDC7tP5R2qtQfL724N5AypxjbIGdseWHMV1VfP+rrnZvbTerMEhHb2Py4eA7KX9AwD5LSppi5ZdPTHEhv6cd5mSjZaeMW/Dc66TEpkO+Q0qIbUE5es6ke85FMN/YGXZs9yQLdXYGVASGJDBaMZXsQouzau/fzfitNsKvpUL1O8dFBksb+Q80C1coaco7RtLeYzO9tHCV7qUY0ckXPGribSoNpQB3Z1MbWtby1hiZwWw35CRjUReRx7Sg5ecqgmJiyHOxrIWVEtPDPNY/TMx4bmczq5T3jpSRELm1NWodVmlGY364tP4ZXvdw5u8jjDf8yQJJ7j+2HYfBh3d+l5HFB5RmyzjM3yh8iDUbb6M9y7j3idgxM+3BzTuPzyXmdOTARJaUc8tUmX7ekB7+aF7dV1a0G6pIx3CkxKmBBUreMfvS0086aTnZZf6kfG53mlN/0UnS2bW5Socz9OA737eM6JkZWu4uUiXfVcnIT34eZM6Yq9hcRKR0OpL7i9cHBi/udjrCOUuiFWsnc2/oKsfYAhXvM2lsj4S/7b2/L9y4cODDu0j8HbBzqSPvutOksqpDH+gorw1+dvHLcaEzv3r4+0BdmnBJXi9bL+G6qaEbFz98rF4sEwnKGKrrrxK3sOuzoMlM9i+ql47KPC/HX8inTxljgKUHBYI1g6qDx/HBct76XETfHF4v3hHpZwVgH9APc0TfFSyTwLZ7DJ9FYxmZvTv1h89DmBdbyHEX0rcuuTRB38fNuQ2vmw1GAYMSjv6ZwQbD0ksFlz9LPW7gMxNv3RBVtlDqz3cbWo32rmEXLGFExcsJBMnilGzk29pleT5gx8fLiq2XzyM2rllpiboEYGxF2UoD6+EntL1Ma+TkOP/LVqNJLM3yeqgayDmnjqKmIu3aNGDhlx1pqiZvyUuAqaqKGwRRwt1gnqqR0QO5ce6ms5J1ZGIWqtkxIf0QNqb7ohJjIXgFjPiYF4j38R2wbZTk1m+C/xqU9WSzv4hkgyVkcg0QvIUg0XEHleRjaK/gQb8g/a2EL8hHcky6zxC+JTQBa5c/BL4nBO1lgl+B2xJjv0QxQgnA1ZoOGhGHFNldedoShxMadKU/d4BeEEVGF3Ll5FJF+psm7Bh5xwHyDeoKeogvp7iDfpbKhyWgeIN/JSqpjbBOLtlqwq7qJNFdKGeKdQUUUEIcS7Df6iSngeQAPhtqgCWi60EElKxjUSsCFriK5nYEMuLDtoJSZk0BiaiaYsZGPlXnEqHoipIhOaKIW4WnD63xThgtP/pthHdFqfUCIRRvK/KZ+3VX1uiulc7puc3EstSOpD9d7+LYGTFfiQenyKkxE3VLLGI9iQkcH4CackzqlEwRYnJbwNlUb5ODHhBVSWHk5O+JFMLkh5qFYxLxnoPZ9BmJGRdrELNuTddNEAwhg34NSvFnvSqgth1ANpNEIZkhkYSg4dt9rHocCFXvvxWUD/ELR2TQ98hMOWon+Ks7YLrZI70iWETu6yT99Qt3uw4A4j+lY6hU4dVcloUFdR3tkA1kt29J1zHxr1SIsGNAoDnvGjMCj/CLmr3INzQj9x5sFm41Ns933c0PtNoc+O0bJNA9+Xryp14+zSL9x5PH6beS2vQrfP0exkQcMG08BdCn1SepeFc8KPijWs5MxPdzN4CipzR2nQb8wdnu0O5UKbkN7h/LQZ/a9Ms+pZNYp9kQt9Yvo9H3Yx8H15QSXm/qZUQMY0ybOCPtNKlIMuqYAogW1SKkBBoxW9SXSARoqKCGGbBRVxBY0C85V3h2mb/MrASGxIb3BnYlaxwXRmLwUMFxMc6NSlQvpM6nt5MXTylOl00JGKYTqxp6DVBb1SkECrlOmvs0HFGA7efjA0dwrLfKVC5tDLp1dpGHrGKFjm0tCZYEWvMTA0NrOBZVZUSMtoLn4I3T5RISnTZTGXJrea9BPotmU6QrqlQi6gXWx05V5MRTiwTaD/4aW5FN8y9pCJYZ2usSPBNRUzNfapNIZ1fGM7KQdUSMNYJyl6Ajh2yAKTBUYHpfCZruJ0jB3wCpVur1GSIf3G8yOPlG1ePDN46d2iJEmLR+86L4lNBRQTZXK/6UAxunMWDxC3Da6omXsoz5XiOa8/NfV9JYHRXVBXiudG8r0y9Jmzpl87oFSDFv3Qog2rDTb0Q6qJckX0K7coWTKkHxh1YLmkSz/Q6JjNKnVQOj+lnM0nMPDxmnLuPhjej5rhFLbjmP4nOF6BCXfdov8JLkPj+xcdnMjh03p3nWXLBwesuB/+GGbHXbc5wIkkSt7CwEmXU1lGbPX3OYVBt5y2Yoov9EN/QVhpJK9xZL/7P4Kw1LO8iIH7qxx8CEu5zG8pcldpQ1hrSjnBI4S9YnrpBsJiEzkIcfIkByFWUqkIcdKjb7kQdos49a3Fjv7vE4TlfPoflYAPuXoeIaw3pv+6h7CeQ/8RPYIP6XpegwGxknMtwxcqK7AgAqkhcDKkf3oAI9LE9sCDWGhf4S8M70peggnxQERTMCFcIjUDF+KOUrAhhvQANkT4dwEsPvJYWz4QAAAAAElFTkSuQmCC');
background-position: bottom right 70px;
background-repeat: no-repeat;
background-size: auto 100%;
margin: 0 auto;
max-width: 980px;
padding: 0 60px;
position: relative;
}
.adb-hero-back-icon {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.adb-hero-title {
font-size: 22px;
line-height: 28px;
padding: 24px 24px 0px 112px;
}
.adb-hero-title a {
color: #FFFFFF;
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500;
}
.adb-hero-summary {
font-size: 16px;
line-height: 24px;
padding: 8px 24px 8px 112px;
}
.adb-hero-summary a {
color: rgba(255, 255, 255, 0.9);
}
.adb-hero-description {
color: #6f7172;
font-size: 16px;
margin: 0;
max-width: 440px;
padding-bottom: 32px;
}
.adb-hero-search {
position: absolute;
top: 19.35%;
right: 1.94%;
}
.adb-hero-search .searchBox input {
border: 1px solid #80868B;
border-radius: 4px;
color: white;
}
.adb-hero-search .searchBox input::placeholder {
color: #F1F3F4;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
padding-left: 12px;
}
.adb-hero-link {
position: absolute;
right: 1.67%;
top: 64.52%;
}
.adb-hero-link a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #3DDC84;
letter-spacing: 1.4px;
}
.adb-hero-arrow {
display: inline-flex;
font-size: 24px;
vertical-align: middle;
}
.adb-socials-box {
display: flex;
position: absolute;
right: 1.67%;
}
.adb-socials-category,
.adb-socials-divider {
display: flex;
align-items: center;
}
.adb-socials-divider {
color: #DADCE0;
font-size: 40px;
font-weight: 100;
margin: 0 20px;
}
.adb-socials-category img,
.adb-footer-social-links img {
height: 24px;
}
.adb-footer-social-links-img {
margin-right: 20px;
}
.adb-hero-subscribe, .adb-hero-subscribe:visited {
background-color: #90c653;
color: #fff;
display: inline-block;
border-radius: 3px;
margin: 25px 0 60px;
padding: 13px 32px;
text-transform: uppercase;
}
.adb-hero-subscribe:hover, .adb-hero-subscribe:focus {
background-color: #333;
}
.adb-footer {
margin: 32px auto 64px;
}
.adb-footer-more {
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #f0f0f0;
padding: 30px 0;
}
.adb-footer-more a {
color: #000;
display: inline-block;
font-size: 20px;
font-weight: 300;
margin-right: 16px;
}
.adb-footer-social {
float: right;
margin-top: -62px;
}
.adb-footer-social a {
background-color: #ccc;
background-position: center;
background-repeat: no-repeat;
background-size: auto 16px;
border-radius: 50%;
display: inline-block;
height: 36px;
margin-left: 16px;
transition: background-color .1s;
width: 36px;
}
.adb-footer-social-youtube {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAQAAAAxWje/AAABLUlEQVQ4y6WUvUoDYRBFr42gCdhK8AV8BwsVC0FQfIQUgr5DIKJoGy1CfAaDq1hIGn8K2xDSaBc1wUJJEYmbkDXssdi1Mrvfst9tZ+bAzNwZSZLEAmvsUKTCBQ80eaWLyxiAMS5dXmhyT5UyBfIsM68/McM1aXRDJgCUSKsTSWQZpAa4ZMUmNtoSRxGhbd4TAI7F1eSIxBwVfAPgUtSjAJLEEk+xgLroxAEkpikyigS0RS8eIEks8hgB6ImhGSAxxS5fE9JGwksCkCRyOP/SfPFjC0jawl5UC9ZDbBvXuB+zxjezkZ5NRnJirHxmtLIjDq2O6UBsWJ3zut1D+WZWEqepAaVg0hlqqcpr4VMNbbpKngJlqtzRoMUnfTx8fDz6fNCiwS3n4VtfIRdU/gLTrSb7DGWLcQAAAABJRU5ErkJggg');
}
.adb-footer-social-youtube:hover {
background-color: #f44336;
}
.adb-footer-social-gplus {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAUCAQAAACpWpz6AAABJUlEQVQ4EZXBTUoCYQDH4X9hTS3Cja0Kyb2X6BCJoLlr1aKwK1QHCMMzWLiqTcuWXaAWQWIlU1DQh4QJ+Wt4X95x0hGn55FCeGzSpMUXXW45ocSC/oMiHUZ1KCgZZqkzyZaSoM7QgCd8BlgXLGo6ijgv7JJRgAxV3jjDUwwMOXh0sK5ZUQRZ5hQLQw4VrA/WlBCGHJpY+0oMQw5trLxCjNtTgFiij5VSiHFHChBL9LFSCjGurgCxRBsrrxA+Pj4+Pl2sQ0VgyKGJdaAYNLAqisCQQxnrk5xGkKOHlVUEhhw8HrFuWFUEaa6wLvUHhoYo4LxSZVkBlihzh7OuaagR9YzPD0PHmo5ZakzSIKVk2OCBUe/sMKPkmKfEKS16fHPPOduklcAvR50zMVwhTI4AAAAASUVORK5CYII=');
}
.adb-footer-social-gplus:hover {
background-color: #f44336;
}
.adb-footer-social-twitter {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAQAAAB0gUQ+AAABI0lEQVQ4EY3BQShDAQDH4f+zTSyJuLgoLlwclYOTHCwHu9ouiLRScpUmNwduDkpCSTs4LAeJhINoOTo4ctHkskyJtf20vWbe3tvb+z7JFUGibLHPMj0qoYEWSYzRKkdMkKbsm3m6WSRFuyQeuKNNNoTJU61ABL8kssAjvbKgiTR2V+ywJol3ijJMY+gP4zhLEpDEGWUpwvhUQgwnh/hURIT/3thjjmGWcBKViSCXeBWSiWdO+MGbPpm4watPfDIRxasLVXCANwuqwCDGK/V80akKGjnmmgLutmXFOvV80CUrAiRxNys7DCY5J4OzXdVCP7c4OcIvO5oJkSCHXZ5VDFkxwilP5HB2z6Cc0EGcF6plSTAqNxgMMEWcTTZYYYYhAqrpF0uh1zgYi1hVAAAAAElFTkSuQmCC');
}
.adb-footer-social-twitter:hover {
background-color: #55acee;
}
.adb-footer-social span {
display: none;
}
.adb-footer-related {
padding-top: 8px;
}
.adb-footer-related a {
color: #999;
font-size: 12px;
white-space: nowrap;
}
.adb-footer-related a:not(:last-child)::after {
content: '|';
cursor: default;
margin: 0 7px 0 10px;
}
.adb-footer-section {
margin: 48px auto;
max-width: 700px;
}
.adb-footer-title {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #3C4043;
margin-bottom: 24px;
}
.adb-footer-columns {
display: flex;
justify-content: space-between;
}
.adb-other-blogs-title img {
margin-right: 8px;
vertical-align: -12px;
}
.adb-footer-social-label {
display: flex !important;
align-items: center;
}
.adb-footer-column a,
.adb-footer-social-label,
#footer-subscribe .tab h2 {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
padding: .85em 0;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-btm a {
color: #000;
font-family: Android Euclid, Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.25px;
opacity: .7;
transition: opacity .1s;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-column a {
opacity: .7;
transition: opacity .1s;
}
.adb-footer-column a:hover {
opacity: 1;
}
.adb-footer-social-links {
margin: 0 0 20px;
}
#footer-subscribe .widget {
margin: 0;
}
#footer-subscribe .tab {
display: flex;
align-items: center;
}
#footer-subscribe .tab img {
height: 16px;
}
.adb-label-view-more-toggle {
cursor: pointer;
}
.adb-label-view-more-toggle::after {
content: '\00e5c5';
float: right;
font: 2em / .7 Material Icons;
opacity: .6;
}
.adb-label-view-more-toggle.active::after {
transform: rotate(180deg);
}
/** Desktop **/
@media (max-width: 900px) {
.col-right {
display: none;
}
.col-main {
margin-right: 0;
min-width: initial;
}
.cols-wrapper {
min-width: initial;
}
.adb-hero-inner {
background-image: none;
}
}
/** ADB header breakpoint **/
@media (max-width: 768px) {
.adb-header-links {
display: none;
}
.dropdown-nav {
display: none;
}
.adb-header {
padding: 12px;
text-align: center;
}
}
@media (max-width: 1196px) {
.breakpoint-hide {
display:none;
}
.more-dropdown {
height: 50px;
display: flex;
align-items: center;
}
}
@media (max-width: 915px) {
.adb-header {
height: 0;
margin: 0;
padding: 0;
display: none;
}
.adb-header-tags {
display:none;
}
.more-dropdown {
display:none;
}
.dropdown-nav {
display: none;
}
.adb-hero-summary,
.adb-hero-link,
.adb-socials-category {
display: none;
}
.adb-hero-title {
padding-left: 152px;
}
.adb-hero-logo {
height: 52px;
top: 12px;
left: 120px;
}
.adb-footer-section {
margin: 0 auto;
}
.adb-footer-btm {
margin: 0 24px 40px;
}
.adb-hero-area {
min-height: 76px;
}
.adb-burger-box {
display:inline;
position: absolute;
top: 17px;
margin-left: 24px;
font-size: 32px;
color: white;
}
.adb-hero-title a{
margin-left: 40px;
}
}
/** Tablet **/
@media (max-width: 712px) {
.header-outer, .cols-wrapper {
padding: 0 40px;
}
/* ADB */
.adb-hero-inner {
padding: 0 40px;
}
.adb-hero-title {
font-size: 16px;
padding-left: 132px;
}
.adb-hero-logo {
left: 100px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 36px;
}
.adb-other-blogs-list {
columns: auto;
}
.adb-other-blogs-title {
font-size: 20px;
}
.adb-other-blogs-title img {
height: auto;
vertical-align: -6px;
width: 32px;
}
.adb-footer-section {
margin: 0 24px;
}
.adb-footer-more {
padding-bottom: 75px;
}
.adb-footer-social {
float: none;
margin-bottom: 35px
}
.adb-footer-social .adb-footer-social-youtube {
margin-left: 0;
}
}
/** Small tablet **/
@media (max-width: 600px) {
.header-inner .google-logo {
top: 32px;
margin-top: 0;
}
.header-inner .google-logo img {
height: 56px;
width: auto;
/*
height: auto;
width: 188px;
*/
/* Override any optical adjustments at desktop size. */
top: 0 !important;
}
.header-left {
left: 0;
top: inherit;
bottom: 24px;
}
.adb-footer-columns {
display: block;
}
.adb-footer-column {
margin-bottom: 48px;
}
.adb-footer-column a {
opacity: 1;
}
.adb-footer-social-label {
padding: 0;
}
.adb-footer-column .widget a {
padding: 0;
}
.footer-newsletter {
margin-top: 16px;
}
.subscribe-btn {
width: 100%;
}
.adb-hero-search {
display: none;
}
.adb-search-box {
display:inline;
position: absolute;
top: 24px;
right: 24px;
font-size: 24px;
color: white;
}
}
/** Mobile **/
@media (max-width: 480px) {
.header-outer, .cols-wrapper {
padding: 0 16px;
}
.adb-hero-logo {
height: 28px;
top: 24px;
left: 76px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 16px;
}
.cols-wrapper {
margin-top: 0;
overflow-x: auto;
}
.post-header .publishdate, .post .post-content {
font-size: 16px;
}
.post .post-content {
line-height: 28px;
margin-bottom: 30px;
}
.post {
margin-top: 30px;
}
.byline-author {
display: block;
font-size: 12px;
line-height: 24px;
margin-top: 6px;
}
#main .post .title a {
font-weight: 500;
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
}
#main .post .post-header {
padding-bottom: 12px;
}
#main .post .post-header .published {
margin-bottom: -8px;
margin-top: 3px;
}
.post .read-more {
display: block;
margin-top: 14px;
}
.post .tr-caption {
font-size: 12px;
}
#main .post .title a {
font-size: 20px;
line-height: 30px;
}
.post-content iframe {
/* iframe won't keep aspect ratio when scaled down. */
max-height: 240px;
}
.post-content .separator img, .post-content .tr-caption-container img {
margin-left: -16px;
max-width: 100%;
}
.post-content table {
table-layout: fixed;
width: 100%;
}
/** List page tweaks. **/
.list-page .post-original {
display: none;
}
.list-page .post-summary {
display: block;
}
.list-page .comment-container {
display: none;
}
.list-page .label-footer {
display: none;
}
.list-page #main .post .post-footer {
border-bottom: 1px solid #eee;
margin: -16px 0 0 0;
padding: 0 0 20px 0;
}
.list-page .post .share {
display: none;
}
/** Detail page tweaks. **/
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 32px !important;
}
.detail-page .label-footer {
margin-bottom: 0;
}
.detail-page #main .post .post-footer {
padding-bottom: 0;
}
.detail-page #comments {
display: none;
}
/* ADB */
.adb-header-console {
display: none;
}
.adb-hero-inner {
padding: 0 16px;
}
.adb-hero-title {
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
font-weight: 500;
line-height: 30px;
padding-left: 80px;
}
}
/* Fixed-position sidebar for larger screens */
@media screen and (min-height: 700px) and (min-width: 1100px) {
.col-right .section {
max-height: calc(100vh - 197px);
overflow: auto;
}
.col-right.scroll-start {
left: 50%;
margin-left: 241px;
position: fixed;
top: 96px;
}
.col-right.scroll-end {
bottom: 485px;
position: absolute;
top: auto;
}
}
[data-about-pullquote], [data-is-preview], [data-about-syndication] {
display: none;
}
#imgFull {
display: block;
margin: 10px auto;
width: 90%;
border: 0;
padding: 0;
}
#imgHalf {
display: block;
margin: 10px auto;
width: 50%;
border: 0;
padding: 0;
}
#flexParent {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
#flexImg {
width: 90%;
margin: 0;
padding: 0;
border: 0;
}
#imgCaption {
text-align: center;
font-style: italic;
font-size: 85%;
margin: -5px 0 10px 0;
padding: 0;
border: 0;
}
#floatRight {
float: right;
width: 45%;
margin: 5px 0 5px 5px;
padding: 0;
border: 0;
}
#floatLeft {
float: left;
width: 45%;
margin: 5px 5px 5px 0;
padding: 0;
border: 0;
}
</style>
<style>
.loading {
visibility: visible;
}
</style>
</head><body>
<div class="adb-detail">
<div class="adb-detail__info">
</div>
<div class="adb-detail__title">
</div>
<hr>
<div class="adb-detail__content">
<div>
<meta content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-sgaGzqJRAKlh8sK-7EWuecz5XrF8xLEt8iO9WKIFtWU2A8ExBX8L2cfdMDVwUOLEksbK1CZEH6XxXYUCKSE_LMK2T_M3VgViAQNzmgImLwjzQmeN4X9YqBqzsAV_IaiGedzOvySLGAmob66cCd5udbIV44-Py9GTHlZbJlFOD4QhY3pmjypddw8_5Jo/s1600/Social%20-%20Android%20-%20Jetpack%20Compose%20January%20%E2%80%9924.png" name="twitter:image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-sgaGzqJRAKlh8sK-7EWuecz5XrF8xLEt8iO9WKIFtWU2A8ExBX8L2cfdMDVwUOLEksbK1CZEH6XxXYUCKSE_LMK2T_M3VgViAQNzmgImLwjzQmeN4X9YqBqzsAV_IaiGedzOvySLGAmob66cCd5udbIV44-Py9GTHlZbJlFOD4QhY3pmjypddw8_5Jo/s1600/Social%20-%20Android%20-%20Jetpack%20Compose%20January%20%E2%80%9924.png" style="display: none;">
<em>Diposting oleh <a href="https://twitter.com/bentrengrove" target="_blank">Ben Trengrove</a>, Android Developer Relations Engineer</em>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsWOsYH-CFQ6aJ5erNZvo0gEXZx1pMDDT9HoKtam9wBAfMC5ZPxt1DYn_VSjqAN1PMMNnVwueLDXV_v4ByjN1rjvDHeRyuJn95up0tFNuCIzbENjbvqbOVz3I1Iy7aVTzlOLtSAnADNutrwrTrzAcDOU-aadSvd15QXbjapcJpQF-_p-jKc13NMuqHBzQ/s1600/Header%20-%20Android%20-%20Jetpack%20Compose%20January%20%E2%80%9924.png"><img border="0" data-original-height="800" data-original-width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsWOsYH-CFQ6aJ5erNZvo0gEXZx1pMDDT9HoKtam9wBAfMC5ZPxt1DYn_VSjqAN1PMMNnVwueLDXV_v4ByjN1rjvDHeRyuJn95up0tFNuCIzbENjbvqbOVz3I1Iy7aVTzlOLtSAnADNutrwrTrzAcDOU-aadSvd15QXbjapcJpQF-_p-jKc13NMuqHBzQ/s1600/Header%20-%20Android%20-%20Jetpack%20Compose%20January%20%E2%80%9924.png"></a>
<p>Hari ini, sebagai bagian dari <a href="https://developer.android.com/jetpack/androidx/releases/compose" target="_blank">Bill of Materials Compose Januari ‘24</a>, kami merilis <a href="https://d.android.com/compose" target="_blank">Jetpack Compose</a> versi 1.6, toolkit UI native modern Android yang <a href="https://developer.android.com/jetpack/compose#apps-built-with-compose" target="_blank">digunakan oleh banyak aplikasi</a>, seperti <a href="https://android-developers.googleblog.com/2023/10/meta-built-threads-in-only-5-months-using-jetpack-compose.html" target="_blank">Threads</a>, <a href="https://www.youtube.com/watch?v=Hb5vWCwPmfE&list=PLWz5rJ2EKKc9ECua7vzYbowdn-0L8WwHL&index=9" target="_blank">Reddit</a>, dan <a href="https://www.youtube.com/watch?v=quY2B_6shy0" target="_blank">Dropbox</a>. Rilis ini sebagian besar berfokus pada peningkatan performa, karena kami terus melakukan migrasi pengubah dan meningkatkan efisiensi beberapa komponen utama API kami.</p>
<p>Untuk menggunakan rilis hari ini, upgrade versi Compose BOM Anda ke <span style="font-family: courier;">2024.01.00</span></p>
<div align="left" dir="ltr" style="margin-left: 0pt;"><table style="border-collapse: collapse; border: none;"><colgroup></colgroup><tbody><tr style="height: 0pt;"><td style="background-color: #f0f0f0; border-bottom: solid #e0e0e0 1pt; border-color: rgb(224, 224, 224); border-left: solid #e0e0e0 1pt; border-right: solid #e0e0e0 1pt; border-style: solid; border-top: solid #e0e0e0 1pt; border-width: 1pt; overflow-wrap: break-word; overflow: hidden; padding: 5pt; vertical-align: top;"><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: courier;"><span style="background-color: transparent; color: #0d904f; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">implementation platform('androidx.compose:compose-bom:2024.01.00')</span><br></span></p></td></tr></tbody></table></div>
<h3>Performa</h3>
<p>Performa terus menjadi prioritas utama kami, dan rilis Compose ini memiliki peningkatan performa yang besar secara menyeluruh. Kami melihat <b>peningkatan ekstra ~20% dalam performa scroll</b> dan ~12% peningkatan waktu startup dalam tolok ukur kami, dan ini belum termasuk peningkatan dari rilis <a href="https://android-developers.googleblog.com/2023/08/whats-new-in-jetpack-compose-august-23-release.html" target="_blank">Agustus '23</a>. Seperti halnya rilis tersebut, sebagian besar aplikasi akan mendapatkan manfaat ini hanya dengan melakukan upgrade ke versi terbaru, tanpa perlu melakukan perubahan kode.</p>
<p>Peningkatan performa scroll dan waktu startup berasal dari fokus kami yang berkelanjutan pada alokasi memori dan inisialisasi lazy, untuk memastikan framework hanya melakukan pekerjaan yang harus dilakukan. Peningkatan ini bisa dilihat pada semua API di Compose, terutama pada API teks, yang bisa diklik, Lazy list, dan grafik, termasuk vektor, dan sebagian berkat pekerjaan pemfaktoran ulang Modifier.Node yang sudah berlangsung selama beberapa rilis.</p>
<p>Ada juga <a href="https://developer.android.com/jetpack/compose/custom-modifiers" target="_blank">panduan baru</a> bagi Anda untuk membuat pengubah khusus Anda sendiri dengan Modifier.Node.</p>
<h4><span style="font-size: large;">Mengonfigurasi stabilitas class eksternal</span></h4>
<p>Compose compiler 1.5.5 memperkenalkan opsi compiler baru untuk menyediakan file konfigurasi bagi apa yang dianggap <a href="https://developer.android.com/jetpack/compose/performance/stability" target="_blank">stabil</a> oleh aplikasi Anda. Opsi ini memungkinkan Anda menandai class apa pun sebagai stabil, termasuk modul Anda sendiri, class library eksternal, dan class library standar, tanpa harus mengubah modul-modul ini atau membungkusnya dengan class wrapper stabil. Perhatikan bahwa kontrak stabilitas standar tetap berlaku; ini hanyalah metode mudah untuk memberi tahu Compose compiler tentang apa yang harus dianggap stabil oleh aplikasi Anda. Untuk informasi lebih lanjut tentang cara menggunakan konfigurasi stabilitas, lihat <a href="https://developer.android.com/jetpack/compose/performance/stability/fix#configuration-file" target="_blank">dokumentasi</a> kami.</p>
<h4><span style="font-size: large;">Performa kode yang dihasilkan</span></h4>
<p>Kode yang dihasilkan oleh plugin Compose compiler juga telah ditingkatkan. Sedikit penyesuaian pada kode ini dapat menghasilkan peningkatan performa yang besar karena kode ini dibuat dalam setiap fungsi composable. Compose compiler melacak objek status Compose untuk mengetahui composable mana yang harus dikomposisi ulang ketika ada perubahan nilai; tetapi, banyak nilai status hanya dibaca satu kali, bahkan beberapa nilai status tidak pernah dibaca tetapi terus berubah! Update ini memungkinkan compiler untuk melewati pelacakan bila tidak diperlukan.</p>
<p>Compose compiler 1.5.6 juga <a href="https://developer.android.com/jetpack/androidx/releases/compose-compiler#1.5.6" target="_blank">mengaktifkan “intrinsic remember”</a> secara default. Mode ini mengubah <span style="color: #0d904f; font-family: courier;">remember</span> pada waktu kompilasi untuk memperhitungkan informasi yang sudah kita miliki tentang setiap parameter composable yang digunakan sebagai kunci untuk <span style="color: #0d904f; font-family: courier;">remember</span>. Ini mempercepat kalkulasi untuk menentukan apakah ekspresi yang diingat perlu dievaluasi ulang, tetapi ini juga berarti jika Anda menempatkan titik henti sementara di dalam fungsi <span style="color: #0d904f; font-family: courier;">remember</span> selama proses debug, fungsi ini mungkin tidak akan dipanggil lagi, karena compiler telah menghapus penggunaan <span style="color: #0d904f; font-family: courier;">remember</span> dan menggantinya dengan kode yang berbeda.</p>
<h4><span style="font-size: large;">Composable tidak akan dilewati</span></h4>
<p>Kami juga berinvestasi agar kode yang Anda tulis menjadi lebih berkinerja, secara otomatis. Kami ingin mengoptimalkan kode yang Anda tulis secara intuitif, sehingga Anda tidak perlu mempelajari detail internal Compose untuk memahami mengapa composable Anda dikomposisi ulang padahal seharusnya tidak.</p>
<p>Rilis Compose ini menambahkan dukungan untuk mode eksperimental yang kami sebut “<b>strong skipping mode</b>”. Strong skipping mode melonggarkan beberapa aturan tentang perubahan apa saja yang dapat melewati rekomposisi, memindahkan keseimbangan ke arah yang diharapkan developer. Dengan mengaktifkan strong skipping mode, composable dengan parameter yang tidak stabil juga bisa melewati rekomposisi jika instance objek yang sama dimasukkan ke dalam parameternya. Selain itu, strong skipping mode secara otomatis mengingat lambda dalam komposisi yang menangkap nilai yang tidak stabil, selain perilaku default saat ini, yaitu mengingat lambda yang hanya mengambil tangkapan stabil. Strong skipping mode saat ini masih bersifat eksperimental dan dinonaktifkan secara default karena kami belum mempertimbangkannya untuk penggunaan produksi. Kami sedang mengevaluasi efeknya sebelum mengaktifkannya secara default di Compose 1.7. Lihat <a href="https://android.googlesource.com/platform/frameworks/support/+/androidx-main/compose/compiler/design/strong-skipping.md" target="_blank">panduan</a> kami untuk bereksperimen dengan strong skipping mode dan membantu kami menemukan setiap masalah.</p>
<h3>Teks</h3>
<h4><span style="font-size: large;">Perubahan untuk padding font default</span></h4>
<p>Rilis ini sekarang membuat setelan <span style="color: #0d904f; font-family: courier;">includeFontPadding</span> bernilai <span style="color: #0d904f; font-family: courier;">false</span> secara default. <span style="color: #0d904f; font-family: courier;">includeFontPadding</span> adalah properti lama yang menambahkan padding ekstra berdasarkan metrik font di bagian atas baris pertama dan bagian bawah baris terakhir teks. Membuat setelan default ke false akan membuat tata letak teks default lebih sesuai dengan alat desain umum, sehingga semakin memudahkan kita mencocokkan spesifikasi desain yang dihasilkan. Setelah melakukan upgrade ke rilis Januari '24, Anda mungkin melihat perubahan kecil pada tata letak teks dan pengujian screenshot. Untuk informasi selengkapnya mengenai setelan ini, lihat postingan blog <a href="https://medium.com/androiddevelopers/fixing-font-padding-in-compose-text-768cd232425b" target="_blank">Memperbaiki Padding Font di Teks Compose</a> dan <a href="https://developer.android.com/jetpack/compose/text/style-paragraph#adjust-line-height" target="_blank">dokumentasi developer</a>.</p>
<img><div style="text-align: center;"><img alt="Ketinggian garis dengan includeFontPadding bernilai false di sebelah kiri dan true di sebelah kanan." border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZSSRPeWAUnFmGd8-4PwVHiFDrMpsp-EPRYlyIxYP2gIdyLuWAKkaXpAO2vle-m4EQrxEKyxNHGYkYzs4kW9_qP4dd1OXL1I7yWHpEyfOQoKyJLw7V7tre-vRpCHLpGYhyphenhyphenw9mX3HvnV768ZRAj52IeOnqQGaXlB9Az-k7lfGNtep0dBbDPm5pH27h8s3U/s1600/image3.png" width="100%"></div>
<h4><span style="font-size: large;">Dukungan untuk penskalaan font nonlinear</span></h4>
<p>Rilis Januari '24 menggunakan penskalaan font nonlinear untuk keterbacaan teks dan aksesibilitas yang lebih baik. Penskalaan font nonlinear mencegah elemen teks yang besar pada layar agar tidak terlalu besar dengan menerapkan kurva penskalaan nonlinear. Strategi penskalaan ini berarti bahwa teks yang besar tidak diskalakan dengan rasio yang sama seperti teks yang lebih kecil.</p>
<h3>Seret dan lepas</h3>
<p>Compose Foundation <a href="https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.6.0-alpha07" target="_blank">menambahkan dukungan</a> untuk tarik lalu lepas tingkat platform, sehingga isi konten dapat ditarik ke aplikasi lain pada perangkat yang berjalan dalam mode multi-aplikasi. API ini 100% kompatibel dengan API View, yang berarti tarik lalu lepas yang dimulai dari View dapat ditarik ke Compose dan sebaliknya. Untuk menggunakan API ini, lihat <a href="https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation/samples/src/main/java/androidx/compose/foundation/samples/DragAndDropSamples.kt" target="_blank">contoh kode</a>.</p>
<img><div style="text-align: center;"><img alt="Gambar bergerak yang mengilustrasikan fitur tarik lalu lepas" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL3AMqnass7Xa2N5suD7FFZsJdrVN56_SptvqprYimpN4HQqSVWsXn5uPbRKky6BpSFYJn8YigLUjwClrUMWn0gldUvwh2xki2lvcpLN5KnZ7GadfyiCQPst7UxrNmHiB_l0qAEYEmcQjiOnqX-g_pTcyJaTT78DRmFxI4ICZSoawT8gJbNCJY5HIffoQ/s1600/image2.gif" width="100%"></div>
<h3>Fitur tambahan</h3>
<p>Fitur lain yang disertakan dalam rilis ini termasuk:</p>
<ul><ul>
<li>Dukungan untuk <span style="color: #0d904f; font-family: courier;">LookaheadScope</span> dalam Lazy list.</li>
<li><a href="https://issuetracker.google.com/187188981" target="_blank">Memperbaiki</a> composable yang telah dinonaktifkan tetapi tetap dipertahankan untuk digunakan kembali dalam Lazy list yang tidak difilter secara default dari pohon semantik.</li>
<li><a href="https://developer.android.com/jetpack/androidx/releases/compose-animation#1.6.0-beta01" target="_blank">Keyframe berbasis spline</a> dalam animasi.</li>
<li><a href="https://issuetracker.google.com/180639271" target="_blank">Menambahkan dukungan</a> untuk pemilihan dengan mouse, termasuk teks.</li>
</ul></ul>
<h3>Mulai!</h3>
<p>Kami berterima kasih atas semua laporan bug dan permintaan fitur yang dikirimkan ke <a href="http://goo.gle/compose-feedback" target="_blank">issue tracker</a> — semua itu membantu kami memperbaiki Compose dan membangun API yang Anda butuhkan. Terus berikan masukan Anda dan bantu kami menjadikan Compose lebih baik! </p>
<p>Ingin tahu rencana kami berikutnya? Lihat <a href="https://developer.android.com/jetpack/androidx/compose-roadmap" target="_blank">roadmap</a> kami untuk melihat fitur-fitur yang sedang kami pikirkan dan kerjakan. Kami tidak sabar ingin segera melihat kreasi Anda yang berikutnya.</p>
<p>Selamat menggunakan Compose!</p>
</div>
<hr>
</div>
</div>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-28887964785432202352024-01-18T09:36:00.002+07:002024-02-22T10:09:57.267+07:00Bagaimana Studio Game Indie Ini Meluncurkan Game Pertamanya di Google Play<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="https://android-developers.googleblog.com/2024/01/how-this-indie-game-studio-launched-their-first-game-on-google-play.html"/>
<meta name="original_url" content="https://android-developers.googleblog.com/2024/01/how-this-indie-game-studio-launched-their-first-game-on-google-play.html"/>
<style id="page-skin-1" type="text/css"><!--
body {
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
-webkit-font-smoothing: antialiased;
color: #202124
}
h1 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px
}
h2 {
font-size: 30px;
line-height: 40px
}
h2,
h3 {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500
}
h3 {
font-size: 24px;
line-height: 32px
}
h4 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 26px
}
h5 {
font-size: 16px;
line-height: 24px
}
h5,
h6 {
font-family: Roboto, sans-serif;
font-weight: 600
}
h6 {
font-size: 14px;
line-height: 22px
}
.display {
font-family: Roboto, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 67.2px
}
.hidden-text {
height: 1px;
overflow: hidden;
pointer-events: none;
position: absolute;
top: -10px;
width: 1px
}
img,
video {
border: 0;
height: auto;
max-width: 100%
}
body {
position: relative;
min-height: 100vh
}
body.no-scroll {
overflow: hidden
}
a {
color: #4184f3;
text-decoration: none
}
a:focus,
a:focus-visible {
outline-offset: -2px
}
.content-wrap {
padding-top: 200px;
max-width: 800px;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:915px) {
.content-wrap {
padding-top: 100px
}
}
.full-width {
width: 100%
}
.icon-link {
height: 42px;
width: 132px;
border-radius: 80px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: baseline;
-ms-flex-pack: center;
justify-content: baseline;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
background: transparent;
border: none;
color: black !important
}
.icon-link:hover {
background-color: hsla(213, 7%, 76%, .2)
}
.icon-link:focus {
background-color: hsla(213, 7%, 76%, .26)
}
.icon-link:active {
background-color: hsla(213, 7%, 76%, .32)
}
.adb-container {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto;
max-width: 1420px
}
@media only screen and (max-width:767px) {
.adb-container {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--large {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto
}
@media only screen and (max-width:767px) {
.adb-container--large {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--flex-horizontal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.section,
body {
margin: 0
}
.adb-card {
position: relative;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
margin: 40px 0;
padding: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: box-shadow .2s linear, opacity .2s linear;
transition: box-shadow .2s linear, opacity .2s linear, -webkit-box-shadow .2s linear
}
.divider {
border: none;
height: 1px;
color: #DADCE0;
background-color: #DADCE0;
margin: 0 20px;
}
.adb-card:first-child {
background-color: #d7effe;
border: none;
padding: 32px 24px 32px;
margin: 40px 20px 60px;
}
@media only screen and (max-width:850px) {
.adb-card {
max-height: unset;
padding: 0 20px
}
.adb-card:first-child {
margin-bottom: 40px;
}
}
@media only screen and (max-width:600px) {
.adb-card:first-child {
margin: 0 -20px 40px;
}
.adb-card {
border-radius: 0;
padding: 0;
}
.divider {
margin: 0;
}
.content-wrap {
padding-top: 54px;
}
}
.adb-card:focus-within,
.adb-card:hover {
-webkit-box-shadow: 0 0 36px rgba(0, 0, 0, .1);
box-shadow: 0 0 36px rgba(0, 0, 0, .1);
cursor: pointer
}
.adb-card__href {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.adb-card__image-wrapper {
overflow: hidden;
position: relative;
width: auto;
-webkit-flex-basis: 40%;
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.adb-card__content {
padding: 24px 0 0
}
.adb-card__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 600;
margin-bottom: 12px
}
.adb-card__info {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 24px
}
.adb-card__description {
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin-bottom: 48px
}
.adb-card:hover .adb-content__image-wrapper img,
.adb-card__href:focus~.adb-content__image-wrapper img {
-webkit-transform: scale(1.03);
transform: scale(1.03);
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease
}
.devsite-footer {
padding: 0 24px;
border-top: 1px solid #bdc1c6
}
.devsite-footer li {
display: block
}
.devsite-footer li a {
text-decoration: none;
font-size: 14px;
line-height: 16px;
color: #202124
}
.devsite-footer li a:focus,
.devsite-footer li a:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-linkboxes-list {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
padding: 24px 0;
border-bottom: 1px solid #bdc1c6
}
@media only screen and (max-width:767px) {
.devsite-footer-linkboxes-list {
grid-template-columns: 1fr;
padding-left: 0
}
}
.devsite-footer-linkbox {
display: block
}
.devsite-footer-linkbox-heading {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin: 0 0 4px
}
.devsite-footer-linkbox ul {
padding-left: 0
}
.devsite-footer-sites-list {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-utility nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 24px 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0
}
}
.devsite-footer-utility-button {
justify-self: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 20px;
margin-left: auto;
padding-left: 16px
}
.devsite-footer-utility-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 8px 0 0
}
.devsite-footer-utility-item:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.devsite-footer-utility-item:not(:first-child):before {
content: "|";
margin: 0 8px 0 0
}
}
.devsite-footer-sites {
border-bottom: 1px solid #bdc1c6;
padding: 24px 0 23px
}
.devsite-footer-sites-logo {
height: 32px;
margin-top: 5px;
width: 185px
}
.devsite-footer-sites-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0
}
.devsite-footer-sites-item {
margin: 0 0 0 40px
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-item {
margin: 0
}
}
.devsite-footer-sites-link {
display: block;
padding: 8px 0;
color: #202124
}
.devsite-footer-sites-link:focus,
.devsite-footer-sites-link:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-utility-link:focus {
text-decoration: underline
}
.devsite-footer-utility .devsite-footer-utility-button {
line-height: 20px;
font: 400 14px/16px Roboto, sans-serif
}
.devsite-footer-utility .devsite-footer-utility-button:before {
content: "";
margin: 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility .devsite-footer-utility-button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
margin: 18px 0 12px
}
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link {
border: 0;
background: #1a73e8;
color: #fff;
line-height: 36px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0 0 16px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px 0;
box-shadow: 0 1px 2px 0;
display: inline-block;
font: 500 14px/36px Roboto, sans-serif;
height: 36px;
letter-spacing: 0;
min-width: 36px;
padding: 0 24px;
text-align: center;
-webkit-transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s, -webkit-box-shadow .2s;
vertical-align: middle;
white-space: nowrap
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link:hover {
background: #1765cc
}
.adb-page__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px;
text-align: center;
color: #202124
}
.adb-detail hr {
border: 1px solid #dadce0;
margin: 40px 0
}
.adb-detail__title {
font-size: 40px;
font-weight: 600;
line-height: 48px
}
.adb-detail__info {
font-weight: 400;
font-size: 16px;
line-height: 24px
}
.adb-detail__content {
min-height: 200px
}
.icon-sidebar {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
top: 0;
left: -300px;
max-width: 220px;
gap: 8px
}
.icon-sidebar .share-text {
font-weight: 500;
margin-left: 4px
}
@media only screen and (max-width:1440px) {
.icon-sidebar {
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
left: 0;
margin-top: -20px;
margin-bottom: 40px;
}
.icon-sidebar .share-text {
display: none;
}
}
.copy-tooltip {
display: none;
position: fixed;
bottom: 16px;
left: 10px;
z-index: 100;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.copy-tooltip .copy-tooltiptext {
width: 200px;
background-color: #073042;
color: #fff;
text-align: center;
border-radius: 80px;
padding: 8px 16px;
}
.header__overlay {
height: 100vh;
left: 0;
position: fixed;
width: 100vw;
border: none;
background-color: rgba(0, 0, 0, .4);
-webkit-animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
opacity: 0;
top: 0;
z-index: -1;
display: none
}
.header__overlay.show {
display: block;
opacity: 1;
z-index: 800;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out
}
.social-icons__links {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
.social-icons__links path {
fill: #80868b
}
.social-icons__container-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin-right: 14px
}
@media only screen and (max-width:1000px) {
.social-icons__container-header {
display: none
}
}
.adb-blog-logo:focus,
.adb-blog-logo:hover {
opacity: .7;
text-decoration: none
}
.adb-blog-logo__image {
height: 32px;
margin-left: 0;
margin-top: 6px
}
@media only screen and (min-width:840px) {
.adb-blog-logo__image {
margin-left: 24px
}
}
.header {
position: fixed;
background: #fff;
z-index: 700;
top: 0;
width: 100%;
overflow: hidden;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
height: auto
}
.header .top-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 24px;
height: 50px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #e6e6e6
}
@media only screen and (max-width:839px) {
.header .top-row {
padding: 0 16px
}
}
.header .top-row__left,
.header .top-row__right {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 100%
}
.header .nav-row,
.header .top-row__left,
.header .top-row__right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.header .nav-row {
background: #fff;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.header .nav-items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 50px;
position: relative;
background-color: #fff
}
@media only screen and (max-width:839px) {
.header .nav-items {
display: none
}
}
.header .nav-items tab {
position: relative
}
.header .nav-items tab.active .header__nav-item:after,
.header .nav-items tab:hover .header__nav-item:after {
background: #1a73e8
}
.header .nav-items tab.active .header__nav-item,
.header .nav-items tab:focus-within a {
color: #202124
}
@media only screen and (max-width:839px) {
.header .header__cta,
.header .nav-items {
display: none
}
}
.header__search-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 6px 0 6px 24px;
overflow: hidden;
position: relative;
margin-right: 36px;
border-radius: 4px
}
@media only screen and (max-width:767px) {
.header__search-container:not(.mobile) {
display: none
}
}
.header__search-container.mobile {
margin: 0 0 20px
}
.header__search-container.mobile #searchform,
.header__search-container.mobile .searchbox {
width: 100%
}
.header__search-container .searchbox {
border-radius: 2px
}
.header__search-container .searchbox input {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
font-weight: 500;
color: #80868b;
border: 0;
margin: 0;
height: 20px;
outline: 0;
padding: 8px 8px 8px 40px;
width: 100%;
-webkit-transition: background .2s;
transition: background .2s
}
.header__search-container .searchbox input::-webkit-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input:-ms-input-placeholder,
.header__search-container .searchbox input::-ms-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input::placeholder {
color: #80868b
}
.header__search-container .searchbox input:hover {
background: #e8eaed
}
.header__search-container .material-icons {
color: #80868b;
left: 8px;
position: absolute;
top: 6px;
-webkit-transition: color .2s;
transition: color .2s
}
.header__cta {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #1a73e8 !important;
text-decoration: none
}
.header__cta.mobile {
padding: 18px 0
}
.header__cta:hover .cta-icon {
margin-left: 0;
margin-right: 12px
}
.header__cta .cta-icon {
-webkit-transition: margin-right .2s linear, margin-left .2s linear;
transition: margin-right .2s linear, margin-left .2s linear;
margin-left: 4px;
margin-right: 8px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.header__cta .cta-icon path {
fill: #1a73e8
}
.header__nav-item {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #80868b;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 18px;
height: 100%;
text-transform: none;
text-decoration: none
}
.header__nav-item:hover {
color: #202124
}
.header__nav-item.mobile {
font-weight: 500;
padding: 0
}
.header__nav-item:after {
bottom: 0;
border-radius: 3px 3px 0 0;
content: "";
display: block;
height: 3px;
left: 50%;
min-width: 20px;
position: absolute;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(100% - 24px)
}
.header__hamburger {
border: 0;
background: none;
outline: none;
padding: 0;
margin: 1px 8px 0 -4px;
padding: 8px;
color: rgba(0, 0, 0, .65);
cursor: pointer
}
@media only screen and (min-width:840px) {
.header__hamburger {
display: none
}
}
.header__side-menu {
background-color: #fff;
bottom: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
z-index: 900
}
.header__side-menu.is-open {
-webkit-transform: translateX(0);
transform: translateX(0);
width: 80%
}
.header__side-menu.is-open,
.header__side-menu__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%
}
.header__side-menu__content {
padding: 18px 16px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.header__side-menu__content .spacer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.header__side-menu__title {
font-family: Roboto, sans-serif;
font-size: 20px;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px
}
.header__side-menu__items {
list-style: none
}
.header__side-menu__items li {
padding: 12px 0
}
.header__side-menu__items tab {
position: relative
}
.header__side-menu__items tab.active .header__nav-item,
.header__side-menu__items tab:focus-within a {
color: #202124
}
.header__side-menu__bottom {
border-top: 1px solid #e6e6e6
}
.header__side-menu__logo-container {
background: #fff;
height: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 4px 16px;
border-bottom: 1px solid #e6e6e6
}
#nav .widget {
margin: 0
}
.featured__wrapper {
width: 100%;
border: 0;
background-color: #e8f0fe;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 80px 0
}
@media only screen and (max-width:767px) {
.featured__wrapper {
padding: 0
}
}
.featured__inner {
max-width: 1080px;
width: calc(100% - 24px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
padding: 48px
}
@media only screen and (min-width:768px) {
.featured__inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
padding: 12px 80px
}
}
.featured__href {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.featured__image {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
max-width: 100%;
}
.featured__content {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-top: 24px;
width: 100%
}
.featured__title {
font-size: 32px;
line-height: 44.8px;
font-weight: 500;
font-family: Android Euclid, Roboto, sans-serif;
margin-bottom: 15px
}
.featured__info {
font-family: Roboto Mono, monospace;
font-weight: 400;
font-size: 12px;
line-height: 160%;
margin-bottom: 24px
}
.featured__description {
margin-bottom: 48px
}
.preview.featured__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f1f3f4;
padding: 64px 0 120px
}
.preview.featured__wrapper h1 {
margin: 0 0 64px
}
.blog-label-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px
}
.blog-label-container .blog-label {
text-decoration: none;
z-index: 3
}
.blog-label-container .blog-label span {
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
background-color: #F1F3F4;
border-radius: 100px;
padding: 4px 16px;
color: #3c4043
}
.adb-card:first-child .blog-label span {
background-color: #fff;
}
.blog-label-container .blog-label span:focus,
.blog-label-container .blog-label span:hover {
background-color: #D7EFFE
}
.adb-card:first-child .blog-label span:focus,
.adb-card:first-child .blog-label span:hover {
background-color: #F1F3F4
}
.blog-label-container .blog-label span:focus-visible {
outline-offset: 0
}
#pagination-container {
display: none
}
.pagination {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.pagination .page-button {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: black;
background-color: #3DDC84;
padding: 16px 24px;
border-radius: 80px;
text-decoration: none
}
.pagination .page-button:focus,
.pagination .page-button:hover {
background-color: #3DDC8460;
}
.pagination .page-button.disabled {
color: #80868b;
background-color: #f1f3f4
}
--></style>
<style id="template-skin-1" type="text/css"><!--
--></style>
<style>
/** Blogger default styles **/
html, .Label h2, #sidebar .rss a, .BlogArchive h2, .FollowByEmail h2.title, .widget .post h2 {
font-family: Roboto, sans-serif;
}
.plusfollowers h2.title, .post h2.title, .widget h2.title {
font-family: Roboto, sans-serif;
}
pre, .post-content pre.prettyprint {
background-color: #f7f7f7;
border: 1px solid #ddd;
margin: 0 0 1em 0;
padding: 1em;
overflow: auto;
}
pre, code {
font-size: 9pt;
line-height: 125%;
font-family: monospace;
}
pre, code {
color: #060;
font: 13px/18px Consolas, 'Liberation Mono', Menlo, Monaco, Courier, monospace;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
/* Styles for https://github.com/google/code-prettify */
.com { color: #060; }
.kwd { color: #008; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.fb-custom img, .twitter-custom img, .gplus-share img, .email-custom img {
cursor: pointer;
opacity: 0.54;
}
.twitter-custom, .gplus-share, .fb-custom {
margin-right: 12px;
}
/** Blogger custom theme **/
.adb-header,
.searchBox input {
box-sizing: border-box;
}
.popout-nav {
background-color: white;
width: 280px;
height: 100%;
position: fixed;
z-index: 6;
left: -280px;
transition: left 0.2s;
}
.popout-search {
background-color: white;
width: 280px;
position: fixed;
z-index: 6;
right: -280px;
transition: right 0.2s;
top: 0;
}
.popout-search .widget {
margin: 0;
}
.popout-search #BlogSearch2_form .popout-options {
padding-right: 24px;
width: calc(100% - 48px);
}
.dropdown-nav {
display: none;
background-color: white;
width: 104px;
position: fixed;
padding: 4px 0px 3px 0px;
z-index: 4;
left: 352px;
top: 176px;
transition: top 0.2s;
box-shadow: 0 0px 2px 0 rgba(60,64,67,.3), 0 0px 6px 2px rgba(60,64,67,.15), inset 0 0px 6px -4px rgba(154,160,166,.5);
}
.dropdown-options {
align-items: center;
display: flex;
flex-wrap: wrap;
width: 94px;
height: 48px;
padding-left: 10px;
}
.dropdown-options:hover {
background-color: #f7f9fa;
}
.dropdown-options span {
color: #80868b;
}
.popout-options {
padding-right: 8px;
padding-left: 24px;
padding-top: 16px;
padding-bottom: 15px;
display: inline-block;
width: calc(100% - 32px);
border-top: 1px solid #ddd;
font-size: 13px;
font-weight: 700;
color: #80868b !important;
}
.popout-options:last-of-type {
border-bottom: 1px solid #ddd;
}
.popout-options:first-of-type {
border-top: 0;
}
#close-popout {
padding: 12px 12px 11px 20px;
}
#close-search-popout {
padding: 12px 20px 11px 12px;
text-align: right;
}
.popout-search-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
transition: opacity 0.2s;
}
.popout-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
z-index: 5;
transition: opacity 0.2s;
}
html {
background-color: #fff;
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
width: 100%;
position: absolute;
padding: 0;
/* This ensures that the scroll bar is always present, which is needed */
/* because render happens after page load; otherwise the header */
/* would 'bounce' in-between states. */
min-height: 150%;
}
h2 {
font-size: 130%;
}
h1, h2, h3, h4, h5 {
line-height: 1.5em;
margin-bottom: 1em;
}
html, h4, h5, h6 {
font-size: 14px;
}
a, a:visited {
color: #039be5;
text-decoration: none;
}
pre code {
display: block;
}
.cols-wrapper {
margin-top: 56px;
}
.header-outer, .cols-wrapper {
padding: 0 60px;
}
html, .header-inner a {
color: #212121;
color: rgba(0, 0, 0, .87);
}
/** Archive widget. **/
.BlogArchive {
font-size: 13px;
font-weight: normal;
}
.BlogArchive .widget- {
display: none;
}
.BlogArchive h2, .Label h2 {
color: #039be5;
text-decoration: none;
}
/* Specificity needed here to override widget CSS defaults. */
/* Months */
.Label {
font-size: 13px;
font-weight: normal;
}
.sidebar-icon {
display: inline-block;
width: auto;
vertical-align: middle;
height: 24px;
margin-right: 24px;
}
.sidebar-social-links {
align-items: center;
}
.sidebar-social-links .android-logo,
.android-logo {
height: 48px;
}
.sidebar-social-links a:last-child img {
margin-right: 0;
}
.Label .widget- {
display: none;
}
.searchBox input {
border: 1px solid #eee;
color: #212121;
color: rgba(0, 0, 0, .87);
font-size: 14px;
padding: 8px 8px 8px 40px;
width: 100%;
font-family: Android Euclid, Roboto, sans-serif;
background: url('https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png') 8px center no-repeat;
}
.searchBox ::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .54);
}
.section {
margin: 0;
padding: 0;
}
#sidebar-top {
border: 1px solid #eee;
}
#sidebar-top > div {
margin: 16px 0;
}
/*main post*/
.post {
margin-bottom: 30px;
}
#main .post .title {
margin: 0;
}
#main .post .title a {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: normal;
font-size: 24px;
}
.message, #main .post .post-header {
margin: 0;
padding: 0;
}
#main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption {
color: #444;
font-weight: 500;
}
#main .post .post-header .published {
font-size: 11px;
font-weight: bold;
}
.post-header .publishdate {
font-size: 16px;
font-weight: normal;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#main .post .post-footer {
font-size: 12px;
padding-bottom: 21px;
}
.label-footer {
margin-bottom: 12px;
margin-top: 12px;
}
#main .post .post-header .published {
margin-bottom: 16px;
}
.post .post- {
color: #545454;
color: rgba(0, 0, 0, .67);
font-size: 16px;
margin: 16px 0 36px 0;
line-height: 24px;
word-wrap: break-word;
}
.post-summary {
display: none;
}
/* Override all post images/videos to left align. */
@media (max-width: 712px) {
.post- img {
max-width: 100%;
height: auto;
width: auto;
}
}
.post- .tr-caption-container img {
margin-bottom: 12px;
}
.post- iframe, .post- embed {
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
}
.post- .carousel-container {
margin-bottom: 48px;
}
#main .post- b {
font-weight: 500;
}
/* These are the main paragraph spacing tweaks. */
#main .post- br {
: '';
display: block;
padding: 4px;
}
.post-content .space {
display: block;
height: 8px;
}
.post-content iframe+.space, .post-content iframe+br {
padding: 0 !important;
}
#main .post .jump-link {
margin-bottom: 10px;
}
.post-content img, .post-content iframe {
margin: 30px 0 20px 0;
}
.post-content > img:first-child, .post-content > iframe:first-child {
margin-top: 0;
}
.col-right .section {
padding: 0 16px;
}
#aside {
background: #fff;
border: 1px solid #eee;
border-top: 0;
z-index: 2;
}
#aside .widget {
margin: 0;
}
#aside .widget h2, #ArchiveList .toggle+a.post-count-link {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: 400 !important;
margin: 0;
}
#ArchiveList .toggle {
float: right;
}
#ArchiveList .toggle .material-icons {
padding-top: 4px;
}
#sidebar-top,
#sidebar {
background: #fff;
}
#sidebar .tab {
cursor: pointer;
}
#sidebar .tab .arrow {
display: inline-block;
float: right;
}
#sidebar .tab .icon {
display: inline-block;
vertical-align: top;
height: 24px;
width: 24px;
margin-right: 13px;
margin-left: -1px;
margin-top: 1px;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget-content > :first-child {
padding-top: 8px;
}
#sidebar .active .tab .arrow {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#sidebar .arrow {
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget h2 {
font-size: 14px;
line-height: 24px;
display: inline-block;
}
#sidebar .widget .BlogArchive {
padding-bottom: 8px;
}
#sidebar .widget {
border-bottom: 1px solid #eee;
box-shadow: 0px 1px 0 white;
margin-bottom: 0;
padding: 14px 0;
min-height: 20px;
}
#sidebar .widget:last-child {
border-bottom: none;
box-shadow: none;
margin-bottom: 0;
}
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style: none;
padding: 0;
}
#sidebar ul li a {
line-height: 32px;
}
#sidebar ul ul ul li a {
line-height: 24px;
}
#sidebar .archive {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC');
height: 24px;
line-height: 24px;
padding-left: 30px;
}
#sidebar .labels {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC');
height: 20px;
line-height: 20px;
padding-left: 30px;
}
#sidebar .rss a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII=');
}
#sidebar .subscription a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC');
}
#sidebar-bottom {
background: #f5f5f5;
border-top: 1px solid #eee;
}
#sidebar-bottom .widget {
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
text-align: center;
}
#sidebar-bottom > div:last-child {
border-bottom: 0;
}
#sidebar-bottom .text {
line-height: 20px;
}
/* Home, forward, and backward pagination. */
.blog-pager {
padding-top: 10px;
margin-top: 15px;
text-align: right !important;
}
#blog-pager {
padding: 40px 0 0;
}
#blog-pager a {
display: inline-block;
}
.blog-pager i.disabled {
opacity: 0.2 !important;
}
.blog-pager i {
color: black;
margin-left: 16px;
opacity: 0.54;
}
.blog-pager i:hover, .blog-pager i:active {
opacity: 0.87;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
.gplus-profile {
background-color: #fafafa;
border: 1px solid #eee;
overflow: hidden;
width: 212px;
}
.gplus-profile-inner {
margin-left: -1px;
margin-top: -1px;
}
/* Sidebar follow buttons. */
.followgooglewrapper {
padding: 12px 0 0 0;
}
.loading {
visibility: hidden;
}
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 40px !important;
}
/* ADB */
.adb-hero-area {
min-height: 104px;
background-color: #073042;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
z-index: 5;
position: fixed;
width: 100%;
}
.adb-hero-logo {
height: 80px;
position: absolute;
top: 12px;
left: 16px;
}
.adb-footer-btm {
display: flex;
margin: 0 24px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 40px;
}
.subscribe-btn {
color: black;
background-color: #3DDC84;
border-radius: 100px;
font: 500 16px/24px Android Euclid,Roboto,sans-serif;
padding: 12px 24px;
border: 0;
}
.adb-footer-info {
align-items: center;
display: flex;
padding: 0;
margin: 9px 0 0 -8px;
font-size: 13px;
}
.footer-list {
list-style: none;
padding: 0 8px;
}
.subscribe-info {
list-style: none;
padding: 0 8px 0 0;
font-size: 13px;
color: black;
}
.footer-newsletter {
display: flex;
align-items: center;
}
.adb-header-inner {
display: flex;
align-items: center;
}
.adb-header {
background-color: white;
color: #fff;
height: 48px;
left: 0;
overflow: hidden;
padding: 36px 24px;
right: 0;
top: 104px;
z-index: 4;
display: flex;
align-items: center;
position: fixed;
border-bottom: solid 1px #DADCE0;
}
.adb-shadow {
margin-top: 48px;
height: 1px;
width: 100%;
position: fixed;
background: white;
z-index: 2;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
}
.adb-logo-box {
display:inline;
}
.adb-burger-box {
display: none;
margin: 0 16px 0 0;
}
.adb-search-box {
display: none;
margin: 0 0 0 16px;
}
.adb-htag-box {
display: flex;
align-items: center;
}
.adb-header-tags {
padding: 0 24px 0 0;
}
.adb-header-tags ~ .atb-header-tags {
padding: 0 24px;
}
.adb-header-tags a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #5F6368;
}
.adb-header-tags a:hover {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #073042;
}
.more-dropdown {
display: none;
}
.dropdown-icon {
transition: all 0.3s;
}
.adb-header-logo {
display: inline-block;
vertical-align: -11px;
width: 134px;
height: 32px;
}
.adb-header-title {
color: #fff;
display: inline-block;
font-size: 20px;
font-weight: normal;
}
.adb-header-links {
border-left: 1px solid rgba(0, 0, 0, .1);
display: block;
left: 250px;
list-style: none;
margin: 0;
padding: 12px 0 12px 18px;
position: absolute;
top: 0;
}
.adb-header-link-item {
display: inline-block;
}
.adb-header-link, .adb-header-link:visited {
color: #fff;
display: inline-block;
font-weight: 500;
opacity: .7;
padding: 12px 9px;
text-transform: uppercase;
vertical-align: 2px;
}
.adb-header-link:hover, .adb-header-link:focus {
color: #fff;
opacity: 1;
}
.adb-header-console, .adb-header-console:visited {
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
color: #fff;
float: right;
font-size: 14px;
font-weight: 500;
line-height: 28px;
padding: 4px 10px;
position: relative;
text-transform: uppercase;
transition: box-shadow .2s;
z-index: 60;
}
.adb-header-console:hover {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
color: #fff;
}
.adb-header-console:focus {
background-color: rgba(63, 81, 181, .1);
color: #fff;
}
.adb-header-console-image {
vertical-align: -5px;
}
.adb-hero {
background-color: #dcedc8;
margin-top: 64px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
color: #414141;
display: inline-block;
font-weight: 500;
margin: 25px 25px 0;
}
.adb-hero-inner {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAc4AAADZCAMAAACenCAVAAAAvVBMVEXc7cjY68PT6bvR57fQ57bY6sPZ68TU6bvR6LfP5rTQ57XR57jW6r7b7cfa7MbS6LnS6Lrb7cbQ6Lfb7MbX6r/Z68PY6sLV6b7U6b3U6r3T6LnX68Da7MXP57Tb7Mfc7cfW6b/P57XS57nY68LY68HU6L3W6r/W6b7T6brX6sDV6rzQ57fa7MTV6b3T6Lra68TR57bX68HW6sDS57jU6bzO5rTP5rXZ7MXR6LbZ68XX6sHT6LvV6bzS6LjZ7MILrTuqAAAIyklEQVR4AezXhXEkUQwE0B6+Xhg8MzND/smZ4UsLBSb9Kr0UhI1vl6RZnqUFlnBl9Y+j8WQK4+qGr9oOi7iKr0YFTOt6vhsPmM81/FDAspafUszl/vNTXsOuFYZWMYfrRgyswa51hjLM4TYYGsOuTQpbgNO2dyjAroxCvgunpZT2YFZDaQKnlFRg1z6lgxpOOqS0CbtqKutwwhGVYxh2QqWGC/WUMlhWH1BK4QKnVFZh2hmVEh/cXk7pHLbt5pQafHCT6Jr9gsoR3riayiXMyyhd4Y27jDDHJVQu8MJdU7lBBBpKoz08c7eU8gERuKNyhiduhcopolBRqeGAMaV7xKE7eGzvThQTVZooAJdC1AM2qGg0BhdCrpnciVE0i9dZ3v+t/n2ZMBtJGpsu6nuCrNJddar4/gAnMmuP/GPk3JFwrL2QKw3FD26GyGmQNXbIGVHNKdfmYraDl/ZUcxO8NNtIW888bafDC7tP5R2qtQfL724N5AypxjbIGdseWHMV1VfP+rrnZvbTerMEhHb2Py4eA7KX9AwD5LSppi5ZdPTHEhv6cd5mSjZaeMW/Dc66TEpkO+Q0qIbUE5es6ke85FMN/YGXZs9yQLdXYGVASGJDBaMZXsQouzau/fzfitNsKvpUL1O8dFBksb+Q80C1coaco7RtLeYzO9tHCV7qUY0ckXPGribSoNpQB3Z1MbWtby1hiZwWw35CRjUReRx7Sg5ecqgmJiyHOxrIWVEtPDPNY/TMx4bmczq5T3jpSRELm1NWodVmlGY364tP4ZXvdw5u8jjDf8yQJJ7j+2HYfBh3d+l5HFB5RmyzjM3yh8iDUbb6M9y7j3idgxM+3BzTuPzyXmdOTARJaUc8tUmX7ekB7+aF7dV1a0G6pIx3CkxKmBBUreMfvS0086aTnZZf6kfG53mlN/0UnS2bW5Socz9OA737eM6JkZWu4uUiXfVcnIT34eZM6Yq9hcRKR0OpL7i9cHBi/udjrCOUuiFWsnc2/oKsfYAhXvM2lsj4S/7b2/L9y4cODDu0j8HbBzqSPvutOksqpDH+gorw1+dvHLcaEzv3r4+0BdmnBJXi9bL+G6qaEbFz98rF4sEwnKGKrrrxK3sOuzoMlM9i+ql47KPC/HX8inTxljgKUHBYI1g6qDx/HBct76XETfHF4v3hHpZwVgH9APc0TfFSyTwLZ7DJ9FYxmZvTv1h89DmBdbyHEX0rcuuTRB38fNuQ2vmw1GAYMSjv6ZwQbD0ksFlz9LPW7gMxNv3RBVtlDqz3cbWo32rmEXLGFExcsJBMnilGzk29pleT5gx8fLiq2XzyM2rllpiboEYGxF2UoD6+EntL1Ma+TkOP/LVqNJLM3yeqgayDmnjqKmIu3aNGDhlx1pqiZvyUuAqaqKGwRRwt1gnqqR0QO5ce6ms5J1ZGIWqtkxIf0QNqb7ohJjIXgFjPiYF4j38R2wbZTk1m+C/xqU9WSzv4hkgyVkcg0QvIUg0XEHleRjaK/gQb8g/a2EL8hHcky6zxC+JTQBa5c/BL4nBO1lgl+B2xJjv0QxQgnA1ZoOGhGHFNldedoShxMadKU/d4BeEEVGF3Ll5FJF+psm7Bh5xwHyDeoKeogvp7iDfpbKhyWgeIN/JSqpjbBOLtlqwq7qJNFdKGeKdQUUUEIcS7Df6iSngeQAPhtqgCWi60EElKxjUSsCFriK5nYEMuLDtoJSZk0BiaiaYsZGPlXnEqHoipIhOaKIW4WnD63xThgtP/pthHdFqfUCIRRvK/KZ+3VX1uiulc7puc3EstSOpD9d7+LYGTFfiQenyKkxE3VLLGI9iQkcH4CackzqlEwRYnJbwNlUb5ODHhBVSWHk5O+JFMLkh5qFYxLxnoPZ9BmJGRdrELNuTddNEAwhg34NSvFnvSqgth1ANpNEIZkhkYSg4dt9rHocCFXvvxWUD/ELR2TQ98hMOWon+Ks7YLrZI70iWETu6yT99Qt3uw4A4j+lY6hU4dVcloUFdR3tkA1kt29J1zHxr1SIsGNAoDnvGjMCj/CLmr3INzQj9x5sFm41Ns933c0PtNoc+O0bJNA9+Xryp14+zSL9x5PH6beS2vQrfP0exkQcMG08BdCn1SepeFc8KPijWs5MxPdzN4CipzR2nQb8wdnu0O5UKbkN7h/LQZ/a9Ms+pZNYp9kQt9Yvo9H3Yx8H15QSXm/qZUQMY0ybOCPtNKlIMuqYAogW1SKkBBoxW9SXSARoqKCGGbBRVxBY0C85V3h2mb/MrASGxIb3BnYlaxwXRmLwUMFxMc6NSlQvpM6nt5MXTylOl00JGKYTqxp6DVBb1SkECrlOmvs0HFGA7efjA0dwrLfKVC5tDLp1dpGHrGKFjm0tCZYEWvMTA0NrOBZVZUSMtoLn4I3T5RISnTZTGXJrea9BPotmU6QrqlQi6gXWx05V5MRTiwTaD/4aW5FN8y9pCJYZ2usSPBNRUzNfapNIZ1fGM7KQdUSMNYJyl6Ajh2yAKTBUYHpfCZruJ0jB3wCpVur1GSIf3G8yOPlG1ePDN46d2iJEmLR+86L4lNBRQTZXK/6UAxunMWDxC3Da6omXsoz5XiOa8/NfV9JYHRXVBXiudG8r0y9Jmzpl87oFSDFv3Qog2rDTb0Q6qJckX0K7coWTKkHxh1YLmkSz/Q6JjNKnVQOj+lnM0nMPDxmnLuPhjej5rhFLbjmP4nOF6BCXfdov8JLkPj+xcdnMjh03p3nWXLBwesuB/+GGbHXbc5wIkkSt7CwEmXU1lGbPX3OYVBt5y2Yoov9EN/QVhpJK9xZL/7P4Kw1LO8iIH7qxx8CEu5zG8pcldpQ1hrSjnBI4S9YnrpBsJiEzkIcfIkByFWUqkIcdKjb7kQdos49a3Fjv7vE4TlfPoflYAPuXoeIaw3pv+6h7CeQ/8RPYIP6XpegwGxknMtwxcqK7AgAqkhcDKkf3oAI9LE9sCDWGhf4S8M70peggnxQERTMCFcIjUDF+KOUrAhhvQANkT4dwEsPvJYWz4QAAAAAElFTkSuQmCC');
background-position: bottom right 70px;
background-repeat: no-repeat;
background-size: auto 100%;
margin: 0 auto;
max-width: 980px;
padding: 0 60px;
position: relative;
}
.adb-hero-back-icon {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.adb-hero-title {
font-size: 22px;
line-height: 28px;
padding: 24px 24px 0px 112px;
}
.adb-hero-title a {
color: #FFFFFF;
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500;
}
.adb-hero-summary {
font-size: 16px;
line-height: 24px;
padding: 8px 24px 8px 112px;
}
.adb-hero-summary a {
color: rgba(255, 255, 255, 0.9);
}
.adb-hero-description {
color: #6f7172;
font-size: 16px;
margin: 0;
max-width: 440px;
padding-bottom: 32px;
}
.adb-hero-search {
position: absolute;
top: 19.35%;
right: 1.94%;
}
.adb-hero-search .searchBox input {
border: 1px solid #80868B;
border-radius: 4px;
color: white;
}
.adb-hero-search .searchBox input::placeholder {
color: #F1F3F4;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
padding-left: 12px;
}
.adb-hero-link {
position: absolute;
right: 1.67%;
top: 64.52%;
}
.adb-hero-link a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #3DDC84;
letter-spacing: 1.4px;
}
.adb-hero-arrow {
display: inline-flex;
font-size: 24px;
vertical-align: middle;
}
.adb-socials-box {
display: flex;
position: absolute;
right: 1.67%;
}
.adb-socials-category,
.adb-socials-divider {
display: flex;
align-items: center;
}
.adb-socials-divider {
color: #DADCE0;
font-size: 40px;
font-weight: 100;
margin: 0 20px;
}
.adb-socials-category img,
.adb-footer-social-links img {
height: 24px;
}
.adb-footer-social-links-img {
margin-right: 20px;
}
.adb-hero-subscribe, .adb-hero-subscribe:visited {
background-color: #90c653;
color: #fff;
display: inline-block;
border-radius: 3px;
margin: 25px 0 60px;
padding: 13px 32px;
text-transform: uppercase;
}
.adb-hero-subscribe:hover, .adb-hero-subscribe:focus {
background-color: #333;
}
.adb-footer {
margin: 32px auto 64px;
}
.adb-footer-more {
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #f0f0f0;
padding: 30px 0;
}
.adb-footer-more a {
color: #000;
display: inline-block;
font-size: 20px;
font-weight: 300;
margin-right: 16px;
}
.adb-footer-social {
float: right;
margin-top: -62px;
}
.adb-footer-social a {
background-color: #ccc;
background-position: center;
background-repeat: no-repeat;
background-size: auto 16px;
border-radius: 50%;
display: inline-block;
height: 36px;
margin-left: 16px;
transition: background-color .1s;
width: 36px;
}
.adb-footer-social-youtube {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAQAAAAxWje/AAABLUlEQVQ4y6WUvUoDYRBFr42gCdhK8AV8BwsVC0FQfIQUgr5DIKJoGy1CfAaDq1hIGn8K2xDSaBc1wUJJEYmbkDXssdi1Mrvfst9tZ+bAzNwZSZLEAmvsUKTCBQ80eaWLyxiAMS5dXmhyT5UyBfIsM68/McM1aXRDJgCUSKsTSWQZpAa4ZMUmNtoSRxGhbd4TAI7F1eSIxBwVfAPgUtSjAJLEEk+xgLroxAEkpikyigS0RS8eIEks8hgB6ImhGSAxxS5fE9JGwksCkCRyOP/SfPFjC0jawl5UC9ZDbBvXuB+zxjezkZ5NRnJirHxmtLIjDq2O6UBsWJ3zut1D+WZWEqepAaVg0hlqqcpr4VMNbbpKngJlqtzRoMUnfTx8fDz6fNCiwS3n4VtfIRdU/gLTrSb7DGWLcQAAAABJRU5ErkJggg');
}
.adb-footer-social-youtube:hover {
background-color: #f44336;
}
.adb-footer-social-gplus {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAUCAQAAACpWpz6AAABJUlEQVQ4EZXBTUoCYQDH4X9hTS3Cja0Kyb2X6BCJoLlr1aKwK1QHCMMzWLiqTcuWXaAWQWIlU1DQh4QJ+Wt4X95x0hGn55FCeGzSpMUXXW45ocSC/oMiHUZ1KCgZZqkzyZaSoM7QgCd8BlgXLGo6ijgv7JJRgAxV3jjDUwwMOXh0sK5ZUQRZ5hQLQw4VrA/WlBCGHJpY+0oMQw5trLxCjNtTgFiij5VSiHFHChBL9LFSCjGurgCxRBsrrxA+Pj4+Pl2sQ0VgyKGJdaAYNLAqisCQQxnrk5xGkKOHlVUEhhw8HrFuWFUEaa6wLvUHhoYo4LxSZVkBlihzh7OuaagR9YzPD0PHmo5ZakzSIKVk2OCBUe/sMKPkmKfEKS16fHPPOduklcAvR50zMVwhTI4AAAAASUVORK5CYII=');
}
.adb-footer-social-gplus:hover {
background-color: #f44336;
}
.adb-footer-social-twitter {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAQAAAB0gUQ+AAABI0lEQVQ4EY3BQShDAQDH4f+zTSyJuLgoLlwclYOTHCwHu9ouiLRScpUmNwduDkpCSTs4LAeJhINoOTo4ctHkskyJtf20vWbe3tvb+z7JFUGibLHPMj0qoYEWSYzRKkdMkKbsm3m6WSRFuyQeuKNNNoTJU61ABL8kssAjvbKgiTR2V+ywJol3ijJMY+gP4zhLEpDEGWUpwvhUQgwnh/hURIT/3thjjmGWcBKViSCXeBWSiWdO+MGbPpm4watPfDIRxasLVXCANwuqwCDGK/V80akKGjnmmgLutmXFOvV80CUrAiRxNys7DCY5J4OzXdVCP7c4OcIvO5oJkSCHXZ5VDFkxwilP5HB2z6Cc0EGcF6plSTAqNxgMMEWcTTZYYYYhAqrpF0uh1zgYi1hVAAAAAElFTkSuQmCC');
}
.adb-footer-social-twitter:hover {
background-color: #55acee;
}
.adb-footer-social span {
display: none;
}
.adb-footer-related {
padding-top: 8px;
}
.adb-footer-related a {
color: #999;
font-size: 12px;
white-space: nowrap;
}
.adb-footer-related a:not(:last-child)::after {
content: '|';
cursor: default;
margin: 0 7px 0 10px;
}
.adb-footer-section {
margin: 48px auto;
max-width: 700px;
}
.adb-footer-title {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #3C4043;
margin-bottom: 24px;
}
.adb-footer-columns {
display: flex;
justify-content: space-between;
}
.adb-other-blogs-title img {
margin-right: 8px;
vertical-align: -12px;
}
.adb-footer-social-label {
display: flex !important;
align-items: center;
}
.adb-footer-column a,
.adb-footer-social-label,
#footer-subscribe .tab h2 {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
padding: .85em 0;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-btm a {
color: #000;
font-family: Android Euclid, Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.25px;
opacity: .7;
transition: opacity .1s;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-column a {
opacity: .7;
transition: opacity .1s;
}
.adb-footer-column a:hover {
opacity: 1;
}
.adb-footer-social-links {
margin: 0 0 20px;
}
#footer-subscribe .widget {
margin: 0;
}
#footer-subscribe .tab {
display: flex;
align-items: center;
}
#footer-subscribe .tab img {
height: 16px;
}
.adb-label-view-more-toggle {
cursor: pointer;
}
.adb-label-view-more-toggle::after {
content: '\00e5c5';
float: right;
font: 2em / .7 Material Icons;
opacity: .6;
}
.adb-label-view-more-toggle.active::after {
transform: rotate(180deg);
}
/** Desktop **/
@media (max-width: 900px) {
.col-right {
display: none;
}
.col-main {
margin-right: 0;
min-width: initial;
}
.cols-wrapper {
min-width: initial;
}
.adb-hero-inner {
background-image: none;
}
}
/** ADB header breakpoint **/
@media (max-width: 768px) {
.adb-header-links {
display: none;
}
.dropdown-nav {
display: none;
}
.adb-header {
padding: 12px;
text-align: center;
}
}
@media (max-width: 1196px) {
.breakpoint-hide {
display:none;
}
.more-dropdown {
height: 50px;
display: flex;
align-items: center;
}
}
@media (max-width: 915px) {
.adb-header {
height: 0;
margin: 0;
padding: 0;
display: none;
}
.adb-header-tags {
display:none;
}
.more-dropdown {
display:none;
}
.dropdown-nav {
display: none;
}
.adb-hero-summary,
.adb-hero-link,
.adb-socials-category {
display: none;
}
.adb-hero-title {
padding-left: 152px;
}
.adb-hero-logo {
height: 52px;
top: 12px;
left: 120px;
}
.adb-footer-section {
margin: 0 auto;
}
.adb-footer-btm {
margin: 0 24px 40px;
}
.adb-hero-area {
min-height: 76px;
}
.adb-burger-box {
display:inline;
position: absolute;
top: 17px;
margin-left: 24px;
font-size: 32px;
color: white;
}
.adb-hero-title a{
margin-left: 40px;
}
}
/** Tablet **/
@media (max-width: 712px) {
.header-outer, .cols-wrapper {
padding: 0 40px;
}
/* ADB */
.adb-hero-inner {
padding: 0 40px;
}
.adb-hero-title {
font-size: 16px;
padding-left: 132px;
}
.adb-hero-logo {
left: 100px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 36px;
}
.adb-other-blogs-list {
columns: auto;
}
.adb-other-blogs-title {
font-size: 20px;
}
.adb-other-blogs-title img {
height: auto;
vertical-align: -6px;
width: 32px;
}
.adb-footer-section {
margin: 0 24px;
}
.adb-footer-more {
padding-bottom: 75px;
}
.adb-footer-social {
float: none;
margin-bottom: 35px
}
.adb-footer-social .adb-footer-social-youtube {
margin-left: 0;
}
}
/** Small tablet **/
@media (max-width: 600px) {
.header-inner .google-logo {
top: 32px;
margin-top: 0;
}
.header-inner .google-logo img {
height: 56px;
width: auto;
/*
height: auto;
width: 188px;
*/
/* Override any optical adjustments at desktop size. */
top: 0 !important;
}
.header-left {
left: 0;
top: inherit;
bottom: 24px;
}
.adb-footer-columns {
display: block;
}
.adb-footer-column {
margin-bottom: 48px;
}
.adb-footer-column a {
opacity: 1;
}
.adb-footer-social-label {
padding: 0;
}
.adb-footer-column .widget a {
padding: 0;
}
.footer-newsletter {
margin-top: 16px;
}
.subscribe-btn {
width: 100%;
}
.adb-hero-search {
display: none;
}
.adb-search-box {
display:inline;
position: absolute;
top: 24px;
right: 24px;
font-size: 24px;
color: white;
}
}
/** Mobile **/
@media (max-width: 480px) {
.header-outer, .cols-wrapper {
padding: 0 16px;
}
.adb-hero-logo {
height: 28px;
top: 24px;
left: 76px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 16px;
}
.cols-wrapper {
margin-top: 0;
overflow-x: auto;
}
.post-header .publishdate, .post .post-content {
font-size: 16px;
}
.post .post-content {
line-height: 28px;
margin-bottom: 30px;
}
.post {
margin-top: 30px;
}
.byline-author {
display: block;
font-size: 12px;
line-height: 24px;
margin-top: 6px;
}
#main .post .title a {
font-weight: 500;
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
}
#main .post .post-header {
padding-bottom: 12px;
}
#main .post .post-header .published {
margin-bottom: -8px;
margin-top: 3px;
}
.post .read-more {
display: block;
margin-top: 14px;
}
.post .tr-caption {
font-size: 12px;
}
#main .post .title a {
font-size: 20px;
line-height: 30px;
}
.post-content iframe {
/* iframe won't keep aspect ratio when scaled down. */
max-height: 240px;
}
.post-content .separator img, .post-content .tr-caption-container img {
margin-left: -16px;
max-width: 100%;
}
.post-content table {
table-layout: fixed;
width: 100%;
}
/** List page tweaks. **/
.list-page .post-original {
display: none;
}
.list-page .post-summary {
display: block;
}
.list-page .comment-container {
display: none;
}
.list-page .label-footer {
display: none;
}
.list-page #main .post .post-footer {
border-bottom: 1px solid #eee;
margin: -16px 0 0 0;
padding: 0 0 20px 0;
}
.list-page .post .share {
display: none;
}
/** Detail page tweaks. **/
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 32px !important;
}
.detail-page .label-footer {
margin-bottom: 0;
}
.detail-page #main .post .post-footer {
padding-bottom: 0;
}
.detail-page #comments {
display: none;
}
/* ADB */
.adb-header-console {
display: none;
}
.adb-hero-inner {
padding: 0 16px;
}
.adb-hero-title {
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
font-weight: 500;
line-height: 30px;
padding-left: 80px;
}
}
/* Fixed-position sidebar for larger screens */
@media screen and (min-height: 700px) and (min-width: 1100px) {
.col-right .section {
max-height: calc(100vh - 197px);
overflow: auto;
}
.col-right.scroll-start {
left: 50%;
margin-left: 241px;
position: fixed;
top: 96px;
}
.col-right.scroll-end {
bottom: 485px;
position: absolute;
top: auto;
}
}
[data-about-pullquote], [data-is-preview], [data-about-syndication] {
display: none;
}
#imgFull {
display: block;
margin: 10px auto;
width: 90%;
border: 0;
padding: 0;
}
#imgHalf {
display: block;
margin: 10px auto;
width: 50%;
border: 0;
padding: 0;
}
#flexParent {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
#flexImg {
width: 90%;
margin: 0;
padding: 0;
border: 0;
}
#imgCaption {
text-align: center;
font-style: italic;
font-size: 85%;
margin: -5px 0 10px 0;
padding: 0;
border: 0;
}
#floatRight {
float: right;
width: 45%;
margin: 5px 0 5px 5px;
padding: 0;
border: 0;
}
#floatLeft {
float: left;
width: 45%;
margin: 5px 5px 5px 0;
padding: 0;
border: 0;
}
</style>
<style>
.loading {
visibility: visible;
}
</style>
</head><body>
<div class="adb-detail">
<div class="adb-detail__info">
</div>
<div class="adb-detail__title">
</div>
<hr>
<div class="adb-detail__content">
<div>
<meta content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQgdLnO1ea7UeWUKUw-67Fb62VLKJtTtKapVjZ8-RA2juJcXKue1tkXIMQRUvthaM8MZDXnYM61JWDuTTM_U8fQHYo8c-qZ8fMkySbWlog5Jr5RT7BleGsmcJrCjnWl6A3s5W9gmXzqxC-7yCVtDkJwl7VYLVPDP7s_BA_XE9hZ1MDVEZ74uhzjK3eh-4/s1600/social-indie-games-developer---Googlr-play-publishing-journey.png" name="twitter:image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQgdLnO1ea7UeWUKUw-67Fb62VLKJtTtKapVjZ8-RA2juJcXKue1tkXIMQRUvthaM8MZDXnYM61JWDuTTM_U8fQHYo8c-qZ8fMkySbWlog5Jr5RT7BleGsmcJrCjnWl6A3s5W9gmXzqxC-7yCVtDkJwl7VYLVPDP7s_BA_XE9hZ1MDVEZ74uhzjK3eh-4/s1600/social-indie-games-developer---Googlr-play-publishing-journey.png" style="display: none;">
<em>Diposting oleh Scarlett Asuncion – Product Marketing Manager</em>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBobSCqMHyxUze5gWymiOTBMzXE3Micq3HyGSQy04Grk-Af-QImn3m2MDPDlxj51NBr16De8tTyrULgrqRJwERkglfAOs9ai3I9joDruJW8m9BSgp5CTbI_byJq1l6ir9PBDQxj_BdYZ9ZCdhllb18e76M9ahvo4h5mK-OXxR89EULSunN7qfSb3KS_RE/s1600/HEADER-Google-Play-indie-games-developer---Googlr-play-publishing-journey.png"><img border="0" data-original-height="800" data-original-width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBobSCqMHyxUze5gWymiOTBMzXE3Micq3HyGSQy04Grk-Af-QImn3m2MDPDlxj51NBr16De8tTyrULgrqRJwERkglfAOs9ai3I9joDruJW8m9BSgp5CTbI_byJq1l6ir9PBDQxj_BdYZ9ZCdhllb18e76M9ahvo4h5mK-OXxR89EULSunN7qfSb3KS_RE/s1600/HEADER-Google-Play-indie-games-developer---Googlr-play-publishing-journey.png"></a>
<p>Developer game indie, Geoffrey Mugford dan Samuli Pietikainen, pertama kali bertemu secara online karena kesamaan minat terhadap desain game, sebelum bergabung untuk membuat studio mereka sendiri, No Devs. Mereka mencari cara untuk membentuk sebuah tim, mereka mengikuti <a href="https://itch.io/jam/quick-play-2022" target="_blank">Quickplay Game Jam</a> yang diselenggarakan oleh <a href="https://www.latinxingaming.com/" target="_blank">Latinx in Gaming</a> yang bermitra dengan Google Play. Kompetisi 6 minggu ini, yang terbuka untuk siapa pun dari seluruh dunia, menantang para peserta untuk menciptakan ide game dengan tema 'tradisi'. Duo ini menjadi salah satu dari 4 pemenang yang mendapatkan hadiah sebesar $80.000 untuk mewujudkan konsep game jam mereka dan meluncurkannya di Google Play.</p>
<p>Ide game mereka yang menjadi pemenang, <a href="https://play.google.com/store/apps/details?id=com.NoDevs.Pilkki&pcampaignid=web_share" target="_blank">Pilkki</a>, baru saja diluncurkan dalam versi akses awal. Game ini menawarkan kepada pemain sebuah petualangan memancing di es dengan visual claymation menawan dalam suasana tenang yang mengangkat budaya Finlandia. Penasaran dengan asal-usul dan keunikan gameplay game ini, kami mengobrol dengan salah satu anggota No Devs, Geoffrey. Dia membagikan bagaimana tradisi multikultural dan latar belakang Samuli yang berasal dari Finlandia menginspirasi desain game mereka, pelajaran yang telah mereka pelajari sejauh ini, dan rencana masa depan studio mereka.</p>
<img><div style="text-align: center;"><img alt="Foto wajah Geoffrey Mugford (kiri) dan Samuli Pietikainen (kanan), sedang tersenyum" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOLTqM4qppAinXfynQrPqcV-6T3Nh6ADMGxJPr0ZbGZeoe0kV-Ly9vURc8QMLUKdvupqxr-jwx9C-Qvb0jANf1ZLA3t57KzpWhC5KDhCLol5qrL8-ERN0-N1vcLvqzj-ezoY0_1DSYjwaUrxvtUbX4NrpqYnFHyps6S-BKGdcGzFNcoXiv4ZGBwMGGtBU/s1600/Inline-Google-Play-Pilkki.png" width="100%"></div><imgcaption><center><em>Geoffrey Mugford (kiri); Samuli Pietikainen (kanan)</em></center></imgcaption>
<h4><span style="font-size: large;">Ceritakan kepada kami perjalanan Anda sebagai sebuah tim dan mengapa Anda mengikuti Quickplay Game Jam.</span></h4>
<p>Kami mulai membuat game bersama pada Mei 2022. Kami sudah membicarakannya selama setahun, tetapi belum berani mengambil risiko, jadi game jam adalah cara yang sempurna untuk memulai kemitraan kreatif kami. Game jam pertama kami terbilang sukses, jadi kami memutuskan untuk melanjutkannya dan mencari lebih banyak peluang game jam. Sebagai developer indie, menyeimbangkan proyek pribadi dengan stabilitas finansial adalah hal yang sulit. Memenangkan hadiah dalam game jam membuka peluang untuk membuat prototipe ide dan berpotensi mendapatkan pendanaan awal untuk ide tersebut. Game jam ini menawarkan kesempatan tersebut sekaligus mempromosikan keberagaman budaya. Karena latar belakang Samuli, kami sangat tertarik untuk membuat game yang menggambarkan pola pikir orang Finlandia.</p>
<h4><span style="font-size: large;">Apa yang menginspirasi terciptanya Pilkki dan bagaimana Anda membentuk game ini untuk menawarkan pengalaman budaya yang unik, seperti memancing di es?</span></h4>
<p>Pada awalnya, kami kesulitan dengan tema 'tradisi' yang diusung game jam. Awalnya kami ingin membuat game tradisional yang terinspirasi dari 'Day of the Dead', tetapi akhirnya menyadari bahwa game ini tidak cukup menarik bagi kami setelah beberapa kali mencoba, jadi kami mengubahnya. Berasal dari latar belakang multikultural, kami berpikir untuk memadukan budaya daripada fokus pada satu budaya saja. Kami mempertimbangkan untuk membuat tradisi baru dengan menggunakan format deck builder atau city-builder, tetapi kami merasa bahwa format ini terlalu ambisius mengingat jangka waktunya. Kami akhirnya mengalihkan fokus kami ke Finlandia dan tradisinya yang unik. Beberapa tradisinya, seperti eukonkanto (lomba menggendong istri) dan tinanvalanta (melelehkan timah dalam sendok sauna) menarik perhatian kami, tetapi pada akhirnya kami memilih memancing di es - aktivitas yang sederhana, unik, dan sangat khas Finlandia yang cocok untuk game seluler. Tantangannya adalah berinovasi di dalamnya - kami membayangkannya sebagai game teka-teki berbasis fisik, di sini pemain mengontrol kail sebagai pendulum, dan begitulah Pilkki tercipta.</p>
<img><div style="text-align: center;"><img alt="foto berdampingan gameplay Pilkki" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif086hvJyRx0RYc-Uqm2_3XJCt484ubmaclQC5ZSjHXHBOUuHFQGV46cMnCq3FJiUH-x7B-bC-lavnQVr0R6h6cHWFi0qb9r2ADcGjKvEiv3cwarzR9HsP0DkQo-TftAQqQXrSdOu35mT6YbEEsra395vMVGF0OwWkEbh51zr-lE9h1A0R9Q59OFIbya8/s1600/Inline-Google-Play-Pilkki-2.png" width="100%"></div><imgcaption><center><em>Gameplay Pilkki</em></center></imgcaption>
<h4><span style="font-size: large;">Dapatkah Anda menyoroti beberapa pembelajaran dan penyesuaian yang Anda lakukan dalam proses ini?</span></h4>
<p>Kami hanya punya waktu 6 minggu untuk membuat game ini, dan telah menghabiskan 2 minggu bertukar pikiran. Ketika kami memutuskan ide game, kami harus sangat berhati-hati dengan ruang lingkup dan, terkadang, membuat keputusan cepat tanpa kesempatan untuk melakukan pengujian permainan. Beberapa dari keputusan ini ternyata sangat disukai pemain - yang lainnya, tidak begitu disukai. Untungnya, kami memiliki pembagian tanggung jawab yang jelas - saya menangani desain dan pemrograman game, Samuli menangani seni, audio, dan nuansa game - sehingga kami bisa bekerja dengan lancar secara paralel dan mencapai target secara efisien.</p>
<p>Kondisi kemenangan adalah aspek yang menantang untuk dipikirkan selama pengembangan. Kami menginginkan pengalaman yang kalem dan reflektif, mirip dengan kehidupan nyata, jadi kami menghindari sistem skor dan penghitung waktu. Dengan waktu yang hampir habis untuk menyelesaikan game ini, kami tidak dapat mengeksplorasi opsi alternatif. Akibatnya, entri game jam kami berpacu dengan waktu untuk menangkap ikan sebanyak mungkin. Setelah game jam berakhir, kami melihat kembali hal ini dan beralih ke suasana yang lebih tenang, di mana progres game didorong oleh teka-teki daripada skor.</p>
<h4><span style="font-size: large;">Bagaimana pendanaan dari Quickplay Game Jam yang bekerja sama dengan Google Play berkontribusi pada pengembangan Pilkki setelah tahap prototipe awal?</span></h4>
<p>Cakupan Pilkki jauh lebih besar daripada apa pun yang pernah kami coba sebelumnya. Tanpa pendanaan, kami mungkin akan membiarkannya dalam tahap prototipe tanpa mengeksplorasi konsepnya lebih lanjut. Quickplay Game Jam memungkinkan kami mengenali potensi ide tersebut, dan mendedikasikan diri kami untuk mengubahnya menjadi pengalaman memancing yang santai.</p>
<p>Dengan pendanaan tersebut, kami dapat mendedikasikan waktu 3 bulan penuh untuk mendesain dan mengembangkan Pilkki. Kami bisa mengambil langkah mundur dan sungguh-sungguh memikirkan bagaimana kami bisa membangun sebuah game yang akan terus berkembang setelah rilis. Selain itu, Samuli bereksperimen dengan berbagai gaya dan seni multi-media - inilah cara dia mengembangkan visual claymation indah yang menjadi nilai jual unik kami.</p>
<h4><span style="font-size: large;">Apakah Anda bersemangat dengan masa depan Anda sebagai studio game indie baru?</span></h4>
<p>Ya, pasti! Kami senang menciptakan pengalaman yang menyenangkan dan inovatif bagi orang-orang, dan kami berdua bermimpi bisa mengerjakan game kami sendiri secara penuh waktu. Perjalanan masih panjang, tetapi kami bersemangat untuk menjaga momentum ini. Untuk sekarang, kami secara aktif mengerjakan Pilkki dan menargetkan perilisan update game utama pada 2024. Kami ingin sekali melihat reaksi dari pemain kami.</p>
<p>Keberadaan game kami di Google Play memberi kami akses ke pasar baru di seluruh dunia. Kami tidak sabar ingin melihat bagaimana game ini berkembang dan menarik pemain baru, serta bagaimana game ini memperkenalkan mereka pada budaya Finlandia yang unik.</p>
</div>
<hr>
</div>
</div>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.com0tag:blogger.com,1999:blog-6158048950125693510.post-44570783902965956972023-12-13T08:35:00.008+07:002024-02-23T08:40:00.121+07:00Memanfaatkan Gemini di aplikasi Android Anda<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="https://android-developers.googleblog.com/2023/12/leverage-generative-ai-in-your-android-apps.html"/>
<meta name="original_url" content="https://android-developers.googleblog.com/2023/12/leverage-generative-ai-in-your-android-apps.html"/>
<style id="page-skin-1" type="text/css"><!--
body {
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
-webkit-font-smoothing: antialiased;
color: #202124
}
h1 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px
}
h2 {
font-size: 30px;
line-height: 40px
}
h2,
h3 {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500
}
h3 {
font-size: 24px;
line-height: 32px
}
h4 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 26px
}
h5 {
font-size: 16px;
line-height: 24px
}
h5,
h6 {
font-family: Roboto, sans-serif;
font-weight: 600
}
h6 {
font-size: 14px;
line-height: 22px
}
.display {
font-family: Roboto, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 67.2px
}
.hidden-text {
height: 1px;
overflow: hidden;
pointer-events: none;
position: absolute;
top: -10px;
width: 1px
}
img,
video {
border: 0;
height: auto;
max-width: 100%
}
body {
position: relative;
min-height: 100vh
}
body.no-scroll {
overflow: hidden
}
a {
color: #4184f3;
text-decoration: none
}
a:focus,
a:focus-visible {
outline-offset: -2px
}
.content-wrap {
padding-top: 200px;
max-width: 800px;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:915px) {
.content-wrap {
padding-top: 100px
}
}
.full-width {
width: 100%
}
.icon-link {
height: 42px;
width: 132px;
border-radius: 80px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: baseline;
-ms-flex-pack: center;
justify-content: baseline;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
background: transparent;
border: none;
color: black !important
}
.icon-link:hover {
background-color: hsla(213, 7%, 76%, .2)
}
.icon-link:focus {
background-color: hsla(213, 7%, 76%, .26)
}
.icon-link:active {
background-color: hsla(213, 7%, 76%, .32)
}
.adb-container {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto;
max-width: 1420px
}
@media only screen and (max-width:767px) {
.adb-container {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--large {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto
}
@media only screen and (max-width:767px) {
.adb-container--large {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--flex-horizontal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.section,
body {
margin: 0
}
.adb-card {
position: relative;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
margin: 40px 0;
padding: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: box-shadow .2s linear, opacity .2s linear;
transition: box-shadow .2s linear, opacity .2s linear, -webkit-box-shadow .2s linear
}
.divider {
border: none;
height: 1px;
color: #DADCE0;
background-color: #DADCE0;
margin: 0 20px;
}
.adb-card:first-child {
background-color: #d7effe;
border: none;
padding: 32px 24px 32px;
margin: 40px 20px 60px;
}
@media only screen and (max-width:850px) {
.adb-card {
max-height: unset;
padding: 0 20px
}
.adb-card:first-child {
margin-bottom: 40px;
}
}
@media only screen and (max-width:600px) {
.adb-card:first-child {
margin: 0 -20px 40px;
}
.adb-card {
border-radius: 0;
padding: 0;
}
.divider {
margin: 0;
}
.content-wrap {
padding-top: 54px;
}
}
.adb-card:focus-within,
.adb-card:hover {
-webkit-box-shadow: 0 0 36px rgba(0, 0, 0, .1);
box-shadow: 0 0 36px rgba(0, 0, 0, .1);
cursor: pointer
}
.adb-card__href {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.adb-card__image-wrapper {
overflow: hidden;
position: relative;
width: auto;
-webkit-flex-basis: 40%;
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.adb-card__content {
padding: 24px 0 0
}
.adb-card__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 600;
margin-bottom: 12px
}
.adb-card__info {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 24px
}
.adb-card__description {
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin-bottom: 48px
}
.adb-card:hover .adb-content__image-wrapper img,
.adb-card__href:focus~.adb-content__image-wrapper img {
-webkit-transform: scale(1.03);
transform: scale(1.03);
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease
}
.devsite-footer {
padding: 0 24px;
border-top: 1px solid #bdc1c6
}
.devsite-footer li {
display: block
}
.devsite-footer li a {
text-decoration: none;
font-size: 14px;
line-height: 16px;
color: #202124
}
.devsite-footer li a:focus,
.devsite-footer li a:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-linkboxes-list {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
padding: 24px 0;
border-bottom: 1px solid #bdc1c6
}
@media only screen and (max-width:767px) {
.devsite-footer-linkboxes-list {
grid-template-columns: 1fr;
padding-left: 0
}
}
.devsite-footer-linkbox {
display: block
}
.devsite-footer-linkbox-heading {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin: 0 0 4px
}
.devsite-footer-linkbox ul {
padding-left: 0
}
.devsite-footer-sites-list {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-utility nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 24px 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0
}
}
.devsite-footer-utility-button {
justify-self: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 20px;
margin-left: auto;
padding-left: 16px
}
.devsite-footer-utility-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 8px 0 0
}
.devsite-footer-utility-item:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.devsite-footer-utility-item:not(:first-child):before {
content: "|";
margin: 0 8px 0 0
}
}
.devsite-footer-sites {
border-bottom: 1px solid #bdc1c6;
padding: 24px 0 23px
}
.devsite-footer-sites-logo {
height: 32px;
margin-top: 5px;
width: 185px
}
.devsite-footer-sites-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0
}
.devsite-footer-sites-item {
margin: 0 0 0 40px
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-item {
margin: 0
}
}
.devsite-footer-sites-link {
display: block;
padding: 8px 0;
color: #202124
}
.devsite-footer-sites-link:focus,
.devsite-footer-sites-link:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-utility-link:focus {
text-decoration: underline
}
.devsite-footer-utility .devsite-footer-utility-button {
line-height: 20px;
font: 400 14px/16px Roboto, sans-serif
}
.devsite-footer-utility .devsite-footer-utility-button:before {
content: "";
margin: 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility .devsite-footer-utility-button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
margin: 18px 0 12px
}
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link {
border: 0;
background: #1a73e8;
color: #fff;
line-height: 36px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0 0 16px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px 0;
box-shadow: 0 1px 2px 0;
display: inline-block;
font: 500 14px/36px Roboto, sans-serif;
height: 36px;
letter-spacing: 0;
min-width: 36px;
padding: 0 24px;
text-align: center;
-webkit-transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s, -webkit-box-shadow .2s;
vertical-align: middle;
white-space: nowrap
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link:hover {
background: #1765cc
}
.adb-page__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px;
text-align: center;
color: #202124
}
.adb-detail hr {
border: 1px solid #dadce0;
margin: 40px 0
}
.adb-detail__title {
font-size: 40px;
font-weight: 600;
line-height: 48px
}
.adb-detail__info {
font-weight: 400;
font-size: 16px;
line-height: 24px
}
.adb-detail__content {
min-height: 200px
}
.icon-sidebar {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
top: 0;
left: -300px;
max-width: 220px;
gap: 8px
}
.icon-sidebar .share-text {
font-weight: 500;
margin-left: 4px
}
@media only screen and (max-width:1440px) {
.icon-sidebar {
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
left: 0;
margin-top: -20px;
margin-bottom: 40px;
}
.icon-sidebar .share-text {
display: none;
}
}
.copy-tooltip {
display: none;
position: fixed;
bottom: 16px;
left: 10px;
z-index: 100;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.copy-tooltip .copy-tooltiptext {
width: 200px;
background-color: #073042;
color: #fff;
text-align: center;
border-radius: 80px;
padding: 8px 16px;
}
.header__overlay {
height: 100vh;
left: 0;
position: fixed;
width: 100vw;
border: none;
background-color: rgba(0, 0, 0, .4);
-webkit-animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
opacity: 0;
top: 0;
z-index: -1;
display: none
}
.header__overlay.show {
display: block;
opacity: 1;
z-index: 800;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out
}
.social-icons__links {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
.social-icons__links path {
fill: #80868b
}
.social-icons__container-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin-right: 14px
}
@media only screen and (max-width:1000px) {
.social-icons__container-header {
display: none
}
}
.adb-blog-logo:focus,
.adb-blog-logo:hover {
opacity: .7;
text-decoration: none
}
.adb-blog-logo__image {
height: 32px;
margin-left: 0;
margin-top: 6px
}
@media only screen and (min-width:840px) {
.adb-blog-logo__image {
margin-left: 24px
}
}
.header {
position: fixed;
background: #fff;
z-index: 700;
top: 0;
width: 100%;
overflow: hidden;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
height: auto
}
.header .top-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 24px;
height: 50px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #e6e6e6
}
@media only screen and (max-width:839px) {
.header .top-row {
padding: 0 16px
}
}
.header .top-row__left,
.header .top-row__right {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 100%
}
.header .nav-row,
.header .top-row__left,
.header .top-row__right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.header .nav-row {
background: #fff;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.header .nav-items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 50px;
position: relative;
background-color: #fff
}
@media only screen and (max-width:839px) {
.header .nav-items {
display: none
}
}
.header .nav-items tab {
position: relative
}
.header .nav-items tab.active .header__nav-item:after,
.header .nav-items tab:hover .header__nav-item:after {
background: #1a73e8
}
.header .nav-items tab.active .header__nav-item,
.header .nav-items tab:focus-within a {
color: #202124
}
@media only screen and (max-width:839px) {
.header .header__cta,
.header .nav-items {
display: none
}
}
.header__search-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 6px 0 6px 24px;
overflow: hidden;
position: relative;
margin-right: 36px;
border-radius: 4px
}
@media only screen and (max-width:767px) {
.header__search-container:not(.mobile) {
display: none
}
}
.header__search-container.mobile {
margin: 0 0 20px
}
.header__search-container.mobile #searchform,
.header__search-container.mobile .searchbox {
width: 100%
}
.header__search-container .searchbox {
border-radius: 2px
}
.header__search-container .searchbox input {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
font-weight: 500;
color: #80868b;
border: 0;
margin: 0;
height: 20px;
outline: 0;
padding: 8px 8px 8px 40px;
width: 100%;
-webkit-transition: background .2s;
transition: background .2s
}
.header__search-container .searchbox input::-webkit-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input:-ms-input-placeholder,
.header__search-container .searchbox input::-ms-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input::placeholder {
color: #80868b
}
.header__search-container .searchbox input:hover {
background: #e8eaed
}
.header__search-container .material-icons {
color: #80868b;
left: 8px;
position: absolute;
top: 6px;
-webkit-transition: color .2s;
transition: color .2s
}
.header__cta {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #1a73e8 !important;
text-decoration: none
}
.header__cta.mobile {
padding: 18px 0
}
.header__cta:hover .cta-icon {
margin-left: 0;
margin-right: 12px
}
.header__cta .cta-icon {
-webkit-transition: margin-right .2s linear, margin-left .2s linear;
transition: margin-right .2s linear, margin-left .2s linear;
margin-left: 4px;
margin-right: 8px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.header__cta .cta-icon path {
fill: #1a73e8
}
.header__nav-item {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #80868b;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 18px;
height: 100%;
text-transform: none;
text-decoration: none
}
.header__nav-item:hover {
color: #202124
}
.header__nav-item.mobile {
font-weight: 500;
padding: 0
}
.header__nav-item:after {
bottom: 0;
border-radius: 3px 3px 0 0;
content: "";
display: block;
height: 3px;
left: 50%;
min-width: 20px;
position: absolute;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(100% - 24px)
}
.header__hamburger {
border: 0;
background: none;
outline: none;
padding: 0;
margin: 1px 8px 0 -4px;
padding: 8px;
color: rgba(0, 0, 0, .65);
cursor: pointer
}
@media only screen and (min-width:840px) {
.header__hamburger {
display: none
}
}
.header__side-menu {
background-color: #fff;
bottom: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
z-index: 900
}
.header__side-menu.is-open {
-webkit-transform: translateX(0);
transform: translateX(0);
width: 80%
}
.header__side-menu.is-open,
.header__side-menu__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%
}
.header__side-menu__content {
padding: 18px 16px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.header__side-menu__content .spacer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.header__side-menu__title {
font-family: Roboto, sans-serif;
font-size: 20px;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px
}
.header__side-menu__items {
list-style: none
}
.header__side-menu__items li {
padding: 12px 0
}
.header__side-menu__items tab {
position: relative
}
.header__side-menu__items tab.active .header__nav-item,
.header__side-menu__items tab:focus-within a {
color: #202124
}
.header__side-menu__bottom {
border-top: 1px solid #e6e6e6
}
.header__side-menu__logo-container {
background: #fff;
height: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 4px 16px;
border-bottom: 1px solid #e6e6e6
}
#nav .widget {
margin: 0
}
.featured__wrapper {
width: 100%;
border: 0;
background-color: #e8f0fe;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 80px 0
}
@media only screen and (max-width:767px) {
.featured__wrapper {
padding: 0
}
}
.featured__inner {
max-width: 1080px;
width: calc(100% - 24px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
padding: 48px
}
@media only screen and (min-width:768px) {
.featured__inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
padding: 12px 80px
}
}
.featured__href {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.featured__image {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
max-width: 100%;
}
.featured__content {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-top: 24px;
width: 100%
}
.featured__title {
font-size: 32px;
line-height: 44.8px;
font-weight: 500;
font-family: Android Euclid, Roboto, sans-serif;
margin-bottom: 15px
}
.featured__info {
font-family: Roboto Mono, monospace;
font-weight: 400;
font-size: 12px;
line-height: 160%;
margin-bottom: 24px
}
.featured__description {
margin-bottom: 48px
}
.preview.featured__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f1f3f4;
padding: 64px 0 120px
}
.preview.featured__wrapper h1 {
margin: 0 0 64px
}
.blog-label-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px
}
.blog-label-container .blog-label {
text-decoration: none;
z-index: 3
}
.blog-label-container .blog-label span {
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
background-color: #F1F3F4;
border-radius: 100px;
padding: 4px 16px;
color: #3c4043
}
.adb-card:first-child .blog-label span {
background-color: #fff;
}
.blog-label-container .blog-label span:focus,
.blog-label-container .blog-label span:hover {
background-color: #D7EFFE
}
.adb-card:first-child .blog-label span:focus,
.adb-card:first-child .blog-label span:hover {
background-color: #F1F3F4
}
.blog-label-container .blog-label span:focus-visible {
outline-offset: 0
}
#pagination-container {
display: none
}
.pagination {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.pagination .page-button {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: black;
background-color: #3DDC84;
padding: 16px 24px;
border-radius: 80px;
text-decoration: none
}
.pagination .page-button:focus,
.pagination .page-button:hover {
background-color: #3DDC8460;
}
.pagination .page-button.disabled {
color: #80868b;
background-color: #f1f3f4
}
--></style>
<style id="template-skin-1" type="text/css"><!--
--></style>
<style>
/** Blogger default styles **/
html, .Label h2, #sidebar .rss a, .BlogArchive h2, .FollowByEmail h2.title, .widget .post h2 {
font-family: Roboto, sans-serif;
}
.plusfollowers h2.title, .post h2.title, .widget h2.title {
font-family: Roboto, sans-serif;
}
pre, .post-content pre.prettyprint {
background-color: #f7f7f7;
border: 1px solid #ddd;
margin: 0 0 1em 0;
padding: 1em;
overflow: auto;
}
pre, code {
font-size: 9pt;
line-height: 125%;
font-family: monospace;
}
pre, code {
color: #060;
font: 13px/18px Consolas, 'Liberation Mono', Menlo, Monaco, Courier, monospace;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
/* Styles for https://github.com/google/code-prettify */
.com { color: #060; }
.kwd { color: #008; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.fb-custom img, .twitter-custom img, .gplus-share img, .email-custom img {
cursor: pointer;
opacity: 0.54;
}
.twitter-custom, .gplus-share, .fb-custom {
margin-right: 12px;
}
/** Blogger custom theme **/
.adb-header,
.searchBox input {
box-sizing: border-box;
}
.popout-nav {
background-color: white;
width: 280px;
height: 100%;
position: fixed;
z-index: 6;
left: -280px;
transition: left 0.2s;
}
.popout-search {
background-color: white;
width: 280px;
position: fixed;
z-index: 6;
right: -280px;
transition: right 0.2s;
top: 0;
}
.popout-search .widget {
margin: 0;
}
.popout-search #BlogSearch2_form .popout-options {
padding-right: 24px;
width: calc(100% - 48px);
}
.dropdown-nav {
display: none;
background-color: white;
width: 104px;
position: fixed;
padding: 4px 0px 3px 0px;
z-index: 4;
left: 352px;
top: 176px;
transition: top 0.2s;
box-shadow: 0 0px 2px 0 rgba(60,64,67,.3), 0 0px 6px 2px rgba(60,64,67,.15), inset 0 0px 6px -4px rgba(154,160,166,.5);
}
.dropdown-options {
align-items: center;
display: flex;
flex-wrap: wrap;
width: 94px;
height: 48px;
padding-left: 10px;
}
.dropdown-options:hover {
background-color: #f7f9fa;
}
.dropdown-options span {
color: #80868b;
}
.popout-options {
padding-right: 8px;
padding-left: 24px;
padding-top: 16px;
padding-bottom: 15px;
display: inline-block;
width: calc(100% - 32px);
border-top: 1px solid #ddd;
font-size: 13px;
font-weight: 700;
color: #80868b !important;
}
.popout-options:last-of-type {
border-bottom: 1px solid #ddd;
}
.popout-options:first-of-type {
border-top: 0;
}
#close-popout {
padding: 12px 12px 11px 20px;
}
#close-search-popout {
padding: 12px 20px 11px 12px;
text-align: right;
}
.popout-search-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
transition: opacity 0.2s;
}
.popout-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
z-index: 5;
transition: opacity 0.2s;
}
html {
background-color: #fff;
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
width: 100%;
position: absolute;
padding: 0;
/* This ensures that the scroll bar is always present, which is needed */
/* because render happens after page load; otherwise the header */
/* would 'bounce' in-between states. */
min-height: 150%;
}
h2 {
font-size: 130%;
}
h1, h2, h3, h4, h5 {
line-height: 1.5em;
margin-bottom: 1em;
}
html, h4, h5, h6 {
font-size: 14px;
}
a, a:visited {
color: #039be5;
text-decoration: none;
}
pre code {
display: block;
}
.cols-wrapper {
margin-top: 56px;
}
.header-outer, .cols-wrapper {
padding: 0 60px;
}
html, .header-inner a {
color: #212121;
color: rgba(0, 0, 0, .87);
}
/** Archive widget. **/
.BlogArchive {
font-size: 13px;
font-weight: normal;
}
.BlogArchive .widget- {
display: none;
}
.BlogArchive h2, .Label h2 {
color: #039be5;
text-decoration: none;
}
/* Specificity needed here to override widget CSS defaults. */
/* Months */
.Label {
font-size: 13px;
font-weight: normal;
}
.sidebar-icon {
display: inline-block;
width: auto;
vertical-align: middle;
height: 24px;
margin-right: 24px;
}
.sidebar-social-links {
align-items: center;
}
.sidebar-social-links .android-logo,
.android-logo {
height: 48px;
}
.sidebar-social-links a:last-child img {
margin-right: 0;
}
.Label .widget- {
display: none;
}
.searchBox input {
border: 1px solid #eee;
color: #212121;
color: rgba(0, 0, 0, .87);
font-size: 14px;
padding: 8px 8px 8px 40px;
width: 100%;
font-family: Android Euclid, Roboto, sans-serif;
background: url('https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png') 8px center no-repeat;
}
.searchBox ::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .54);
}
.section {
margin: 0;
padding: 0;
}
#sidebar-top {
border: 1px solid #eee;
}
#sidebar-top > div {
margin: 16px 0;
}
/*main post*/
.post {
margin-bottom: 30px;
}
#main .post .title {
margin: 0;
}
#main .post .title a {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: normal;
font-size: 24px;
}
.message, #main .post .post-header {
margin: 0;
padding: 0;
}
#main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption {
color: #444;
font-weight: 500;
}
#main .post .post-header .published {
font-size: 11px;
font-weight: bold;
}
.post-header .publishdate {
font-size: 16px;
font-weight: normal;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#main .post .post-footer {
font-size: 12px;
padding-bottom: 21px;
}
.label-footer {
margin-bottom: 12px;
margin-top: 12px;
}
#main .post .post-header .published {
margin-bottom: 16px;
}
.post .post- {
color: #545454;
color: rgba(0, 0, 0, .67);
font-size: 16px;
margin: 16px 0 36px 0;
line-height: 24px;
word-wrap: break-word;
}
.post-summary {
display: none;
}
/* Override all post images/videos to left align. */
@media (max-width: 712px) {
.post- img {
max-width: 100%;
height: auto;
width: auto;
}
}
.post- .tr-caption-container img {
margin-bottom: 12px;
}
.post- iframe, .post- embed {
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
}
.post- .carousel-container {
margin-bottom: 48px;
}
#main .post- b {
font-weight: 500;
}
/* These are the main paragraph spacing tweaks. */
#main .post- br {
: '';
display: block;
padding: 4px;
}
.post-content .space {
display: block;
height: 8px;
}
.post-content iframe+.space, .post-content iframe+br {
padding: 0 !important;
}
#main .post .jump-link {
margin-bottom: 10px;
}
.post-content img, .post-content iframe {
margin: 30px 0 20px 0;
}
.post-content > img:first-child, .post-content > iframe:first-child {
margin-top: 0;
}
.col-right .section {
padding: 0 16px;
}
#aside {
background: #fff;
border: 1px solid #eee;
border-top: 0;
z-index: 2;
}
#aside .widget {
margin: 0;
}
#aside .widget h2, #ArchiveList .toggle+a.post-count-link {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: 400 !important;
margin: 0;
}
#ArchiveList .toggle {
float: right;
}
#ArchiveList .toggle .material-icons {
padding-top: 4px;
}
#sidebar-top,
#sidebar {
background: #fff;
}
#sidebar .tab {
cursor: pointer;
}
#sidebar .tab .arrow {
display: inline-block;
float: right;
}
#sidebar .tab .icon {
display: inline-block;
vertical-align: top;
height: 24px;
width: 24px;
margin-right: 13px;
margin-left: -1px;
margin-top: 1px;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget-content > :first-child {
padding-top: 8px;
}
#sidebar .active .tab .arrow {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#sidebar .arrow {
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget h2 {
font-size: 14px;
line-height: 24px;
display: inline-block;
}
#sidebar .widget .BlogArchive {
padding-bottom: 8px;
}
#sidebar .widget {
border-bottom: 1px solid #eee;
box-shadow: 0px 1px 0 white;
margin-bottom: 0;
padding: 14px 0;
min-height: 20px;
}
#sidebar .widget:last-child {
border-bottom: none;
box-shadow: none;
margin-bottom: 0;
}
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style: none;
padding: 0;
}
#sidebar ul li a {
line-height: 32px;
}
#sidebar ul ul ul li a {
line-height: 24px;
}
#sidebar .archive {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC');
height: 24px;
line-height: 24px;
padding-left: 30px;
}
#sidebar .labels {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC');
height: 20px;
line-height: 20px;
padding-left: 30px;
}
#sidebar .rss a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII=');
}
#sidebar .subscription a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC');
}
#sidebar-bottom {
background: #f5f5f5;
border-top: 1px solid #eee;
}
#sidebar-bottom .widget {
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
text-align: center;
}
#sidebar-bottom > div:last-child {
border-bottom: 0;
}
#sidebar-bottom .text {
line-height: 20px;
}
/* Home, forward, and backward pagination. */
.blog-pager {
padding-top: 10px;
margin-top: 15px;
text-align: right !important;
}
#blog-pager {
padding: 40px 0 0;
}
#blog-pager a {
display: inline-block;
}
.blog-pager i.disabled {
opacity: 0.2 !important;
}
.blog-pager i {
color: black;
margin-left: 16px;
opacity: 0.54;
}
.blog-pager i:hover, .blog-pager i:active {
opacity: 0.87;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
.gplus-profile {
background-color: #fafafa;
border: 1px solid #eee;
overflow: hidden;
width: 212px;
}
.gplus-profile-inner {
margin-left: -1px;
margin-top: -1px;
}
/* Sidebar follow buttons. */
.followgooglewrapper {
padding: 12px 0 0 0;
}
.loading {
visibility: hidden;
}
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 40px !important;
}
/* ADB */
.adb-hero-area {
min-height: 104px;
background-color: #073042;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
z-index: 5;
position: fixed;
width: 100%;
}
.adb-hero-logo {
height: 80px;
position: absolute;
top: 12px;
left: 16px;
}
.adb-footer-btm {
display: flex;
margin: 0 24px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 40px;
}
.subscribe-btn {
color: black;
background-color: #3DDC84;
border-radius: 100px;
font: 500 16px/24px Android Euclid,Roboto,sans-serif;
padding: 12px 24px;
border: 0;
}
.adb-footer-info {
align-items: center;
display: flex;
padding: 0;
margin: 9px 0 0 -8px;
font-size: 13px;
}
.footer-list {
list-style: none;
padding: 0 8px;
}
.subscribe-info {
list-style: none;
padding: 0 8px 0 0;
font-size: 13px;
color: black;
}
.footer-newsletter {
display: flex;
align-items: center;
}
.adb-header-inner {
display: flex;
align-items: center;
}
.adb-header {
background-color: white;
color: #fff;
height: 48px;
left: 0;
overflow: hidden;
padding: 36px 24px;
right: 0;
top: 104px;
z-index: 4;
display: flex;
align-items: center;
position: fixed;
border-bottom: solid 1px #DADCE0;
}
.adb-shadow {
margin-top: 48px;
height: 1px;
width: 100%;
position: fixed;
background: white;
z-index: 2;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
}
.adb-logo-box {
display:inline;
}
.adb-burger-box {
display: none;
margin: 0 16px 0 0;
}
.adb-search-box {
display: none;
margin: 0 0 0 16px;
}
.adb-htag-box {
display: flex;
align-items: center;
}
.adb-header-tags {
padding: 0 24px 0 0;
}
.adb-header-tags ~ .atb-header-tags {
padding: 0 24px;
}
.adb-header-tags a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #5F6368;
}
.adb-header-tags a:hover {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #073042;
}
.more-dropdown {
display: none;
}
.dropdown-icon {
transition: all 0.3s;
}
.adb-header-logo {
display: inline-block;
vertical-align: -11px;
width: 134px;
height: 32px;
}
.adb-header-title {
color: #fff;
display: inline-block;
font-size: 20px;
font-weight: normal;
}
.adb-header-links {
border-left: 1px solid rgba(0, 0, 0, .1);
display: block;
left: 250px;
list-style: none;
margin: 0;
padding: 12px 0 12px 18px;
position: absolute;
top: 0;
}
.adb-header-link-item {
display: inline-block;
}
.adb-header-link, .adb-header-link:visited {
color: #fff;
display: inline-block;
font-weight: 500;
opacity: .7;
padding: 12px 9px;
text-transform: uppercase;
vertical-align: 2px;
}
.adb-header-link:hover, .adb-header-link:focus {
color: #fff;
opacity: 1;
}
.adb-header-console, .adb-header-console:visited {
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
color: #fff;
float: right;
font-size: 14px;
font-weight: 500;
line-height: 28px;
padding: 4px 10px;
position: relative;
text-transform: uppercase;
transition: box-shadow .2s;
z-index: 60;
}
.adb-header-console:hover {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
color: #fff;
}
.adb-header-console:focus {
background-color: rgba(63, 81, 181, .1);
color: #fff;
}
.adb-header-console-image {
vertical-align: -5px;
}
.adb-hero {
background-color: #dcedc8;
margin-top: 64px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
color: #414141;
display: inline-block;
font-weight: 500;
margin: 25px 25px 0;
}
.adb-hero-inner {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAc4AAADZCAMAAACenCAVAAAAvVBMVEXc7cjY68PT6bvR57fQ57bY6sPZ68TU6bvR6LfP5rTQ57XR57jW6r7b7cfa7MbS6LnS6Lrb7cbQ6Lfb7MbX6r/Z68PY6sLV6b7U6b3U6r3T6LnX68Da7MXP57Tb7Mfc7cfW6b/P57XS57nY68LY68HU6L3W6r/W6b7T6brX6sDV6rzQ57fa7MTV6b3T6Lra68TR57bX68HW6sDS57jU6bzO5rTP5rXZ7MXR6LbZ68XX6sHT6LvV6bzS6LjZ7MILrTuqAAAIyklEQVR4AezXhXEkUQwE0B6+Xhg8MzND/smZ4UsLBSb9Kr0UhI1vl6RZnqUFlnBl9Y+j8WQK4+qGr9oOi7iKr0YFTOt6vhsPmM81/FDAspafUszl/vNTXsOuFYZWMYfrRgyswa51hjLM4TYYGsOuTQpbgNO2dyjAroxCvgunpZT2YFZDaQKnlFRg1z6lgxpOOqS0CbtqKutwwhGVYxh2QqWGC/WUMlhWH1BK4QKnVFZh2hmVEh/cXk7pHLbt5pQafHCT6Jr9gsoR3riayiXMyyhd4Y27jDDHJVQu8MJdU7lBBBpKoz08c7eU8gERuKNyhiduhcopolBRqeGAMaV7xKE7eGzvThQTVZooAJdC1AM2qGg0BhdCrpnciVE0i9dZ3v+t/n2ZMBtJGpsu6nuCrNJddar4/gAnMmuP/GPk3JFwrL2QKw3FD26GyGmQNXbIGVHNKdfmYraDl/ZUcxO8NNtIW888bafDC7tP5R2qtQfL724N5AypxjbIGdseWHMV1VfP+rrnZvbTerMEhHb2Py4eA7KX9AwD5LSppi5ZdPTHEhv6cd5mSjZaeMW/Dc66TEpkO+Q0qIbUE5es6ke85FMN/YGXZs9yQLdXYGVASGJDBaMZXsQouzau/fzfitNsKvpUL1O8dFBksb+Q80C1coaco7RtLeYzO9tHCV7qUY0ckXPGribSoNpQB3Z1MbWtby1hiZwWw35CRjUReRx7Sg5ecqgmJiyHOxrIWVEtPDPNY/TMx4bmczq5T3jpSRELm1NWodVmlGY364tP4ZXvdw5u8jjDf8yQJJ7j+2HYfBh3d+l5HFB5RmyzjM3yh8iDUbb6M9y7j3idgxM+3BzTuPzyXmdOTARJaUc8tUmX7ekB7+aF7dV1a0G6pIx3CkxKmBBUreMfvS0086aTnZZf6kfG53mlN/0UnS2bW5Socz9OA737eM6JkZWu4uUiXfVcnIT34eZM6Yq9hcRKR0OpL7i9cHBi/udjrCOUuiFWsnc2/oKsfYAhXvM2lsj4S/7b2/L9y4cODDu0j8HbBzqSPvutOksqpDH+gorw1+dvHLcaEzv3r4+0BdmnBJXi9bL+G6qaEbFz98rF4sEwnKGKrrrxK3sOuzoMlM9i+ql47KPC/HX8inTxljgKUHBYI1g6qDx/HBct76XETfHF4v3hHpZwVgH9APc0TfFSyTwLZ7DJ9FYxmZvTv1h89DmBdbyHEX0rcuuTRB38fNuQ2vmw1GAYMSjv6ZwQbD0ksFlz9LPW7gMxNv3RBVtlDqz3cbWo32rmEXLGFExcsJBMnilGzk29pleT5gx8fLiq2XzyM2rllpiboEYGxF2UoD6+EntL1Ma+TkOP/LVqNJLM3yeqgayDmnjqKmIu3aNGDhlx1pqiZvyUuAqaqKGwRRwt1gnqqR0QO5ce6ms5J1ZGIWqtkxIf0QNqb7ohJjIXgFjPiYF4j38R2wbZTk1m+C/xqU9WSzv4hkgyVkcg0QvIUg0XEHleRjaK/gQb8g/a2EL8hHcky6zxC+JTQBa5c/BL4nBO1lgl+B2xJjv0QxQgnA1ZoOGhGHFNldedoShxMadKU/d4BeEEVGF3Ll5FJF+psm7Bh5xwHyDeoKeogvp7iDfpbKhyWgeIN/JSqpjbBOLtlqwq7qJNFdKGeKdQUUUEIcS7Df6iSngeQAPhtqgCWi60EElKxjUSsCFriK5nYEMuLDtoJSZk0BiaiaYsZGPlXnEqHoipIhOaKIW4WnD63xThgtP/pthHdFqfUCIRRvK/KZ+3VX1uiulc7puc3EstSOpD9d7+LYGTFfiQenyKkxE3VLLGI9iQkcH4CackzqlEwRYnJbwNlUb5ODHhBVSWHk5O+JFMLkh5qFYxLxnoPZ9BmJGRdrELNuTddNEAwhg34NSvFnvSqgth1ANpNEIZkhkYSg4dt9rHocCFXvvxWUD/ELR2TQ98hMOWon+Ks7YLrZI70iWETu6yT99Qt3uw4A4j+lY6hU4dVcloUFdR3tkA1kt29J1zHxr1SIsGNAoDnvGjMCj/CLmr3INzQj9x5sFm41Ns933c0PtNoc+O0bJNA9+Xryp14+zSL9x5PH6beS2vQrfP0exkQcMG08BdCn1SepeFc8KPijWs5MxPdzN4CipzR2nQb8wdnu0O5UKbkN7h/LQZ/a9Ms+pZNYp9kQt9Yvo9H3Yx8H15QSXm/qZUQMY0ybOCPtNKlIMuqYAogW1SKkBBoxW9SXSARoqKCGGbBRVxBY0C85V3h2mb/MrASGxIb3BnYlaxwXRmLwUMFxMc6NSlQvpM6nt5MXTylOl00JGKYTqxp6DVBb1SkECrlOmvs0HFGA7efjA0dwrLfKVC5tDLp1dpGHrGKFjm0tCZYEWvMTA0NrOBZVZUSMtoLn4I3T5RISnTZTGXJrea9BPotmU6QrqlQi6gXWx05V5MRTiwTaD/4aW5FN8y9pCJYZ2usSPBNRUzNfapNIZ1fGM7KQdUSMNYJyl6Ajh2yAKTBUYHpfCZruJ0jB3wCpVur1GSIf3G8yOPlG1ePDN46d2iJEmLR+86L4lNBRQTZXK/6UAxunMWDxC3Da6omXsoz5XiOa8/NfV9JYHRXVBXiudG8r0y9Jmzpl87oFSDFv3Qog2rDTb0Q6qJckX0K7coWTKkHxh1YLmkSz/Q6JjNKnVQOj+lnM0nMPDxmnLuPhjej5rhFLbjmP4nOF6BCXfdov8JLkPj+xcdnMjh03p3nWXLBwesuB/+GGbHXbc5wIkkSt7CwEmXU1lGbPX3OYVBt5y2Yoov9EN/QVhpJK9xZL/7P4Kw1LO8iIH7qxx8CEu5zG8pcldpQ1hrSjnBI4S9YnrpBsJiEzkIcfIkByFWUqkIcdKjb7kQdos49a3Fjv7vE4TlfPoflYAPuXoeIaw3pv+6h7CeQ/8RPYIP6XpegwGxknMtwxcqK7AgAqkhcDKkf3oAI9LE9sCDWGhf4S8M70peggnxQERTMCFcIjUDF+KOUrAhhvQANkT4dwEsPvJYWz4QAAAAAElFTkSuQmCC');
background-position: bottom right 70px;
background-repeat: no-repeat;
background-size: auto 100%;
margin: 0 auto;
max-width: 980px;
padding: 0 60px;
position: relative;
}
.adb-hero-back-icon {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.adb-hero-title {
font-size: 22px;
line-height: 28px;
padding: 24px 24px 0px 112px;
}
.adb-hero-title a {
color: #FFFFFF;
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500;
}
.adb-hero-summary {
font-size: 16px;
line-height: 24px;
padding: 8px 24px 8px 112px;
}
.adb-hero-summary a {
color: rgba(255, 255, 255, 0.9);
}
.adb-hero-description {
color: #6f7172;
font-size: 16px;
margin: 0;
max-width: 440px;
padding-bottom: 32px;
}
.adb-hero-search {
position: absolute;
top: 19.35%;
right: 1.94%;
}
.adb-hero-search .searchBox input {
border: 1px solid #80868B;
border-radius: 4px;
color: white;
}
.adb-hero-search .searchBox input::placeholder {
color: #F1F3F4;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
padding-left: 12px;
}
.adb-hero-link {
position: absolute;
right: 1.67%;
top: 64.52%;
}
.adb-hero-link a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #3DDC84;
letter-spacing: 1.4px;
}
.adb-hero-arrow {
display: inline-flex;
font-size: 24px;
vertical-align: middle;
}
.adb-socials-box {
display: flex;
position: absolute;
right: 1.67%;
}
.adb-socials-category,
.adb-socials-divider {
display: flex;
align-items: center;
}
.adb-socials-divider {
color: #DADCE0;
font-size: 40px;
font-weight: 100;
margin: 0 20px;
}
.adb-socials-category img,
.adb-footer-social-links img {
height: 24px;
}
.adb-footer-social-links-img {
margin-right: 20px;
}
.adb-hero-subscribe, .adb-hero-subscribe:visited {
background-color: #90c653;
color: #fff;
display: inline-block;
border-radius: 3px;
margin: 25px 0 60px;
padding: 13px 32px;
text-transform: uppercase;
}
.adb-hero-subscribe:hover, .adb-hero-subscribe:focus {
background-color: #333;
}
.adb-footer {
margin: 32px auto 64px;
}
.adb-footer-more {
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #f0f0f0;
padding: 30px 0;
}
.adb-footer-more a {
color: #000;
display: inline-block;
font-size: 20px;
font-weight: 300;
margin-right: 16px;
}
.adb-footer-social {
float: right;
margin-top: -62px;
}
.adb-footer-social a {
background-color: #ccc;
background-position: center;
background-repeat: no-repeat;
background-size: auto 16px;
border-radius: 50%;
display: inline-block;
height: 36px;
margin-left: 16px;
transition: background-color .1s;
width: 36px;
}
.adb-footer-social-youtube {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAQAAAAxWje/AAABLUlEQVQ4y6WUvUoDYRBFr42gCdhK8AV8BwsVC0FQfIQUgr5DIKJoGy1CfAaDq1hIGn8K2xDSaBc1wUJJEYmbkDXssdi1Mrvfst9tZ+bAzNwZSZLEAmvsUKTCBQ80eaWLyxiAMS5dXmhyT5UyBfIsM68/McM1aXRDJgCUSKsTSWQZpAa4ZMUmNtoSRxGhbd4TAI7F1eSIxBwVfAPgUtSjAJLEEk+xgLroxAEkpikyigS0RS8eIEks8hgB6ImhGSAxxS5fE9JGwksCkCRyOP/SfPFjC0jawl5UC9ZDbBvXuB+zxjezkZ5NRnJirHxmtLIjDq2O6UBsWJ3zut1D+WZWEqepAaVg0hlqqcpr4VMNbbpKngJlqtzRoMUnfTx8fDz6fNCiwS3n4VtfIRdU/gLTrSb7DGWLcQAAAABJRU5ErkJggg');
}
.adb-footer-social-youtube:hover {
background-color: #f44336;
}
.adb-footer-social-gplus {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAUCAQAAACpWpz6AAABJUlEQVQ4EZXBTUoCYQDH4X9hTS3Cja0Kyb2X6BCJoLlr1aKwK1QHCMMzWLiqTcuWXaAWQWIlU1DQh4QJ+Wt4X95x0hGn55FCeGzSpMUXXW45ocSC/oMiHUZ1KCgZZqkzyZaSoM7QgCd8BlgXLGo6ijgv7JJRgAxV3jjDUwwMOXh0sK5ZUQRZ5hQLQw4VrA/WlBCGHJpY+0oMQw5trLxCjNtTgFiij5VSiHFHChBL9LFSCjGurgCxRBsrrxA+Pj4+Pl2sQ0VgyKGJdaAYNLAqisCQQxnrk5xGkKOHlVUEhhw8HrFuWFUEaa6wLvUHhoYo4LxSZVkBlihzh7OuaagR9YzPD0PHmo5ZakzSIKVk2OCBUe/sMKPkmKfEKS16fHPPOduklcAvR50zMVwhTI4AAAAASUVORK5CYII=');
}
.adb-footer-social-gplus:hover {
background-color: #f44336;
}
.adb-footer-social-twitter {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAQAAAB0gUQ+AAABI0lEQVQ4EY3BQShDAQDH4f+zTSyJuLgoLlwclYOTHCwHu9ouiLRScpUmNwduDkpCSTs4LAeJhINoOTo4ctHkskyJtf20vWbe3tvb+z7JFUGibLHPMj0qoYEWSYzRKkdMkKbsm3m6WSRFuyQeuKNNNoTJU61ABL8kssAjvbKgiTR2V+ywJol3ijJMY+gP4zhLEpDEGWUpwvhUQgwnh/hURIT/3thjjmGWcBKViSCXeBWSiWdO+MGbPpm4watPfDIRxasLVXCANwuqwCDGK/V80akKGjnmmgLutmXFOvV80CUrAiRxNys7DCY5J4OzXdVCP7c4OcIvO5oJkSCHXZ5VDFkxwilP5HB2z6Cc0EGcF6plSTAqNxgMMEWcTTZYYYYhAqrpF0uh1zgYi1hVAAAAAElFTkSuQmCC');
}
.adb-footer-social-twitter:hover {
background-color: #55acee;
}
.adb-footer-social span {
display: none;
}
.adb-footer-related {
padding-top: 8px;
}
.adb-footer-related a {
color: #999;
font-size: 12px;
white-space: nowrap;
}
.adb-footer-related a:not(:last-child)::after {
content: '|';
cursor: default;
margin: 0 7px 0 10px;
}
.adb-footer-section {
margin: 48px auto;
max-width: 700px;
}
.adb-footer-title {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #3C4043;
margin-bottom: 24px;
}
.adb-footer-columns {
display: flex;
justify-content: space-between;
}
.adb-other-blogs-title img {
margin-right: 8px;
vertical-align: -12px;
}
.adb-footer-social-label {
display: flex !important;
align-items: center;
}
.adb-footer-column a,
.adb-footer-social-label,
#footer-subscribe .tab h2 {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
padding: .85em 0;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-btm a {
color: #000;
font-family: Android Euclid, Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.25px;
opacity: .7;
transition: opacity .1s;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-column a {
opacity: .7;
transition: opacity .1s;
}
.adb-footer-column a:hover {
opacity: 1;
}
.adb-footer-social-links {
margin: 0 0 20px;
}
#footer-subscribe .widget {
margin: 0;
}
#footer-subscribe .tab {
display: flex;
align-items: center;
}
#footer-subscribe .tab img {
height: 16px;
}
.adb-label-view-more-toggle {
cursor: pointer;
}
.adb-label-view-more-toggle::after {
content: '\00e5c5';
float: right;
font: 2em / .7 Material Icons;
opacity: .6;
}
.adb-label-view-more-toggle.active::after {
transform: rotate(180deg);
}
/** Desktop **/
@media (max-width: 900px) {
.col-right {
display: none;
}
.col-main {
margin-right: 0;
min-width: initial;
}
.cols-wrapper {
min-width: initial;
}
.adb-hero-inner {
background-image: none;
}
}
/** ADB header breakpoint **/
@media (max-width: 768px) {
.adb-header-links {
display: none;
}
.dropdown-nav {
display: none;
}
.adb-header {
padding: 12px;
text-align: center;
}
}
@media (max-width: 1196px) {
.breakpoint-hide {
display:none;
}
.more-dropdown {
height: 50px;
display: flex;
align-items: center;
}
}
@media (max-width: 915px) {
.adb-header {
height: 0;
margin: 0;
padding: 0;
display: none;
}
.adb-header-tags {
display:none;
}
.more-dropdown {
display:none;
}
.dropdown-nav {
display: none;
}
.adb-hero-summary,
.adb-hero-link,
.adb-socials-category {
display: none;
}
.adb-hero-title {
padding-left: 152px;
}
.adb-hero-logo {
height: 52px;
top: 12px;
left: 120px;
}
.adb-footer-section {
margin: 0 auto;
}
.adb-footer-btm {
margin: 0 24px 40px;
}
.adb-hero-area {
min-height: 76px;
}
.adb-burger-box {
display:inline;
position: absolute;
top: 17px;
margin-left: 24px;
font-size: 32px;
color: white;
}
.adb-hero-title a{
margin-left: 40px;
}
}
/** Tablet **/
@media (max-width: 712px) {
.header-outer, .cols-wrapper {
padding: 0 40px;
}
/* ADB */
.adb-hero-inner {
padding: 0 40px;
}
.adb-hero-title {
font-size: 16px;
padding-left: 132px;
}
.adb-hero-logo {
left: 100px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 36px;
}
.adb-other-blogs-list {
columns: auto;
}
.adb-other-blogs-title {
font-size: 20px;
}
.adb-other-blogs-title img {
height: auto;
vertical-align: -6px;
width: 32px;
}
.adb-footer-section {
margin: 0 24px;
}
.adb-footer-more {
padding-bottom: 75px;
}
.adb-footer-social {
float: none;
margin-bottom: 35px
}
.adb-footer-social .adb-footer-social-youtube {
margin-left: 0;
}
}
/** Small tablet **/
@media (max-width: 600px) {
.header-inner .google-logo {
top: 32px;
margin-top: 0;
}
.header-inner .google-logo img {
height: 56px;
width: auto;
/*
height: auto;
width: 188px;
*/
/* Override any optical adjustments at desktop size. */
top: 0 !important;
}
.header-left {
left: 0;
top: inherit;
bottom: 24px;
}
.adb-footer-columns {
display: block;
}
.adb-footer-column {
margin-bottom: 48px;
}
.adb-footer-column a {
opacity: 1;
}
.adb-footer-social-label {
padding: 0;
}
.adb-footer-column .widget a {
padding: 0;
}
.footer-newsletter {
margin-top: 16px;
}
.subscribe-btn {
width: 100%;
}
.adb-hero-search {
display: none;
}
.adb-search-box {
display:inline;
position: absolute;
top: 24px;
right: 24px;
font-size: 24px;
color: white;
}
}
/** Mobile **/
@media (max-width: 480px) {
.header-outer, .cols-wrapper {
padding: 0 16px;
}
.adb-hero-logo {
height: 28px;
top: 24px;
left: 76px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 16px;
}
.cols-wrapper {
margin-top: 0;
overflow-x: auto;
}
.post-header .publishdate, .post .post-content {
font-size: 16px;
}
.post .post-content {
line-height: 28px;
margin-bottom: 30px;
}
.post {
margin-top: 30px;
}
.byline-author {
display: block;
font-size: 12px;
line-height: 24px;
margin-top: 6px;
}
#main .post .title a {
font-weight: 500;
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
}
#main .post .post-header {
padding-bottom: 12px;
}
#main .post .post-header .published {
margin-bottom: -8px;
margin-top: 3px;
}
.post .read-more {
display: block;
margin-top: 14px;
}
.post .tr-caption {
font-size: 12px;
}
#main .post .title a {
font-size: 20px;
line-height: 30px;
}
.post-content iframe {
/* iframe won't keep aspect ratio when scaled down. */
max-height: 240px;
}
.post-content .separator img, .post-content .tr-caption-container img {
margin-left: -16px;
max-width: 100%;
}
.post-content table {
table-layout: fixed;
width: 100%;
}
/** List page tweaks. **/
.list-page .post-original {
display: none;
}
.list-page .post-summary {
display: block;
}
.list-page .comment-container {
display: none;
}
.list-page .label-footer {
display: none;
}
.list-page #main .post .post-footer {
border-bottom: 1px solid #eee;
margin: -16px 0 0 0;
padding: 0 0 20px 0;
}
.list-page .post .share {
display: none;
}
/** Detail page tweaks. **/
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 32px !important;
}
.detail-page .label-footer {
margin-bottom: 0;
}
.detail-page #main .post .post-footer {
padding-bottom: 0;
}
.detail-page #comments {
display: none;
}
/* ADB */
.adb-header-console {
display: none;
}
.adb-hero-inner {
padding: 0 16px;
}
.adb-hero-title {
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
font-weight: 500;
line-height: 30px;
padding-left: 80px;
}
}
/* Fixed-position sidebar for larger screens */
@media screen and (min-height: 700px) and (min-width: 1100px) {
.col-right .section {
max-height: calc(100vh - 197px);
overflow: auto;
}
.col-right.scroll-start {
left: 50%;
margin-left: 241px;
position: fixed;
top: 96px;
}
.col-right.scroll-end {
bottom: 485px;
position: absolute;
top: auto;
}
}
[data-about-pullquote], [data-is-preview], [data-about-syndication] {
display: none;
}
#imgFull {
display: block;
margin: 10px auto;
width: 90%;
border: 0;
padding: 0;
}
#imgHalf {
display: block;
margin: 10px auto;
width: 50%;
border: 0;
padding: 0;
}
#flexParent {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
#flexImg {
width: 90%;
margin: 0;
padding: 0;
border: 0;
}
#imgCaption {
text-align: center;
font-style: italic;
font-size: 85%;
margin: -5px 0 10px 0;
padding: 0;
border: 0;
}
#floatRight {
float: right;
width: 45%;
margin: 5px 0 5px 5px;
padding: 0;
border: 0;
}
#floatLeft {
float: left;
width: 45%;
margin: 5px 5px 5px 0;
padding: 0;
border: 0;
}
</style>
<style>
.loading {
visibility: visible;
}
</style>
</head><body>
<div class="adb-detail">
<div class="adb-detail__info">
</div>
<div class="adb-detail__title">
</div>
<hr>
<div class="adb-detail__content">
<div>
<meta content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWT4aMu5vc9bH7bcswv8GlJ5Df1hsGQlTgCIPHsU35fjjFHxS8Zj_yQBc9FZhfP4dtNO9uBAMSWoVm4n-VYpJjs-L1-rkOiAClpUJnUDxuh-6KGINCM07Z5AthyphenhyphenXRrQpEtoTFaBjEFs0c0R8QOfu1kKiJgHUkGCKr336joSXqZhMecvGejI9G-9Dgf7ZI/s1600/Social-Gemini-Android.png" name="twitter:image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWT4aMu5vc9bH7bcswv8GlJ5Df1hsGQlTgCIPHsU35fjjFHxS8Zj_yQBc9FZhfP4dtNO9uBAMSWoVm4n-VYpJjs-L1-rkOiAClpUJnUDxuh-6KGINCM07Z5AthyphenhyphenXRrQpEtoTFaBjEFs0c0R8QOfu1kKiJgHUkGCKr336joSXqZhMecvGejI9G-9Dgf7ZI/s1600/Social-Gemini-Android.png" style="display: none;">
<em>Diposting oleh Dave Burke, VP of Engineering</em>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpMUkef4JqgRnGpbAD9Rmf-mN2fG3kBcfymsPyj7bNZV3U-a5cIzsstZoIyKxcL1rbOmHg_TRsrzlzXdtgVegN8795ovwjF_Q_qFkt7WGg0dmVI4ggRx3b5V0ToHpFbR1EgJ0qiAHd27OacIN3FVfo18ksfcZjggzQZm4T86AGC9vFHjX60rSNFkGI2KA/s1600/Droid%20and%20phone%20Gemini%20-%20blog%20hero@2x.png"><img border="0" data-original-height="800" data-original-width="1058" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpMUkef4JqgRnGpbAD9Rmf-mN2fG3kBcfymsPyj7bNZV3U-a5cIzsstZoIyKxcL1rbOmHg_TRsrzlzXdtgVegN8795ovwjF_Q_qFkt7WGg0dmVI4ggRx3b5V0ToHpFbR1EgJ0qiAHd27OacIN3FVfo18ksfcZjggzQZm4T86AGC9vFHjX60rSNFkGI2KA/s1600/Droid%20and%20phone%20Gemini%20-%20blog%20hero@2x.png"></a>
<p>Minggu lalu kami meluncurkan model dasar kami yang paling mumpuni, <a href="https://blog.google/technology/ai/google-gemini-ai/" target="_blank">Gemini</a>. Gemini bersifat multimodal – bisa menerima input teks dan gambar. Kami memperkenalkan cara bagi developer Android untuk memanfaatkan model terkecil kami <a href="https://goo.gle/ai-android-blog" target="_blank">Gemini Nano</a>, di perangkat. Ini tersedia pada perangkat tertentu melalui <a href="http://d.android.com/ml/aicore" target="_blank">AICore</a>, layanan sistem yang menangani manajemen model, runtime, fitur keamanan, dan lainnya, sehingga memudahkan pekerjaan developer. Dan hari ini, kami memperkenalkan cara baru bagi developer Android untuk mengakses model <b>Gemini Pro</b> – yang berjalan di luar perangkat, di pusat data Google.</p>
<h3>Pengembangan aplikasi dengan Gemini Pro</h3>
<p>Gemini Pro bisa diakses melalui <a href="https://ai.google.dev/?utm_source=android&utm_medium=referral&utm_campaign=blog&utm_content=" target="_blank">Gemini API</a>, dan merupakan model terbaik kami untuk penskalaan pada berbagai tugas pemrosesan teks dan gambar. Untuk mempermudah integrasi Gemini Pro, Anda bisa menggunakan <a href="http://ai.google.dev/tutorials/android_quickstart/?utm_source=android&utm_medium=referral&utm_campaign=blog&utm_content=" target="_blank">Google AI SDK</a>, SDK klien untuk Android. SDK ini memungkinkan integrasi langsung dari aplikasi Android sehingga developer tidak perlu lagi membangun dan mengelola infrastruktur backend sendiri, mengurangi biaya pengembangan dan meningkatkan kecepatan.</p>
<p><a href="https://makersuite.google.com/app/prompts/new_freeform/?utm_source=android&utm_medium=referral&utm_campaign=blog&utm_content=" target="_blank">Google AI Studio</a> menyediakan cara yang efisien bagi developer untuk mengintegrasikan model Gemini Pro, membuat prompt, membuat kunci API, dan dengan mudah mengubah ide menjadi aplikasi AI. Setelah Anda mengembangkan prompt di Google AI Studio, Anda cukup mengklik tindakan “Get code” untuk membuat cuplikan kode Kotlin, dan mulai mengintegrasikan Gemini sekarang dengan menggunakan Google AI SDK untuk Android.</p>
<img><div style="text-align: center;"><img alt="Membuat kode Kotlin untuk Gemini API di Google AI Studio" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGPWhQo7q9ZYKdn9K2q8SxKEf45upjjZ985sHMk_adY9d5885-yJewNlRbXLJq4gin5q0g0ZFXFIT4yHlyLZDnT_pc1jF0rEo63nEvzZw4XJEQFOFo3bFdDfs43girlgujn7sbXx9SscLsARheFK2ZWYU3kT22HoXI2uNGLN6S8fMObuBfhxUWR6S2woM/s1600/image5.png" style="margins: auto; width: auto;"></div><imgcaption><center><em>Membuat kode Kotlin untuk Gemini API di Google AI Studio</em></center></imgcaption>
<p>Kami juga mempermudah developer menggunakan Gemini API secara langsung di <a href="https://developer.android.com/studio/preview" target="_blank">versi pratinjau terbaru Android Studio</a>. Kami memperkenalkan <a href="https://developer.android.com/studio/preview/gemini-template" target="_blank">template proyek baru</a> bagi developer untuk segera memulai Google AI SDK untuk Android. Anda akan mendapatkan manfaat dari pelengkapan kode dan pengecekan lint yang disempurnakan dari Android Studio, sehingga membantu dengan kunci API dan keamanan.</p>
<img><div style="text-align: center;"><img alt="Template Proyek baru untuk AI di Android Studio" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qb8s_gJxz7FdBXiYWO84Y2q0AoTcIVOVRW3jr4AIE44rPAwLItIgguRBebdlUY4bXbc8E2sd4C5zbjY8VVHChVdcqtW-BrSsQuu3wb4VIwZK65ENVR41nnRN6BXlnLkWJneaTF26WTl8tngdK5-LdWzLMi-6KY_4qUJ3VLGzTzIfosbl4L9TPLaYPbw/s1600/image3.png" style="margins: auto; width: auto;"></div><imgcaption><center><em>Template Proyek baru untuk AI di Android Studio</em></center></imgcaption>
<p>Untuk memanfaatkan template baru di Android Studio, buat proyek baru melalui <b>File > New > New Project</b> dan pilih template Gemini API starter. Template ini menyediakan proyek yang telah dikonfigurasi sebelumnya dengan kode yang dibutuhkan untuk menggunakan Gemini API. Setelah memilih nama dan lokasi proyek, Anda akan diminta <a href="https://makersuite.google.com/app/apikey/?utm_source=android&utm_medium=referral&utm_campaign=blog&utm_content=" target="_blank">membuat kunci API</a> di Google AI Studio, dan diminta untuk memasukkannya di Android Studio. Android Studio akan secara otomatis menyiapkan proyek untuk Anda dengan koneksi Gemini API, memudahkan alur kerja Anda.</p>
<p>Atau, Anda bisa mengimpor <a href="https://github.com/google/generative-ai-android/tree/main/generativeai-android-sample" target="_blank">contoh kode AI generatif</a> dan mengaturnya di Android Studio melalui <b>File > New > Import Sample</b>, dan menelusuri "Generative AI Sample".</p>
<img><div style="text-align: center;"><img alt="Aplikasi contoh AI generatif" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicoc7spUl6SToRG8IaCisdz8ZgagobEY7o9OW08CKuIGT4Oyo-dJ-2NMAONm2NfZMYUMExBOzt-pNJnM7kXY1Ot03JGseezAnkIWqOGeg0P1HGJMKbYjmFDl2w5PusedwZJcVZeMMASqw6_A74mOcYwaXGq6dfKi2t2mVGm9W2HfvBqjOJMnoZxgSuQpQ/s1600/image5.png" style="margins: auto; width: auto;"></div><imgcaption><center><em>Aplikasi contoh AI generatif</em></center></imgcaption>
<div style="text-align: left;"><br></div><p>Mulailah membangun fitur dan aplikasi Android berteknologi AI menggunakan <a href="http://ai.google.dev/tutorials/android_quickstart?utm_source=android&utm_medium=referral&utm_campaign=blog&utm_content=" target="_blank">Gemini Pro.</a></p><p></p><p></p>
</div>
<hr>
</div>
</div>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-26560751815910741792023-12-06T11:59:00.008+07:002024-02-22T12:04:16.233+07:00Fondasi Baru untuk AI di Android<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="https://android-developers.googleblog.com/2023/12/a-new-foundation-for-ai-on-android.html"/>
<meta name="original_url" content="https://android-developers.googleblog.com/2023/12/a-new-foundation-for-ai-on-android.html"/>
<style id="page-skin-1" type="text/css"><!--
body {
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
-webkit-font-smoothing: antialiased;
color: #202124
}
h1 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px
}
h2 {
font-size: 30px;
line-height: 40px
}
h2,
h3 {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500
}
h3 {
font-size: 24px;
line-height: 32px
}
h4 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 26px
}
h5 {
font-size: 16px;
line-height: 24px
}
h5,
h6 {
font-family: Roboto, sans-serif;
font-weight: 600
}
h6 {
font-size: 14px;
line-height: 22px
}
.display {
font-family: Roboto, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 67.2px
}
.hidden-text {
height: 1px;
overflow: hidden;
pointer-events: none;
position: absolute;
top: -10px;
width: 1px
}
img,
video {
border: 0;
height: auto;
max-width: 100%
}
body {
position: relative;
min-height: 100vh
}
body.no-scroll {
overflow: hidden
}
a {
color: #4184f3;
text-decoration: none
}
a:focus,
a:focus-visible {
outline-offset: -2px
}
.content-wrap {
padding-top: 200px;
max-width: 800px;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:915px) {
.content-wrap {
padding-top: 100px
}
}
.full-width {
width: 100%
}
.icon-link {
height: 42px;
width: 132px;
border-radius: 80px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: baseline;
-ms-flex-pack: center;
justify-content: baseline;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
background: transparent;
border: none;
color: black !important
}
.icon-link:hover {
background-color: hsla(213, 7%, 76%, .2)
}
.icon-link:focus {
background-color: hsla(213, 7%, 76%, .26)
}
.icon-link:active {
background-color: hsla(213, 7%, 76%, .32)
}
.adb-container {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto;
max-width: 1420px
}
@media only screen and (max-width:767px) {
.adb-container {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--large {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto
}
@media only screen and (max-width:767px) {
.adb-container--large {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--flex-horizontal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.section,
body {
margin: 0
}
.adb-card {
position: relative;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
margin: 40px 0;
padding: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: box-shadow .2s linear, opacity .2s linear;
transition: box-shadow .2s linear, opacity .2s linear, -webkit-box-shadow .2s linear
}
.divider {
border: none;
height: 1px;
color: #DADCE0;
background-color: #DADCE0;
margin: 0 20px;
}
.adb-card:first-child {
background-color: #d7effe;
border: none;
padding: 32px 24px 32px;
margin: 40px 20px 60px;
}
@media only screen and (max-width:850px) {
.adb-card {
max-height: unset;
padding: 0 20px
}
.adb-card:first-child {
margin-bottom: 40px;
}
}
@media only screen and (max-width:600px) {
.adb-card:first-child {
margin: 0 -20px 40px;
}
.adb-card {
border-radius: 0;
padding: 0;
}
.divider {
margin: 0;
}
.content-wrap {
padding-top: 54px;
}
}
.adb-card:focus-within,
.adb-card:hover {
-webkit-box-shadow: 0 0 36px rgba(0, 0, 0, .1);
box-shadow: 0 0 36px rgba(0, 0, 0, .1);
cursor: pointer
}
.adb-card__href {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.adb-card__image-wrapper {
overflow: hidden;
position: relative;
width: auto;
-webkit-flex-basis: 40%;
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.adb-card__content {
padding: 24px 0 0
}
.adb-card__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 600;
margin-bottom: 12px
}
.adb-card__info {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 24px
}
.adb-card__description {
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin-bottom: 48px
}
.adb-card:hover .adb-content__image-wrapper img,
.adb-card__href:focus~.adb-content__image-wrapper img {
-webkit-transform: scale(1.03);
transform: scale(1.03);
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease
}
.devsite-footer {
padding: 0 24px;
border-top: 1px solid #bdc1c6
}
.devsite-footer li {
display: block
}
.devsite-footer li a {
text-decoration: none;
font-size: 14px;
line-height: 16px;
color: #202124
}
.devsite-footer li a:focus,
.devsite-footer li a:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-linkboxes-list {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
padding: 24px 0;
border-bottom: 1px solid #bdc1c6
}
@media only screen and (max-width:767px) {
.devsite-footer-linkboxes-list {
grid-template-columns: 1fr;
padding-left: 0
}
}
.devsite-footer-linkbox {
display: block
}
.devsite-footer-linkbox-heading {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin: 0 0 4px
}
.devsite-footer-linkbox ul {
padding-left: 0
}
.devsite-footer-sites-list {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-utility nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 24px 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0
}
}
.devsite-footer-utility-button {
justify-self: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 20px;
margin-left: auto;
padding-left: 16px
}
.devsite-footer-utility-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 8px 0 0
}
.devsite-footer-utility-item:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.devsite-footer-utility-item:not(:first-child):before {
content: "|";
margin: 0 8px 0 0
}
}
.devsite-footer-sites {
border-bottom: 1px solid #bdc1c6;
padding: 24px 0 23px
}
.devsite-footer-sites-logo {
height: 32px;
margin-top: 5px;
width: 185px
}
.devsite-footer-sites-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0
}
.devsite-footer-sites-item {
margin: 0 0 0 40px
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-item {
margin: 0
}
}
.devsite-footer-sites-link {
display: block;
padding: 8px 0;
color: #202124
}
.devsite-footer-sites-link:focus,
.devsite-footer-sites-link:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-utility-link:focus {
text-decoration: underline
}
.devsite-footer-utility .devsite-footer-utility-button {
line-height: 20px;
font: 400 14px/16px Roboto, sans-serif
}
.devsite-footer-utility .devsite-footer-utility-button:before {
content: "";
margin: 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility .devsite-footer-utility-button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
margin: 18px 0 12px
}
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link {
border: 0;
background: #1a73e8;
color: #fff;
line-height: 36px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0 0 16px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px 0;
box-shadow: 0 1px 2px 0;
display: inline-block;
font: 500 14px/36px Roboto, sans-serif;
height: 36px;
letter-spacing: 0;
min-width: 36px;
padding: 0 24px;
text-align: center;
-webkit-transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s, -webkit-box-shadow .2s;
vertical-align: middle;
white-space: nowrap
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link:hover {
background: #1765cc
}
.adb-page__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px;
text-align: center;
color: #202124
}
.adb-detail hr {
border: 1px solid #dadce0;
margin: 40px 0
}
.adb-detail__title {
font-size: 40px;
font-weight: 600;
line-height: 48px
}
.adb-detail__info {
font-weight: 400;
font-size: 16px;
line-height: 24px
}
.adb-detail__content {
min-height: 200px
}
.icon-sidebar {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
top: 0;
left: -300px;
max-width: 220px;
gap: 8px
}
.icon-sidebar .share-text {
font-weight: 500;
margin-left: 4px
}
@media only screen and (max-width:1440px) {
.icon-sidebar {
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
left: 0;
margin-top: -20px;
margin-bottom: 40px;
}
.icon-sidebar .share-text {
display: none;
}
}
.copy-tooltip {
display: none;
position: fixed;
bottom: 16px;
left: 10px;
z-index: 100;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.copy-tooltip .copy-tooltiptext {
width: 200px;
background-color: #073042;
color: #fff;
text-align: center;
border-radius: 80px;
padding: 8px 16px;
}
.header__overlay {
height: 100vh;
left: 0;
position: fixed;
width: 100vw;
border: none;
background-color: rgba(0, 0, 0, .4);
-webkit-animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
opacity: 0;
top: 0;
z-index: -1;
display: none
}
.header__overlay.show {
display: block;
opacity: 1;
z-index: 800;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out
}
.social-icons__links {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
.social-icons__links path {
fill: #80868b
}
.social-icons__container-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin-right: 14px
}
@media only screen and (max-width:1000px) {
.social-icons__container-header {
display: none
}
}
.adb-blog-logo:focus,
.adb-blog-logo:hover {
opacity: .7;
text-decoration: none
}
.adb-blog-logo__image {
height: 32px;
margin-left: 0;
margin-top: 6px
}
@media only screen and (min-width:840px) {
.adb-blog-logo__image {
margin-left: 24px
}
}
.header {
position: fixed;
background: #fff;
z-index: 700;
top: 0;
width: 100%;
overflow: hidden;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
height: auto
}
.header .top-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 24px;
height: 50px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #e6e6e6
}
@media only screen and (max-width:839px) {
.header .top-row {
padding: 0 16px
}
}
.header .top-row__left,
.header .top-row__right {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 100%
}
.header .nav-row,
.header .top-row__left,
.header .top-row__right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.header .nav-row {
background: #fff;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.header .nav-items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 50px;
position: relative;
background-color: #fff
}
@media only screen and (max-width:839px) {
.header .nav-items {
display: none
}
}
.header .nav-items tab {
position: relative
}
.header .nav-items tab.active .header__nav-item:after,
.header .nav-items tab:hover .header__nav-item:after {
background: #1a73e8
}
.header .nav-items tab.active .header__nav-item,
.header .nav-items tab:focus-within a {
color: #202124
}
@media only screen and (max-width:839px) {
.header .header__cta,
.header .nav-items {
display: none
}
}
.header__search-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 6px 0 6px 24px;
overflow: hidden;
position: relative;
margin-right: 36px;
border-radius: 4px
}
@media only screen and (max-width:767px) {
.header__search-container:not(.mobile) {
display: none
}
}
.header__search-container.mobile {
margin: 0 0 20px
}
.header__search-container.mobile #searchform,
.header__search-container.mobile .searchbox {
width: 100%
}
.header__search-container .searchbox {
border-radius: 2px
}
.header__search-container .searchbox input {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
font-weight: 500;
color: #80868b;
border: 0;
margin: 0;
height: 20px;
outline: 0;
padding: 8px 8px 8px 40px;
width: 100%;
-webkit-transition: background .2s;
transition: background .2s
}
.header__search-container .searchbox input::-webkit-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input:-ms-input-placeholder,
.header__search-container .searchbox input::-ms-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input::placeholder {
color: #80868b
}
.header__search-container .searchbox input:hover {
background: #e8eaed
}
.header__search-container .material-icons {
color: #80868b;
left: 8px;
position: absolute;
top: 6px;
-webkit-transition: color .2s;
transition: color .2s
}
.header__cta {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #1a73e8 !important;
text-decoration: none
}
.header__cta.mobile {
padding: 18px 0
}
.header__cta:hover .cta-icon {
margin-left: 0;
margin-right: 12px
}
.header__cta .cta-icon {
-webkit-transition: margin-right .2s linear, margin-left .2s linear;
transition: margin-right .2s linear, margin-left .2s linear;
margin-left: 4px;
margin-right: 8px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.header__cta .cta-icon path {
fill: #1a73e8
}
.header__nav-item {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #80868b;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 18px;
height: 100%;
text-transform: none;
text-decoration: none
}
.header__nav-item:hover {
color: #202124
}
.header__nav-item.mobile {
font-weight: 500;
padding: 0
}
.header__nav-item:after {
bottom: 0;
border-radius: 3px 3px 0 0;
content: "";
display: block;
height: 3px;
left: 50%;
min-width: 20px;
position: absolute;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(100% - 24px)
}
.header__hamburger {
border: 0;
background: none;
outline: none;
padding: 0;
margin: 1px 8px 0 -4px;
padding: 8px;
color: rgba(0, 0, 0, .65);
cursor: pointer
}
@media only screen and (min-width:840px) {
.header__hamburger {
display: none
}
}
.header__side-menu {
background-color: #fff;
bottom: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
z-index: 900
}
.header__side-menu.is-open {
-webkit-transform: translateX(0);
transform: translateX(0);
width: 80%
}
.header__side-menu.is-open,
.header__side-menu__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%
}
.header__side-menu__content {
padding: 18px 16px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.header__side-menu__content .spacer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.header__side-menu__title {
font-family: Roboto, sans-serif;
font-size: 20px;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px
}
.header__side-menu__items {
list-style: none
}
.header__side-menu__items li {
padding: 12px 0
}
.header__side-menu__items tab {
position: relative
}
.header__side-menu__items tab.active .header__nav-item,
.header__side-menu__items tab:focus-within a {
color: #202124
}
.header__side-menu__bottom {
border-top: 1px solid #e6e6e6
}
.header__side-menu__logo-container {
background: #fff;
height: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 4px 16px;
border-bottom: 1px solid #e6e6e6
}
#nav .widget {
margin: 0
}
.featured__wrapper {
width: 100%;
border: 0;
background-color: #e8f0fe;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 80px 0
}
@media only screen and (max-width:767px) {
.featured__wrapper {
padding: 0
}
}
.featured__inner {
max-width: 1080px;
width: calc(100% - 24px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
padding: 48px
}
@media only screen and (min-width:768px) {
.featured__inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
padding: 12px 80px
}
}
.featured__href {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.featured__image {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
max-width: 100%;
}
.featured__content {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-top: 24px;
width: 100%
}
.featured__title {
font-size: 32px;
line-height: 44.8px;
font-weight: 500;
font-family: Android Euclid, Roboto, sans-serif;
margin-bottom: 15px
}
.featured__info {
font-family: Roboto Mono, monospace;
font-weight: 400;
font-size: 12px;
line-height: 160%;
margin-bottom: 24px
}
.featured__description {
margin-bottom: 48px
}
.preview.featured__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f1f3f4;
padding: 64px 0 120px
}
.preview.featured__wrapper h1 {
margin: 0 0 64px
}
.blog-label-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px
}
.blog-label-container .blog-label {
text-decoration: none;
z-index: 3
}
.blog-label-container .blog-label span {
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
background-color: #F1F3F4;
border-radius: 100px;
padding: 4px 16px;
color: #3c4043
}
.adb-card:first-child .blog-label span {
background-color: #fff;
}
.blog-label-container .blog-label span:focus,
.blog-label-container .blog-label span:hover {
background-color: #D7EFFE
}
.adb-card:first-child .blog-label span:focus,
.adb-card:first-child .blog-label span:hover {
background-color: #F1F3F4
}
.blog-label-container .blog-label span:focus-visible {
outline-offset: 0
}
#pagination-container {
display: none
}
.pagination {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.pagination .page-button {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: black;
background-color: #3DDC84;
padding: 16px 24px;
border-radius: 80px;
text-decoration: none
}
.pagination .page-button:focus,
.pagination .page-button:hover {
background-color: #3DDC8460;
}
.pagination .page-button.disabled {
color: #80868b;
background-color: #f1f3f4
}
--></style>
<style id="template-skin-1" type="text/css"><!--
--></style>
<style>
/** Blogger default styles **/
html, .Label h2, #sidebar .rss a, .BlogArchive h2, .FollowByEmail h2.title, .widget .post h2 {
font-family: Roboto, sans-serif;
}
.plusfollowers h2.title, .post h2.title, .widget h2.title {
font-family: Roboto, sans-serif;
}
pre, .post-content pre.prettyprint {
background-color: #f7f7f7;
border: 1px solid #ddd;
margin: 0 0 1em 0;
padding: 1em;
overflow: auto;
}
pre, code {
font-size: 9pt;
line-height: 125%;
font-family: monospace;
}
pre, code {
color: #060;
font: 13px/18px Consolas, 'Liberation Mono', Menlo, Monaco, Courier, monospace;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
/* Styles for https://github.com/google/code-prettify */
.com { color: #060; }
.kwd { color: #008; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.fb-custom img, .twitter-custom img, .gplus-share img, .email-custom img {
cursor: pointer;
opacity: 0.54;
}
.twitter-custom, .gplus-share, .fb-custom {
margin-right: 12px;
}
/** Blogger custom theme **/
.adb-header,
.searchBox input {
box-sizing: border-box;
}
.popout-nav {
background-color: white;
width: 280px;
height: 100%;
position: fixed;
z-index: 6;
left: -280px;
transition: left 0.2s;
}
.popout-search {
background-color: white;
width: 280px;
position: fixed;
z-index: 6;
right: -280px;
transition: right 0.2s;
top: 0;
}
.popout-search .widget {
margin: 0;
}
.popout-search #BlogSearch2_form .popout-options {
padding-right: 24px;
width: calc(100% - 48px);
}
.dropdown-nav {
display: none;
background-color: white;
width: 104px;
position: fixed;
padding: 4px 0px 3px 0px;
z-index: 4;
left: 352px;
top: 176px;
transition: top 0.2s;
box-shadow: 0 0px 2px 0 rgba(60,64,67,.3), 0 0px 6px 2px rgba(60,64,67,.15), inset 0 0px 6px -4px rgba(154,160,166,.5);
}
.dropdown-options {
align-items: center;
display: flex;
flex-wrap: wrap;
width: 94px;
height: 48px;
padding-left: 10px;
}
.dropdown-options:hover {
background-color: #f7f9fa;
}
.dropdown-options span {
color: #80868b;
}
.popout-options {
padding-right: 8px;
padding-left: 24px;
padding-top: 16px;
padding-bottom: 15px;
display: inline-block;
width: calc(100% - 32px);
border-top: 1px solid #ddd;
font-size: 13px;
font-weight: 700;
color: #80868b !important;
}
.popout-options:last-of-type {
border-bottom: 1px solid #ddd;
}
.popout-options:first-of-type {
border-top: 0;
}
#close-popout {
padding: 12px 12px 11px 20px;
}
#close-search-popout {
padding: 12px 20px 11px 12px;
text-align: right;
}
.popout-search-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
transition: opacity 0.2s;
}
.popout-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
z-index: 5;
transition: opacity 0.2s;
}
html {
background-color: #fff;
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
width: 100%;
position: absolute;
padding: 0;
/* This ensures that the scroll bar is always present, which is needed */
/* because render happens after page load; otherwise the header */
/* would 'bounce' in-between states. */
min-height: 150%;
}
h2 {
font-size: 130%;
}
h1, h2, h3, h4, h5 {
line-height: 1.5em;
margin-bottom: 1em;
}
html, h4, h5, h6 {
font-size: 14px;
}
a, a:visited {
color: #039be5;
text-decoration: none;
}
pre code {
display: block;
}
.cols-wrapper {
margin-top: 56px;
}
.header-outer, .cols-wrapper {
padding: 0 60px;
}
html, .header-inner a {
color: #212121;
color: rgba(0, 0, 0, .87);
}
/** Archive widget. **/
.BlogArchive {
font-size: 13px;
font-weight: normal;
}
.BlogArchive .widget- {
display: none;
}
.BlogArchive h2, .Label h2 {
color: #039be5;
text-decoration: none;
}
/* Specificity needed here to override widget CSS defaults. */
/* Months */
.Label {
font-size: 13px;
font-weight: normal;
}
.sidebar-icon {
display: inline-block;
width: auto;
vertical-align: middle;
height: 24px;
margin-right: 24px;
}
.sidebar-social-links {
align-items: center;
}
.sidebar-social-links .android-logo,
.android-logo {
height: 48px;
}
.sidebar-social-links a:last-child img {
margin-right: 0;
}
.Label .widget- {
display: none;
}
.searchBox input {
border: 1px solid #eee;
color: #212121;
color: rgba(0, 0, 0, .87);
font-size: 14px;
padding: 8px 8px 8px 40px;
width: 100%;
font-family: Android Euclid, Roboto, sans-serif;
background: url('https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png') 8px center no-repeat;
}
.searchBox ::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .54);
}
.section {
margin: 0;
padding: 0;
}
#sidebar-top {
border: 1px solid #eee;
}
#sidebar-top > div {
margin: 16px 0;
}
/*main post*/
.post {
margin-bottom: 30px;
}
#main .post .title {
margin: 0;
}
#main .post .title a {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: normal;
font-size: 24px;
}
.message, #main .post .post-header {
margin: 0;
padding: 0;
}
#main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption {
color: #444;
font-weight: 500;
}
#main .post .post-header .published {
font-size: 11px;
font-weight: bold;
}
.post-header .publishdate {
font-size: 16px;
font-weight: normal;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#main .post .post-footer {
font-size: 12px;
padding-bottom: 21px;
}
.label-footer {
margin-bottom: 12px;
margin-top: 12px;
}
#main .post .post-header .published {
margin-bottom: 16px;
}
.post .post- {
color: #545454;
color: rgba(0, 0, 0, .67);
font-size: 16px;
margin: 16px 0 36px 0;
line-height: 24px;
word-wrap: break-word;
}
.post-summary {
display: none;
}
/* Override all post images/videos to left align. */
@media (max-width: 712px) {
.post- img {
max-width: 100%;
height: auto;
width: auto;
}
}
.post- .tr-caption-container img {
margin-bottom: 12px;
}
.post- iframe, .post- embed {
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
}
.post- .carousel-container {
margin-bottom: 48px;
}
#main .post- b {
font-weight: 500;
}
/* These are the main paragraph spacing tweaks. */
#main .post- br {
: '';
display: block;
padding: 4px;
}
.post-content .space {
display: block;
height: 8px;
}
.post-content iframe+.space, .post-content iframe+br {
padding: 0 !important;
}
#main .post .jump-link {
margin-bottom: 10px;
}
.post-content img, .post-content iframe {
margin: 30px 0 20px 0;
}
.post-content > img:first-child, .post-content > iframe:first-child {
margin-top: 0;
}
.col-right .section {
padding: 0 16px;
}
#aside {
background: #fff;
border: 1px solid #eee;
border-top: 0;
z-index: 2;
}
#aside .widget {
margin: 0;
}
#aside .widget h2, #ArchiveList .toggle+a.post-count-link {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: 400 !important;
margin: 0;
}
#ArchiveList .toggle {
float: right;
}
#ArchiveList .toggle .material-icons {
padding-top: 4px;
}
#sidebar-top,
#sidebar {
background: #fff;
}
#sidebar .tab {
cursor: pointer;
}
#sidebar .tab .arrow {
display: inline-block;
float: right;
}
#sidebar .tab .icon {
display: inline-block;
vertical-align: top;
height: 24px;
width: 24px;
margin-right: 13px;
margin-left: -1px;
margin-top: 1px;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget-content > :first-child {
padding-top: 8px;
}
#sidebar .active .tab .arrow {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#sidebar .arrow {
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget h2 {
font-size: 14px;
line-height: 24px;
display: inline-block;
}
#sidebar .widget .BlogArchive {
padding-bottom: 8px;
}
#sidebar .widget {
border-bottom: 1px solid #eee;
box-shadow: 0px 1px 0 white;
margin-bottom: 0;
padding: 14px 0;
min-height: 20px;
}
#sidebar .widget:last-child {
border-bottom: none;
box-shadow: none;
margin-bottom: 0;
}
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style: none;
padding: 0;
}
#sidebar ul li a {
line-height: 32px;
}
#sidebar ul ul ul li a {
line-height: 24px;
}
#sidebar .archive {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC');
height: 24px;
line-height: 24px;
padding-left: 30px;
}
#sidebar .labels {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC');
height: 20px;
line-height: 20px;
padding-left: 30px;
}
#sidebar .rss a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII=');
}
#sidebar .subscription a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC');
}
#sidebar-bottom {
background: #f5f5f5;
border-top: 1px solid #eee;
}
#sidebar-bottom .widget {
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
text-align: center;
}
#sidebar-bottom > div:last-child {
border-bottom: 0;
}
#sidebar-bottom .text {
line-height: 20px;
}
/* Home, forward, and backward pagination. */
.blog-pager {
padding-top: 10px;
margin-top: 15px;
text-align: right !important;
}
#blog-pager {
padding: 40px 0 0;
}
#blog-pager a {
display: inline-block;
}
.blog-pager i.disabled {
opacity: 0.2 !important;
}
.blog-pager i {
color: black;
margin-left: 16px;
opacity: 0.54;
}
.blog-pager i:hover, .blog-pager i:active {
opacity: 0.87;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
.gplus-profile {
background-color: #fafafa;
border: 1px solid #eee;
overflow: hidden;
width: 212px;
}
.gplus-profile-inner {
margin-left: -1px;
margin-top: -1px;
}
/* Sidebar follow buttons. */
.followgooglewrapper {
padding: 12px 0 0 0;
}
.loading {
visibility: hidden;
}
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 40px !important;
}
/* ADB */
.adb-hero-area {
min-height: 104px;
background-color: #073042;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
z-index: 5;
position: fixed;
width: 100%;
}
.adb-hero-logo {
height: 80px;
position: absolute;
top: 12px;
left: 16px;
}
.adb-footer-btm {
display: flex;
margin: 0 24px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 40px;
}
.subscribe-btn {
color: black;
background-color: #3DDC84;
border-radius: 100px;
font: 500 16px/24px Android Euclid,Roboto,sans-serif;
padding: 12px 24px;
border: 0;
}
.adb-footer-info {
align-items: center;
display: flex;
padding: 0;
margin: 9px 0 0 -8px;
font-size: 13px;
}
.footer-list {
list-style: none;
padding: 0 8px;
}
.subscribe-info {
list-style: none;
padding: 0 8px 0 0;
font-size: 13px;
color: black;
}
.footer-newsletter {
display: flex;
align-items: center;
}
.adb-header-inner {
display: flex;
align-items: center;
}
.adb-header {
background-color: white;
color: #fff;
height: 48px;
left: 0;
overflow: hidden;
padding: 36px 24px;
right: 0;
top: 104px;
z-index: 4;
display: flex;
align-items: center;
position: fixed;
border-bottom: solid 1px #DADCE0;
}
.adb-shadow {
margin-top: 48px;
height: 1px;
width: 100%;
position: fixed;
background: white;
z-index: 2;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
}
.adb-logo-box {
display:inline;
}
.adb-burger-box {
display: none;
margin: 0 16px 0 0;
}
.adb-search-box {
display: none;
margin: 0 0 0 16px;
}
.adb-htag-box {
display: flex;
align-items: center;
}
.adb-header-tags {
padding: 0 24px 0 0;
}
.adb-header-tags ~ .atb-header-tags {
padding: 0 24px;
}
.adb-header-tags a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #5F6368;
}
.adb-header-tags a:hover {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #073042;
}
.more-dropdown {
display: none;
}
.dropdown-icon {
transition: all 0.3s;
}
.adb-header-logo {
display: inline-block;
vertical-align: -11px;
width: 134px;
height: 32px;
}
.adb-header-title {
color: #fff;
display: inline-block;
font-size: 20px;
font-weight: normal;
}
.adb-header-links {
border-left: 1px solid rgba(0, 0, 0, .1);
display: block;
left: 250px;
list-style: none;
margin: 0;
padding: 12px 0 12px 18px;
position: absolute;
top: 0;
}
.adb-header-link-item {
display: inline-block;
}
.adb-header-link, .adb-header-link:visited {
color: #fff;
display: inline-block;
font-weight: 500;
opacity: .7;
padding: 12px 9px;
text-transform: uppercase;
vertical-align: 2px;
}
.adb-header-link:hover, .adb-header-link:focus {
color: #fff;
opacity: 1;
}
.adb-header-console, .adb-header-console:visited {
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
color: #fff;
float: right;
font-size: 14px;
font-weight: 500;
line-height: 28px;
padding: 4px 10px;
position: relative;
text-transform: uppercase;
transition: box-shadow .2s;
z-index: 60;
}
.adb-header-console:hover {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
color: #fff;
}
.adb-header-console:focus {
background-color: rgba(63, 81, 181, .1);
color: #fff;
}
.adb-header-console-image {
vertical-align: -5px;
}
.adb-hero {
background-color: #dcedc8;
margin-top: 64px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
color: #414141;
display: inline-block;
font-weight: 500;
margin: 25px 25px 0;
}
.adb-hero-inner {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAc4AAADZCAMAAACenCAVAAAAvVBMVEXc7cjY68PT6bvR57fQ57bY6sPZ68TU6bvR6LfP5rTQ57XR57jW6r7b7cfa7MbS6LnS6Lrb7cbQ6Lfb7MbX6r/Z68PY6sLV6b7U6b3U6r3T6LnX68Da7MXP57Tb7Mfc7cfW6b/P57XS57nY68LY68HU6L3W6r/W6b7T6brX6sDV6rzQ57fa7MTV6b3T6Lra68TR57bX68HW6sDS57jU6bzO5rTP5rXZ7MXR6LbZ68XX6sHT6LvV6bzS6LjZ7MILrTuqAAAIyklEQVR4AezXhXEkUQwE0B6+Xhg8MzND/smZ4UsLBSb9Kr0UhI1vl6RZnqUFlnBl9Y+j8WQK4+qGr9oOi7iKr0YFTOt6vhsPmM81/FDAspafUszl/vNTXsOuFYZWMYfrRgyswa51hjLM4TYYGsOuTQpbgNO2dyjAroxCvgunpZT2YFZDaQKnlFRg1z6lgxpOOqS0CbtqKutwwhGVYxh2QqWGC/WUMlhWH1BK4QKnVFZh2hmVEh/cXk7pHLbt5pQafHCT6Jr9gsoR3riayiXMyyhd4Y27jDDHJVQu8MJdU7lBBBpKoz08c7eU8gERuKNyhiduhcopolBRqeGAMaV7xKE7eGzvThQTVZooAJdC1AM2qGg0BhdCrpnciVE0i9dZ3v+t/n2ZMBtJGpsu6nuCrNJddar4/gAnMmuP/GPk3JFwrL2QKw3FD26GyGmQNXbIGVHNKdfmYraDl/ZUcxO8NNtIW888bafDC7tP5R2qtQfL724N5AypxjbIGdseWHMV1VfP+rrnZvbTerMEhHb2Py4eA7KX9AwD5LSppi5ZdPTHEhv6cd5mSjZaeMW/Dc66TEpkO+Q0qIbUE5es6ke85FMN/YGXZs9yQLdXYGVASGJDBaMZXsQouzau/fzfitNsKvpUL1O8dFBksb+Q80C1coaco7RtLeYzO9tHCV7qUY0ckXPGribSoNpQB3Z1MbWtby1hiZwWw35CRjUReRx7Sg5ecqgmJiyHOxrIWVEtPDPNY/TMx4bmczq5T3jpSRELm1NWodVmlGY364tP4ZXvdw5u8jjDf8yQJJ7j+2HYfBh3d+l5HFB5RmyzjM3yh8iDUbb6M9y7j3idgxM+3BzTuPzyXmdOTARJaUc8tUmX7ekB7+aF7dV1a0G6pIx3CkxKmBBUreMfvS0086aTnZZf6kfG53mlN/0UnS2bW5Socz9OA737eM6JkZWu4uUiXfVcnIT34eZM6Yq9hcRKR0OpL7i9cHBi/udjrCOUuiFWsnc2/oKsfYAhXvM2lsj4S/7b2/L9y4cODDu0j8HbBzqSPvutOksqpDH+gorw1+dvHLcaEzv3r4+0BdmnBJXi9bL+G6qaEbFz98rF4sEwnKGKrrrxK3sOuzoMlM9i+ql47KPC/HX8inTxljgKUHBYI1g6qDx/HBct76XETfHF4v3hHpZwVgH9APc0TfFSyTwLZ7DJ9FYxmZvTv1h89DmBdbyHEX0rcuuTRB38fNuQ2vmw1GAYMSjv6ZwQbD0ksFlz9LPW7gMxNv3RBVtlDqz3cbWo32rmEXLGFExcsJBMnilGzk29pleT5gx8fLiq2XzyM2rllpiboEYGxF2UoD6+EntL1Ma+TkOP/LVqNJLM3yeqgayDmnjqKmIu3aNGDhlx1pqiZvyUuAqaqKGwRRwt1gnqqR0QO5ce6ms5J1ZGIWqtkxIf0QNqb7ohJjIXgFjPiYF4j38R2wbZTk1m+C/xqU9WSzv4hkgyVkcg0QvIUg0XEHleRjaK/gQb8g/a2EL8hHcky6zxC+JTQBa5c/BL4nBO1lgl+B2xJjv0QxQgnA1ZoOGhGHFNldedoShxMadKU/d4BeEEVGF3Ll5FJF+psm7Bh5xwHyDeoKeogvp7iDfpbKhyWgeIN/JSqpjbBOLtlqwq7qJNFdKGeKdQUUUEIcS7Df6iSngeQAPhtqgCWi60EElKxjUSsCFriK5nYEMuLDtoJSZk0BiaiaYsZGPlXnEqHoipIhOaKIW4WnD63xThgtP/pthHdFqfUCIRRvK/KZ+3VX1uiulc7puc3EstSOpD9d7+LYGTFfiQenyKkxE3VLLGI9iQkcH4CackzqlEwRYnJbwNlUb5ODHhBVSWHk5O+JFMLkh5qFYxLxnoPZ9BmJGRdrELNuTddNEAwhg34NSvFnvSqgth1ANpNEIZkhkYSg4dt9rHocCFXvvxWUD/ELR2TQ98hMOWon+Ks7YLrZI70iWETu6yT99Qt3uw4A4j+lY6hU4dVcloUFdR3tkA1kt29J1zHxr1SIsGNAoDnvGjMCj/CLmr3INzQj9x5sFm41Ns933c0PtNoc+O0bJNA9+Xryp14+zSL9x5PH6beS2vQrfP0exkQcMG08BdCn1SepeFc8KPijWs5MxPdzN4CipzR2nQb8wdnu0O5UKbkN7h/LQZ/a9Ms+pZNYp9kQt9Yvo9H3Yx8H15QSXm/qZUQMY0ybOCPtNKlIMuqYAogW1SKkBBoxW9SXSARoqKCGGbBRVxBY0C85V3h2mb/MrASGxIb3BnYlaxwXRmLwUMFxMc6NSlQvpM6nt5MXTylOl00JGKYTqxp6DVBb1SkECrlOmvs0HFGA7efjA0dwrLfKVC5tDLp1dpGHrGKFjm0tCZYEWvMTA0NrOBZVZUSMtoLn4I3T5RISnTZTGXJrea9BPotmU6QrqlQi6gXWx05V5MRTiwTaD/4aW5FN8y9pCJYZ2usSPBNRUzNfapNIZ1fGM7KQdUSMNYJyl6Ajh2yAKTBUYHpfCZruJ0jB3wCpVur1GSIf3G8yOPlG1ePDN46d2iJEmLR+86L4lNBRQTZXK/6UAxunMWDxC3Da6omXsoz5XiOa8/NfV9JYHRXVBXiudG8r0y9Jmzpl87oFSDFv3Qog2rDTb0Q6qJckX0K7coWTKkHxh1YLmkSz/Q6JjNKnVQOj+lnM0nMPDxmnLuPhjej5rhFLbjmP4nOF6BCXfdov8JLkPj+xcdnMjh03p3nWXLBwesuB/+GGbHXbc5wIkkSt7CwEmXU1lGbPX3OYVBt5y2Yoov9EN/QVhpJK9xZL/7P4Kw1LO8iIH7qxx8CEu5zG8pcldpQ1hrSjnBI4S9YnrpBsJiEzkIcfIkByFWUqkIcdKjb7kQdos49a3Fjv7vE4TlfPoflYAPuXoeIaw3pv+6h7CeQ/8RPYIP6XpegwGxknMtwxcqK7AgAqkhcDKkf3oAI9LE9sCDWGhf4S8M70peggnxQERTMCFcIjUDF+KOUrAhhvQANkT4dwEsPvJYWz4QAAAAAElFTkSuQmCC');
background-position: bottom right 70px;
background-repeat: no-repeat;
background-size: auto 100%;
margin: 0 auto;
max-width: 980px;
padding: 0 60px;
position: relative;
}
.adb-hero-back-icon {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.adb-hero-title {
font-size: 22px;
line-height: 28px;
padding: 24px 24px 0px 112px;
}
.adb-hero-title a {
color: #FFFFFF;
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500;
}
.adb-hero-summary {
font-size: 16px;
line-height: 24px;
padding: 8px 24px 8px 112px;
}
.adb-hero-summary a {
color: rgba(255, 255, 255, 0.9);
}
.adb-hero-description {
color: #6f7172;
font-size: 16px;
margin: 0;
max-width: 440px;
padding-bottom: 32px;
}
.adb-hero-search {
position: absolute;
top: 19.35%;
right: 1.94%;
}
.adb-hero-search .searchBox input {
border: 1px solid #80868B;
border-radius: 4px;
color: white;
}
.adb-hero-search .searchBox input::placeholder {
color: #F1F3F4;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
padding-left: 12px;
}
.adb-hero-link {
position: absolute;
right: 1.67%;
top: 64.52%;
}
.adb-hero-link a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #3DDC84;
letter-spacing: 1.4px;
}
.adb-hero-arrow {
display: inline-flex;
font-size: 24px;
vertical-align: middle;
}
.adb-socials-box {
display: flex;
position: absolute;
right: 1.67%;
}
.adb-socials-category,
.adb-socials-divider {
display: flex;
align-items: center;
}
.adb-socials-divider {
color: #DADCE0;
font-size: 40px;
font-weight: 100;
margin: 0 20px;
}
.adb-socials-category img,
.adb-footer-social-links img {
height: 24px;
}
.adb-footer-social-links-img {
margin-right: 20px;
}
.adb-hero-subscribe, .adb-hero-subscribe:visited {
background-color: #90c653;
color: #fff;
display: inline-block;
border-radius: 3px;
margin: 25px 0 60px;
padding: 13px 32px;
text-transform: uppercase;
}
.adb-hero-subscribe:hover, .adb-hero-subscribe:focus {
background-color: #333;
}
.adb-footer {
margin: 32px auto 64px;
}
.adb-footer-more {
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #f0f0f0;
padding: 30px 0;
}
.adb-footer-more a {
color: #000;
display: inline-block;
font-size: 20px;
font-weight: 300;
margin-right: 16px;
}
.adb-footer-social {
float: right;
margin-top: -62px;
}
.adb-footer-social a {
background-color: #ccc;
background-position: center;
background-repeat: no-repeat;
background-size: auto 16px;
border-radius: 50%;
display: inline-block;
height: 36px;
margin-left: 16px;
transition: background-color .1s;
width: 36px;
}
.adb-footer-social-youtube {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAQAAAAxWje/AAABLUlEQVQ4y6WUvUoDYRBFr42gCdhK8AV8BwsVC0FQfIQUgr5DIKJoGy1CfAaDq1hIGn8K2xDSaBc1wUJJEYmbkDXssdi1Mrvfst9tZ+bAzNwZSZLEAmvsUKTCBQ80eaWLyxiAMS5dXmhyT5UyBfIsM68/McM1aXRDJgCUSKsTSWQZpAa4ZMUmNtoSRxGhbd4TAI7F1eSIxBwVfAPgUtSjAJLEEk+xgLroxAEkpikyigS0RS8eIEks8hgB6ImhGSAxxS5fE9JGwksCkCRyOP/SfPFjC0jawl5UC9ZDbBvXuB+zxjezkZ5NRnJirHxmtLIjDq2O6UBsWJ3zut1D+WZWEqepAaVg0hlqqcpr4VMNbbpKngJlqtzRoMUnfTx8fDz6fNCiwS3n4VtfIRdU/gLTrSb7DGWLcQAAAABJRU5ErkJggg');
}
.adb-footer-social-youtube:hover {
background-color: #f44336;
}
.adb-footer-social-gplus {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAUCAQAAACpWpz6AAABJUlEQVQ4EZXBTUoCYQDH4X9hTS3Cja0Kyb2X6BCJoLlr1aKwK1QHCMMzWLiqTcuWXaAWQWIlU1DQh4QJ+Wt4X95x0hGn55FCeGzSpMUXXW45ocSC/oMiHUZ1KCgZZqkzyZaSoM7QgCd8BlgXLGo6ijgv7JJRgAxV3jjDUwwMOXh0sK5ZUQRZ5hQLQw4VrA/WlBCGHJpY+0oMQw5trLxCjNtTgFiij5VSiHFHChBL9LFSCjGurgCxRBsrrxA+Pj4+Pl2sQ0VgyKGJdaAYNLAqisCQQxnrk5xGkKOHlVUEhhw8HrFuWFUEaa6wLvUHhoYo4LxSZVkBlihzh7OuaagR9YzPD0PHmo5ZakzSIKVk2OCBUe/sMKPkmKfEKS16fHPPOduklcAvR50zMVwhTI4AAAAASUVORK5CYII=');
}
.adb-footer-social-gplus:hover {
background-color: #f44336;
}
.adb-footer-social-twitter {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAQAAAB0gUQ+AAABI0lEQVQ4EY3BQShDAQDH4f+zTSyJuLgoLlwclYOTHCwHu9ouiLRScpUmNwduDkpCSTs4LAeJhINoOTo4ctHkskyJtf20vWbe3tvb+z7JFUGibLHPMj0qoYEWSYzRKkdMkKbsm3m6WSRFuyQeuKNNNoTJU61ABL8kssAjvbKgiTR2V+ywJol3ijJMY+gP4zhLEpDEGWUpwvhUQgwnh/hURIT/3thjjmGWcBKViSCXeBWSiWdO+MGbPpm4watPfDIRxasLVXCANwuqwCDGK/V80akKGjnmmgLutmXFOvV80CUrAiRxNys7DCY5J4OzXdVCP7c4OcIvO5oJkSCHXZ5VDFkxwilP5HB2z6Cc0EGcF6plSTAqNxgMMEWcTTZYYYYhAqrpF0uh1zgYi1hVAAAAAElFTkSuQmCC');
}
.adb-footer-social-twitter:hover {
background-color: #55acee;
}
.adb-footer-social span {
display: none;
}
.adb-footer-related {
padding-top: 8px;
}
.adb-footer-related a {
color: #999;
font-size: 12px;
white-space: nowrap;
}
.adb-footer-related a:not(:last-child)::after {
content: '|';
cursor: default;
margin: 0 7px 0 10px;
}
.adb-footer-section {
margin: 48px auto;
max-width: 700px;
}
.adb-footer-title {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #3C4043;
margin-bottom: 24px;
}
.adb-footer-columns {
display: flex;
justify-content: space-between;
}
.adb-other-blogs-title img {
margin-right: 8px;
vertical-align: -12px;
}
.adb-footer-social-label {
display: flex !important;
align-items: center;
}
.adb-footer-column a,
.adb-footer-social-label,
#footer-subscribe .tab h2 {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
padding: .85em 0;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-btm a {
color: #000;
font-family: Android Euclid, Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.25px;
opacity: .7;
transition: opacity .1s;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-column a {
opacity: .7;
transition: opacity .1s;
}
.adb-footer-column a:hover {
opacity: 1;
}
.adb-footer-social-links {
margin: 0 0 20px;
}
#footer-subscribe .widget {
margin: 0;
}
#footer-subscribe .tab {
display: flex;
align-items: center;
}
#footer-subscribe .tab img {
height: 16px;
}
.adb-label-view-more-toggle {
cursor: pointer;
}
.adb-label-view-more-toggle::after {
content: '\00e5c5';
float: right;
font: 2em / .7 Material Icons;
opacity: .6;
}
.adb-label-view-more-toggle.active::after {
transform: rotate(180deg);
}
/** Desktop **/
@media (max-width: 900px) {
.col-right {
display: none;
}
.col-main {
margin-right: 0;
min-width: initial;
}
.cols-wrapper {
min-width: initial;
}
.adb-hero-inner {
background-image: none;
}
}
/** ADB header breakpoint **/
@media (max-width: 768px) {
.adb-header-links {
display: none;
}
.dropdown-nav {
display: none;
}
.adb-header {
padding: 12px;
text-align: center;
}
}
@media (max-width: 1196px) {
.breakpoint-hide {
display:none;
}
.more-dropdown {
height: 50px;
display: flex;
align-items: center;
}
}
@media (max-width: 915px) {
.adb-header {
height: 0;
margin: 0;
padding: 0;
display: none;
}
.adb-header-tags {
display:none;
}
.more-dropdown {
display:none;
}
.dropdown-nav {
display: none;
}
.adb-hero-summary,
.adb-hero-link,
.adb-socials-category {
display: none;
}
.adb-hero-title {
padding-left: 152px;
}
.adb-hero-logo {
height: 52px;
top: 12px;
left: 120px;
}
.adb-footer-section {
margin: 0 auto;
}
.adb-footer-btm {
margin: 0 24px 40px;
}
.adb-hero-area {
min-height: 76px;
}
.adb-burger-box {
display:inline;
position: absolute;
top: 17px;
margin-left: 24px;
font-size: 32px;
color: white;
}
.adb-hero-title a{
margin-left: 40px;
}
}
/** Tablet **/
@media (max-width: 712px) {
.header-outer, .cols-wrapper {
padding: 0 40px;
}
/* ADB */
.adb-hero-inner {
padding: 0 40px;
}
.adb-hero-title {
font-size: 16px;
padding-left: 132px;
}
.adb-hero-logo {
left: 100px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 36px;
}
.adb-other-blogs-list {
columns: auto;
}
.adb-other-blogs-title {
font-size: 20px;
}
.adb-other-blogs-title img {
height: auto;
vertical-align: -6px;
width: 32px;
}
.adb-footer-section {
margin: 0 24px;
}
.adb-footer-more {
padding-bottom: 75px;
}
.adb-footer-social {
float: none;
margin-bottom: 35px
}
.adb-footer-social .adb-footer-social-youtube {
margin-left: 0;
}
}
/** Small tablet **/
@media (max-width: 600px) {
.header-inner .google-logo {
top: 32px;
margin-top: 0;
}
.header-inner .google-logo img {
height: 56px;
width: auto;
/*
height: auto;
width: 188px;
*/
/* Override any optical adjustments at desktop size. */
top: 0 !important;
}
.header-left {
left: 0;
top: inherit;
bottom: 24px;
}
.adb-footer-columns {
display: block;
}
.adb-footer-column {
margin-bottom: 48px;
}
.adb-footer-column a {
opacity: 1;
}
.adb-footer-social-label {
padding: 0;
}
.adb-footer-column .widget a {
padding: 0;
}
.footer-newsletter {
margin-top: 16px;
}
.subscribe-btn {
width: 100%;
}
.adb-hero-search {
display: none;
}
.adb-search-box {
display:inline;
position: absolute;
top: 24px;
right: 24px;
font-size: 24px;
color: white;
}
}
/** Mobile **/
@media (max-width: 480px) {
.header-outer, .cols-wrapper {
padding: 0 16px;
}
.adb-hero-logo {
height: 28px;
top: 24px;
left: 76px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 16px;
}
.cols-wrapper {
margin-top: 0;
overflow-x: auto;
}
.post-header .publishdate, .post .post-content {
font-size: 16px;
}
.post .post-content {
line-height: 28px;
margin-bottom: 30px;
}
.post {
margin-top: 30px;
}
.byline-author {
display: block;
font-size: 12px;
line-height: 24px;
margin-top: 6px;
}
#main .post .title a {
font-weight: 500;
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
}
#main .post .post-header {
padding-bottom: 12px;
}
#main .post .post-header .published {
margin-bottom: -8px;
margin-top: 3px;
}
.post .read-more {
display: block;
margin-top: 14px;
}
.post .tr-caption {
font-size: 12px;
}
#main .post .title a {
font-size: 20px;
line-height: 30px;
}
.post-content iframe {
/* iframe won't keep aspect ratio when scaled down. */
max-height: 240px;
}
.post-content .separator img, .post-content .tr-caption-container img {
margin-left: -16px;
max-width: 100%;
}
.post-content table {
table-layout: fixed;
width: 100%;
}
/** List page tweaks. **/
.list-page .post-original {
display: none;
}
.list-page .post-summary {
display: block;
}
.list-page .comment-container {
display: none;
}
.list-page .label-footer {
display: none;
}
.list-page #main .post .post-footer {
border-bottom: 1px solid #eee;
margin: -16px 0 0 0;
padding: 0 0 20px 0;
}
.list-page .post .share {
display: none;
}
/** Detail page tweaks. **/
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 32px !important;
}
.detail-page .label-footer {
margin-bottom: 0;
}
.detail-page #main .post .post-footer {
padding-bottom: 0;
}
.detail-page #comments {
display: none;
}
/* ADB */
.adb-header-console {
display: none;
}
.adb-hero-inner {
padding: 0 16px;
}
.adb-hero-title {
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
font-weight: 500;
line-height: 30px;
padding-left: 80px;
}
}
/* Fixed-position sidebar for larger screens */
@media screen and (min-height: 700px) and (min-width: 1100px) {
.col-right .section {
max-height: calc(100vh - 197px);
overflow: auto;
}
.col-right.scroll-start {
left: 50%;
margin-left: 241px;
position: fixed;
top: 96px;
}
.col-right.scroll-end {
bottom: 485px;
position: absolute;
top: auto;
}
}
[data-about-pullquote], [data-is-preview], [data-about-syndication] {
display: none;
}
#imgFull {
display: block;
margin: 10px auto;
width: 90%;
border: 0;
padding: 0;
}
#imgHalf {
display: block;
margin: 10px auto;
width: 50%;
border: 0;
padding: 0;
}
#flexParent {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
#flexImg {
width: 90%;
margin: 0;
padding: 0;
border: 0;
}
#imgCaption {
text-align: center;
font-style: italic;
font-size: 85%;
margin: -5px 0 10px 0;
padding: 0;
border: 0;
}
#floatRight {
float: right;
width: 45%;
margin: 5px 0 5px 5px;
padding: 0;
border: 0;
}
#floatLeft {
float: left;
width: 45%;
margin: 5px 5px 5px 0;
padding: 0;
border: 0;
}
</style>
<style>
.loading {
visibility: visible;
}
</style>
</head><body>
<div class="adb-detail">
<div class="adb-detail__info">
</div>
<div class="adb-detail__title">
</div>
<hr>
<div class="adb-detail__content">
<div>
<meta content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOjkHAxh1WICAf0J6AfzM7iXoFYjPWvTd93wjg_3_3iIrZf1ErxiFwLH1CbRYs8zsPkBVmiKKiTb61U09hug7LhPRq77wKjIQLr6Qk9enovexc5WTF0FtY4OtwwqIkA17kyvvVIrToYMWCqoWGGwJE9QAyj05_wcvhPGKNB6skfC8SGbfAVZb-pVTt7i4/s1600/Circle-droid_1@2x.png" name="twitter:image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOjkHAxh1WICAf0J6AfzM7iXoFYjPWvTd93wjg_3_3iIrZf1ErxiFwLH1CbRYs8zsPkBVmiKKiTb61U09hug7LhPRq77wKjIQLr6Qk9enovexc5WTF0FtY4OtwwqIkA17kyvvVIrToYMWCqoWGGwJE9QAyj05_wcvhPGKNB6skfC8SGbfAVZb-pVTt7i4/s1600/Circle-droid_1@2x.png" style="display: none;">
<em>Diposting oleh Dave Burke, VP of Engineering</em>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil3wtlHfRLwD-JT5XKBGmS2Ml6syyISZ3sfnjy4gvUmYhoV_Mv4gPpAg_dc-VT3NOp6cM7YVBJMmjTxN360fn0IW-R2UtUctGqzl2tR9rVYtAgzn5yoh48PyznU3g_y2cEovfiysb3LYTT9dNzWyzlr58p9i25EVbX64AdLRrfnHc7q8KDUIWPD-dL3Es/s1600/Circle-droid@2x.png"><img border="0" data-original-height="800" data-original-width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil3wtlHfRLwD-JT5XKBGmS2Ml6syyISZ3sfnjy4gvUmYhoV_Mv4gPpAg_dc-VT3NOp6cM7YVBJMmjTxN360fn0IW-R2UtUctGqzl2tR9rVYtAgzn5yoh48PyznU3g_y2cEovfiysb3LYTT9dNzWyzlr58p9i25EVbX64AdLRrfnHc7q8KDUIWPD-dL3Es/s1600/Circle-droid@2x.png"></a> <a name="more"></a><p></p>
<p>Model Dasar mempelajari berbagai sumber data untuk menghasilkan sistem AI yang mampu beradaptasi dengan beragam tugas, bukan hanya dilatih untuk satu kasus penggunaan terbatas. Hari ini, kami mengumumkan <a href="https://blog.google/technology/ai/google-gemini-ai" target="_blank">Gemini</a>, model kami yang paling mumpuni. Gemini dirancang untuk fleksibilitas, sehingga bisa berjalan di mana pun, mulai dari pusat data hingga perangkat seluler. Gemini sudah dioptimalkan untuk tiga ukuran yang berbeda: Ultra, Pro, dan Nano.</p>
<h3>Gemini Nano, dioptimalkan untuk seluler</h3>
<p>Gemini Nano, model paling efisien kami dibuat untuk tugas di perangkat, berjalan langsung pada silikon seluler, membuka dukungan untuk berbagai kasus penggunaan penting. Menjalankan fitur yang aktif di perangkat agar data tidak keluar dari perangkat, seperti menyarankan balasan pesan dalam aplikasi pesan terenkripsi menyeluruh. Ia juga memungkinkan pengalaman yang konsisten dengan latensi deterministik, sehingga fitur selalu tersedia bahkan ketika tidak ada jaringan.</p>
<p>Gemini Nano dikembangkan dari model Gemini yang lebih besar dan secara khusus dioptimalkan untuk berjalan pada akselerator silikon seluler. Gemini Nano memungkinkan kemampuan yang kuat seperti ringkasan teks berkualitas tinggi, smart reply kontekstual, serta koreksi tata bahasa dan proofreading lanjutan. Sebagai contoh, penyempurnaan pemahaman bahasa Gemini Nano memungkinkan Pixel 8 Pro meringkas konten di <a href="https://blog.google/products/pixel/pixel-feature-drop-december-2023/" target="_blank">aplikasi Perekam Suara</a> secara mudah, bahkan ketika koneksi jaringan ponsel sedang offline.</p>
<img><div style="text-align: center;"><img alt="Gambar bergerak Gemini Nano yang digunakan dalam aplikasi Perekam Suara pada perangkat Pixel 8 Pro" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigOzYRgEsWVFIuIXaTUnskWwSIx6tT1J9ZAsGEhxPYSjLTHx8pmSDUagn0Z2mleCXMo6Fj3ZMTiGWnQHbk6dmLkTiMGkHZcwFCuQg2u1fQOS6KBIo0M3o2M_TI7F99S4W4eOa-LlLUEZQa-5E4MCrRRwCoWwKueTHpmMrng4sMmQdaJGutGSzLzBxcZV4/s1600/image2.gif" style="margins: auto; width: auto;"></div><imgcaption><center><em>Pixel 8 Pro menggunakan Gemini Nano di aplikasi Perekam Suara untuk meringkas audio rapat, bahkan tanpa koneksi jaringan.</em></center></imgcaption><br>
<p>Gemini Nano mulai mendukung Smart Reply di Gboard pada Pixel 8 Pro, siap untuk diaktifkan dalam setelan sebagai <a href="https://developer.android.com/gboard-smart-reply" target="_blank">pratinjau developer</a>. Dukungan di Android akan diluncurkan untuk WhatsApp, Line, dan KakaoTalk dalam beberapa minggu ke depan dengan lebih banyak aplikasi pesan di tahun yang baru. Model AI di perangkat menghemat waktu Anda dengan menyarankan respons berkualitas tinggi dengan kesadaran percakapan.<sup>1</sup>.</p>
<img><div style="text-align: center;"><img alt="Gambar bergerak penggunaan Smart Reply WhatsApp di Gboard menggunakan Gemini Nano pada perangkat Pixel 8 Pro" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPENbLC7V2T2KSKhChAYJR4xcB-Q_R_QL35E5ftvpKMiSUoEOBbL5i8bFj9isF90L7SnCGCB0lXWfbUcTXHw0tWLJz14XBk8ahy-feCyZPmuug-psYXWnLx55eVr__yNifj3TKv-dKU3SXwbXOLnt0D5orPkNtaz6BLcuSfDczcXdw8V4O1g19rLUb_Zw/s1600/image3.gif" style="margins: auto; width: auto;"></div><imgcaption><center><em>Smart Reply di Gboard dalam WhatsApp menggunakan Gemini Nano di Pixel 8 Pro.</em></center></imgcaption>
<h3>Android AICore, layanan sistem baru untuk model dasar di perangkat</h3>
<p><a href="https://developer.android.com/ml/aicore" target="_blank">Android AICore</a> adalah layanan sistem baru di Android 14 yang menyediakan akses mudah ke Gemini Nano. AICore menangani manajemen model, runtime, fitur keamanan, dan lainnya, menyederhanakan pekerjaan Anda saat memasukkan AI ke dalam aplikasi Anda. </p>
<p>AICore dirancang secara pribadi, mengikuti contoh <a href="https://security.googleblog.com/2021/09/introducing-androids-private-compute.html" target="_blank">Private Compute Core</a> Android dengan isolasi dari jaringan melalui API open source, memberikan transparansi dan kemampuan diaudit. Sebagai bagian dari upaya kami untuk membangun dan men-deploy AI secara bertanggung jawab, kami juga membangun fitur keselamatan khusus agar lebih aman dan inklusif bagi semua orang.</p>
<img><div style="text-align: center;"><img alt="Arsitektur AICore" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjychPp-ZcIGdh6cVclw0rSyNB2W2ZWPTmVOUmrQgsw5WIXhgAAVJSQYCe4PCEZRyPOKGnDlIoTUb0vAvQdfscJIkjK6EDSmHWX9M-neghaaC6tReQhxzSby0_XXdGLeDOtPR_Vb9H1SlGxYdE2tuXTgDdO1M59exxOWi4uMuRgF4XQCrsdxfWBJWwotY/s1600/image1.png" style="margins: auto; width: auto;"></div><imgcaption><center><em>AICore mengelola model, runtime, dan fitur keamanan.</em></center></imgcaption><br>
<p>AICore memungkinkan penyesuaian Low Rank Adaptation (LoRA) dengan Gemini Nano. Konsep canggih ini memungkinkan developer aplikasi membuat adapter LoRA kecil berdasarkan data pelatihan mereka sendiri. Adapter LoRA dimuat oleh AICore, menghasilkan model bahasa besar berkemampuan tinggi yang disesuaikan untuk kasus penggunaan aplikasi itu sendiri.</p>
<p>AICore memanfaatkan hardware ML baru seperti Google Tensor TPU dan NPU terbaru dalam chip flagship Qualcomm Technologies, Samsung S.LSI, dan MediaTek. AICore dan Gemini Nano akan diluncurkan ke <a href="https://blog.google/products/pixel/pixel-feature-drop-december-2023/" target="_blank">Pixel 8 Pro</a>, dengan lebih banyak perangkat dan mitra silikon yang akan diumumkan dalam beberapa bulan mendatang.</p>
<h3>Membangun dengan Gemini</h3>
<p>Kami sangat antusias bisa menyatukan penelitian AI tercanggih dengan alat dan API yang mudah digunakan bagi developer Android untuk membangun aplikasi dengan Gemini di perangkat. Jika Anda tertarik untuk membuat aplikasi menggunakan Gemini Nano dan AICore, silakan <a href="https://docs.google.com/forms/d/e/1FAIpQLSdDvg0eEzcUY_-CmtiMZLd68KD3F0usCnRzKKzWb4sAYwhFJg/viewform" target="_blank">mendaftar ke Program Akses Awal kami</a>.</p><br>
<div style="text-align: left;"><sup>1</sup><small><em> Tersedia secara global, hanya menggunakan bahasa keyboard Inggris Amerika Serikat. <a href="https://developer.android.com/gboard-smart-reply" target="_blank">Baca lebih lanjut</a> untuk detailnya. Diedit pada 13 Desember untuk mengklarifikasi dukungan aplikasi pesan awal.</em></small><em></em></div>
</div>
<hr>
</div>
</div>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-59404204016061238842023-11-21T12:19:00.001+07:002023-11-27T22:05:39.449+07:00<div><span class="byline-author"><br /></span></div><div><span class="byline-author"><p dir="ltr" style="line-height: 1.38; margin-bottom: 3pt; margin-top: 0pt; text-align: center;"><span style="font-family: "Google Sans", sans-serif; font-size: 12pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"><span style="border: none; display: inline-block; height: 351px; overflow: hidden; width: 624px;"><img height="351" src="https://lh7-us.googleusercontent.com/iUgWqNFAoV2tF9fFi3C75t0_24N4NzODcf-pKVDmJZNc_FjxlrrVjsMq5FjR6M77bl8PdSrbpCejTaQvxd8fDlivMtCFMtXZRkJASxRxwSjcn7mPYIW9LHC2VbRZQhxhiEUGLP76LPE1UVUMzaUYd9g" style="margin-left: 0px; margin-top: 0px;" width="624" /></span></span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 3pt; margin-top: 0pt; text-align: center;"><span style="font-family: "Google Sans", sans-serif; font-size: 26pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"><br /></span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 3pt; margin-top: 0pt; text-align: center;"><span style="font-family: "Google Sans", sans-serif; font-size: 26pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Bangkit 2024 dengan Kurikulum AI: Langkah Tepat untuk Memulai Karier Teknologi</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Pada akhir tahun 2023 nanti, Bangkit akan melatih lebih dari 15.000 orang. Ini membuktikan bahwa program yang berada di bawah naungan Kementerian Pendidikan, Kebudayaan, Riset, dan Teknologi, dirancang khusus oleh Google, serta didukung penuh oleh GoTo dan Traveloka ini memiliki dampak yang masif terhadap calon talenta digital di Indonesia.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Agar program yang terafiliasi dengan Kampus Merdeka - Studi Independen Bersertifikat (SIB) ini bisa terus memberikan dampak pada mahasiswa-mahasiswi di Indonesia, Bangkit kembali hadir untuk paruh pertama tahun 2024.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;">Baru: Bangkit Hadir dengan Kurikulum Berbasis AI </span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Selama belajar di Bangkit, peserta akan mendapatkan pelatihan komprehensif mengenai salah satu dari tiga pilihan keahlian teknologi berorientasi karier, yaitu </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">machine learning</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">, </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">mobile development</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">, dan </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">cloud computing</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">. </span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"><br /></span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Bangkit setara dengan 20 SKS dan akan berlangsung secara daring selama 20 minggu atau lebih dari 900 jam belajar pada semester genap tahun 2024, yakni dari Februari s.d. Juli 2024. </span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Hal terbaru: kini Bangkit dilengkapi dengan materi pembelajaran teranyar, yakni </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">artificial intelligence</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> (kelas wajib) dan </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">cyber security</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> (kelas opsional).</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Kurikulum berbasis </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">artificial intelligence (AI)</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> ini bisa teman-teman dapatkan lewat kelas sebagai berikut: </span></p><ul style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="1" dir="ltr" style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; text-wrap: wrap; vertical-align: baseline;">Introduction to AI:</span><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;"> untuk peserta pada </span><span style="font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;">learning path</span><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;"> Mobile Development dan Cloud Computing. </span></p></li></ul><ul style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="1" dir="ltr" style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; text-wrap: wrap; vertical-align: baseline;">Applied Machine Learning:</span><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;"> (sama dengan atas). </span></p></li><li aria-level="1" dir="ltr" style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; text-wrap: wrap; vertical-align: baseline;">Generative AI:</span><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;"> untuk peserta pada </span><span style="font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;">learning path</span><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;"> Machine Learning.</span></p></li><li aria-level="1" dir="ltr" style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; text-wrap: wrap; vertical-align: baseline;">Bonus</span><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;">: Cyber Security: untuk peserta pada </span><span style="font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;">learning path </span><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;">Cloud Computing.</span></p></li></ul><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Kehadiran pembelajaran baru ini adalah salah satu upaya Bangkit untuk mencetak talenta digital dengan pengetahuan yang relevan dengan kebutuhan industri pada masa kini, khususnya dalam bidang AI. Akan ada 4.500 peserta terbaik yang dipilih untuk menjadi bagian dari Bangkit 2024 Batch 1.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Para peserta ini akan dibimbing langsung oleh para ahli teknologi yang berasal dari </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">startup</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> Indonesia kelas dunia dan institusi pendidikan ternama. Keikutsertaan para peserta dalam program Bangkit ini bersifat gratis.</span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"><br /></span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;">Pelatihan </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;">Soft Skills</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;"> dan Bahasa Inggris di Bangkit </span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Selain pelatihan teknologi yang sesuai dengan kebutuhan industri dan perkembangan teknologi masa kini, para peserta Bangkit akan dibekali dengan keterampilan pelengkap berupa </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">soft skills</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> dan kemampuan berbahasa Inggris. Wawasan mengenai </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">critical thinking</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">, </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">digital branding & interview communication</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">, </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">time management</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">, </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">professional communication</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">, </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">adaptability</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">, </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">idea generation</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">and MVP planning</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">, serta</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> startup valuation</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> akan menjadi bekal bagi para peserta saat memasuki dunia profesional. Selain itu, untuk meningkatkan kemampuan berbahasa Inggris, peserta akan mempelajari </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">spoken correspondence</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">, </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">expressing opinion</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">, dan </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">business presentation</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;">Menerapkan Materi Ajar lewat Proyek </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;">Capstone</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;"> Berbonus Dana Inkubasi </span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Untuk mengimplementasikan ilmu yang telah diperoleh pada masa belajar, peserta akan mengerjakan proyek akhir yang bernama </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">capstone project</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> di akhir program. Nantinya, sejumlah tim terbaik akan mendapatkan pendanaan dan pengembangan lanjutan untuk menjadi sebuah </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">startup</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Tim-tim terbaik ini akan meraih dana inkubasi dari Google dan Dikti sampai dengan 140 juta rupiah, dibimbing oleh mentor dari industri terkait, serta didampingi oleh universitas mitra Bangkit. Sebagai informasi, selama mengikuti program ini, peserta tidak akan mendapat uang saku.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Setiap proses pembelajaran yang peserta ikuti di Bangkit adalah wujud upaya Bangkit untuk membentuk para mahasiswa Indonesia agar menjadi talenta yang siap berkarier di industri.</span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;">Syarat Mengikuti Bangkit </span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Untuk mengikuti program ini, peserta harus memenuhi syarat sebagai berikut.</span></p><ul style="margin-bottom: 0; margin-top: 0; padding-inline-start: 48px;"><li aria-level="1" dir="ltr" style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;">Mahasiswa berstatus aktif setara D3/D4/S1.</span></p></li><li aria-level="1" dir="ltr" style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;">Berasal dari universitas negeri dan swasta di seluruh Indonesia yang terdaftar pada</span><a href="https://pddikti.kemdikbud.go.id/pt" style="text-decoration-line: none;"><span style="color: #1155cc; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;"> </span><span style="color: #1155cc; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; text-wrap: wrap; vertical-align: baseline;">PDDikti</span></a><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;">.</span></p></li><li aria-level="1" dir="ltr" style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;">Bagi mahasiswa setingkat D3, mahasiswa sedang menempuh minimal semester 4 saat program Bangkit 2024 Batch 1 dimulai.</span></p></li><li aria-level="1" dir="ltr" style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;">Bagi mahasiswa setingkat D4/S1, mahasiswa sedang menempuh minimal semester 5 saat program Bangkit 2024 Batch 1 dimulai.</span></p></li><li aria-level="1" dir="ltr" style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;">Berasal dari jurusan apa pun, termasuk jurusan non-IT dan non-teknik.</span></p></li><li aria-level="1" dir="ltr" style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; list-style-type: disc; vertical-align: baseline; white-space: pre;"><p dir="ltr" role="presentation" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-wrap: wrap; vertical-align: baseline;">Belum akan dinyatakan lulus dari universitas sampai Juli 2024 mendatang.</span></p></li></ul><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"><span style="border: none; display: inline-block; height: 351px; overflow: hidden; width: 624px;"><img height="351" src="https://lh7-us.googleusercontent.com/gLD2bJzSrRMGl4kOuwCbfTz21wOQYh-_eNRlqKOeLdbZ_Sd8AYz-q6RXjOyG5LJ2ifDL6evAjsUjwPrvgDa-iASw2UOXzujRK6IrTUqMo5cjuUlbxA-lDdQyokpBYtTdH2w7F-JACH8NLvyjg-u8KK0" style="margin-left: 0px; margin-top: 0px;" width="624" /></span></span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: center;"><a href="https://drive.google.com/file/d/15h6S8ZzRKPikUegzuB6QQMUeXd1M9_L-/view?usp=sharing" style="text-decoration-line: none;"><span style="color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">Link to image</span></a></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Bangkit adalah langkah tepat yang dapat diambil untuk membentuk diri menjadi talenta digital berkaliber tinggi yang siap berkarier. Apa pun latar belakangnya, seluruh mahasiswa Indonesia dari berbagai kalangan disarankan untuk mengikuti program ini. Kami sangat mendorong perempuan, difabel, dan mahasiswa dari penjuru Indonesia untuk ambil bagian. </span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"><br /></span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Cek </span><a href="https://blog.bangkit.academy/" style="text-decoration-line: none;"><span style="color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">laman berikut</span></a><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> untuk melihat kisah-kisah inspiratif lulusan Bangkit. </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"><br /><br /></span></p><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;">Terakhir, daftarkan dirimu sebagai peserta Bangkit 2024 hingga batas akhir 15 Desember 2023)* melalui tautan</span><a href="https://g.co/bangkit" style="text-decoration-line: none;"><span style="color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;"> </span><span style="color: #1155cc; font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">https://g.co/bangkit</span></a><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;">! </span></p><br /><p dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;"><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">*</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: 700; vertical-align: baseline; white-space-collapse: preserve;">Catatan: </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">untuk melihat lini masa (</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">timeline)</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> ter-</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">update,</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> cek selalu </span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-style: italic; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">website</span><span style="font-family: "Google Sans", sans-serif; font-size: 11pt; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;"> Kampus Merdeka.</span></p></span></div>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.com0tag:blogger.com,1999:blog-6158048950125693510.post-19342470269411119592023-10-26T20:03:00.007+07:002024-02-07T20:24:00.262+07:00Menjadikan endpoint kunci sandi URL terkenal sebagai bagian dari implementasi kunci sandi Anda<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="https://android-developers.googleblog.com/2023/10/make-passkey-endpoints-well-known-url-part-of-your-passkey-implementation.html"/>
<meta name="original_url" content="https://android-developers.googleblog.com/2023/10/make-passkey-endpoints-well-known-url-part-of-your-passkey-implementation.html"/>
<style id="page-skin-1" type="text/css"><!--
body {
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
-webkit-font-smoothing: antialiased;
color: #202124
}
h1 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px
}
h2 {
font-size: 30px;
line-height: 40px
}
h2,
h3 {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500
}
h3 {
font-size: 24px;
line-height: 32px
}
h4 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 26px
}
h5 {
font-size: 16px;
line-height: 24px
}
h5,
h6 {
font-family: Roboto, sans-serif;
font-weight: 600
}
h6 {
font-size: 14px;
line-height: 22px
}
.display {
font-family: Roboto, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 67.2px
}
.hidden-text {
height: 1px;
overflow: hidden;
pointer-events: none;
position: absolute;
top: -10px;
width: 1px
}
img,
video {
border: 0;
height: auto;
max-width: 100%
}
body {
position: relative;
min-height: 100vh
}
body.no-scroll {
overflow: hidden
}
a {
color: #4184f3;
text-decoration: none
}
a:focus,
a:focus-visible {
outline-offset: -2px
}
.content-wrap {
padding-top: 200px;
max-width: 800px;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:915px) {
.content-wrap {
padding-top: 100px
}
}
.full-width {
width: 100%
}
.icon-link {
height: 42px;
width: 132px;
border-radius: 80px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: baseline;
-ms-flex-pack: center;
justify-content: baseline;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
background: transparent;
border: none;
color: black !important
}
.icon-link:hover {
background-color: hsla(213, 7%, 76%, .2)
}
.icon-link:focus {
background-color: hsla(213, 7%, 76%, .26)
}
.icon-link:active {
background-color: hsla(213, 7%, 76%, .32)
}
.adb-container {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto;
max-width: 1420px
}
@media only screen and (max-width:767px) {
.adb-container {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--large {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto
}
@media only screen and (max-width:767px) {
.adb-container--large {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--flex-horizontal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.section,
body {
margin: 0
}
.adb-card {
position: relative;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
margin: 40px 0;
padding: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: box-shadow .2s linear, opacity .2s linear;
transition: box-shadow .2s linear, opacity .2s linear, -webkit-box-shadow .2s linear
}
.divider {
border: none;
height: 1px;
color: #DADCE0;
background-color: #DADCE0;
margin: 0 20px;
}
.adb-card:first-child {
background-color: #d7effe;
border: none;
padding: 32px 24px 32px;
margin: 40px 20px 60px;
}
@media only screen and (max-width:850px) {
.adb-card {
max-height: unset;
padding: 0 20px
}
.adb-card:first-child {
margin-bottom: 40px;
}
}
@media only screen and (max-width:600px) {
.adb-card:first-child {
margin: 0 -20px 40px;
}
.adb-card {
border-radius: 0;
padding: 0;
}
.divider {
margin: 0;
}
.content-wrap {
padding-top: 54px;
}
}
.adb-card:focus-within,
.adb-card:hover {
-webkit-box-shadow: 0 0 36px rgba(0, 0, 0, .1);
box-shadow: 0 0 36px rgba(0, 0, 0, .1);
cursor: pointer
}
.adb-card__href {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.adb-card__image-wrapper {
overflow: hidden;
position: relative;
width: auto;
-webkit-flex-basis: 40%;
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.adb-card__content {
padding: 24px 0 0
}
.adb-card__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 600;
margin-bottom: 12px
}
.adb-card__info {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 24px
}
.adb-card__description {
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin-bottom: 48px
}
.adb-card:hover .adb-content__image-wrapper img,
.adb-card__href:focus~.adb-content__image-wrapper img {
-webkit-transform: scale(1.03);
transform: scale(1.03);
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease
}
.devsite-footer {
padding: 0 24px;
border-top: 1px solid #bdc1c6
}
.devsite-footer li {
display: block
}
.devsite-footer li a {
text-decoration: none;
font-size: 14px;
line-height: 16px;
color: #202124
}
.devsite-footer li a:focus,
.devsite-footer li a:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-linkboxes-list {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
padding: 24px 0;
border-bottom: 1px solid #bdc1c6
}
@media only screen and (max-width:767px) {
.devsite-footer-linkboxes-list {
grid-template-columns: 1fr;
padding-left: 0
}
}
.devsite-footer-linkbox {
display: block
}
.devsite-footer-linkbox-heading {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin: 0 0 4px
}
.devsite-footer-linkbox ul {
padding-left: 0
}
.devsite-footer-sites-list {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-utility nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 24px 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0
}
}
.devsite-footer-utility-button {
justify-self: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 20px;
margin-left: auto;
padding-left: 16px
}
.devsite-footer-utility-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 8px 0 0
}
.devsite-footer-utility-item:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.devsite-footer-utility-item:not(:first-child):before {
content: "|";
margin: 0 8px 0 0
}
}
.devsite-footer-sites {
border-bottom: 1px solid #bdc1c6;
padding: 24px 0 23px
}
.devsite-footer-sites-logo {
height: 32px;
margin-top: 5px;
width: 185px
}
.devsite-footer-sites-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0
}
.devsite-footer-sites-item {
margin: 0 0 0 40px
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-item {
margin: 0
}
}
.devsite-footer-sites-link {
display: block;
padding: 8px 0;
color: #202124
}
.devsite-footer-sites-link:focus,
.devsite-footer-sites-link:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-utility-link:focus {
text-decoration: underline
}
.devsite-footer-utility .devsite-footer-utility-button {
line-height: 20px;
font: 400 14px/16px Roboto, sans-serif
}
.devsite-footer-utility .devsite-footer-utility-button:before {
content: "";
margin: 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility .devsite-footer-utility-button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
margin: 18px 0 12px
}
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link {
border: 0;
background: #1a73e8;
color: #fff;
line-height: 36px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0 0 16px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px 0;
box-shadow: 0 1px 2px 0;
display: inline-block;
font: 500 14px/36px Roboto, sans-serif;
height: 36px;
letter-spacing: 0;
min-width: 36px;
padding: 0 24px;
text-align: center;
-webkit-transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s, -webkit-box-shadow .2s;
vertical-align: middle;
white-space: nowrap
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link:hover {
background: #1765cc
}
.adb-page__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px;
text-align: center;
color: #202124
}
.adb-detail hr {
border: 1px solid #dadce0;
margin: 40px 0
}
.adb-detail__title {
font-size: 40px;
font-weight: 600;
line-height: 48px
}
.adb-detail__info {
font-weight: 400;
font-size: 16px;
line-height: 24px
}
.adb-detail__content {
min-height: 200px
}
.icon-sidebar {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
top: 0;
left: -300px;
max-width: 220px;
gap: 8px
}
.icon-sidebar .share-text {
font-weight: 500;
margin-left: 4px
}
@media only screen and (max-width:1440px) {
.icon-sidebar {
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
left: 0;
margin-top: -20px;
margin-bottom: 40px;
}
.icon-sidebar .share-text {
display: none;
}
}
.copy-tooltip {
display: none;
position: fixed;
bottom: 16px;
left: 10px;
z-index: 100;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.copy-tooltip .copy-tooltiptext {
width: 200px;
background-color: #073042;
color: #fff;
text-align: center;
border-radius: 80px;
padding: 8px 16px;
}
.header__overlay {
height: 100vh;
left: 0;
position: fixed;
width: 100vw;
border: none;
background-color: rgba(0, 0, 0, .4);
-webkit-animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
opacity: 0;
top: 0;
z-index: -1;
display: none
}
.header__overlay.show {
display: block;
opacity: 1;
z-index: 800;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out
}
.social-icons__links {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
.social-icons__links path {
fill: #80868b
}
.social-icons__container-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin-right: 14px
}
@media only screen and (max-width:1000px) {
.social-icons__container-header {
display: none
}
}
.adb-blog-logo:focus,
.adb-blog-logo:hover {
opacity: .7;
text-decoration: none
}
.adb-blog-logo__image {
height: 32px;
margin-left: 0;
margin-top: 6px
}
@media only screen and (min-width:840px) {
.adb-blog-logo__image {
margin-left: 24px
}
}
.header {
position: fixed;
background: #fff;
z-index: 700;
top: 0;
width: 100%;
overflow: hidden;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
height: auto
}
.header .top-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 24px;
height: 50px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #e6e6e6
}
@media only screen and (max-width:839px) {
.header .top-row {
padding: 0 16px
}
}
.header .top-row__left,
.header .top-row__right {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 100%
}
.header .nav-row,
.header .top-row__left,
.header .top-row__right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.header .nav-row {
background: #fff;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.header .nav-items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 50px;
position: relative;
background-color: #fff
}
@media only screen and (max-width:839px) {
.header .nav-items {
display: none
}
}
.header .nav-items tab {
position: relative
}
.header .nav-items tab.active .header__nav-item:after,
.header .nav-items tab:hover .header__nav-item:after {
background: #1a73e8
}
.header .nav-items tab.active .header__nav-item,
.header .nav-items tab:focus-within a {
color: #202124
}
@media only screen and (max-width:839px) {
.header .header__cta,
.header .nav-items {
display: none
}
}
.header__search-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 6px 0 6px 24px;
overflow: hidden;
position: relative;
margin-right: 36px;
border-radius: 4px
}
@media only screen and (max-width:767px) {
.header__search-container:not(.mobile) {
display: none
}
}
.header__search-container.mobile {
margin: 0 0 20px
}
.header__search-container.mobile #searchform,
.header__search-container.mobile .searchbox {
width: 100%
}
.header__search-container .searchbox {
border-radius: 2px
}
.header__search-container .searchbox input {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
font-weight: 500;
color: #80868b;
border: 0;
margin: 0;
height: 20px;
outline: 0;
padding: 8px 8px 8px 40px;
width: 100%;
-webkit-transition: background .2s;
transition: background .2s
}
.header__search-container .searchbox input::-webkit-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input:-ms-input-placeholder,
.header__search-container .searchbox input::-ms-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input::placeholder {
color: #80868b
}
.header__search-container .searchbox input:hover {
background: #e8eaed
}
.header__search-container .material-icons {
color: #80868b;
left: 8px;
position: absolute;
top: 6px;
-webkit-transition: color .2s;
transition: color .2s
}
.header__cta {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #1a73e8 !important;
text-decoration: none
}
.header__cta.mobile {
padding: 18px 0
}
.header__cta:hover .cta-icon {
margin-left: 0;
margin-right: 12px
}
.header__cta .cta-icon {
-webkit-transition: margin-right .2s linear, margin-left .2s linear;
transition: margin-right .2s linear, margin-left .2s linear;
margin-left: 4px;
margin-right: 8px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.header__cta .cta-icon path {
fill: #1a73e8
}
.header__nav-item {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #80868b;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 18px;
height: 100%;
text-transform: none;
text-decoration: none
}
.header__nav-item:hover {
color: #202124
}
.header__nav-item.mobile {
font-weight: 500;
padding: 0
}
.header__nav-item:after {
bottom: 0;
border-radius: 3px 3px 0 0;
content: "";
display: block;
height: 3px;
left: 50%;
min-width: 20px;
position: absolute;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(100% - 24px)
}
.header__hamburger {
border: 0;
background: none;
outline: none;
padding: 0;
margin: 1px 8px 0 -4px;
padding: 8px;
color: rgba(0, 0, 0, .65);
cursor: pointer
}
@media only screen and (min-width:840px) {
.header__hamburger {
display: none
}
}
.header__side-menu {
background-color: #fff;
bottom: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
z-index: 900
}
.header__side-menu.is-open {
-webkit-transform: translateX(0);
transform: translateX(0);
width: 80%
}
.header__side-menu.is-open,
.header__side-menu__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%
}
.header__side-menu__content {
padding: 18px 16px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.header__side-menu__content .spacer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.header__side-menu__title {
font-family: Roboto, sans-serif;
font-size: 20px;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px
}
.header__side-menu__items {
list-style: none
}
.header__side-menu__items li {
padding: 12px 0
}
.header__side-menu__items tab {
position: relative
}
.header__side-menu__items tab.active .header__nav-item,
.header__side-menu__items tab:focus-within a {
color: #202124
}
.header__side-menu__bottom {
border-top: 1px solid #e6e6e6
}
.header__side-menu__logo-container {
background: #fff;
height: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 4px 16px;
border-bottom: 1px solid #e6e6e6
}
#nav .widget {
margin: 0
}
.featured__wrapper {
width: 100%;
border: 0;
background-color: #e8f0fe;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 80px 0
}
@media only screen and (max-width:767px) {
.featured__wrapper {
padding: 0
}
}
.featured__inner {
max-width: 1080px;
width: calc(100% - 24px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
padding: 48px
}
@media only screen and (min-width:768px) {
.featured__inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
padding: 12px 80px
}
}
.featured__href {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.featured__image {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
max-width: 100%;
}
.featured__content {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-top: 24px;
width: 100%
}
.featured__title {
font-size: 32px;
line-height: 44.8px;
font-weight: 500;
font-family: Android Euclid, Roboto, sans-serif;
margin-bottom: 15px
}
.featured__info {
font-family: Roboto Mono, monospace;
font-weight: 400;
font-size: 12px;
line-height: 160%;
margin-bottom: 24px
}
.featured__description {
margin-bottom: 48px
}
.preview.featured__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f1f3f4;
padding: 64px 0 120px
}
.preview.featured__wrapper h1 {
margin: 0 0 64px
}
.blog-label-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px
}
.blog-label-container .blog-label {
text-decoration: none;
z-index: 3
}
.blog-label-container .blog-label span {
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
background-color: #F1F3F4;
border-radius: 100px;
padding: 4px 16px;
color: #3c4043
}
.adb-card:first-child .blog-label span {
background-color: #fff;
}
.blog-label-container .blog-label span:focus,
.blog-label-container .blog-label span:hover {
background-color: #D7EFFE
}
.adb-card:first-child .blog-label span:focus,
.adb-card:first-child .blog-label span:hover {
background-color: #F1F3F4
}
.blog-label-container .blog-label span:focus-visible {
outline-offset: 0
}
#pagination-container {
display: none
}
.pagination {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.pagination .page-button {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: black;
background-color: #3DDC84;
padding: 16px 24px;
border-radius: 80px;
text-decoration: none
}
.pagination .page-button:focus,
.pagination .page-button:hover {
background-color: #3DDC8460;
}
.pagination .page-button.disabled {
color: #80868b;
background-color: #f1f3f4
}
--></style>
<style id="template-skin-1" type="text/css"><!--
--></style>
<style>
/** Blogger default styles **/
html, .Label h2, #sidebar .rss a, .BlogArchive h2, .FollowByEmail h2.title, .widget .post h2 {
font-family: Roboto, sans-serif;
}
.plusfollowers h2.title, .post h2.title, .widget h2.title {
font-family: Roboto, sans-serif;
}
pre, .post-content pre.prettyprint {
background-color: #f7f7f7;
border: 1px solid #ddd;
margin: 0 0 1em 0;
padding: 1em;
overflow: auto;
}
pre, code {
font-size: 9pt;
line-height: 125%;
font-family: monospace;
}
pre, code {
color: #060;
font: 13px/18px Consolas, 'Liberation Mono', Menlo, Monaco, Courier, monospace;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
/* Styles for https://github.com/google/code-prettify */
.com { color: #060; }
.kwd { color: #008; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.fb-custom img, .twitter-custom img, .gplus-share img, .email-custom img {
cursor: pointer;
opacity: 0.54;
}
.twitter-custom, .gplus-share, .fb-custom {
margin-right: 12px;
}
/** Blogger custom theme **/
.adb-header,
.searchBox input {
box-sizing: border-box;
}
.popout-nav {
background-color: white;
width: 280px;
height: 100%;
position: fixed;
z-index: 6;
left: -280px;
transition: left 0.2s;
}
.popout-search {
background-color: white;
width: 280px;
position: fixed;
z-index: 6;
right: -280px;
transition: right 0.2s;
top: 0;
}
.popout-search .widget {
margin: 0;
}
.popout-search #BlogSearch2_form .popout-options {
padding-right: 24px;
width: calc(100% - 48px);
}
.dropdown-nav {
display: none;
background-color: white;
width: 104px;
position: fixed;
padding: 4px 0px 3px 0px;
z-index: 4;
left: 352px;
top: 176px;
transition: top 0.2s;
box-shadow: 0 0px 2px 0 rgba(60,64,67,.3), 0 0px 6px 2px rgba(60,64,67,.15), inset 0 0px 6px -4px rgba(154,160,166,.5);
}
.dropdown-options {
align-items: center;
display: flex;
flex-wrap: wrap;
width: 94px;
height: 48px;
padding-left: 10px;
}
.dropdown-options:hover {
background-color: #f7f9fa;
}
.dropdown-options span {
color: #80868b;
}
.popout-options {
padding-right: 8px;
padding-left: 24px;
padding-top: 16px;
padding-bottom: 15px;
display: inline-block;
width: calc(100% - 32px);
border-top: 1px solid #ddd;
font-size: 13px;
font-weight: 700;
color: #80868b !important;
}
.popout-options:last-of-type {
border-bottom: 1px solid #ddd;
}
.popout-options:first-of-type {
border-top: 0;
}
#close-popout {
padding: 12px 12px 11px 20px;
}
#close-search-popout {
padding: 12px 20px 11px 12px;
text-align: right;
}
.popout-search-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
transition: opacity 0.2s;
}
.popout-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
z-index: 5;
transition: opacity 0.2s;
}
html {
background-color: #fff;
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
width: 100%;
position: absolute;
padding: 0;
/* This ensures that the scroll bar is always present, which is needed */
/* because render happens after page load; otherwise the header */
/* would 'bounce' in-between states. */
min-height: 150%;
}
h2 {
font-size: 130%;
}
h1, h2, h3, h4, h5 {
line-height: 1.5em;
margin-bottom: 1em;
}
html, h4, h5, h6 {
font-size: 14px;
}
a, a:visited {
color: #039be5;
text-decoration: none;
}
pre code {
display: block;
}
.cols-wrapper {
margin-top: 56px;
}
.header-outer, .cols-wrapper {
padding: 0 60px;
}
html, .header-inner a {
color: #212121;
color: rgba(0, 0, 0, .87);
}
/** Archive widget. **/
.BlogArchive {
font-size: 13px;
font-weight: normal;
}
.BlogArchive .widget- {
display: none;
}
.BlogArchive h2, .Label h2 {
color: #039be5;
text-decoration: none;
}
/* Specificity needed here to override widget CSS defaults. */
/* Months */
.Label {
font-size: 13px;
font-weight: normal;
}
.sidebar-icon {
display: inline-block;
width: auto;
vertical-align: middle;
height: 24px;
margin-right: 24px;
}
.sidebar-social-links {
align-items: center;
}
.sidebar-social-links .android-logo,
.android-logo {
height: 48px;
}
.sidebar-social-links a:last-child img {
margin-right: 0;
}
.Label .widget- {
display: none;
}
.searchBox input {
border: 1px solid #eee;
color: #212121;
color: rgba(0, 0, 0, .87);
font-size: 14px;
padding: 8px 8px 8px 40px;
width: 100%;
font-family: Android Euclid, Roboto, sans-serif;
background: url('https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png') 8px center no-repeat;
}
.searchBox ::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .54);
}
.section {
margin: 0;
padding: 0;
}
#sidebar-top {
border: 1px solid #eee;
}
#sidebar-top > div {
margin: 16px 0;
}
/*main post*/
.post {
margin-bottom: 30px;
}
#main .post .title {
margin: 0;
}
#main .post .title a {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: normal;
font-size: 24px;
}
.message, #main .post .post-header {
margin: 0;
padding: 0;
}
#main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption {
color: #444;
font-weight: 500;
}
#main .post .post-header .published {
font-size: 11px;
font-weight: bold;
}
.post-header .publishdate {
font-size: 16px;
font-weight: normal;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#main .post .post-footer {
font-size: 12px;
padding-bottom: 21px;
}
.label-footer {
margin-bottom: 12px;
margin-top: 12px;
}
#main .post .post-header .published {
margin-bottom: 16px;
}
.post .post- {
color: #545454;
color: rgba(0, 0, 0, .67);
font-size: 16px;
margin: 16px 0 36px 0;
line-height: 24px;
word-wrap: break-word;
}
.post-summary {
display: none;
}
/* Override all post images/videos to left align. */
@media (max-width: 712px) {
.post- img {
max-width: 100%;
height: auto;
width: auto;
}
}
.post- .tr-caption-container img {
margin-bottom: 12px;
}
.post- iframe, .post- embed {
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
}
.post- .carousel-container {
margin-bottom: 48px;
}
#main .post- b {
font-weight: 500;
}
/* These are the main paragraph spacing tweaks. */
#main .post- br {
: '';
display: block;
padding: 4px;
}
.post-content .space {
display: block;
height: 8px;
}
.post-content iframe+.space, .post-content iframe+br {
padding: 0 !important;
}
#main .post .jump-link {
margin-bottom: 10px;
}
.post-content img, .post-content iframe {
margin: 30px 0 20px 0;
}
.post-content > img:first-child, .post-content > iframe:first-child {
margin-top: 0;
}
.col-right .section {
padding: 0 16px;
}
#aside {
background: #fff;
border: 1px solid #eee;
border-top: 0;
z-index: 2;
}
#aside .widget {
margin: 0;
}
#aside .widget h2, #ArchiveList .toggle+a.post-count-link {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: 400 !important;
margin: 0;
}
#ArchiveList .toggle {
float: right;
}
#ArchiveList .toggle .material-icons {
padding-top: 4px;
}
#sidebar-top,
#sidebar {
background: #fff;
}
#sidebar .tab {
cursor: pointer;
}
#sidebar .tab .arrow {
display: inline-block;
float: right;
}
#sidebar .tab .icon {
display: inline-block;
vertical-align: top;
height: 24px;
width: 24px;
margin-right: 13px;
margin-left: -1px;
margin-top: 1px;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget-content > :first-child {
padding-top: 8px;
}
#sidebar .active .tab .arrow {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#sidebar .arrow {
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget h2 {
font-size: 14px;
line-height: 24px;
display: inline-block;
}
#sidebar .widget .BlogArchive {
padding-bottom: 8px;
}
#sidebar .widget {
border-bottom: 1px solid #eee;
box-shadow: 0px 1px 0 white;
margin-bottom: 0;
padding: 14px 0;
min-height: 20px;
}
#sidebar .widget:last-child {
border-bottom: none;
box-shadow: none;
margin-bottom: 0;
}
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style: none;
padding: 0;
}
#sidebar ul li a {
line-height: 32px;
}
#sidebar ul ul ul li a {
line-height: 24px;
}
#sidebar .archive {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC');
height: 24px;
line-height: 24px;
padding-left: 30px;
}
#sidebar .labels {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC');
height: 20px;
line-height: 20px;
padding-left: 30px;
}
#sidebar .rss a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII=');
}
#sidebar .subscription a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC');
}
#sidebar-bottom {
background: #f5f5f5;
border-top: 1px solid #eee;
}
#sidebar-bottom .widget {
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
text-align: center;
}
#sidebar-bottom > div:last-child {
border-bottom: 0;
}
#sidebar-bottom .text {
line-height: 20px;
}
/* Home, forward, and backward pagination. */
.blog-pager {
padding-top: 10px;
margin-top: 15px;
text-align: right !important;
}
#blog-pager {
padding: 40px 0 0;
}
#blog-pager a {
display: inline-block;
}
.blog-pager i.disabled {
opacity: 0.2 !important;
}
.blog-pager i {
color: black;
margin-left: 16px;
opacity: 0.54;
}
.blog-pager i:hover, .blog-pager i:active {
opacity: 0.87;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
.gplus-profile {
background-color: #fafafa;
border: 1px solid #eee;
overflow: hidden;
width: 212px;
}
.gplus-profile-inner {
margin-left: -1px;
margin-top: -1px;
}
/* Sidebar follow buttons. */
.followgooglewrapper {
padding: 12px 0 0 0;
}
.loading {
visibility: hidden;
}
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 40px !important;
}
/* ADB */
.adb-hero-area {
min-height: 104px;
background-color: #073042;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
z-index: 5;
position: fixed;
width: 100%;
}
.adb-hero-logo {
height: 80px;
position: absolute;
top: 12px;
left: 16px;
}
.adb-footer-btm {
display: flex;
margin: 0 24px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 40px;
}
.subscribe-btn {
color: black;
background-color: #3DDC84;
border-radius: 100px;
font: 500 16px/24px Android Euclid,Roboto,sans-serif;
padding: 12px 24px;
border: 0;
}
.adb-footer-info {
align-items: center;
display: flex;
padding: 0;
margin: 9px 0 0 -8px;
font-size: 13px;
}
.footer-list {
list-style: none;
padding: 0 8px;
}
.subscribe-info {
list-style: none;
padding: 0 8px 0 0;
font-size: 13px;
color: black;
}
.footer-newsletter {
display: flex;
align-items: center;
}
.adb-header-inner {
display: flex;
align-items: center;
}
.adb-header {
background-color: white;
color: #fff;
height: 48px;
left: 0;
overflow: hidden;
padding: 36px 24px;
right: 0;
top: 104px;
z-index: 4;
display: flex;
align-items: center;
position: fixed;
border-bottom: solid 1px #DADCE0;
}
.adb-shadow {
margin-top: 48px;
height: 1px;
width: 100%;
position: fixed;
background: white;
z-index: 2;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
}
.adb-logo-box {
display:inline;
}
.adb-burger-box {
display: none;
margin: 0 16px 0 0;
}
.adb-search-box {
display: none;
margin: 0 0 0 16px;
}
.adb-htag-box {
display: flex;
align-items: center;
}
.adb-header-tags {
padding: 0 24px 0 0;
}
.adb-header-tags ~ .atb-header-tags {
padding: 0 24px;
}
.adb-header-tags a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #5F6368;
}
.adb-header-tags a:hover {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #073042;
}
.more-dropdown {
display: none;
}
.dropdown-icon {
transition: all 0.3s;
}
.adb-header-logo {
display: inline-block;
vertical-align: -11px;
width: 134px;
height: 32px;
}
.adb-header-title {
color: #fff;
display: inline-block;
font-size: 20px;
font-weight: normal;
}
.adb-header-links {
border-left: 1px solid rgba(0, 0, 0, .1);
display: block;
left: 250px;
list-style: none;
margin: 0;
padding: 12px 0 12px 18px;
position: absolute;
top: 0;
}
.adb-header-link-item {
display: inline-block;
}
.adb-header-link, .adb-header-link:visited {
color: #fff;
display: inline-block;
font-weight: 500;
opacity: .7;
padding: 12px 9px;
text-transform: uppercase;
vertical-align: 2px;
}
.adb-header-link:hover, .adb-header-link:focus {
color: #fff;
opacity: 1;
}
.adb-header-console, .adb-header-console:visited {
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
color: #fff;
float: right;
font-size: 14px;
font-weight: 500;
line-height: 28px;
padding: 4px 10px;
position: relative;
text-transform: uppercase;
transition: box-shadow .2s;
z-index: 60;
}
.adb-header-console:hover {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
color: #fff;
}
.adb-header-console:focus {
background-color: rgba(63, 81, 181, .1);
color: #fff;
}
.adb-header-console-image {
vertical-align: -5px;
}
.adb-hero {
background-color: #dcedc8;
margin-top: 64px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
color: #414141;
display: inline-block;
font-weight: 500;
margin: 25px 25px 0;
}
.adb-hero-inner {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAc4AAADZCAMAAACenCAVAAAAvVBMVEXc7cjY68PT6bvR57fQ57bY6sPZ68TU6bvR6LfP5rTQ57XR57jW6r7b7cfa7MbS6LnS6Lrb7cbQ6Lfb7MbX6r/Z68PY6sLV6b7U6b3U6r3T6LnX68Da7MXP57Tb7Mfc7cfW6b/P57XS57nY68LY68HU6L3W6r/W6b7T6brX6sDV6rzQ57fa7MTV6b3T6Lra68TR57bX68HW6sDS57jU6bzO5rTP5rXZ7MXR6LbZ68XX6sHT6LvV6bzS6LjZ7MILrTuqAAAIyklEQVR4AezXhXEkUQwE0B6+Xhg8MzND/smZ4UsLBSb9Kr0UhI1vl6RZnqUFlnBl9Y+j8WQK4+qGr9oOi7iKr0YFTOt6vhsPmM81/FDAspafUszl/vNTXsOuFYZWMYfrRgyswa51hjLM4TYYGsOuTQpbgNO2dyjAroxCvgunpZT2YFZDaQKnlFRg1z6lgxpOOqS0CbtqKutwwhGVYxh2QqWGC/WUMlhWH1BK4QKnVFZh2hmVEh/cXk7pHLbt5pQafHCT6Jr9gsoR3riayiXMyyhd4Y27jDDHJVQu8MJdU7lBBBpKoz08c7eU8gERuKNyhiduhcopolBRqeGAMaV7xKE7eGzvThQTVZooAJdC1AM2qGg0BhdCrpnciVE0i9dZ3v+t/n2ZMBtJGpsu6nuCrNJddar4/gAnMmuP/GPk3JFwrL2QKw3FD26GyGmQNXbIGVHNKdfmYraDl/ZUcxO8NNtIW888bafDC7tP5R2qtQfL724N5AypxjbIGdseWHMV1VfP+rrnZvbTerMEhHb2Py4eA7KX9AwD5LSppi5ZdPTHEhv6cd5mSjZaeMW/Dc66TEpkO+Q0qIbUE5es6ke85FMN/YGXZs9yQLdXYGVASGJDBaMZXsQouzau/fzfitNsKvpUL1O8dFBksb+Q80C1coaco7RtLeYzO9tHCV7qUY0ckXPGribSoNpQB3Z1MbWtby1hiZwWw35CRjUReRx7Sg5ecqgmJiyHOxrIWVEtPDPNY/TMx4bmczq5T3jpSRELm1NWodVmlGY364tP4ZXvdw5u8jjDf8yQJJ7j+2HYfBh3d+l5HFB5RmyzjM3yh8iDUbb6M9y7j3idgxM+3BzTuPzyXmdOTARJaUc8tUmX7ekB7+aF7dV1a0G6pIx3CkxKmBBUreMfvS0086aTnZZf6kfG53mlN/0UnS2bW5Socz9OA737eM6JkZWu4uUiXfVcnIT34eZM6Yq9hcRKR0OpL7i9cHBi/udjrCOUuiFWsnc2/oKsfYAhXvM2lsj4S/7b2/L9y4cODDu0j8HbBzqSPvutOksqpDH+gorw1+dvHLcaEzv3r4+0BdmnBJXi9bL+G6qaEbFz98rF4sEwnKGKrrrxK3sOuzoMlM9i+ql47KPC/HX8inTxljgKUHBYI1g6qDx/HBct76XETfHF4v3hHpZwVgH9APc0TfFSyTwLZ7DJ9FYxmZvTv1h89DmBdbyHEX0rcuuTRB38fNuQ2vmw1GAYMSjv6ZwQbD0ksFlz9LPW7gMxNv3RBVtlDqz3cbWo32rmEXLGFExcsJBMnilGzk29pleT5gx8fLiq2XzyM2rllpiboEYGxF2UoD6+EntL1Ma+TkOP/LVqNJLM3yeqgayDmnjqKmIu3aNGDhlx1pqiZvyUuAqaqKGwRRwt1gnqqR0QO5ce6ms5J1ZGIWqtkxIf0QNqb7ohJjIXgFjPiYF4j38R2wbZTk1m+C/xqU9WSzv4hkgyVkcg0QvIUg0XEHleRjaK/gQb8g/a2EL8hHcky6zxC+JTQBa5c/BL4nBO1lgl+B2xJjv0QxQgnA1ZoOGhGHFNldedoShxMadKU/d4BeEEVGF3Ll5FJF+psm7Bh5xwHyDeoKeogvp7iDfpbKhyWgeIN/JSqpjbBOLtlqwq7qJNFdKGeKdQUUUEIcS7Df6iSngeQAPhtqgCWi60EElKxjUSsCFriK5nYEMuLDtoJSZk0BiaiaYsZGPlXnEqHoipIhOaKIW4WnD63xThgtP/pthHdFqfUCIRRvK/KZ+3VX1uiulc7puc3EstSOpD9d7+LYGTFfiQenyKkxE3VLLGI9iQkcH4CackzqlEwRYnJbwNlUb5ODHhBVSWHk5O+JFMLkh5qFYxLxnoPZ9BmJGRdrELNuTddNEAwhg34NSvFnvSqgth1ANpNEIZkhkYSg4dt9rHocCFXvvxWUD/ELR2TQ98hMOWon+Ks7YLrZI70iWETu6yT99Qt3uw4A4j+lY6hU4dVcloUFdR3tkA1kt29J1zHxr1SIsGNAoDnvGjMCj/CLmr3INzQj9x5sFm41Ns933c0PtNoc+O0bJNA9+Xryp14+zSL9x5PH6beS2vQrfP0exkQcMG08BdCn1SepeFc8KPijWs5MxPdzN4CipzR2nQb8wdnu0O5UKbkN7h/LQZ/a9Ms+pZNYp9kQt9Yvo9H3Yx8H15QSXm/qZUQMY0ybOCPtNKlIMuqYAogW1SKkBBoxW9SXSARoqKCGGbBRVxBY0C85V3h2mb/MrASGxIb3BnYlaxwXRmLwUMFxMc6NSlQvpM6nt5MXTylOl00JGKYTqxp6DVBb1SkECrlOmvs0HFGA7efjA0dwrLfKVC5tDLp1dpGHrGKFjm0tCZYEWvMTA0NrOBZVZUSMtoLn4I3T5RISnTZTGXJrea9BPotmU6QrqlQi6gXWx05V5MRTiwTaD/4aW5FN8y9pCJYZ2usSPBNRUzNfapNIZ1fGM7KQdUSMNYJyl6Ajh2yAKTBUYHpfCZruJ0jB3wCpVur1GSIf3G8yOPlG1ePDN46d2iJEmLR+86L4lNBRQTZXK/6UAxunMWDxC3Da6omXsoz5XiOa8/NfV9JYHRXVBXiudG8r0y9Jmzpl87oFSDFv3Qog2rDTb0Q6qJckX0K7coWTKkHxh1YLmkSz/Q6JjNKnVQOj+lnM0nMPDxmnLuPhjej5rhFLbjmP4nOF6BCXfdov8JLkPj+xcdnMjh03p3nWXLBwesuB/+GGbHXbc5wIkkSt7CwEmXU1lGbPX3OYVBt5y2Yoov9EN/QVhpJK9xZL/7P4Kw1LO8iIH7qxx8CEu5zG8pcldpQ1hrSjnBI4S9YnrpBsJiEzkIcfIkByFWUqkIcdKjb7kQdos49a3Fjv7vE4TlfPoflYAPuXoeIaw3pv+6h7CeQ/8RPYIP6XpegwGxknMtwxcqK7AgAqkhcDKkf3oAI9LE9sCDWGhf4S8M70peggnxQERTMCFcIjUDF+KOUrAhhvQANkT4dwEsPvJYWz4QAAAAAElFTkSuQmCC');
background-position: bottom right 70px;
background-repeat: no-repeat;
background-size: auto 100%;
margin: 0 auto;
max-width: 980px;
padding: 0 60px;
position: relative;
}
.adb-hero-back-icon {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.adb-hero-title {
font-size: 22px;
line-height: 28px;
padding: 24px 24px 0px 112px;
}
.adb-hero-title a {
color: #FFFFFF;
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500;
}
.adb-hero-summary {
font-size: 16px;
line-height: 24px;
padding: 8px 24px 8px 112px;
}
.adb-hero-summary a {
color: rgba(255, 255, 255, 0.9);
}
.adb-hero-description {
color: #6f7172;
font-size: 16px;
margin: 0;
max-width: 440px;
padding-bottom: 32px;
}
.adb-hero-search {
position: absolute;
top: 19.35%;
right: 1.94%;
}
.adb-hero-search .searchBox input {
border: 1px solid #80868B;
border-radius: 4px;
color: white;
}
.adb-hero-search .searchBox input::placeholder {
color: #F1F3F4;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
padding-left: 12px;
}
.adb-hero-link {
position: absolute;
right: 1.67%;
top: 64.52%;
}
.adb-hero-link a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #3DDC84;
letter-spacing: 1.4px;
}
.adb-hero-arrow {
display: inline-flex;
font-size: 24px;
vertical-align: middle;
}
.adb-socials-box {
display: flex;
position: absolute;
right: 1.67%;
}
.adb-socials-category,
.adb-socials-divider {
display: flex;
align-items: center;
}
.adb-socials-divider {
color: #DADCE0;
font-size: 40px;
font-weight: 100;
margin: 0 20px;
}
.adb-socials-category img,
.adb-footer-social-links img {
height: 24px;
}
.adb-footer-social-links-img {
margin-right: 20px;
}
.adb-hero-subscribe, .adb-hero-subscribe:visited {
background-color: #90c653;
color: #fff;
display: inline-block;
border-radius: 3px;
margin: 25px 0 60px;
padding: 13px 32px;
text-transform: uppercase;
}
.adb-hero-subscribe:hover, .adb-hero-subscribe:focus {
background-color: #333;
}
.adb-footer {
margin: 32px auto 64px;
}
.adb-footer-more {
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #f0f0f0;
padding: 30px 0;
}
.adb-footer-more a {
color: #000;
display: inline-block;
font-size: 20px;
font-weight: 300;
margin-right: 16px;
}
.adb-footer-social {
float: right;
margin-top: -62px;
}
.adb-footer-social a {
background-color: #ccc;
background-position: center;
background-repeat: no-repeat;
background-size: auto 16px;
border-radius: 50%;
display: inline-block;
height: 36px;
margin-left: 16px;
transition: background-color .1s;
width: 36px;
}
.adb-footer-social-youtube {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAQAAAAxWje/AAABLUlEQVQ4y6WUvUoDYRBFr42gCdhK8AV8BwsVC0FQfIQUgr5DIKJoGy1CfAaDq1hIGn8K2xDSaBc1wUJJEYmbkDXssdi1Mrvfst9tZ+bAzNwZSZLEAmvsUKTCBQ80eaWLyxiAMS5dXmhyT5UyBfIsM68/McM1aXRDJgCUSKsTSWQZpAa4ZMUmNtoSRxGhbd4TAI7F1eSIxBwVfAPgUtSjAJLEEk+xgLroxAEkpikyigS0RS8eIEks8hgB6ImhGSAxxS5fE9JGwksCkCRyOP/SfPFjC0jawl5UC9ZDbBvXuB+zxjezkZ5NRnJirHxmtLIjDq2O6UBsWJ3zut1D+WZWEqepAaVg0hlqqcpr4VMNbbpKngJlqtzRoMUnfTx8fDz6fNCiwS3n4VtfIRdU/gLTrSb7DGWLcQAAAABJRU5ErkJggg');
}
.adb-footer-social-youtube:hover {
background-color: #f44336;
}
.adb-footer-social-gplus {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAUCAQAAACpWpz6AAABJUlEQVQ4EZXBTUoCYQDH4X9hTS3Cja0Kyb2X6BCJoLlr1aKwK1QHCMMzWLiqTcuWXaAWQWIlU1DQh4QJ+Wt4X95x0hGn55FCeGzSpMUXXW45ocSC/oMiHUZ1KCgZZqkzyZaSoM7QgCd8BlgXLGo6ijgv7JJRgAxV3jjDUwwMOXh0sK5ZUQRZ5hQLQw4VrA/WlBCGHJpY+0oMQw5trLxCjNtTgFiij5VSiHFHChBL9LFSCjGurgCxRBsrrxA+Pj4+Pl2sQ0VgyKGJdaAYNLAqisCQQxnrk5xGkKOHlVUEhhw8HrFuWFUEaa6wLvUHhoYo4LxSZVkBlihzh7OuaagR9YzPD0PHmo5ZakzSIKVk2OCBUe/sMKPkmKfEKS16fHPPOduklcAvR50zMVwhTI4AAAAASUVORK5CYII=');
}
.adb-footer-social-gplus:hover {
background-color: #f44336;
}
.adb-footer-social-twitter {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAQAAAB0gUQ+AAABI0lEQVQ4EY3BQShDAQDH4f+zTSyJuLgoLlwclYOTHCwHu9ouiLRScpUmNwduDkpCSTs4LAeJhINoOTo4ctHkskyJtf20vWbe3tvb+z7JFUGibLHPMj0qoYEWSYzRKkdMkKbsm3m6WSRFuyQeuKNNNoTJU61ABL8kssAjvbKgiTR2V+ywJol3ijJMY+gP4zhLEpDEGWUpwvhUQgwnh/hURIT/3thjjmGWcBKViSCXeBWSiWdO+MGbPpm4watPfDIRxasLVXCANwuqwCDGK/V80akKGjnmmgLutmXFOvV80CUrAiRxNys7DCY5J4OzXdVCP7c4OcIvO5oJkSCHXZ5VDFkxwilP5HB2z6Cc0EGcF6plSTAqNxgMMEWcTTZYYYYhAqrpF0uh1zgYi1hVAAAAAElFTkSuQmCC');
}
.adb-footer-social-twitter:hover {
background-color: #55acee;
}
.adb-footer-social span {
display: none;
}
.adb-footer-related {
padding-top: 8px;
}
.adb-footer-related a {
color: #999;
font-size: 12px;
white-space: nowrap;
}
.adb-footer-related a:not(:last-child)::after {
content: '|';
cursor: default;
margin: 0 7px 0 10px;
}
.adb-footer-section {
margin: 48px auto;
max-width: 700px;
}
.adb-footer-title {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #3C4043;
margin-bottom: 24px;
}
.adb-footer-columns {
display: flex;
justify-content: space-between;
}
.adb-other-blogs-title img {
margin-right: 8px;
vertical-align: -12px;
}
.adb-footer-social-label {
display: flex !important;
align-items: center;
}
.adb-footer-column a,
.adb-footer-social-label,
#footer-subscribe .tab h2 {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
padding: .85em 0;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-btm a {
color: #000;
font-family: Android Euclid, Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.25px;
opacity: .7;
transition: opacity .1s;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-column a {
opacity: .7;
transition: opacity .1s;
}
.adb-footer-column a:hover {
opacity: 1;
}
.adb-footer-social-links {
margin: 0 0 20px;
}
#footer-subscribe .widget {
margin: 0;
}
#footer-subscribe .tab {
display: flex;
align-items: center;
}
#footer-subscribe .tab img {
height: 16px;
}
.adb-label-view-more-toggle {
cursor: pointer;
}
.adb-label-view-more-toggle::after {
content: '\00e5c5';
float: right;
font: 2em / .7 Material Icons;
opacity: .6;
}
.adb-label-view-more-toggle.active::after {
transform: rotate(180deg);
}
/** Desktop **/
@media (max-width: 900px) {
.col-right {
display: none;
}
.col-main {
margin-right: 0;
min-width: initial;
}
.cols-wrapper {
min-width: initial;
}
.adb-hero-inner {
background-image: none;
}
}
/** ADB header breakpoint **/
@media (max-width: 768px) {
.adb-header-links {
display: none;
}
.dropdown-nav {
display: none;
}
.adb-header {
padding: 12px;
text-align: center;
}
}
@media (max-width: 1196px) {
.breakpoint-hide {
display:none;
}
.more-dropdown {
height: 50px;
display: flex;
align-items: center;
}
}
@media (max-width: 915px) {
.adb-header {
height: 0;
margin: 0;
padding: 0;
display: none;
}
.adb-header-tags {
display:none;
}
.more-dropdown {
display:none;
}
.dropdown-nav {
display: none;
}
.adb-hero-summary,
.adb-hero-link,
.adb-socials-category {
display: none;
}
.adb-hero-title {
padding-left: 152px;
}
.adb-hero-logo {
height: 52px;
top: 12px;
left: 120px;
}
.adb-footer-section {
margin: 0 auto;
}
.adb-footer-btm {
margin: 0 24px 40px;
}
.adb-hero-area {
min-height: 76px;
}
.adb-burger-box {
display:inline;
position: absolute;
top: 17px;
margin-left: 24px;
font-size: 32px;
color: white;
}
.adb-hero-title a{
margin-left: 40px;
}
}
/** Tablet **/
@media (max-width: 712px) {
.header-outer, .cols-wrapper {
padding: 0 40px;
}
/* ADB */
.adb-hero-inner {
padding: 0 40px;
}
.adb-hero-title {
font-size: 16px;
padding-left: 132px;
}
.adb-hero-logo {
left: 100px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 36px;
}
.adb-other-blogs-list {
columns: auto;
}
.adb-other-blogs-title {
font-size: 20px;
}
.adb-other-blogs-title img {
height: auto;
vertical-align: -6px;
width: 32px;
}
.adb-footer-section {
margin: 0 24px;
}
.adb-footer-more {
padding-bottom: 75px;
}
.adb-footer-social {
float: none;
margin-bottom: 35px
}
.adb-footer-social .adb-footer-social-youtube {
margin-left: 0;
}
}
/** Small tablet **/
@media (max-width: 600px) {
.header-inner .google-logo {
top: 32px;
margin-top: 0;
}
.header-inner .google-logo img {
height: 56px;
width: auto;
/*
height: auto;
width: 188px;
*/
/* Override any optical adjustments at desktop size. */
top: 0 !important;
}
.header-left {
left: 0;
top: inherit;
bottom: 24px;
}
.adb-footer-columns {
display: block;
}
.adb-footer-column {
margin-bottom: 48px;
}
.adb-footer-column a {
opacity: 1;
}
.adb-footer-social-label {
padding: 0;
}
.adb-footer-column .widget a {
padding: 0;
}
.footer-newsletter {
margin-top: 16px;
}
.subscribe-btn {
width: 100%;
}
.adb-hero-search {
display: none;
}
.adb-search-box {
display:inline;
position: absolute;
top: 24px;
right: 24px;
font-size: 24px;
color: white;
}
}
/** Mobile **/
@media (max-width: 480px) {
.header-outer, .cols-wrapper {
padding: 0 16px;
}
.adb-hero-logo {
height: 28px;
top: 24px;
left: 76px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 16px;
}
.cols-wrapper {
margin-top: 0;
overflow-x: auto;
}
.post-header .publishdate, .post .post-content {
font-size: 16px;
}
.post .post-content {
line-height: 28px;
margin-bottom: 30px;
}
.post {
margin-top: 30px;
}
.byline-author {
display: block;
font-size: 12px;
line-height: 24px;
margin-top: 6px;
}
#main .post .title a {
font-weight: 500;
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
}
#main .post .post-header {
padding-bottom: 12px;
}
#main .post .post-header .published {
margin-bottom: -8px;
margin-top: 3px;
}
.post .read-more {
display: block;
margin-top: 14px;
}
.post .tr-caption {
font-size: 12px;
}
#main .post .title a {
font-size: 20px;
line-height: 30px;
}
.post-content iframe {
/* iframe won't keep aspect ratio when scaled down. */
max-height: 240px;
}
.post-content .separator img, .post-content .tr-caption-container img {
margin-left: -16px;
max-width: 100%;
}
.post-content table {
table-layout: fixed;
width: 100%;
}
/** List page tweaks. **/
.list-page .post-original {
display: none;
}
.list-page .post-summary {
display: block;
}
.list-page .comment-container {
display: none;
}
.list-page .label-footer {
display: none;
}
.list-page #main .post .post-footer {
border-bottom: 1px solid #eee;
margin: -16px 0 0 0;
padding: 0 0 20px 0;
}
.list-page .post .share {
display: none;
}
/** Detail page tweaks. **/
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 32px !important;
}
.detail-page .label-footer {
margin-bottom: 0;
}
.detail-page #main .post .post-footer {
padding-bottom: 0;
}
.detail-page #comments {
display: none;
}
/* ADB */
.adb-header-console {
display: none;
}
.adb-hero-inner {
padding: 0 16px;
}
.adb-hero-title {
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
font-weight: 500;
line-height: 30px;
padding-left: 80px;
}
}
/* Fixed-position sidebar for larger screens */
@media screen and (min-height: 700px) and (min-width: 1100px) {
.col-right .section {
max-height: calc(100vh - 197px);
overflow: auto;
}
.col-right.scroll-start {
left: 50%;
margin-left: 241px;
position: fixed;
top: 96px;
}
.col-right.scroll-end {
bottom: 485px;
position: absolute;
top: auto;
}
}
[data-about-pullquote], [data-is-preview], [data-about-syndication] {
display: none;
}
#imgFull {
display: block;
margin: 10px auto;
width: 90%;
border: 0;
padding: 0;
}
#imgHalf {
display: block;
margin: 10px auto;
width: 50%;
border: 0;
padding: 0;
}
#flexParent {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
#flexImg {
width: 90%;
margin: 0;
padding: 0;
border: 0;
}
#imgCaption {
text-align: center;
font-style: italic;
font-size: 85%;
margin: -5px 0 10px 0;
padding: 0;
border: 0;
}
#floatRight {
float: right;
width: 45%;
margin: 5px 0 5px 5px;
padding: 0;
border: 0;
}
#floatLeft {
float: left;
width: 45%;
margin: 5px 5px 5px 0;
padding: 0;
border: 0;
}
</style>
<style>
.loading {
visibility: visible;
}
</style>
</head><body>
<div class="adb-detail">
<div class="adb-detail__info">
</div>
<div class="adb-detail__title">
</div>
<hr>
<div class="adb-detail__content">
<div>
<meta content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw72nPkcdJgj4J8G3l5hlQ92lol3rBBiEjOd2PSbi-yScBUR5ewcNBR0Yx54hmh0VmKiFTvHbIQZi8tcI7_TotMgUYCPbOgukjSfLoUAY0AvHX6rRu60ao4s5SR4DjWXknUmFxVPiu0kKCWnG1Z3KhwyK3og3HSZBc4EW6IYbEdN8sjxQrzREts1i-AUU/s1600/social-Make-the-passkey-endpoints-well-known-URL-part-of-your-passkey-implementation.png" name="twitter:image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw72nPkcdJgj4J8G3l5hlQ92lol3rBBiEjOd2PSbi-yScBUR5ewcNBR0Yx54hmh0VmKiFTvHbIQZi8tcI7_TotMgUYCPbOgukjSfLoUAY0AvHX6rRu60ao4s5SR4DjWXknUmFxVPiu0kKCWnG1Z3KhwyK3og3HSZBc4EW6IYbEdN8sjxQrzREts1i-AUU/s1600/social-Make-the-passkey-endpoints-well-known-URL-part-of-your-passkey-implementation.png" style="display: none;">
<em>Diposting oleh Amy Zeppenfeld – Developer Relations Engineer</em>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaRBmppJiumAzTdXnI_0T-vtAmh3uT-7Cwkw7BH7PQNeS-RwR95_S-_1m8p6hMroUcmnM3cHd5Xz1YzTQhNJWCc6vKGx1ciy7Fr7mYO7AnRumW3qe9qkhinAQcBH0KSYIOm_zW5crzoiV9gT2t9O2CboGa3FmRhEzhN6LI3fvaDej2F5XfmwHLrExtZ6o/s1600/header-Make-the-passkey-endpoints-well-known-URL-part-of-your-passkey-implementation.png"><img border="0" data-original-height="800" data-original-width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaRBmppJiumAzTdXnI_0T-vtAmh3uT-7Cwkw7BH7PQNeS-RwR95_S-_1m8p6hMroUcmnM3cHd5Xz1YzTQhNJWCc6vKGx1ciy7Fr7mYO7AnRumW3qe9qkhinAQcBH0KSYIOm_zW5crzoiV9gT2t9O2CboGa3FmRhEzhN6LI3fvaDej2F5XfmwHLrExtZ6o/s1600/header-Make-the-passkey-endpoints-well-known-URL-part-of-your-passkey-implementation.png"></a>
<p><a href="https://developers.google.com/identity/passkeys" target="_blank">Kunci sandi</a> memimpin pergerakan menuju masa depan yang lebih aman tanpa kata sandi. Kunci sandi adalah tipe kredensial kriptografi baru yang memanfaatkan FIDO2 dan WebAuthn untuk menyediakan mekanisme autentikasi yang tahan terhadap phishing, mudah digunakan pengguna, mudah diimplementasikan, dan lebih aman daripada autentikasi berbasis kata sandi. Sebagian besar sistem operasi dan browser utama sekarang memiliki fitur dukungan penuh kunci sandi. Kunci sandi diharapkan dapat menggantikan kata sandi sebagai mekanisme autentikasi utama dalam waktu yang tidak terlalu lama, dan developer disarankan untuk mulai menerapkan solusi autentikasi yang mendukung kunci sandi sekarang juga.</p>
<p>Saat Anda mengimplementasikan kunci sandi di <a href="https://developer.android.com/training/sign-in/passkeys" target="_blank">aplikasi</a> atau <a href="https://developers.google.com/identity/passkeys/supported-environments" target="_blank">layanan web</a>, luangkan waktu sejenak untuk mengimplementasikan <a href="https://github.com/ms-id-standards/MSIdentityStandardsExplainers/blob/main/PasskeyEndpointsWellKnownUrl/explainer.md" target="_blank">endpoint kunci sandi URL terkenal</a>.</p>
<p>Ini adalah cara standar untuk mengiklankan bahwa Anda mendukung kunci sandi dan mengoptimalkan pengalaman pengguna. URL penting ini memungkinkan layanan pihak ketiga seperti pengelola kata sandi, penyedia kunci sandi, dan alat keamanan lainnya untuk mengarahkan pengguna mendaftarkan dan mengelola kunci sandi mereka untuk situs apa pun yang mendukungnya. Anda bisa menggunakan <a href="https://developer.android.com/training/app-links/verify-android-applinks" target="_blank">link aplikasi atau deep linking</a> dengan URL terkenal sebagai endpoint kunci sandi untuk membuka halaman ini secara langsung di aplikasi Anda.</p>
<p>Penggunaan alat manajemen kata sandi terus meningkat, dan kami berharap sebagian besar penyedia layanan akan mengintegrasikan manajemen kunci sandi juga. Anda bisa mengizinkan alat dan layanan pihak ketiga untuk mengarahkan pengguna ke halaman manajemen kunci sandi khusus Anda dengan mengimplementasikan endpoint kunci sandi URL terkenal.</p>
<p>Bagian terbaiknya adalah dalam banyak kasus Anda bisa mengimplementasikan fitur ini dalam dua jam atau kurang! Yang perlu Anda lakukan hanyalah menghosting sebuah skema sederhana pada situs Anda. Lihat contoh di bawah ini:</p>
<ol>
<li>Untuk layanan web di https://example.com, URL terkenal adalah <i>https://example.com/.well-known/passkey-endpoints</i></li>
<li>Ketika URL dikueri, responsnya harus menggunakan skema berikut:</li>
</ol>
<div><table class="leading-snug" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: #f8f8f8; border-collapse: collapse; border: none; font-family: ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; line-height: 1.375; max-width: min(90ch, 100%); table-layout: fixed; text-indent: 0px; width: 880px;"><colgroup style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border-color: rgb(229, 231, 235); border-style: solid; border-width: 0px; box-sizing: border-box;"></colgroup><tbody style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border-color: rgb(229, 231, 235); border-style: solid; border-width: 0px; box-sizing: border-box; display: block; max-width: 100%; overflow-x: auto;"><tr style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: transparent; border-color: rgb(229, 231, 235); border-style: solid; border-width: 0px; box-sizing: border-box; height: 0px;"><td style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border-color: rgb(229, 231, 235); border-style: solid; border-width: 0px; box-sizing: border-box; padding: 4pt; vertical-align: top;"><code class="m-0 p-0 whitespace-pre-wrap font-monospace" id="code-output" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: transparent; border-color: rgb(229, 231, 235); border-style: solid; border-width: 0px; box-sizing: border-box; display: block; font-size: 14px; margin: 0px; padding: 0px; white-space-collapse: preserve; width: 80ch;"><span style="font-family: courier;"><span class="hljs-punctuation" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border-color: rgb(229, 231, 235); border-style: solid; border-width: 0px; box-sizing: border-box;">{</span>
<span class="hljs-attr" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border-color: rgb(229, 231, 235); border-style: solid; border-width: 0px; box-sizing: border-box;">"enroll"</span><span class="hljs-punctuation" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border-color: rgb(229, 231, 235); border-style: solid; border-width: 0px; box-sizing: border-box;">:</span> <span class="hljs-string" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border-color: rgb(229, 231, 235); border-style: solid; border-width: 0px; box-sizing: border-box; color: green;">"https://example.com/account/manage/passkeys/create",</span>
<span class="hljs-attr" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border-color: rgb(229, 231, 235); border-style: solid; border-width: 0px; box-sizing: border-box;">"manage"</span><span class="hljs-punctuation" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border-color: rgb(229, 231, 235); border-style: solid; border-width: 0px; box-sizing: border-box;">:</span> <span class="hljs-string" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border-color: rgb(229, 231, 235); border-style: solid; border-width: 0px; box-sizing: border-box; color: green;">"https://example.com/account/manage/passkeys"</span>
<span class="hljs-punctuation" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border-color: rgb(229, 231, 235); border-style: solid; border-width: 0px; box-sizing: border-box;">}</span></span></code></td></tr></tbody></table></div>
<p><b>Catatan:</b> Anda bisa menentukan nilai URL yang tepat untuk <span style="color: #0d904f; font-family: Courier;">enroll</span> dan <span style="color: #0d904f; font-family: Courier;">manage</span> berdasarkan konfigurasi situs Anda.</p>
<p>Jika Anda memiliki aplikasi seluler, kami sangat menyarankan penggunaan <a href="https://developer.android.com/training/app-links/deep-linking" target="_blank">deep linking</a> agar URL ini membuka layar yang sesuai untuk setiap aktivitas secara langsung di aplikasi Anda untuk kunci sandi “enroll” atau “manage”. Ini akan membuat pengguna Anda tetap fokus dan berada di jalur yang tepat untuk mendaftar ke dalam kunci sandi.</p>
<p>Dan selesai!</p>
<p>Detail dan contoh selengkapnya bisa ditemukan di penjelasan <a href="https://github.com/ms-id-standards/MSIdentityStandardsExplainers/blob/main/PasskeyEndpointsWellKnownUrl/explainer.md#example-1" target="_blank">endpoint kunci sandi URL terkenal</a>.</p>
</div>
<hr>
</div>
</div>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-19362500810054565762023-10-25T20:25:00.002+07:002024-02-07T20:29:14.771+07:00Pengumuman Pembaruan Kebijakan Untuk Mendukung Kualitas Aplikasi di Google Play<html>
<head>
<meta charset="UTF-8" />
<meta name="original_url" content="https://android-developers.googleblog.com/2023/10/announcing-policy-updates-to-support-app-quality-on-google-play.html"/>
<meta name="original_url" content="https://android-developers.googleblog.com/2023/10/announcing-policy-updates-to-support-app-quality-on-google-play.html"/>
<style id="page-skin-1" type="text/css"><!--
body {
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
-webkit-font-smoothing: antialiased;
color: #202124
}
h1 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px
}
h2 {
font-size: 30px;
line-height: 40px
}
h2,
h3 {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500
}
h3 {
font-size: 24px;
line-height: 32px
}
h4 {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 26px
}
h5 {
font-size: 16px;
line-height: 24px
}
h5,
h6 {
font-family: Roboto, sans-serif;
font-weight: 600
}
h6 {
font-size: 14px;
line-height: 22px
}
.display {
font-family: Roboto, sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 67.2px
}
.hidden-text {
height: 1px;
overflow: hidden;
pointer-events: none;
position: absolute;
top: -10px;
width: 1px
}
img,
video {
border: 0;
height: auto;
max-width: 100%
}
body {
position: relative;
min-height: 100vh
}
body.no-scroll {
overflow: hidden
}
a {
color: #4184f3;
text-decoration: none
}
a:focus,
a:focus-visible {
outline-offset: -2px
}
.content-wrap {
padding-top: 200px;
max-width: 800px;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:915px) {
.content-wrap {
padding-top: 100px
}
}
.full-width {
width: 100%
}
.icon-link {
height: 42px;
width: 132px;
border-radius: 80px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-webkit-justify-content: baseline;
-ms-flex-pack: center;
justify-content: baseline;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
background: transparent;
border: none;
color: black !important
}
.icon-link:hover {
background-color: hsla(213, 7%, 76%, .2)
}
.icon-link:focus {
background-color: hsla(213, 7%, 76%, .26)
}
.icon-link:active {
background-color: hsla(213, 7%, 76%, .32)
}
.adb-container {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto;
max-width: 1420px
}
@media only screen and (max-width:767px) {
.adb-container {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--large {
margin: 40px auto;
padding: 0 40px;
position: relative;
width: auto
}
@media only screen and (max-width:767px) {
.adb-container--large {
margin: 24px auto;
padding: 0 20px
}
}
.adb-container--flex-horizontal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.section,
body {
margin: 0
}
.adb-card {
position: relative;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
margin: 40px 0;
padding: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: opacity .2s linear, -webkit-box-shadow .2s linear;
transition: box-shadow .2s linear, opacity .2s linear;
transition: box-shadow .2s linear, opacity .2s linear, -webkit-box-shadow .2s linear
}
.divider {
border: none;
height: 1px;
color: #DADCE0;
background-color: #DADCE0;
margin: 0 20px;
}
.adb-card:first-child {
background-color: #d7effe;
border: none;
padding: 32px 24px 32px;
margin: 40px 20px 60px;
}
@media only screen and (max-width:850px) {
.adb-card {
max-height: unset;
padding: 0 20px
}
.adb-card:first-child {
margin-bottom: 40px;
}
}
@media only screen and (max-width:600px) {
.adb-card:first-child {
margin: 0 -20px 40px;
}
.adb-card {
border-radius: 0;
padding: 0;
}
.divider {
margin: 0;
}
.content-wrap {
padding-top: 54px;
}
}
.adb-card:focus-within,
.adb-card:hover {
-webkit-box-shadow: 0 0 36px rgba(0, 0, 0, .1);
box-shadow: 0 0 36px rgba(0, 0, 0, .1);
cursor: pointer
}
.adb-card__href {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.adb-card__image-wrapper {
overflow: hidden;
position: relative;
width: auto;
-webkit-flex-basis: 40%;
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.adb-card__content {
padding: 24px 0 0
}
.adb-card__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 600;
margin-bottom: 12px
}
.adb-card__info {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 24px
}
.adb-card__description {
font-weight: 500;
font-size: 14px;
line-height: 20px;
margin-bottom: 48px
}
.adb-card:hover .adb-content__image-wrapper img,
.adb-card__href:focus~.adb-content__image-wrapper img {
-webkit-transform: scale(1.03);
transform: scale(1.03);
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease
}
.devsite-footer {
padding: 0 24px;
border-top: 1px solid #bdc1c6
}
.devsite-footer li {
display: block
}
.devsite-footer li a {
text-decoration: none;
font-size: 14px;
line-height: 16px;
color: #202124
}
.devsite-footer li a:focus,
.devsite-footer li a:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-linkboxes-list {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
padding: 24px 0;
border-bottom: 1px solid #bdc1c6
}
@media only screen and (max-width:767px) {
.devsite-footer-linkboxes-list {
grid-template-columns: 1fr;
padding-left: 0
}
}
.devsite-footer-linkbox {
display: block
}
.devsite-footer-linkbox-heading {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin: 0 0 4px
}
.devsite-footer-linkbox ul {
padding-left: 0
}
.devsite-footer-sites-list {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media only screen and (max-width:767px) {
.devsite-footer-utility nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
}
.devsite-footer-utility-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 24px 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
padding: 0
}
}
.devsite-footer-utility-button {
justify-self: flex-end;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
line-height: 20px;
margin-left: auto;
padding-left: 16px
}
.devsite-footer-utility-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 8px 0 0
}
.devsite-footer-utility-item:last-child {
margin-right: 0
}
@media only screen and (min-width:768px) {
.devsite-footer-utility-item:not(:first-child):before {
content: "|";
margin: 0 8px 0 0
}
}
.devsite-footer-sites {
border-bottom: 1px solid #bdc1c6;
padding: 24px 0 23px
}
.devsite-footer-sites-logo {
height: 32px;
margin-top: 5px;
width: 185px
}
.devsite-footer-sites-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0
}
.devsite-footer-sites-item {
margin: 0 0 0 40px
}
@media only screen and (max-width:767px) {
.devsite-footer-sites-item {
margin: 0
}
}
.devsite-footer-sites-link {
display: block;
padding: 8px 0;
color: #202124
}
.devsite-footer-sites-link:focus,
.devsite-footer-sites-link:hover {
color: #1a73e8;
outline: none
}
.devsite-footer-utility-link:focus {
text-decoration: underline
}
.devsite-footer-utility .devsite-footer-utility-button {
line-height: 20px;
font: 400 14px/16px Roboto, sans-serif
}
.devsite-footer-utility .devsite-footer-utility-button:before {
content: "";
margin: 0
}
@media only screen and (max-width:767px) {
.devsite-footer-utility .devsite-footer-utility-button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
margin: 18px 0 12px
}
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link {
border: 0;
background: #1a73e8;
color: #fff;
line-height: 36px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0 0 0 16px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px 0;
box-shadow: 0 1px 2px 0;
display: inline-block;
font: 500 14px/36px Roboto, sans-serif;
height: 36px;
letter-spacing: 0;
min-width: 36px;
padding: 0 24px;
text-align: center;
-webkit-transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, -webkit-box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s;
transition: background-color .2s, border .2s, box-shadow .2s, -webkit-box-shadow .2s;
vertical-align: middle;
white-space: nowrap
}
.devsite-footer-utility .devsite-footer-utility-button .devsite-footer-utility-link:hover {
background: #1765cc
}
.adb-page__title {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 44px;
font-weight: 500;
line-height: 61.6px;
text-align: center;
color: #202124
}
.adb-detail hr {
border: 1px solid #dadce0;
margin: 40px 0
}
.adb-detail__title {
font-size: 40px;
font-weight: 600;
line-height: 48px
}
.adb-detail__info {
font-weight: 400;
font-size: 16px;
line-height: 24px
}
.adb-detail__content {
min-height: 200px
}
.icon-sidebar {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
top: 0;
left: -300px;
max-width: 220px;
gap: 8px
}
.icon-sidebar .share-text {
font-weight: 500;
margin-left: 4px
}
@media only screen and (max-width:1440px) {
.icon-sidebar {
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
left: 0;
margin-top: -20px;
margin-bottom: 40px;
}
.icon-sidebar .share-text {
display: none;
}
}
.copy-tooltip {
display: none;
position: fixed;
bottom: 16px;
left: 10px;
z-index: 100;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.copy-tooltip .copy-tooltiptext {
width: 200px;
background-color: #073042;
color: #fff;
text-align: center;
border-radius: 80px;
padding: 8px 16px;
}
.header__overlay {
height: 100vh;
left: 0;
position: fixed;
width: 100vw;
border: none;
background-color: rgba(0, 0, 0, .4);
-webkit-animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
animation: fade-in .4s cubic-bezier(.39, .575, .565, 1);
opacity: 0;
top: 0;
z-index: -1;
display: none
}
.header__overlay.show {
display: block;
opacity: 1;
z-index: 800;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out
}
.social-icons__links {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
.social-icons__links path {
fill: #80868b
}
.social-icons__container-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
margin-right: 14px
}
@media only screen and (max-width:1000px) {
.social-icons__container-header {
display: none
}
}
.adb-blog-logo:focus,
.adb-blog-logo:hover {
opacity: .7;
text-decoration: none
}
.adb-blog-logo__image {
height: 32px;
margin-left: 0;
margin-top: 6px
}
@media only screen and (min-width:840px) {
.adb-blog-logo__image {
margin-left: 24px
}
}
.header {
position: fixed;
background: #fff;
z-index: 700;
top: 0;
width: 100%;
overflow: hidden;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
height: auto
}
.header .top-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 24px;
height: 50px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #e6e6e6
}
@media only screen and (max-width:839px) {
.header .top-row {
padding: 0 16px
}
}
.header .top-row__left,
.header .top-row__right {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
height: 100%
}
.header .nav-row,
.header .top-row__left,
.header .top-row__right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.header .nav-row {
background: #fff;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.header .nav-items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 50px;
position: relative;
background-color: #fff
}
@media only screen and (max-width:839px) {
.header .nav-items {
display: none
}
}
.header .nav-items tab {
position: relative
}
.header .nav-items tab.active .header__nav-item:after,
.header .nav-items tab:hover .header__nav-item:after {
background: #1a73e8
}
.header .nav-items tab.active .header__nav-item,
.header .nav-items tab:focus-within a {
color: #202124
}
@media only screen and (max-width:839px) {
.header .header__cta,
.header .nav-items {
display: none
}
}
.header__search-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 6px 0 6px 24px;
overflow: hidden;
position: relative;
margin-right: 36px;
border-radius: 4px
}
@media only screen and (max-width:767px) {
.header__search-container:not(.mobile) {
display: none
}
}
.header__search-container.mobile {
margin: 0 0 20px
}
.header__search-container.mobile #searchform,
.header__search-container.mobile .searchbox {
width: 100%
}
.header__search-container .searchbox {
border-radius: 2px
}
.header__search-container .searchbox input {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 28px;
font-weight: 500;
color: #80868b;
border: 0;
margin: 0;
height: 20px;
outline: 0;
padding: 8px 8px 8px 40px;
width: 100%;
-webkit-transition: background .2s;
transition: background .2s
}
.header__search-container .searchbox input::-webkit-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input:-ms-input-placeholder,
.header__search-container .searchbox input::-ms-input-placeholder {
color: #80868b
}
.header__search-container .searchbox input::placeholder {
color: #80868b
}
.header__search-container .searchbox input:hover {
background: #e8eaed
}
.header__search-container .material-icons {
color: #80868b;
left: 8px;
position: absolute;
top: 6px;
-webkit-transition: color .2s;
transition: color .2s
}
.header__cta {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #1a73e8 !important;
text-decoration: none
}
.header__cta.mobile {
padding: 18px 0
}
.header__cta:hover .cta-icon {
margin-left: 0;
margin-right: 12px
}
.header__cta .cta-icon {
-webkit-transition: margin-right .2s linear, margin-left .2s linear;
transition: margin-right .2s linear, margin-left .2s linear;
margin-left: 4px;
margin-right: 8px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.header__cta .cta-icon path {
fill: #1a73e8
}
.header__nav-item {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #80868b;
font-weight: 500;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0 18px;
height: 100%;
text-transform: none;
text-decoration: none
}
.header__nav-item:hover {
color: #202124
}
.header__nav-item.mobile {
font-weight: 500;
padding: 0
}
.header__nav-item:after {
bottom: 0;
border-radius: 3px 3px 0 0;
content: "";
display: block;
height: 3px;
left: 50%;
min-width: 20px;
position: absolute;
right: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: calc(100% - 24px)
}
.header__hamburger {
border: 0;
background: none;
outline: none;
padding: 0;
margin: 1px 8px 0 -4px;
padding: 8px;
color: rgba(0, 0, 0, .65);
cursor: pointer
}
@media only screen and (min-width:840px) {
.header__hamburger {
display: none
}
}
.header__side-menu {
background-color: #fff;
bottom: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1);
transition: transform .2s cubic-bezier(.215, .61, .355, 1), -webkit-transform .2s cubic-bezier(.215, .61, .355, 1);
z-index: 900
}
.header__side-menu.is-open {
-webkit-transform: translateX(0);
transform: translateX(0);
width: 80%
}
.header__side-menu.is-open,
.header__side-menu__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%
}
.header__side-menu__content {
padding: 18px 16px 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.header__side-menu__content .spacer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.header__side-menu__title {
font-family: Roboto, sans-serif;
font-size: 20px;
line-height: 26px;
font-weight: 500;
margin-bottom: 12px
}
.header__side-menu__items {
list-style: none
}
.header__side-menu__items li {
padding: 12px 0
}
.header__side-menu__items tab {
position: relative
}
.header__side-menu__items tab.active .header__nav-item,
.header__side-menu__items tab:focus-within a {
color: #202124
}
.header__side-menu__bottom {
border-top: 1px solid #e6e6e6
}
.header__side-menu__logo-container {
background: #fff;
height: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 4px 16px;
border-bottom: 1px solid #e6e6e6
}
#nav .widget {
margin: 0
}
.featured__wrapper {
width: 100%;
border: 0;
background-color: #e8f0fe;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 80px 0
}
@media only screen and (max-width:767px) {
.featured__wrapper {
padding: 0
}
}
.featured__inner {
max-width: 1080px;
width: calc(100% - 24px);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
padding: 48px
}
@media only screen and (min-width:768px) {
.featured__inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
padding: 12px 80px
}
}
.featured__href {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.featured__image {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 100%;
max-width: 100%;
}
.featured__content {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-top: 24px;
width: 100%
}
.featured__title {
font-size: 32px;
line-height: 44.8px;
font-weight: 500;
font-family: Android Euclid, Roboto, sans-serif;
margin-bottom: 15px
}
.featured__info {
font-family: Roboto Mono, monospace;
font-weight: 400;
font-size: 12px;
line-height: 160%;
margin-bottom: 24px
}
.featured__description {
margin-bottom: 48px
}
.preview.featured__wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #f1f3f4;
padding: 64px 0 120px
}
.preview.featured__wrapper h1 {
margin: 0 0 64px
}
.blog-label-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px
}
.blog-label-container .blog-label {
text-decoration: none;
z-index: 3
}
.blog-label-container .blog-label span {
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
background-color: #F1F3F4;
border-radius: 100px;
padding: 4px 16px;
color: #3c4043
}
.adb-card:first-child .blog-label span {
background-color: #fff;
}
.blog-label-container .blog-label span:focus,
.blog-label-container .blog-label span:hover {
background-color: #D7EFFE
}
.adb-card:first-child .blog-label span:focus,
.adb-card:first-child .blog-label span:hover {
background-color: #F1F3F4
}
.blog-label-container .blog-label span:focus-visible {
outline-offset: 0
}
#pagination-container {
display: none
}
.pagination {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
.pagination .page-button {
font-family: Android Euclid, Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: black;
background-color: #3DDC84;
padding: 16px 24px;
border-radius: 80px;
text-decoration: none
}
.pagination .page-button:focus,
.pagination .page-button:hover {
background-color: #3DDC8460;
}
.pagination .page-button.disabled {
color: #80868b;
background-color: #f1f3f4
}
--></style>
<style id="template-skin-1" type="text/css"><!--
--></style>
<style>
/** Blogger default styles **/
html, .Label h2, #sidebar .rss a, .BlogArchive h2, .FollowByEmail h2.title, .widget .post h2 {
font-family: Roboto, sans-serif;
}
.plusfollowers h2.title, .post h2.title, .widget h2.title {
font-family: Roboto, sans-serif;
}
pre, .post-content pre.prettyprint {
background-color: #f7f7f7;
border: 1px solid #ddd;
margin: 0 0 1em 0;
padding: 1em;
overflow: auto;
}
pre, code {
font-size: 9pt;
line-height: 125%;
font-family: monospace;
}
pre, code {
color: #060;
font: 13px/18px Consolas, 'Liberation Mono', Menlo, Monaco, Courier, monospace;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
/* Styles for https://github.com/google/code-prettify */
.com { color: #060; }
.kwd { color: #008; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.fb-custom img, .twitter-custom img, .gplus-share img, .email-custom img {
cursor: pointer;
opacity: 0.54;
}
.twitter-custom, .gplus-share, .fb-custom {
margin-right: 12px;
}
/** Blogger custom theme **/
.adb-header,
.searchBox input {
box-sizing: border-box;
}
.popout-nav {
background-color: white;
width: 280px;
height: 100%;
position: fixed;
z-index: 6;
left: -280px;
transition: left 0.2s;
}
.popout-search {
background-color: white;
width: 280px;
position: fixed;
z-index: 6;
right: -280px;
transition: right 0.2s;
top: 0;
}
.popout-search .widget {
margin: 0;
}
.popout-search #BlogSearch2_form .popout-options {
padding-right: 24px;
width: calc(100% - 48px);
}
.dropdown-nav {
display: none;
background-color: white;
width: 104px;
position: fixed;
padding: 4px 0px 3px 0px;
z-index: 4;
left: 352px;
top: 176px;
transition: top 0.2s;
box-shadow: 0 0px 2px 0 rgba(60,64,67,.3), 0 0px 6px 2px rgba(60,64,67,.15), inset 0 0px 6px -4px rgba(154,160,166,.5);
}
.dropdown-options {
align-items: center;
display: flex;
flex-wrap: wrap;
width: 94px;
height: 48px;
padding-left: 10px;
}
.dropdown-options:hover {
background-color: #f7f9fa;
}
.dropdown-options span {
color: #80868b;
}
.popout-options {
padding-right: 8px;
padding-left: 24px;
padding-top: 16px;
padding-bottom: 15px;
display: inline-block;
width: calc(100% - 32px);
border-top: 1px solid #ddd;
font-size: 13px;
font-weight: 700;
color: #80868b !important;
}
.popout-options:last-of-type {
border-bottom: 1px solid #ddd;
}
.popout-options:first-of-type {
border-top: 0;
}
#close-popout {
padding: 12px 12px 11px 20px;
}
#close-search-popout {
padding: 12px 20px 11px 12px;
text-align: right;
}
.popout-search-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
transition: opacity 0.2s;
}
.popout-overlay{
display: none;
opacity: 0;
background-color: black;
width: 100%;
height: 100%;
position: fixed;
z-index: 5;
transition: opacity 0.2s;
}
html {
background-color: #fff;
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
width: 100%;
position: absolute;
padding: 0;
/* This ensures that the scroll bar is always present, which is needed */
/* because render happens after page load; otherwise the header */
/* would 'bounce' in-between states. */
min-height: 150%;
}
h2 {
font-size: 130%;
}
h1, h2, h3, h4, h5 {
line-height: 1.5em;
margin-bottom: 1em;
}
html, h4, h5, h6 {
font-size: 14px;
}
a, a:visited {
color: #039be5;
text-decoration: none;
}
pre code {
display: block;
}
.cols-wrapper {
margin-top: 56px;
}
.header-outer, .cols-wrapper {
padding: 0 60px;
}
html, .header-inner a {
color: #212121;
color: rgba(0, 0, 0, .87);
}
/** Archive widget. **/
.BlogArchive {
font-size: 13px;
font-weight: normal;
}
.BlogArchive .widget- {
display: none;
}
.BlogArchive h2, .Label h2 {
color: #039be5;
text-decoration: none;
}
/* Specificity needed here to override widget CSS defaults. */
/* Months */
.Label {
font-size: 13px;
font-weight: normal;
}
.sidebar-icon {
display: inline-block;
width: auto;
vertical-align: middle;
height: 24px;
margin-right: 24px;
}
.sidebar-social-links {
align-items: center;
}
.sidebar-social-links .android-logo,
.android-logo {
height: 48px;
}
.sidebar-social-links a:last-child img {
margin-right: 0;
}
.Label .widget- {
display: none;
}
.searchBox input {
border: 1px solid #eee;
color: #212121;
color: rgba(0, 0, 0, .87);
font-size: 14px;
padding: 8px 8px 8px 40px;
width: 100%;
font-family: Android Euclid, Roboto, sans-serif;
background: url('https://www.gstatic.com/images/icons/material/system/1x/search_grey600_24dp.png') 8px center no-repeat;
}
.searchBox ::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(0, 0, 0, .54);
}
.section {
margin: 0;
padding: 0;
}
#sidebar-top {
border: 1px solid #eee;
}
#sidebar-top > div {
margin: 16px 0;
}
/*main post*/
.post {
margin-bottom: 30px;
}
#main .post .title {
margin: 0;
}
#main .post .title a {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: normal;
font-size: 24px;
}
.message, #main .post .post-header {
margin: 0;
padding: 0;
}
#main .post .post-header .caption, #main .post .post-header .labels-caption, #main .post .post-footer .caption, #main .post .post-footer .labels-caption {
color: #444;
font-weight: 500;
}
#main .post .post-header .published {
font-size: 11px;
font-weight: bold;
}
.post-header .publishdate {
font-size: 16px;
font-weight: normal;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#main .post .post-footer {
font-size: 12px;
padding-bottom: 21px;
}
.label-footer {
margin-bottom: 12px;
margin-top: 12px;
}
#main .post .post-header .published {
margin-bottom: 16px;
}
.post .post- {
color: #545454;
color: rgba(0, 0, 0, .67);
font-size: 16px;
margin: 16px 0 36px 0;
line-height: 24px;
word-wrap: break-word;
}
.post-summary {
display: none;
}
/* Override all post images/videos to left align. */
@media (max-width: 712px) {
.post- img {
max-width: 100%;
height: auto;
width: auto;
}
}
.post- .tr-caption-container img {
margin-bottom: 12px;
}
.post- iframe, .post- embed {
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
}
.post- .carousel-container {
margin-bottom: 48px;
}
#main .post- b {
font-weight: 500;
}
/* These are the main paragraph spacing tweaks. */
#main .post- br {
: '';
display: block;
padding: 4px;
}
.post-content .space {
display: block;
height: 8px;
}
.post-content iframe+.space, .post-content iframe+br {
padding: 0 !important;
}
#main .post .jump-link {
margin-bottom: 10px;
}
.post-content img, .post-content iframe {
margin: 30px 0 20px 0;
}
.post-content > img:first-child, .post-content > iframe:first-child {
margin-top: 0;
}
.col-right .section {
padding: 0 16px;
}
#aside {
background: #fff;
border: 1px solid #eee;
border-top: 0;
z-index: 2;
}
#aside .widget {
margin: 0;
}
#aside .widget h2, #ArchiveList .toggle+a.post-count-link {
color: #212121;
color: rgba(0, 0, 0, .87);
font-weight: 400 !important;
margin: 0;
}
#ArchiveList .toggle {
float: right;
}
#ArchiveList .toggle .material-icons {
padding-top: 4px;
}
#sidebar-top,
#sidebar {
background: #fff;
}
#sidebar .tab {
cursor: pointer;
}
#sidebar .tab .arrow {
display: inline-block;
float: right;
}
#sidebar .tab .icon {
display: inline-block;
vertical-align: top;
height: 24px;
width: 24px;
margin-right: 13px;
margin-left: -1px;
margin-top: 1px;
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget-content > :first-child {
padding-top: 8px;
}
#sidebar .active .tab .arrow {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#sidebar .arrow {
color: #757575;
color: rgba(0, 0, 0, .54);
}
#sidebar .widget h2 {
font-size: 14px;
line-height: 24px;
display: inline-block;
}
#sidebar .widget .BlogArchive {
padding-bottom: 8px;
}
#sidebar .widget {
border-bottom: 1px solid #eee;
box-shadow: 0px 1px 0 white;
margin-bottom: 0;
padding: 14px 0;
min-height: 20px;
}
#sidebar .widget:last-child {
border-bottom: none;
box-shadow: none;
margin-bottom: 0;
}
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style: none;
padding: 0;
}
#sidebar ul li a {
line-height: 32px;
}
#sidebar ul ul ul li a {
line-height: 24px;
}
#sidebar .archive {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiNDY23s9AAWBioBCwYBM8c+YMVsUmJibEGYBNMS5DaeMFfDYSZQA2v9I3FrB5AZeriI4FmnrBccCT8mhmGs1MwyAzAQQYAKEWG9zm9QFEAAAAAElFTkSuQmCC');
height: 24px;
line-height: 24px;
padding-left: 30px;
}
#sidebar .labels {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNpiNDY23s9AAMycOfM7UF05kHkZmzwTMkdSUhKrIcXFxZy3bt3qBjIN8RrS09PDsHnzZjCNDr58+cKQlpbGDjSoHcg1w2oIyAUODg5gARCNzUVIBrUCuVYYhjx//pzhwIEDYAEQDeJjA1CDWIAGNQK59jBxRuSABbkAlwHIgIeHh2HWrFn/1NTU2oDcvSgBS4wBSC5iArqoCsj1YGIgEyAZVMoEchqlBjEB/cZAiUHg2AEGznpKDAImxOeM////B4VLKtBvEUCngZ1ILKivr3/u6+ubBzJAGZQ9gC5aQoqLgAY8BhkAZL4BuQQkxgXE34A4BuiiZEIuAhrwEGhAEZD5DpzYoIaA2UAM4kQADUrHZRDUgAIg8wO2XAwzbQXQa5OweQ1owB10AyA6gS7BgX1u3ry5397eHow3bdo0EyjGi00tQIABANPgyAH1q1eaAAAAAElFTkSuQmCC');
height: 20px;
line-height: 20px;
padding-left: 30px;
}
#sidebar .rss a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX5JREFUeNqsVDGSgkAQHL2rIiIikohIc/EBRkbwAIwuwgfwAXiAD9AHSI7kEkECRCb6AIyINDLx7K0aa6kT7uq0q7YYtnZ7umdnt7darXbr9Zpegeu61DNNc0dvwCcH4/GYJpMJnc9nOhwOVJbl/4hAAokMECZJQtvt9k+kH7qufyEYDAakqqqYxFdRFBqNRmTbNg2HQ0rTlK7XayvR0xqBdDqdkuM4dE/0ULhYLOh4PHYrknG5XGi/31MYhuL/nkwonM1mlGUZ1XXdrsiyLGEDhY7juJEZ1u5tIixDGdYhmYw+B7CAzPP5nDabjdgIAgCksMX1832/3drtdqPT6SQWapomiGEFNkDEdpDMMAzK81ys/7XYy+XyoQgq2WoURSIJ2iIIgp/WZCCTvFm2wgeAU31aI3Q2GhIDMeB53qPYPIcm5VrxXIOIOxsDMStjVawAc1VViRgN22lNBiuQN3GR+SY07hpOoStmFQAKXRRFY93bnpG+fONfedi+BRgAbkS8Fxp7QQIAAAAASUVORK5CYII=');
}
#sidebar .subscription a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUBJREFUeNrMkSGLAlEUhb+ZB4JFi8mx2cz+ApvhRUGTcUCrNqNJDYIi+DO0GUwmQXDK2DSIoGgZcSaIjDrzwrK4ssvChj1w0733O+fdp+m6PozH4yQSCfb7Pa7r8pOi0SjJZBLP8zgej4gAIMvlMuPxmADIYrHger1+C6lUKmo+NJ/NZojb7SZDWiwWo1qtks1msW2bw+HwZdkwDHq9HvV6nel0SqvVYrvdIh6Ph3Qch+VyqRYLhQJSSjRNw7IsfN9XgGKxSLfbJZfL0e/3aTabrFYr7vc7IujLcOh8PqunrNdr0uk0pVKJVCpFJBJRgEajweVyod1uMxgM2O12BAGUgRbU8DV2JpOhVquRz+cRQii3+XxOp9NRN3jVR5LPOp1OjEYjlSL8hclkgmmabDabt4d+m+S30vkD/R/IU4ABAPTZgnZdmG/PAAAAAElFTkSuQmCC');
}
#sidebar-bottom {
background: #f5f5f5;
border-top: 1px solid #eee;
}
#sidebar-bottom .widget {
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
text-align: center;
}
#sidebar-bottom > div:last-child {
border-bottom: 0;
}
#sidebar-bottom .text {
line-height: 20px;
}
/* Home, forward, and backward pagination. */
.blog-pager {
padding-top: 10px;
margin-top: 15px;
text-align: right !important;
}
#blog-pager {
padding: 40px 0 0;
}
#blog-pager a {
display: inline-block;
}
.blog-pager i.disabled {
opacity: 0.2 !important;
}
.blog-pager i {
color: black;
margin-left: 16px;
opacity: 0.54;
}
.blog-pager i:hover, .blog-pager i:active {
opacity: 0.87;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
.gplus-profile {
background-color: #fafafa;
border: 1px solid #eee;
overflow: hidden;
width: 212px;
}
.gplus-profile-inner {
margin-left: -1px;
margin-top: -1px;
}
/* Sidebar follow buttons. */
.followgooglewrapper {
padding: 12px 0 0 0;
}
.loading {
visibility: hidden;
}
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 40px !important;
}
/* ADB */
.adb-hero-area {
min-height: 104px;
background-color: #073042;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
z-index: 5;
position: fixed;
width: 100%;
}
.adb-hero-logo {
height: 80px;
position: absolute;
top: 12px;
left: 16px;
}
.adb-footer-btm {
display: flex;
margin: 0 24px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 40px;
}
.subscribe-btn {
color: black;
background-color: #3DDC84;
border-radius: 100px;
font: 500 16px/24px Android Euclid,Roboto,sans-serif;
padding: 12px 24px;
border: 0;
}
.adb-footer-info {
align-items: center;
display: flex;
padding: 0;
margin: 9px 0 0 -8px;
font-size: 13px;
}
.footer-list {
list-style: none;
padding: 0 8px;
}
.subscribe-info {
list-style: none;
padding: 0 8px 0 0;
font-size: 13px;
color: black;
}
.footer-newsletter {
display: flex;
align-items: center;
}
.adb-header-inner {
display: flex;
align-items: center;
}
.adb-header {
background-color: white;
color: #fff;
height: 48px;
left: 0;
overflow: hidden;
padding: 36px 24px;
right: 0;
top: 104px;
z-index: 4;
display: flex;
align-items: center;
position: fixed;
border-bottom: solid 1px #DADCE0;
}
.adb-shadow {
margin-top: 48px;
height: 1px;
width: 100%;
position: fixed;
background: white;
z-index: 2;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
}
.adb-logo-box {
display:inline;
}
.adb-burger-box {
display: none;
margin: 0 16px 0 0;
}
.adb-search-box {
display: none;
margin: 0 0 0 16px;
}
.adb-htag-box {
display: flex;
align-items: center;
}
.adb-header-tags {
padding: 0 24px 0 0;
}
.adb-header-tags ~ .atb-header-tags {
padding: 0 24px;
}
.adb-header-tags a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #5F6368;
}
.adb-header-tags a:hover {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #073042;
}
.more-dropdown {
display: none;
}
.dropdown-icon {
transition: all 0.3s;
}
.adb-header-logo {
display: inline-block;
vertical-align: -11px;
width: 134px;
height: 32px;
}
.adb-header-title {
color: #fff;
display: inline-block;
font-size: 20px;
font-weight: normal;
}
.adb-header-links {
border-left: 1px solid rgba(0, 0, 0, .1);
display: block;
left: 250px;
list-style: none;
margin: 0;
padding: 12px 0 12px 18px;
position: absolute;
top: 0;
}
.adb-header-link-item {
display: inline-block;
}
.adb-header-link, .adb-header-link:visited {
color: #fff;
display: inline-block;
font-weight: 500;
opacity: .7;
padding: 12px 9px;
text-transform: uppercase;
vertical-align: 2px;
}
.adb-header-link:hover, .adb-header-link:focus {
color: #fff;
opacity: 1;
}
.adb-header-console, .adb-header-console:visited {
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
color: #fff;
float: right;
font-size: 14px;
font-weight: 500;
line-height: 28px;
padding: 4px 10px;
position: relative;
text-transform: uppercase;
transition: box-shadow .2s;
z-index: 60;
}
.adb-header-console:hover {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
color: #fff;
}
.adb-header-console:focus {
background-color: rgba(63, 81, 181, .1);
color: #fff;
}
.adb-header-console-image {
vertical-align: -5px;
}
.adb-hero {
background-color: #dcedc8;
margin-top: 64px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
color: #414141;
display: inline-block;
font-weight: 500;
margin: 25px 25px 0;
}
.adb-hero-inner {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAc4AAADZCAMAAACenCAVAAAAvVBMVEXc7cjY68PT6bvR57fQ57bY6sPZ68TU6bvR6LfP5rTQ57XR57jW6r7b7cfa7MbS6LnS6Lrb7cbQ6Lfb7MbX6r/Z68PY6sLV6b7U6b3U6r3T6LnX68Da7MXP57Tb7Mfc7cfW6b/P57XS57nY68LY68HU6L3W6r/W6b7T6brX6sDV6rzQ57fa7MTV6b3T6Lra68TR57bX68HW6sDS57jU6bzO5rTP5rXZ7MXR6LbZ68XX6sHT6LvV6bzS6LjZ7MILrTuqAAAIyklEQVR4AezXhXEkUQwE0B6+Xhg8MzND/smZ4UsLBSb9Kr0UhI1vl6RZnqUFlnBl9Y+j8WQK4+qGr9oOi7iKr0YFTOt6vhsPmM81/FDAspafUszl/vNTXsOuFYZWMYfrRgyswa51hjLM4TYYGsOuTQpbgNO2dyjAroxCvgunpZT2YFZDaQKnlFRg1z6lgxpOOqS0CbtqKutwwhGVYxh2QqWGC/WUMlhWH1BK4QKnVFZh2hmVEh/cXk7pHLbt5pQafHCT6Jr9gsoR3riayiXMyyhd4Y27jDDHJVQu8MJdU7lBBBpKoz08c7eU8gERuKNyhiduhcopolBRqeGAMaV7xKE7eGzvThQTVZooAJdC1AM2qGg0BhdCrpnciVE0i9dZ3v+t/n2ZMBtJGpsu6nuCrNJddar4/gAnMmuP/GPk3JFwrL2QKw3FD26GyGmQNXbIGVHNKdfmYraDl/ZUcxO8NNtIW888bafDC7tP5R2qtQfL724N5AypxjbIGdseWHMV1VfP+rrnZvbTerMEhHb2Py4eA7KX9AwD5LSppi5ZdPTHEhv6cd5mSjZaeMW/Dc66TEpkO+Q0qIbUE5es6ke85FMN/YGXZs9yQLdXYGVASGJDBaMZXsQouzau/fzfitNsKvpUL1O8dFBksb+Q80C1coaco7RtLeYzO9tHCV7qUY0ckXPGribSoNpQB3Z1MbWtby1hiZwWw35CRjUReRx7Sg5ecqgmJiyHOxrIWVEtPDPNY/TMx4bmczq5T3jpSRELm1NWodVmlGY364tP4ZXvdw5u8jjDf8yQJJ7j+2HYfBh3d+l5HFB5RmyzjM3yh8iDUbb6M9y7j3idgxM+3BzTuPzyXmdOTARJaUc8tUmX7ekB7+aF7dV1a0G6pIx3CkxKmBBUreMfvS0086aTnZZf6kfG53mlN/0UnS2bW5Socz9OA737eM6JkZWu4uUiXfVcnIT34eZM6Yq9hcRKR0OpL7i9cHBi/udjrCOUuiFWsnc2/oKsfYAhXvM2lsj4S/7b2/L9y4cODDu0j8HbBzqSPvutOksqpDH+gorw1+dvHLcaEzv3r4+0BdmnBJXi9bL+G6qaEbFz98rF4sEwnKGKrrrxK3sOuzoMlM9i+ql47KPC/HX8inTxljgKUHBYI1g6qDx/HBct76XETfHF4v3hHpZwVgH9APc0TfFSyTwLZ7DJ9FYxmZvTv1h89DmBdbyHEX0rcuuTRB38fNuQ2vmw1GAYMSjv6ZwQbD0ksFlz9LPW7gMxNv3RBVtlDqz3cbWo32rmEXLGFExcsJBMnilGzk29pleT5gx8fLiq2XzyM2rllpiboEYGxF2UoD6+EntL1Ma+TkOP/LVqNJLM3yeqgayDmnjqKmIu3aNGDhlx1pqiZvyUuAqaqKGwRRwt1gnqqR0QO5ce6ms5J1ZGIWqtkxIf0QNqb7ohJjIXgFjPiYF4j38R2wbZTk1m+C/xqU9WSzv4hkgyVkcg0QvIUg0XEHleRjaK/gQb8g/a2EL8hHcky6zxC+JTQBa5c/BL4nBO1lgl+B2xJjv0QxQgnA1ZoOGhGHFNldedoShxMadKU/d4BeEEVGF3Ll5FJF+psm7Bh5xwHyDeoKeogvp7iDfpbKhyWgeIN/JSqpjbBOLtlqwq7qJNFdKGeKdQUUUEIcS7Df6iSngeQAPhtqgCWi60EElKxjUSsCFriK5nYEMuLDtoJSZk0BiaiaYsZGPlXnEqHoipIhOaKIW4WnD63xThgtP/pthHdFqfUCIRRvK/KZ+3VX1uiulc7puc3EstSOpD9d7+LYGTFfiQenyKkxE3VLLGI9iQkcH4CackzqlEwRYnJbwNlUb5ODHhBVSWHk5O+JFMLkh5qFYxLxnoPZ9BmJGRdrELNuTddNEAwhg34NSvFnvSqgth1ANpNEIZkhkYSg4dt9rHocCFXvvxWUD/ELR2TQ98hMOWon+Ks7YLrZI70iWETu6yT99Qt3uw4A4j+lY6hU4dVcloUFdR3tkA1kt29J1zHxr1SIsGNAoDnvGjMCj/CLmr3INzQj9x5sFm41Ns933c0PtNoc+O0bJNA9+Xryp14+zSL9x5PH6beS2vQrfP0exkQcMG08BdCn1SepeFc8KPijWs5MxPdzN4CipzR2nQb8wdnu0O5UKbkN7h/LQZ/a9Ms+pZNYp9kQt9Yvo9H3Yx8H15QSXm/qZUQMY0ybOCPtNKlIMuqYAogW1SKkBBoxW9SXSARoqKCGGbBRVxBY0C85V3h2mb/MrASGxIb3BnYlaxwXRmLwUMFxMc6NSlQvpM6nt5MXTylOl00JGKYTqxp6DVBb1SkECrlOmvs0HFGA7efjA0dwrLfKVC5tDLp1dpGHrGKFjm0tCZYEWvMTA0NrOBZVZUSMtoLn4I3T5RISnTZTGXJrea9BPotmU6QrqlQi6gXWx05V5MRTiwTaD/4aW5FN8y9pCJYZ2usSPBNRUzNfapNIZ1fGM7KQdUSMNYJyl6Ajh2yAKTBUYHpfCZruJ0jB3wCpVur1GSIf3G8yOPlG1ePDN46d2iJEmLR+86L4lNBRQTZXK/6UAxunMWDxC3Da6omXsoz5XiOa8/NfV9JYHRXVBXiudG8r0y9Jmzpl87oFSDFv3Qog2rDTb0Q6qJckX0K7coWTKkHxh1YLmkSz/Q6JjNKnVQOj+lnM0nMPDxmnLuPhjej5rhFLbjmP4nOF6BCXfdov8JLkPj+xcdnMjh03p3nWXLBwesuB/+GGbHXbc5wIkkSt7CwEmXU1lGbPX3OYVBt5y2Yoov9EN/QVhpJK9xZL/7P4Kw1LO8iIH7qxx8CEu5zG8pcldpQ1hrSjnBI4S9YnrpBsJiEzkIcfIkByFWUqkIcdKjb7kQdos49a3Fjv7vE4TlfPoflYAPuXoeIaw3pv+6h7CeQ/8RPYIP6XpegwGxknMtwxcqK7AgAqkhcDKkf3oAI9LE9sCDWGhf4S8M70peggnxQERTMCFcIjUDF+KOUrAhhvQANkT4dwEsPvJYWz4QAAAAAElFTkSuQmCC');
background-position: bottom right 70px;
background-repeat: no-repeat;
background-size: auto 100%;
margin: 0 auto;
max-width: 980px;
padding: 0 60px;
position: relative;
}
.adb-hero-back-icon {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.adb-hero-title {
font-size: 22px;
line-height: 28px;
padding: 24px 24px 0px 112px;
}
.adb-hero-title a {
color: #FFFFFF;
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 500;
}
.adb-hero-summary {
font-size: 16px;
line-height: 24px;
padding: 8px 24px 8px 112px;
}
.adb-hero-summary a {
color: rgba(255, 255, 255, 0.9);
}
.adb-hero-description {
color: #6f7172;
font-size: 16px;
margin: 0;
max-width: 440px;
padding-bottom: 32px;
}
.adb-hero-search {
position: absolute;
top: 19.35%;
right: 1.94%;
}
.adb-hero-search .searchBox input {
border: 1px solid #80868B;
border-radius: 4px;
color: white;
}
.adb-hero-search .searchBox input::placeholder {
color: #F1F3F4;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
padding-left: 12px;
}
.adb-hero-link {
position: absolute;
right: 1.67%;
top: 64.52%;
}
.adb-hero-link a {
font-family: Android Euclid, Roboto, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #3DDC84;
letter-spacing: 1.4px;
}
.adb-hero-arrow {
display: inline-flex;
font-size: 24px;
vertical-align: middle;
}
.adb-socials-box {
display: flex;
position: absolute;
right: 1.67%;
}
.adb-socials-category,
.adb-socials-divider {
display: flex;
align-items: center;
}
.adb-socials-divider {
color: #DADCE0;
font-size: 40px;
font-weight: 100;
margin: 0 20px;
}
.adb-socials-category img,
.adb-footer-social-links img {
height: 24px;
}
.adb-footer-social-links-img {
margin-right: 20px;
}
.adb-hero-subscribe, .adb-hero-subscribe:visited {
background-color: #90c653;
color: #fff;
display: inline-block;
border-radius: 3px;
margin: 25px 0 60px;
padding: 13px 32px;
text-transform: uppercase;
}
.adb-hero-subscribe:hover, .adb-hero-subscribe:focus {
background-color: #333;
}
.adb-footer {
margin: 32px auto 64px;
}
.adb-footer-more {
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #f0f0f0;
padding: 30px 0;
}
.adb-footer-more a {
color: #000;
display: inline-block;
font-size: 20px;
font-weight: 300;
margin-right: 16px;
}
.adb-footer-social {
float: right;
margin-top: -62px;
}
.adb-footer-social a {
background-color: #ccc;
background-position: center;
background-repeat: no-repeat;
background-size: auto 16px;
border-radius: 50%;
display: inline-block;
height: 36px;
margin-left: 16px;
transition: background-color .1s;
width: 36px;
}
.adb-footer-social-youtube {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAQAAAAxWje/AAABLUlEQVQ4y6WUvUoDYRBFr42gCdhK8AV8BwsVC0FQfIQUgr5DIKJoGy1CfAaDq1hIGn8K2xDSaBc1wUJJEYmbkDXssdi1Mrvfst9tZ+bAzNwZSZLEAmvsUKTCBQ80eaWLyxiAMS5dXmhyT5UyBfIsM68/McM1aXRDJgCUSKsTSWQZpAa4ZMUmNtoSRxGhbd4TAI7F1eSIxBwVfAPgUtSjAJLEEk+xgLroxAEkpikyigS0RS8eIEks8hgB6ImhGSAxxS5fE9JGwksCkCRyOP/SfPFjC0jawl5UC9ZDbBvXuB+zxjezkZ5NRnJirHxmtLIjDq2O6UBsWJ3zut1D+WZWEqepAaVg0hlqqcpr4VMNbbpKngJlqtzRoMUnfTx8fDz6fNCiwS3n4VtfIRdU/gLTrSb7DGWLcQAAAABJRU5ErkJggg');
}
.adb-footer-social-youtube:hover {
background-color: #f44336;
}
.adb-footer-social-gplus {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAUCAQAAACpWpz6AAABJUlEQVQ4EZXBTUoCYQDH4X9hTS3Cja0Kyb2X6BCJoLlr1aKwK1QHCMMzWLiqTcuWXaAWQWIlU1DQh4QJ+Wt4X95x0hGn55FCeGzSpMUXXW45ocSC/oMiHUZ1KCgZZqkzyZaSoM7QgCd8BlgXLGo6ijgv7JJRgAxV3jjDUwwMOXh0sK5ZUQRZ5hQLQw4VrA/WlBCGHJpY+0oMQw5trLxCjNtTgFiij5VSiHFHChBL9LFSCjGurgCxRBsrrxA+Pj4+Pl2sQ0VgyKGJdaAYNLAqisCQQxnrk5xGkKOHlVUEhhw8HrFuWFUEaa6wLvUHhoYo4LxSZVkBlihzh7OuaagR9YzPD0PHmo5ZakzSIKVk2OCBUe/sMKPkmKfEKS16fHPPOduklcAvR50zMVwhTI4AAAAASUVORK5CYII=');
}
.adb-footer-social-gplus:hover {
background-color: #f44336;
}
.adb-footer-social-twitter {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAQAAAB0gUQ+AAABI0lEQVQ4EY3BQShDAQDH4f+zTSyJuLgoLlwclYOTHCwHu9ouiLRScpUmNwduDkpCSTs4LAeJhINoOTo4ctHkskyJtf20vWbe3tvb+z7JFUGibLHPMj0qoYEWSYzRKkdMkKbsm3m6WSRFuyQeuKNNNoTJU61ABL8kssAjvbKgiTR2V+ywJol3ijJMY+gP4zhLEpDEGWUpwvhUQgwnh/hURIT/3thjjmGWcBKViSCXeBWSiWdO+MGbPpm4watPfDIRxasLVXCANwuqwCDGK/V80akKGjnmmgLutmXFOvV80CUrAiRxNys7DCY5J4OzXdVCP7c4OcIvO5oJkSCHXZ5VDFkxwilP5HB2z6Cc0EGcF6plSTAqNxgMMEWcTTZYYYYhAqrpF0uh1zgYi1hVAAAAAElFTkSuQmCC');
}
.adb-footer-social-twitter:hover {
background-color: #55acee;
}
.adb-footer-social span {
display: none;
}
.adb-footer-related {
padding-top: 8px;
}
.adb-footer-related a {
color: #999;
font-size: 12px;
white-space: nowrap;
}
.adb-footer-related a:not(:last-child)::after {
content: '|';
cursor: default;
margin: 0 7px 0 10px;
}
.adb-footer-section {
margin: 48px auto;
max-width: 700px;
}
.adb-footer-title {
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #3C4043;
margin-bottom: 24px;
}
.adb-footer-columns {
display: flex;
justify-content: space-between;
}
.adb-other-blogs-title img {
margin-right: 8px;
vertical-align: -12px;
}
.adb-footer-social-label {
display: flex !important;
align-items: center;
}
.adb-footer-column a,
.adb-footer-social-label,
#footer-subscribe .tab h2 {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px;
padding: .85em 0;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-btm a {
color: #000;
font-family: Android Euclid, Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.25px;
opacity: .7;
transition: opacity .1s;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
display: table;
margin: 0;
page-break-inside: avoid;
}
.adb-footer-column a {
opacity: .7;
transition: opacity .1s;
}
.adb-footer-column a:hover {
opacity: 1;
}
.adb-footer-social-links {
margin: 0 0 20px;
}
#footer-subscribe .widget {
margin: 0;
}
#footer-subscribe .tab {
display: flex;
align-items: center;
}
#footer-subscribe .tab img {
height: 16px;
}
.adb-label-view-more-toggle {
cursor: pointer;
}
.adb-label-view-more-toggle::after {
content: '\00e5c5';
float: right;
font: 2em / .7 Material Icons;
opacity: .6;
}
.adb-label-view-more-toggle.active::after {
transform: rotate(180deg);
}
/** Desktop **/
@media (max-width: 900px) {
.col-right {
display: none;
}
.col-main {
margin-right: 0;
min-width: initial;
}
.cols-wrapper {
min-width: initial;
}
.adb-hero-inner {
background-image: none;
}
}
/** ADB header breakpoint **/
@media (max-width: 768px) {
.adb-header-links {
display: none;
}
.dropdown-nav {
display: none;
}
.adb-header {
padding: 12px;
text-align: center;
}
}
@media (max-width: 1196px) {
.breakpoint-hide {
display:none;
}
.more-dropdown {
height: 50px;
display: flex;
align-items: center;
}
}
@media (max-width: 915px) {
.adb-header {
height: 0;
margin: 0;
padding: 0;
display: none;
}
.adb-header-tags {
display:none;
}
.more-dropdown {
display:none;
}
.dropdown-nav {
display: none;
}
.adb-hero-summary,
.adb-hero-link,
.adb-socials-category {
display: none;
}
.adb-hero-title {
padding-left: 152px;
}
.adb-hero-logo {
height: 52px;
top: 12px;
left: 120px;
}
.adb-footer-section {
margin: 0 auto;
}
.adb-footer-btm {
margin: 0 24px 40px;
}
.adb-hero-area {
min-height: 76px;
}
.adb-burger-box {
display:inline;
position: absolute;
top: 17px;
margin-left: 24px;
font-size: 32px;
color: white;
}
.adb-hero-title a{
margin-left: 40px;
}
}
/** Tablet **/
@media (max-width: 712px) {
.header-outer, .cols-wrapper {
padding: 0 40px;
}
/* ADB */
.adb-hero-inner {
padding: 0 40px;
}
.adb-hero-title {
font-size: 16px;
padding-left: 132px;
}
.adb-hero-logo {
left: 100px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 36px;
}
.adb-other-blogs-list {
columns: auto;
}
.adb-other-blogs-title {
font-size: 20px;
}
.adb-other-blogs-title img {
height: auto;
vertical-align: -6px;
width: 32px;
}
.adb-footer-section {
margin: 0 24px;
}
.adb-footer-more {
padding-bottom: 75px;
}
.adb-footer-social {
float: none;
margin-bottom: 35px
}
.adb-footer-social .adb-footer-social-youtube {
margin-left: 0;
}
}
/** Small tablet **/
@media (max-width: 600px) {
.header-inner .google-logo {
top: 32px;
margin-top: 0;
}
.header-inner .google-logo img {
height: 56px;
width: auto;
/*
height: auto;
width: 188px;
*/
/* Override any optical adjustments at desktop size. */
top: 0 !important;
}
.header-left {
left: 0;
top: inherit;
bottom: 24px;
}
.adb-footer-columns {
display: block;
}
.adb-footer-column {
margin-bottom: 48px;
}
.adb-footer-column a {
opacity: 1;
}
.adb-footer-social-label {
padding: 0;
}
.adb-footer-column .widget a {
padding: 0;
}
.footer-newsletter {
margin-top: 16px;
}
.subscribe-btn {
width: 100%;
}
.adb-hero-search {
display: none;
}
.adb-search-box {
display:inline;
position: absolute;
top: 24px;
right: 24px;
font-size: 24px;
color: white;
}
}
/** Mobile **/
@media (max-width: 480px) {
.header-outer, .cols-wrapper {
padding: 0 16px;
}
.adb-hero-logo {
height: 28px;
top: 24px;
left: 76px;
}
.adb-hero-back, .adb-hero-back:link, .adb-hero-back:visited {
margin-left: 16px;
}
.cols-wrapper {
margin-top: 0;
overflow-x: auto;
}
.post-header .publishdate, .post .post-content {
font-size: 16px;
}
.post .post-content {
line-height: 28px;
margin-bottom: 30px;
}
.post {
margin-top: 30px;
}
.byline-author {
display: block;
font-size: 12px;
line-height: 24px;
margin-top: 6px;
}
#main .post .title a {
font-weight: 500;
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
}
#main .post .post-header {
padding-bottom: 12px;
}
#main .post .post-header .published {
margin-bottom: -8px;
margin-top: 3px;
}
.post .read-more {
display: block;
margin-top: 14px;
}
.post .tr-caption {
font-size: 12px;
}
#main .post .title a {
font-size: 20px;
line-height: 30px;
}
.post-content iframe {
/* iframe won't keep aspect ratio when scaled down. */
max-height: 240px;
}
.post-content .separator img, .post-content .tr-caption-container img {
margin-left: -16px;
max-width: 100%;
}
.post-content table {
table-layout: fixed;
width: 100%;
}
/** List page tweaks. **/
.list-page .post-original {
display: none;
}
.list-page .post-summary {
display: block;
}
.list-page .comment-container {
display: none;
}
.list-page .label-footer {
display: none;
}
.list-page #main .post .post-footer {
border-bottom: 1px solid #eee;
margin: -16px 0 0 0;
padding: 0 0 20px 0;
}
.list-page .post .share {
display: none;
}
/** Detail page tweaks. **/
.detail-page .post-footer .cmt_iframe_holder {
padding-top: 32px !important;
}
.detail-page .label-footer {
margin-bottom: 0;
}
.detail-page #main .post .post-footer {
padding-bottom: 0;
}
.detail-page #comments {
display: none;
}
/* ADB */
.adb-header-console {
display: none;
}
.adb-hero-inner {
padding: 0 16px;
}
.adb-hero-title {
color: #4c4c4c;
color: rgba(0, 0, 0, .70);
font-weight: 500;
line-height: 30px;
padding-left: 80px;
}
}
/* Fixed-position sidebar for larger screens */
@media screen and (min-height: 700px) and (min-width: 1100px) {
.col-right .section {
max-height: calc(100vh - 197px);
overflow: auto;
}
.col-right.scroll-start {
left: 50%;
margin-left: 241px;
position: fixed;
top: 96px;
}
.col-right.scroll-end {
bottom: 485px;
position: absolute;
top: auto;
}
}
[data-about-pullquote], [data-is-preview], [data-about-syndication] {
display: none;
}
#imgFull {
display: block;
margin: 10px auto;
width: 90%;
border: 0;
padding: 0;
}
#imgHalf {
display: block;
margin: 10px auto;
width: 50%;
border: 0;
padding: 0;
}
#flexParent {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
#flexImg {
width: 90%;
margin: 0;
padding: 0;
border: 0;
}
#imgCaption {
text-align: center;
font-style: italic;
font-size: 85%;
margin: -5px 0 10px 0;
padding: 0;
border: 0;
}
#floatRight {
float: right;
width: 45%;
margin: 5px 0 5px 5px;
padding: 0;
border: 0;
}
#floatLeft {
float: left;
width: 45%;
margin: 5px 5px 5px 0;
padding: 0;
border: 0;
}
</style>
<style>
.loading {
visibility: visible;
}
</style>
</head><body>
<div class="adb-detail">
<div class="adb-detail__info">
</div>
<div class="adb-detail__title">
</div>
<hr>
<div class="adb-detail__content">
<div>
<meta content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwclriC-7IBONM2_u4SFxiXuwoIbRUqBml5xxtyJpl8rNXpIN7pBRArV1jpDkZNHX7Jx8CTuEMkE5HI7NfA6lTiFzSTX-AhestAHVNeSd-_bIkXwV_eGx7tnTa3IG26A1H0HnbRTsj2lgJ-Z51TP3a7EaIcxl8BVjIZ5k1uIlVq1OXDLDra2VJ-m0VG8/s1600/Nairobi-Bundle-Play-Policy-Social-V3.png" name="twitter:image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwclriC-7IBONM2_u4SFxiXuwoIbRUqBml5xxtyJpl8rNXpIN7pBRArV1jpDkZNHX7Jx8CTuEMkE5HI7NfA6lTiFzSTX-AhestAHVNeSd-_bIkXwV_eGx7tnTa3IG26A1H0HnbRTsj2lgJ-Z51TP3a7EaIcxl8BVjIZ5k1uIlVq1OXDLDra2VJ-m0VG8/s1600/Nairobi-Bundle-Play-Policy-Social-V3.png" style="display: none;">
<em>Diposting oleh Karina Newton, Senior Director, Global Product Policy, Developer Policies</em>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnoC__J1uFasXMHiSDDhZKn7_SofyFO4e7RlF5geIzbwf48JJDqDTSpGdrgyk1pVI-ywG59fUSHk-eyccEMy3TGRHkG6pKWzaPuqF-xkoQJI7OOa9H_rVZoCDj6mdW5BYLGhdOs7VP2aZkP7zvHnymCeFGyuF6e7NF_X8ZIoV2pmpkdEiIJqyZcZO7Nso/s1600/Nairobi-Bundle-Play-Policy-Banner-V3.png"><img border="0" data-original-height="800" data-original-width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnoC__J1uFasXMHiSDDhZKn7_SofyFO4e7RlF5geIzbwf48JJDqDTSpGdrgyk1pVI-ywG59fUSHk-eyccEMy3TGRHkG6pKWzaPuqF-xkoQJI7OOa9H_rVZoCDj6mdW5BYLGhdOs7VP2aZkP7zvHnymCeFGyuF6e7NF_X8ZIoV2pmpkdEiIJqyZcZO7Nso/s1600/Nairobi-Bundle-Play-Policy-Banner-V3.png"></a>
<p>Komunitas Android menginginkan pengalaman yang aman dan berkualitas tinggi, yang secara langsung memengaruhi kesuksesan jangka panjang aplikasi atau game Anda dalam hal penginstalan, rating pengguna, dan ulasan. Desain aplikasi, perlindungan privasi, kualitas informasi, dan standar keamanan semuanya memainkan peran penting. Hari ini, kami mengumumkan pembaruan kebijakan developer kami untuk lebih meningkatkan kualitas aplikasi di Play dan terus memberikan pengalaman terbaik.</p>
<h3>Mengaktifkan Aplikasi AI Generatif yang Aman </h3>
<div style="text-align: left;">Karena model AI generatif semakin banyak tersedia, Anda dapat mengintegrasikannya ke dalam aplikasi Anda. Sejalan dengan komitmen Google terhadap <a href="https://ai.google/responsibility/responsible-ai-practices/" target="_blank">praktik AI yang bertanggung jawab</a>, kami ingin membantu memastikan konten yang dihasilkan AI aman bagi pengguna dan mencermati setiap masukan mereka. Awal tahun depan, kami akan mewajibkan developer menyediakan kemampuan untuk melaporkan atau menandai konten buatan AI yang bersifat menyinggung tanpa perlu keluar dari aplikasi. Anda harus menggunakan laporan ini untuk menginformasikan pemfilteran dan moderasi konten di aplikasi Anda – mirip dengan sistem pelaporan dalam aplikasi yang diwajibkan hari ini berdasarkan kebijakan Konten Buatan Pengguna kami. Informasi selengkapnya bisa dilihat <a href="https://support.google.com/googleplay/android-developer/answer/14094294" target="_blank">di sini</a>.</div>
<img><div style="text-align: center;"><img alt="Gambar bergerak pengalaman UI aplikasi AI Art Generator di perangkat seluler Android" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghqtzTG9ADeg4R3lRCxwOfpkfMBAFRJ6DvZT8pElAwQv1gIG8OErCH8VxK3yZJd8U0y2uRDf2SJq0w_HBf-B5xz3JT8XCe7EmeWYKx5IPUXDAJMcTh6tjkohy2Z5ScSQTAi8mZOAceT8VNBZ5Dg9Qedo4Y1Sk7FmxkIKVUxRrTQNw-3_TBs3FPrY3c1V4/s1600/image3.gif" width="40%"></div><imgcaption><center><em>Catatan: Gambar ini hanyalah contoh dan dapat berubah sewaktu-waktu</em></center></imgcaption><br>
<p>Sebagai pengingat, aplikasi yang membuat konten menggunakan AI juga harus mematuhi semua <a href="https://play.google.com/about/developer-content-policy/" target="_blank">kebijakan developer</a> lainnya. Ini termasuk melarang dan mencegah pembuatan <a href="https://support.google.com/googleplay/android-developer/topic/9877466" target="_blank">konten yang dibatasi</a>, seperti konten yang memfasilitasi eksploitasi atau pelecehan anak, dan konten yang memungkinkan <a href="https://support.google.com/googleplay/android-developer/answer/9888077" target="_blank">perilaku menipu</a>. Ini adalah kategori aplikasi yang cepat berkembang dan kami menghargai kemitraan Anda dalam membantu mempertahankan pengalaman yang aman. </p>
<h3>Memperluas Perlindungan Privasi</h3>
<p>Untuk melindungi privasi, beberapa <a href="https://support.google.com/googleplay/android-developer/answer/9888170" target="_blank">izin aplikasi</a> memerlukan peninjauan tambahan dari tim Google Play dan memiliki pagar pengaman tambahan. Kami menemukan bahwa ini merupakan strategi yang efektif untuk melindungi privasi pengguna dan memperluas persyaratan ini lebih jauh lagi, termasuk kebijakan baru untuk mengurangi jenis aplikasi yang diizinkan untuk meminta izin foto dan video yang lebih luas.</p>
<div style="text-align: left;">Dalam kebijakan baru kami, aplikasi hanya bisa mengakses foto dan video untuk tujuan yang berhubungan langsung dengan fungsi aplikasi. Aplikasi yang hanya perlu mengakses file ini satu kali atau jarang mengaksesnya dapat menggunakan pemilih sistem, seperti <a href="https://android-developers.googleblog.com/2023/04/photo-picker-everywhere.html" target="_blank">pemilih foto Android</a>. Sebagai developer, Anda memainkan peran penting dalam membantu pengguna aplikasi merasa aman dan terinformasi tentang bagaimana data mereka diolah dan kami menghargai dukungan Anda terhadap kebijakan baru ini. Untuk informasi lebih lanjut, silakan kunjungi <a href="https://support.google.com/googleplay/android-developer/answer/14115180" target="_blank">artikel pusat bantuan</a> kami.</div>
<img><div style="text-align: center;"><img alt="Gambar bergerak pengalaman UI Pemilih foto di perangkat seluler Android" border="0" id="imgCaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMTkW7pNa5v6IHy3yyI7YdDuVkY0uT9cFRPC_lNOt0Em2LPn5PQbuDB9UTXiBJWfxBrmatXMdFHSLBBjLmDkdE3_MJrepNbecsPu5QohZe6ILjMqjAWNkXIimkiRAHRRuPKUGwoOWS0aZFoG7nxIqYtAw0Z8ILXaW4Zi_qSKbSDyrlSEyEQYPT-gQ17fc/s1600/image2.gif" width="40%"></div><imgcaption><center><em>Catatan: Gambar ini hanyalah contoh dan dapat berubah sewaktu-waktu</em></center></imgcaption><br>
<h3>Membatasi Notifikasi yang Mengganggu</h3>
<p>Pembaruan kebijakan hari ini juga menetapkan batasan yang lebih kuat seputar penggunaan <a href="https://developer.android.com/about/versions/14/behavior-changes-all#secure-fsi" target="_blank">notifikasi intent layar penuh</a> yang membagikan pesan berprioritas tinggi dan membutuhkan perhatian langsung dari pengguna. Ada beberapa skenario tertentu ketika orang mengharapkan notifikasi intent layar penuh, seperti saat terbangun karena alarm atau menerima panggilan telepon dan video. Untuk memastikan bahwa izin ini terbatas pada kasus penggunaan dengan prioritas tinggi, kami memperkenalkan batasan baru dan mengubahnya menjadi <a href="https://developer.android.com/training/permissions/requesting-special" target="_blank">izin akses aplikasi khusus</a>.</p>
<p>Untuk aplikasi yang menargetkan Android 14 ke atas, hanya aplikasi yang fungsi intinya memerlukan notifikasi layar penuh yang akan diberikan izin Intent Layar Penuh secara default, aplikasi lainnya harus meminta persetujuan untuk menggunakan izin ini. Membatasi notifikasi dengan cara ini membantu memastikan pengalaman pengguna yang lebih baik. Informasi selengkapnya tentang perubahan kebijakan ini dapat dilihat <a href="https://support.google.com/googleplay/android-developer/answer/13392821?sjid=6428273074465048624-NA" target="_blank">di sini</a>.</p>
<h3>Referensi Tambahan </h3>
<p>Pembaruan kebijakan hari ini memainkan peran penting dalam upaya kami untuk menawarkan sumber paling tepercaya untuk aplikasi dan game. Kami menghargai kemitraan Anda dalam memberikan aplikasi yang aman dan berkualitas tinggi untuk komunitas Android. Untuk informasi selengkapnya: </p>
<ul>
<li>Tinjau pembaruan kebijakan terbaru dan tonton <a href="https://youtu.be/FuYjzf8lymw?si=iuIe1B2CKCxFBhCY" target="_blank">video PolicyBytes</a> kami</li>
<li>Daftar <a href="https://developersonair.withgoogle.com/google-play-policy-webinars" target="_blank">webinar kebijakan</a>, tersedia di beberapa wilayah</li>
<li>Ajukan pertanyaan atau bagikan praktik terbaik dengan sesama developer di <a href="https://support.google.com/googleplay/android-developer/community" target="_blank">Komunitas Bantuan Developer Google Play</a></li>
</ul>
</div>
<hr>
</div>
</div>
</body></html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.comtag:blogger.com,1999:blog-6158048950125693510.post-91835020142299243542023-10-18T14:59:00.002+07:002024-02-15T15:05:11.582+07:00Now in Android #93: Edisi Rilis Android 14<html>
<head>
<meta charset="UTF-8">
<meta name="original_url" content="https://medium.com/androiddevelopers/now-in-android-93-android-14-release-edition-2cb821aebdc9">
<meta name="original_url" content="https://medium.com/androiddevelopers/now-in-android-93-android-14-release-edition-2cb821aebdc9">
<style type="text/css" data-fela-rehydration="715" data-fela-type="STATIC">
html {
box-sizing: border-box;
-webkit-text-size-adjust: 100%
}
*, *:before, *:after {
box-sizing: inherit
}
body {
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
color: rgba(0,0,0,0.8);
position: relative;
min-height: 100vh
}
h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form {
margin: 0
}
menu, ol, ul {
padding: 0;
list-style: none;
list-style-image: none
}
main {
display: block
}
a {
color: inherit;
text-decoration: none
}
a, button, input {
-webkit-tap-highlight-color: transparent
}
img, svg {
vertical-align: middle
}
button {
background: transparent;
overflow: visible
}
button, input, optgroup, select, textarea {
margin: 0
}
:root {
--reach-tabs: 1;
--reach-menu-button: 1
}
#speechify-root {
font-family: Sohne, sans-serif
}
div[data-popper-reference-hidden="true"] {
visibility: hidden;
pointer-events: none
}
/*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/ .hljs {
background: #fff;
color: black;
}
/* Gray DOCTYPE selectors like WebKit */
.xml .hljs-meta {
color: #c0c0c0;
}
.hljs-comment,
.hljs-quote {
color: #007400;
}
.hljs-tag,
.hljs-attribute,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name {
color: #aa0d91;
}
.hljs-variable,
.hljs-template-variable {
color: #3F6E74;
}
.hljs-code,
.hljs-string,
.hljs-meta .hljs-string {
color: #c41a16;
}
.hljs-regexp,
.hljs-link {
color: #0E0EFF;
}
.hljs-title,
.hljs-symbol,
.hljs-bullet,
.hljs-number {
color: #1c00cf;
}
.hljs-section,
.hljs-meta {
color: #643820;
}
.hljs-title.class_,
.hljs-class .hljs-title,
.hljs-type,
.hljs-built_in,
.hljs-params {
color: #5c2699;
}
.hljs-attr {
color: #836C28;
}
.hljs-subst {
color: #000;
}
.hljs-formula {
background-color: #eee;
font-style: italic;
}
.hljs-addition {
background-color: #baeeba;
}
.hljs-deletion {
background-color: #ffc8bd;
}
.hljs-selector-id,
.hljs-selector-class {
color: #9b703f;
}
.hljs-doctag,
.hljs-strong {
font-weight: bold;
}
.hljs-emphasis {
font-style: italic;
}
</style>
<style type="text/css" data-fela-rehydration="715" data-fela-type="KEYFRAME">
@-webkit-keyframes k1 {
0% {
opacity: 0.8
}
50% {
opacity: 0.5
}
100% {
opacity: 0.8
}
}
@-moz-keyframes k1 {
0% {
opacity: 0.8
}
50% {
opacity: 0.5
}
100% {
opacity: 0.8
}
}
@keyframes k1 {
0% {
opacity: 0.8
}
50% {
opacity: 0.5
}
100% {
opacity: 0.8
}
}
@-webkit-keyframes k2 {
0% {
transform: scale(1)
}
50% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
@-moz-keyframes k2 {
0% {
transform: scale(1)
}
50% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
@keyframes k2 {
0% {
transform: scale(1)
}
50% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
</style>
<style type="text/css" data-fela-rehydration="715" data-fela-type="RULE">
.a {
font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif
}
.b {
font-weight: 400
}
.c {
background-color: rgba(255, 255, 255, 1)
}
.l {
display: block
}
.m {
position: sticky
}
.n {
top: 0
}
.o {
z-index: 500
}
.p {
padding: 0 24px
}
.q {
align-items: center
}
.r {
border-bottom: solid 1px #F2F2F2
}
.y {
height: 41px
}
.z {
line-height: 20px
}
.ab {
display: flex
}
.ac {
height: 57px
}
.ae {
flex: 1 0 auto
}
.af {
color: inherit
}
.ag {
fill: inherit
}
.ah {
font-size: inherit
}
.ai {
border: inherit
}
.aj {
font-family: inherit
}
.ak {
letter-spacing: inherit
}
.al {
font-weight: inherit
}
.am {
padding: 0
}
.an {
margin: 0
}
.ao {
cursor: pointer
}
.ap:disabled {
cursor: not-allowed
}
.aq:disabled {
color: #6B6B6B
}
.ar:disabled {
fill: #6B6B6B
}
.au {
fill: rgba(0, 0, 0, 1)
}
.av {
height: 22px
}
.aw {
margin-left: 16px
}
.ax {
border: none
}
.ay {
border-radius: 20px
}
.az {
width: 240px
}
.ba {
background: #F9F9F9
}
.bb path {
fill: #6B6B6B
}
.bd {
outline: none
}
.be {
font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif
}
.bf {
font-size: 14px
}
.bg {
width: 100%
}
.bh {
padding: 10px 20px 10px 0
}
.bi {
background-color: transparent
}
.bj {
color: #242424
}
.bk::placeholder {
color: #6B6B6B
}
.bl {
display: inline-block
}
.bm {
margin-left: 12px
}
.bn {
margin-right: 12px
}
.bo {
border-radius: 4px
}
.bp {
margin-left: 24px
}
.bq {
height: 24px
}
.bw {
background-color: #F9F9F9
}
.bx {
border-radius: 50%
}
.by {
height: 32px
}
.bz {
width: 32px
}
.ca {
justify-content: center
}
.cg {
max-width: 680px
}
.ch {
min-width: 0
}
.ci {
animation: k1 1.2s ease-in-out infinite
}
.cj {
height: 100vh
}
.ck {
margin-bottom: 16px
}
.cl {
margin-top: 48px
}
.cm {
align-items: flex-start
}
.cn {
flex-direction: column
}
.co {
justify-content: space-between
}
.cp {
margin-bottom: 24px
}
.cv {
width: 80%
}
.cw {
background-color: #F2F2F2
}
.dc {
height: 44px
}
.dd {
width: 44px
}
.de {
margin: auto 0
}
.df {
margin-bottom: 4px
}
.dg {
height: 16px
}
.dh {
width: 120px
}
.di {
width: 80px
}
.do {
margin-bottom: 8px
}
.dp {
width: 96%
}
.dq {
width: 98%
}
.dr {
width: 81%
}
.dx {
margin: 0 24px
}
.eb {
background: rgba(255, 255, 255, 1)
}
.ec {
box-sizing: border-box
}
.ed {
border: 1px solid #F2F2F2
}
.ee {
box-shadow: 0 1px 4px #F2F2F2
}
.ef {
max-height: 100vh
}
.eg {
overflow-y: auto
}
.eh {
position: absolute
}
.ei {
left: 0
}
.ej {
top: calc(100vh + 100px)
}
.ek {
bottom: calc(100vh + 100px)
}
.el {
width: 10px
}
.em {
pointer-events: none
}
.eo {
word-break: break-word
}
.ep {
word-wrap: break-word
}
.eq:after {
display: block
}
.er:after {
content: ""
}
.es:after {
clear: both
}
.et {
clear: both
}
.fc {
margin-left: auto
}
.fd {
margin-right: auto
}
.fe {
max-width: 1600px
}
.fk {
padding-top: 5px
}
.fl {
padding-bottom: 5px
}
.fn {
cursor: zoom-in
}
.fo {
position: relative
}
.fp {
z-index: auto
}
.fr {
max-width: 100%
}
.fs {
height: auto
}
.ft {
line-height: 1.23
}
.fu {
letter-spacing: 0
}
.fv {
font-style: normal
}
.fw {
font-weight: 700
}
.gr {
margin-bottom: -0.27em
}
.gs {
line-height: 1.394
}
.hi {
color: #6B6B6B
}
.hj {
text-decoration: underline
}
.hk {
@media all and (max-width: 551.98px):8px
}
.hl {
@media all and (min-width: 552px) and (max-width: 727.98px):8px
}
.hm {
@media all and (min-width: 728px) and (max-width: 903.98px):16px
}
.hn {
@media all and (min-width: 904px) and (max-width: 1079.98px):16px
}
.ho {
@media all and (min-width: 1080px):16px
}
.hu {
align-items: baseline
}
.hv {
width: 48px
}
.hw {
height: 48px
}
.hx {
border: 2px solid rgba(255, 255, 255, 1)
}
.hy {
z-index: 0
}
.hz {
box-shadow: none
}
.ia {
border: 1px solid rgba(0, 0, 0, 0.05)
}
.ic {
margin-left: -12px
}
.id {
width: 28px
}
.ie {
height: 28px
}
.if {
z-index: 1
}
.ig {
width: 24px
}
.ih {
margin-bottom: 2px
}
.ii {
flex-wrap: nowrap
}
.ij {
font-size: 16px
}
.ik {
line-height: 24px
}
.im {
margin: 0 8px
}
.in {
display: inline
}
.io {
color: rgba(103, 139, 160, 1)
}
.ip {
fill: rgba(103, 139, 160, 1)
}
.iq:disabled {
opacity: 0.3
}
.it {
flex: 0 0 auto
}
.iw {
flex-wrap: wrap
}
.iz {
white-space: pre-wrap
}
.ja {
margin-right: 4px
}
.jb {
overflow: hidden
}
.jc {
max-height: 20px
}
.jd {
text-overflow: ellipsis
}
.je {
display: -webkit-box
}
.jf {
-webkit-line-clamp: 1
}
.jg {
-webkit-box-orient: vertical
}
.jh {
word-break: break-all
}
.jj {
padding-left: 8px
}
.jk {
padding-right: 8px
}
.kl > * {
flex-shrink: 0
}
.km {
overflow-x: scroll
}
.kn::-webkit-scrollbar {
display: none
}
.ko {
scrollbar-width: none
}
.kp {
-ms-overflow-style: none
}
.ks {
width: 74px
}
.kt {
flex-direction: row
}
.kw {
-webkit-user-select: none
}
.kx {
border: 0
}
.ky {
cursor: progress
}
.kz {
fill: rgba(117, 117, 117, 1)
}
.lc {
opacity: 0.25
}
.ld {
outline: 0
}
.le {
user-select: none
}
.lf > svg {
pointer-events: none
}
.lo {
font-size: 13px
}
.lp {
margin-left: 4px
}
.lq {
margin-top: 0px
}
.lr {
opacity: 1
}
.ls {
padding: 4px 0
}
.lt {
fill: #6B6B6B
}
.lw {
width: 16px
}
.lx {
padding: 8px 2px
}
.ly svg {
color: #6B6B6B
}
.mp {
line-height: 1.58
}
.mq {
letter-spacing: -0.004em
}
.mr {
font-family: source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif
}
.nk {
margin-bottom: -0.46em
}
.nq {
margin: auto
}
.nr {
padding-bottom: 56.206088992974244%
}
.ns {
height: 0
}
.nt {
padding-bottom: 15%
}
.nu {
margin-top: 32px
}
.nv {
margin-bottom: 14px
}
.nw {
padding-top: 24px
}
.nx {
padding-bottom: 10px
}
.ny {
background-color: #000000
}
.nz {
height: 3px
}
.oa {
width: 3px
}
.ob {
margin-right: 20px
}
.oc {
line-height: 1.12
}
.od {
letter-spacing: -0.022em
}
.oe {
font-weight: 600
}
.ox {
margin-bottom: -0.28em
}
.pd {
padding: 2px 4px
}
.pe {
font-size: 75%
}
.pf > strong {
font-family: inherit
}
.pg {
font-family: source-code-pro, Menlo, Monaco, "Courier New", Courier, monospace
}
.pm {
box-shadow: inset 0 0 0 1px #F2F2F2
}
.pn {
padding: 0px
}
.po {
padding: 16px 20px
}
.pp {
flex: 1 1 auto
}
.pr {
max-height: 40px
}
.ps {
-webkit-line-clamp: 2
}
.pt {
margin-top: 8px
}
.pu {
margin-top: 12px
}
.pv {
width: 160px
}
.pw {
background-image: url(https://miro.medium.com/v2/resize:fit:320/0*mZEvROrisIWkGRLU)
}
.px {
background-origin: border-box
}
.py {
background-size: cover
}
.pz {
height: 167px
}
.qa {
background-position: 50% 50%
}
.qg {
background-image: url(https://miro.medium.com/v2/resize:fit:320/0*_XAUOcrgxBHx6CoF)
}
.qh {
background: none
}
.qi {
text-decoration: none
}
.qj {
background-image: url(https://miro.medium.com/v2/resize:fit:320/1*_AfCUWgP3WA998rjU07G4g.png)
}
.qk {
background-image: url(https://miro.medium.com/v2/resize:fit:320/0*HOYENNa7qy9HyPN6)
}
.qo {
list-style-type: disc
}
.qp {
margin-left: 30px
}
.qq {
padding-left: 0px
}
.qw {
background-image: url(https://miro.medium.com/v2/resize:fit:320/0*bCVIGsm1YJaHObiG)
}
.qx {
background-image: url(https://miro.medium.com/v2/resize:fit:320/0*kCkBY7_XEjyCdkZb)
}
.qy {
margin-bottom: 26px
}
.qz {
margin-top: 6px
}
.ra {
margin-right: 8px
}
.rb {
padding: 8px 16px
}
.rc {
border-radius: 100px
}
.rd {
transition: background 300ms ease
}
.rf {
white-space: nowrap
}
.rg {
border-top: none
}
.rm {
height: 52px
}
.rn {
max-height: 52px
}
.ro {
box-sizing: content-box
}
.rp {
position: static
}
.rr {
max-width: 155px
}
.sc {
align-items: flex-end
}
.sd {
width: 76px
}
.se {
height: 76px
}
.sf {
border: 2px solid #F9F9F9
}
.sg {
height: 72px
}
.sh {
width: 72px
}
.si {
margin-left: -16px
}
.sj {
width: 36px
}
.sk {
height: 36px
}
.sl {
color: #FFFFFF
}
.sm {
fill: #FFFFFF
}
.sn {
background: rgba(103, 139, 160, 1)
}
.so {
border-color: rgba(103, 139, 160, 1)
}
.ss:disabled {
cursor: inherit !important
}
.st:disabled:hover {
background: rgba(103, 139, 160, 1)
}
.su:disabled:hover {
border-color: rgba(103, 139, 160, 1)
}
.sv {
border-radius: 99em
}
.sw {
width: auto
}
.sx {
border-width: 1px
}
.sy {
border-style: solid
}
.sz {
text-align: center
}
.ta {
margin-left: 8px
}
.tb {
stroke: #F2F2F2
}
.tc {
color: #F2F2F2
}
.td {
fill: #F2F2F2
}
.te {
background: #F2F2F2
}
.tf {
border-color: #F2F2F2
}
.tl {
font-weight: 500
}
.tm {
font-size: 24px
}
.tn {
line-height: 30px
}
.to {
letter-spacing: -0.016em
}
.tp {
margin-top: 16px
}
.tq {
height: 0px
}
.tr {
border-bottom: solid 1px #E5E5E5
}
.ts {
margin-top: 72px
}
.tt {
padding: 24px 0
}
.tu {
margin-bottom: 0px
}
.tv {
margin-right: 16px
}
.tw {
display: inline-flex
}
.tz {
margin-bottom: 32px
}
.ua {
margin-top: 40px
}
.ub {
align-items: stretch
}
.vj {
flex-grow: 0
}
.vp {
height: 100%
}
.vq {
display: grid
}
.vr {
grid-template-columns: repeat(12, 1fr)
}
.vs {
grid-template-rows: auto 1fr
}
.wd {
grid-area: image
}
.we {
grid-area: content
}
.wk {
border-radius: 2px
}
.wl {
aspect-ratio: 2
}
.wm {
object-fit: cover
}
.wn {
object-position: 50% 50%
}
.wt {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05)
}
.wu {
height: 20px
}
.wv {
width: 20px
}
.ww {
padding-right: 4px
}
.xx {
padding-top: 8px
}
.yn {
margin-left: 20px
}
.yo {
justify-content: flex-end
}
.yp {
flex: 0 0 0
}
.yw {
fill: #242424
}
.yx {
background: 0
}
.yy {
border-color: #242424
}
.zb:disabled:hover {
color: #242424
}
.zc:disabled:hover {
fill: #242424
}
.zd:disabled:hover {
border-color: #242424
}
.zx {
padding-bottom: 40px
}
.zy {
padding-top: 88px
}
.zz {
margin-bottom: 40px
}
.aba {
margin-top: 4px
}
.abb {
border-right: 3px solid #F9F9F9
}
.abc {
z-index: 3
}
.abd {
z-index: 2
}
.abe {
margin-left: -24px
}
.abf {
margin-left: -36px
}
.abg {
border-radius: 0 3px 3px 0
}
.abh {
width: 93px
}
.as:hover:not(:disabled) {
color: rgba(25, 25, 25, 1)
}
.at:hover:not(:disabled) {
fill: rgba(25, 25, 25, 1)
}
.ib:hover {
background-color: rgba(0, 0, 0, 0.1)
}
.il:hover {
text-decoration: underline
}
.ir:hover:not(:disabled) {
color: rgba(91, 119, 136, 1)
}
.is:hover:not(:disabled) {
fill: rgba(91, 119, 136, 1)
}
.lb:hover {
fill: rgba(117, 117, 117, 1)
}
.lu:hover {
fill: #000000
}
.lv:hover p {
color: #000000
}
.lz:hover svg {
color: #000000
}
.re:hover {
background-color: #F2F2F2
}
.sp:hover {
background: rgba(91, 119, 136, 1)
}
.sq:hover {
border-color: rgba(91, 119, 136, 1)
}
.sr:hover {
cursor: pointer
}
.tg:hover {
background: #F2F2F2
}
.th:hover {
border-color: #F2F2F2
}
.ti:hover {
cursor: wait
}
.tj:hover {
color: #F2F2F2
}
.tk:hover {
fill: #F2F2F2
}
.yz:hover {
color: #000000
}
.za:hover {
border-color: #242424
}
.bc:focus-within path {
fill: #242424
}
.fq:focus {
transform: scale(1.01)
}
.la:focus {
fill: rgba(117, 117, 117, 1)
}
.ma:focus svg {
color: #000000
}
.lg:active {
border-style: none
}
</style>
<style type="text/css" data-fela-rehydration="715" data-fela-type="RULE" media="all and (min-width: 1080px)">
.d {
display: none
}
.bv {
width: 64px
}
.cf {
margin: 0 64px
}
.cu {
height: 48px
}
.db {
margin-bottom: 52px
}
.dn {
margin-bottom: 48px
}
.dw {
margin-bottom: 68px
}
.ea {
max-width: 680px
}
.fb {
max-width: 1192px
}
.fj {
margin-top: 40px
}
.gn {
font-size: 42px
}
.go {
margin-top: 1em
}
.gp {
line-height: 52px
}
.gq {
letter-spacing: -0.011em
}
.hf {
font-size: 22px
}
.hg {
margin-top: 0.92em
}
.hh {
line-height: 28px
}
.ht {
align-items: center
}
.jx {
border-top: solid 1px #F2F2F2
}
.jy {
border-bottom: solid 1px #F2F2F2
}
.jz {
margin: 32px 0 0
}
.ka {
padding: 3px 8px
}
.kj > * {
margin-right: 24px
}
.kk > :last-child {
margin-right: 0
}
.kr {
display: flex
}
.ln {
margin-top: 0px
}
.ng {
font-size: 20px
}
.nh {
margin-top: 2em
}
.ni {
line-height: 32px
}
.nj {
letter-spacing: -0.003em
}
.np {
margin-top: 56px
}
.ot {
font-size: 24px
}
.ou {
margin-top: 1.25em
}
.ov {
line-height: 30px
}
.ow {
letter-spacing: -0.016em
}
.pc {
margin-top: 0.86em
}
.pl {
margin-top: 32px
}
.qf {
margin-top: 1.95em
}
.qn {
margin-top: 2.14em
}
.qv {
margin-top: 1.14em
}
.rl {
margin-bottom: 88px
}
.rw {
display: inline-block
}
.sb {
padding-top: 72px
}
.ty {
margin: 0
}
.uo {
width: calc(100% + 32px)
}
.up {
margin-left: -16px
}
.uq {
margin-right: -16px
}
.vf {
padding-left: 16px
}
.vg {
padding-right: 16px
}
.vh {
flex-basis: 50%
}
.vi {
max-width: 50%
}
.vo {
padding-bottom: 56px
}
.wb {
gap: 24px 0
}
.wc {
grid-template-areas: "image image image image image image image image image image image image" "content content content content content content content content content content content content"
}
.wj {
display: block
}
.ws {
margin-bottom: 16px
}
.xf {
padding-bottom: 16px
}
.xg {
flex: 1 0 auto
}
.xt {
line-height: 24px
}
.xu {
max-height: 48px
}
.xv {
-webkit-line-clamp: 2
}
.xw {
letter-spacing: 0
}
.yc {
padding-top: 16px
}
.yl {
max-width: 56%
}
.ym {
flex: 1 0 0
}
.ys {
margin-bottom: 24px
}
.yv {
flex-direction: row
}
.zi {
width: min-width
}
.zr {
margin-left: 16px
}
.zw {
margin-top: 96px
}
.abm {
margin-top: 24px
}
.abn {
margin-bottom: 56px
}
</style>
<style type="text/css" data-fela-rehydration="715" data-fela-type="RULE" media="all and (max-width: 1079.98px)">
.e {
display: none
}
.lm {
margin-top: 0px
}
.rv {
display: inline-block
}
</style>
<style type="text/css" data-fela-rehydration="715" data-fela-type="RULE" media="all and (max-width: 903.98px)">
.f {
display: none
}
.ll {
margin-top: 0px
}
.ru {
display: inline-block
}
</style>
<style type="text/css" data-fela-rehydration="715" data-fela-type="RULE" media="all and (max-width: 727.98px)">
.g {
display: none
}
.lj {
margin-top: 0px
}
.lk {
margin-right: 0px
}
.pq {
padding: 10px 12px 10px
}
.rt {
display: inline-block
}
</style>
<style type="text/css" data-fela-rehydration="715" data-fela-type="RULE" media="all and (max-width: 551.98px)">
.h {
display: none
}
.s {
display: flex
}
.t {
justify-content: space-between
}
.br {
width: 24px
}
.cb {
margin: 0 24px
}
.cq {
height: 40px
}
.cx {
margin-bottom: 44px
}
.dj {
margin-bottom: 32px
}
.ds {
margin-bottom: 4px
}
.eu {
margin: 0
}
.ev {
max-width: 100%
}
.ff {
margin-top: 32px
}
.fx {
font-size: 32px
}
.fy {
margin-top: 1.01em
}
.fz {
line-height: 38px
}
.ga {
letter-spacing: -0.014em
}
.gt {
font-size: 18px
}
.gu {
margin-top: 0.79em
}
.gv {
line-height: 24px
}
.hp {
align-items: flex-start
}
.iu {
flex-direction: column
}
.ix {
margin-bottom: 2px
}
.jl {
margin: 24px -24px 0
}
.jm {
padding: 0
}
.kb > * {
margin-right: 8px
}
.kc > :last-child {
margin-right: 24px
}
.ku {
margin-left: 0px
}
.lh {
margin-top: 0px
}
.li {
margin-right: 0px
}
.mb {
border: 1px solid #F2F2F2
}
.mc {
border-radius: 99em
}
.md {
padding: 0px 16px 0px 12px
}
.me {
height: 38px
}
.mf {
align-items: center
}
.mh svg {
margin-right: 8px
}
.ms {
margin-top: 1.56em
}
.mt {
line-height: 28px
}
.mu {
letter-spacing: -0.003em
}
.nl {
margin-top: 40px
}
.of {
font-size: 20px
}
.og {
margin-top: 0.93em
}
.oh {
letter-spacing: 0
}
.oy {
margin-top: 0.67em
}
.ph {
margin-top: 24px
}
.qb {
margin-top: 1.2em
}
.qr {
margin-top: 1.34em
}
.rh {
margin-bottom: 80px
}
.rs {
display: inline-block
}
.rx {
padding-top: 48px
}
.uc {
width: calc(100% + 24px)
}
.ud {
margin-left: -12px
}
.ue {
margin-right: -12px
}
.ur {
padding-left: 12px
}
.us {
padding-right: 12px
}
.ut {
flex-basis: 100%
}
.vk {
padding-bottom: 32px
}
.vt {
gap: 24px 0
}
.vu {
grid-template-areas: "image image image image image image image image image image image image" "content content content content content content content content content content content content"
}
.wf {
display: block
}
.wo {
margin-bottom: 16px
}
.wx {
padding-bottom: 16px
}
.wy {
flex: 1 0 auto
}
.xh {
max-height: 48px
}
.xi {
-webkit-line-clamp: 2
}
.xy {
padding-top: 16px
}
.yd {
max-width: 56%
}
.ye {
flex: 1 0 0
}
.ze {
width: 100%
}
.zj {
margin-left: 0
}
.zk {
margin-top: 16px
}
.zs {
margin-top: 72px
}
.mg:hover {
border-color: #E5E5E5
}
</style>
<style type="text/css" data-fela-rehydration="715" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">
.i {
display: none
}
.bu {
width: 64px
}
.ce {
margin: 0 64px
}
.ct {
height: 48px
}
.da {
margin-bottom: 52px
}
.dm {
margin-bottom: 48px
}
.dv {
margin-bottom: 68px
}
.dz {
max-width: 680px
}
.fa {
max-width: 1192px
}
.fi {
margin-top: 40px
}
.gj {
font-size: 42px
}
.gk {
margin-top: 1em
}
.gl {
line-height: 52px
}
.gm {
letter-spacing: -0.011em
}
.hc {
font-size: 22px
}
.hd {
margin-top: 0.92em
}
.he {
line-height: 28px
}
.hs {
align-items: center
}
.jt {
border-top: solid 1px #F2F2F2
}
.ju {
border-bottom: solid 1px #F2F2F2
}
.jv {
margin: 32px 0 0
}
.jw {
padding: 3px 8px
}
.kh > * {
margin-right: 24px
}
.ki > :last-child {
margin-right: 0
}
.kq {
display: flex
}
.nc {
font-size: 20px
}
.nd {
margin-top: 2em
}
.ne {
line-height: 32px
}
.nf {
letter-spacing: -0.003em
}
.no {
margin-top: 56px
}
.op {
font-size: 24px
}
.oq {
margin-top: 1.25em
}
.or {
line-height: 30px
}
.os {
letter-spacing: -0.016em
}
.pb {
margin-top: 0.86em
}
.pk {
margin-top: 32px
}
.qe {
margin-top: 1.95em
}
.qm {
margin-top: 2.14em
}
.qu {
margin-top: 1.14em
}
.rk {
margin-bottom: 88px
}
.sa {
padding-top: 72px
}
.tx {
margin: 0
}
.ul {
width: calc(100% + 32px)
}
.um {
margin-left: -16px
}
.un {
margin-right: -16px
}
.vb {
padding-left: 16px
}
.vc {
padding-right: 16px
}
.vd {
flex-basis: 50%
}
.ve {
max-width: 50%
}
.vn {
padding-bottom: 56px
}
.vz {
gap: 24px 0
}
.wa {
grid-template-areas: "image image image image image image image image image image image image" "content content content content content content content content content content content content"
}
.wi {
display: block
}
.wr {
margin-bottom: 16px
}
.xd {
padding-bottom: 16px
}
.xe {
flex: 1 0 auto
}
.xp {
line-height: 24px
}
.xq {
max-height: 48px
}
.xr {
-webkit-line-clamp: 2
}
.xs {
letter-spacing: 0
}
.yb {
padding-top: 16px
}
.yj {
max-width: 56%
}
.yk {
flex: 1 0 0
}
.yr {
margin-bottom: 24px
}
.yu {
flex-direction: row
}
.zh {
width: min-width
}
.zp {
margin-left: 16px
}
.zq {
margin-top: 0px
}
.zv {
margin-top: 96px
}
.abk {
margin-top: 24px
}
.abl {
margin-bottom: 56px
}
</style>
<style type="text/css" data-fela-rehydration="715" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">
.j {
display: none
}
.w {
display: flex
}
.x {
justify-content: space-between
}
.bt {
width: 64px
}
.cd {
margin: 0 48px
}
.cs {
height: 48px
}
.cz {
margin-bottom: 52px
}
.dl {
margin-bottom: 48px
}
.du {
margin-bottom: 68px
}
.dy {
max-width: 680px
}
.ey {
margin: 0
}
.ez {
max-width: 100%
}
.fh {
margin-top: 40px
}
.gf {
font-size: 42px
}
.gg {
margin-top: 1em
}
.gh {
line-height: 52px
}
.gi {
letter-spacing: -0.011em
}
.gz {
font-size: 22px
}
.ha {
margin-top: 0.92em
}
.hb {
line-height: 28px
}
.hr {
align-items: center
}
.jp {
border-top: solid 1px #F2F2F2
}
.jq {
border-bottom: solid 1px #F2F2F2
}
.jr {
margin: 32px 0 0
}
.js {
padding: 3px 8px
}
.kf > * {
margin-right: 24px
}
.kg > :last-child {
margin-right: 0
}
.my {
font-size: 20px
}
.mz {
margin-top: 2em
}
.na {
line-height: 32px
}
.nb {
letter-spacing: -0.003em
}
.nn {
margin-top: 56px
}
.ol {
font-size: 24px
}
.om {
margin-top: 1.25em
}
.on {
line-height: 30px
}
.oo {
letter-spacing: -0.016em
}
.pa {
margin-top: 0.86em
}
.pj {
margin-top: 32px
}
.qd {
margin-top: 1.95em
}
.ql {
margin-top: 2.14em
}
.qt {
margin-top: 1.14em
}
.rj {
margin-bottom: 88px
}
.rz {
padding-top: 72px
}
.ui {
width: calc(100% + 28px)
}
.uj {
margin-left: -14px
}
.uk {
margin-right: -14px
}
.ux {
padding-left: 14px
}
.uy {
padding-right: 14px
}
.uz {
flex-basis: 50%
}
.va {
max-width: 50%
}
.vm {
padding-bottom: 56px
}
.vx {
gap: 24px 0
}
.vy {
grid-template-areas: "image image image image image image image image image image image image" "content content content content content content content content content content content content"
}
.wh {
display: block
}
.wq {
margin-bottom: 16px
}
.xb {
padding-bottom: 16px
}
.xc {
flex: 1 0 auto
}
.xl {
line-height: 24px
}
.xm {
max-height: 48px
}
.xn {
-webkit-line-clamp: 2
}
.xo {
letter-spacing: 0
}
.ya {
padding-top: 16px
}
.yh {
max-width: 56%
}
.yi {
flex: 1 0 0
}
.yq {
margin-bottom: 24px
}
.yt {
flex-direction: row
}
.zg {
width: min-width
}
.zn {
margin-left: 16px
}
.zo {
margin-top: 0px
}
.zu {
margin-top: 96px
}
.abi {
margin-top: 24px
}
.abj {
margin-bottom: 56px
}
</style>
<style type="text/css" data-fela-rehydration="715" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">
.k {
display: none
}
.u {
display: flex
}
.v {
justify-content: space-between
}
.bs {
width: 24px
}
.cc {
margin: 0 24px
}
.cr {
height: 40px
}
.cy {
margin-bottom: 44px
}
.dk {
margin-bottom: 32px
}
.dt {
margin-bottom: 4px
}
.ew {
margin: 0
}
.ex {
max-width: 100%
}
.fg {
margin-top: 32px
}
.gb {
font-size: 32px
}
.gc {
margin-top: 1.01em
}
.gd {
line-height: 38px
}
.ge {
letter-spacing: -0.014em
}
.gw {
font-size: 18px
}
.gx {
margin-top: 0.79em
}
.gy {
line-height: 24px
}
.hq {
align-items: flex-start
}
.iv {
flex-direction: column
}
.iy {
margin-bottom: 2px
}
.jn {
margin: 24px 0 0
}
.jo {
padding: 0
}
.kd > * {
margin-right: 8px
}
.ke > :last-child {
margin-right: 8px
}
.kv {
margin-left: 0px
}
.mi {
border: 1px solid #F2F2F2
}
.mj {
border-radius: 99em
}
.mk {
padding: 0px 16px 0px 12px
}
.ml {
height: 38px
}
.mm {
align-items: center
}
.mo svg {
margin-right: 8px
}
.mv {
margin-top: 1.56em
}
.mw {
line-height: 28px
}
.mx {
letter-spacing: -0.003em
}
.nm {
margin-top: 40px
}
.oi {
font-size: 20px
}
.oj {
margin-top: 0.93em
}
.ok {
letter-spacing: 0
}
.oz {
margin-top: 0.67em
}
.pi {
margin-top: 24px
}
.qc {
margin-top: 1.2em
}
.qs {
margin-top: 1.34em
}
.ri {
margin-bottom: 80px
}
.ry {
padding-top: 48px
}
.uf {
width: calc(100% + 24px)
}
.ug {
margin-left: -12px
}
.uh {
margin-right: -12px
}
.uu {
padding-left: 12px
}
.uv {
padding-right: 12px
}
.uw {
flex-basis: 100%
}
.vl {
padding-bottom: 32px
}
.vv {
gap: 24px 0
}
.vw {
grid-template-areas: "image image image image image image image image image image image image" "content content content content content content content content content content content content"
}
.wg {
display: block
}
.wp {
margin-bottom: 16px
}
.wz {
padding-bottom: 16px
}
.xa {
flex: 1 0 auto
}
.xj {
max-height: 48px
}
.xk {
-webkit-line-clamp: 2
}
.xz {
padding-top: 16px
}
.yf {
max-width: 56%
}
.yg {
flex: 1 0 0
}
.zf {
width: 100%
}
.zl {
margin-left: 0
}
.zm {
margin-top: 16px
}
.zt {
margin-top: 72px
}
.mn:hover {
border-color: #E5E5E5
}
</style>
<style type="text/css" data-fela-rehydration="715" data-fela-type="RULE" media="print">
.rq {
display: none
}
</style>
<style type="text/css" data-fela-rehydration="715" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">
.fm {
transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1)
}
</style>
<style type="text/css" data-fela-rehydration="715" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">
.ji {
max-height: none
}
</style>
</head>
<body>
<article>
<div class="l">
<div class="l">
<span class="l"></span><section>
<div>
<div class="eh ei ej ek el em"></div><div class="eo ep eq er es">
<div class="et"><div class="ab ca"><div class="eu ev ew ex ey ez ce fa cf fb ch bg"><figure class="ff fg fh fi fj et fk fl paragraph-image"><div role="button" tabindex="0" class="fm fn fo fp bg fq"><div class="fc fd fe"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/0*TFzXcKs2RJtBMz_s 640w, https://miro.medium.com/v2/resize:fit:720/0*TFzXcKs2RJtBMz_s 720w, https://miro.medium.com/v2/resize:fit:750/0*TFzXcKs2RJtBMz_s 750w, https://miro.medium.com/v2/resize:fit:786/0*TFzXcKs2RJtBMz_s 786w, https://miro.medium.com/v2/resize:fit:828/0*TFzXcKs2RJtBMz_s 828w, https://miro.medium.com/v2/resize:fit:1100/0*TFzXcKs2RJtBMz_s 1100w, https://miro.medium.com/v2/resize:fit:2000/0*TFzXcKs2RJtBMz_s 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*TFzXcKs2RJtBMz_s 640w, https://miro.medium.com/v2/resize:fit:720/0*TFzXcKs2RJtBMz_s 720w, https://miro.medium.com/v2/resize:fit:750/0*TFzXcKs2RJtBMz_s 750w, https://miro.medium.com/v2/resize:fit:786/0*TFzXcKs2RJtBMz_s 786w, https://miro.medium.com/v2/resize:fit:828/0*TFzXcKs2RJtBMz_s 828w, https://miro.medium.com/v2/resize:fit:1100/0*TFzXcKs2RJtBMz_s 1100w, https://miro.medium.com/v2/resize:fit:2000/0*TFzXcKs2RJtBMz_s 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"><img alt="" class="bg fr fs c" width="1000" height="299" loading="eager" role="presentation"></picture></div></div></figure></div></div></div><div class="ab ca">
<div class="ch bg dx dy dz ea">
<div></div><div><h2 id="88e6" class="pw-subtitle-paragraph gs fu fv be b gt gu gv gw gx gy gz ha hb hc hd he hf hg hh cp hi">Update <a class="af hj" href="http://android-developers.googleblog.com/2023/10/android-14-is-live-in-aosp.html" rel="noopener ugc nofollow" target="_blank">Android 14</a>, <a class="af hj" href="http://android-developers.googleblog.com/2023/10/wear-os-4-is-now-stable-and-available-on-google-pixel-watch-2.html" rel="noopener ugc nofollow" target="_blank">Wear OS 4</a>, <a class="af hj" href="https://www.youtube.com/watch?v=1tkVjBxdGrk" rel="noopener ugc nofollow" target="_blank">Gestur Jetpack Compose</a>, <a class="af hj" rel="noopener" href="/androiddevelopers/device-streaming-the-latest-devices-you-need-when-you-need-them-4472d28d0c57">Streaming Perangkat Android Studio</a>, <a class="af hj" href="https://developer.android.com/jetpack/androidx/releases/browser#1.7.0-alpha01" rel="noopener ugc nofollow" target="_blank">Browser</a> + <a class="af hj" href="https://developer.android.com/jetpack/androidx/releases/collection#1.4.0-alpha01" rel="noopener ugc nofollow" target="_blank">Collection</a></h2><div class="hk hl hm hn ho"><div class="speechify-ignore ab co"><div class="speechify-ignore bg l"><div class="hp hq hr hs ht ab"><div><div class="ab hu"><a rel="noopener follow" href="/@dagalpin?source=post_page-----2cb821aebdc9--------------------------------"><div><div class="bl" aria-hidden="false"><div class="l hv hw bx hx hy"><div class="l fo"><img alt="Daniel Galpin" class="l ec bx dc dd cw" src="https://miro.medium.com/v2/resize:fill:88:88/1*9j85cICWzDQeY8Nb4QrL4Q.jpeg" width="44" height="44" loading="lazy" data-testid="authorPhoto"><div class="hz bx l dc dd eh n ia ib"></div></div></div></div></div></a><a href="https://medium.com/androiddevelopers?source=post_page-----2cb821aebdc9--------------------------------" rel="noopener follow"><div class="ic ab fo"><div><div class="bl" aria-hidden="false"><div class="l id ie bx hx if"><div class="l fo"><img alt="Developer Android" class="l ec bx bq ig cw" src="https://miro.medium.com/v2/resize:fill:48:48/1*3tLD4Ve66pbBpuawm9Fu9Q.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"><div class="hz bx l bq ig eh n ia ib"></div></div></div></div></div></div></a></div></div><div class="bm bg l"><div class="ab"><div style="flex:1"><span class="be b bf z bj"><div class="ih ab q"><div class="ab q ii"><div class="ab q"><div><div class="bl" aria-hidden="false"><p class="be b ij ik bj"><a class="af ag ah ai aj ak al am an ao ap aq ar il" data-testid="authorName" rel="noopener follow" href="/@dagalpin?source=post_page-----2cb821aebdc9--------------------------------">Daniel Galpin</a></p></div></div></div><span class="im in" aria-hidden="true"><span class="be b bf z hi">·</span></span><p class="be b ij ik hi"><span><a class="io ip ah ai aj ak al am an ao ap aq ar iq ir is" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F2e0fc9a4a8c2&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fnow-in-android-93-android-14-release-edition-2cb821aebdc9&user=Daniel+Galpin&userId=2e0fc9a4a8c2&source=post_page-2e0fc9a4a8c2----2cb821aebdc9---------------------post_header-----------">Ikuti</a></span></p></div></div></span></div></div><div class="l it"><span class="be b bf z hi"><div class="ab cm iu iv iw"><div class="ix iy ab"><div class="be b bf z hi ab iz"><span class="ja l it">Dipublikasikan di</span><div><div class="bl" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar il ab q" data-testid="publicationName" href="https://medium.com/androiddevelopers?source=post_page-----2cb821aebdc9--------------------------------" rel="noopener follow"><p class="be b bf z jb jc jd je jf jg jh ji bj">Developer Android</p></a></div></div></div><div class="h k"><span class="im in" aria-hidden="true"><span class="be b bf z hi">·</span></span></div></div><span class="be b bf z hi"><div class="ab ae"><span data-testid="storyReadTime">Bacaan 6 menit</span><div class="jj jk l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="be b bf z hi">·</span></span></div></div></span></div></span></div></div></div><div class="ab co jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka"><div class="h k w kq kr q"><div class="ks l"><div class="ab q kt"><div class="pw-multi-vote-icon fo ja ku kv kw"><div class=""><div class="kx ky kz la lb lc ld am le lf lg kw"><svg width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.37.83L12 3.28l.63-2.45h-1.26zM15.42 1.84l-1.18-.39-.34 2.5 1.52-2.1zM9.76 1.45l-1.19.4 1.53 2.1-.34-2.5zM20.25 11.84l-2.5-4.4a1.42 1.42 0 0 0-.93-.64.96.96 0 0 0-.75.18c-.25.19-.4.42-.45.7l.05.05 2.35 4.13c1.62 2.95 1.1 5.78-1.52 8.4l-.46.41c1-.13 1.93-.6 2.78-1.45 2.7-2.7 2.51-5.59 1.43-7.38zM12.07 9.01c-.13-.69.08-1.3.57-1.77l-2.06-2.07a1.12 1.12 0 0 0-1.56 0c-.15.15-.22.34-.27.53L12.07 9z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M14.74 8.3a1.13 1.13 0 0 0-.73-.5.67.67 0 0 0-.53.13c-.15.12-.59.46-.2 1.3l1.18 2.5a.45.45 0 0 1-.23.76.44.44 0 0 1-.48-.25L7.6 6.11a.82.82 0 1 0-1.15 1.15l3.64 3.64a.45.45 0 1 1-.63.63L5.83 7.9 4.8 6.86a.82.82 0 0 0-1.33.9c.04.1.1.18.18.26l1.02 1.03 3.65 3.64a.44.44 0 0 1-.15.73.44.44 0 0 1-.48-.1L4.05 9.68a.82.82 0 0 0-1.4.57.81.81 0 0 0 .24.58l1.53 1.54 2.3 2.28a.45.45 0 0 1-.64.63L3.8 13a.81.81 0 0 0-1.39.57c0 .22.09.43.24.58l4.4 4.4c2.8 2.8 5.5 4.12 8.68.94 2.27-2.28 2.71-4.6 1.34-7.1l-2.32-4.08z"></path></svg></div></div></div><div class="pw-multi-vote-count l lh li lj lk ll lm ln"><p class="be b lo z hi"><span class="ky">--</span></p></div></div></div><div><div class="bl" aria-hidden="false"><button class="ao kx lr ls ab q lt lu lv" aria-label="responses"><svg width="24" height="24" viewBox="0 0 24 24" class="lq"><path d="M18 16.8a7.14 7.14 0 0 0 2.24-5.32c0-4.12-3.53-7.48-8.05-7.48C7.67 4 4 7.36 4 11.48c0 4.13 3.67 7.48 8.2 7.48a8.9 8.9 0 0 0 2.38-.32c.23.2.48.39.75.56 1.06.69 2.2 1.04 3.4 1.04.22 0 .4-.11.48-.29a.5.5 0 0 0-.04-.52 6.4 6.4 0 0 1-1.16-2.65v.02zm-3.12 1.06l-.06-.22-.32.1a8 8 0 0 1-2.3.33c-4.03 0-7.3-2.96-7.3-6.59S8.17 4.9 12.2 4.9c4 0 7.1 2.96 7.1 6.6 0 1.8-.6 3.47-2.02 4.72l-.2.16v.26l.02.3a6.74 6.74 0 0 0 .88 2.4 5.27 5.27 0 0 1-2.17-.86c-.28-.17-.72-.38-.94-.59l.01-.02z"></path></svg><p class="be b lo z hi"><span class="pw-responses-count lp lq">2</span></p></button></div></div></div><div class="ab q kb kc kd ke kf kg kh ki kj kk kl km kn ko kp"><div class="lw k j i d"></div><div class="h k"></div><div class="ec tw cm"><div class="l ae"><div class="ab ca"><div class="eu ew ey tx ty fr ch bg"><div class="ab"><div class="bl bg" aria-hidden="false"><div><div class="bl" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af lt ah ai aj ak al lx an ao ap iq ly lz lv ma mb mc md me s mf mg mh mi mj mk ml u mm mn mo"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0zm9-10a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.38 10.42l-4.6 3.06a.5.5 0 0 1-.78-.41V8.93c0-.4.45-.63.78-.41l4.6 3.06c.3.2.3.64 0 .84z" fill="currentColor"></path></svg><div class="j i d"><p class="be b bf z hi">Dengarkan</p></div></button></div></div></div></div></div></div></div></div><div class="bl" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bl" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af lt ah ai aj ak al lx an ao ap iq ly lz lv ma mb mc md me s mf mg mh mi mj mk ml u mm mn mo"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.22 4.93a.42.42 0 0 1-.12.13h.01a.45.45 0 0 1-.29.08.52.52 0 0 1-.3-.13L12.5 3v7.07a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5V3.02l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.8a.42.42 0 0 1 .07.5zm-.1.14zm.88 2h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.14c.1.1.15.22.15.35a.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9V8.96c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1z" fill="currentColor"></path></svg><div class="j i d"><p class="be b bf z hi">Bagikan</p></div></button></div></div></div></div></div></div></div></div></div><p id="d249" class="pw-post-body-paragraph mp mq fv mr b gt ms mt mu gw mv mw mx my mz na nb nc nd ne nf ng nh ni nj nk eo bj">Selamat datang di edisi rilis Android 14 spesial dari Now in Android, panduan berkelanjutan Anda tentang apa yang baru dan penting dalam dunia pengembangan Android.</p><figure class="nl nm nn no np et">
<div class="nq jb l fo">
<div class="nr ns l">
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F_nSFWfipdgw%3Flist%3DPLWz5rJ2EKKc9AtgKMBBdphI-mrx8XzW56&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D_nSFWfipdgw&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F_nSFWfipdgw%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtube" allowfullscreen="" frameborder="0" height="480" width="854" title="Now in Android: 93 - Android 14, Wear OS 4, Gestures in Jetpack Compose, and more!" class="fr n gh dv bg" scrolling="no"></iframe>
</div>
</div>
</figure><figure class="nl nm nn no np et">
<div class="nq jb l fo">
<div class="nt ns l">
<iframe src="https://cdn.embedly.com/widgets/media.html?src=%2F%2Fhtml5-player.libsyn.com%2Fembed%2Fepisode%2Fid%2F28358765%2Fheight%2F90%2Ftheme%2Fcustom%2Fthumbnail%2Fyes%2Fdirection%2Fforward%2Frender-playlist%2Fno%2Fcustom-color%2F88AA3C%2F&display_name=Libsyn&url=https%3A%2F%2Fnowinandroid.libsyn.com%2F93-android-14-wear-os-4-gestures-in-jetpack-compose-and-more&image=https%3A%2F%2Fassets.libsyn.com%2Fsecure%2Fcontent%2F162938450&key=d04bfffea46d4aeda930ec88cc64b87c&type=text%2Fhtml&schema=libsyn" allowfullscreen="" frameborder="0" height="90" width="680" title="93 - Android 14, Wear OS 4, Gestures in Jetpack Compose, and more!" class="fr n gh dv bg" scrolling="no"></iframe>
</div>
</div>
</figure><p id="649d" class="pw-post-body-paragraph mp mq fv mr b gt ms mt mu gw mv mw mx my mz na nb nc nd ne nf ng nh ni nj nk eo bj">Sebagian besar konten postingan ini tersedia dalam bentuk <a class="af hj" href="https://www.youtube.com/watch?v=_nSFWfipdgw&list=PLWz5rJ2EKKc9AtgKMBBdphI-mrx8XzW56" rel="noopener ugc nofollow" target="_blank">video</a> atau <a class="af hj" href="https://nowinandroid.libsyn.com/93-android-14-wear-os-4-gestures-in-jetpack-compose-and-more" rel="noopener ugc nofollow" target="_blank">podcast</a>, jadi jangan ragu untuk <a class="af hj" href="https://www.youtube.com/watch?v=_nSFWfipdgw&list=PLWz5rJ2EKKc9AtgKMBBdphI-mrx8XzW56" rel="noopener ugc nofollow" target="_blank">menonton</a> atau <a class="af hj" href="https://nowinandroid.libsyn.com/93-android-14-wear-os-4-gestures-in-jetpack-compose-and-more" rel="noopener ugc nofollow" target="_blank">mendengarkan</a> alih-alih membacanya. (Atau lakukan ketiganya untuk membantu Anda mengingat! Tidak akan ada kuis.)</p>
</div>
</div>
</div><div class="ab ca nu nv nw nx" role="separator"><span class="ny bx bl nz oa ob"></span><span class="ny bx bl nz oa ob"></span><span class="ny bx bl nz oa"></span></div><div class="eo ep eq er es">
<div class="ab ca">
<div class="ch bg dx dy dz ea">
<h1 id="d194" class="oc od fv be oe of og gv oh oi oj gy ok ol om on oo op oq or os ot ou ov ow ox bj"><a class="af hj" href="http://android-developers.googleblog.com/2023/10/android-14-is-live-in-aosp.html" rel="noopener ugc nofollow" target="_blank">Android 14 dirilis ke perangkat konsumen dan sudah tersedia di AOSP</a> 🎉</h1><p id="e194" class="pw-post-body-paragraph mp mq fv mr b gt oy mt mu gw oz mw mx my pa na nb nc pb ne nf ng pc ni nj nk eo bj">Kami merilis <a class="af hj" href="https://developer.android.com/about/versions/14" rel="noopener ugc nofollow" target="_blank">Android 14</a> dan mendorong sumber Android 14 ke <a class="af hj" href="https://source.android.com/" rel="noopener ugc nofollow" target="_blank">Proyek Open Source Android</a> (AOSP). Sekali lagi, terima kasih telah mengambil bagian dalam pratinjau developer dan program beta kami, membagikan masukan, dan memastikan aplikasi Anda memberikan pengalaman yang luar biasa di Android 14.</p><p id="ea38" class="pw-post-body-paragraph mp mq fv mr b gt ms mt mu gw mv mw mx my mz na nb nc nd ne nf ng nh ni nj nk eo bj"><a class="af hj" href="http://android-developers.googleblog.com/2023/10/android-14-is-live-in-aosp.html" rel="noopener ugc nofollow" target="_blank">Postingan</a> ini membahas beberapa dampak perubahan performa dan efisiensi di Android 14; menjelaskan cara membekukan aplikasi yang di-cache, mengoptimalkan siaran, dan mengurangi jejak memori kode ART yang memungkinkan Android meningkatkan batas maksimum untuk aplikasi yang di-cache, sehingga cold start menjadi lebih sedikit; lebih sedikit cold start berarti peluncuran aplikasi lebih cepat dan menggunakan lebih sedikit daya.</p><p id="964f" class="pw-post-body-paragraph mp mq fv mr b gt ms mt mu gw mv mw mx my mz na nb nc nd ne nf ng nh ni nj nk eo bj">Postingan ini juga mencakup <a class="af hj" href="https://developer.android.com/about/versions/14/behavior-changes-all" rel="noopener ugc nofollow" target="_blank">perubahan perilaku</a> utama Android 14 yang penting untuk diuji, seperti <a class="af hj" href="https://developer.android.com/about/versions/14/behavior-changes-all#non-linear-font-scaling" rel="noopener ugc nofollow" target="_blank">penskalaan font non-linier hingga 200%</a>, <a class="af hj" href="https://developer.android.com/about/versions/14/behavior-changes-all#secure-fsi" rel="noopener ugc nofollow" target="_blank">mengamankan notifikasi Intent layar penuh</a>, dan <a class="af hj" href="https://developer.android.com/about/versions/14/behavior-changes-all#schedule-exact-alarms" rel="noopener ugc nofollow" target="_blank">alarm yang tepat ditolak secara default</a>. Artikel ini juga membahas <a class="af hj" href="https://developer.android.com/about/versions/14/behavior-changes-all#partial-photo-video-access" rel="noopener ugc nofollow" target="_blank">pemberian akses parsial ke foto dan video</a>, dan merekomendasikan penggunaan izin baru <code class="cw pd pe pf pg b"><a class="af hj" href="https://developer.android.com/reference/android/Manifest.permission#READ_MEDIA_VISUAL_USER_SELECTED" rel="noopener ugc nofollow" target="_blank">READ_MEDIA_VISUAL_USER_SELECTED</a></code> untuk <a class="af hj" href="https://android-developers.googleblog.com/2023/08/choosing-right-storage-experience.html" rel="noopener ugc nofollow" target="_blank">mengoptimalkan pengalaman pengguna</a>.</p><p id="d830" class="pw-post-body-paragraph mp mq fv mr b gt ms mt mu gw mv mw mx my mz na nb nc nd ne nf ng nh ni nj nk eo bj">Blog ini membahas kemampuan Android 14 yang baru, seperti <a class="af hj" href="https://developer.android.com/guide/topics/resources/app-languages" rel="noopener ugc nofollow" target="_blank">preferensi bahasa per aplikasi</a> dinamis, <a class="af hj" href="https://developer.android.com/reference/androidx/core/text/util/LocalePreferences" rel="noopener ugc nofollow" target="_blank">preferensi regional</a>, <a class="af hj" href="https://developer.android.com/reference/androidx/core/text/util/LocalePreferences" rel="noopener ugc nofollow" target="_blank">Grammatical Inflection API</a>, <a class="af hj" href="https://developer.android.com/guide/topics/media/hdr-image-format" rel="noopener ugc nofollow" target="_blank">gambar Ultra HDR</a>, <a class="af hj" href="https://developer.android.com/training/camera/camera-extensions" rel="noopener ugc nofollow" target="_blank">Ekstensi Kamera</a> yang sudah diupgrade, <a class="af hj" href="https://developer.android.com/about/versions/14/features#lossless-usb-audio" rel="noopener ugc nofollow" target="_blank">audio USB lossless</a>, menggambar dengan <a class="af hj" href="https://developer.android.com/reference/kotlin/android/graphics/Mesh" rel="noopener ugc nofollow" target="_blank">mesh kustom</a>, Canvas <code class="cw pd pe pf pg b"><a class="af hj" href="https://developer.android.com/reference/android/graphics/HardwareBufferRenderer" rel="noopener ugc nofollow" target="_blank">HardwareBufferRenderer</a></code>, lembar <a class="af hj" href="https://developer.android.com/about/versions/14/features#add-custom-actions" rel="noopener ugc nofollow" target="_blank">tindakan khusus</a> + <a class="af hj" href="https://developer.android.com/about/versions/14/features#publish-dynamic-shortcuts" rel="noopener ugc nofollow" target="_blank">peringkat yang ditingkatkan</a>, <a class="af hj" href="https://developer.android.com/about/versions/14/features#predictive-back-animations" rel="noopener ugc nofollow" target="_blank">animasi sistem kembali prediktif</a> lintas aktivitas dan lintas tugas baru, dan banyak lagi. Ini juga mencakup update Android 14 yang tersedia untuk aplikasi yang berjalan pada rilis Android sebelumnya, seperti dukungan untuk <a class="af hj" href="https://developer.android.com/about/versions/14/features#core-libraries" rel="noopener ugc nofollow" target="_blank">OpenJDK 17</a>, <a class="af hj" href="https://developer.android.com/training/sign-in/passkeys" rel="noopener ugc nofollow" target="_blank">Credential Manager</a> (dengan <a class="af hj" href="https://developer.android.com/design/ui/mobile/guides/patterns/passkeys" rel="noopener ugc nofollow" target="_blank">Passkeys</a>), dan <a class="af hj" href="https://developer.android.com/health-connect" rel="noopener ugc nofollow" target="_blank">Health Connect</a>.</p><p id="af5c" class="pw-post-body-paragraph mp mq fv mr b gt ms mt mu gw mv mw mx my mz na nb nc nd ne nf ng nh ni nj nk eo bj">Terakhir, postingan ini membahas <a class="af hj" href="https://developer.android.com/build/sdk-upgrade-assistant" rel="noopener ugc nofollow" target="_blank">asisten upgrade Android SDK</a> dalam Android Studio, dan cara menggunakannya untuk membantu Anda mengupdate aplikasi untuk versi targetSDK terbaru.</p><div class="ph pi pj pk pl pm"><a href="http://android-developers.googleblog.com/2023/10/android-14-is-live-in-aosp.html?source=post_page-----2cb821aebdc9--------------------------------" rel="noopener ugc nofollow" target="_blank"><div class="pn ab it"><div class="po ab cn ca pp pq"><h2 class="be fw ij z jb pr jd je ps jg ji fu bj">Android 14 sudah tersedia di AOSP</h2><div class="pt l"><h3 class="be b ij z jb pr jd je ps jg ji hi">Android 14 diluncurkan untuk perangkat Pixel tertentu mulai hari ini, dan akan tersedia akhir tahun ini di beberapa perangkat…</h3></div><div class="pu l"><p class="be b lo z jb pr jd je ps jg ji hi">android-developers.googleblog.com</p></div></div><div class="pv l"><div class="pw l px py pz pv qa fr pm"></div></div></div></a></div><h1 id="a985" class="oc od fv be oe of qb gv oh oi qc gy ok ol qd on oo op qe or os ot qf ov ow ox bj"><a class="af hj" href="http://android-developers.googleblog.com/2023/10/wear-os-4-is-now-stable-and-available-on-google-pixel-watch-2.html" rel="noopener ugc nofollow" target="_blank">Wear OS 4 sekarang tersedia di Google Pixel Watch 2!</a> 🎇</h1><p id="d562" class="pw-post-body-paragraph mp mq fv mr b gt oy mt mu gw oz mw mx my pa na nb nc pb ne nf ng pc ni nj nk eo bj">Kami mengumumkan bahwa Pixel Watch 2 telah tersedia dan hadir dengan <a class="af hj" href="https://developer.android.com/training/wearables/versions/4" rel="noopener ugc nofollow" target="_blank">Wear OS 4</a>, bergabung dengan perangkat Samsung Galaxy Watch seri 4, 5, dan 6 pada platform ini. Pixel Watch generasi pertama akan menerima update sistem untuk Wear OS 4 <a class="af hj" href="https://support.google.com/googlepixelwatch/thread/239630266/google-pixel-watch-update-oct-2023?hl=en&sjid=14757185880201799579-NA" rel="noopener ugc nofollow" target="_blank">dalam beberapa minggu mendatang</a> secara bertahap tergantung operator dan perangkat. Wear OS 4 menyertakan <a class="af hj" href="https://developer.android.com/training/wearables/wff" rel="noopener ugc nofollow" target="_blank">Format Tampilan Jam</a> XML deklaratif, mendukung transfer data dari satu jam Wear OS ke jam lainnya menggunakan <a class="af hj" href="https://developer.android.com/training/wearables/data/cloud-backup-restore" rel="noopener ugc nofollow" target="_blank">pencadangan dan pemulihan cloud</a>, sehingga pengguna dapat memindahkan jam mereka ke ponsel baru tanpa perlu melakukan reset ke setelan pabrik, menawarkan kemampuan yang disempurnakan untuk kartu, dan lainnya.</p><p id="b6b7" class="pw-post-body-paragraph mp mq fv mr b gt ms mt mu gw mv mw mx my mz na nb nc nd ne nf ng nh ni nj nk eo bj">Wear OS 3 berbasis Android 11, sedangkan Wear OS 4 berbasis Android 13, sehingga aplikasi Anda harus menangani perubahan perilaku sistem yang terdapat di <a class="af hj" href="https://developer.android.com/about/versions/12/behavior-changes-all" rel="noopener ugc nofollow" target="_blank">Android 12</a> dan <a class="af hj" href="https://developer.android.com/about/versions/13/behavior-changes-all" rel="noopener ugc nofollow" target="_blank">Android 13</a>; pastikan meninjau <a class="af hj" href="https://developer.android.com/training/wearables/versions/4/changes" rel="noopener ugc nofollow" target="_blank">perubahan perilaku</a> dan mempelajari cara berinteraksi dengan <a class="af hj" href="https://developer.android.com/training/wearables/versions/4/features" rel="noopener ugc nofollow" target="_blank">fitur-fitur baru</a>. Kami juga merilis image sistem khusus 64-bit yang telah diperbarui untuk <a class="af hj" href="https://developer.android.com/training/wearables/get-started/creating#run-emulator" rel="noopener ugc nofollow" target="_blank">emulator Wear OS</a> mulai <a class="af hj" href="https://developer.android.com/studio/preview" rel="noopener ugc nofollow" target="_blank">Android Studio Hedgehog</a> untuk membantu Anda menguji aplikasi pada Wear OS 4.</p><div class="ph pi pj pk pl pm"><a href="http://android-developers.googleblog.com/2023/10/wear-os-4-is-now-stable-and-available-on-google-pixel-watch-2.html?source=post_page-----2cb821aebdc9--------------------------------" rel="noopener ugc nofollow" target="_blank"><div class="pn ab it"><div class="po ab cn ca pp pq"><h2 class="be fw ij z jb pr jd je ps jg ji fu bj">Wear OS 4 sekarang sudah stabil dan tersedia di Google Pixel Watch 2!</h2><div class="pt l"><h3 class="be b ij z jb pr jd je ps jg ji hi">Wear OS 4 sekarang sudah tersedia, menawarkan beberapa kemampuan untuk mempermudah pengembangan perangkat wearable yang dapat diandalkan dan bermanfaat...</h3></div><div class="pu l"><p class="be b lo z jb pr jd je ps jg ji hi">android-developers.googleblog.com</p></div></div><div class="pv l"><div class="qg l px py pz pv qa fr pm"></div></div></div></a></div><h1 id="7a45" class="oc od fv be oe of qb gv oh oi qc gy ok ol qd on oo op qe or os ot qf ov ow ox bj"><a class="af hj" href="https://www.youtube.com/watch?v=1tkVjBxdGrk" rel="noopener ugc nofollow" target="_blank">Gestur di Jetpack Compose</a> 🤟</h1><p id="8866" class="pw-post-body-paragraph mp mq fv mr b gt oy mt mu gw oz mw mx my pa na nb nc pb ne nf ng pc ni nj nk eo bj"><a class="qh io qi" href="https://medium.com/u/7c4e8b4f1538?source=post_page-----2cb821aebdc9--------------------------------" rel="noopener" target="_blank">Jolanda</a> membuat <a class="af hj" href="https://www.youtube.com/watch?v=1tkVjBxdGrk" rel="noopener ugc nofollow" target="_blank">video mendalam</a> tentang pemanfaatan beragam gestur di Jetpack Compose. Video ini berfokus pada penggunaan <a class="af hj" href="https://developer.android.com/jetpack/compose/touch-input/pointer-input/understand-gestures#add-specific" rel="noopener ugc nofollow" target="_blank">pengubah gestur</a> dan <a class="af hj" href="https://developer.android.com/jetpack/compose/touch-input/pointer-input/understand-gestures#add-custom" rel="noopener ugc nofollow" target="_blank">pengenal gestur</a>, yang dimulai dengan ringkasan toolbox untuk <a class="af hj" href="https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/package-summary#(androidx.compose.ui.Modifier).pointerInput(kotlin.Any,kotlin.Any,kotlin.coroutines.SuspendFunction1)" rel="noopener ugc nofollow" target="_blank">pointerInput</a> dan pengenal gestur terkait, membandingkan dan membedakannya dengan pengubah <a class="af hj" href="https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).clickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.Function0)" rel="noopener ugc nofollow" target="_blank">clickable</a>, <a class="af hj" href="https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).combinedClickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,kotlin.String,kotlin.Function0,kotlin.Function0,kotlin.Function0)" rel="noopener ugc nofollow" target="_blank">combined clickable</a>, <a class="af hj" href="https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).draggable(androidx.compose.foundation.gestures.DraggableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.coroutines.SuspendFunction2,kotlin.coroutines.SuspendFunction2,kotlin.Boolean)" rel="noopener ugc nofollow" target="_blank">draggable</a>, <a class="af hj" href="https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).scrollable(androidx.compose.foundation.gestures.ScrollableState,androidx.compose.foundation.gestures.Orientation,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource)" rel="noopener ugc nofollow" target="_blank">scrollable</a>, dan <a class="af hj" href="https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).transformable(androidx.compose.foundation.gestures.TransformableState,kotlin.Boolean,kotlin.Boolean)" rel="noopener ugc nofollow" target="_blank">transformable</a>. Kemudian, dilanjutkan dengan tur terpandu untuk melakukan beragam interaksi gestur di Compose, mendemonstrasikan semua pola gestur yang terkait dengan kotak foto yang memungkinkan penekanan lama untuk memilih/multipilih, serta tampilan foto yang memungkinkan kita melakukan zoom, menggeser, dan ketuk-untuk-zoom.</p><figure class="nl nm nn no np et">
<div class="nq jb l fo">
<div class="nr ns l">
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F1tkVjBxdGrk&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D1tkVjBxdGrk&image=http%3A%2F%2Fi.ytimg.com%2Fvi%2F1tkVjBxdGrk%2Fhqdefault.jpg&key=d04bfffea46d4aeda930ec88cc64b87c&type=text%2Fhtml&schema=youtube" allowfullscreen="" frameborder="0" height="480" width="854" title="" class="fr n gh dv bg" scrolling="no"></iframe>
</div>
</div>
</figure><h1 id="247a" class="oc od fv be oe of qb gv oh oi qc gy ok ol qd on oo op qe or os ot qf ov ow ox bj">Artikel 📚</h1><p id="668c" class="pw-post-body-paragraph mp mq fv mr b gt oy mt mu gw oz mw mx my pa na nb nc pb ne nf ng pc ni nj nk eo bj"><a class="qh io qi" href="https://medium.com/u/7135eabf926a?source=post_page-----2cb821aebdc9--------------------------------" rel="noopener" target="_blank">Chris</a> membahas <a class="af hj" rel="noopener" href="/androiddevelopers/device-streaming-the-latest-devices-you-need-when-you-need-them-4472d28d0c57">Streaming Perangkat di Android Studio</a>, sebuah layanan akses awal yang didukung oleh Firebase yang memungkinkan Anda berinteraksi secara manual dan menguji aplikasi Anda pada perangkat fisik nyata yang terletak di pusat data aman milik Google secara langsung dari dalam Android Studio. Pilih perangkat yang Anda inginkan, hubungkan, dan dalam sekejap, Anda memiliki koneksi ADB langsung ke perangkat, sehingga Anda dapat menggunakan alat favorit baik di dalam maupun di luar studio, seperti Logcat, debugger, Profiler, alat desain UI, dan lainnya — seperti yang Anda lakukan dengan perangkat lokal. Untuk mempelajari lebih lanjut dan mendaftar program ini, kunjungi <a class="af hj" href="https://developer.android.com/studio/preview/android-device-streaming" rel="noopener ugc nofollow" target="_blank">halaman pendaftaran</a>.</p><div class="ph pi pj pk pl pm"><a rel="noopener follow" target="_blank" href="/androiddevelopers/device-streaming-the-latest-devices-you-need-when-you-need-them-4472d28d0c57?source=post_page-----2cb821aebdc9--------------------------------"><div class="pn ab it"><div class="po ab cn ca pp pq"><h2 class="be fw ij z jb pr jd je ps jg ji fu bj">Streaming Perangkat: Perangkat terbaru yang Anda butuhkan, saat Anda membutuhkannya</h2><div class="pt l"><h3 class="be b ij z jb pr jd je ps jg ji hi">Pelajari lebih lanjut tentang Streaming Perangkat di Android Studio — layanan baru yang didukung oleh Firebase.</h3></div><div class="pu l"><p class="be b lo z jb pr jd je ps jg ji hi">medium.com</p></div></div><div class="pv l"><div class="qj l px py pz pv qa fr pm"></div></div></div></a></div><p id="c533" class="pw-post-body-paragraph mp mq fv mr b gt ms mt mu gw mv mw mx my mz na nb nc nd ne nf ng nh ni nj nk eo bj">#WeArePlay meliput kisah <a class="af hj" href="http://android-developers.googleblog.com/2023/10/weareplay-meet-solape-and-yomi-from-nigeria-more-stories-from-around-the-world.html" rel="noopener ugc nofollow" target="_blank">Solape & Yomi dari Lagos, Nigeria</a> dan bagaimana aplikasi mereka HerVest memberdayakan perempuan dengan memberi mereka akses yang lebih besar ke layanan keuangan.</p><div class="ph pi pj pk pl pm"><a href="http://android-developers.googleblog.com/2023/10/weareplay-meet-solape-and-yomi-from-nigeria-more-stories-from-around-the-world.html?source=post_page-----2cb821aebdc9--------------------------------" rel="noopener ugc nofollow" target="_blank"><div class="pn ab it"><div class="po ab cn ca pp pq"><h2 class="be fw ij z jb pr jd je ps jg ji fu bj">#WeArePlay | Temui Solape dan Yomi dari Nigeria. Cerita lainnya dari seluruh dunia</h2><div class="pt l"><h3 class="be b ij z jb pr jd je ps jg ji hi">Cerita #WeArePlay baru dari Nigeria, Singapura, London, dan Cile. Temui orang-orang inspiratif di balik aplikasi dan game...</h3></div><div class="pu l"><p class="be b lo z jb pr jd je ps jg ji hi">android-developers.googleblog.com</p></div></div><div class="pv l"><div class="qk l px py pz pv qa fr pm"></div></div></div></a></div><figure class="nl nm nn no np et">
<div class="nq jb l fo">
<div class="nr ns l">
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FmLUwNXOTaT4%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DmLUwNXOTaT4&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FmLUwNXOTaT4%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtube" allowfullscreen="" frameborder="0" height="480" width="854" title="#WeArePlay | Solape & Yomi | HerVest | Nigeria" class="fr n gh dv bg" scrolling="no"></iframe>
</div>
</div>
</figure><h1 id="cf89" class="oc od fv be oe of qb gv oh oi qc gy ok ol qd on oo op qe or os ot qf ov ow ox bj">Video 📹</h1><p id="e58d" class="pw-post-body-paragraph mp mq fv mr b gt oy mt mu gw oz mw mx my pa na nb nc pb ne nf ng pc ni nj nk eo bj">Kami memiliki beberapa video pendek yang menarik, termasuk <a class="af hj" href="https://www.youtube.com/watch?v=WxCoW9v6xNE" rel="noopener ugc nofollow" target="_blank">Membangun UI untuk semua faktor bentuk</a>, pengingat bahwa Jetpack Compose bisa digunakan untuk ponsel, perangkat foldable, tablet, jam, dan TV - serta laptop dan PC.</p><figure class="nl nm nn no np et">
<div class="nq jb l fo">
<div class="nr ns l">
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FWxCoW9v6xNE&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DWxCoW9v6xNE&image=http%3A%2F%2Fi.ytimg.com%2Fvi%2FWxCoW9v6xNE%2Fhqdefault.jpg&key=d04bfffea46d4aeda930ec88cc64b87c&type=text%2Fhtml&schema=youtube" allowfullscreen="" frameborder="0" height="480" width="854" title="" class="fr n gh dv bg" scrolling="no"></iframe>
</div>
</div>
</figure><p id="14ae" class="pw-post-body-paragraph mp mq fv mr b gt ms mt mu gw mv mw mx my mz na nb nc nd ne nf ng nh ni nj nk eo bj">Kami membahas 3 alasan mengapa Anda harus menggunakan <a class="af hj" href="https://www.youtube.com/watch?v=5msO3qy7F2g" rel="noopener ugc nofollow" target="_blank">Jetpack WindowManager</a> di aplikasi Anda saat ini:</p><ul class=""><li id="bb84" class="mp mq fv mr b gt ms mt mu gw mv mw mx my ql na nb nc qm ne nf ng qn ni nj nk qo qp qq bj"><a class="af hj" href="https://developer.android.com/reference/androidx/window/core/layout/WindowSizeClass" rel="noopener ugc nofollow" target="_blank">WindowSize</a> — Dengan mode tampilan baru, seperti multi-aplikasi, Anda harus memeriksa berapa banyak ruang jendela yang saat ini tersedia untuk aplikasi ketimbang menggunakan ukuran tampilan perangkat, lalu menggunakan <a class="af hj" href="https://developer.android.com/reference/androidx/window/core/layout/WindowSizeClass" rel="noopener ugc nofollow" target="_blank">class WindowSize</a> untuk mengimplementasikan tata letak adaptif.</li><li id="94c4" class="mp mq fv mr b gt qr mt mu gw qs mw mx my qt na nb nc qu ne nf ng qv ni nj nk qo qp qq bj">Dioptimalkan untuk perangkat foldable — Anda bisa menggunakan <a class="af hj" href="https://developer.android.com/reference/kotlin/androidx/window/layout/WindowInfoTracker" rel="noopener ugc nofollow" target="_blank">WindowInfoTracker</a> untuk melakukan kueri status, occlusionType, orientasi, batas <a class="af hj" href="https://developer.android.com/reference/androidx/window/layout/FoldingFeature" rel="noopener ugc nofollow" target="_blank">FoldingFeatures</a> untuk mengimplementasikan fitur-fitur seperti mode di atas meja</li><li id="68a0" class="mp mq fv mr b gt qr mt mu gw qs mw mx my qt na nb nc qu ne nf ng qv ni nj nk qo qp qq bj">Menampilkan dua aktivitas berdampingan — Library ini juga menyediakan API <a class="af hj" href="https://developer.android.com/guide/topics/large-screens/activity-embedding" rel="noopener ugc nofollow" target="_blank">ActivityEmbedding</a> untuk mengimplementasikan beragam fitur seperti tata letak Daftar/Detail dengan sedikit perubahan kode serta menyematkan aktivitas dari aplikasi lain ke dalam aplikasi Anda, sehingga pengguna dapat melakukan tugas lain tanpa kehilangan konteks.</li></ul><p id="36dd" class="pw-post-body-paragraph mp mq fv mr b gt ms mt mu gw mv mw mx my mz na nb nc nd ne nf ng nh ni nj nk eo bj">Rilis mendatang rencananya akan menambahkan API untuk mode tampilan serentak, misalnya, mengambil foto selfie menggunakan kamera belakang yang lebih baik.</p><figure class="nl nm nn no np et">
<div class="nq jb l fo">
<div class="nr ns l">
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F5msO3qy7F2g%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D5msO3qy7F2g&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F5msO3qy7F2g%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtube" allowfullscreen="" frameborder="0" height="480" width="854" title="Jetpack WindowManager" class="fr n gh dv bg" scrolling="no"></iframe>
</div>
</div>
</figure><p id="3eb2" class="pw-post-body-paragraph mp mq fv mr b gt ms mt mu gw mv mw mx my mz na nb nc nd ne nf ng nh ni nj nk eo bj">Terakhir, kami membahas kapan waktu yang tepat menggunakan <a class="af hj" href="https://www.youtube.com/watch?v=to0rn6t_IaY" rel="noopener ugc nofollow" target="_blank">penagihan Google Pay vs. Google Play</a>. Sistem penagihan Google Play adalah layanan yang memungkinkan Anda menjual produk dan konten digital di aplikasi Android, sementara penagihan Google Pay mencakup hal-hal lain yang mungkin dijual aplikasi Anda seperti konten fisik.</p><figure class="nl nm nn no np et">
<div class="nq jb l fo">
<div class="nr ns l">
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fto0rn6t_IaY%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dto0rn6t_IaY&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fto0rn6t_IaY%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtube" allowfullscreen="" frameborder="0" height="480" width="854" title="Google Pay vs. Google Play billing" class="fr n gh dv bg" scrolling="no"></iframe>
</div>
</div>
</figure><h1 id="5d6e" class="oc od fv be oe of qb gv oh oi qc gy ok ol qd on oo op qe or os ot qf ov ow ox bj"><a class="af hj" href="https://developer.android.com/jetpack/androidx/versions/all-channel" rel="noopener ugc nofollow" target="_blank">Rilis Android Jetpack (AndroidX)</a> 🚀</h1><p id="77e2" class="pw-post-body-paragraph mp mq fv mr b gt oy mt mu gw oz mw mx my pa na nb nc pb ne nf ng pc ni nj nk eo bj">Kami melakukan beberapa kali peluncuran di Android Jetpack:</p><p id="b8cd" class="pw-post-body-paragraph mp mq fv mr b gt ms mt mu gw mv mw mx my mz na nb nc nd ne nf ng nh ni nj nk eo bj"><a class="af hj" href="https://developer.android.com/jetpack/androidx/releases/browser#1.7.0-alpha01" rel="noopener ugc nofollow" target="_blank">Browser 1.7 alpha01</a> menambahkan banyak API baru yang menyediakan lebih banyak kontrol untuk <a class="af hj" href="https://developer.android.com/reference/androidx/browser/customtabs/package-summary" rel="noopener ugc nofollow" target="_blank">CustomTabs</a>, termasuk mengaktifkan bookmark dan tombol download di menu tambahan, mengaktifkan pengiriman URL awal ke aplikasi pengendali eksternal, menentukan bahasa target yang akan memicu UI Terjemahan, dan lainnya.</p><div class="ph pi pj pk pl pm"><a href="https://developer.android.com/jetpack/androidx/releases/browser?source=post_page-----2cb821aebdc9--------------------------------#1.7.0-alpha01" rel="noopener ugc nofollow" target="_blank"><div class="pn ab it"><div class="po ab cn ca pp pq"><h2 class="be fw ij z jb pr jd je ps jg ji fu bj">Browser | Jetpack | Android Developers</h2><div class="pt l"><h3 class="be b ij z jb pr jd je ps jg ji hi">Menampilkan halaman web di browser default pengguna. Untuk menambahkan dependensi pada Browser, Anda harus menambahkan Google Maven…</h3></div><div class="pu l"><p class="be b lo z jb pr jd je ps jg ji hi">developer.android.com</p></div></div><div class="pv l"><div class="qw l px py pz pv qa fr pm"></div></div></div></a></div><p id="0fbf" class="pw-post-body-paragraph mp mq fv mr b gt ms mt mu gw mv mw mx my mz na nb nc nd ne nf ng nh ni nj nk eo bj"><a class="af hj" href="https://developer.android.com/jetpack/androidx/releases/collection#1.4.0-alpha01" rel="noopener ugc nofollow" target="_blank">Collection 1.4 alpha01</a> menambahkan koleksi efisiensi tinggi seperti <a class="af hj" href="https://developer.android.com/reference/kotlin/androidx/collection/ScatterMap" rel="noopener ugc nofollow" target="_blank">ScatterMap</a>, <a class="af hj" href="https://developer.android.com/reference/kotlin/androidx/collection/ScatterSet" rel="noopener ugc nofollow" target="_blank">ScatterSet</a>, dan <a class="af hj" href="https://developer.android.com/reference/kotlin/androidx/collection/ObjectList" rel="noopener ugc nofollow" target="_blank">ObjectList</a> yang menggabungkan overhead alokasi rendah dengan performa tinggi, bersama dengan koleksi yang menyimpan primitif tanpa kotak.</p><div class="ph pi pj pk pl pm"><a href="https://developer.android.com/jetpack/androidx/releases/collection?source=post_page-----2cb821aebdc9--------------------------------#1.4.0-alpha01" rel="noopener ugc nofollow" target="_blank"><div class="pn ab it"><div class="po ab cn ca pp pq"><h2 class="be fw ij z jb pr jd je ps jg ji fu bj">Collection | Jetpack | Android Developers</h2><div class="pt l"><h3 class="be b ij z jb pr jd je ps jg ji hi">Mengurangi dampak memori dari koleksi lama dan baru yang berukuran kecil. Untuk menambahkan dependensi pada Collection, Anda harus…</h3></div><div class="pu l"><p class="be b lo z jb pr jd je ps jg ji hi">developer.android.com</p></div></div><div class="pv l"><div class="qx l px py pz pv qa fr pm"></div></div></div></a></div><p id="867d" class="pw-post-body-paragraph mp mq fv mr b gt ms mt mu gw mv mw mx my mz na nb nc nd ne nf ng nh ni nj nk eo bj">Anda bisa melihat semua catatan rilis AndroidX <a class="af hj" href="https://developer.android.com/jetpack/androidx/versions/all-channel" rel="noopener ugc nofollow" target="_blank">di sini</a>.</p><h1 id="ceb1" class="oc od fv be oe of qb gv oh oi qc gy ok ol qd on oo op qe or os ot qf ov ow ox bj">Nah sekarang… 👋</h1><p id="ed0a" class="pw-post-body-paragraph mp mq fv mr b gt oy mt mu gw oz mw mx my pa na nb nc pb ne nf ng pc ni nj nk eo bj">Itulah informasi untuk minggu ini mengenai peluncuran <a class="af hj" href="http://android-developers.googleblog.com/2023/10/android-14-is-live-in-aosp.html" rel="noopener ugc nofollow" target="_blank">Android 14</a>, <a class="af hj" href="http://android-developers.googleblog.com/2023/10/wear-os-4-is-now-stable-and-available-on-google-pixel-watch-2.html" rel="noopener ugc nofollow" target="_blank">Wear OS 4</a> dan rilis Pixel Watch 2, <a class="af hj" href="https://www.youtube.com/watch?v=1tkVjBxdGrk" rel="noopener ugc nofollow" target="_blank">Gestur Jetpack Compose</a>, <a class="af hj" rel="noopener" href="/androiddevelopers/device-streaming-the-latest-devices-you-need-when-you-need-them-4472d28d0c57">Streaming Perangkat Android Studio</a>, update <a class="af hj" href="https://developer.android.com/jetpack/androidx/releases/browser#1.7.0-alpha01" rel="noopener ugc nofollow" target="_blank">Browser</a> + <a class="af hj" href="https://developer.android.com/jetpack/androidx/releases/collection#1.4.0-alpha01" rel="noopener ugc nofollow" target="_blank">Collection</a>, dan lainnya!</p><p id="f798" class="pw-post-body-paragraph mp mq fv mr b gt ms mt mu gw mv mw mx my mz na nb nc nd ne nf ng nh ni nj nk eo bj">Jangan lupa segera kembali untuk mengetahui informasi terbaru dari dunia developer Android! 💫</p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</article>
</body>
</html>Google Developers Indonesiahttp://www.blogger.com/profile/14521003048806621204noreply@blogger.com